第 8章 表单的设计
HTML是利用表单（ Form）来设计交互界面的。
表单是用于 实现网页浏览者与服务器
之间信息交互 的一种页面元素，它由
表单控件和一般内容组成。 例如,
示例 1 示例 2
表单作用
表单 工作原理
8.1 <form>标签
8.2 <input>标签
8.3 下拉菜单 select/option
8.4 多行文本框 textarea
8.5 表单在网页中的应用
?表单标签 <form>是 成对标签,首标签 <form>和尾
标签 </form>之间的内容就是一个表单。
?表单 form中的 HTML代码要完成两件事情：一是 指
出服务器程序的路径和名称,二是要 将给定信息传
递给服务器程序 。
8.1 <form>标签
Form表单的基本格式,
在 HTML中,form的语法结构如下,
<form action="… " method="… ">
<input>
…
<select>… </select>
…
<textarea>… </textarea>
</form>
在 <form>标签里有三个属性,action,method
和 enctype。
1,action属性
action属性指出该表单所对应的处理程序的
位置。它的参数值就是该程序的 URL。
2,method属性
method属性用于指定该表单的运行方式。属
性的参数值为 get和 post之一，默认的方式是 get。
当值为 get时 表示该表单主要是从服务器中获取信
息，因此它传送给服务器的反馈信息长度 不能超过
255个字符 ；当值为 post时表示该表单主要是向服
务器发送信息的，它传送给服务器的反馈信息长度
没有限制。
Enctype属性
? Enctype的缺省值为：, application/x-
www-form-urlencoded”
? enctype="multipart/form-data"
8.2 <input>标签
8.2.1 文本框 text
8.2.2 提交按钮 submit与重置按钮 reset
8.2.3 密码框 password
8.2.4 单选框 radio
8.2.5 复选框 checkbox
8.2.6 图像按钮 image
8.2.7 隐含框 hidden
8.2.8 文件选择输入框 file
?<input>是个 单标签,它必须嵌套在表单标签中使
用。
?<input>标签有六个属性,type,name,size、
value,maxlength和 checked，其中 name和 type是两
个必选属性。
?服务器处理程序通过 name属性值来提取用户所输
入的信息。
?type属性指定 input的类型
<input>标签说明
type主要有九种类型,text,password,radio、
checkbox,submit,reset,image,hidden和 file。
?当 type的类型为 text时，表示 单行文本框 。
?格式,<input type=“text” name=“” size=“”
value =“” maxlength =“”>
8.2.1 文本框 text
1,size属性：用于指定文本框的长度，默认
值为 20，以字节为单位。
2,value属性：设定预先出现在文本框中的内
容。
3,maxlength属性：表示该文本框允许用户输
入的最大字符数。此值总是大于或等于 size属性的
参数值。当输入的字符数超过文本框的长度时，用
户可以通过移动光标来查看超过部分的内容。
8.2.2 提交按钮 submit与重置按钮 reset
?当 type=submit时，表示一个提交按钮。
?格式,<input type=“submit” name=“”
value=“”>
?提交按钮的 name属性是可以缺省的。除 name属性
外，它还有一个可选的属性 value，用于指定显示
在提交按钮上的文字。
?在一个表单中必须有提交按钮，不然将无法向服
务器传送信息。
?当 type=reset时，表示一个重置按钮。
?格式,<input type=“reset” name=“”
value=“”>
?提交按钮的 name属性是可以缺省的。除 name属性
外，它还有一个可选的属性 value，用于指定显示
在提交按钮上的文字。
?value属性的缺省值是, 重置, 。
一般来说，提交与重置按钮应同时出现。
8.2.3 密码框 password
?password类型与 text类型使用起来很相似，用星
号, *” 来代替每个密码字符。
8.2.4 单选框 radio
?当 type=radio时，表示一个 单选框 。
?格式,<input type=“radio” name=“”
value=“” checked>
?同组的选项只能取一个值,单选框 name
属性相同者为一组！
?checked属性用于指定该选项在初始时是被选
中的。
?当 type=checkbox时，表示 复选框
?格式,<input type=“checkbox”
name=“” value=“” checked>
?由于选择是多项的，属性 name应取不同的值。
?value属性的参数值必须与选项内容相同或基本相
同，该属性是不可缺少的。
?checked属性用于指定该选项在初始时是被选中的。
8.2.5 复选框 checkbox
?当 type=image时，表示一个图像按钮
?格式,<input type=“image” src=url >
?其中的 src属性是必须的，它用于设置图像文件的
路径。
?在图像标签中使用的属性规定也可以在图像按钮中
使用 (alt,height,width,border,align、
vspacr,hspace)。
8.2.6 图像按钮 image
?当 type=hidden时，表示输入项将不在浏览器窗口
中显示。
?格式,<input type=“hidden” name=“”
value=“”>
8.2.7 隐含框 hidden
文件选择输入框实现文件上传
格式,<input type=file name=file1>
表单为,<form method="POST" enctype="multipart/form-
data" action="">
8.2.8 文件选择输入框 file
8.3 下拉菜单
通过 <select>和 <option>标签 就可以在浏览器中
出现一个 下拉式菜单或带有滚动条的菜单,浏览
者可以 在菜单中选中一个或多个选项 。
<select>标签是成对标签,首标签 <select>和
尾标签 </select>之间的内容就是一个下拉式菜单的
内容。 <select>标签必须与 <option>标签配套使用,
<option>标签用于定义下拉菜单中的各个选项。
<select>标签有 name,size和 multiple三个属性 。
8.3.1 select标签
24
?name属性,指定下拉菜单的名字。
?size属性,可选,用于定义菜单的高度 。 size属性
的参数值是数字，表示显示在菜单中的选项数目。当
size属性的参数值小于列表框中的列表项数目时，浏
览器会为该菜单添加滚动条，用户可以使用滚动条来
查看所有的选项。 szie属性的缺省值为 1。
?multiple属性,用于预选多个选项。
?<option>标签用来 定义菜单中的选项 。
?<option>标签是 单标签,它必须嵌套在 <select>
标签中使用。 一个菜单中有几个选项，就要有几个
<option>标签与之相对应
?选项的具体内容写在每个 <option>之后 。
?<option>标签有 两个属性,value和 selected，它
们都是可选的。
8.3.2 option标签
26
?value属性,它的参数值是当该项被选中并提交
后,Web浏览器传送给服务器的数据。 缺省时，浏
览器将传送选项的内容 。
?selected属性：用来指定选项的初始状态，表
示该选项在初始时是被选中的 。
?若在 <select>标签中设定 multiple属性的话，
可以在多个 <option>标签中带有 selected属性，
即同时多个选项被预选。
?<textarea>标签用来 定义高度超过一行的文本输
入框 。
?<textarea>标签是 成对标签,首标签 <textarea>
和尾标签 </textarea>之间的内容就是显示在文本
输入框中的初始信息 。
?<textarea>标签有 3个属性,name,rows和 cols。
8.4 多行文本框 textarea
28
name属性,指定文本输入框的名字 。
cols属性,用于 规定文本输入框的宽度 。属性的参
数值是数字，表示一行所能显示的最大字符数。如
果输入信息中有一行或几行的字符数 大于 cols属性
的参数值,浏览器会为该文本输入框添加 水平滚动
条 。
rows属性,用于 规定文本输入框的高度 。属性的参
数：值是数字，表示该文本输入框所占的行数。浏
览器会自动为 高度超过 一行的文本输入框添加 垂直
滚动条 。但是当输入信息的行数小于或等于 rows属
性的参数值时，滚动条将不起作用。
8.5 表单在网页中的应用
参见示例 new example目录
HTML是利用表单（ Form）来设计交互界面的。
表单是用于 实现网页浏览者与服务器
之间信息交互 的一种页面元素，它由
表单控件和一般内容组成。 例如,
示例 1 示例 2
表单作用
表单 工作原理
8.1 <form>标签
8.2 <input>标签
8.3 下拉菜单 select/option
8.4 多行文本框 textarea
8.5 表单在网页中的应用
?表单标签 <form>是 成对标签,首标签 <form>和尾
标签 </form>之间的内容就是一个表单。
?表单 form中的 HTML代码要完成两件事情：一是 指
出服务器程序的路径和名称,二是要 将给定信息传
递给服务器程序 。
8.1 <form>标签
Form表单的基本格式,
在 HTML中,form的语法结构如下,
<form action="… " method="… ">
<input>
…
<select>… </select>
…
<textarea>… </textarea>
</form>
在 <form>标签里有三个属性,action,method
和 enctype。
1,action属性
action属性指出该表单所对应的处理程序的
位置。它的参数值就是该程序的 URL。
2,method属性
method属性用于指定该表单的运行方式。属
性的参数值为 get和 post之一，默认的方式是 get。
当值为 get时 表示该表单主要是从服务器中获取信
息，因此它传送给服务器的反馈信息长度 不能超过
255个字符 ；当值为 post时表示该表单主要是向服
务器发送信息的，它传送给服务器的反馈信息长度
没有限制。
Enctype属性
? Enctype的缺省值为：, application/x-
www-form-urlencoded”
? enctype="multipart/form-data"
8.2 <input>标签
8.2.1 文本框 text
8.2.2 提交按钮 submit与重置按钮 reset
8.2.3 密码框 password
8.2.4 单选框 radio
8.2.5 复选框 checkbox
8.2.6 图像按钮 image
8.2.7 隐含框 hidden
8.2.8 文件选择输入框 file
?<input>是个 单标签,它必须嵌套在表单标签中使
用。
?<input>标签有六个属性,type,name,size、
value,maxlength和 checked，其中 name和 type是两
个必选属性。
?服务器处理程序通过 name属性值来提取用户所输
入的信息。
?type属性指定 input的类型
<input>标签说明
type主要有九种类型,text,password,radio、
checkbox,submit,reset,image,hidden和 file。
?当 type的类型为 text时，表示 单行文本框 。
?格式,<input type=“text” name=“” size=“”
value =“” maxlength =“”>
8.2.1 文本框 text
1,size属性：用于指定文本框的长度，默认
值为 20，以字节为单位。
2,value属性：设定预先出现在文本框中的内
容。
3,maxlength属性：表示该文本框允许用户输
入的最大字符数。此值总是大于或等于 size属性的
参数值。当输入的字符数超过文本框的长度时，用
户可以通过移动光标来查看超过部分的内容。
8.2.2 提交按钮 submit与重置按钮 reset
?当 type=submit时，表示一个提交按钮。
?格式,<input type=“submit” name=“”
value=“”>
?提交按钮的 name属性是可以缺省的。除 name属性
外，它还有一个可选的属性 value，用于指定显示
在提交按钮上的文字。
?在一个表单中必须有提交按钮，不然将无法向服
务器传送信息。
?当 type=reset时，表示一个重置按钮。
?格式,<input type=“reset” name=“”
value=“”>
?提交按钮的 name属性是可以缺省的。除 name属性
外，它还有一个可选的属性 value，用于指定显示
在提交按钮上的文字。
?value属性的缺省值是, 重置, 。
一般来说，提交与重置按钮应同时出现。
8.2.3 密码框 password
?password类型与 text类型使用起来很相似，用星
号, *” 来代替每个密码字符。
8.2.4 单选框 radio
?当 type=radio时，表示一个 单选框 。
?格式,<input type=“radio” name=“”
value=“” checked>
?同组的选项只能取一个值,单选框 name
属性相同者为一组！
?checked属性用于指定该选项在初始时是被选
中的。
?当 type=checkbox时，表示 复选框
?格式,<input type=“checkbox”
name=“” value=“” checked>
?由于选择是多项的，属性 name应取不同的值。
?value属性的参数值必须与选项内容相同或基本相
同，该属性是不可缺少的。
?checked属性用于指定该选项在初始时是被选中的。
8.2.5 复选框 checkbox
?当 type=image时，表示一个图像按钮
?格式,<input type=“image” src=url >
?其中的 src属性是必须的，它用于设置图像文件的
路径。
?在图像标签中使用的属性规定也可以在图像按钮中
使用 (alt,height,width,border,align、
vspacr,hspace)。
8.2.6 图像按钮 image
?当 type=hidden时，表示输入项将不在浏览器窗口
中显示。
?格式,<input type=“hidden” name=“”
value=“”>
8.2.7 隐含框 hidden
文件选择输入框实现文件上传
格式,<input type=file name=file1>
表单为,<form method="POST" enctype="multipart/form-
data" action="">
8.2.8 文件选择输入框 file
8.3 下拉菜单
通过 <select>和 <option>标签 就可以在浏览器中
出现一个 下拉式菜单或带有滚动条的菜单,浏览
者可以 在菜单中选中一个或多个选项 。
<select>标签是成对标签,首标签 <select>和
尾标签 </select>之间的内容就是一个下拉式菜单的
内容。 <select>标签必须与 <option>标签配套使用,
<option>标签用于定义下拉菜单中的各个选项。
<select>标签有 name,size和 multiple三个属性 。
8.3.1 select标签
24
?name属性,指定下拉菜单的名字。
?size属性,可选,用于定义菜单的高度 。 size属性
的参数值是数字，表示显示在菜单中的选项数目。当
size属性的参数值小于列表框中的列表项数目时，浏
览器会为该菜单添加滚动条，用户可以使用滚动条来
查看所有的选项。 szie属性的缺省值为 1。
?multiple属性,用于预选多个选项。
?<option>标签用来 定义菜单中的选项 。
?<option>标签是 单标签,它必须嵌套在 <select>
标签中使用。 一个菜单中有几个选项，就要有几个
<option>标签与之相对应
?选项的具体内容写在每个 <option>之后 。
?<option>标签有 两个属性,value和 selected，它
们都是可选的。
8.3.2 option标签
26
?value属性,它的参数值是当该项被选中并提交
后,Web浏览器传送给服务器的数据。 缺省时，浏
览器将传送选项的内容 。
?selected属性：用来指定选项的初始状态，表
示该选项在初始时是被选中的 。
?若在 <select>标签中设定 multiple属性的话，
可以在多个 <option>标签中带有 selected属性，
即同时多个选项被预选。
?<textarea>标签用来 定义高度超过一行的文本输
入框 。
?<textarea>标签是 成对标签,首标签 <textarea>
和尾标签 </textarea>之间的内容就是显示在文本
输入框中的初始信息 。
?<textarea>标签有 3个属性,name,rows和 cols。
8.4 多行文本框 textarea
28
name属性,指定文本输入框的名字 。
cols属性,用于 规定文本输入框的宽度 。属性的参
数值是数字，表示一行所能显示的最大字符数。如
果输入信息中有一行或几行的字符数 大于 cols属性
的参数值,浏览器会为该文本输入框添加 水平滚动
条 。
rows属性,用于 规定文本输入框的高度 。属性的参
数：值是数字，表示该文本输入框所占的行数。浏
览器会自动为 高度超过 一行的文本输入框添加 垂直
滚动条 。但是当输入信息的行数小于或等于 rows属
性的参数值时，滚动条将不起作用。
8.5 表单在网页中的应用
参见示例 new example目录
