玩转 HTML 表格与表单：轻松上手指南

1、使用表单标签

网站使用 HTML 表单可与用户进行交互，表单元素是允许用户在表单中输入内容，比如：文本框、文本域、单选框、复选框、下拉列表、按钮等等，表单可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。表单使用表单标签 <form> 来定义：

<form method="传送方式" action="表单提交地址" name="表单名称"></form>

注意：<from> 是一对闭合标签，成对出现。method 属性规定数据传送的方式（get/post）。action 属性规定当提交表单时用户输入的数据被传送向何处，比如一个 PHP 页面(demo.php)。name 属性可设置表单的名称。所有的表单控件都必须放在<from></from>标签之间，否则用户输入的信息提交不到服务器上。

accept-charset 属性规定服务器可处理的表单数据字符集。默认值是保留字符串 "UNKNOWN"，表示编码为包含 <form> 元素的文档的编码。

enctype 属性规定在将表单数据发送到服务器之前如何对其进行编码。注意：只有 method="post" 时才使用 enctype 属性。

下面是2个新属性：

autocomplete 属性规定表单是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。注意：autocomplete 属性 "on" 适用于表单，"off" 适用于特定的输入字段，反之亦然。默认值为 on 规定启用自动完成功能。浏览器会基于用户之前键入的值自动完成值。off 则规定禁用自动完成功能。用户必须在每次使用时输入值到每个字段中，浏览器不会自动完成输入。

novalidate 属性规定当提交表单时不对表单数据进行验证。

From 中的 Get 和 Post 方法：

(1)、Get 方式将表单中数据的按照 var=value 的形式，添加到 action 所指向的 URL 后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；而 Post 方式是将表单中的数据放在 form 的数据体中，按照变量和值相对应的方式，传递到 action 所指向的 URL。如下 Get 方式传送：

http://www.abc.com/demo.php?name=小白&password=12345678

 (2)、Get 方式是不安全的，因为在传输过程，数据被存放在请求的 URL 地址中，这样容易造成信息泄漏。

(3)、Get 方式传输的数据量非常小，一般限制在 2KB 左右，但是执行效率却比 Post 方法好；而 Post 方式传递的数据量相对较大，它是等待服务器来读取数据，不过也有字节限制，这是为了避免对服务器用大量数据进行恶意攻击，因此建议尽量使用 Post 方法传送数据，比如用户注册，使用 Get 方法请求数据，比如浏览贴子。

2、文本框

当用户要在表单中键入字母、数字等内容时，就会用到文本输入框，文本框也可以转化为密码输入框。输入域通过 <input> 标签完成，该标签规定了用户可以在其中输入数据的输入字段。输入字段可通过多种方式改变，取决于 type 属性。如下：

1 <form method="post" action="demo.php">
2     <label for="name">用户名:</label>
3     <input type="text" name="username" id="name" value="小白"><br/>
4     <label for="pass">密　码:</label>
5     <input type="password" name="password" id="pass" placeholder="请输入密码">
6 </form>

<input> 标签用于定义输入域，而 type 属性规定了要显示的输入域的内容，type="text" 为默认值，定义一个单行的文本字段输入，默认显示宽度为 20 个字符。 name 属性为文本框命名，以备后台程序调用。type="password" 定义密码字段，密码字段字符不会明文显示，而是以星号或圆点替代。

value 属性可为文本框设置默认值，一般起到提示的作用，value 属性对于不同 input 类型，用法也不同：

(1)、对于 "text"、"password"、"hidden" 类型，定义输入字段的初始（默认）值。

(2)、对于 "button"、"submit"、"reset"、类型，定义按钮上的文本。

(3)、对于 "checkbox"、"radio"、"image" 类型，则定义与 input 元素相关的值，当提交表单时该值会发送到表单的 action URL。

注意：value 属性对于 <input type="checkbox"> 和 <input type="radio"> 是必需的，不适用于 <input type="file">。

而 placeholder 属性则可规定输入字段预期值的简短的提示信息，比如一个样本值或者预期格式的短描述，该提示会在用户输入值之前显示在输入字段中，该值显示为虚体，颜色浅，当用户输入时自动清除，而用于 <input type="text" value="小白"> 的 value 属性的默认值显示为实体，而且颜色深，在用户输入时需要自行清除。placeholder 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。

　　<label> 标签则为 input 元素定义标记，一般为输入标题。<label> 标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在该标签内点击文本，就会触发此控件。就是说，当用户单击选中该 <label> 标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该 <label> 标签相关连的表单控件上）。for 属性规定 label 与哪个表单元素绑定，该属性的值应当与绑定元素的 id 属性值相同。如下：

1 <form method="post" action="demo.php">
2     <label for="male">男</label>
3     <input type="radio" id="male" name="gender"><br/>
4     <label for="female">女</label>
5     <input type="radio" id="female" name="gender"><br/>
6     <label for="email">邮箱</label>
7     <input type="email" id="email" placeholder="请输入邮箱地址">
8 </form>

3、文本域

文本域是一个多行的文本输入控件，当用户需要在表单中输入大段文字时，需要用到文本输入域。文本域通过 <textarea> 标签完成，如下：

1 <form method="post" action="demo.php">
2     <label for="txt">发表意见：</label><br/>
3     <textarea cols="50" rows="10" id="txt">在这里输入内容...</textarea>
4 </form>

注意：<textarea> 标签是一对闭合标签，成对出现，在开始标签和结束标签之间可以输入默认值，cols 和 rows 属性则定义文本域的行数和列数，更好的办法是使用 CSS 的 width 和 height 属性来定义文本与的大小，width 代替 cols，height 代替 rows。

4、选择框

选择框可以让用户做出选择，在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，HTML 中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。定义选择框通过 <input> 标签完成，不同的是输入类型。

(1)、单选框

type="radio" 定义了单选框，也叫单选按钮，允许用户在一定数量的选择中选取一个选项。如下：

1 <form method="post" action="demo.php">
2     <label for="love">喜　欢</label>
3     <input type="radio" id="love" name="like" value="喜欢" checked><br/>
4     <label for="noLove">不喜欢</label>
5     <input type="radio" id="noLove" name="like" value="不喜欢"><br/>
6     <label for="casual">无所谓</label>
7     <input type="radio" id="casual" name="like" value="无所谓"><br/>
8 </form>

　　(2)、复选框

　　type="checkbox" 定义了复选框，允许用户可以选择多个选项。如下：

 1 <form method="post" action="demo.php">
 2     <label for="tool1">自行车</label>
 3     <input type="checkbox" id="tool1" name="bike" value="自行车"><br/>
 4     <label for="tool2">汽　车</label>
 5     <input type="checkbox" id="tool2" name="car" value="汽车"><br/>
 6     <label for="tool3">飞　机</label>
 7     <input type="checkbox" id="tool3" name="plane" value="飞机" checked><br/>
 8     <label for="tool4">火　箭</label>
 9     <input type="checkbox" id="tool4" name="rocket" value="火箭" checked><br/>
10     <label for="tool5">毛　线</label>
11     <input type="checkbox" id="tool5" name="wool" value="毛线">
12 </form>

　　value 属性值是必需的，为提交数据到服务器的值，供后台程序使用。name 属性为输入控件命名，供后台程序使用，checked 属性规定在页面加载时应该被预先选定的 <input> 元素。该属性只适用于 <input type="radio"> 和 <input type="checkbox">。checked 属性用于设置默认选项，即该选项会被默认选中。该属性也可以在页面加载后，通过 JavaScript 代码进行设置。

注意：同一组的单选按钮，name 属性取值一定要一致，比如上面例子为同一个名称“like”，这样同一组的单选按钮才可以起到单选的作用。同一组的复选框，name 属性取值可以一致，这样方便为其定义样式，或者通过 JS 获取元素。

5、下拉列表框

下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、也可以多选。下拉列表框通过 <select> 标签 和 <option> 标签完成。

(1)、下拉列表单选框

 1 <form method="post" action="demo.php">
 2     <label for="like">喜欢：</label>
 3     <select id="like" name="cars">
 4         <option value="奥迪">奥迪</option>
 5         <option value="宝马">宝马</option>
 6         <option value="奔驰">奔驰</option>
 7         <option value="宾利">宾利</option>
 8         <option value="路虎">路虎</option>
 9     </select>
10 </form>

(2)、下拉列表复选框

 1 <form method="post" action="demo.php">
 2     <label for="like">喜欢：</label>
 3     <select id="like" name="cars" multiple>
 4         <option value="奥迪">奥迪</option>
 5         <option value="宝马">宝马</option>
 6         <option value="奔驰">奔驰</option>
 7         <option value="宾利">宾利</option>
 8         <option value="路虎" selected>路虎</option>
 9     </select>
10 </form>

<select> 标签定义下拉列表选项，而 <option> 标签定义下拉列表中的选项。

下拉列表单选框和下拉列表复选框，唯一的不同就是复选框使用了 multiple 属性实现了多选功能，下拉列表可以进行多选操作就是在 <select> 标签中设置了 multiple 属性，该属性用于规定可同时选择多个选项，需要注意：下拉列表框根据选项的个数(单选/复选)，会在网页上呈现不同的显示效果。在不同的操作系统，选择多个选项的方法也不同，在 windows 操作系统下，需要按住 Ctrl 键来选择多个选项，而在 Mac 系统下，需要按住 Command 键来选择多个选项。

<option> 标签的 value 属性值为向服务器提交的值，selected 属性则表示该选项被默认选中，即首次在列表中时表现为选中状态。该标签需要与 <select> 标签配合使用，否则这个标签是没有任何意义的。

<select> 元素是一种表单控件，可用于在表单中接受用户输入。还元素有几个重要属性，required 属性规定用户在提交表单前必须选择一个下拉列表中的选项。autofocus 属性规定在页面加载时下拉列表自动获得焦点。size 属性规定下拉列表中可见选项的数目。由于各属性之间的差异，需要告诉用户是否可以多项选择，对用户更友好的方式是使用复选框。

如果有很多的选项组合，就可以使用 <optgroup> 标签能够很简单的将相关选项组合在一起。该标签经常用于把相关的选项组合在一起。如下：

 1 <form method="post" action="demo.php">
 2     <label for="like">喜欢：</label>
 3     <select>
 4         <optgroup label="国产">
 5             <option value="奇瑞">奇瑞</option>
 6             <option value="大众">大众</option>
 7             <option value="现代">现代</option>
 8             <option value="哈弗">哈弗</option>
 9             <option value="比亚迪">比亚迪</option>
10         </optgroup>
11         <optgroup label="进口">
12             <option value="兰博基尼">兰博基尼</option>
13             <option value="雷克萨斯">雷克萨斯</option>
14             <option value="凯迪拉克">凯迪拉克</option>
15             <option value="玛莎拉蒂">玛莎拉蒂</option>
16             <option value="英菲尼迪">英菲尼迪</option>
17         </optgroup>
18     </select>
19 </form>

<optgroup> 标签一个重要属性 label 用于为选项组规定描述。

6、按钮

在表单中有两种按钮可以使用，分别为：提交按钮和重置按钮。还有一种按钮叫做点击按钮。

(1)、点击按钮

type="button" 定义一个可点击的按钮，在用户点击按钮时启动一段 JavaScript。

1 <input type="button" value="按钮" onclick="show()">
2 <script>
3 function show(){
4     alert("Hello world!");
5 }
6 </script>

(2)、提交按钮

当用户需要提交表单信息到服务器时，需要用到提交按钮。type="submit" 用于定义提交按钮。

1 <form method="post" action="demo.php">
2     <label for="urse">用户名：</label>
3     <input type="text" id="urse" name="ursename" placeholder="邮箱/手机号/用户名"/><br/>
4     <label for="password">密　码：</label>
5     <input type="password" id="password" name="pass" placeholder="请输入密码" /><br/>
6     <input type="submit" value="提交信息">
7 </form>

button 和 submit 都是定义一个按钮，不同的是 button 只是一个普通的按钮，主要用于绑定事件，如果不给其绑定事件，那么点击按钮不会有任何反应。而 submit 则是提交按钮，主要用于提交表单，传送数据，如果给 submit 绑定事件，那么点击按钮触发事件的同时，也会提交表单。

(3)、重置按钮

当用户需要重置表单信息到初始时的状态时，比如用户输入信息后，发现输入错误，那么可以使用重置按钮使输入框恢复到初始状态。只需要把 type 设置为 "reset" 就可以。

1 <form method="post" action="demo.php">
2     <label for="urse">用户名：</label>
3     <input type="text" id="urse" name="ursename" placeholder="邮箱/手机号/用户名"/><br/>
4     <label for="password">密　码：</label>
5     <input type="password" id="password" name="pass" placeholder="请输入密码" /><br/>
6     <input type="submit" value="提交信息">
7     <input type="reset" value="重置信息">
8 </form>

type="reset" 用于定义一个重置按钮，需要谨慎使用该按钮，当用户点击重置按钮后，所有表单值都会恢复到默认值，这对于用户来说，如果不慎点击了重置按钮将是一件十分令人恼火的事。

在 HTML 中还有一种创建按钮的方法就是使用 <button> 标签。该元素与使用 <input> 元素创建的按钮之间的不同之处就在于：使用 button 元素创建的按钮，在该元素内部可以放入内容，比如文本或图像，也就是该元素可以使用多媒体内容，<button> 与 </button> 标签之间的所有内容都是按钮的内容。该元素也可以定义点击按钮、提交按钮和重置按钮。但是他的缺点就是：不同的浏览器对 <button> 元素的 type 属性使用不同的默认值，因此要始终为 <button> 元素规定 type 属性，不同浏览器可能会提交不同的按钮值，也就是浏览器得到