序言
每个人都曾看到过和用过表单，不过你曾写代码创建过一个表单吗？
表单是网页上用于输入信息的区域，例如向文本框中输入文字或数字，在方框中打勾，使用单选按钮选中一个选项，或从一个列表中选择一个选项等。在你按下提交按钮后，表单就被提交到网站。
表单在网上随处可见，它们被用于在登录页面输入用户名和密码，对博客进行评论，在社交网络网站填写个人信息，或在购物网站指定记账信息等。
创建表单并不难，但要创建出符合 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=www.opera 等。
以下是一些如何使用 value 属性的示例：
空值属性，由用户的输入决定属性值：
o 代码为：<input type="text" name="first-name" id="first-name" value="" />
o 用户输入：Jenifer
o 当表单提交时，first-name 的值以“Jenifer”发送。
预定值：
o 代码为：<input type="checkbox" name="mailing-list" id="mailing-list" value="yes" />
o 用户在方框里打勾，代表他们希望加入网站的邮件列表。
o 当表单被提交时，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="www.opera" />
    <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 地址：html单行文本框代码怎么写ample/page.php?data1=value1&，这就是在使用“GET”提交方式发送数据）。除非你有特别
的理由需要使用“GET”提交方式，最好不要使用这种方式发送安全信息，因为通过 URL 地址传输信息，任何人都可以看到信息。而“POST”提交方式，则是通过处理表单的脚本。无论是以方式发送给网站管理员，或者是存储到数据库中供以后访问，都比“GET”URL 要好。“POST”提交方式更为安全，通常也是更好的表单提交方式。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。