# HTML 表单
HTML表单用于搜集不同类型的用户输入
表单是一个包含表单元素的区域。
表单使用表单标签 <form> 来设置:
<form>
input 元素
</form>
1
2
3
2
3
# HTML 表单属性
表单属性了解即可，初学时不必修改，
# HTML 表单元素
表单元素是允许用户在表单中输入内容,比如：表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
input元素
<input> 元素有很多形态，根据不同的 type 属性。
| 类型 | 描述 |
|---|---|
| text | 定义常规文本输入，默认宽度20 |
| radio | 定义单选按钮输入（选择多个选择之一） |
| submit | 定义提交按钮（提交表单） |
| button | 定义可点击按钮（多数情况下，用于通过JS启动脚本） |
| checkbox | 定义复选框 |
| file | 定义输入字段和"浏览"按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段。该字段的字符被掩码 |
| reset | 定义重置按钮。会清楚表单中的所有数据 |
下面是常用的类型demo：
一个按钮，上面写着"获取短信验证码"
<input type="button" value="获取短信验证码" />
定义复选按钮，取个名字叫name
<input type="checkbox" name="hobby" />
定义文件上传按钮
<input type="file" value="上传头像" />
定义密码框，输入密码用的
<input type="password" />
定义单选框，取个名字叫name，多个单选框需要取同一个名字，不然没法单选
<input type="radio" name="sex" />
定义重置按钮，上面写着"重置"
<input type="reset" value="重置" />
定义提交按钮，上面写着"提交"
<input type="submit" value="提交" />
定义输入的文本框，未输入时上面写着"请输入用户名"
<input type="text" value="请输入用户名" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
注意
name定义input元素的名称，单选框需要将选项的控件命名为同一名字才能实现单选
男\<input type="radio" name="sex" /> 女\<input type="radio" name="sex" />
value规定input元素的值，text文本框中未输入时显示的默认值
\<input type="button" value="获取短信验证码" />
checked规定input元素首次加载时应当被选中，属性值"checked"
dota2\<input type="checkbox" name="hobby" checked="checked" />
maxlength规定输入字段中的字符最大长度
label标签
<label></label>标签绑定<input>标签，当点击lable标签的文本时，浏览器将自动将光标转到或选中其绑定的表单控件上
语法：
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
1
2
2
label标签的for属性的值应当与相关表单元素中的id属性的值相同
select下拉表单
标签<select></select> 子标签<option></option>
select中至少包含一堆option
在option中定义selected=”selected“时，该选项为默认选项