[HTML/HTML5]9 使用表单

9.1  创建基本表单

　　表单都具有相同的基础结构。即它都包含表单的的开始标记<form>和结束标记</form>、<input>控件和处理表单的方法。form元素包围着整个表单，就像html元素包围整个HTML5文档一样。

　　首先，讨论<input>控件，用户通过input控件在表单中输入数据。绝大多数控件都用input元素创建，在input元素中通过type属性定义具体创建的控件类型。input元素是一个空元素，因此无需使用结束标记。

　　下面列出了input元素的type属性值的完整列表，随后将学习最常用的几种类型，另外还将介绍一些并非由input元素创建的控件。

• <input type="button">：可单击的按钮
• <iput type="radio">：单选按钮
• <input type="checkbox">：复选框
• <input type="color">*：颜色选择器
• <input type="date">*：日期选择器（日，月，年）
• <input type="datetime">*：日期和时间选择器（带时区控件）
• <input type="datetime-local">*：仅用于本地时间的日期和时间选择器
• <input type="email">*：电子邮件字段
• <input type="file">：文件选择器（带Browse按钮）
• <input type="hidden">：隐藏的输入字段
• <input type="image">：带单击的图片
• <input type="month">*：月份和年份选择器
• <input type="number">*：数值输入框
• <input type="password">：密码框
• <input type="range">*：带有滑块的数值输入框
• <input type="search">：搜索框
• <input type="reset">：重置按钮
• <input type="submit">：提交按钮
• <input type="tel">*：电话号码输入框
• <input type="text">：单行文本框（默认）
• <input type="time">*：时间选择器（不支持时区）
• <input type="url">*：URL框
• <input type=“week”>*：星期和年份选择器（不支持时区）

9.1.1  文本输入

　　最简单的文本输入控件是单行文本框（也称为文本域）和多行文本区域。

　　（1）单行文本框

　　单行文本框实际上是input控件的默认类型，因此在使用单行文本框时无须声明type属性，因为即使没有type属性，input元素默认情况下也呈现为一个纯文本框。该控件类似于一个矩形框，其中可以包含单行文本。通常会在文本框之前放上一个描述性文本，以告诉用户应该在文本框中输入什么数据。除非为文本框指定size属性，否则文本框的默认宽度为20个字符。

 <form>
     Input your first name:<input><br>
     Input your last name:<input>
 </form>

　　为了处理表单中的所有控件，必须为每一个控件定义一个name属性。例如，当处理表单时，可以让表单处理程序获取用户在名为“FirstName”的控件中输入的任何数据。

 <form>
     Input your first name:<input type="text" name="FirstName"><br>
     Input your last name:<input type="text" name="LastName">
 </form>

　　每一个控件都具有一个初始值（initial value）和一个当前值（current value）。初始值是在编写表单代码时为控件指定的一个可选值，而当前值是在使用表单时用户输入的值。例如，如果绝大多数用户在某个字段中都会输入一个确定的值，那么可以使用value属性和默认值预先填充该字段。请不要通过value属性向用户发送提示信息，否则用户没有输入任何数据，那么在提交表单时你设置的初始值就会随着表单一起发送给处理程序。比如：

 <input name="FirstName" value="Enter your first name here">

　　当用户浏览该页面时，对于需要改变默认值的用户，在输入数据之前将不得不先清除默认值。因此，如果想给用户提供一些小提示，但由用户自己输入唯一的值，那么使用placeholder将是更好的办法。

 <input name="FirstName" placeholder="Enter your first name here">

　　（2）密码框

　　HTML还支持创建用于输入密码的单行文本框，即密码框。它与普通文本框的主要差别在于：对于输入的字符，密码框并不直接显示字符而是将其显示为圆点。在input元素中，只需将type属性的值设置为password就可以创建密码框。

 <form>
 Please input your username:<input type="text" name="username">
 Please input your password<input type="password" name="password">
 </form>

　　（3）搜索框

　　将input元素的type属性设置为search，可以定义一个包含搜索条目的搜索框，而不是一个普通文本框。

 <form>
     <input type="search" name="search" placeholder="Enter search terms here...">
 </form>

　　（4）多行文本框

　　如果允许网站用户输入多行的文本，请使用多行文本框代替单行文本框。与其它input表单控件不同，多行文本框采用textarea标记创建，并非通过input标记创建。

 <form>
     We welcome your thoughts and opinions about our products.<br>
     <textarea name="comments"></textarea>
 </form>

　　要指定多行文本框的大小，请使用cols属性和rows属性：

• cols属性定义多行文本框的可见宽度，它基于平均字符宽度；
• rows属性定义多行文本框的可见高度，它基于多行文本的行数。

 <form>
     We welcome your thoughts and opinions about our products.<br>
     <textarea name="comments" cols="60" rows="10"></textarea>
 </form>

　　对于textarea元素，虽然可以使用placeholder属性定义一个用户提示信息，但不能使用value属性定义要在多行文本框中显示的初始值。恰恰相反，应该把初始值放在textarea元素的开始标记和结束标记之间。

 <form>
     We welcome your thoughts and opinions about our products.<br>
     <textarea name="comments" cols="60" rows="5">Type your comments here.</textarea>
 </form>

9.1.2  单选按钮

　　单选按钮（radio button）是较小的圆形按钮，它允许用户从一个选项列表中选择单个选项。只需使用input元素并将type属性设置为radio，就可以创建单选按钮。对于单选按钮，name属性和value属性特别重要，因为必须正确地设置这两个属性，才能确保单选按钮的数据能正常处理。

 <form>
     How would you like to receive more information about our company? <br>
     <input type="radio" name="contactMe" value="email">eamil<br>
     <input type="radio" name="contactMe" value="phone">phone<br>
     <input type="radio" name="contactMe" value="fax">fax<br>
     <input type="radio" name="contactMe" value="mail">regular mail<br>
 </form>

　　请注意，4个单选按钮选项的name属性值都相同。在处理表单时将具有相同name属性值的单选按钮视为关联在一起的一个单选按钮组。由于控件的type属性是radio，因此浏览器知道在一个单选按钮组中每次只能选中一个按钮。如果错误地为每一个单选按钮定义不同的名称（name属性值），那么用户将可以选择多个按钮组。

　　如果想在页面加载时，使其中一个单选按钮默认处于被选中的状态，那么请在该单选按钮的input标记中添加checked属性。在页面加载后，根据需要用户也可以选择其它不同的选项。

 <input type="radio" name="contactMe" value="fax" checked>fax<br>

9.1.3  复选框

　　复选框与单选按钮类似，它们都不允许用户输入任何数据，只能单击控件以选中或取消选项。复选框允许从一个选项列表中选择多个选项。要在在线表单中包含复选框，只需使用input标记并将其type属性的值设置为checkbox即可。与单选按钮类似，在一个复选框组之中，所有选项的name属性值都相同，请使用value属性来标识每一个不同的选项。

 <form>
     <input type="checkbox" name="services" value="graphic">graphic design<br>
     <input type="checkbox" name="services" value="illustration">illustration<br>
     <input type="checkbox" name="services" value="packaging">packaging<br>
 </form>

　　可以在input标记中添加checked属性，使页面加载时默认把该复选项设置为选中状态。根据需要用户也可以取消该选项。

 <input type="checkbox" name="services" value="packaging" checked>packaging<br>

9.1.4  日期和时间控件

　　HTML5带来了一些新的input控件：

• date
• datetime
• datetime-local
• month
• time
• week

　　这些新的input控件可以优雅的退化，也就是说，在不支持这些新的HTML5控件的浏览器中，在默认情况下这些控件将显示为一个简单的单行文本框。因此，即使用户无法使用HTML5中便利的月份或日期选择器，依然可以在文本框中输入月份或日期。

9.1.5  其它数值输入控件

　　在HTML5之前的版本中，没有办法区分文本框和数值框。开发人员常常必须使用诸如JavaScript这样的脚本语言来实现类似的效果。type属性为number和range的input控件改变了这一切。在input控件中，将type属性的值设置为number，可以简单的定义一个数值框。

 <input type="number" min="0" max="12" step="2" value="8">

　　type属性为range的input控件与之类似，它也可以设置min、max和step属性，但不同之处在于它呈现为一个滑块。

 <input type="range" min="0" max="12" step="2" value="8">

9.1.6  联系方式

　　在HTML5中新增了3种控件，以帮助用户区别不同类型的联系方式。这三种input控件的类型分别是email、url和tel，在桌面浏览器中它们不会改变文本框的显示方式，但在支持这三种控件的操作系统之中，它们有助于为移动用户提供更好的输入帮助。

 <input type="email" name="email">
 <input type="url" name="website">
 <input type="phone" name="phone">

9.1.7  颜色选择器

　　颜色选择器（color picker），它是type属性为color的input控件。

 <input type="color" name="ShirtColor">

9.1.8  选择菜单

　　当想让用户从一个较长的选项列表中进行选择时，可以考虑使用选择菜单（select menu）来代替复选框或单选按钮。选择菜单就是一个选项列表，可以将其设置为具有一个或多个的可见选项，它与其它软件应用程序顶部的菜单类似。

　　选择菜单也称为下拉菜单，它允许用户单击一个初始可见选项，然后打开一个下拉列表以显示其余选项。除非将size属性设置为一个大于1的数值，否则当页面加载时，仅能看到一个选项，该选项带有一个展开菜单的小箭头。size属性表示在可拖动列表中可见选项的数量，可以把size属性设置为2或者更大的值。select元素用于创建选择菜单的基本结构，而option标记则用于创建菜单中的每一个菜单项。

 <form>
     <select name="color" size="3">
         <option value="blue">blue</option>
         <option value="red">red</option>
         <option value="yellow">yellow</option>
         <option value="green">green</option>
         <option value="other">other</option>
     </select>
 </form>

　　默认情况下，用户可以从列表中选择一个选项。如果想让用户能够一次选择多个选项，请在开始标记<select>中添加multiple属性。

 <select name="color" size="3" multiple>

　　此外，通过在开始标记<option>中添加select属性，可以在页面加载时将其设置为已经选中的选项，根据需要用户可以重新选择一个不同的菜单项。

 <option value="green" selected>green</option>

　　较长的菜单可以使用optgroup元素划分多个子菜单，optgroup元素的label属性用于为子菜单设置一个名称。

 <form>
     <select>
         <optgroup label="Monday">
             <option value="MondayAM">MondayAM</option>
             <option value="MondayPM">MondayPM</option>
         </optgroup>
         <optgroup label="Tuesday">
             <option value="TuesdayAM">TuesdayAM</option>
             <option value="TuesdayPM">TuesdayPM</option>
         </optgroup>
     </select>
 </form>

9.1.9  禁用表单元素

　　在input控件中可以添加readonly属性，从而使用户不能修改input控件的值。

 <input type="" name="UserName" value="Ace" readonly="">

　　disable属性的作用与之类似，在表单中设置为disable的input控件，将显示为灰色或淡色文本，使之看起来不重要。

 <input type="" name="UserName" value="Ace" disabled="">

9.1.10  隐藏域

　　要定义一个隐藏域，只需使用input标记并将其type属性设置为hidden即可。

 <input type="hidden" name="TestVersion" value="3">

9.1.11  文件上传控件

　　要定义一个文件上传控件，只需使用input标记并将其type属性设置为file即可。

 <input type="file" name="Upload">

9.1.12  按钮

　　用户可以通过按钮（Button）与表单进行交互。

• submit按钮：用于提交表单
• reset按钮：用于复位表单
• 其它按钮：表单中的普通命令按钮

　　要创建以上3种类型的按钮，既可以使用input标记，也可以使用button标记。由于input元素是在表单中添加按钮的首选方法，因此建议使用input标记来创建按钮。

 <form>
     <input type="submit" value="Submit">
     <input type="reset" value="Reset">
     <input type="button" value="Button">
 </form>

 <form>
     <button type="submit">Submit</button>
     <button type="reset">Reset</button>
     <button type="button">Button</button>
 </form>

9.2  验证表单内容

　　在HTML5之前，验证表单内容的唯一办法就是使用脚本或程序设计语言进行验证，这就超出了基本HTML的范畴，这也超出了很多初学者和开发新手的能力范围。幸运的是，HTML5提供了required和pattern属性。

　　只需简单的在一个input控件中添加required属性，就可以在该input控件为空时，阻止表单的提交。

 <input type="email" name="Email" required>

　　无论在控件有效时还是无效时，都可以使用一些特殊的选择器（selector）来调整控件的颜色、形状或input控件的其它特征。

 input {border: 2px solid gray;}
 input:focus {border: 2px solid green;}
 input:invalid {border: 2px solid red;}

　　pattern属性可以为特定的文本输入框定义可接受的有效字符。pattern属性的值是一个有效的正则表达式（regular expression。）

 <input type="text" name="ID" pattern="[0-9]{9}">

　　只有当用户输入了错误地数据并试图提交表单时，工具提示（tool tip）才会显示。如果该input控件保持为空，则不会对要求匹配的模式进行检查。因此，为了避免用户提交含有空白字段的表单，请在相应的input标记中添加required属性。

 <input type="text" name="ID" pattern="[0-9]{9}" required>

9.3  表单的处理方法

　　在开始标记<form>中，还需要告诉浏览器如何处理表单。这通过action属性（必需的）来实现，此外还包括method属性和enctype属性（可选的）。

9.3.1  action属性

　　action属性定义一个接收表单信息的位置，即应该将表单信息发送到何处。它可以是一个电子邮件地址：

 <form action="mailto:name@emailaddress.com">

　　或者也可以使用CGI脚本的URL：

 <form action="../cgi-bin/form.cgi">

9.3.2  method属性

　　method属性用于告诉浏览器如何将数据发送到服务器，该属性有两个常见的取值：get和post。

　　get方法获取表单提交的所有数据，并将其附在URL之后，发送给服务器。

　　post方法不再将表单数据附加在服务器端脚本的目标URL之后，而是直接将数据发送到脚本文件所在的URL 。

 <form action="myscript.cgi" method="post">

9.4  定义表单格式和样式

9.4.1  设置Tab顺序和键盘快捷键

　　在表单中，也可以使用tabindex属性和accesskey属性来设置input控件的tab顺序和键盘快捷方式。tab键的索引是从0开始的，而不是从1。

 <input type="text" name="UserName" tabindex="2" accesskey="f">

9.4.2  使用标签

　　无论何时，当在input控件之前添加描述性文本时，就是为用户添加一个标签，以帮助用户理解应该输入哪一种类型的信息。

　　为了在标签与相应的控件之间建立正式的关联，可以使用label元素和id属性。每一个label元素仅能关联到一个控件。当label元素与复选框和单选按钮结合使用时，单击label元素实际上就可以选中或取消选中对应的复选框或单选按钮。

 <form>
     <input type="radio" name="color" value="red" id="red"><label for="red">red</label><br>
     <input type="radio" name="color" value="green" id="green"><label for="green">green</label><br>
     <input type="radio" name="color" value="blue" id="blue"><label for="blue">blue</label><br>
     <input type="radio" name="color" value="pink" id="pink"><label for="pink">pink</label><br>
 </form>

9.4.3  分组控件

　　label元素用于将文本关联到控件，fieldset元素用于将label元素和控件元素集合进行分组。使用这些元素对input控件进行分组是一种很好的方法，它可以取代在表单中使用表格进行布局。如果需要的话，可以使用legend标记为分组定义一个标题。

 <form>
     <fieldset>
         <legend>Login</legend>
         <p>
             <label for="UserName">UserName:</label><input type="text" name="username" id="UserName"><br>
             <label for="Password">Password:</label><input type="password" name="Password" id="Password">
         </p>
     </fieldset>
 </form>

9.4.4  添加数据列表

　　数据列表（data list）可以为用户提供一个选项列表，但同时也允许用户输入自定义的选项。数据列表与相应input控件关联在一起的关键点在于：将input控件的list属性值设置为相应datalist元素的id属性值。

 <form>
     Where in Harford Country do you reside?<br>
     <input type="text" name="city" list="HarCoCitities">
         <datalist id="HarCoCitities">
             <option value="Abingdon">Abingdon</option>
             <option value="Aberdeen">Aberdeen</option>
             <option value="Bel Air">Bel Air</option>
             <option value="Belcamp">Belcamp</option>
         </datalist>
 </form>

9.4.5  显示进度条

　　HTML5引入了两个新元素：progress和meter元素，用于处理表单中与度量值有关的数据。

　　progress元素表示一个正在改变的度量值，比如某条路径上的一个值或者某个过程的进度。

　　meter元素只是简单地表示一个度量值，与该值是否正在变化或者是否表示某个过程的进度无关。

　　meter元素有6个属性，其中前3个属性也可用于progress元素：

• value：表示度量值的默认起始值
• min：定义有效度量范围的最小值（默认值为0）
• max：定义有效度量范围的最大值（默认值为1或100%）
• low：声明度量范围的低值端（不能小于min值）
• high：声明度量范围的高值端（不能大于max值）
• optimum：定义最优值，通常是介于min值与max值之间的一个值

　　虽然这两个元素常用在表单中，但实际上在页面的其它部分也可以是使用这两个元素来显示进度和进度值。

 <form>
     <input type="file" name="Upload"><br>
     Upload:<progress value="20" max="100"></progress>
 </form>

 <form>
     Child's temperature of 104.1:
     <meter value="98" max="106" high="104" low="96 min="90" optimum="98.6"></meter>
 </form>