表单，用于前台与后台数据交互，用于收集用户信息。在移动互联网出现之前，一度是互联网/软件收集信息的热门途经。
表单可以录入单选文本、多行文本、密码、数字、日期、文件等数据。
form
在html中，用<form></form>元素表示表单。
表单有两个常用的属性：
action 表示表单收集的信息给谁处理。通常表单收集的信息将给后台程序处理，目前流程的后台处理语言有PHP、Java、ASP、Python等。
method 表示表单以何种方式向后台传送数据，它有两个属性值：post和get。post在传送数据给后台前会将数据进行编码，数据到达服务器后再进行反编码。get的在将数据传送给后台时不会编码，所有数据会在URL（浏览器地址栏）上显示。通常使用post方式传送数据。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html><html> <head> <title>表单</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <p>这是表单示例</p> </form> </body></html> |
单行文本
<input>元素可以创建多种不同的表单控件，type属性决定它要创建哪种控件。
单行文本使用<input>元素创建，type属性值为text。
<input>元素还有些属性：
name 这属性选择服务器从哪获取数据。
size 属性指出单行文本显示的字符数量。通常是指最宽字符，如果使用小宽字符1则不止显示一个，使用字符m则刚刚好。
maxlength 属性可以限制输入字符数量。
示例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html><html> <head> <title>单行文本</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <p>用户名：<input type="text" name="username" size="3" maxlength="30"></p> </form> </body></html> |
密码框
在html中，密码框使用元素<input></input> 配合属性type，其值为password来完成。
其中属性name 、size、maxlength同单行文本中的作用意义一样。
示例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html><html> <head> <title>密码框</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <p>用户名：<input type="text" name="username" size="20" maxlength="30"></p> <p>密码：<input type="password" name="password" size="20" maxlength="30"></p> </form> </body></html> |
多行文本框
在html中使用<textarea></textarea>元素来创建多行文本框。
<textarea>元素有属性cols和rows，分别表示文本框的宽度和行数。可以不写，在实际应用中，通常使用css样式来控制宽度和长度。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html><html> <head> <title>多行文本框</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <label for="content">正文</label> <textarea name="username" id="content"></textarea> </form> </body></html> |
单选按钮
单选按钮让用户从多个选项中只选择一项。在html中使用元素<input></input> 配合属性type，其值为radio来完成。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html><html> <head> <title>单选按钮</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <p>你最喜欢的编程语言是什么？</p> <input type="radio" name="language" value="css" checked="checked">CSS <input type="radio" name="language" value="html">HTML <input type="radio" name="language" value="javascript">JavaScript </form> </body></html> |
注意单选按钮的属性。
name属性告诉服务器从哪里获取数据，在单选按钮中，多个选项共用一个name属性值。
value属性，具体单选项的值。
checked属性，表示默认被选中的选项，其值也是checked。
复选框
复选框让用户在回答问题时有多个选项可选择。在html中使用元素<input></input> 配合属性type，其值为checkbox来完成。
示例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html><html> <head> <title>复选框</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <p>你喜欢吃的食物有哪些？</p> <input type="checkbox" name="food" value="dumpling" checked="checked">饺子 <input type="checkbox" name="food" value="fish meal">鱼粉 <input type="checkbox" name="food" value="youtiao">油条 </form> </body></html> |
name属性告诉服务器从哪里获取数据，在单选按钮中，多个选项共用一个name属性值。
value属性，具体复选项的值。
checked属性，表示默认被选中的选项，其值也是checked。
下拉列表
下拉列表，也就是选择框，让用户选择其中一项。在html中使用元素<select></select>和<option ></option>元素来完成。
元素<select></select>表示下拉列表，有属性name告诉服务器从哪里获取数据。
<option ></option>元素表示下拉列表的选项，有属性value，即选中后的值，将和name一起发送到服务器。还有一个属性selected，其值也是selected，表示默认选中的下拉选项。
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html><html> <head> <title>下拉列表</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <P>下拉列表，也就是选择框，让用户选择其中一项。</P> <select name="interest"> <option value="sing">唱歌</option> <option value="broil" selected="selected">烧烤</option> <option value="read">看书</option> </select> </body></html> |
多选框
多选框是在下拉列表的基础上稍加变化，元素<select></select>添加一个属性multiple，其值也是multiple；再添加一个属性size，其值 是数字，用于显示多少个选项。
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html><html> <head> <title>多选框</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <select name="interest" multiple="multiple" size="3"> <option value="sing">唱歌</option> <option value="broil" selected="selected">烧烤</option> <option value="read">看书</option> <option value="game">玩游戏</option> <option value="play basketball">打篮球</option> </select> </body></html> |
文件上传域
文件上传域通常用于上传文件，在html中使用元素<input></input> 配合属性type，其值为file来完成。
上传文件的表单，其method的值必须是post，否则不能上传文件。
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html><html> <head> <title>文件上传域</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <p>上传附件</p> <input type="file" name="file"> </form> </body></html> |
提交按钮
提交按钮用于表单发送到服务器。在html中使用元素<input></input> 配合属性type，其值为submit来完成。还有一个属性value，用于表示按钮上显示的文本信息。
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html><html> <head> <title>文件上传域</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <p>上传附件</p> <input type="file" name="file"> <input type="submit" value="提交"> </form> </body></html> |
隐藏字段
隐藏字段表单这个字段不会在页面上显示，用户不需要知道，可是相关业务操作又会用这个字段。
在html中使用元素<input></input> 配合属性type，其值为hidden来完成。
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html><html> <head> <title>隐藏字段</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <input type="hidden" name="id" value="3"> </form> </body></html> |
按钮
按钮是HTML元素之一，在表单里用得少，在网页中用得多。
在html中使用元素<button></button> 表示。按钮上显示的文字写在开始标签<button>和结束标签</button>之间。
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html><html> <head> <title>按钮</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <button name="btn" value="abc">这是按钮</button> </form> </body></html> |
标签
标签用于说明。表单中的标签用于说明输入组件<input>。
在html中使用元素<label></label> 表示。有属性for，用于与输入组件<input>关联，for的值与输入组件<input>的id值相同。
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html><html> <head> <title>标签</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <label for="username">用户名：</label> <input name="username" type="text" id="username"> </form> </body></html> |
组合元素
组合元素可以将表单中的组件进行分组，这对于复杂的表单来说非常有用。
在html中使用元素<fieldset></fieldset> 表示组合元素，并将表单中逻辑关联性强的组件放到<fieldset></fieldset>元素内。
<legend></legend>元素用于说明分组的概述。
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html><html> <head> <title>组合元素</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <fieldset> <legend>账号</legend> <label for="username">用户名：</label> <input name="username" type="text" id="username"><br><br> <label for="password">密码：</label> <input name="username" type="text" id="password"> </fieldset> </form> </body></html> |