1.4.8 表单的设计
表单是能够将用户信息提交给服务器的一种页面元素，是服务器与网页访问者之间沟通的纽带。主要标签有表单标签、表单元素(包括文本字段、密码字段、文本区域、隐藏域、复选框、单选按钮、列表项、图像域、跳转菜单、文件域、按钮等)标签等。表单元素要放在表单起始标签<form>和表单结束标签</form>之间。
1. 表单标签
<form name="xxxx"id="formn" action="filename" method="ppgg" enctype=" tttppp">……</form>
<!-- 定义一个表单。
name参数定义该表单的名称，表单命名以后，脚本语言就可以通过表单名称来引用或操作该表单；
id定义该表单的序列号，省略该参数时，默认的表单id分别为form1、form2、form3等(分别表示该表单为本网页的第1、2、3个表单)；
action参数用于指定处理该表单的程序文件名filename，该文件应该是动态服务器程序文件，如*.asp、*.php、*.jsp或*.aspx等类型的程序文件；
method参数说明传递参数的方法，ppgg可取post或get，get方法是将提交的变量名和参数值附加到URL查询字符串中，并发送get请求，形如“http://www.abc.com/login.asp？name=zhangsan”。其中“？”以前的部分是URL，“？”以后的部分是表单变量及参数；
post方法是在消息正文中发送表单值，并向服务器发送post请求，与get方法不同的是，表单元素变量及参数值不会出现在URL中，而且对提交信息的长度没有限制；
enctype参数用于指定MIME文件的类型，当表单内有文件域时，该参数的值一般应设为
“multipart/form-data”。-->
2. input类标签
input类标签用于定义表单内一个输入型、选择型或按钮元素。一般格式如下：
<input type="类型" name="名称" value="值"……>
其中type属性用于定义该元素的具体类型，可选的类型有text(文本)、password(密码)、hidden(隐藏)、checkbox(复选)、radio(单选)、image(图像)等。
1)文本字段
<input type="text" name="textname" value="text content here" size="n" maxlength="m"/>
<!-- 定义一个输入文本字段元素。
type="text"定义元素为一个文本字段；
name指定该文本字段的变量名称textname，value指定该文本字段变量的初始值，其值可以通过处理该表单的程序来改变；
size指定该文本字段的宽度， maxlength指定该文本字段内能容纳的最多字符个数，n、m取正整数值。-->
例如，如下代码：
<form>
输入姓名：<input type="text" name="textname" />
</form>
浏览效果如下：
2)密码字段
<input type="password" name="pwd" value="" size="n" maxlength="m" />
<!-- type属性值为password，定义了一个密码字段。
当用户在该字段输入字符时，将以星号或项目符号的形式显示，以避免旁观者看到输入的真实内容。
与文本字段相比，除type属性值不同外，其余属性的含义相同。-->
例如，如下代码：
<form>
输入密码：<input type="password" name="pwd" value="1234" />
</form>
浏览效果如下：
3)隐藏域
<input type="hidden" name="hiddenname" />
<!-- type属性值为hidden，定义一个隐藏域。
隐藏域的内容不会显示在页面上，主要用于存储用户输入的姓名、电子邮件地址等信息，并在该用户下次访问站点时使用这些数据。隐藏域在网页编程中常用作传递参数的手段。-->
4)复选项
<input type="checkbox" name="checkname1" value="xxyy" checked="checked "/>
<!-- type属性值为checkbox，定义了一个复选项。
name定义该复选项变量名称，value定义变量的初始值；
Checked属性用于设定该复选框是否默认处于勾选状态。
-->
例如，如下代码：
<form>
<input type="checkbox" name="check1" checked="checked"/> 篮球
<input type="checkbox" name="check2" /> 足球
</form>
浏览效果如下所示。
5)单选项
<input type="radio" name="radioname1" value="xxyy" checked="checked " />
<!-- type属性值为radio，定义了一个单选项。
name定义该单选项变量名，value指定单选项变量的初始值，name属性名相同的几个单选项中，只能有一项被选中；
Checked属性用于设定该单选框是否默认处于勾选状态。-->
例如，如下代码：
<form>
<input type="radio" name="radio1" checked="checked"/> 男
<input type="radio" name="radio1" /> 女
</form>
浏览效果如下所示。
6)按钮
<input type="button" name="bottname" value="按钮" />
<!--用于定义一个按钮。
type属性的值可取button、submit或reset，分别表示三种不同类型的按钮：普通按钮、提交、重置；
name定义按钮变量名，value定义呈现在按钮上的字符。-->
例如，如下代码：
<form>
<input type="button" name="butt" value="[按钮]"/>
<input type="submit" name="subm" value="[提交]"/>
<input type="reset" name="res" value="[重置]"/>
</form>
浏览效果如下所示。
7)图像域
<input type="image" name="imagename" src="filepatchname" id="提交" />
<!-- 定义一个图像域，用于生成一个图形化按钮，用图形来代替“提交”或“重置”按钮。
name指定图像域变量名；
src指定图像文件名称和所在路径。-->
3. 文本区域标签
<textarea name="areaname" cols="n" rows="m">……</textarea>
<!-- 定义一个文本区域。
name定义该复选项变量名称；
cols属性指定文本区域的列宽，n取为正整数；
rows属性指定文本区域显示的行数，m取为正整数；
<textarea>和</textarea>之间的内容，为该文本区域中的初始值。-->
例如，如下代码：
<form>
<textarea name="areaname" cols="10" rows="4">
热烈庆祝中华人民共和国成立61周年！
</textarea>
</form>
浏览效果如下：
4. 列表项标签
<select name="selectname" size="n" multiple="multiple">
<option value="m">……</option>
<option value=…>……</option>
……
</select>
<!-- select定义一个列表菜单。
name定义列表变量名；
size定义列表的行数,n取为正整数；
multiple属性确定是否允许同时选择多个选项；
option定义一个列表项，其中value定义选项值，m取值为0，1，2，…，n；
一个列表菜单里可以有多个列表项。-->
例如，如下代码：
<form>
<select name="selectname" size="1">
<option value="0">请选择</option>
<option value="1">清华大学</option>
<option value="2">北京大学</option>
<option value="3">南京大学</option>
</select>
</form>
浏览效果如下：
当单击
右边的向下箭头，出现下拉列表。
一个含有表单各种元素的网页文件(1-8.htm)内容如下。
--------------------------清单1-8 1-8.htm---------------------------
<html>
<head><title>表单的应用</title>
</head>
<body>
<form name="formlogin" id="form1" action="login.asp" method=" post">
<h3 align="center">个人信息登记表</h3>
姓名：<input type="text" name="textname" /> <br/>
性别：<input type="radio" name="radio1" checked="checked"/> 男
<input type="radio" name="radio1" /> 女 <br />
登录密码：<input type="password" name="pwd" value="1234" /> <br/>
个人简介：<br/>
<textarea name="areaname" cols="36" rows="4">
请在这儿输入个人基本情况。
</textarea> <br/>
<input type="submit" name="subm" value="[提交]"/>
<input type="reset" name="res" value="[重置]"/>
</form>
</body>
</html>
--------------------------------------------------------------------
浏览1-8.htm网页文件，效果如图1-11所示。
此表单的action属性值是login.asp，method属性值为post。单击“重置”按钮后，所有表单元素内容恢复初始值；用户填写完表单各项内容以后，单击“提交”按钮，则将表单中所有元素提交给action指定的程序login.asp处理。
图1-11 表单的应用
注意：表单只是用户输入与提交信息的界面，处理表单信息则要由actoin指定的脚本程序来完成，脚本程序可以是asp、php等程序。
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
