B站《前端Web开发HTML5+CSS3+移动web视频教程》第二天课程学习
1.input元素
①定义：
<input> 标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
②type属性
更多属性详情参考https://man.ilovefishc.com/pageHTML5/input.html
③注意：
1.单选框radio要加上name属性，name值相同则划分为同一组，实现唯一单选。
2.单选框和复选框添加checked属性实现默认选中。
3.默认情况下，文件上传表单只能上传一个文件，添加multiple属性，可以实现文件多选功能。
2.select元素
①定义：
<select> 标签用于创建单选或多选菜单。
select 元素中的 <option> 标签用于定义列表中的可用选项。
②属性：
③注意：下拉表单默认显示的是第一个option的内容，添加selected属性可以指定默认值。
3.label元素
①定义：
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它绑定了文字和表单控件的关系，增大了表单控件的点击范围。
②属性
③<label>标签两种书写方式
html
<!--写法1：label标签包裹内容，不包裹表单控件。设置label标签的for属性值和表单控件中的id属性值一致-->
<input type="radio" id="man">
<label for="man">男</label>
html
<!--写法2：使用label标签包裹表单控件和内容-->
<label><input type="radio">女</label>4.button元素
①定义： <button> 标签用于定义一个按钮。
使用 input 元素也可以设置成按钮的样式，但是在 button 元素的内部，你可以放置文本或图像，而 input 元素则不行。
请始终位 button 元素设置 type 属性，因为不同的浏览器为其指定的默认值可能不同
②部分属性值、
③注意：button按钮要配合form属性使用，明确按钮控制区域。
案例
案例一
html
<!DOCTYPE html>
<html>
<head>
<title>新闻表单</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,intial-scale=1.0">
</head>
<body>
<ul>
<li>
<img src=" http://society.people.com.cn/mediafile/pic/20241207/76/6119459486323415412.jpg" height="100px">
<h3>甘肃定西：冬日里的牲畜交易市场</h3>
</li>
<li>
<img src="http://society.people.com.cn/mediafile/pic/20241207/11/13087324307336970243.jpg" height="100px">
<h3>采金为丝巧编织</h3>
</li>
<li>
<img src="http://society.people.com.cn/NMediaFile/2024/1205/MAIN1733360142195L6VULIJXAZ.jpg" height="100px">
<h3>冬日颐和园</h3>
</li>
</ul>
</body>
</html>案例一效果图
案例二
html
<!DOCTYPE html>
<html>
<head>
<title>注册页面</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, intial-scale=1.0">
</head>
<body>
<h3>注册信息</h3>
<form>
<h4>个人信息</h4>
<label>姓名：<input type="text" placeholder="请输入真实姓名"></label>
<br><br>
<label>密码：<input type="password" placeholder="请输入密码"></label>
<br><br>
<label>确认密码：<input type="password" placeholder="请输入确认密码"></label>
<br><br>
<label>性别：</label>
<label></label><input type="radio" name="gender">男</label>
<label ><input type="radio" name="gender">女</label>
<br><br>
<h4>教育经历</h4>
<label>最高学历：</label>
<select >
<option>本科</option>
<option>硕士</option>
<option selected>博士</option>
</select>
<br><br>
<label>学校名称：</label>
<input type="text" placeholder="最高学历学校">
<br><br>
<label>所学专业：</label>
<input type="text" placeholder="最高学历专业">
<br><br>
<label>在校时间：</label>
<select >
<option>2020</option>
<option>2019</option>
<option>2018</option>
<option>2017</option>
<option>2016<option>
</select>
--
<select >
<option>2024</option>
<option>2023</option>
<option>2022</option>
<option>2021</option>
<option>2020<option>
</select><br><br>
<h4>工作经历</h4>
<label>公司名称：</label><input type="text">
<br><br>
<label>工作描述：</label>
<textarea >主要工作内容</textarea>
<br><br>
<input type="checkbox"><label>已阅读并已同意以下协议:</label>
<ul>
<li><a href="#">《用户服务协议》</a></li>
<li><a href="#">《隐私政策》</a></li>
</ul> <br><br>
<button type="submit">免费注册</button>
<button type="reset">重新填写</button>
</form>
</body>
</html>案例二效果图
