HTML表单详解

Web页面是一种文档，HTML就是用来编写这些文档的一种标记语言，文档的结构和格式的定义是由HTML元素来完成的，HTML元素是由单一或一对标签定义的包含范围。

表单在HTML文档和用户之间，提供了一种交互的方式。利用表单，可以提交信息到Web服务器。

1.表单与服务器的交互过程

利用表单填写好信息以后，点击“提交”按钮，信息就会被浏览器发送到服务器端。当服务器端收到信息后，对这些信息进行一些处理，然后返回信息到浏览器，最终呈现在用户面前。

2.表单元素介绍

（1）<form>元素

用来创建表单的元素。基本语法如下：

<form method="get or post" action="URL">

...

</form>

属性method用于指定向服务器发送表单数据时所使用的HTTP方法，可以是get或者post这两种方法中的一种，get是默认方法。当采用get方法提交表单时，提交的数据被附加到URL（在属性action中指定）的末端，作为URL的一部分发送到服务器端。而post方法，是将表单中的信息作为一个数据块发送到服务器端。无论采用哪一种方法，数据的编码都是相同的。

在提交数据时，如果数据量小，又没有安全方面的考虑，可以采用get方法提交表单。如果数据量较大，或者有安全方面的考虑，往往采用post方法提交表单。

属性action指定对表单进行处理的脚本的地址。也就是说，表单提交到服务器后，交由谁来处理，在action属性中指定处理者的URL。

（2）<input>元素

如果要接收用户的信息，我们可以在<form>元素的开始标签和结束标签之间，添加<input>元素。<input>元素是一个带有属性的空元素，用来创建表单中的控件，其语法是：

<input type="type" name="name" size="size" value="value">

属性type用于指定要创建的控件的类型。属性name用于指定控件的名称，处理表单的服务器端脚本可以获得以名称-值对所表示的表单数据，利用名称可以取出对应的值。属性size用于指定控件的初始宽度。属性value指定控件的初始值。

（3）单行文本输入控件

是一个类型为text的<input>元素，这将在浏览器中显示一个单行的文本输入控件，语法如下：

<input type="text" size="30" name="user" value="default name">

（4）“提交”按钮

将<input>属性type设置为“submit”来创建“提交”按钮。如果表单中只有一个“提交”按钮，就不需要为它指定名字。

<input type="submit">

（5）“重置”按钮

有时候，用户填写完信息后，发现有错误，想重新填写，为此可以创建一个“重置”按钮，当用户点击表单中的“重置”按钮时，表单中的所有控件都将重新设置为它们的初始值。

<input type="reset">

（6）口令输入控件

用户输入密码时可采用。

<input type="password" name="pwd">

（7）单选按钮

例如，用户在输入注册信息时，在选择性别时可采用单选按钮。将<input>的属性type设置为“radio”来创建单选按钮。单选按钮的数量根据你的需要来确定，通过对多个单选按钮使用一个name值，可以指明一组单选按钮。

<input type="radio" name="sex" value=1 checked>男
<input type="radio" name="sex" value=0 checked>女

（8）复选框

复选框让用户在一个列表中选择多个选项。通过将<input>的属性type设置为“checkbox”来创建复选框。

<input type="checkbox" name="intrest" value="footbool">足球
<input type="checkbox" name="intrest" value="volleyball">排球
<input type="checkbox" name="intrest" value="basketball">篮球
<input type="checkbox" name="intrest" value="swim">游泳

在这里，我们可以给四个复选框取相同的名字，也可以取不同的名字。如果取相同的名字，当提交表单后，在服务器端的脚本将会接收到多个具有同样名字的名称-值对（被选中的复选框的值都会被提交到服务器端）。

（9）列表框

列表框允许用户从一个下拉列表框（下拉菜单）中选择一项。列表框由<select>元素创建，列表框中的各个选项用<option>元素提供。

<select size=1 name="education">
<option value="" selected>...</option>
<option value="高中">高中</option>
<option value="大学">大学</option>
<option value="硕士">硕士</option>
<option value="博士">博士</option>
</select>

<option>元素的selected属性指定初始选择的列表项。

（10）多行文本输入控件

使用多行文本输入控件，可以容纳较多的信息。

<textarea name="name" rows="number of rows" cols="number of columns">...</textarea>

（11）隐藏控件

将属性指定为hidden来创建隐藏控件。