HTML教程 10第十章
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第十章 表单
本章既是HTML 的最后一章，又是学习JavaScript 、继而全面学习动态网页编程的基础，具有承前启后、继往开来的重要作用。
这是因为：前面的HTML 语法都是用来编写纯静态网页的，即网页编写好之后，在浏览器中的内容不会发生变化。
而表单则是用来和用户交互的，用户可以改变表单中的内容，网页从而具备了和用户交互的功能。
这是表单的质的飞跃。
但要真正发挥动态网页的强大功能，则必学JavaScript 。
如果要在动态网页中增加数据库功能，则必须继而学习ASP .NET 、JSP 、PHP 之一。
本章局限在HTML 范围内，讲解表单的基本用法。
10.1 什么是表单
什么是表单（form ）？表单是浏览者与网站实现互动的重要手段，它的主要功能是收集网站所需的信息。
例如，当在网上申请电子邮件信箱时，就需要填写表单。
下图所示的是申请新浪邮箱时所要填写的表单。
要创建表单，需要使用<form>和</form>标记，在它们之间的一切都属于表单的内容。
其语法格式为： <form name = 表单名 action = 表单处理程序或网页 method = "get"或"post" target = 目标窗口的打开方式 enctype = MIME 类型
>
图 浏览结果
表单内容
</form>
再看具体的例子前，必须详细讲解<form>的各个属性。
（1）name属性用于定义表单名称。
表单可以看成一个对象，该对象有对象名后，就可方便地在程序（例如JavaScript）中引用表单了。
（2）action属性的值是处理程序的程序或网页名（包括网络路径），即设置将表但数据提交给谁处理。
例如：
<form action = "/test.aspx">
它说明：当用户提交表单时，服务器将执行网址/上的名为test.aspx的 程序。
（3）表单数据产生在客户端，把它们送到服务器端的过程叫做“提交（submet）”。
method属性是用来定义提交方法的，即处理程序从表单中获得信息的方式，可取值为get或post。
get方法是将表单数据附加在action属性指定的url地址之后，并在url地址与表单数据间加上一个“?”分隔符，表单的各数据项之间用“&”进行分隔，然后将所形成的url地址发送给服务器，格式如下所示：/test.aspx?txtID=11&txtUsername=zhangsan 请注意在这个串中有问号“?”问号后面的内容就是用get方法发给服务器的，并且有两个参数和值，它们分别是txtID = 11和txtUsername = zhangsan。
至于怎样形成这样的字符串，请看后面的例子。
get方法一次最多只能提交256个字符的数据，而post方法与get方法不同，它是当前的HTML文档把数据作为一个独立的数据块，与url分开，直接传送给服务器端的处理程序，不受长度限制。
因此，如果提交的数据比较多，则最好采用post方法；若较少，可以使用get方法。
一般使用post方法来提交表单数据。
（4）服务器处理表单数据之后，要返回给客户端一些信息，例如是否成功提交了表单内容、是否有错等等，这些信息需要浏览器开一个窗口来显示。
target属性就用来定义目标窗口的显示方式的，其值有四个：_blank、_parent、_self和_top。
其意义和在超链接中完全相同，不再多说。
（5）enctype属性用于指定表但提交数据时所采用的编码方式。
编码方式的取值如下表所示。
通常情况下，表单采用application/x-www-form-urlencoded编码方式，所以enctype属性通常可以不指定。
但也有例外。
例如，若要将当前表单数据提交到邮件地址为“hahaha@”的信箱中，此时的用法应为：
<form method = "post" action = "mailto:hahaha@" enctype = "text/plain"> 注意，此时必须指定表单的enctype属性值为“text/plain”。
那么什么是MIME类型呢？最早的HTTP协议中，所有传送的数据都被客户程序解释为超文本标记语言HTML文档。
而为了支持多媒体数据类型，HTTP协议中就使用了附加在文档之前的MIME数据类型信息来标识数据类型。
MIME（Multipurpose Internet Email Extension），意为多用途Internet邮件扩展，它是一种多用途网际邮件扩充协议，在1992年最早应用于电子邮件系统，但后来也应用到浏览器。
服务器会将它们发送的多媒体数据的类型告诉浏览器，而通知手段就是说明该多媒体数据的MIME类型，从而让浏览器知道接收到的信息哪些是MP3文件，哪些是JPEG文件等等。
当服务器把把输出结果传送到浏览器上的时候，浏览器必须启动适
当的应用程序来处理这个输出文档。
在HTTP中，MIME类型被定义在<head>、</head>部分的Content-Type 中。
例如，架设你要传送一个Microsoft Excel文件到客户端。
那么这时的MIME类型就是“application/vnd.ms-excel”。
在大多数实际情况中，这个文件然后将传送给Excel来处理（假设我们设定Excel 为处理特殊MIME类型的应用程序）。
每个MIME类型由两部分组成，前面是数据的大类别，例如声音（audio）、图像（image）等，后面定义具体的种类。
常见的MIME类型如下表所示。
Internet中有一个专门组织IANA来确认标准的MIME类型，但Internet发展的太快，很多应用程序等不及IANA确认他们使用的MIME类型为标准类型。
因此他们使用在类别中以x-开头的方法，标识这个类别还没有成为标准，例如：x-gzip、x-tar等。
事实上，这些类型运用得很广泛，已经成为事实标准。
只要客户机和服务器共同承认这个MIME类型，即使它是不标准的类型也没有关系。
10.2最简单的表单举例
说了这么多，我们还是看一个例子吧。
【例1】最简单的表单。
下面是最简单的表单的代码，不妨命名为chap10_1.html。
<html>
<head>
<title>itsway --表单</title>
</head>
<body>
<h1 align = "center">用户注册</h1>
<form name = "myform1" method = "get" action = "chap10_login.html"
target = "_blank"><!--表单开始-->
请输入用户名：<input type = "text" name = "username" size = "10"><br><br>
请输入电子邮箱：<input type = "text" name = "email" size = "20">
<br><br>
<center>
<input type = "submit" value = "确定">
<input type = "reset" value = "重写">
</center> </form><!--表单结束--> </body> </html>
在这里，<form>和</form>中有不少内容，所有未讲过的标记一律用红色书写。
在运行它之前，再编写一个简单的chap10_login.html 文件，内容如下。
<html> <head> <title>itsway -- 表单</title> </head> <body> 到此为止，说明表单成功执行了！ </body> </html>
然后运行chap10_1.html ，显示结果如下图所示。
其中，两个文本框中本来是没有内容的。
我们可以在其中填写一些内容，如上图所示。
此时如果单击“重写”按钮，将清空文本框，以便用户重写；如果单击“确定”，浏览器将打开一个新窗口显示chap10_login.html ，如下图所示。
图 浏览结果
请注意在地址栏中显示的内容：
file:///C:/html/chap10_login.html?username=aaa&email=df@ 这是因为：表单的提交方式method = get，所以chap10_1.html把用户填写的数据附加在url后面，传送给chap10_login.html。
把这个结果和前面讲的对照一下，是不是可以更好地理解前面的内容了？
读者可以把表单的提交方式method改成post，再看看执行结果。
这里在表单的action属性中定义的处理程序是chap10_login.html。
一般来说不会把表单数据再提交给一个简单的HTML网页文件，而是提交给扩展名为.asp（ASP编写）、.aspx（编写）、.jsp（Java编写）或.php（PHP编写）的程序，并由它们处理。
在例1的表单中，不仅有一些文字和过去学过的一些HTML标记，而且还有两个文本框和两个按钮对象。
这就是表单控件。
下面我们详细学习各种控件。
10.3文本框控件
文本框控件用于输入文本。
一、单行文本框
最简单的是单行文本框控件，语法为：
<input type = "text" name = 控件名称size = 控件长度
maxlength = 最长输入字符数value = 初始值>
在该语法中：
●input：说明该控件是输入类控件，必须写。
●name：控件本身的名称，一般来说需要定义。
●type = "text"：说明它是单行文本框，也就是只能在一行中输入数据。
必须写。
●size：定义文本框的显示长度，单位是字符。
●maxlength：定义在文本框中最多可以输入多少个字符。
●value：定义文本框中的初始文本。
【例2】单行文本框的使用。
<html>
<head>
<title>itsway --表单</title>
</head>
<body>
<form name = "example">
长度为15的文本框，但最多只能输5个字符：
<input type = "text" name = "t1" size = "15" maxlength = "5"><br>
姓名（最多20字符）：
<input type = "text" name = "t2" size = "10" maxlength = "20"><br>
性别（初值是男）：
<input type = "text" name = "t3" size = "2" value = "男"><br>
</form> </body> </html>
显示结果如下图所示。
其中，在文本框t1中只能最多输入5个字符。
二、密码文本框
有一种特殊的单行文本框，当用户输入文字时，这些文字只显示“*”或“●”，这种控件称为密码域或密码控件。
语法为：
<input type = "password" name = 控件名称 size = 控件长度 maxlength = 最长输入字符数 value = 初始值>
可以看出，它和单行文本框的区别就是type="password"，即类型是“密码”，其他属性的名称和意义都相同。
【例3】使用密码文本框。
<html> <head> <title>itsway --表单</title> </head> <body> <form name = "example"> 请输入密码，最多10个字符： <input type = "password" name = "p1" size = "10" maxlength = "10" value = ""><br> </form> </body> </html>
显示结果如下图所示，在密码域p1中只能最多输入10个字符，并且显示为“●”。
图 浏览结果
注意：密码域中的值还是用户输入的字符，只是显示给用户的是“●”而已。
因此，它很适合作为用户登录时输入密码或口令的文本框。
三、多行文本框
如果要输入大段文字，需要使用<textarea>标记，它是多行文本框，称为文字域（textarea）或文本域。
这类控件在一些留言板中最为常见，格式为：
<textarea name = 控件名称value = 初始值rows = 行数cols = 列数></textarea>
其中，rows和cols指文本域所占的行数和列数，单位是字符。
它和单行文本框最大的不同是：它不是用<input type = ……>定义的，并且是成对的标记。
【例4】使用多行文本域。
<html>
<head>
<title>itsway --表单</title>
</head>
<body>
<form name = "example">
<table border = "0" width = "500">
<tr>
<td width = "70" align = "right">用户名：</td>
<td align = "left">
<input type = "text" name = "t1" size = "10" maxlength = "20"></td> </tr>
<tr>
<td align = "right">密码：</td>
<td align = "left">
<input type = "password" name = "p1" size = "10" maxlength = "10"></td> </tr>
<tr><td align = "right" valign = "top">留言：</td>
<td>
<textarea name = "word" rows = "5" cols = "50"></textarea>
</td></tr>
</table>
</form>
</body>
</html>
显示结果如下图所示。
多行文本域在输入数据时，如果一行的内容过多，或者行数过多，则会自动加上水平和垂直滚动条。
在这里，用一个表格来控制文本和控件的布局，并且它也属于表单。
再次体现出表格是页面布局的有力工具。
实际上，在表单中的纯文字（静态文本，专门用于显示）也有专门的标记<label>来定义，语法为： <label>文本</label>
例如：
<form> <label>请输入密码，最多10个字符：</label> …… </form>
不过，一般来说不必对静态文本进行各种编程处理，所以<label>、</label>标记用的不多，可以直接在表单中书写静态文本。
10.4 单选按钮和复选框
单选按钮（radiobutton ）用来让浏览者在一群选项中进行惟一选择，复选框（checkbox ）则用于在一群选项中进行多项选择。
单选按钮的主要语法为：
<input type = "radio" name = 控件名称 value = 单选按钮的取值 checked>
在该语法中：
● type = "radio"：说明该控件是一个单选按钮。
● name ：定义单选按钮的名称。
多个单选按钮如果具有同样的名称，则说明它们属于一组，则只能在其中
选择一个选项。
●
value ：当用户选择该按钮后，传送到程序中的值。
● checked ：表示该按钮初始就处于被选中状态。
一组单选按钮中最多只能有一个设置为checked 。
图 浏览结果
【例5】使用单选按钮。
<html> <head> <title>itsway --表单</title> </head> <body> <form name = "example"> 你最喜欢吃什么？：<br><br> <input type = "radio" name = "bestlike" value = "A" checked>萝卜 <input type = "radio" name = "bestlike" value = "B">白菜 <input type = "radio" name = "bestlike" value = "C">青椒 <input type = "radio" name = "bestlike" value = "D">西红柿<br> <hr align = "left" width = "400"> 你最喜欢玩什么？：<br><br> <input type = "radio" name = "bestplay" value = "footbal" >足球 <input type = "radio" name = "bestplay" value = "basketball" checked>篮球 <input type = "radio" name = "bestplay" value = "computer">电脑游戏 </form> </body> </html>
显示结果如下图所示。
在网页中使用了两组单选按钮，第一组四个，名字都叫bestlike ；第一组三个，名字都叫bestplay 。
因此两组中各只能选一个，并且初始选项分别是“萝卜”和“篮球”。
图 浏览结果
注意：“萝卜”、“篮球”等文本是显示在单选按钮右边的文本，它们并不属于单选按钮控件，只用于帮助用户进行选择。
至于选择各单选按钮之后，单选按钮本身的值，则是A、B、C、D或football、basketball、computer。
每一组单选按钮的各个value值不能相同（但不同组的单选按钮的value值可以相同）。
今后在学习编程语言时（例如JavaScript），程序可以通过判断各按钮对象的value值，确定用户到底选了哪个按钮。
例如，如果程序判断bestlike单选按钮的值是C，就知道用户选了第三个按钮，即“青椒”对应的那个单选按钮。
复选框（checkbox）的主要语法为：
<input type = "checkbox" name = 控件名称value = 复选框的值checked>在该语法中：
●type = "checkbox"：说明该控件是一个复选框。
●name：定义复选框的名称。
在一个网页中，不同的复选框应该具有不同的名称。
●value：当用户选择该复选框后，传送到程序中的值。
●checked：表示该复选框初始就处于被选中状态。
【例6】使用复选框。
<html>
<head>
<title>itsway --表单</title>
</head>
<body>
<form name = "example">
你喜欢吃什么？：<br><br>
<input type = "checkbox" name = "radish" value = " radish">萝卜
<input type = "checkbox" name = "cabbage" value = "cabbage">白菜
<input type = "checkbox" name = "green pepper" value = "gp" checked>
青椒
<input type = "checkbox" name = "tomato" value = "tomato">西红柿
<input type = "checkbox" name = "pork" value = "pork">猪肉
<input type = "checkbox" name = "beef" value = "beef" checked>牛肉
<input type = "checkbox" name = "egg" value = "egg">鸡蛋
</form>
</body>
</html>
显示结果如下图所示。
可以看出，一组复选框中可以选择多个。
控件的name和value属性值可以相同，也可以不同。
在本例中，各复选框的name和value属性值几乎都相同，只有“青椒”对应的复选框除外。
10.5下拉菜单和列表
菜单列表类控件主要用来进行选择给定答案中的一种。
虽然也可以用单选按钮来做，但单选按钮比较浪费空间，菜单和列表则很节省空间。
下拉菜单是一种最节省页面空间的选择方式，语法为：
<select name = 控件名称>
<option value = 选项值1 selected>显示内容1</option>
<option value = 选项值2>显示内容2</option>
……
<option value = 选项值n>显示内容n</option>
</select>
在该语法中，“选项值”是提交表单时间的值，是供程序内部使用的。
程序通过检测该菜单的value值，可以知道用户选择了哪一项，而选项显示的内容才是真正显示给用户的。
selected表示某选项在初始情况下处于选中状态，一个下拉菜单中只能有一个项默认被选中。
【例7】使用下拉菜单。
<html>
<head>
<title>itsway --表单</title>
</head>
<body>
<form name = "example">
你最喜欢吃什么？：
<select name = "bestlike">
<option value = " radish">萝卜</option>
<option value = "cabbage">白菜</option>
<option value = "gp" selected>青椒</option>
<option value = "tomato">西红柿</option>
<option value = "pork">猪肉</option>
<option value = "beef">牛肉</option>
<option value = "egg">鸡蛋</option>
</select>
</form>
</body>
</html>
显示结果如下图所示。
可以看出，下拉菜单一共有七个选项，其中“青椒”处于默认的选中状态。
列表的设置方法与下拉菜单类似。
所不同的是，列表在页面中可以显示多个条目，语法为：
<select name = 控件名称 size = 显示的项数 multiple> <option value = 选项值1 selected>显示内容1</option> <option value = 选项值2>显示内容2</option> …… <option value = 选项值n>显示内容n</option> </select>
在该语法中，size 设置页面中显示的列表项数，当列表中的项数超过这个值时会出现滚动条。
multiple 表示这一列表可以进行多项选择。
【例8】使用列表。
<html> <head> <title>itsway --表单</title> </head> <body> <form name = "example"> 你最喜欢吃什么？： <select name = "bestlike" size = "4"> <option value = " radish">萝卜</option> <option value = "cabbage">白菜</option> <option value = "gp" selected>青椒</option> <option value = "tomato">西红柿</option> <option value = "pork">猪肉</option> <option value = "beef">牛肉</option> <option value = "egg">鸡蛋</option> </select> 你喜欢玩什么？：
图 浏览结果
<select name = "bestplay" size = "4" multiple> <option value = "footbal" selected>足球</option> <option value = "basketball">篮球</option> <option value = "computer" selected>电脑游戏</option> </select> </form> </body> </html>
显示结果如下图所示。
第一个列表bestlike 显示四项，有滚动条，但不能多选；第二个列表bestplay 虽然也有四项空间，但因列表中只有三项，所以没有滚动条，但可以多选（左手按住Ctrl 或Shift 键，右手点鼠标左键）。
可以使用表格，把列表和文字放在同一行的单元格中，利用<td>的valign 属性，让它们顶端对齐。
10.6 按钮
按钮（button ）在网页中非常常见，当需要执行某个操作时，一般需要单击按钮。
按钮有三类：普通按钮、提交（submit ）按钮和重置（reset ）按钮。
一、普通按钮
普通按钮的语法为：
<input type = "button" name = 控件名称 value = 按钮值 onclick = 处理程序>
其中，type = "button"说明它是按钮控件，name 值是按钮在程序内部的名称，value 值是按钮显示给用户的文字。
当用户单击按钮时，就会激发click 事件，onclick 用于设置此时所要进行的处理，一般是一段程序。
下面给出普通按钮的例子。
为说明onclick 的用法，我们不得不给出简单的JavaScript 程序。
【例9】使用普通按钮。
<html> <head> <title>itsway --表单</title> </head> <body>
图 浏览结果
<form name = "example"> 几个按钮：<br> <input type = "button" name = "button1" value = "普通按钮"> <input type = "button" name = "button2" value = "打开窗口" onclick = "window.open()"> <input type = "button" name = "button3" value = "关闭当前窗口" onclick = "window.close()"> </form> </body> </html>
显示结果如下图所示。
当单击“普通按钮”时，程序不会有任何动作，因为并没有给它定义onclick 程序；当单击“打开窗口”时，会执行按钮的onclick 对应的程序“window.open()”，打开一个新窗口；当单击“关闭当前窗口”时，会执行按钮的onclick 对应的程序“window.close()”，从而可以关闭当前窗口。
正如本章开头所说的那样：要真正发挥动态网页的强大功能，则必学JavaScript 。
要想深入学习，请看本站JavaScript 教程或其他网站、图书中的相关教程。
二、提交按钮和重置按钮
提交按钮是一种特殊的按钮，它不需要设置onclick 行为，在单击该类按钮时可以实现表单内容的提交，将表单提交给<form>标记的action 属性指向的程序或网页。
语法为：
<input type = "submit" name = 控件名称 value = 按钮值>
该语法和普通按钮的另一个最大不同是：它的type = submit 。
重置按钮可以用来清除用户在表单中输入的信息，格式为：
<input type = "reset" name = 控件名称 value = 按钮值>
请注意重置按钮的type = reset 。
这两个按钮的用法，我们在本章例1中已经见过了。
当时可能还不太理解，现在结合一般按钮，在了解了它们的语法之后，再看一遍例1，就好理解多了。
【例10】使用提交和重置按钮，向自己的电子邮箱发一些内容。
下面的网页向webmaster@ 发送一些信息，你可以修改这个邮箱地址，改成自己的邮箱，填写表单后单击“提交”按钮，看看会收到什么内容。
图 浏览结果
<html>
<head>
<title>itsway --表单</title>
</head>
<body>
<font size = "2">
<form name = "diaocha" action = "mailto:webmaster@"
method = "post">
<p>用户名：
<input type = "text" name = "username" size = "20"></p>
<p>密码：
<input type = "password" name = "p1" size = "10">
重复密码：
<input type = "password" name = "p2" size = "10"></p>
<p>证件类型：
<select name = "papertype">
<option value = "shenfen" selected>身份证</option>
<option value = "officer">军官证</option>
<option value = "soldier">士兵证</option>
<option value = "gongzuo">工作证</option>
<option value = "student">学生证</option>
</select>
证件号码：
<input type = "text" name = "papernum" size = "20" maxlength = "20"></p> <p>出生日期：
<input type = "text" name = "birthday" size = "20">
性别：
<input type = "radio" name = "sex" checked>男
<input type = "radio" name = "sex">女</p>
<p>你所喜欢的教程：
<input type = "checkbox" name = "like1" checked>HTML教程
<input type = "checkbox" name = "like2">CSS教程
<input type = "checkbox" name = "like3">JavaScript教程
<input type = "checkbox" name = "like4">Java教程
</p>
<p>
<input type = "submit" name = "submit" value = "发送给我">
<input type = "reset" name = "reset" value = "清除重写">
</p>
</form>
</font>
</body>
</html>
显示结果如下图所示。
10.7 图像域、隐藏域和文件域
图像域常用于创建特殊效果的按钮中，格式为：
<input type = "image" src = 图像文件地址 name = 控件名称>
在该语法中，图像地址既可以是绝对地址，也可以是相对地址。
注意它实现的是提交按钮的功能，但type = image ，并且有src 属性，因此也常常称为“图像提交按钮”。
在表单中还有一种隐藏域，它在表单中，但用户看不见。
隐藏域主要用于程序设计，程序员可用它来保存一些信息、传递一些参数等等。
当浏览者提交表单时，隐藏域的内容会一起提交给处理程序。
隐藏域的语法为：
<input type = "hidden" name = 控件名称 value = 提交的值>
【例11】图像提交按钮和隐藏域的使用。
<html> <head> <title>itsway --表单</title> </head> <body> <form name = "diaocha" action = "mailto:webmaster@" method = "post"> <p>用户名： <input type = "text" name = "username" size = "20"></p>
图 浏览结果
<p>密码： <input type = "password" name = "p1" size = "10"> 隐藏域： <input type = "hidden" name = "h1" value = "1234567"></p> <p> <input type = "image" src = "chap10_submit.jpg" name = "image"> </p> </form> </body> </html>
显示结果如下图所示。
可以看出，使用图像域比提交按钮要更生动，不过它只能代替提交按钮；隐藏域在网页中看不见。
因此现在还用不着隐藏域，但在学习 等动态网页编程时，隐藏域在存储程序员需要临时保存的值方面，可能会发挥重要作用。
在上传文件时，常常要用到文件域。
文件域用于查找硬盘中的文件路径，然后通过表单将选中的文件上传。
在设置电子邮件的附件、上传图片、发送文件时常常会看到这一控件。
语法为：
<input type = "file" name = 控件名称>
【例12】文件上传控件的使用。
<html> <head> <title>itsway --表单</title> </head> <body> <form name = "pic"> 请上传你的头像图片：<input type = "file" name = "headpic"> </form> </body>
图 浏览结果。