使用表单创建交互式网页

表单的用途很多，在制作网页时，特别是制作**页时常常会用到。表单的作用就是收集用户的信息，将其提交到服务器，从而实现与使用者交互。表单是HTML页面与服务器实现交互的重要手段。

１、使用表单标记form：表单是由<form>标记定义的。它类似于一个容器标记，其他表单对象标记需要在它的包围中才有效，如<input>。一般情况下，表单处理程序action和传送方法method是必不可少的参数。

１）处理动作action：用于指定表单数据提交到哪个地址进行处理。

语法：<form action=”表单的处理程序”>……</form>

说明：表单的处理程序是表单要提交的地址，也就是表单中收集到的资料将要传递到的程序地址。这一地址可以是绝对地址，也可以是相对地址，还可以是一些其他的形式。

例如：<form action=”mailto:[e-mail]”></form>

 

２）表单名称name：用来为当前表单定义一个独一无二的名称，该名称可以控制表单与后台程序之间的关系。

语法：<form name=”表单名称”>……</form>

说明：表单名称中不能包含特殊字符和空格。

 

３）传送方法method：用于指定将数据提交到服务器时，使用哪种HTTP提交方法。

语法：<form method=”传送方法”>……</form>

 

method标记的属性值

属性值

说明

get

将表单内容附加在URL地址后面，因此对提交信息的长度进行了限制，最多不可超过8192个字符。如果信息太长，将被截去，可能导致意想不到的处理结果。

post

将用户在表单中填写的数据包含在表单主体中，一起传送到服务器处理程序中，该方法没有字符的限制。

注：默认情况下，传送的方法为get，它不具有保密性，不适合处理如信用卡卡号等要求保密的内容，而且不能传送非ASCII码的字符。

 

４）编码方式enctype：用于设置表单信息提交的编码方式。

语法：<form enctype=”编码方式”>……</form>

 

enctype标记的属性值

属性值

说明

Text/plain

以纯文本的形式传送信息

application/x-www-form-urlencoded

默认的编码形式

multipart/form-data

mime编码，上传文件时必须选择该项

 

３）目标显示方式target：用于设置目标窗口的打开方式

 

traget标记的属性值

属性值

说明

_blank

将返回信息显示在新打开的浏览器窗口中

_parent

将返回信息显示在父级浏览器窗口中

_self

将返回信息显示在当前浏览器窗口中

_top

将返回信息显示在顶级浏览器窗口中

 

２、插入表单对象：在网页中可以插入的表单对象包括文本字段、复选框、单选按钮、提交按钮、重置按钮和图像域等。在HTML表单中，input标记是最常用的表单标记，常见的文本字段和按钮都采用这个标记。

语法：<form>

<input type=”表单对象” name=”表单对象的名称” />

  </form>

说明：name属性是为了便于程序对不同表单对象进行区分，type则是确定这一个表单对象的类型。

 

type所包含的属性值

属性值

说明

text

文本字段

password

密码域

radio

单选按钮

checkbox

复选框

button

普通按钮

submit

提交按钮

reset

重置按钮

image

图像域

hidden

隐藏域

filr

文件域

 

１）文字字段text：用来设置表单中的单行文本框，在其中可输入任何类型的文本、数字或字母，输入的内容以单行显示。

语法：<input name=”文本字段” type=”text” value=”文字字段的默认取值” size=”文本字段的长度” maxlength=”最多字符数” />

 

文本字段text的参数值

属性值

说明

name

文字字段的名称，用于和页面中其他控件加以区别。名称由英文、数字以及下划线组成，有大小写之分

type

指定插入哪种表单对象，如type=”text”，即插入文字字段

value

设置文本框的默认值

size

确定文本字段在页面中显示的长度，以字符为单位（1~未知）

maxlength

设置文本字段中最多可以输入的字符数

注：size默认20个字符，最小为1；maxlength默认好像无限大的样子，最小可为0。

 

２）密码域password：是一种文本字段的形式，输入到其中的文字均以星号“*”或圆点“●”显示。

语法：<input name=”密码域的名称” type=”password” value=”密码域的默认取值” size=”密码域的长度” maxlength=”最多字符数” />

 

密码域的参数值

属性值

说明

name

密码域的名称，用于和页面中其他控件加以区别。名称由英文、数字以及下划线组成，有大小写之分

type

指定插入哪种表单对象

value

用来定义密码域的默认值，以“*”或“●”显示

size

确定密码域在页面中显示的长度，以字符为单位

maxlength

设置密码域中最多可以输入的字符数

 

３）单选按钮radio：用来让浏览者进行单一选择，在页面中以圆框显示。

语法：<input name=”单选按钮的名称” type=”radio” value=”单选按钮的取值” checked />

说明：value用于设置用户选中单选按钮后，传送到处理程序中的值。checked表示这一单选按钮被选中，而在一个单选按钮组中只有一个单选按钮可以设置为checked。

注：要使多个单选按钮组成一组的话，其name需相同，另disabled使某单选按钮无效。

 

４）复选框checkbox：与单选按钮不同的是复选框能够实现项目的多项选择，以一个方框表示。

语法：<input name=”复选框的名称” type=”checkbox” value=”复选框的取值” checked />

说明：checked表示复选框在默认情况下已经被选中，一组选项中可以同时多个被选中。

注：disabled使某选框无效。

 

５）普通按钮button：表单中的按钮起着至关重要的作用，它可以激发提交表单的动作；也可以在用户需要修改表单的时候，将表单恢复到初始的状态；这可以依照程序的需要，发挥其他的作用。普通按钮主要是配合JavaScript脚本来进行表单处理的。

语法：<input name=”按钮的名称” type=”submit” value=”按钮的取值” onclick=”处理程序” />

说明：value的取值就是显示在按钮上的文字，在button中可以添加onclick等事件来实现一些特殊的功能。onclick事件是设置当鼠标按下按钮时所进行的处理。

例如：<input name=”button” type=”submit” value=”关闭窗口” onclick=”window.close()” />

 

６）提交按钮submit：是一种特殊的按钮，单击该类按钮可以实现表单内容的提交。

语法：<input name=”按钮的名称” type=”submit” value=”按钮的取值” />

说明：value同样用来设置显示在按钮上的文字。

 

７）重置按钮reset：可以清除用户在页面中输入的信息，将其恢复成默认的表单内容。

语法：<input name=”按钮的名称” type=”reset” value=”按钮的取值” />

说明：value用来设置显示在按钮上的文字。

 

８）图像域image：是指用在提交按钮位置的图像，使得图像具有按钮的功能。能达到美化页面等效果。

 

９）隐藏域hidden：在页面中对于用户来说是看不见的。在表单中插入隐藏域的目的在于收集和发送信息，而用户不需看到。发送表单时，隐藏域的信息也被一起发送到服务器。

语法：<input name=”隐藏域的名称” type=”hidden” value=”隐藏域的取值” />

 

１０）文件域file：是由一个文本框和一个“浏览”按钮组成的，用户可以直接将要上传给网站的文件的路径输入在文本框中，也可单击“浏览”按钮进行选择。

语法：<input name=”文件域的名称” type=”file” size=”文件域的长度” maxlength=”最多字符数” />

疑问：maxlength好像没什么用及作用……

 

３、列表/菜单：一个列表可以包括一个或多个项目。当需要显示许多项目时，菜单就非常有用。表单中有两种类型的菜单：一个菜单是单击时出现下拉的菜单，称为下拉菜单；另一种菜单则是显示为一个列有项目的可滚动列表，可从该列表中选择项目，称为滚动列表。菜单和列表主要是为了节省页面的空间。通过select和option标记来实现。

１）下拉菜单：是一种最节省页面空间的选择方式，因在正常状态下只显示一个选项，单击按钮打开菜单后才会看到全部选项。

语法：<select name=”下拉菜单的名称”>

<option value=”选项值” selected>选项显示内容</option>

……

  </select>

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

 

２）列表项：列表项在页面中可以显示出几条信息，一旦超出这个信息量，在列表右侧会出现滚动条，拖动滚动条可看到所有的项。

语法：<select name=”列表项的名称” size=”显示的列表项数” multiple>

<option value=”选项值” selected>选项显示内容</option>

　 ……

 </select>

说明：size用于设置在页面中的最多列表数，当超过这个值时会出现滚动条。multiple表示这一列表可以进行多项选择（按ctrl或shift来实现）。选项值是提交表单时的值，而选项显示内容才是真正在页面中要显示的。

 

４、文本域标记textarea：当需要让浏览者填入多行文本时，就应该使用文本区域而还是文本字段了。和其他大多数表单对象不一样，文本区域使用的是textarea而不是input标记。

语法：<textarea name=”文本区域的名称” cols=”长度” rows=”行数”></textarea>

说明：cols用于设置文本域的列数，也就是其宽度。rows用于设置文本域的行数，也就是高度。当文本内容超出这一范围时会出现滚动条，即大小可以很大，最小1*1。

 

５、id标记：id标记是一个较为特殊的标记，它主要用于表示一个惟一的元素，这个元素可以是文本字段，可以是密码域，也可以是其他的表单元素，甚至也可以　定义一幅图像、一个表格等。

语法：<id=”元素的标识名” >

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

例如：<input name=”Login” type=”password” size=”12”>