3.1 认识和创建HTML表单
表单是网页中最常见的控件（元素）之一，小到网站注册登录，大到一个企业的数据管理系统，都基本上有表单的身影。表单之所以如此重要，主要是因为它担负大量的用户和网页后台数据更新交互的任务。表单通常都是与input元素的输入类型一块使用的，完成后将表单的内容进行提交，本章将回顾一下表单的基础知识。
3.1.1 认识HTML表单
HTML中使用form元素表示表单，它可以看作是一个容器，用于包含其他的元素，可以设置表单的起始位置，并且指定处理表单的服务器端程序地址。表单拥有非常强大的功能，使用表单可以指定以下内容。
（1）表单的布局。
（2）指定处理表单的服务器端程序地址，该服务器端程序应该可以处理“名称/值”对。
（3）数据传送到服务器的方式。
（4）表单数据的字符编码。
（5）除了包含表单有关的元素外，form元素还可以包含其他的文本元素，如段落、列表和层等。
如下代码演示了表单的基本语法形式。
<form action="URL" dir="" enctype="" id="" lang="" method="" name="" onclick="" ondbclick=""
onreset="" onsubmit="" target="" …>
…
</form>
form元素拥有多个属性，如表3-1所示列举了上面语法中比较重要的几个属性。
表3-1 form元素的常用属性
通常情况下，提交表单之前需要对表单中所输入的内容进行验证，验证用户输入的内容是否合法。对表单验证常常借助于JavaScript或JQuery等工具，在操作之前，必须先获取对form元素的引用。例如，在JavaScript脚本函数中，有以下三种方式完成这一操作。
（1）使用DOM树中的定位元素进行获取。代码如下：
var oForm=document.getElementById("form1");
（2）用document的form集合中的位置获取。代码如下：
var oForm=document.forms[0];
（3）用表单中的name属性来获取。代码如下：
var oForm=document.forms["form1"];
3.1.2 input元素的基本类型
表单是一个强大的控件集，用户与它的交互都是通过控件来进行的，HTML静态网页中常说的控件就是指元素。form表单中最常使用的就是input元素，设计人员向页面中添加该元素，并且为该元素指定不同的类型，然后在显示页面中向用户提供输入内容。
input元素最重要的一个属性是type，该属性决定了input元素的类型是什么，如输入框、重置按钮、单选按钮以及图片等。type的属性值有多个，如表3-2所示。
表3-2 type属性的常用值
【练习1】
本次练习演示表单的基本使用，如通过将input元素的type属性的值设置为password表示密码框，type属性的值指定为checkbox表示是否自动登录，type属性的值设置为button表示登录按钮等。
（1）添加新的页面并且设计页面，在页面的合适位置添加form元素，并且指定该元素的id属性、name属性和method属性。代码如下。
<form id="Formlogin" name="Formlogin" method="post">
<div class="tit">会员登录</div>
…
</form>
（2）向form表单中添加第一个table表格，该表格的内容包含用户名、用户密码以及记录是否自动登录等。其中，用户名输入框指定type属性的值为text，密码框指定type属性的值为password，是否记录自动登录的复选框中设置type属性的值为checkbox。相关代码如下。
<table width="100%" border="0" align="center" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td width="55" align="right" id="account">账号：</td>
<td><input name="username" type="text" class="login_input" id="username" maxlength="30" value="用户名/邮箱/手机号" style="color:#999999"></td>
</tr>
<tr>
<td align="right">密码：</td><td><input name="password" type="password" class="login_input" id="password" maxlength="20"></td>
</tr>
<tr>
<td align="right"> </td>
<td><input type="checkbox" checked="" name="expire" id="expire" value="7">一周内自动登录</label></td>
</tr>
</tbody>
</table>
（3）向form表单中添加第二个table表格，该表格记录了【登录】按钮以及其他信息。其他信息有注册或其他账号登录等，其中，将【登录】按钮的input元素的type属性的值设置为submit。代码如下。
<table width="100%" border="0" align="center" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td align="right" width="50"> </td>
<td height="40" valign="top">
<input type="submit" name="submitlogin" id="login" class="but80" value="登录">
<a href="#">忘记密码？</a>
</td>
</tr>
<!--其他信息-->
</tbody>
</table>
（4）为表单中的相关元素添加CSS样式，具体样式代码不再列出。
（5）运行页面查看效果，分别向【账号】输入框和【密码】框中输入内容，如图3-1所示。
图3-1 form表单的使用
在用户输入内容完成后，并且提交数据之前，还需要判断输入内容的合法性。这些输入内容都包含在表单中，可以使用它们的name特性或它们在集合中的位置来访问这些内容，几种常用的方式如下所示，其中，oForm表示获取的表单的name属性的值。
（1）根据在form集合中的位置进行获取。代码如下。
var oFirstField=oForm.elements[0];
（2）根据在form集合中的name属性进行获取。代码如下。
var oTextBox1=oForm.elements["textbox1"];
（3）直接通过元素的名称进行访问。代码如下。
var oTextBox2=oForm.textbox2;
除了与form集合绑定外，还有一种方式是根据元素的id属性的值进行获取（即使用DOM树中的定位元素进行获取）。代码如下。
var val = document.getElementById("textbox1");
3.1.3 其他输入元素
表单除了常用的input元素外，还可能会使用到其他的元素，如段落、层和表格等，除了这些元素外，常用的输入元素还有下拉菜单和列表框等。
1．select元素
select元素可以用于创建下拉菜单和列表框，它至少包含一个option元素。一般它将包含两个或者两个以上的option元素，因为下拉菜单和列表框的每个选项都需要一个option元素来呈现。
默认情况下，select元素显示为下拉列表框，用户可以通过下拉框选择出生地、居住地和当前分类等。该元素有一个multiple属性，如果将该属性的值设置为true或直接指定为multiple，那么则会以列表框的形式显示。
2．textarea元素
通过指定input元素的type属性的值为text时表示单行输入，那只能够在同一行中输入内容。有时候，单行输入并不能满足用户的需要，例如用户在对商品描述时输入的内容比较多，这时可以使用多行文本框，HTML中使用textarea元素，它也叫文本区域。
textarea元素接收访问者输入多于一行的文本，可以同时呈现多行数据。格式如下：
<textarea rows="宽度" cols="长度"></textarea>