3.1 表单页面的基本结构

本节单词记忆：标签 1.form 2.input 属性 1.action 2.method 3.size 4.maxlength 5.checked

网页学习网提示：html语言非常简单，不需要逻辑理解，而绝大部分朋友觉得它难以掌握，90%的原因在于英语单词不过关，所以每节记忆几个单词是非常有必要的。

热衷于上网的用户经常会在网上看到一些会员注册页面、购买某个商品收集信息页面、网上调查问卷页面、搜索工具页面等，这些页面是什么做的呢？我不敢说完全是用表单做的，但我敢肯定至少包含有表单，所以表单主要用来收集客户端相关信息，使网页具有交互功能。本节主要讨论如何使用HTML来创建表单，然后向表单中添加表单元素。

网页中的表单用途很广，而且还在不断发展。下面我们就列举一些典型的表单应用：

● 在用户注册某种服务或事件时收集姓名、地址、电话号码、电子邮件和其他信息。

● 为收集购买某个商品的订单信息。例如，如果想通过Intemet购买一本书，则必须填写姓名、联系电话、邮寄地址、付款方式和其他相关信息。

● 收集关于调查问卷信息。大部分提供服务性的网站都鼓励用户参与调查问卷，提供反馈信息。这些反馈信息除了维系良好的客户关系外，它还有助于改进和提高网站的服务质量，从而使网站的服务更具人性化，吸引更多的浏览者。

● 为网站提供搜索工具。提供各种信息的站点通常会为用户提供一个搜索框，使用户能够更快地找到想要的信息，如比较著名的搜索网站：谷歌(http：//www.google.cn)、百度(http：//www.baidu.com)等。

如图1所示是网页上的一个典型表单。

图1 典型的表单

一、表单包含的控件

创建表单后，就可以在表单中放置控件以接受用户的输入。这些控件通常放在<FORM></FORM>标签对之间一起使用，也可以在表单之外用来创建用户界面。在网上冲浪时，我们经常会见到一些常用的控件，例如：让用户输入姓名的单行文本框，让用户输入密码的密码框，让用户选择性别的单选按钮以及让用户提交信息的提交按钮等。

不同的表单控件有不同的用途。如果要求用户输入的仅仅是一些文字信息，如“姓名”、“备注”、“留言”等，一般使用单行文本框或多行文本框；如果要求用户在指定的范围内做出选择，一般使用单选按钮、复选框和下拉列表框，如图1中“性别”、“爱好”、“出生日期”中的月份选择等常采用这些控件。如果要把填写好的表单信息提交给服务器，一般使用“提交”按钮，如图3.1中的“同意以下服务条款，提交注册信息”按钮。除此之外，还有一些不太常用的表单控件，在这里就不一一列举了。

二、表单页面的基本结构

<FORM>标签用于在网页中创建表单区域，属于一个容器标签，表示其他表单标签需要在它的包围中才有效，<INPUT>便是其中的一个。用以设定各种输入资料的方法，其属性见下表。

使用post方法将表单提交给"processform"程序处理，代码如示例1所示。

示例1:

<FORM name="form1" method="post" action="http://www.lodidance.com/processform">
<P>名字：
  <INPUT name="name" type="text" class="input" id="fname">
</P>
<P>密码：
  <INPUT name="pass" type="password" class="input" id="pass">
</P>
<P>
  <INPUT type="submit" name="Button" value="提交">
  <INPUT type="reset" name="Reset" value="重填">
</P>
</FORM>

在示例1中，若把method=”post”改为method=”get‘’就变成了使用get方法将表单提交给"processform"程序处理。这两种方法都是将表单数据提交给服务器上指定的程序进行处理，那有什么区别呢？

先让大家看看采用post和get方法提交表单信息后浏览器地址栏的变化，如图2和图3所示。在“名字”和“密码”标签后，分别输入用户名和密码，然后单击“提交”按钮。采用post方法提交表单信息之后，浏览器地址栏前后没变化，如一图3.2所示；采用get方法提交表单信息之后，浏览器地址栏前后有变化，如图3.3所示，并且在浏览器地址栏中能看到信息"name=wzq&password=123”，这其实就是我刚才输入的用户名和密码信息，是不是很恐怖？密码都能看得见。由此可以看出，使用post方法提交表单信息更安全，相反，使用get方法提交表单信息极其不安全，建议大家在使用表单时尽可能地使用post方法来传送数据。

图3 get方法提交表单信息后

三、表单元素的统一格式

网页中的表单由许多不同的表单元素组成，这些表单元素各自都有很多属性，要一一节绍，篇幅不允许，下面就把这些表单元素中的一些常用的属性作一个统一的介绍。

下面给出了表单元素的统一格式：

<FORM name="form3" method= ”post“ action=“”>
<INPUT type="checkbox" name="gen" value="男" size=“21” maxlength=“4” checked=“checked”>
</FORM>

<INPUT>元素定义要在表单中显示的控件类型和外观。此元素包括的属性见下表。

本节作业：本节以概念理解为主，特别注意<FORM>的action和method属性，以及理解表单的提交过程，虽然现在用不到，但在动态网页的学习中是非常重要的。

点击下载第三章案例及作业资源 返回《HTML入门经典》教程列表