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 属性，不同浏览器可能会提交不同的按钮值，也就是浏览器得到的 value 值不同，存在兼容性问题。所以要使用 <input> 元素在 HTML 表单中创建按钮。

7、input 元素属性和其他输入类型

　　除了前边提到的一些属性外，input 元素还有一些重要属性，以及 HTML5 新增加的属性。

　　readonly 属性规定输入字段是只读的。该属性是一个布尔值。只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。readonly 属性可以防止用户对值进行修改，直到满足某些条件为止，比如选中了一个复选框。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。

　　size 属性规定以字符数计的 <input> 元素的可见宽度。size 属性适用于下面的 input 类型：text、search、tel、url、email 和 password。如需规定 <input> 元素中允许的最大字符数，需要使用 maxlength 属性。

　　以下是 HTML5 中的新属性：

　　autocomplete="on|off" 属性规定输入字段是否应该启用自动完成功能。默认值为 on，规定用户启用自动完成功能，off 则表示禁用。注意：autocomplete 属性适用于下面的 <input> 类型：text、search、url、tel、email、password、date pickers(日期选择器)、range 和 color。

　　multiple 属性规定允许用户输入到 <input> 元素的多个值。该值是一个布尔值，注意：multiple 属性适用于以下 input 类型：email 和 file。

　　pattern 属性规定用于验证 <input> 元素的值的正则表达式。可以使用使用全局的 title 属性来描述模式以帮助用户。pattern 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。

　　required 属性规定必需在提交表单之前填写输入字段。该属性是一个布尔值，required 属性适用于下面的 input 类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file。

　　下面是 input 元素的其他输入类型：

　　(1)、图像作为按钮

　　type="image" 用于定义图像作为提交按钮，如下：

<input type="image" src="imges/submit.gif" alt="Submit" width="48" height="48">

　　上面代码中的 3 个属性都只针对 type="image"，src 属性规定显示为提交按钮的图像的 URL。alt 属性定义图像输入的替代文本。width 和 height 规定 <input>元素的宽度/高度。

　　(2)、隐藏字段

　　type="hidden" 用于定义隐藏字段，隐藏字段对于用户是不可见的。隐藏字段常常存储默认值，或者由 JavaScript 改变它们的值。

1 <form method="post" action="demo.php">
2     姓名: <input type="text" name="user"><br/>
3     <input type="hidden" name="country" value="China">
4     <input type="submit" value="提交">
5 </form>

　　(3)、选择文件

　　type="file" 用于定义文件选择字段和 "浏览..." 按钮，供文件上传。

1 <form method="post" action="demo.php">
2     选择一个文件: <input type="file" name="img" accept="image/*,audio/*,video/*"><br/>
3     <input type="submit" value="提交">
4 </form>

　　accept 属性仅适用于 <input type="file">。该属性规定了可通过文件上传提交的服务器接受的文件类型。如需要多个文件类型，每个值可以使用逗号分隔。注意：不要将该属性作为验证工具，应该在服务器上对文件上传进行验证。

以下都是 input 元素在 HTML5 中的新类型：

　　(4)、Email

　　type="email" 用于定义邮箱地址的字段，当提交表单时会自动对 email 字段的值进行验证。

Email: <input type="email" name="usre">

　　(5)、电话号码

　　type="tel" 用于定义用于输入电话号码的字段。

电话号码: <input type="tel" name="mobile">

　　(6)、拾色器

　　type="color" 用于定义从拾色器中选取颜色。

选择你喜欢的颜色: <input type="color" name="likecol">

　　(7)、搜索字段

　　type="search" 定义用于输入搜索字符串的文本字段，比如站内搜索。

查查看: <input type="search" name="lookup">

　　目前，浏览器对于该类型的支持不是很好。

　　(8)、URL

　　type="url" 定义用于输入 URL 的字段。

添加你的主页: <input type="url" name="homepage">

　　(9)、数字字段

　　type="number" 定义用于输入数字的字段，可以设置可接受数字的限制。

数量 ( 1 到 5 之间): <input type="number" name="num" min="1" max="5">

　　min 和 max 属性可用于规定 <input> 元素的最小/最大值。value 属性可规定默认值。step 属性可规定 <input> 元素的合法数字间隔。实例：如果 step="3"，则合法数字应该是 -3、0、3、6，以此类推。该属性可以与 min 和 max 属性配合使用，以创建合法值的范围。

　　type="range" 定义用于精确值不重要的输入数字的控件，比如 Slider.js，一个轻量级图片播放控件。也可以设置可接受数字的限制。用来规定限制的属性同 number 类型相同。

　　(10)、日期

　　type="time" 定义用于输入时间的控件（不带时区）。

　　type="date"  定义 date 控件。

　　type="datetime" 定义 date 和 time 控件（带有时区）。

　　type="datetime-local" 定义 date 和 time 控件（不带时区）。

　　type="month" 定义 month 和 year 控件（不带时区）。

　　type="week" 定义 week 和 year 控件（不带时区）。

8、其他表单标签

　　(1)、表单边框

　　<fieldset> 标签定义围绕表单中元素的边框。<legend>标签用于定义 fieldset 元素的标题。

1 <form method="post" action="demo.php">
2     <fieldset>
3         <legend>个人信息:</legend>
4         姓名: <input type="text"><br/>
5         籍贯: <input type="text"><br/>
6         邮箱: <input type="email"><br/>
7         家庭住址: <input type="text">
8     </fieldset>
9 </form>

在 HTML5 中还增加了3个新标签：

　　(2)、<datalist>

　　<datalist> 标签规定了 input 元素可能的选项列表。如下：

 1 <form method="post" action="demo.php">
 2     <input list="browser" name="explorer" autofocus>
 3     <datalist id="browser">
 4         <option value="IE">
 5         <option value="Firefox">
 6         <option value="Chrome">
 7         <option value="Safari">
 8         <option value="Opera">
 9     </datalist>
10     <input type="submit">
11 </form>

　　<datalist> 标签被用来为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。注意：必需使用 <input> 元素的 list 属性来绑定 <datalist> 元素。该属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项，该属性值为绑定到 <input> 元素的 datalist 的 id。

　　autofocus 属性用于规定当页面加载时 <input> 元素应该自动获得焦点。

　　(3)、<output>

　　<output> 标签作为计算结果输出显示，比如执行脚本的输出。如下：

1 <form method="post" action="demo.php" oninput="sum.value=parseInt(x.value)+parseInt(y.value)">
2     0<input type="range" id="x" value="50">100
3     +<input type="number" id="y" value="50">=
4     <output name="sum" for="x y"></output>
5 </form>

　　该标签有一个重要属性 for 规定一个或多个元素的 id 列表，以空格分隔，用于描述计算中使用的元素与计算结果之间的关系。name 属性定义对象的唯一名称，在表单提交时使用。

　　(4)、<keygen>

　　<keygen> 规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。如下：

1 <form method="post" action="demo.php">
2     用户名: <input type="text" name="usre"><br/>
3     加　密: <keygen name="security" keytype="rsa">
4     <input type="submit">
5 </form>

　　该标签有一个重要属性 keytype 用于定义密钥的安全算法，该属性规定应该使用哪种密钥生成算法，安全算法有3种：rsa为默认，规定 RSA 安全算法，RSA 密钥强度可由用户选择。dsa 规定 DSA 安全算法，DSA 密钥长度可由用户选择。ec 规定 EC 安全算法，EC 密钥强度可由用户选择。注意：不同的浏览器对密钥生成算法的支持会有所变化。

HTML 表单

标签：

原文地址：http://www.cnblogs.com/Mtime/p/5184674.html