HTML：使用表单

第七章：使用表单

表单的用途很多，在制作网页，特别是制作动态网页时常常会用到。表单主要用来收集用户客户端提供的相关信息，使网页具有交互功能。在网页制作的过程中，常常需要使用表单，如会员的注册，网上调查和搜索等等。访问者可以使用如文本域、列表框、复选框以及单选按钮之类的对表单对象输入信息，然后单击某个按钮提交信息。

7.1 表单标记form

在网页中<form>``</form>标记对用来创建一个表单，即定义表单的开始和结束位置，在标记之间的一切都属于表单的内容。在表单的<form>标记中，可以设置表单的基本属性，包括表单的名称、处理程序和传递方法等。一般情况下，表单的处理程序action和传送方法method是必不可少的参数。

7.1.1 提交表单action

action用于指定表单数据提交到那个地址进行处理。
语法：

<form action="表单的处理程序">...........</form>

说明：表单的处理程序是表单要提交的地址，这一地址可以是绝对地址，也可以是相对地址，还可以是其他形式的地址。

7.1.2 表单名称name

语法：

<form name="表单名称">......</form>

说明：name用于给表单命名，这一属性不是表单的必要属性，但是为了防止表单提交到后台处理程序时出现混乱，一般要给表单命名。且表单名称不能包含特殊字符和空格。

7.1.3 传送方法method

语法：

<form method="传送方法">......</form>

表单的method属性是用来制定在数据提交到服务器的时候使用哪种HTTP提交方法，可取值为get或post。
get：表单数据被传送到action属性制定的URL，然后这个新URL被送到处理程序上。
post：表单数据被包含在表单主题中，然后被送到处理程序上。

7.1.4 编码方式enctype

语法：

<form enctype="编码方式">......</form>

说明：表单中的enctype属性用来设置表单信息提交的编码方式。为表单定义了MIME编码方式，编码方式的取值如下：

enctype的取值 取值的含义 application/x-www-form-urlencoded 默认的编码方式 multipart/form-data MIME编码，上传文件的表单必须选择该项

7.1.5 目标显示方式target

语法：

<form target="目标窗口的打开方式">......</form>

说明：target用来指定目标窗口的打开方式，表单的目标窗口往往用来显示表单的返回信息。目标窗口的打开方式有4个选项：_blank,_parent,_self和_top。如下表所示：

选项 含义 _blank 将链接的文件载入一个未命名的新浏览器窗口中 _parent 将链接的文件载入含有该链接框架的父框架集或父窗口中 _self 将链接的文件载入该连接所在的同一框架或窗口中 _top 在整个浏览器窗口中载入所链接的文件，因而会删除所有框架

7.2 插入表单对象

网页中的表单由许多不同的表单元素组成。这些表单元素包括文字字段、单选按钮、复选框、菜单和列表以及按钮。

7.2.1 文字字段text

语法：

<input name="控件名称" type="text" value="文字字段的默认取值" size="控件的长度" maxlength="最长字符数" />

说明：用户可以在文字字段内输入字符或者单行文本，该语法中的含义和取值如下：

参数类型 含义 type 用来指定插入那种表单元素，如type = “text”，即为文字字段 name 文字字段的名称，用于和页面中其他控件加以区别。名称由英文或数字以及下划线组成，但有大小写之分 value 用来定义文本框的默认值 size 确定文本框在页面中显示的长度，以字符为单位 maxlength 用来设置文本框中最多可以输入的字符数

7.2.2 密码域password

语法：

<input password="控件名称" type="password" value="文字字段的默认取值" size="控件的长度" maxlength="最长字符数" />

说明：密码域是一种特殊的文字字段，它的各个属性和文字字段是相同的。所不同的是，密码域输入字符以‘*’显示，该语法中的含义和取值如下：

参数类型 含义 type 用来指定插入那种表单元素 name 密码域的名称，用于和页面中其他控件加以区别。名称由英文或数字以及下划线组成，但有大小写之分 value 用来定义密码域的默认值，以星号‘*’显示 size 确定文本框在页面中显示的长度，以字符为单位 maxlength 用来设置文本框中最多可以输入的字符数

7.2.3 单选按钮radio

语法：

<input name="单选按钮名称" type="radio" value="单选按钮的取值" checked />

说明：在单选按钮中必须要设置value的值，对于一个选择列表中的所有单选按钮来说，往往要设置为相同的名称，这样在传递时才能更好的对某一个选择内容进行判断。在一个单选按钮组中只有一个单选按钮可以设置为checked。

7.2.4 复选框checkbox

语法：

<input name="复选框名称" type="checkbox" value="复选框的取值" checked />

说明：复选框可以让用户从一个选项列表中选择多个选项。checked参数表示该项在默认的情况下已经被选中。

7.2.5 普通按钮button

语法：

<input type="button" name="按钮名称" value="按钮的取值" onclick="处理程序" />

说明：<input type="button"/>用来定义可点击的按钮，value的取值就是显示在按钮上的文字，在button属性中可以添加onclick来实现一些特殊的功能。

7.2.6 提交按钮submit

语法：

<input type="submit" name="按钮名称" value="按钮的取值" />

说明：提交按钮是一种特殊的按钮，用来实现表单内容的提交。

7.2.7 重置按钮reset

语法：

<input type="reset" name="按钮名称" value="按钮的取值" />

说明：重置按钮用来清除用户在页面中输入的信息。

7.2.8 图像域image

语法：

<input name="图像域名称" type="image" src="图像路径" />

说明：可以使用一幅图像作为一个按钮，这样做可以创建能想象到的人和外观的按钮。图像的路径可以是绝对或相对路径。

7.2.9 隐藏域hidden

语法：

<input name="隐藏域名称" type="hidden" value="隐藏域的取值" />

说明：有时候可能想传送一些对于用户不可见的数据，可以通过一个隐藏域来传送这样的数据在表单中可以设置多个隐藏域。

7.2.10 文件域file

语法：

<input name="文件域名称" type="file" size="空间的长度" maxlength="最长字符数" />

说明：文件域在上传文件时常常被用到。

7.3 菜单和列表

菜单和列表主要是用来选择给定答案的一种，这类选项中往往答案比较多。菜单和列表主要是为了节省页面的空间，他们都通过<select>``<option>标记来实现。

7.3.1 下拉菜单

语法：

<select name="下拉菜单名称"><option value="选项值"selected>  选项显示内容.......</select>

说明：在语法中，选项值是提交表单时的值，而选项显示内容才是真正在页面中显示的选项内容。selected表示选项在默认情况下是选中的，一个下拉菜单中只能有一个默认选项被选中。

7.3.2 列表项

语法：

<select name="列表项名称" size="现实的列表项数" multiple><option value="选项值"selected> 选项显示内容.......</select>

说明：在页面中列表项可以显示出几条信息，一旦超出这个信息量，在列表项右侧会出现滚动条，拖动滚动条便可以看出所有的选项。在语法中，size用于设置在页面中显示的最多列表项数，当超过这个值时就会出现滚动条。

7.4文本域标记textarea

语法：

<textarea name="文本域名称"cols=“列数” rows="行数"></textarea>

说明：当需要让浏览者填入多行文本时，就应该使用文本域而不是文字字段。在语法中，不能使用value属性来建立一个文本域中显示的初始值。相反，应在textarea标记的开头和结尾之间包含想要在文本域内显示的任何文本。

7.5 id标记

语法：

<id=元素的标识名>

说明：在HTML中，id用来表示页面的唯一元素，因此在定义标签时最好根据其含义进行命名。