第三章表单与表单元素

学习目标

理解表单的作用
理解表单与表单元素的关系
掌握表单标签及其属性
掌握各种表单元素标签及其属性

在Web网页中，浏览者经常需要与Web服务器进行数据交互。当浏览者需要填写数据并将这些数据发送到服务器端时，需要在页面中创建表单。

图3.1是google首页的搜索表单。

图 3.1 表单示例_google首页

图3.2是新浪首页的登录表单。

图 3.2 表单示例_新浪首页

图3.3是华声论坛的注册表单。

图 3.3 表单示例_华声论坛注册

由上面的例子可以看到，浏览者可以填写表单中的文本框，密码框等，并确认向服务器发送这批数据，由此实现浏览器与服务器之间的数据交互。

3.1 <form></form>标签

使用<form></form>标签创建表单，它表示一组表单数据的容器。

代码范例3.1

<html>

<head>

</head>

<body>

<form>

[浏览者在此填写表单数据。]

</form>

</body>

</html>

代码行结果如图3.4所示。

图3.4 代码范例3.1的运行结果_作为容器的表单

注意：<form></form>标签在浏览器中并不具备可见的外观，它只是作为数据的容器。为了让浏览者在表单中输入数据，还需要在表单内部创建表单元素。

3.2 表单元素

表单的数据需要用表单元素来实现浏览者的输入，文本框、密码框等即为表单元素，其他的表单元素还有单选按钮、复选框、文件域、隐藏域、提交按钮、重置按钮、自定义命令按钮、图像按钮、多行文本域、列表框等。下面分别介绍。

3.2.1 <input />标签

<input />标签可在表单中创建最常用的表单元素，如文本框，密码框，单选按钮，复选框，文件域，隐藏域，提交按钮，重置按钮，自定义命令按钮，图像按钮等。

代码范例3.2

<html>

<head>

<title>input示例</title>

</head>

<body>

<form>

请输入要查找的书籍名称:

</form>

</body>

</html>

代码运行结果如图3.5所示。

图3.5 代码范例3.2的运行结果

注意：代码中两个<input />标签分别创建了一个文本框和一个提交按钮。<input />标签的type属性用于设置<input />标签创建哪种类型的表单元素，这个属性的默认值为text即文本框。不同类型的表单元素有不同的外观，浏览者对其操作的方式也不同。

代码范例3.3:

<html>

<head>

<title>input标签的type属性</title>

</head>

<body>

<h1>在此填写会员注册资料</h1>

<form>

会员名:<input type="text" /><br />

登录密码:<input type="password" /><br />

性别:

<input type="radio" />男

婚姻状况:<input type="checkbox" />已婚<br />

相片:<input type="file" /><br />

</form>

</body>

</html>

代码运行结果如图3.6所示。

图3.6 代码范例3.3的运行结果

代码中的各个<input />标签依次创建了文本框、密码框、单选按钮[一组两个]、复选框、文件域、提交按钮、重置按钮。

表3.1是type属性可用的值及相应的意义。

type属性的值	意义
text	文本框，type属性的默认值。
password	密码框。浏览器将显示明文显示成为密码字符。
radio	单选按钮，应成组地使用，一组中包含多个相关的单选按钮。
checkbox	复选框。可单独立使用，也可成组使用。
file	文件域，用于让浏览者选择本机的文件，表单提交时，此文件将上传到服务器端。
hidden	隐藏域，用于在表单内隐含一个预设的数据，相当于一个浏览者看不到的文本框。
submit	提交按钮，用于表单填写完成时，将此表单的所有数据发送到服务器端。
reset	重置按钮，用于将表单中所有表单元素的数据恢复到初始状态。
button	自定义命令按钮，没有任何内置的行为。可借助于js脚本来定义其行为。
image	图像按钮。功能与submit相同，但显示为图像。

表3.1 <input />标签的type属性

除type属性用于设置<input />标签的类型之外，<input />还支持其他一些属性，用于设置其名称、初始值、图像地址、选中与否的状态等。

代码范例3.4

<html>

<head>

<title>input标签综合示例</title>

</head>

<body>

<h1>在此填写会员注册资料</h1>

<form>

会员名:<input id="txtName" type="text" name="txtName" value="请输入会员名" size="20" /><br />

登录密码:<input id="txtPwd" type="password" name="txtPwd" maxlength="18"/><br />

性别:

<input id="radioGenderMale" type="radio" name="radioGender" value="male" checked="checked" />男

婚姻状况:<input id="chkMarried" type="checkbox" name="chkMarried" value="true" />已婚<br />

兴趣爱好:

<input id="chkTravel" type="checkbox" name="chkHobbies" value="travel" checked="checked">旅行

<input id="chkGame" type="checkbox" name="chkHobbies" value="game">游戏

<input id="chkShopping" type="checkbox" name="chkHobbies" value="shopping" checked="checked">购物

<input id="chkChat" type="checkbox" name="chkHobbies" value="chat">聊天

相片:<input id="filePhoto" type="file" name="filePhoto"/><br />

</form>

</body>

</html>

代码运行结果如图3.7所示。

图3.7 代码范例3.4的运行结果

有关<input />标签的属性，如表3.2所示。

属性	意义
type	表单元素的类型，可用的值为：text , password , radio , checkbox , file , hidden , submit , reset , button , image。默认值为text
id	标签在整个页面中的唯一标识符。
name	表单元素的名称，只有设置了name属性的表单元素才能参与表单提交。对于逻辑上视为一组的多个单选按钮，它们必须设置相同的名称才能确保单选。
value	表单元素的值，即它表示的数据。对文本框和密码框而言，此属性用于设置它们的初始文本。对单选按钮和复选框而言，此属性用于设置它们被选中后要发送到服务器端的数据。对于文件域而言，此属性是只读的，不能设置。对于隐藏域而言，此属性表示要发送到服务器的数据。对于提交按钮，重置按钮，自定义命令按钮而言，此属性用于设置按钮的表面文字。对于图像按钮而言，此属性是只读的，不能设置。
size	一般用于文本框和密码框，表示它们的宽度，以字符数度量。
maxlength	一般用于文本框和密码框，表示它们可以接受的最多字符数。
checked	只用于单选按钮和复选框，用于设置它们在初始状态下被选中。对于具有相同name属性值的一组单选按钮，最多只能给予其中之一。
src	只用于图像按钮，设置图像文件的地址。
alt	只用于图像按钮，设置图像的替代文字。
accept	只用于文件域，设置文件域可接受的文件类型。
disabled	禁用表单元素，使它无法被浏览者操作。被禁用的表单元素不参与表单提交。
readonly	使表单元素的数据无法被浏览者更改。

表3.2 <input />标签的属性

3.2.2 <textarea></textarea>标签

有时在表单中允许用户输入大段文本，需要创建多行文本框。使用<textarea></textarea>标签可为表单创建多行文本框。

代码范例3.5

<html>

<head>

<title>多行文本域</title>

</head>

<body>

<form>

简介:<textarea>在此填写你最近两年来的工作经历。</textarea>

</form>

</body>

</html>

代码运行结果如图3.8所示。

图3.8代码范例3.5的运行结果_多行文本域

注意：位于<textarea></textarea>标签之间的文字是它的初始默认文本。

跟<input />标签一样，<textarea></textarea>标签也支持id、name、disabled、readonly等属性，另外额外支持cols、rows、wrap等属性。如表3.3所示。

属性	意义
id	标签在整个页面中的唯一标识符。
name	多行文本域的名称，只有设置了name属性的多行文本域才能参与表单提交。
disabled	禁用多行文本域，使它无法被浏览者操作。被禁用的多行文本域不参与表单提交。
readonly	使多行文本域的数据无法被浏览者更改。
cols	设置多行文本域的宽度，以每行中可容纳的字符数度量。
rows	设置多行文本域的高度，以可见的行数度量。
wrap	设置多行文本域的自动换行模式。有三个值： Off:不自动换行。文本区只有一行文本，除非浏览者回车强制换行。 virtual:虚拟换行。一行文本的宽度即将超出多行文本框宽度时自动换行，但在自动换行处不产生任何标志。 physical:物理换行。一行文本的宽度即将超出多行文本框宽度时自动换行，且在自动换行处产生换行标志。

表3.3 <input />标签的属性

代码范例3.6

<html>

<head>

<title>多行文本域</title>

</head>

<body>

<form>

简介:<textarea name="txtDescription" cols="50" rows="6" wrap="virtual">在此填写你最近两年来的工作经历。</textarea>

</form>

</body>

</html>

代码运行结果如图3.9所示。

图3.9 代码范例3.6的运行结果

3.2.3 <select></select>及<option></option>标签

有时，在表单中有多项相关的数据让浏览者选择，此时需要创建列表框。使用<select></select>标签及<option></option>标签可创建列表框及它的选项。

代码范例3.7

<html>

<head>

<title>列表框及其选项</title>

</head>

<body>

<form>

年龄:

</select>

</form>

</body>

</html>

代码运行结果如图3.10所示。

图3.10 代码范例3.7的运行结果_列表框及其选项

注意：要创建列表框及其选项，需要使用<select></select>和<option></option>标签嵌套。<option></option>表示列表框中的一个选项，放置在这一对标签之间的文本是这个选项显示给浏览者看的文字。

<option></option>选项标签支持一些属性，可用于设置这个选项表示的数据，以及设定它是否在初始状态下被选中。如表3.4所示。

属性	意义
value	选项表示的数据。如果表单提交时，这个选项是处于被选中的状态，则整个列表框将向服务器发送这个选项的value值。
selected	设定选项在初始状态下默认被选中。

表3.4 <option></option>标签的属性

代码范例3.8

<html>

<head>

<title>option选项的属性</title>

</head>

<body>

<form>

年龄:

</select>

</form>

</body>

</html>

代码运行结果如图3.11所示。

图3.11代码范例3.8的运行结果_选项的属性

<select></select>标签也支持一些属性，用于设置名称，显示的选项数目，是否可被多选等。如表3.5所示。

属性	意义
id	标签在页面内的唯一标签符。
name	列表框的名称。必须设置此属性才能参与表单提交。
disabled	禁用此列表框。
size	设置列表框中的选项显示几项。未设置此属性时，列表框为下拉形式，设置此属性后，列表框将展开为列表形式。
multiple	设置列表框的选项可被浏览者多选。

表3.5 <select></select>标签的属性

代码范例3.9

<html>

<head>

<title>option选项的属性</title>

</head>

<body>

<form>

您感兴趣的职位：

<option value=".NET">.NET软件工程师</option>

<option value="JAVA">JAVA工程师</option>

<option value="WebUI" selected="selected">Web前端工程师</option>

<option value="DB">数据库工程师</option>

<option value="JAVA Web">JAVA Web程序员</option>

<option value="ASP.NET" selected="selected">ASP.NET程序员</option>

<option value="TEST">软件测试工程师</option>

</select>

</form>

</body>

</html>

代码运行结果如图3.12所示。

图3.12 代码范例3.9的运行结果

3.2.4 <button></button>标签

除之前所述的<input />标签可以为表单创建各种按钮外，还可以使用<button></button>标签创建按钮。可以将文本或图像等其他各种内容放置在<button></button>标签之内，这一点是相对于使用<input />创建按钮的优势。与<input />标签类似，它也可设置type,name,id,value,disabled等属性。如表3.6所示。

属性	意义
id	标签在页面内的唯一标识符。
name	按钮的名称。
value	表单提交时，此按钮要发送的数据。注意：此属性对IE浏览器无效，表单提交时，IE浏览器会将<button></button>标签之间的文本作为此按钮的数据发送给服务器。
disabled	禁用此按钮。
type	类型，有三个值：submit , reset , button。注意：此属性的默认值在不同的浏览器之间有差别，所以应显式地为此属性赋值。

表3.6 <button></button>标签的属性

代码示例3.10

<html>

<head>

<title>button标签</title>

</head>

<body>

<form>

</form>

</body>

</html>

代码运行结果如图3.13所示。

图3.13 代码范例3.10的运行结果

3.2.5 <label></label>标签

<label></label>标签的主要作用是为上述表单元素提供提示性的说明文字。另外，它的for属性可用于与某个表单元素进行绑定，这样可以在这个标签在浏览者选择时，浏览器自动将焦点转移到与它绑定的表单元素中。一般用于单选按钮和复选框元素。

代码范例3.11

<html>

<head>

<title>label标签综合示例</title>

</head>

<body>

<h1>在此填写会员注册资料</h1>

<form>

会员名:<input id="txtName" type="text" name="txtName" value="请输入会员名" size="20" /><br />

登录密码:<input id="txtPwd" type="password" name="txtPwd" maxlength="18"/><br />

性别:

婚姻状况:<input id="chkMarried" type="checkbox" name="chkMarried" value="true" /><label for="chkMarried">已婚</label><br />

兴趣爱好:

<label><input id="chkGame" type="checkbox" name="chkHobbies" value="game">游戏

相片:<input id="filePhoto" type="file" name="filePhoto"/><br />

</form>

</body>

</html>

代码运行结果如图3.14所示。

图3.14 代码范例3.14的运行结果

点击单选按钮旁边的标签文本，可以选中这个单选按钮，就像这个单选按钮本身被点击一样。点击复选框旁边的标签文本，可以切换这个复选框的选中与否的状态，就像这个复选框一样。

注意：性别的两个单选按钮和婚姻状况的复选框与旁边的<label></label>的标签采用了显式绑定的方式，即<label>的for属性值指定为要绑定的表单元素的id属性值。而兴趣爱好的四个复选框与旁边<label></label>的标签是采用了隐式绑定的方式，即把要绑定的表单元素放置在<label></label>的标签内部。

3.2.6 <fieldset></fieldset>及<legend></legend>标签

<fieldset></fieldset>标签用于将表单内的多个表单元素分成多个组，而<legend></legend>标签则用于为每个组提供一个标题。

代码范例3.12

<html>

<head>

<title>fieldset和legend示例</title>

</head>

<body>

<h1>在此填写会员注册资料</h1>

<form>

会员名:<input id="txtName" type="text" name="txtName" value="请输入会员名" size="20" /><br />

登录密码:<input id="txtPwd" type="password" name="txtPwd" maxlength="18"/><br />

</fieldset>

性别:

<input id="radioGenderMale" type="radio" name="radioGender" value="male" checked="checked" />男

婚姻状况:<input id="chkMarried" type="checkbox" name="chkMarried" value="true" />已婚<br />

兴趣爱好:

<input id="chkTravel" type="checkbox" name="chkHobbies" value="travel" checked="checked">旅行

<input id="chkGame" type="checkbox" name="chkHobbies" value="game">游戏

<input id="chkShopping" type="checkbox" name="chkHobbies" value="shopping" checked="checked">购物

<input id="chkChat" type="checkbox" name="chkHobbies" value="chat">聊天

相片:<input id="filePhoto" type="file" name="filePhoto"/><br />

年龄:

</select><br />

简介:<textarea name="txtDescription" cols="50" rows="6" wrap="virtual">在此填写你最近两年来的工作经历。</textarea><br />

</fieldset>

</form>

</body>

</html>

代码运行结果如图3.15所示。

图3.15 代码范例3.12的运行结果

3.3 表单的属性与提交

浏览者能通过表单元素将表单数据填写完整后，还要将表单提交到服务器，才能完成此次与服务器的数据交互。表单提交是指浏览器将表单内所有表单元素的数据作为整体发送到服务器器。浏览者可以通过类型为sumit或image的<input />标签以及类型为submit的<button></button>标签的点击来告知浏览器行使这一提交动作。

浏览器提交表单数据时，究竟应该向服务器端的哪个程序发送表单数据，采用哪种方式发送数据，表单数据如何编码等，可以由<form></form>标签的一些属性来设置。如表3.7所示。

属性	意义
id	标签在页面中的唯一标识符。
name	表单的名称。
action	动作，一个URL地址。即浏览器向服务器端的哪个程序提交表单数据。
method	方法，可以get 或 post ,即浏览器采用哪种方法向服务器传递数据。默认为get
enctype	表单数据在传递之前浏览器对其编码的方式。当表单内包含file类型的<input />表单元素用于上传文件时，此属性必须设置为multipart/form-data。

表3.7 表单的属性

代码示例3.13

<html>

<head>

<title>表单的属性</title>

</head>

<body>

会员名:<input type="text" name="txtName" /><br />

密码:<input type="password" name="txtPwd" /><br />

</form>

</body>

</html>

代码运行结果如图3.16所示。

图3.16 代码范例3.13的运行结果

填写会员名和密码后点击登录提交按钮，浏览器将把表单数据发送到服务器的login.html程序中去处理。

结果如图3.17所示。

图3.17代码范例3.13表单提交的结果

有时，在表单提交时，在浏览器地址栏中可以看到除表单处理程序的URL之外的一些数据。如图3.18所示是在google中填写搜索关键字的场景。

图3.18 google搜索表单

浏览者填写了搜索关键字后点击Google搜索，结果如图3.19所示。

图3.19 google搜索结果

注意：浏览器地址栏中的数据：

http://www.google.cn/search?hl=zh-CN&q=form+method+get&btnG=Google+%E6%90%9C%E7%B4%A2&aq=f&oq=

“?”之后的数据是因为表单采用get方式提交而产生。实际上，“?”之后就是浏览者在表单中填写的数据，当浏览器发现表单的method属性值为get时，将会把表单中每个表单元素的数据组织成为一个一个的名/值对，用&连接符将这些名/值对连成一个字符串，附加在表单的action属性指定的表单处理程序的地址之后。名/值对中的名称即为表单元素的name属性值，则名/值对中的值是指表单元素的value属性值。

将3.13.html中的表单改为get方式提交。

代码范例3.14

<html>

<head>

<title>表单的属性</title>

</head>

<body>

会员名:<input type="text" name="txtName" /><br />

密码:<input type="password" name="txtPwd" /><br />

</form>

</body>

</html>

运行此页面，填写会员名为suhongwei，密码为123456，点击登录按钮提交到login.html。观察转到login.html页后浏览器地址栏中的数据。如下：

…….login.html?txtName=suhongwei&txtPwd=12345&btnSubmit=%B5%C7%C2%BC

?问号之后有三个名/值对，三个名即txtName , txtPwd , btnSubmit 即是表单中三个表单元素的name属性的值，则三个值即suhongwei , 123456 , %B5%C7%C2%BC是这三个表单元素相对应的value值。

get和post两种提交方式的差别为：get方式是将表单数据作为一个字符串附加在地址之后传递到服务器端，而post方式则是由浏览器隐藏地传递到服务器端。

注意：当表单内包含密码框及文件域时或表单的数据量较大时，应使用post方式。另外，应区分这两种方式在语义方面的差别：post指浏览器提供一批数据发送到服务器，而get指浏览器要从服务器端获取数据。

学习总结

表单用于浏览器和Web服务器之间进行数据交互。
使用<form></form>标签创建表单。
使用<input />标签，<textarea></textarea>标签，<select></select>标签及<option></option>标签，<button></button>标签，<label></label>标签，<fieldset></fieldset>标签及<legend></legend>标签在表单内部创建表单元素。
<input />标签可以创建多种类型的表单输入元素。
<select></select>标签及<option></option>标签可以创建列表框及其内部的选项。
<button></button>标签可以创建多种类型的按钮。
<label></label>标签可以为其他表单元素创建标签文本并与表单元素进行绑定。
<fieldset></fieldset>标签及<legend></legend>标签可以将表单内部的众多表单元素进行分组，并为每一组提供标题。
表单提交指浏览器将表单内部表单元素的数据发送到Web服务器端。表单数据提交到哪个程序处理由表单的ACTION属性设置，浏览器以哪种方式提交表单数据由表单的METHOD属性设置。

理论复习

1、以下哪一项全部都能由<input />标签创建。( )

A. 文本框列表框复选框密码框

B. 复选框多行文本框提交按钮

C. 自定义命令按钮文件域隐藏域

D. 密码框提交按钮图片按钮列表框

2、以下哪一项全部都可作为<input />标签type属性的值。( )

A. text password radio checkbox

B. file hiddent image select

C. submit reset button option

D. textarea label fieldset

3、以下哪一项全部都是<input />标签的属性。( )

A. id name value selected

B. size maxlength src text

C. checked disabled cols rows

D. type alt readonly enctype

4、 <button></button>标签未设置type属性时，在IE和Firefox浏览器中，这个属性的默认值分别是( )。

A. input button

B. reset submit

C. button submit

D. submit button

5、要将包含密码数据的登录表单提交到Web服务器中处理，应为<form></form>的( )属性的值设置表单处理程序的地址，并应将表单的( )属性的值设置为( )。

A. post action method

B. action method get

C. method post action

D. action method post

上机作业

1、实现博客园的注册表单。如题图1所示。

题图 1

此页面地址：http://passport.cnblogs.com/register.aspx

2、实现前程无忧的职位搜索器表单和网上调查表单。如题图2所示。

题图 2

页面地址：http://tr.51job.com/default-tr.php

3、实现QQ空间中写日志表单，如题图3所示。

题图 3

此页面地址：http://user.qzone.qq.com/你的QQ号码/infocenter?ptlang=2052

转载于:https://www.cnblogs.com/suhongwei/archive/2009/10/31/1593577.html