【HTML】三、表单与布局标签
文章目录
- 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>