9.5表单的概念和标记
- 表单的概念
表单是Web页面上的一种信息结构，在网页设计技术中主要用来让页面用户填写信息，从而让Web服务器能够获得并认证用户信息，实现服务器和用户之间的交互功能。
例子：
<html>
<head>
<title>一个使用表单的例子</title>
<script language="JavaScript">
function do Test()
{
// allElements 为所有窗体元素对象数组
var allElements = document.myForm.elements;
// 对窗口元素对象数组中的每个元素对象进行判断
for(var i=0;i<allElements.length;i++)
{
//如果窗口元素的种类是text，设置其值
if(allElements[i].type=="text")
allElements[i].value="我是文本文档";
else if(allElements[i].type=="checkbox")
{
allElements[i].checked=true;
allElements[i].value="checkboxValue";
}
//如果窗体元素种类是radio，由于一组单选钮的名称是一样的，因此，通过比较其值进行选择。
else if(allElements[i].type=="radio")
{
if(allElements[i].value="yes")
allElements[i].checked=true;
}
//如果窗体元素种类是password，设置其值，屏幕上将不会显示内容
else if(allElements[i].type=="password")
{
allElements[i].value=new;
Date().getTime();
}
//如果窗体元素种类是textarea，设置其值
else if(allElements[i].type=="textarea")
{
allElements[i].value="long text string";
}
//如果窗体元素种类是select-one，选择其第二项
else if(allElements[i].type=="select-one")
{
allElements[i].value=1;
}
//如果窗体元素种类是多选列表select-multiple，选择每一项
else if(allElements[i].type=="select-multiple")
{
allElements[i].options[0].selected=true;
allElements[i].options[1].selected=true;
}
//如果窗体元素种类是多选列表reset，出现提示框后按下它
else if(allElements[i].type=="reset")
{
alert("JavaScript将自动按下"重置"钮");
allElements[i].click();
}
}
}
</script>
</head>
<body>
<form name="myFrom">
<table>
<tr>
<td>单行本文框</td>
<td><input type="text" name="myTxt"></td>
</tr>
<tr>
<td>复选钮</td>
<td><input type="checkbox" name="myCheckbox"></td>
</tr>
<tr>
<td>单选钮</td>
<td><input type="radio" name="myRadio" value="yes">Yes
<input type="radio" name="myRadio" value="no">No </td>
</tr>
<tr>
<td>密码框</td>
<td><input type="password" name="myPassword"></td>
</tr>
<tr>
<td>隐含按钮</td>
<td><input type="hidden" name="myHidden"></td>
</tr>
<td>按钮</td>
<td><input type="botton" name="myButton" value="普通按钮"></td>
</tr>
<tr>
<td>提交钮</td>
<td><input type="submit" name="mySubnit" value="提交"></td>
</tr>
<tr valign="top">
<td>多行文本框</td>
<td><textarea name="my Textarea" cols="40" rows="3"></textarea></td>
</tr>
<tr><td>下拉列表</td>
<td>
<select name="mySelect">
<option>item1</option>
<option>item2</option>
</select>
</td>
</tr>e
<tr valign="top"><td>多选列表</td>
<td>
<select name="mySelect" multiple size="2">
<option>item1</option>
<option>item2</option>
</select>
</td>
</tr>
<tr><td>重置钮</td>
<td>
<input type="reset" name="myReset" value="重置">
</td>
</tr>
</table>
<div>==========================================</div>
<div><input type="button" value="开始测试" onlick="doTest()"></div>
</form>
</body>
</html>
- <form></form>标记
要在HTML文档中创建一个表单，需要用<form></form>标记对来定义表单的开始和结束位置，在这个标记之间需要嵌入各类表单字元素（如：文本输入框、列表框、单选按钮、提交按钮等）才有意义。
在这对标记之间除了可以包含表单字段元素之外，还可以包含文本、图像以及其他HTML元素。
<form>标记具有action、method、target、titile、enctype等多个属性。
action属性是用来设置接收和处理浏览器提交的表单内容的服务器程序的URL。
例如：<form action=”http://*****/counter.cgi”>
这个语句所起的作用是：当用户提交表单时，服务器将执行网址*****上的程序counter.cgi。
method属性用来定义浏览器将表单中的信息提交给服务器端的处理程序的方式，取值可以为GET或POST。例如，一个使用GET方式提交的from表单，在浏览器地址栏生成的URL地址具有类似下面的形式：http://*****/counter.cgi？name=xxkk&password=123。
由上面的例子可见，GET方式生成的URL是：表单元素名与取值使用等号（=）分割形成一个参数；参数之间使用&分割；参数集合与action指定的URL地址之间使用问号（？）分割。在POST方式下，浏览器把表单元素作为HTTP消息实体内容发送，不作为URL地址参数属性。
target属性用来指定服务器返回结果显示的目标窗口或者标帧。
title属性用来设置网站用户的鼠标在表单任意位置停留时，浏览器使用黄色小浮标显示文本（如表单的名字或者描述）。
encytype属性用来指示浏览器使用哪种编码方法将表单传送给Web服务器。该属性可取值application/x-www-form-urlencode和multipart/form-data，默认值是前者。
例子：
<html>
<head>
<title>表单的title</title>
</head>
<body>
<form tiele="注意一下，这里将会显示出来一个黄色小浮标">
子窗口
<hr><input type ="text" name="subText">
<input type="button" value="不允许主窗口控制" onlick="opener.document.form[0].rdo
Control[1].click();"><br>
<input type="button" value="关闭子窗口" onclick="self.close();"><br>
</form>
</body>
</html>
- <input type=”submit”>标记
<input type=”submit” nme=”mySubmit” value=”提交”>
<input type=”submit”>标记用于定义一个提交按钮，和下面所有表单元素一样，它必须放在<form></form>之间。所有的表单都有一个【提交】按钮，用户单击这个按钮就可以将表单结果发送到指定URL的指定程序。
- <input type=”reset”>标记
<input type=”reset” name=”myReset” value=”重置”>
<input type=”reset”>用于定义一个重新填写的按钮，大多数表单（尤其是有多个输入区域的表单）通常都会有一个【重置】按钮。用户单机这个按钮，就会将所有元素重新设置为初始值。
- <input type=”text”>标记
<input type=”text” name=”subText”>
<input type=”text”>用于在表单上创建单行文本输入区域，每个单行文本输入区都具有如下属性。
size：文本区宽度。
value：文本区初始值。
maxlength：文本区最大字段长度。
readonly：只读文本。
disable：文本区无效。
- <input type=”checkbox”>
<input type=”checkbox” name=”myCheckbox”>
<input type=”checkbox”>标记用于在表单上添加一个复训狂。
- <input type=”radio”>
<input type=”radio” name=”myRadio” value=”yes”>Yes
<input type=”radio” name=”myRadio” value=”no”>No
<input type=”radio”>用于在表单上添加一个按钮，使用方式类似于复选框。单选按钮需要成组使用才有意义，只要将多个单选按钮的属性设置为一样，它们就形成一组单选按钮。
- <input type=”hidden”>
<input type=”hidden” name=”myHidden”>
<input type=”hidden”>用于在表单上添加一个隐藏元素，浏览器不显示这个表单字段元素，但是在提交表单时，浏览器会将隐藏的表单元素的name属性和value属性组成的信息对发送给服务器。
- <input type=”password”>
<input type=”password” name=”myPassword”>
用于在表单上添加一个密码输入区。用户密码区输入字符时，浏览器将每个字符都显示为星号（*）。
- <input type=”button”>
<input type=”button” value=”开始测试” onclick=”doTest()”>
用于在表单上添加一个普通按钮，这个按钮通常与某个脚本程序代码相联系。
- <input type=”file”>
用于在表单上添加一个用来进行文件上传的文本输入框和一个“浏览”按钮。
- <input type=”image”>
用于在表单上创建一个图像元素，图像而定原文件名有src属性指定，它没有value属性。
- <select></select>和<option></option>标记对
<select></select>用于创建一个下拉列表框、或者一个可以复选的列表框，属性size用
与设置可见的选项数目，默认值是1.
<option></option>在<select></select>之间，用于添加条目。
- <textarea></textarea>标记对
创建一个可以输入多行文本的文本框。用在<from></form>之间，属性有cols和rows，用于设置文本框的行数和列数。
- <label>标记
设定表单元素间进行快速切换的快捷键。主要属性有for和accseekey，分别用来指定快捷键作用的表单元素和指定与表单元素对应的快捷键。