济南盈讯科技有限公司

20. HTML 表单基础知识

序言

每个人都曾看到过和用过表单，不过你曾写代码创建过一个表单吗？

表单是网页上用于输入信息的区域，例如向文本框中输入文字或数字，在方框中打勾，使用单选按钮选中一个选项，或从一个列表中选择一个选项等。在你按下提交按钮后，表单就被提交到网站。

表单在网上随处可见，它们被用于在登录页面输入用户名和密码，对博客进行评论，在社交网络网站填写个人信息，或在购物网站指定记账信息等。

创建表单并不难，但要创建出符合 Web 标准的表单又是怎么样的呢？如果你已经通读了本课程前面的所有文章，也许已认识到 Web 标准是规范网页编写工作的好方式。因此，创建一个符合 Web 标准的、可访问性好的表单，并不比以不符合规范的代码编写一个不符合 Web 标准的表单更费力。

在本篇文章中，我将一步一步讲述如何创建 HTML 表单，从最基本和最简单的表单到更复杂的表单。在学习完本篇文章后，你们应该就能掌握使用 HTML 创建有效的、可访问性好的表单的基础知识。本篇文章的内容目录如下：

• 第一步：基本代码
• 第二步：添加结构和行为
• 第三步：添加语义、样式和更多的结构元素
• 总结
• 延伸阅读
• 练习题

第一步：基本代码

我们从创建一个简单的评论表单开始，评论表单可用于让访问者对网站上的内容如文章等发表评论，还可用于让不知道你邮箱地址的访问者在表单中输入信息，与你联系。这种评论表单的代码如下：

<form>
Name: <input type="text" name="name" id="name" value="" />
Email: <input type="text" name="email" id="email" value="" />
Comments: <textarea name="comments" id="comments" cols="25" rows="3"></textarea>
<input type="submit" value="submit" />
</form>

如果你把以上代码输入一个 HTML 文档，然后用浏览器打开这个文档，代码将被渲染为如图1所示的样子。

图1：一个简单的表单示例

请自己动手将以上的代码输入你自己的样本 HTML 文档，并在浏览器中载入这个文档，或是点击这里观看在一个单独页面显示的表单。你们可以试着对代码做些改动，看看表单会发生什么变化。

在以上这段代码中，你们看到有一个 <form> 开始标签和一个 </form> 结束标签，以及在这两个标签之间的一些信息。 这个元素内包含两个用于让访问者输入名字和电子邮件地址的文本输入框，以及一个用于发表和提交评论的文本区域。

以下是对表单代码的分析：

• <form></form>：这两个标签是创建一个表单所需的基本标签，每一个表单都必须以 <form> 标签起始，并以 </form> 标签结束。

  <form> 标签可有几个属性，这些属性将在以下第二步中再讲述。有一点你们必须注意，那就是不能在一个表单内再嵌套一个表单。

• <input>（如果你使用 XHTML 文档类型，则应写为 <input />）：这个标签定义了那些可以输入信息的区域。在以上这个示例表单中，input 标签定义了网站访问者可以输入名字和电子邮件地址的文本框。

  每个 input 标签都必须有一个定义接受类型的 type 属性，其可能的属性值包括：text（文本框），button（按钮），checkbox（复选框），file（文件），hidden（隐藏字段），image（图像），password（密码框），radio（单选按钮），reset（重置按钮），submit（提交按钮）。

  每个 <input> 标签还必须有一个名字（除了一些特殊情况，需要将 value 属性值始终设为和 type 属性值一样，如 type="submit" 或 "reset"），做为编码人员的你就可以决定这件事。name 属性定义提交表单时数据字段的名称（如一个数据库，或是通过服务器端的脚本发送给网站管理员的电子邮件）。当表单被提交时，绝大多数脚本都使用 name 属性来将表单数据放入数据库，或放入可供人阅读的电子邮件。

  因此，如果 <input> 元素是用于让网站访问者输入其名字的，则 name 属性可以为 name="name" 或 name = "first name" 等。如果 <input> 标签是用于输入电子邮件地址，则 name 属性可以为 name="email"。为让你更容易地创建表单，并让使用表单的人更容易使用，建议你以语义化的方式为 <input> 元素命名。

  所谓语义化的方式，我指的是像上面那样，根据其功能为其命名。如果要输入的数据是电子邮件地址，则把其命名为 name="email"。如果要输入的数据是网站访问者的街道地址，则把其命名为 name="street-address"。使用的命名词语越准确，不仅让你编写表单代码变得更容易，而且让你以后做维护网站的工作时也更为轻松，同时还让接收表单的人或数据库更容易解释数据。我们需要多思考一会儿，选择精确的名称。

• 每个 <input> 标签还必须有一个 value 属性。value 属性值可以为空，即 value=""，这将告诉处理脚本插入网站访问者在表单框里输入的任何数据。对于复选框、单选按钮、隐藏字段、提交按钮，或其它类型的属性，你可以为其设置你希望的默认值。在其它一些情况下，如对“提交按钮”或“隐藏字段”类型，你将其值设为等于最终的输入。例如，value="yes" 代表“是”，提交按钮设为 value="submit"，重置按钮设为 value="reset"，隐藏的重定向字段设为 value=http://www.opera.com 等。

  以下是一些如何使用 value 属性的示例：

  空值属性，由用户的输入决定属性值：

  • 代码为：<input type="text" name="first-name" id="first-name" value="" />

  • 用户输入：Jenifer

  • 当表单提交时，first-name 的值以“Jenifer”发送。

  预定值：

  • 代码为：<input type="checkbox" name="mailing-list" id="mailing-list" value="yes" />

  • 用户在方框里打勾，代表他们希望加入网站的邮件列表。

  • 当表单被提交时，mailing-list 的值以“yes”被发送。

• 在 <input> 元素之后，你们可以看到另一个有点不同的 textarea 元素。

  textarea 元素提供了一个可输入文本的更适宜的空间。与 <input> 元素提供的那种一行的普通文本框不同，textarea 元素提供多行的可输入文本的区域，其行数可以由你定义。注意 cols 和 rows 属性，它们是 textarea 元素必须拥有的属性，它们定义文本区域的行数和列数为多大，属性值的单位是字符。

• 最后，在上面的示例中，还有一个特别的属性为 value="submit" 的 <input> 元素，这个元素将在浏览器中渲染为一个提交按钮，而不是一个单行文本框。点击提交按钮，表单就会被提交到已预订指定的接收数据的地方（在以上的示例中，功能尚不完全，因此进行表单提交时将不起作用）。

第二步：添加结构和行为

为什么当你在上面的示例表单中填写入文本，并点击提交，还不起作用呢，而且表单的外观也不好看，只有一行呢？答案在于尚未为表单添加结构，并定义表单提交到那个地方。

现在看一下加入新代码后的表单：

<form id="contact-form" action="script.php" method="post">
    <input type="hidden" name="redirect" value="http://www.opera.com" />
    <ul>
        <li>
            <label for="name">Name:</label>
            <input type="text" name="name" id="name" value="" />
        </li>
        <li>
            <label for="email">Email:</label>
            <input type="text" name="email" id="email" value="" />
        </li>
        <li>
            <label for="comments">Comments:</label>
            <textarea name="comments" id="comments" cols="25" rows="3"></textarea>
        </li>
        <li>
            <input type="submit" value="submit" />
            <input type="reset" value="reset" />
        </li>
    </ul>
</form>

当以上这段代码在浏览器中渲染时，样子如图2所示：

图2：新表单示例，看起来更好一些了，但尚不完善

你们可以点击这里在独立的网页中观看这个新表单。

在以上这段代码中，我为第一步那个基本的表单添加了一些代码。以下是这些新添加代码的逐项分析：

• 在 <form> 标签中加入了一些新属性。我加入了 id 属性，这不仅为表单赋予了语义化的名称，而且为表单提供了独一无二的 ID，这样便于使用 CSS 为表单添加样式，或使用 JavaScript 为表单添加行为。在每个网页中每个 id 必须是唯一的，在这个示例中，我将其命名为 contact-form。

• 灯光、摄像、开始！当你在第一个表单中点击提交按钮时，什么也没有发生，这是由于尚未添加行为或提交方式。method 属性指定了数据如何发送给处理该等数据的脚本。两种最常见的提交方式是“GET”和“POST”。“GET”提交方式将把数据发送到网页的 URL 地址中（你们有时候会看到这样的 URL 地址：http://www.example.com/page.php?data1=value1&data2=value2...，这就是在使用“GET”提交方式发送数据）。除非你有特别的理由需要使用“GET”提交方式，最好不要使用这种方式发送安全信息，因为通过 URL 地址传输信息，任何人都可以看到信息。而“POST”提交方式，则是通过处理表单的脚本。无论是以电子邮件方式发送给网站管理员，或者是存储到数据库中供以后访问，都比“GET”URL 要好。“POST”提交方式更为安全，通常也是更好的表单提交方式。

  如果你很在意表单中数据的安全性，例如要向一个购物网站提交信用卡号码。则你应当使用带有安全套接层（SSL）的 https 协议。简单地说，这意味着数据将通过 https 协议而不是 http 协议传送。你可以查看一下一些购物网站或网上银行的 URL 地址，你很可能看到的是 https:// 这样的 URL 地址，而不是 http:// 这样的 URL 地址。 https 协议和 http 协议二者之间的差别在于，https 连接在传输数据的速度方面要比 http 连接慢一点，但数据是加密传送，这样任何侵入数据连接的人都无法知道正在传输的数据到底是什么。你可以询问你的虚拟主机提供商，了解他们如何向你提供 https 和 SSL 服务。

• action 属性规定表单数据应该发到哪个脚本文件来进行处理。许多虚拟主机提供商都提供有发送邮件脚本，或其它可定制的表单脚本（请查阅你的虚拟主机技术文档了解相关信息）。另一方面，你也可以使用自己，或他人编写的用于处理表单数据的服务器端脚本。通常，人们使用 PHP、Perl、Ruby 等语言来编写处理表单的脚本。例如，使用这类脚本，你可以发出包含表单信息的电子邮件，或是将表单信息输入数据库，供日后使用。

  为你们编写一个服务器端脚本，或是教你们如何编写服务器端脚本的代码，这已超出了本课程的范围。请询问你的虚拟主机提供商，他们可为你提供哪些服务器端脚本，或请教专业编程员。

  如果你想深入了解服务器端脚本，可以访问以下列出的一些网络资源：

  • Perl：http://www.perl.com

  • PHP：http://www.php.net

  • 处理表单的PHP技术文档：http://uk3.php.net/manual/en/tutorial.forms.php

  • Python：http://python.org

  • Ruby：http://www.ruby-lang.org

  • Sendmail：http://www.sendmail.org

  • ASP.NET：http://www.asp.net

• 在上面的表单代码中，新加入的第二段代码是“隐藏的”输入字段，即一个网页重定向。

  为实现将 HTML 标记的结构与表现、行为相分离的目标，让处理表单的脚本在表单提交时，同时也把用户重定向到一个网页，是很理想的方式。你肯定不愿意让用户在提交表单后不知道下一步究竟该怎么做，此时把用户重定向到一个包含“下一步怎么做”的链接的网页，肯定能大大改善用户体验。在我们这个示例表单中就加入了一段代码，该段代码规定在用户提交了表单后，将被重定向到 Opera 的主页。

• 为让表单的外观更好看，我把所有的表单元素都放入了一个无序列表，这样我就可以使用标记将这些元素排列好，然后使用 CSS 为表单添加样式。

  一些人也许会说，你不应该使用一个无序列表来标记表单，而是应该用定义列表来标记表单。还有一些人也许会说，根本就不应该使用列表，而是应该使用 CSS 来为 <label> 和 <input> 标签添加样式。我想让你们对这两种不同的观点进行思考，就哪一种方式更为适当、更为语义化做出自己的判断。在以上这个示例表单中，我选择使用无序列表。

• 最后，我为所有表单元素添加了标识，既标明了表单元素的含义，也让各种联网设备可以访问表单。通过查看 label 元素的内容，你会发现通过将 input 和 textarea 的 id 属性值设置得和 label 元素的 for 属性值相同，可以将 label 绑定到相应的表单元素上。这是非常好的做法，因为这样不仅直观地指明了屏幕上每个表单字段的目的，而且还使表单域具有更为语义化的含义。例如，那些通过屏幕阅读器访问网页的视力受损的用户，现在就能知道标识对应着哪一个表单元素。id 还可以用于使用 CSS 对各个表单字段进行样式化。

  现在你们可能会问，为什么表单元素既要有作为识别符的 id 属性，又要有 name 属性呢？答案如下：没有指定 name 属性的 input 元素不会被提交到服务器，因此 name 属性是必需的。同时，由于 id 属性用于将表单元素与它们相对应的 label 元素联系起来，因此也是必需的。

在添加了以上代码后，现在这个示例表单看起来要好一些了，不过其外观还是不太好看。在为表单应用样式前，还需要对它进行一些改动。

第三步：添加语义、样式和更多的结构元素

现在我将把示例表单的最后版本呈现在你们面前，其代码如下：

<form id="contact-form" action="script.php" method="post"> 
  <fieldset>
    <legend>Contact Us:</legend>
    <ul>
      <li>
        <label for="name">Name:</label>
        <input type="text" name="name" id="name" value="" />
      </li>
      <li>
        <label for="email">Email:</label>
        <input type="text" name="email" id="email" value="" />
      </li>
      <li>
        <label for="comments">Comments:</label>
        <textarea name="comments" id="comments" cols="25" rows="3"></textarea>
      </li>
      <li>
        <label for="mailing-list">Would you like to sign up for our mailing list?</label>
        <input type="checkbox" checked="checked" id="mailing-list" value="Yes, sign me up!" />
      </li>
      <li>
        <input type="submit" value="submit" />
        <input type="reset" value="reset" />
      </li>
    </ul>
  </fieldset>
</form>

当以上表单代码在浏览器中被渲染时，其呈现出来的样子如图3所示。

图3：示例表单的最后版本

要观看这个表单在浏览器中实际显示出来的样子，可以点击这个链接，在单独的网页中观看这个表单。

我为这个表单添加的最后两个主要元素是 fieldset 元素和 legend 元素。这两个元素都不是必须使用的元素，但较复杂的表单一般都会用到它们。

使用 fieldset 元素，可让你将表单组织入语义化的模块中。在较复杂的表单中，你可以为地址信息、记账信息、顾客偏好等使用不同的 fieldsets 元素。使用 legend 元素，则可让你为每个 fieldset 区段命名。

我还使用了一点 CSS，对结构性标记进行了样式化。我使用的是一个外部样式表，可点击这里观看样式。我使用 CSS 想完成的两个最重要的任务：第一，添加边距，以让标签和输入框排列整齐；第二，去除无序列表的项目符号。以下是那个外部样式表中的 CSS 代码：

#contact-form fieldset {width:40%;}
#contact-form li {margin:10px; list-style: none;}
#contact-form input  {margin-left:45px; text-align: left;}
#contact-form textarea {margin-left:10px; text-align: left;}

这些代码的功能是什么？第一行代码为 fieldset 设置宽度，使之不占据整个页面。如果你不希望它有边框，可以使用 {border: none;} 来设置。第二行代码为 li 元素添加了 10个像素的边距，以使每个列表项目间有一些间隔。第三行和第四行代码，为 input 和 textarea 元素设置了左边距，这样它们就可以排列整齐，且不使标签显得挤在一起。如果你想了解关于对表单进行样式化更多的知识，请查阅本课程后面的专题文章“对表单进行样式化”（稍后将会发布）或 Nick Rigby 的文章“更美观且可访问性好的表单”。关于边距和边框，在后面的文章中将详细讲述。

总结

在本篇文章中，我讲述了创建符合 Web 标准的表单的三个基本步骤。还有很多关于表单的知识我并未在本篇文章中讲述，包括快捷键、复选框、单选按钮、自定义提交、重设按钮、选择框等，这些留待你们自己去钻研。

在以上示例表单中，我加入了一个复选框，以向你们展示如何使用 input 元素的附加属性，来收集单行文本输入或多行文本区输入范围以外的信息。可以使用 type 为 checkbox 和 radio 的属性值，列出一些简短的问题及一个供阅读者选择的选项列表（复选框可选择多个选项，而单选按钮只能选择一个选项）。在调查表单中，单选按钮非常有用。

在本篇文章中未讲述的 select 元素，可用于下拉菜单选择（例如，国家、州或省的列表）。

延伸阅读

• Cameron Adams, “Accessible, stylish form layout”: http://www.themaninblue.com/writing/perspective/2004/03/24/.
• Brian Crescimanno, “Sensible Forms: A Form Usability Checklist”: http://www.alistapart.com/articles/sensibleforms/.
• Simon Willison, “Easier form validation with PHP”, http://simonwillison.net/2003/Jun/17/theHolyGrail/.
• The Spec. Not any old specification, but THE W3C SPEC—http://www.w3.org/TR/html401/interact/forms.html. If you ever have a bout of insomnia in which a warm glass of milk, counting sheep, and Ambien are not putting you to sleep, go read the whole spec for HTML 4.01 or XHTML 1.0 at the w3.org. It is cheaper and more effective than any remedy out there. [Insert name of deity here] bless the engineers of the world.
• The nice folk over at the W3.org have defined the differences between “GET” & “POST” and when to use them: http://www.w3.org/2001/tag/doc/whenToUseGet.html.
• Many blessings upon Mr. Rigby: http://alistapart.com/articles/prettyaccessibleforms.

练习题

自己动手编写一个联系表单的代码。

1. 创建一个要求用户提交姓名、电子邮件地址、评论的简单表单。
2. 为表单添加一个复选框，询问读者是否愿意加入邮件列表。
3. 使用 CSS 为表单添加一些样式，包括设置表单的宽度、将标签设置为左对齐、为页面设置背景色等。

提示：可以尝试添加各种表单元素和 CSS 样式，看看这个简单的联系表单会发生哪些变化。

更多的提示：如果你想进一步学习更高级的内容，去找一个脚本或使用虚拟主机提供商用于将表单发送给你的脚本。如果有什么问题，你可以请教程序员如何调试脚本。

• < 上页
• 下页 >