HTML窗体指南

2016.02.28 - 04.06
个人英文阅读练习笔记，原文地址：http://blog.csdn.net/misskissc/article/details/50757220。

02.28
该指南是一系列帮助您精通HTML表单的文章。HTML表单是一个能跟用户交互的强大工具；然而，由于历史和技术原因，如何充分使用它们总不是那么的显著。本指南将覆盖HTML表单的所有方面，从结构到风格，从数据操作到自定义窗体部件。您将充分享受HTML表单所提供的强大功能。

文章

1. 第一个HTML表单

这是一篇对HTML表单进行介绍的文章。通过一个简单的联系人表单，我们将会看到构建HTML表单的基本需求。本文假设您对HTML表单一无所知，但了解HTML的基础和CSS。

在开始前

什么是HTML表单
HTML表单是用户和Web站点或应用程序交互的主要点。它们允许用户发送数据给web站点。数据在大多数时间都会发送给web服务器，但web页面也能够自己解释并使用该数据。

一个HTML表单由一个或更多的窗体部件组成。这些窗体部件可以是文本域（一行或多行）、选择框、按钮、复选框或radio按钮。大多数时间里，这些部件含一个用来描述它们用途的标签而成对的出现。

用表单需要用什么来工作
您需要做的没有比用HTML工作更重要的了：文本编辑器以及web浏览器。当然，如果您曾使用过它，您可以利用诸如Visual Studio、Eclipse、Aptana等这样的IDE，但这都取决于你。

HTML表单跟正常的HTML文件的主要区别在于，在大多数时间，被表单收集的数据被发送给web服务器。在这种情况下，您需要设置web服务器接收并处理这些数据。如何设置这样的一个服务器已经超出了本文的范围，但若您想知道更多，可以参考此文：sending and retrieving form data。

设计表单

在开始编写代码之前，停下来花一些时间来思考如何设计表单会更好。设计一个快速的实体模型将会帮助您定义定义正确的数据（您想向用户所请求的数据）。从用户经验这一点来看，记住表单越大，就越有可能失去用户。保持表单的简单持续集中：什么是一定会需要的。当都建站点或应用程序时，设计表单是非常重要的一步。表单的用户体验这一点超出了本文的范围，但如果您想挖掘该话题，您应该阅读以下文章：

• 粉碎杂志（Smashing Magazine）有关于表单用户体验的非常好的文章，但兴许最重要的是他们的Web表单的扩展指南。
• UXMatters也是一个非常有用的资源，其含有基本的最佳步骤如多页格式。

在本文中，我们将构建一个简单的联系人表单。以下是其粗略的草图。

该表单包含三个文本域和一个按钮。主要地，我们请求用户的姓名、邮件地址以及它们欲发的信息内容。点击按钮就将发送该内容到web服务器中。

02.29

Get your hands dirty with HTML

好哒，现在我们准备用HTML来编写以上所设计的表单。欲构建我们的联系人表单，我们使用以下的HTML元素：< form>，< label>， < input>，< textarea>以及< button>。

< form>元素
所有的HTML表单都以< form>元素开始，如下所示：

<form action="/my-handling-form-page" method="post">

</form>

该元素用于正规地定义表单。它是一个像< div>或< p>元素的容器，它同时也支持一些特定的属性以配置表单行为方式。它所有的属性都是可选的，但从最佳实践步骤来说至少设置以下动作属性和方法属性是值得推荐的：

• 动作属性定义表单收集的应发送的数据的位置（一个URL）。
• 方法属性定义HTTP方法来发送数据（它可以是“获取”或“邮寄”）。

如果您想挖掘这些属性的是如何工作的，在发送和检索表单数据一文中可以查阅其细节。

用< label>，< input>以及< textarea>元素增添窗体部件
我们所设计的表单其实很简单，它仅包含三个文本域，每个文本域都包含一个标签。接收姓名的输入域应是一个基本的单行文本域；接收邮件地址的输入域应该是一个单行文本域；接收信息的输入域应该能够接收多行文本域。

以上内容所对应的HTML代码如下：

<form action="/my-handling-form-page" method="post">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" />
    </div>
    <div>
        <label for="mail">E-mail:</label>
        <input type="email" id="mail" />
    </div>
    <div>
        <label for="msg">Message:</label>
        <textarea id="msg"></textarea>
    </div>
</form>

这里的< div>元素能够方便的结构化代码且能够使制作风格更加容易（见后续内容）。注意所有< label>元素的属性的使用；它是一个连接标签到一个表单窗体部件的正常的方式。该属性引用相应窗体部件的id。这样做有一些好处。最明显的一个好处是允许用户点击标签来激活相应的窗体部件。如果您想更好的理解这些属性的其它好处，所有的细节都在如何结构化HTML表单一文中。

对于< input>元素来说，最重要的属性是类型（type）属性。该属性及其重要因为它定义了< input>元素的行为方式。它能够彻底的改变元素，所以要付出注意力到该属性上。如果您想知道关于该属性更多的信息，可以阅读native form widgets一文。在我们的例子中我们使用文本值 - 该属性的默认值。它代表一个基本的单行文本域，该域可以接收除控制和验证以外的任何类型的文本。我们也使用了值email来定义一个单行的文本域以接收一个格式化的邮件地址输入。最后一个值由基本的文本域转向用户能执行在数据上的检查的“智能”类型。如果您想知道更多关于表单验证的信息，阅读Form data validation一文。

最后但并非不重要，注意< input />和< textarea> < /textarea>的语法。这一点是HTML的怪癖。< input>标签是自动封闭的元素，这就意味着如果您想封闭该元素，只需要在元素末尾添加一个”/”即可，而不是添加一个封闭标签。相反，< textarea>并不是一个自我关闭的元素，所以需要用封闭标签来结尾。这对HTML的具体特点有一定的影响：定义默认值的方式。欲定义< input>元素的默认值，您需要像以下这样使用值属性：

<input type="text" value="by default this element is filled with this text" />

相反，如果您想定义< textarea>元素的默认值，您只需要将默认值放在< textarea>元素的开始和结束标签之间即可，如下所示：

<textarea>by default this element is filled with this text</textarea>

增添< button>来完成
我们的表单几乎已经完成；我们只是还需要添加一个按钮来让用户发送它们已经填写好的数据。利用< button>元素能够轻飘飘的完成该功能：

<form action="/my-handling-form-page" method="post">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" />
    </div>
    <div>
        <label for="mail">E-mail:</label>
        <input type="email" id="mail" />
    </div>
    <div>
        <label for="msg">Message:</label>
        <textarea id="msg"></textarea>
    </div>
    <div class="button">
        <button type="submit">Send your message</button>
    </div>
</form>

按钮有三种类型：提交（submit）、重置（reset）或者button。

• 点击一个submit按钮发送表单数据到由< form>元素的动作属性定义的web页面。
• 点击reset按钮会让所有的表单窗体部件立即恢复它们默认的值。从用户体验角度来讲，这是一个比较坏的一点。
• 点击button类型的按钮，什么也不会发生！这听起来可能有些傻，但对于用JavaScript来构建自定义按钮确是十分的有用。

注意您也可以使用< input>元素加上相应的类型来产生按钮。两种方式产生按钮的主要区别在于，< input>按钮只允许纯文本作为它的标签，然而< button>元素允许完全的HTML内容作为它的标签。

03.01

用CSS让其变得稍加漂亮

到此我们已经有了HTML表单，如果在您最喜欢的浏览器中查看该表单时，您会觉得它看起来有些丑。

让咱们使用CSS样式表来让该表单稍微变得漂亮一些。

让我们以表单自身开始；将其放在中央并给其一个可见的镶边：

form {
    /* Just to center the form on the page */
    margin: 0 auto;
    width: 400px;
    /* To see the outline of the form */
    padding: 1em;
    border: 1px solid #CCC;
    border-radius:1em;
}

然后，咱们再给各表单窗体部件之间增加一些空间：

form div + div {
    margin-top: 1em;
}

现在，咱们集中到标签（labels）上。欲让我们的表单具有更加的阅读性，考虑让所有的标签拥有相同的尺寸并朝同一个方向对齐。在这种情况下，我们将它们右对齐，有时候让它们左对齐也是棒棒哒。

label {
    /* To make sure that all labels have the same size and are properly aligned */
    display: inline-block;
    width: 90px;
    text-align: right;
}

让HTML窗体部件自我进行风格化是HTML表单中最困难的事情之一。文本域很容易被风格，但一些其他的窗体部件就不那么容易了。如果您想知道更多关于HTML表单窗体部件进行格式化的信息，阅读Styling HTML forms一文。

在这里我们使用一些常见的技巧：协调字体、大小和边框：

intput, textarea {
    /* To make sure that all text fields have the same font settings By default, textareas have a monospace font */
    font: 1em sans-serif;

    /* To give the same size to all text field */
    width: 300px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /* To harmonize the look & feel of text field border */
    border: 1px solid #999;
}

HTML表单支持许多伪类来描述每个元素的状态。例如，当某个窗体部件活跃时增加一点高亮。这是帮助用户跟踪他们在表单哪个位置的一个方便的方式。

input: focus, textarea: focus {
    /* To give a little highlight on active elements */
    border-color: #000;
}

多行文本域需要一些自定义的风格。默认情况下，< textarea>元素是一个拥有底部对齐文本基本行的内联模块。大多数时间，我们不会需要这样的功能。在这种情况下，要漂亮的对齐标签和域，我们需要改变< textarea>的vertical-align属性到顶部。

同时也要注意resize属性的使用，该属性便于用户重新调整< textarea>的大小。

textarea {
    /* To properly align multiline text fields with their labels */
    vertical-align: top;

    /* To give enough room to type some text */
    height: 5em;

    /* To allow users to resize any textarea vertically
        It does not work on all browsers */
        resize: vertical;
}

许多时间里，按钮也需要特定的风格。为此目的，我们将它们放置到一个< div>中并用了一个按钮类。这里，我们想要按钮能和其它的窗体部件对齐。为实现该目标，我们不得不模仿< label>的风格。通过填充和边缘可以完成。

.button {
    /* To position the buttons to the same position of the text fields */
    padding-left: 90px; /* same size as the label elements */
}
button {
    /* This extra margin represent roughly the same space as the space between the labels and their text fields */
    margin-left: .5em

现在我们的表单看起来会好一些。

发送数据到Web服务器中

最后一部分，也许是最具有技巧性的一部分，是在服务器一边处理表单数据。正如之前所说，大多数时间里，HTML表单是请求用户数据和发送数据到服务器的一种便利的方法。

< form>元素将根据动作属性和方法属性定义如何发送以及将数据发送到哪里。

但这些还不够。我们还需要给我们的数据一个名字。这些名字对于两边来说都非常重要；在浏览器一边，它告知浏览器哪一个名字用来给数据片段，在服务器一段，它告知服服务器通过名字来处理数据。

所以给数据命名需要为每个收集特定片段数据的表单窗体部件使用属性命名：

<form action="/my-handling-form-page" method="post">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" name="user_name" />
    </div>
    <div>
        <label for="mail">E-mail:</label>
        <input type="email" id="mail" name="user_email">
    </div>
    <div>
        <label for="msg">Message:</label>
        <textarea id="msg" name="user_message"></textarea>
    </div>
    <div class="button">
        <button type="submit">Send your message</button>
    </div>
</form>

在我们的例子中，表单将会发送3个数据片段，”user_name”、”user_email”以及”user_message”3个名字。这些数据将会被发送到URL”/my-handling-form-page”（使用HTTP POST方法）。

在服务器一端，在URL”/my-handling-form-page”中的脚本将会接收该数据，该数据以3对键/值对的形式被嵌在HTTP请求中。处理数据的脚本的方式取决于您自己。每种服务器端语言（PHP, Python, Ruby, Java, C#等）各由其自己的机制。这些内容超出了本指南的范围，若您想知道更多，在 Sending and retrieving form data一文中有一些例子，您可以查看。

结论

恭喜！您构建了您的第一个HTML表单。以下是最终结果的活例。

OPEN IN CODEPEN OPEN IN JSFIDDLE

现在是时候深入了。HTML表单是一种比该文中所介绍内容更强大的方式，且the other articles of this guide 将帮助您精通HTML表单的其余部分。

03.02

2. 如何构建一个HTML表单

当构建HTML表单时，最重要的步骤之一是将其恰当的结构化。它的重要性主要有两点主要的原因：第一是为保证表单可用，第二是确保它可的可访问性（即，能被不同能力的人所使用）。HTML表单的访问性是一个关键点，我们将会介绍如何制作表单的可访问性。它虽然不难但也有一些您所需要的技巧。

HTML表单的灵活性造成了HTML最为复杂的结构之一。通过混合专用的表单元素和属性可以构建出任何类型的基本的表单。的确也还有一些更丰富的表单技术，如XForms（现在是专用的），但不幸的是，这些表单技术不是所有的浏览器都支持。因此，大多数时间我们都不得不依赖JavaScript来增强HTML表单。本文将覆盖这些细节，如何使用所有的HTML表单元素。如果您想知道关于构建自定义表单窗体部件的更多信息，您可以阅读如何构建自定义表单窗体部件一文。

全局结构

< form>元素
< form>元素是用来正式定义表单的元素，且其属性可以用来决定表单的行为方式。在每次创建HTML表单的时候，必须使用该元素开始。许多的辅助的技术或浏览器插件都能够发现 < form>元素并能实现指定的hooks来让它们更易使用。

注：严禁嵌套一个form元素到另一个form元素中。这样做所导致的不定行为取决于用户所使用的浏览器。

< form>元素支持以下属性，所有的都是可选的：

< form>元素的属性

属性名	默认值	描述
accept-charset	UNKNOWN	服务器所接收的字符编码的空间间隔列表。默认值是特定的字符串UNKNOWN，在这种情况下，编码对应包含表单元素的文件的编码
action		处理通过表单提交的信息的web页面的URI
autocomplete	on	指示在表单中的窗体部件是否可以拥有由浏览器默认自动完成的值。该属性有两个值：on或者off
enctype	application/x-www-form-urlencoded	当方法属性的值被发送后，该属性是用来提交表单到服务器的内容的[MIME 类型](http://en.wikipedia.org/wiki/Mime_type)。可能会使用的值有：application/x-www-form-urlencoded;multipart/form-data:如果您使用含类型属性设置文件的元素则使用该值；text/plain
method	get	浏览器使用HTTP方法提交表单。该属性可取两个值：get或者post
name		表单的名字。在文件中的每个表单名必须唯一且不能为空。您应该使用id属性来代替该名。
novalidate	(false)	该布尔属性只是表单在提交后不可验证。
target	_self	用来指示在提交表单后在哪里展示已经收到的响应的名字或关键词；如可以是iframe, 制表符或窗口。以下的关键词是该属性可能用到的可用的值：_self:载入响应到欲当前响应相同的浏览环境（iframe，制表符，窗口等）中；_blank:载入响应到一个新的浏览环境中；_parent:载入响应到当前的父浏览器的环境中，如果无父，该值的行为跟_self一样；_top:载入响应到浏览器环境的顶部（即，浏览器作为当前浏览器的祖父且无父浏览器）。如果无父，该值的行为跟_self相同。

03.03
< fieldset>和< legend>元素
< fieldset>元素对于创建一组分享相同意图的窗体部件是一种比较便利的方式。< fieldset>元素能被< legend>元素标记。< legend>是用来正规描述< fieldset>元素的元素。许多辅助的技术都会使用< legend>元素，它似乎是相应< fieldset>元素内每个窗体部件中标签的一部分。例如，像Jaws或者NVDA这样的屏幕阅读器将会在宣读每个窗体部件的标签之前宣读legend的内容。

以下是一个小小的例子：

<form>
    <fieldset>
        <legend>Fruit juice size</ledend>
        <p>
            <input type="radio" name="size" id="size_1" value="small" />
            <label for="size_1">Small</label>
        </p>
        <p>
            <input type="radio" name="size" id="size_2" value="medium" />
            <label for="size_2">Medium</label>
        </p>
        <p>
            <input type="radio" name="size" id="size_3" value="large" />
            <label for="size_3">Large</label>
        </p>
    </fieldset>
</form>

在这个例子中，屏幕阅读器将会为第一个窗体部件宣读“Fruit juice size small”，然后宣读”Fruit juice size medium”，最后宣读”Fruit juice size large”。

在本例中所使用的情形是最重要的形式之一。每次拥有一套radio按钮，您需要确保它们被嵌套在< fieldset>元素中。还有一些其它的使用情况，通常< fieldset>还能被用到表单模块中。因为其协助技术的影响，< fieldset>元素是构建可访问表单的一个关键元素；当然不乱用该元素是您的责任。若有可能，在每次需要构建表单时，创世监听屏幕阅读器如何解释它的。如果听起来古怪，尝试提升表单结构。

< fieldset>元素支持以下指定的属性：
< fieldset>元素的属性：

属性名	默认值	描述
disabled	(false)	若该布尔属性被设置，那么派生表单控制（而不是它的第一个可选元素的派生）被关闭且不能被编辑

< label>元素
< label>是为HTML表单窗体部件定义标签的正规方式的元素。若您欲构建可访问的表单，则钙元素是最重要的元素。

< label>元素支持以下属性：

属性名	默认值	描述
for	默认值	在相同文件中的可标签的窗体部件的ID作为label元素。在文件中含有ID的第一个元素匹配for属性值的是该label元素的可标签窗体部件。

< label>元素通过for属性绑定到具体窗体部件中。for属性实际上引用了相应窗体部件的id属性。一个窗体部件能被嵌套在label元素内，但即使能这样，最佳的方式还是通过设置for属性来关联，因为一些辅助的技术不会理解标签和窗体部件之间的隐式关系。

注意即使不考虑辅助技术，用正规的方式为给定的窗体部件设置一个标签能让用户在所有的浏览器中都能通过点击标签来激活相应的窗体部件。这对radio按钮和复选框尤其有用。

03.04
< output>元素
该元素用来保存计算输出。它是用来定义获取执行计算所需数据的域和展示结果的元素之间关系的正规元素。它也可被当做一些辅助技术（这意味着当output元素的内容改变时，辅助技术要意识到该改变并要回应这种改变）的区域来理解。

output元素支持以下属性：

属性名	默认值	描述
for		其它元素的IDs的空间分隔列表，指示为计算贡献输入值（或其它影响）的元素

和表单一起使用的常见的HTML结构
除了特定的HTML窗体结构，最好是记住窗体也只是HTML。这意味着您可以使用HTML的所有力量来结构化HTML窗体。

正如例子所示，将标签和其窗体部件包裹在p和div元素中是一种常见的实践方式。

除了fieldset元素，使用HTML标题和板块来结构化复杂的窗体也是一种常见的实践方式。

当使用复选框和单选按钮组时，HTML列表也常被用到。

以一个简单的付款窗体为例：

<form>
  <h1>Payment form</h1>
  <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>

  <section>
    <h2>Contact information</h2>

    <fieldset>
      <legend>Title</legend>
      <ul>
        <li>
          <label for="title_1">
            <input type="radio" id="title_1" name="title" value="M." />
            Mister
          </label>
        </li>
        <li>
          <label for="title_2">
            <input type="radio" id="title_2" name="title" value="Ms." />
            Miss
          </label>
        </li>
      </ul>
    </fieldset>

    <p>
      <label for="name">
        <span>Name: </span>
        <input type="text" id="name" name="username" required />
        <strong><abbr title="required">*</abbr></strong>
      </label>
    </p>

     <p>
      <label for="mail">
        <span>E-mail: </span>
        <input type="email" id="mail" name="usermail" required />
        <strong><abbr title="required">*</abbr></strong>
      </label>
    </p>
  </section>

  <section>
    <h2>Payment information</h2>

    <p>
      <label for="card">
        <span>Card type:</span>
        <select id="card" name="usercard">
          <option value="visa">Visa</option>
          <option value="mc">Mastercard</option>
          <option value="amex">American Express</option>
        </select>
      </label>
    </p>
    <p>
      <label for="number">
        <span>Card number:</span>
        <input type="text" id="number" name="cardnumber" required />
        <strong><abbr title="required">*</abbr></strong>
      </label>
    </p>
    <p>
      <label for="date">
        <span>Expiration date:</span>
        <input type="text" id="date" name="expiration" required />
        <strong><abbr title="required">*</abbr></strong>
        <em>formated as mm/yy</em>
      </label>
    </p>
  </section>

  <section>
    <p>
      <button>Validate the payment</button>
    </p>
  </section>
</form>

以下是该代码的运行结果（粗糙的用了点CSS）：

查看源代码

03.06

HTML窗体部件

当构建窗体时，需要使用一些窗体部件来收集来自于用户的数据。在本文中我们将看到如何呈现这些窗体部件；如果您想要了解关于窗体部件工作的更多信息，在 The native form widgets一文中有这样的细节。

input元素
该元素是特别的因为它几乎可以表示任何东西。通过简单的设置它的类型属性，它就会发生根本性的改变。欲将该用法变得更简单易懂些，类型属性的值被分成了四种类别：单行文本域、未输入文本的控件、时间和日期控件以及按钮。因为多样性，input元素支持许多属性，这就使得区分哪一个是相关的以及哪些是需要的就很难，因为它基于类型属性的值。

下表对input属性的所有总结（见input元素页）：

类型属性值	描述	所需属性	相关属性
单行文本域
text	这是最基本的文本域。 值text是该属性的默认值；无自动验证执行。		autocomplete, list, maxlength, pattern, placeholder, readonly, required, size, spellcheck
email	用来编辑一个或多个e-mail地址的域。		autocomplete, list, maxlength, multiple, pattern, placeholder, readonly, required, size
password	该文本域中的值是被掩盖的。		autocomplete, list, maxlength, readonly, required, size
search	供输入搜索字符串的域。		autocomplete, autosave, list, maxlength, pattern, placeholder, readonly, required, size, spellcheck
tel	供编辑电话号码的域。		autocomplete, list, maxlength, pattern, placeholder, readonly, required, size
url	供编辑绝对URL的域。		autocomplete, list, maxlength, pattern, placeholder, readonly, required, size
无文本输入的控件
checkbox	一个复选框		checked, required
color	一个指定颜色的控件		autocomplete, list, required
file	让用户选择文件的控件		accept, multiple, required
hidden	不被展示的控件，但其值会提交给服务器。
number	供输入浮点数的控件		autocomplete, list, max, min, readonly, required, step
radio	单选按钮；在给定的一组按钮中只有一个能被选中。		checked, required
range	一个供输入数字但其值不那么重要的控件。		autocomplete, list, max, min, required, step
时间和日期控件 不支持
date	供输入日期（年，月，日）的控件		autocomplete, list, max, min, readonly, required
datetime	供输入基于UTC时区的日期和时间（小时，分钟，秒，以及秒的分数）的控件		autocomplete, list, max, min, readonly, required
datetime-local	供输入无时区的日期和时间的控件		autocomplete, list, max, min, readonly, required
month	供输入月和年的控件，无时区		autocomplete, list, max, min, readonly, required
time	供输入时间的控件，无时区		autocomplete, list, max, min, readonly, required
week	供输入由周-年数字和周组成的时间的控件，无时区		autocomplete, list, max, min, readonly, required
按钮
button	一个无默认行为的按钮。		formaction, formenctype, formmethod, formnovalidate, formtarget
image	一个图形提交按钮。	src, alt	width, height, formaction, formenctype, formmethod, formnovalidate, formtarget
reset	一个用于设置窗体到默认值的按钮		formaction, formenctype, formmethod, formnovalidate, formtarget
submit	提交窗体的按钮		formaction, formenctype, formmethod, formnovalidate, formtarget

03.7
若因某些原因导致浏览器并不支持类型属性中的值，那么会按照其值为text来渲染input元素。这让窗体能够工作，即使不是一种有吸引力的方式。

尽管input元素是一个强大的工具，但它不能做所有的事情，所以还有一些其它的元素来处理input不能做到的情况。

textarea元素
该元素专用于多行文本域。除了允许用户在输入文本过程中允许换行外它及其想单行文本域。它也接收几个额外的属性来控制它的多行渲染：
textarea元素的属性

属性名	默认值	描述
clos	20	文本控件的可见宽度，每个字符的平均宽度
rows		控件可见文本行的数量
wrap	soft	指示控件如何包裹文本。可能值有：hard或soft

注意textarea元素的运作与input元素稍有不同。input元素是一个自我关闭的元素，这表明它不能包含任何的子元素。而textarea元素是一个正常的元素也就可以包含子文本内容。

它有两个影响：

• 若想给input元素定义默认值，需要使用值属性，但对于textarea元素来说，可以将默认值放在开始和关闭标签之间。
• 因为textarea的特性，该元素值接收文本内容；这就意味着任何放在textarea中的HTML内容都会被当作纯文本渲染。

在以下例子中，两个textarea元素中的内容渲染出来是相同的：

<form>
    <p>
        <label for="text_1">With regular HTML</label></br>
        <textarea id="text_1" name="regular"><p>I'm a paragraphe</p></textarea>
    </p>
    <p>
        <label for="text_2">With escaped HTML</label><br>
        <textarea id="text_2" name="escaped">&lt;p&gt;I'm a paragraphe&lt;/p&gt;</textarea>
    </p>
    <p>
        <button>Send me</button>
    </p>
</form>

select, option, optgroup元素
select元素允许您构建选择框（有时也被称为组合框）。选择框是一个允许用户选择一个或多个预定义值的窗体部件。单值选择框和多值选择框的区别在 The native form widgets一文中有详细说明。

在选择框中的每个值都用一个option元素定义且这些元素可以成组的在optgroup元素中。

让我们举例说明：

<form>
    <p>
        <label for="myFruit">Pick a fruit</label>
        <select id="myFruit" name="fruit">
            <!-- There is a trick here you think you'll pick a nanana but you'll eat an orange >:-) -->
            <option value="orange">Banana</option>
            <option>Cherry</option>
            <optgroup label="berries">
                <option>Blueberry</option>
                <option>Raspberry</option>
                <option>Strawberry<option>
            </optgroup>
        </select>
    </p>
</form>

若option元素设置了值属性，当窗体被提交时该属性值也会被发送。如果值属性被略去，option元素的内容被用作选择框的值。

在option元素中，标签属性在值之前展示，即使这样看起来有些像option，它也不是可选择的。

option元素属性

属性名	默认值	描述
label		该属性标签描述option的一个文本。如果标签属性没有定义，它的值就是元素的文本内容。
selected	(false)	若存在，该布尔属性指示某option初始化为被选择状态

optgroup元素属性

属性名	默认值	描述
label		一组option的名字。该属性是强制性的。

03.09
datalist元素
该元素通过预设给定窗体部件的值来扩展已存在的窗体部件。该元素最著名的用法是用它来自动完成文本列表。在datalist元素中用option元素可设置这些值。

欲给某窗体部件绑定datalist元素，您应该在目标窗体部件中使用列表属性；它指定了目标窗体部件要使用的datalist元素的id属性。

datalist是最近才添加到HTML窗体内的，所有仍有一些浏览器不支持该元素。欲解决该问题，以下的小技巧可以为这些浏览器寻找到一个好的退路：

<form>
    <p>
        <label for="myFruit">What is your favorite fruit?</label>
        <input type="text" id="myFruit" name="fruit" list="fruitList" />

        <datalist id="fruitList">
            <label for="suggestion">or pick a fruit</label>
            <select id="suggestion" name="altFruit">
                <option value="banana">Banana</option>
                <option value="cherry">Cherry</option>
                <option value="strawberry">Strawberry</option>
            </select>
        </datalist>
    </p>
</form>

一方面，支持datalist元素的浏览器将会忽略所有的非option元素并会按照预期那样工作。另一方面，不支持datalist元素的浏览器将会呈现标签和选择框。当然，还有其它的方法来处理这种对datalist元素支持的缺乏，但需要使用JavaScript（这通常不是一种非必要的好的选择）。

meter和progress元素
这两个元素是以图形化的形式呈现一个给定的数值的方式。这两个元素的主要不同主要在于语义：

• meter元素呈现一个在最小和最大值之间的静态值及其相关。
• progress元素呈现在最小和最大值之间的随着时间移动的改变值。需要注意值的改变（从而呈现进度显示条）需要用JavaScript来完成。该元素本身没有任何机制来完成这个过程。

由于他们的性质，这些元素支持一些列特定的属性：
meter元素

属性名	默认值	描述
min	0	测量范围较低的数值范围
max	1	测量范围较高的数值范围
low	the min value	测量低范围结束的高数值范围
high	the max value	测量范围高结束的低数值范围
optimum		最优数值

progress元素

属性名	默认值	描述
max		该属性描述在progress元素完成前任务被指示的所需要完成的工作量

button元素
button元素是创建窗体按钮最简单的方式。一个按钮可以是3种类型之一，具体类型基于类型属性的值：

• 提交按钮将发送窗体的数据到由form元素的action属性所定义的web页面中。
• 重置按钮将立即重新设置窗体部件的默认值。从用户体验的视觉来看，使用这样的按钮被当作是一种比较糟糕的实践，所以应该被避免；它很容易就造成用户失去之前所完成的所有数据。
• 一个匿名的按钮没有任何固有的含义；但您可以通过JavaScript给它一个功能。

button元素的属性

属性名	默认值	描述
type	submit	按钮类型。可能的值有：button, reset, submit
formaction		若按钮的类型是submit，该属性的值属性值将覆盖form元素的action属性的值
formenctype		若按钮的类型是submit，该属性值将覆盖form元素的enctype属性值
formmethod		若按钮的类型为submit，该属性值将覆盖form元素的method属性值
formnovalidate		若按钮的类型为submit，该属性值将覆盖form元素的novalidate属性值
formtarget		若按钮的类型为submit，该属性值覆盖form元素的target属性值

从技术上讲，用button元素或者input元素定义按钮几乎没有区别。唯一需要注意的不同是button标签本身。在input元素内，标签只可以是字符数据，然而在button元素内，标签可以是HTML，所以能够响应的被风格化。

03.15
共同属性
许多元素用来定义形成某些拥有它们自己属性的窗体部件。然而，所有的窗体部件拥有一些共同的属性。下表是对这些共同属性的列举：

属性值	默认值	描述
autofocus	(false)	该布尔属性在页面被载入时能够指定元素自动接收输入焦点，除非用户重写它，例如通过键入一个不同的控制。在文件的表单相关的元素中只能有一个元素能够被指定该属性。
disabled	(false)	该布尔元素指定用户不能和该元素交互。若没有指定该属性，该元素基础它容器元素的设置，如fieldset；若没有设置关闭该属性设置的容器元素，则该元素将会被开启该属性。
form		窗体部件关联的窗体元素。该属性值必须是在同一文件中某form元素的id。从理论上讲，能够在form元素外设置窗体部件。然而实际上，并没有浏览器支持该特性。
name		元素名；它同窗体数据一同被提交。
value		元素初值

使用ARIA结构化HTML表单

ARIA是a W3C Candidate Recommendation，即添加到HTML中以提高众多Internet应用程序的访问性，包括窗体在内。在”How to build custom form widgets“一文中将会有更多的细节讨论，这里只有一些基本的点。

在深入以前，值得注意是能完美支持ARIA和辅助技术的浏览器还很遥远，但它正在提升。仅理解此问题，当浏览器遇到ARIA属性后，它不得不发送信息给操作系统访问层。不是所有的浏览器都擅长跨平台做这件事情。它们自己的辅助技术，需要将它们连接到OS访问层以处理来自浏览器的信息。但，并不是所有的辅助技术都能够将其做好。所以使用ARIA并不意味着web应用程序具可访问性，但这意味着已做到最好来获取该点了。不幸的是，ARIA虽然被赋予了主要的努力，但它似乎并没有变好多少。

若您想挖掘在HTML窗体使用ARIA的更多知识，随便阅读下ARIA的相关文档。

aria-labelledby属性
该属性便于在没有使用label元素时定义标签。该属性被设置在窗体部件元素上且引用被当作标签使用元素的id属性。

<form>
    <p id="fruitLabel">What's your favorite fruit</p>
    <p>
        <input type="text" name="fruit" aria-labellledby="fruitLabel">
    </p>
</form>

从概念上讲，它和label元素的for属性相反。使用for属性，引用窗体部件的id，使用aria-labeledby属性就引用标签的id。

aria-describedby属性
该属性机制似aria-labelledby属性。二者主要不同在于语义。标签定义对象的本体，然而描述提供用户可能会需要的更多信息。该属性不建议用于窗体元素；应该基于aria-labelledby属性使用，除非您想给当前窗体元素提供扩展信息。它被当作一个提供长描述的提供器。

aria-label属性
当一个给定窗体部件的DOM中无显示的标签时使用该元素。它提供一个能够被传送给辅助技术的窗体部件且并不会实际为此创建一个DOM节点。

<form>
    <p>
        <input type="search" name="q" aria-label="Serach" />
        <input type="submit" value="Go" />
    </p>
</form>

role属性
这是ARIA最重要的属性。它能够指定一个给定HTML元素的辅助技术能够理解的语义信息。该属性包含许多可用角色，且其中的一部分专用于某些窗体部件。

ARIA尝试给当前还不在HTML中的窗体部件和已经存在的元素提供语义。在如何构建自定窗体部件一文中能看到如何使用这些角色。

给窗体部件使用的角色有：

• Button
• Chechbox
• Progressbar
• Radio
• Slider
• Spinbutton
• textbox

还值得注意的还有一些被称为混合角色的角色：

• Listbox
• Radiogroup

若这些角色很有用，这里还有很多；ARIA是一个非常大的规范。挖掘它能够帮助提高HTML窗体以外的域的访问性。

结论

现在您已经知道了HTML窗体所有的结构的知识；下一篇文章将挖掘实现细节和功能预期：the native form widgets。

其它参考资料

A List Apart: Sensible Forms: A Form Usability Checklist

3. 本地窗体小部件

03.25
HTML窗体由窗扣小部件组成。这些窗口小部件是每个浏览器内建的控制部件。本文将挖掘它们，了解他们如何工作且学习有多少种浏览器支持它们。

我们将集中在内建的窗体小部件上，但因为HTML窗体仍旧十分有限且不同浏览器实现的窗体差异较大，所以web开发者有时需要自己构建他们的窗体部件。这些内容将在“如何构建自定义窗体小部件”一文中被详细介绍。

文本输入域

文本输入域是最基本的窗体部件。它们是接收用户任何输入数据的一种非常方便的方法。然而，一些文本域可以被指定来获取特殊的需要。

HTML窗体文本域是简单的纯文本输入域。这就意味着不能使用它们来执行丰富的编辑（加粗，斜体等）。所有丰富的文本编辑器都是自定义的部件。

所有的文本域都共享一些相同的行为：

• 它们都可以被标记为readonly（用户不可修改输入值）或disabled（输入值不随着窗体数据一起发送）。
• 它们被使用placeholder；出现在文本输入框中用来简单描述文本框的文本。
• 它们可以被约束size（框的实际尺寸）和length（能输入到文本框中的最大字符数量）。
• 它们可以被指定spell checking，若浏览器支持的话。

兼容表格

特征桌面（Feature Desktop）	Chrome	Forefox(Gecko)	IE	Opera	Safari
input readony	1.0	1.0(1.7 or earlier)	6	1.0	1.0
input disabled	1.0	1.0(1.7 or earlier)	6	1.0	1.0
input placeholder	10.0	Unknown(4.0)	10	11.10	4.0
textarea placeholder	10.0	Unknown(4.0)	10	11.50	5.0
input size	1.0	1.0(1.7 or earlier)	2	1.0	1.0
input maxlength	1.0	1.0(1.7 or earlier)	2	1.0	1.0
input spellcheck	10.0	Unkown(3.6)	10	11.0	4.0
Feature Mobile	Android	Firefox Mobile(Gecko)	IE Mobile	Opera Mobile	Safari Mobile
input readony	(yes)	4.0(4.0)	(yes)	(yes)	(yes)
input disabled	(yes)	4.0(4.0)	(yes)	(yes)	(yes)
input placeholder	2.3	Unknown4.0(4.0)	?	11.10	4
textarea placeholder	?	Unknown4.0(4.0)	?	11.50	4
input size	(yes)	4.0(4.0)	(yes)	(yes)	(yes)
input maxlength	(yes)	4.0(4.0)	(yes)	(yes)	(yes)
input spellcheck	?	Unkown4.0(4.0)	?	11.0	?

4. 有HTML表单的CSS

4.1 风格的HTML表单

4.2 HTML表单的高进风格

4.3 表单窗体部件的属性兼容表

5. 发送和检索表单数据

6. 数据表单验证

7. 如何构建自定义表单窗体部件

8. 通过JavaScript发送表单

使用FormData对象

9. 在传统浏览器中的HTML表单

03.27 - 04.05

HTML文件

HTML元素

元素	相关DOM接口	描述
button	HTMLButtonElement	该按钮元素代表一个可点击按钮
datalist	HTMLDataListElement	datalist元素包含一些option元素（代表其它元素可能的原则值
fieldset	HTMLFieldSetElement	fieldset用来组织窗体内的几个元素
form	HTMLFormElement	form元素代表包含交互元素（用于用户提交信息给web服务器）文件的模块
input	HTMLInputElement	该元素用来为窗体建立可交互的控件
keygen	HTMLKeygenElement	该元素用于优化一代关键材料，并提交HTML窗体的公共key
label	HTMLLabelElement	标签能够给用户界面中的条目提供文字说明
legend	HTMLLegendElement	该元素能够为父元素fieldset的内容提供文字说明
meter	HTMLMeterElement	该元素可以代表一个已知区域内的标量值或分数值
optgroup	HTMLOptGroupElement	该元素在select元素内创建一组选择
option	HTMLOptionElement	HTML option元素用于在select、optgroup或datalist元素内创建代表条目的控件
output	HTMLOutputElement	output元素代表结算结果
progress	HTMLProgressElement	该元素用于查看一个任务的完成进度
select	HTMLSelectElement	该元素代表菜单选项的控件
TextArea	HTMLTextAreaElement	该元素代表多行文本编辑控件

04.05

HTML属性

属性名	元素	描述
accept	form, input	服务器接收类型列表，尤其是文件类型
accept-charset	form	所支持的字符集列表
action	form	通过窗体提交的处理信息的程序的URI
autocomplete	form, input	指示在本窗体中是否默认由浏览器来自动补充默认值
autofocus	button, input, keygen, select, textarea	当页面加载后该元素自动聚焦
challenge	keygen	跟公共key一起提交的一个challenge字符串
checked	input	指示该元素是否在页面加载时检查该元素
cols	textarea	在textarea中定义列的数量
data	object	指定资源的URL
dirname	input, textarea
disabled	button, fieldset, input, keygen, optgroup, option, select, textarea	指示用户是否可以和该元素交互
enctype	form	当方法是POST时定义窗体内数据的类型
for	label, output	描述哪一个元素属于该元素
form	button, fieldset, input, keygen, label, meter, object, output, progress, select, textarea	指示该元素的父窗口
high	meter	指示更大范围的下限
keytype	keygen	指示key生成的类型
list	input	标识预定义选择列表以暗示用户
low	meter	指示更小范围的上限
max	input, meter, progress	指示所允许的最大值
maxlength	input, textarea	定义在元素内允许的最大数量的字符
method	form	定义提交窗体时使用哪一种HTTP方法。可以是GET（默认）或POST
min	input, meter	指示所允许的最小值
multiple	input, select	指示是否可以往email或文件类型的输入控件中输入多个值
name	button, form, fieldset, input, keygen, output, select, textarea	元素名。如在窗体提交中被服务器用来标识域
novalidate	form	该属性指示窗体当提交时不应有效
optimum	meter	指示最优值
pattern	input	定义元素值应该有效的正则表达式
placeholder	input, textarea	给用户提供暗示可以往域中输入的内容
readonly	input, textarea	指示元素是否可编辑
required	input, select, textarea	指示元素是否需要填充
rows	textarea	在textarea中定义行数
selected	option	定义当页面加载时被选中的内容
size	input, select	定义元素的宽度（像素）。若元素类型属性为text或password，则为其字符数量
src	img	嵌入内容的URL
step	input
target	form
type	form	定义元素类型
usemap	img
value	button, option, input, meter, progress	定义默认值，当页面加载后该值会显示出来
wrap	textarea	指示文本是否应包裹

规范参考

• W3C HTML 5.1 Specification (Forms)
• WHATWG HTML Living Standard (Forms)

[2016.02.28 - 21.18]