HTML 基础教程（八）

 

网页表单标记

 

表单的概念

表单是实现动态网页的一种主要的外在形式。表单和表单域并不具有排版的能力，表单网页的制作最终还是要由表格组织起来。html表单是html页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。 

在浏览网站时经常会遇到表单，它是网站实现互动功能的重要组成部分。无论网站使用的是那种形式的语言来实现网站的互动功能，例如ASP、PHP、JSP，表单已经成为它们统一的外在形式。 

表单的主要功能是收集信息，具体说是收集浏览者的信息。例如在网上要申请一个电子信箱，就必须按要求填写完成网站提供的表单页面，其主要内容是姓名、年龄、联系方式等个人信息。又例如要在某****上发言，发言之前要申请资格，也是要填写完成一个表单网页。 

表单可以用于调查、订购、搜索等功能。一般的表单由两部分组成，一是描述表单元素的html源代码，二是客户端的脚本，或者服务器端用来处理用户所填信息的程序。在html里，我们可以定义表单，并且使表单与CGI或ASP等服务器端的表单处理程序配合。 

表单信息处理的过程为：当单击表单中的提交按纽时，输入在表单中的信息就会上传到服务器中，然后由服务器中的有关应用程序进行处理，处理后或者将用户提交的信息储存在服务器端的数据库中，或者将有关的信息返回到客户端浏览器中。

表单标记<form>

表单是网页上的一个特定区域。这个区域是由一对<form>标记定义的。这一步有几方面的作用。第一方面，限定表单的范围。其它的表单对象，都要插入到表单之中。单击提交按纽时，提交的也是表单范围之内的内容。第二方面，携带表单的相关信息，例如处理表单的脚本程序的位置、提交表单的方法等。这些信息对于浏览者是不可见的，但对于处理表单确有着决定性的作用。 

基本语法

<form name="form_name" method="method" action="url" enctype="value" target="target_win"> 

…… 

</form> 

语法解释

<form>标记的属性如下表所示 

<form>标记属性  

属性  描述 

name  表单的名称 

method  定义表单结果从浏览器传送到服务器的方法，一般有两种方法：get和post 

action  用来定义表单处理程序(ASP，CGI等程序)的位置(相对地址或绝对地址) 

enctype  设置表单资料的编码方式 

target  设置返回信息的显示方式

<form>标记的name属性

基本语法

<form name="form_name"> 

…… 

</form> 

语法解释

通过为表单命名可以控制表单与后台程序之间的关系

<form>标记的action属性

基本语法

<form action="url"> 

…… 

</form> 

语法解释

在action属性中定义表单提交的地址

<form>标记的method属性

基本语法

<from method="method"> 

…… 

</from> 

语法解释

mothod属性中，get方法是将表单内容附加在url地址后面，所以对提交信息的长度进行了限制，不可以超过8192个字符。如果信息太长将被剪去，从而导致意想不到的处理结果。同时get方法不具有保密性，不适合处理如信用卡卡号等要求保密的内容，而且不能传送非ASCII码的字符。post方法是将用户在表单中填写的数据包含在表单的主体中，一起传送到服务器上的处理程序中，该方法没有字符的限制，它包含了ISO10646的字符集，是一种邮寄的方式，在浏览器的地址栏不显示提交的信息，这种方法传送的数据是没有限制的。当不指明是那种方式时，默认为get方式。 

如下代码，就是以get方式提交到fwx04134@163.com邮件地址的表单写法： 

<form name="guestbook" method="get" action="mailto: fwx04134@163.com"> 

…… 

</form>

<form>标记的enctype属性

基本语法

<form enctype="value"> 

…… 

</form> 

enctype 属性值  

属性值  描述 

Text/plain   以纯文本形式传送信息 

Application/x-www-Form-urlencoded   默认的编码形式 

Multipart/Form-data   使用mine编码

<form>标记的target属性

基本语法

<form target="target＿win"> 

…… 

</form> 

target属性值  

属性值  描述 

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

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

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

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

在<form>标记中，可以包含4个标记，如下所示 

form标记内的标记  

标记  描述 

<input>  表单输入标记 

<select>  菜单和列表标记 

<option>  菜单和列表项目标记 

<textarea>  文字域标记 

如下代码 

<form>

<input>……</input>

<textaarea>……</textarea>

<select>

<option>……</option>

</select>

</form>

各种表单域基本可以满足网站收集信息的要求。如果要求浏览者输入文字信息，如姓名、留言等，可以使用文本字段。如果要求浏览者在固定的范围内进行选择，可以选择单选按纽或者多选按纽，在实际应用中性别、籍贯、爱好常常采用这种方法。有时还会让浏览者提交文件的要求，可以使用文件域，例如某游戏选拔女主人公原型，要求申请者提交照片等。

输入标记<input>

输入标记<input>是表单中最常用的标记之一。常用的文本域、按钮等都使用这个标记。 

基本语法

<form> 

<input name="field_name" type="type_name"> 

</form> 

<input>标记属性  

属性  描述 

name   域的名称 

type   域的类型 

在type属性中，包含以下属性值 

type属性值  描述 

text  文字域 

password   密码域 

file   文件域 

checkbox   复选框 

radio   单选框 

button   普通按钮 

submit   提交按钮 

reset   重置按钮 

hidden   隐藏域 

image   图像域(图像按钮)

文字域text

text属性值用来设定在表单的文本域中，输入任何类型的文本、数字或字母。输入的内容以单行显示。 

基本语法

<input type="text" name="field_name" maxlength=value size=value value="field_value"> 

文字域属性  

文字域属值  描述 

name   文字域的名称 

maxlength   文字域的最大输入字符数 

size   文字域的宽度 

value  文字域的默认值

<h1>用户调查</h1>

<form action=mailto:songsong@51vc.com method=get name=invest>

姓名：<input type="text" name="username" size=20>

<br>

网址：<input type="text" name="URL" size=20 maxlength=50 value="http://">

<br>

</form>

密码域password

在表单中还有一种文本域的形式为密码域，输入到文本域中的文字均以星号"∗"或圆点显示。

基本语法

<input type="password" name="field＿name" maxlength=value size=value>

密码域属性  

文字域属性  描述 

name   密码域的名称 

maxlength   密码域的最大输入字符数 

size   密码域的宽度（以字符为单位） 

value   密码域的默认值

文件域file

文件域可以让用户在域的内部填写自己硬盘中的文件路径，然后通过表单上传，这是文件域的基本功能。如在线发送E-mail时常见的附件功能。有的时候要求用户将文件提交给网站，例如Office文档、浏览者的个人照片或者其它类型的文件，这时就要用到文件域。 

文件域的外观是一个文本框加一个浏览按钮，用户既可以直接将要上传给网站的文件的路径写在文本框内，也可以单击浏览按钮，在自己的电脑中找到要上传的文件。 

基本语法

<input type="File" name="field_name">

<h1>用户调查</h1>

<form action=mailto:fwx04134@163.com method=get name=invest>

姓名：<input type="text" name="username" size=20><br>

网址：<input type="text" name="url" size=20 maxlength=50 value="http://"><br>

密码：<input type="password" name="password" size=20 maxlength=8><br>

确认密码：<input type="password" name="password_confirm" size=20 maxlength=8><br>

请上传你的照片：<input type="file" name="File">

</form>

复选框checkbox

浏览者填写表单时，有一些内容可以通过让浏览者进行选择的形式来实现。例如常见的网上调查，首先提出调查的问题，然后让浏览者在若干个选项中进行选择。又例如收集个人信息时，要求在个人爱好的选项中进行选择等。适应以上各种不同类型调查的需要，选择域分为两种： 

•多选框：可以在若干选项中选择多个项目

•单选框：在若干选项只允许选择一项

复选框能够进行项目的多项选择，以一个方框表示。 

基本语法

<input type="checkbox" name="field_name" checked value="value"> 

语法解释

checked表示此项被默认选中，value表示选中项目后传送到服务器端的值。

<form action=mailto:fwx04134@163.com method=get name=invest>

<input type="checkbox" name="m1" value="rock" checked>摇滚乐

<input type="checkbox" name="m2" value="jazz">爵士乐

<input type="checkbox" name="m3" value="pop">流行乐

</form>

单选框radio

单选框能够进行项目的单项选择，以一个圆框选择。 

基本语法

<input type="radio" name="field_name" checked value="'value" > 

语法解释

checked表示此项被默认选中，value表示选中项目后传送到服务器端的值。

<form action=mailto:fwx04134@163.com method=get name=invest>

<input type="radio" name="city" value="beijing" checked>北京

<input type="radio" name="city" value="shanghai">上海

<input type="radio" name="city" value="nanjing">南京

</form>

普通按纽button

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

基本语法

<input type="button" name="field_name" value="button_text"> 

语法解释

value值代表显示在按钮上面的文字

提交按纽submit

单击提交按钮后，可以实现表单内容的提交。 

基本语法

<input type="submit" name="field_name" value="button_text">

重置按纽reset

单击重置按钮后，可以清除表单的内容，恢复默认的表单内容设定。 

基本语法

<input type="reset" name="field_name" value="button_text">

图像域image

图像域是指可以用在提交按钮上的图片，这幅图片具有按钮的功能。使用默认的按钮形式往往会让人觉得单调。如果网页使用了较为丰富的色彩或稍微复杂的设计，再使用表单默认的按钮形式甚至会破坏整体的美感。这时可以使用图像域，创建和网页整体效果相统一的图像提交按钮。 

基本语法

<input type="image" name="field_name" src="image_url">

隐藏域hidden

隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到浏览器。 

基本语法

<input type="hidden" name="field_name" value="value">

菜单和列表标记

假设现在要在表单中添加这样一项内容：浏览所在的城市。这里不说全国的城市，只说省会以上的城市就有几十个。如果以上面讲过的单选按钮的形式，将这些城市全部罗列在网页上，将是一件不堪设想的事情。于是在表单的对象中出现了菜单和列表。说到底，菜单和列表主要是为了节省网页的空间而产生的。 

菜单是一种最节省空间的方式，正常状态下只能看到一个选项，单击按钮打开菜单后才能看到全部的选项。列表可以显示一定数量的选项，如果超出了这个数量，会自动出现滚动条，浏览者可以通过拖动滚动条来观看各选项。通过<select>和<option>标记可以设计页面中的菜单和列表效果。 

基本语法

<select name="name" size=value multiple> 

<option value="value" selected>选项 

<option value="value">选项 

…… 

</select> 

菜单和列表标记属性  

菜单和列表标记  描述 

name  菜单和列表的名称 

size  显示的选项数目 

multiple  列表中的项目多选 

value  选项值 

selected  默认选项

<form action=mailto:fwx04134@163.com method=get name=invest>

请选择你喜欢的音乐：<br>

<select name="music" size=4 multiple>

<option value="rock" Selected>摇滚乐

<option value="pop">流行乐

<option value="jazz">爵士乐

<option value="nation">民族乐

</select><br>

请选择你居住的城市：<br>

<select name="city">

<option value="beijing" selected>北京

<option value="shanghai">上海

<option value="nanjing">南京

<option value="guangzhou">广州

</select>

<input type="submit" name="submit" value="提交表单">

</form>

文字域标记<textarea>

这个标记用来制作多行的文字域，可以在其中输入更多的文本。 

基本语法

<textarea name="name" rows=value cols=value value="value"> 

</textarea> 

文字域标记属性  描述 

name   文字域的名称 

rows  文字域的行数 

cols  文字域的列数 

value  文字域的默认值

<form action=mailto:fwx04134@163.com method=get name=invest>

请留言：<br>

<textarea name="comment" rows=5 cols=40>

</textarea><br>

<input type="submit" name="submit" value="提交表单">

</form>