8.表单
①输入框input
| type 属性 | 输入框类型 |
|---|---|
| text | 文本框 |
| password | 密码框 |
| radio | 单选框 |
| checkbox | 多选框 |
| file | 文件选择 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| button | 普通按钮 |
（1）text 文本框 placeholder 占位符
（2）password 密码框 placeholder 占位符
（3）radio 单选框
-
name属性分组，一个分组只能有一个值被选中
- checked 默认选中
（4）checkbox 多选框
- checked 默认选中
（5）file 文件选择
- multiple 多选(按住 ctrl 多选)
（6）按钮
submit 提交按钮 / reset 重置按钮 / button 普通按钮
- 需要配合
form表单域使用 - 属性
value修改按钮显示的值
②buttom按钮type 取值
- submit 提交按钮
- reset 重置按钮
- button 普通按钮(默认)
③select下拉菜单
- option 选项
- 默认选中第一项，可以指定默认选中 selected
④textarea多行文本域
- cols 宽度 列数
- rows 高度 行数
⑤label单选
- 点击
文字也可选中选项 - 以下两种方式等效
9.无语义标签
- div 块级标签，独占一行
- span 行内标签
10.字符实体
- 空格
- 版权符
©
11.综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Form Demo</title>
</head>
<body>
<h2>个人信息</h2>
<form action="">
<p>姓名:
<input type="text"
placeholder="姓名">
</p>
<p>性别:
<label><input type="radio"
name="sex"
checked>男</label>
<label><input type="radio"
name="sex">女</label>
</p>
<p>爱好:
<label><input type="checkbox"
checked>足球</label>
<label><input type="checkbox">篮球</label>
<label><input type="checkbox">羽毛球</label>
</p>
<p>现居：<select>
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
<option value="">深圳</option>
</select>
</p>
<p>个人简介：
<br />
<textarea cols="60"
rows="10"></textarea>
</p>
<input type="submit"
value="提交">
<button type="reset">重置</button>
</form>
</body>
</html>
开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 4 天，点击查看活动详情
