表单的基础知识

20.HTML表单基础知识Posted12/15/2008-16:53byLewis网络标准教程作者：JeniferHanen·2008年7月8日上一篇：HTML表格下一篇：罕为人知的语义元素目录序言每个人都曾看到过和用过表单，不过你曾写代码创建过一个表单吗？表单是网页上用于输入信息的区域，例如向文本框中输入文字或数字，在方框中打勾，使用单选按钮选中一个选项，或从一个列表中选择一个选项等。在你按下提交按钮后，表单就被提交到网站。表单在网上随处可见，它们被用于在登录页面输入用户名和密码，对博客进行评论，在社交网络网站填写个人信息，或在购物网站指定记账信息等。创建表单并不难，但要创建出符合Web标准的表单又是怎么样的呢？如果你已经通读了本课程前面的所有文章，也许已认识到Web标准是规范网页编写工作的好方式。因此，创建一个符合Web标准的、可访问性好的表单，并不比以不符合规范的代码编写一个不符合Web标准的表单更费力。在本篇文章中，我将一步一步讲述如何创建HTML表单，从最基本和最简单的表单到更复杂的表单。在学习完本篇文章后，你们应该就能掌握使用HTML创建有效的、可访问性好的表单的基础知识。本篇文章的内容目录如下：第一步：基本代码第二步：添加结构和行为第三步：添加语义、样式和更多的结构元素总结延伸阅读练习题第一步：基本代码我们从创建一个简单的评论表单开始，评论表单可用于让访问者对网站上的内容如文章等发表评论，还可用于让不知道你邮箱地址的访问者在表单中输入信息，与你联系。这种评论表单的代码如下：formName:inputtype=textname=nameid=namevalue=/Email:inputtype=textname=emailid=emailvalue=/Comments:textareaname=commentsid=commentscols=25rows=3/textareainputtype=submitvalue=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=firstname等。如果input标签是用于输入电子邮件地址，则name属性可以为name=email。为让你更容易地创建表单，并让使用表单的人更容易使用，建议你以语义化的方式为input元素命名。所谓语义化的方式，我指的是像上面那样，根据其功能为其命名。如果要输入的数据是电子邮件地址，则把其命名为name=email。如果要输入的数据是网站访问者的街道地址，则把其命名为name=street-address。使用的命名词语越准确，不仅让你编写表单代码变得更容易，而且让你以后做维护网站的工作时也更为轻松，同时还让接收表单的人或数据库更容易解释数据。我们需要多思考一会儿，选择精确的名称。每个input标签还必须有一个value属性。value属性值可以为空，即value=，这将告诉处理脚本插入网站访问者在表单框里输入的任何数据。对于复选框、单选按钮、隐藏字段、提交按钮，或其它类型的属性，你可以为其设置你希望的默认值。在其它一些情况下，如对“提交按钮”或“隐藏字段”类型，你将其值设为等于最终的输入。例如，value=yes代表“是”，提交按钮设为value=submit，重置按钮设为value=reset，隐藏的重定向字段设为value=等。以下是一些如何使用value属性的示例：空值属性，由用户的输入决定属性值：o代码为：inputtype=textname=first-nameid=first-namevalue=/o用户输入：Jenifero当表单提交时，first-name的值以“Jenifer”发送。预定值：o代码为：inputtype=checkboxname=mailing-listid=mailing-listvalue=yes/o用户在方框里打勾，代表他们希望加入网站的邮件列表。o当表单被提交时，mailing-list的值以“yes”被发送。在input元素之后，你们可以看到另一个有点不同的textarea元素。textarea元素提供了一个可输入文本的更适宜的空间。与input元素提供的那种一行的普通文本框不同，textarea元素提供多行的可输入文本的区域，其行数可以由你定义。注意cols和rows属性，它们是textarea元素必须拥有的属性，它们定义文本区域的行数和列数为多大，属性值的单位是字符。最后，在上面的示例中，还有一个特别的属性为value=submit的input元素，这个元素将在浏览器中渲染为一个提交按钮，而不是一个单行文本框。点击提交按钮，表单就会被提交到已预订指定的接收数据的地方（在以上的示例中，功能尚不完全，因此进行表单提交时将不起作用）。第二步：添加结构和行为为什么当你在上面的示例表单中填写入文本，并点击提交，还不起作用呢，而且表单的外观也不好看，只有一行呢？答案在于尚未为表单添加结构，并定义表单提交到那个地方。现在看一下加入新代码后的表单：formid=contact-formaction=script.phpmethod=postinputtype=hiddenname=redirectvalue==nameName:/labelinputtype=textname=nameid=namevalue=//lililabelfor=emailEmail:/labelinputtype=textname=emailid=emailvalue=//lililabelfor=commentsComments:/labeltextareaname=commentsid=commentscols=25rows=3/textarea/liliinputtype=submitvalue=submit/inputtype=resetvalue=reset//li/ul/form当以上这段代码在浏览器中渲染时，样子如图2所示：图2：新表单示例，看起来更好一些了，但尚不完善你们可以点击这里在独立的网页中观看这个新表单。在以上这段代码中，我为第一步那个基本的表单添加了一些代码。以下是这些新添加代码的逐项分析：在form标签中加入了一些新属性。我加入了id属性，这不仅为表单赋予了语义化的名称，而且为表单提供了独一无二的ID，这样便于使用CSS为表单添加样式，或使用JavaScript为表单添加行为。在每个网页中每个id必须是唯一的，在这个示例中，我将其命名为contact-form。灯光、摄像、开始！当你在第一个表单中点击提交按钮时，什么也没有发生，这是由于尚未添加行为或提交方式。method属性指定了数据如何发送给处理该等数据的脚本。两种最常见的提交方式是“GET”和“POST”。“GET”提交方式将把数据发送到网页的URL地址中（你们有时候会看到这样的URL地址：=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等语言来编写处理表单的脚本。例如，使用这类脚本，你可以发出包含表单信息的电子邮件，或是将表单信息输入数据库，供日后使用。为你们编写一个服务器端脚本，或是教你们如何编写服务器端脚本的代码，这已超出了本课程的范围。请询问你的虚拟主机提供商，他们可为你提供哪些服务器端脚本，或请教专业编程员。如果你想深入了解服务器端脚本，可以访问以下列出的一些网络资源：oPerl：：技术文档：：：：：在上面的表单代码中，新加入的第二段代码是“隐藏的”输入字段，即一个网页重定向。为实现