第十章 使用表单
表单的用途很多，在制作网页时，特别是制作动态网页时常常会用到。表单主要用来收集客户端提供的相关信息，使网页具有交互功能。在制作网页时，常常需要使用表单，如进行会员注册、网上调查和搜索等。访问者可以使用如文本域、列表框、复选框以及单选按钮之类的表单对象输入信息，然后单击某个按钮提交这些信息。
10.1 表单标记 form
在网页中<form></form>标签对用来创建一个表单，即定义表单的开始和结束位置，在标记对之间的一切都属于表单的内容。在表单的<form>标记中，可以设置表单的基本属性，包括表单的名称、处理程序和传送方法等。一般情况下，表单的处理程序action和传送方法method是必不可少的参数。
10.1.1 提交表单action
action用于指定表单数据提交到哪个地址进行处理。
语法：
<form action="表单的处理程序">
......
</from>
说明：表单的处理程序是表单要提交的地址，也就是表单中收集到的资料将要传递的程序地址。这一地址可以是绝对地址，也可以是相对地址，还可以是一些其他形式的地址。
eg:
<html>
<head>
<meta charset="UTF-8">
<title>left</title>
</head>
<body>
<font color="orange">欢迎使用本店房间，您填写的预定表将被发送到酒店客服预定处</font>
<form action="mailto:[email protected]">
</form>
</body>
</html>运行结果：
10.1.2 表单名称 name
name用于给表单取名，这一属性并不是表单的必要属性，但是为了防止表单提交到后台处理程序时出现混乱，一般需要给表单命名。
语法:<form name="表单名称"></form>
说明：表单名称不能包含特殊字符和空格
eg：
<html>
<head>
<meta charset="UTF-8">
<title>left</title>
</head>
<body>
<font color="orange">欢迎使用本店房间，您填写的预定表将被发送到酒店客服预定处</font>
<form action="mailto:[email protected]" name="form1">
</form>
</body>
</html>
10.1.3 传送方式method
表单的method属性用于指定在数据提交到服务器的时候使用哪种HTTP提交方法，可取值为get或post
get: 表单数据被传送到action属性指定的URL,然后这个新的URL被送到处理程序上。
post:表单数据被包含在表单主体中，然后被送到处理程序上。
语法:
<form method="传送方法">
......
</form>
说明：传送方法的值只有两种即get和post
eg：
<html>
<head>
<meta charset="UTF-8">
<title>left</title>
</head>
<body>
<font color="orange">欢迎使用本店房间，您填写的预定表将被发送到酒店客服预定处</font>
<form action="mailto:[email protected]" name="form1" method="post">
账号:<input name="zh" type="text" size="15"><br>
<input type="submit" name="Submit" value="提交">
</form>
<hr>
</body>
</html>点提交之后
运行结果：
10.1.4 编码方式 enctype
表单中的enctype属性用于设置表单信息提交的编码方式
语法：<form enctype="编码方式">......</form>
说明:enctype 属性为表单定义了MIME编码方式，编码方式的取值见表
| enctype的取值 | 取值的含义 |
| application/x-www.form-urlencoded | 默认的编码方式 |
| multipart/form-data | MIME编码，上传文件的表单必须选择此项 |
eg:
<html>
<head>
<meta charset="UTF-8">
<title>left</title>
</head>
<body>
<font color="orange">欢迎使用本店房间，您填写的预定表将被发送到酒店客服预定处</font>
<form action="mailto:[email protected]" name="form1" method="post" enctype="multipart/form-data">
账号:<input name="zh" type="text" size="15"><br>
<input type="submit" name="Submit" value="提交">
</form>
<hr>
</body>
</html>
enctype属性默认值是application/x-www-form-urlencoded,这是所以网页的表单所使用的可接受类型
10.1.5 目标显示方式 target
target用来指定目标窗口的打开方式，表单的目标窗口往往用来显示表单的返回信息
语法:<form target="目标窗口的打开方式">......</form>
说明：
| 取值 | 打开方式 |
| _blank | 将链接的文件载入一个未命名的新浏览器窗口中 |
| _parent | 将链接的文件载入含有该链接框架的父框架集或父窗口中 |
| _self | 将链接的文件载入该链接所在的同一框架或窗口中 |
| _top | 在整个浏览器窗口中载入所链接的文件，因而会删除所以框架 |
eg:
<html>
<head>
<meta charset="UTF-8">
<title>表单目标窗口显示方式</title>
</head>
<body>
<font color="orange">欢迎使用本店房间，您填写的预定表将被发送到酒店客服预定处</font>
<form action="mailto:[email protected]" name="form1" method="post" enctype="multipart/form-data" target="_blank">
账号:<input name="zh" type="text" size="15"><br>
<input type="submit" name="Submit" value="提交">
</form>
<hr>
</body>
</html>运行结果：
在一个新窗口显示表单目标窗口(显示表单的返回信息，此处为空)
10.2 插入表单对象
网页中的表单由许多不同的表单元素组成。这些表单元素包括文字字段、单选按钮、复选框、菜单和列表以及按钮
10.2.1 文字字段 text
在网页中最常见的表单元素就是文字字段，用户可以在文字字段内输入字符或者单行文本
语法:<input name="控件名称" type="text" value="文字字段的默认取值" size="控件的长度" maxlength="最长字符数">
说明：
参数类型 |
含义 |
| type | 用来指定插入哪种表单元素，如type="text",即为文字字段 |
| name | 文字字段的名称，用于和页面中其他控件加以区别。名称由英文或数字以及下划线组成，但有大小写之分 |
| value | 用来定义文本框的默认值(初始显示的文字) |
| size | 确定文本框在页面中显示的长度，以字符为单位 |
| maxlength | 用来设置文本框中最多可以输入的字符数 |
eg：
<html>
<head>
<meta charset="UTF-8">
<title>文字字段</title>
</head>
<body>
<form name="form1" method="post" action="6.1index.html">
姓名:<input name="name" type="text" size="15"><br>
年龄:<input name="age" type="text" value="10" size="10" maxlength="2"><br>
<input type="submit" name="Submit" value="提交">
</form>
</body>
</html>运行结果：
年龄框默认显示10(value="10") 最多输入两位数字(maxlength="2")
10.2.2 密码域 password
密码域是一种特殊的文字字段，它的各属性和文字字段是相同的。所不同的是，密码域输入的字符全部以"*"显示
语法: <input name="控件名称" type="password" value="文字字段的默认取值" size="控件的长度" maxlength="最长字符数">
说明:参数值及意义全部与text相同，其中value用来定义密码域的默认值，但都以"*" 显示
eg:
<html>
<head>
<meta charset="UTF-8">
<title>文字字段</title>
</head>
<body>
<form name="form1" method="post" action="6.1index.html">
用户名:<input name="username" type="text" size="15"><br>
密码:<input name="password" type="password" value="admit" size="10" maxlength="6"><br>
<input type="submit" name="Submit" value="提交">
</form>
</body>
</html>运行结果：
提示:密码域仅仅使周围的人看不见输入的文本，它不能使数据安全，为了使数据安全，需要在浏览器和服务器之间建立一个安全链接。
10.2.3 单选按钮 radio
语法:<input name="单选按钮名称" type="radio" value="单选按钮的默认取值" checked>
说明:单选按钮中必须设置value的值,对于一个选择列表的所以单选按钮来说，往往要设置为相同名称（name属性值必须相同，才为一组，达到互斥选中的效果）。在一个单选按钮组中只有一个单选按钮可以设置为checked
eg:
<html>
<head>
<meta charset="UTF-8">
<title>文字字段</title>
</head>
<body>
<form name="form1" method="post" action="6.1index.html">
性别:
<input name="radiobutton" type="radio" value="radiobutton" checked="checked">男
<input name="radiobutton" type="radio" value="radiobutton">女<br>
<input type="submit" name="Submit" value="提交">
</form>
</body>
</html>运行结果:
name属性值相同是同属一组单选按钮的标志，value并不是，value值可以各不相同
10.2.4 复选框 checkbox
复选框可以让用户从一个选项列表中选择超过一个的选项
语法: <input name="复选框名称" type="checkbox" value="复选框的默认取值" checked>
说明：checked参数表示该项在默认情况下已已经被选中，一个选项列表中可以有多个复选框被选中 （复选框并不需要属于同一组）
eg:
<html>
<head>
<meta charset="UTF-8">
<title>复选框</title>
</head>
<body>
<form name="form1" method="post" action="6.1index.html">
爱好:
<input name="checkbox" type="checkbox" value="checkbox" checked="checked">篮球
<input name="checkbox1" type="checkbox" value="checkbox">游泳
<input name="checkbox2" type="checkbox" value="checkbox">上网
<input name="checkbox3" type="checkbox" value="checkbox">看书
<input name="checkbox4" type="checkbox" value="checkbox">打游戏<br>
<input type="submit" name="Submit" value="提交">
</form>
</body>
</html>
运行结果：
10.2.5 普通按钮button
普通按钮一般情况下要配合脚本来进行表单处理
语法:<input name="按钮名称" type="button" value="按钮上显示的文本" onclick="处理程序">
或单独的按钮标签<buton type="button" onclick="处理程序">按钮上显示的文字(名称)</button>
eg:
<html>
<head>
<meta charset="UTF-8">
<title>复选框</title>
</head>
<body>
<form name="form1" method="post" action="6.1index.html">
爱好:
<input name="checkbox" type="checkbox" value="checkbox" checked="checked">篮球
<input name="checkbox1" type="checkbox" value="checkbox">游泳
<input name="checkbox2" type="checkbox" value="checkbox">上网
<input name="checkbox3" type="checkbox" value="checkbox">看书
<input name="checkbox4" type="checkbox" value="checkbox">打游戏<br>
<input type="submit" name="Submit" value="提交">
<input type="button" name="close" value="关闭窗口" onclick="window.close()">
<button type="button" onclick="window.close()">退出</button>
</form>
</body>
</html>运行结果：
10.2.6 提交按钮submit
提交按钮是一种特殊的按钮，单击改按钮可以实现表单内容的提交
语法:<input type="submit" name="按钮名称" value="按钮上显示的文字">
eg:前面所有页面都有提交按钮，一个自带处理程序的特殊按钮罢了
10.2.7 重置按钮 reset
语法:<input type="reset" name="按钮名称" value="按钮的取值">
说明:同submit，一个自带处理程序的按钮
eg:
<html>
<head>
<meta charset="UTF-8">
<title>复选框</title>
</head>
<body>
<form name="form1" method="post" action="6.1index.html">
爱好:
<input name="checkbox" type="checkbox" value="checkbox" checked="checked">篮球
<input name="checkbox1" type="checkbox" value="checkbox">游泳
<input name="checkbox2" type="checkbox" value="checkbox">上网
<input name="checkbox3" type="checkbox" value="checkbox">看书
<input name="checkbox4" type="checkbox" value="checkbox">打游戏<br>
<input type="reset" name="Reset" value="重置">
</form>
</body>
</html>
运行结果：
10.2.8 图像域 image
还可以使用一副图像作为按钮，这样做可以创建能想像到的任何外观的按钮
语法: <input type="image" name="图像域名称" src="图像路径" width="按钮宽度" height="按钮高度">
说明:src值为显示在按钮上的图像的地址.注意type值为image 。width与height设置按钮大小，否则原始图片多大，按钮多大
eg:
<html>
<head>
<meta charset="UTF-8">
<title>图像域</title>
</head>
<body>
<form name="form1" method="post" action="6.1index.html">
您觉得学校的那些方面需要改进?<br>
<input name="mofe" type="radio" value="1" checked="checked">师资力量<br>
<input name="mofe" type="radio" value="2" checked="checked">教育设施<br>
<input name="mofe" type="radio" value="3" checked="checked">教学内容<br>
<input name="mofe" type="radio" value="4" checked="checked">安全健康<br>
<input type="image" name="image" src="images/tp.jpeg" height="30" width="50">
<input type="image" name="image" src="images/ck.jpeg" height="30" width="50">
</form>
</body>
</html>运行结果：
默认实现提交逻辑，具体逻辑更改要使用onclick属性，并结合js脚本
10.2.9 隐藏域 hidden
有时想传送一些数据，这些数据对于用户来说是不可见的。可以通过一个隐藏域来传送这样的数据。隐藏域包含那些要提交处理的数据，但这些数据并不显示在浏览器中。
语法：<input name="隐藏域名称" type="hidden" value="隐藏域默认取值">
说明：通过将type属性设置为hidden,可以依自己所需，在表单中使用任意多个隐藏域
eg:
<html>
<head>
<meta charset="UTF-8">
<title>图像域</title>
</head>
<body>
<form name="form1" method="post" action="6.1index.html">
您觉得学校的那些方面需要改进?<br>
<input name="mofe" type="radio" value="1" checked="checked">师资力量<br>
<input name="mofe" type="radio" value="2" checked="checked">教育设施<br>
<input name="mofe" type="radio" value="3" checked="checked">教学内容<br>
<input name="mofe" type="radio" value="4" checked="checked">安全健康<br>
<input type="hidden" name="hidden" value="1">
<input type="hidden" name="hidden" value="2">
<input type="hidden" name="hidden" value="3">
<input type="hidden" name="hidden" value="4">
<input type="image" name="image" src="images/tp.jpeg" height="30" width="50">
<input type="image" name="image" src="images/ck.jpeg" height="30" width="50">
</form>
</body>
</html>
运行结果： 隐藏域并未被显示出来 但是提交数据时确实会被提交的
10.2.10 文件域file
文件域在上传文件时用到，它用于查找硬盘中的文件路径，然后通过表单将选中的文件上传，在上传图像时也常常用到
语法：<input name="文件域名称" type="file" size="控件长度" maxlength="最长字符数">
说明: 上传文件时，编码方式必须选择 enctype="multipart/form-data",不能默认
eg:
<html>
<head>
<meta charset="UTF-8">
<title>图像域</title>
</head>
<body>
<form name="form1" method="post" action="6.1index.html" enctype="multipart/form-data"><!--enctype="multipart/form-data" 上传文件的表单必须选择此项-->
上传照片:
<input name="file" type="file" size="30" maxlength="32" ><br>
<input type="image" name="image" src="images/tp.jpeg" height="30" width="50">
<input type="image" name="image" src="images/ck.jpeg" height="30" width="50">
</form>
</body>
</html>
运行结果：
10.3 菜单和列表
菜单和列表主要用来选择给定答案中的一种，这类选择中往往答案比较多。菜单和列表主要是为了节省页面空间，他们都是通过<select>和<option>标签来实现的
10.3.1 下拉菜单
下拉菜单是一种最节省页面空间的选择方式，因为在正常状态下只显示一个选项，单击下拉按钮打开菜单后才会看到全部的选项。
语法:
<select name="下拉菜单名称">
<option value="选项值" selected> 选项显示内容</option>
....
</select>说明:选项值是提交表单时的值，而选项显示的内容才是真正在页面中显示的选项内容。selected表示该选项在默认情况下是选中的，一个下拉菜单中只能有一个默认选项被选中。
eg:
<html>
<head>
<meta charset="UTF-8">
<title>图像域</title>
</head>
<body>
<form name="form1" method="post" action="6.1index.html" >
地区:
<select name="select">
<option value="北京" selected="selected">北京</option>
<option value="上海">上海</option>
<option value="天津">天津</option>
<option value="山东">山东</option>
<option value="河南">河南</option>
</select>
</form>
</body>
</html>
运行结果：
提示：下拉列表的宽度由<option>标签中包含的最长文本宽度决定
10.3.2 列表项
在页面中列表项可以显示出几条信息，一旦超出这个信息量，在列表项右侧会出现滚动条，拖动滚动条可以看到所有的选项
语法:
<select name="列表项名称" size="显示的列表项数" multiple>
<option value="选项值" selected>选项内容</option>
......
</select>说明:在语法中，size用于设置在页面中显示的最多的列表项数，当超过这个值时会出现滚动条.
关键加了multiple(多样的) 属性，不加就是下拉菜单，加了就是列表项. 切option表现都包含在select标签内
eg:
<html>
<head>
<meta charset="UTF-8">
<title>图像域</title>
</head>
<body>
<form name="form1" method="post" action="6.1index.html" >
地区:
<select name="select" size="1" multiple="mutiple">
<option value="北京" selected="selected">北京</option>
<option value="上海">上海</option>
<option value="天津">天津</option>
<option value="山东">山东</option>
<option value="河南">河南</option>
</select>
<hr>
颜色:
<select name="select" size="2" multiple="mutiple">
<option value="红色" selected="selected">红色</option>
<option value="橙色">橙色</option>
<option value="黄色">黄色</option>
<option value="绿色">绿色</option>
<option value="青色">青色</option>
</select>
</form>
</body>
</html>10.4 文本域标签 textarea
当需要让浏览者填入多行文本时，就应该使用文本域而不是文字字段。和其他大多数表单对象不一样，文本域使用的是textarea标签而不是input标签
语法:<textarea name="文本域名称" cols="列数" rows="行数"></textarea>
说明:在语法中，不能使用value属性来建立一个在文本域中显示的初始值。相反，应当在textarea标签的开头和结尾之间包含想要在文本域内显示的任何文本
eg：
<html>
<head>
<meta charset="UTF-8">
<title>图像域</title>
</head>
<body>
<form name="form1" method="post" action="6.1index.html" >
留言:
<textarea name="textarea" cols=“35” rows="5">请在此处留言</textarea>
</form>
</body>
</html>
运行结果：
提示:文本域和计算机内存一样大文本域的大小不受浏览器窗口的限制，如果文本域超出了浏览器窗口大小，会出现滚动条帮助用户看到整个文本域
10.5 id属性
id属性是一个特殊的属性，它主要用于标示一个唯一的元素。这个元素可以是文字字段，可以是密码域，也可以是其他的表单元素，甚至可以是一幅图像、一个表格
语法:<id=元素的标示名>
说明:在HTML中，id用来标示页面中的唯一元素。命名最好见名知意
eg:
<html>
<head>
<meta charset="UTF-8">
<title>综合范例</title>
</head>
<body>
<form name="form1" method="post" action="6.1index.html" >
<table width="500" border="0" align="center" cellspacing="2" cellpadding="0">
<tr>
<td width=“143” height="25">姓名:</td>
<td width="351"><input name="name" type="text" id="name" size="20"></td>
</tr>
<tr>
<td height=“25”>年龄:</td>
<td>
<select name="age" id="age">
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</td>
</tr>
<tr>
<td height="25">性别:</td>
<td>
<input name="sex" id="sex" type="radio" value="radiobutton" checked>男
<input name="sex" id="sex" type="radio" value="radiobutton">女
</td>
</tr>
<tr>
<td height=“25”>家庭住址:</td>
<td><input name="textfiled" type="text" size="40"></td>
</tr>
<tr>
<td height=“25”>联系电话:</td>
<td><input name="textfiled2" type="text" size="11" maxlength="11"></td>
</tr>
<tr>
<td height=“25”>您对我们是否满意:</td>
<td>
<input name="checkbox" type="checkbox" value="checkbox">非常满意
<input name="checkbox2" type="checkbox" value="checkbox">一般
<input name="checkbox3" type="checkbox" value="checkbox">非常不满意
</td>
</tr>
<tr>
<td height="25">意见：</td>
<td><textarea name="textarea" cols="40" rows="6"></textarea></td>
</tr>
<tr>
<td height="25" colspan="2" align="center">
<input type="submit" name="Submit3" value="提交">
<input type="reset" name="Submit4" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
运行结果：
第十章总结
10.1 表单标记form
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="表单处理程序(如邮箱地址)" name="表单名称" method="传送方法(get/post)" enctype="编码方式" target="提交后目标窗口显示方式">
......
</form>
</body>
</html>
10.2 插入表单对象
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="表单处理程序(如邮箱地址)" name="表单名称" method="传送方法(get/post)" enctype="编码方式" target="提交后目标窗口显示方式">
<input name="文本框名称" type="text" value="文本域初始显示的文本" size="文本框长度" maxlength="限制输入的最长字符数">
<input name="密码域名称" type="password" value="密码域初始显示值(以*显示)" size="密码框长度" maxlength="限制输入的最长字符数">
<!--name设置相同 就是属于一组的单选按钮-->
<input name="radiobutton" type="radio" value="radiobutton1" checked(默认选中)>
<input name="radiobutton" type="radio" value="radiobutton1" checked(默认选中)>
......
<input name="radiobutton" type="radio" value="radiobutton1" checked(默认选中)>
<!--复选框无互斥要求 name不必相同-->
<input name="checkbox" type="checkbox" value="checkbox">
<input name="checkbox2" type="checkbox" value="checkbox">
...
<input name="checkbox3" type="checkbox" value="checkbox">
<input name="按钮名称" type="submit" value="按钮上显示的按钮名称" onclick="处理程序">
<input name="Submit" type="submit" value="按钮上显示的按钮名称(如提交)">
<input name="Reset" type="reset" value="按钮上显示的按钮名称(如重置)">
<input name="图像域名称" type="image" src="按钮图像路径">
<input name="隐藏域名称" type="hidden" value=“隐藏域取值”>
<input name="文件域名称" type="file" size="控件长度" maxlength="最长字符数">
</form>
</body>
</html>
10.3 菜单和列表
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="表单处理程序(如邮箱地址)" name="表单名称" method="传送方法(get/post)" enctype="编码方式" target="提交后目标窗口显示方式">
<select name="下拉菜单名称">
<option value="选项值1" selected(默认选中)>选项1</option>
<option value="选项值2">选项2</option>
<option value="选项值3">选项3</option>
.....
<option value="选项值n">选项n</option>
</select>
<select name="列表项名称" size="显示的列表项数" multiple(绝不可少，不加就成了下拉菜单)>
<option value="选项值1" selected>选项显示的内容1
<option value="选项值2" >选项显示的内容2
......
<option value="选项值n" >选项显示的内容n
</select>
</form>
</body>
</html>
10.4 文本域标签 textarea
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="表单处理程序(如邮箱地址)" name="表单名称" method="传送方法(get/post)" enctype="编码方式" target="提交后目标窗口显示方式">
<textarea name="文本域名称" cols="列数" rows="行数"></textarea><!--行数列数决定了文本域显示在页面中的大小，文本域内容无大小限制，多了会出现滚动条-->
</form>
</body>
</html>
10.5 id属性
每个表单都可加一个id属性 js脚本获取对象时用，具体见综合范例