文章目录
- 1、input
- 1.1 input的占位文案
- 1.2 单选框
- 1.3 上传文件
- 1.4 多选框
- 2、 下拉菜单
- 3、文本域：多行输入
- 4、label标签：说明与增大点击范围
- 5、按钮与form表单
- 6、无语义布局标签
- 7、有语义的布局标签
- 8、字符实体
- 9、练习：注册页面
1、input
input标签，表单用于收集用户信息，使用场景：
- 登陆页面
- 注册页面
- 搜索区域
如上，表单中有文本框，有选择、单选、多选等，由type属性决定：
<input type="..." >
<body>文本框：<input type="text"><br><br>密码框：<input type="password"><br><br>单选框：<input type="radio"><br><br>多选框：<input type="checkbox"><br><br>上传文件：<input type="file">
</body>
1.1 input的占位文案
文本框和密码框都可以使用，placeholder中写预设的提示文案
<input type="..." placeholder="提示信息">
示例：
昵称：<input type="text" placeholder="请输入注册昵称">
<br><br>
密码：<input type="password" placeholder="请输入密码">
1.2 单选框
如下，name属性值自定义，name相同，说明是同一组的选项，checked表示默认选中，可以不要checked：
性别：<input type="radio" name="sex" checked> 男
<input type="radio" name="sex">女
1.3 上传文件
文件上传表单控件默认只能上传一个文件，添加multiple属性实现文件多选
<input type="file" multiple>
Command按住多选文件：
1.4 多选框
<input type="checkbox" checked> 敲前端代码
示例：
兴趣爱好：
<input type="checkbox" checked>Java
<input type="checkbox">Python
<input type="checkbox">Golang
2、 下拉菜单
select 嵌套 option，父子关系，select 是下拉菜单整体，option是下拉菜单的每一项，默认显示第一项，selected属性实现默认选中功能
效果：
VSCode生成代码的name和id属性，以及option的属性，是用于后面传值用的，先忽略
<select name="" id=""><option value=""></option>
</select>
3、文本域：多行输入
textarea标签，用于多行输入文本（上篇看到，input的text属性不换行）
<textarea>请输入自我评价</textarea>
后面CSS设置文本域尺寸并禁用右下角拖拽变大功能
4、label标签：说明与增大点击范围
用于网页中，某个标签的说明文本，之前，写说明文本“昵称”是这么写的：
昵称：<input type="text" placeholder="请输入注册昵称">
使用label后：
<label>昵称：</label><input type="text" placeholder="请输入注册昵称">
label还可以绑定文字和表单组件的关系，用于增大表单的点击范围，如下面这个单选框，本来要点到小圆点上才生效，修改后，可以让其点到男、女两个字上时也生效，以提高用户体验
写法一：label标签只包裹内容，不包裹表单组件标签，要求label的for属性，等于表单标签的id属性
写法二：label标签包裹文字和表单标签，不需要属性
对比下原始未增大和两种增大写法：
性别：
<input type="radio" name="sex" checked> 男
<input type="radio" name="sex">女性别：
<input type="radio" name="sex" checked id="man">
<label for="man">男</label>
<input type="radio" name="sex" id="woman">
<label for="woman">女</label>
<br><br>性别：
<label><input type="radio" name="sex" checked> 男</label>
<label><input type="radio" name="sex">女</label>
<br><br>
注意，支持label标签增大点击范围的表单组件只有：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等
5、按钮与form表单
<button type="">按钮</button>
type属性取值：
按钮需配合 form 标签(表单区域)才能实现对应的功能，如重置、提交，form用于包裹多种表单输入组件标签：
<form action=""></form>
<body><form action=""><label>昵称：<input type="text" placeholder="请输入注册昵称"></label><br><br>密码：<input type="password" placeholder="请输入密码"><br><br>性别：<label><input type="radio" name="sex" checked> 男</label><label><input type="radio" name="sex">女</label><br><br>兴趣爱好：<input type="checkbox" checked>Java <input type="checkbox">Python<input type="checkbox">Golang<br><br>上传文件：<input type="file" multiple><br><br>居住地：<select><option>北京</option><option>上海</option><option>广州</option><option>深圳</option><option selected>武汉</option></select><br><br><textarea>请输入自我评价</textarea><br><br><button type="reset">重置填写</button><br><br><button type="submit">注册/登陆</button></form>
</body>
点击重置填写，所有信息恢复默认
6、无语义布局标签
用于布局网页，也就是划分网页区域，摆放内容
div：独占一行，是一个大盒子span：不换行，是一个小盒子
直观感受下区别：
<body><div>这是div标签</div><div>这是div标签</div><span>这是span标签</span><span>这是span标签</span>
</body>
7、有语义的布局标签
8、字符实体
在网页中显示预留字符时，用右边的实体名称，一般&开头 ；结尾
- lt 是 less than 的缩写
- gt 是 greater than 的缩写
9、练习：注册页面
写一个注册页面：
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=<device-width>, initial-scale=1.0"><title>Document</title>
</head>
<body><form action=""><h1>注册信息</h1><!--个人信息 --><h2>个人信息</h2><label>昵称：</label><input type="text" placeholder="请输入注册昵称"><br><br>密码：<input type="password" placeholder="请输入密码"><br><br>确认密码：<input type="password" placeholder="请再次确认密码"><br><br><label>性别：</label><label><input type="radio" name="sex" checked> 男</label><label><input type="radio" name="sex">女</label><br><br><label>居住地：</label><select><option>北京</option><option selected>上海</option><option>广州</option><option>深圳</option><option>武汉</option></select><br><br><label>兴趣爱好：</label><input type="checkbox" checked>Java <input type="checkbox">Python<input type="checkbox">Golang <br><br><label>评价：</label><textarea>请输入自我评价</textarea><br><br>附件：<input type="file" multiple><br><br><!-- 教育经历 --><h2>教育经历</h2><label>最高学历：</label><select><option>博士</option><option>硕士</option><option selected>本科</option><option>专科</option></select><br><br><label>学校名称：</label><input type="text" placeholder="请输入学校名称"><br><br><label>所学专业：</label><input type="text" placeholder="请输入所学专业"><br><br><label>在校时间：</label><select><option>2015</option><option>2016</option><option>2017</option><option>2018</option></select>--<select><option>2016</option><option>2017</option><option>2018</option><option selected>2019</option></select><br><br><!-- 工作经历 --><h2>工作经历</h2><label>公司名称：</label><input type="text" placeholder="请输入公司名称"><br><br><label>工作内容：</label><textarea>请输入具体内容</textarea><br><br><input type="checkbox"><label>我已阅读并同意以下协议：</label><ul><li><a href="#" target="_blank">《用户服务协议》</a></li><li><a href="#" target="_blank">《隐私协议》</a></li></ul><br><br><button type="submit">免费注册</button><button type="reset">重置填写</button></form></body>
</html>