HTML 表单基础知识doc.docVIP

序言 每个人都曾看到过和用过表单，不过你曾写代码创建过一个表单吗？ 表单是网页上用于输入信息的区域，例如向文本框中输入文字或数字，在方框中打勾，使用单选按钮选中一个选项，或从一个列表中选择一个选项等。在你按下提交按钮后，表单就被提交到网站。 表单在网上随处可见，它们被用于在登录页面输入用户名和密码，对博客进行评论，在社交网络网站填写个人信息，或在购物网站指定记账信息等。 创建表单并不难，但要创建出符合 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。使用的命名词语越准确，不仅让你编写表单代码变得更容易，而且让你以后做维护网站的工作时也