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>标签两种书写方式
<!--写法1：label标签包裹内容，不包裹表单控件。设置label标签的for属性值和表单控件中的id属性值一致--><input type="radio" id="man"><label for="man">男</label>
<!--写法2：使用label标签包裹表单控件和内容--><label><input type="radio">女</label>
4.button元素
①定义： <button> 标签用于定义一个按钮。
使用 input 元素也可以设置成按钮的样式，但是在 button 元素的内部，你可以放置文本或图像，而 input 元素则不行。
请始终位 button 元素设置 type 属性，因为不同的浏览器为其指定的默认值可能不同
②部分属性值、
③注意：button按钮要配合form属性使用，明确按钮控制区域。
案例
案例一
<!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>
案例一效果图
案例二
<!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>
案例二效果图
