# 表单
使用表单目的是为了收集用户信息。
在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成。
# a. 表单域
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
action 指定接收并处理表单数据的服务器的URL地址
method 表单数据的提交方式
get：地址栏显示表单内容，不安全
post：地址栏不显示表单内容，安全
name 用于指定表单的名称，以区分同一页面中的多个表单域。
# b. input输入表单元素
<input type='属性值' name="名字" value="默认值" placeholder="占位符，起提示作用">
| type属性值 | 说明 |
|---|---|
| text | 文本框，用于输入单行文本 |
| password | 密码框，用于输入密码 |
| radio | 单选框，用于多选一 |
| checkbox | 多选框，用于多选多 |
| file | 文件选择，用于上传文件 |
| submit | 提交按钮，用于提交 |
| reset | 重置按钮，用于重置 |
| button | 普通按钮，默认无功能，配合js添加功能 |
| image | 图片按钮，具有提交功能 |
| hidden | 定义隐藏的输入字段（页面不显示，但可以后台传值） |
H5新增：number、date、color、range、month、week、time、datetime、datetime-local、email、search、tel、url
value属性和name属性
value属性：用户输入的内容，提交之后会发给后端服务器
name属性：当前控件的含义，提交之后可以告诉后端发送过去的数据的什么含义
后端接收到数据的格式是：name的属性值 = value的属性值
注意：
radio单选框只有设置name属性才会有分组功能，有相同name属性值的单选框为一组，一组中只能同时有一个被选中。
# c. button标签
<button type="submit"></button>
| 标签名 | type属性值 | 说明 |
|---|---|---|
| button | submit | 提交按钮。点击之后提交数据会给后端服务器。 |
| button | reset | 重置按钮。点击之后恢复表单默认值。 |
| button | button | 普通按钮。默认无功能，之后配合添加功能。 |
注意： chrome浏览器中button默认是提交按钮。
# d. select下拉表单元素
<select>
<optgroup label="分组标题">
<option selected>选项1</option>
<option>选项2</option>
<option>选项3</option>
</optgroup>
...
</select>
select：下拉菜单的整体
optgroup：分组 html5新标签
option：下拉菜单的每一项。
selected：默认选中
# e. 预定义下拉菜单
<input list="browsers">
<datalist id="browsers">
<option value="预定义选项1">
<option value="预定义选项2">
<option value="预定义选项3">
<option value="预定义选项4">
<option value="预定义选项5">
</datalist>
注意：
option在这里是单标签
# f. textarea文本域表单元素
<textarea cols="列数" rows="行数">文本内容（默认值）</textarea>
# g. label标签
<input type="radio" name="" id="gender" />
<label for="gender">男</label>
目的：扩大点选区域
核心：label 标签的 for 属性应当与相关元素的 id 属性相同。
label 标签为 input 元素定义标注（标签），用于绑定一个表单元素，当点击 label 标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上,用来增加用户体验。
# readonly和disabled的区别
readonly 只读，只对可以输入的表单有效，不影响提交
disabled 禁用，使input元素无效，表单元素的值无法被提交
# 列表
表格是用来显示数据的，那么列表就是用来布局的。
列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。
# a. 无序列表
<ul>
<li></li>
</ul>
ul 表示无序列表的整体
li 表示无序列表的每一项
注意：
无序列表的各个列表项之间没有顺序级别之分，是并列的。
ul标签中只允许包含li标签，li标签可以包含任意内容。
无序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置。
# b. 有序列表
<ol>
<li></li>
</ol>
ol 表示有序列表的整体
li 表示有序列表的每一项
注意：
有序列表在展示数据时是按照一定的顺序显示
ol标签中只允许包含li标签，li标签可以包含任意内容。
有序列表会带有自己样式属性，但在实际使用时，我们会使用 CSS 来设置。
# c. 自定义列表
<dl>
<dt>定义</dt>
<dd>描述内容</dd>
</dl>
dl 表示自定义列表的整体
dt 表示自定义列表的主题
dd 表示自定义列表的针对主题的每一项内容
注意：
自定义列表常用于网页底部导航。
dl标签中只允许包含dt/dd标签，dt/dd标签可以包含任意的内容。