轻松玩转花样表单

　　本专题从最基础的表单知识，到表单的高级应用，让你有一个比较全面地认识，相信你在读完本专题以后，一定会对表单非常熟悉。

一、表单概述

　　表单，在网页中的作用不可小视，主要负责数据采集的功能，比如你可以采集访问者的名字和e－mail地址、调查表、留言簿等等。

1、表单的组成

　　一个表单有三个基本组成部分：

• 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
• 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
• 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

　　为了顾及不同的网页设计工具，本文只讲述代码的设计，不具体讲述操作方法，下面就是表单的HTML代码设计要点：

1.1 表单标签＜form＞＜/form＞

　　功能：用于申明表单，定义采集数据的范围，也就是＜form＞和＜/form＞里面包含的数据将被提交到服务器或者电子邮件里。

　　语法：＜FORM ACTION="URL" METHOD="GET|POST" ENCTYPE="MIME" TARGET="..."＞. . .＜/FORM＞

　　属性解释见下表：

action=url	指定一来处理提交表单的格式.它可以是一个URL地址(提交给程式)或一个电子邮件地址.
method=get或post	指明提交表单的HTTP方法.可能的值为： post：POST方法在表单的主干包含名称/值对并且无需包含于action特性的URL中. get：不赞成。GET方法把名称/值对加在action的URL后面并且把新的URL送至服务器.这是往前兼容的缺省值.这个值由于国际化的原因不赞成使用.
enctype=cdata	指明用来把表单提交给服务器时(当method值为"post")的互联网媒体形式.这个特性的缺省值是"application/x-www-form-urlencoded"
TARGET="..."	指定提交的结果文档显示的位置： _blank ：在一个新的、无名浏览器窗口调入指定的文档； _self ：在指向这个目标的无素的相同的框架中调入文档； _parent ：把文档调入当前框的直接的父FRAMESET框中；这个值在当前框没有父框时等价于_self； _top ：把文档调入原来的最顶部的浏览器窗口中(因此取消所有其它框架)；这个值等价于当前框没有你框时的_self.

　　例如：
　　＜form action="http://www.yesky.com/test.asp" method="post" target="_blank"＞...＜/form＞
　　表示表单将向http://www.yesky.com/test.asp以post的方式提交，提交的结果在新的页面显示，数据提交的媒体方式是默认的application/x-www-form-urlencoded方式；
1.2 表单域

　　表单域包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框和下拉选择框等，用于采集用户的输入或选择的数据，下面分别讲述这些表单域的代码格式：

1.2.1 文本框

　　文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。
　　代码格式：＜input type="text" name="..." size="..." maxlength="..." value="..."＞

　　属性解释：
　　type="text"定义单行文本输入框；
　　name属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
　　size属性定义文本框的宽度，单位是单个字符宽度；
　　maxlength属性定义最多输入的字符数。
　　value属性定义文本框的初始值

样例1：

样例1代码：

＜input type="text" name="example1" size="20" maxlength="15"＞

1.2.2 多行文本框

　　也是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。
　　代码格式：＜TEXTAREA name="..." cols="..." rows="..." wrap="VIRTUAL"＞＜/TEXTAREA＞
　　属性解释：
　　name属性定义多行文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
　　cols属性定义多行文本框的宽度，单位是单个字符宽度；
　　rows属性定义多行文本框的高度，单位是单个字符宽度；
　　wrap属性定义输入内容大于文本域时显示的方式，可选值如下：

• 默认值是文本自动换行；当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现；
• Off，用来避免文本换行，当输入的内容超过文本域右边界时，文本将向左滚动，必须用Return才能将插入点移到下一行；
• Virtual，允许文本自动换行。当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现；
• Physical，让文本换行，当数据被提交处理时换行符也将被一起提交处理。

样例2：

　　 <br /><br /></p><p>样例2代码：</p><p><span class="code">＜TEXTAREA name="example2" cols="20" rows="2" wrap="PHYSICAL"＞＜/TEXTAREA＞<br /></span><b>　　</b></p><p><b>1.2.3 密码框</b><br /><br />　　是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。<br /><br />　　代码格式：＜input type="password" name="..." size="..." maxlength="..."＞<br /><br />　　<b>属性解释：</b><br />　　type="password"定义密码框；<br />　　name属性定义密码框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；<br />　　size属性定义密码框的宽度，单位是单个字符宽度；<br />　　maxlength属性定义最多输入的字符数。 <br /><br /><b>样例3：</b> <input type="password" maxlength="15" name="example3" /> <br /><br />样例3代码：</p><p><span class="code">＜input type="password" name="example3" size="20" maxlength="15"＞<br /></span><br /><br /><b>1.2.4 隐藏域</b><br /><br />　　隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到<a href='http://www.jztop.com/systems/' target='_blank' class='infotextkey'>服务器</a>上。 <br /><br />　　代码格式：＜input type="hidden" name="..." value="..."＞<br /><br />　　<b>属性解释：</b><br />　　type="hidden"定义隐藏域；<br />　　name属性定义隐藏域的名称，要保证数据的准确采集，必须定义一个独一无二的名称；<br />　　value属性定义隐藏域的值<br />　　例如：＜input type="hidden" name="ExPws" value="dd"＞<br /><br /><br /><b>1.2.5 复选框<br /><br /></b>　　复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。<br /><br />　　代码格式：＜INPUT type="checkbox" name="..." value="..."＞<br /><br />　　<b>属性解释：</b><br />　　type="checkbox"定义复选框；<br />　　name属性定义复选框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；<br />　　value属性定义复选框的值<br /><br /><b>样例4：</b> <input type="checkbox" name="yesky" /> yesky.com <input type="checkbox" name="Chinabyte" /> Chinabyte.com<br /><br />样例4代码： <br />　　<span class="code">＜input type="checkbox" name="yesky" value="09"＞yesky.com <br />　　＜input type="checkbox" name="Chinabyte" value="08"＞Chinabyte.com</span><br /></span /><br /><b>1.2.6 单选框</b><br /><br />　　当需要访问者在待选项中选择唯一的答案时，就需要用到单选框了。<br /><br />　　代码格式：＜input type="radio" name="..." value="..."＞<br /><br />　　<b>属性解释：</b><br />　　type="radio"定义单选框；<br />　　name属性定义单选框的名称，要保证数据的准确采集，单选框都是以组为单位使用的，在同一组中的单选项都必须用同一个名称；<br />　　value属性定义单选框的值，在同一组中，它们的域值必须是不同的。<br /><br />　<b>样例5：</b> <input type="radio" name="myFavor" /> yesky.com <input type="radio" name="myFavor" /> Chinabyte.com<br /><br />样例5代码： <br />　　<span class="code">＜input type="radio" name="myFavor" value="1"＞yesky.com <br />　　＜input type="radio" name="myFavor" value="2"＞Chinabyte.com<br /></span><br /><br /><b>1.2.7 文件上传框</b> <br /><br />　　有时候，需要用户上传自己的文件，文件上传框看上去和其它文本域差不多，只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。 <br />　　注意：在使用文件域以前，请先确定你的<a href='http://www.jztop.com/systems/' target='_blank' class='infotextkey'>服务器</a>是否允许匿名上传文件。表单标签中必须设置ENCTYPE="multipart/form-data"来确保文件被正确编码；另外，表单的传送方式必须设置成POST。<br /><br />　　代码格式：＜input type="file" name="..." size="15" maxlength="100"＞<br /><br />　　<b>属性解释：</b><br />　　type="file"定义文件上传框；<br />　　name属性定义文件上传框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；<br />　　size属性定义文件上传框的宽度，单位是单个字符宽度；<br />　　maxlength属性定义最多输入的字符数。 <br /><br />　<b>样例6：</b> <input type="file" maxlength="100" size="15" name="myfile" /> <br /><br />样例6代码：</p><p><span class="code">＜input type="file" name="myfile" size="15" maxlength="100"＞<br /></span><br /><br /><b>1.2.8 下拉选择框<br /><br /></b>　　下拉选择框允许你在一个有限的空间设置多种选项。<br /><br />　　代码格式：<br />　　＜select name="..." size="..." multiple＞<br />　　＜option value="..." selected＞...＜/option＞<br />　　...<br />　　＜/select＞<br /><br />　　<b>属性解释：</b><br />　　size属性定义下拉选择框的行数；<br />　　name属性定义下拉选择框的名称；<br />　　multiple属性表示可以多选，如果不设置本属性，那么只能单选；<br />　　value属性定义选择项的值；<br />　　selected属性表示默认已经选择本选项。<br /><br />　<b>样例7： </b><select size="1" name="mySel"> <option value="1">yesky.com</option> <option value="d2">chinabyte.com</option></select> <br /><br />样例7代码： <br />　　<span class="code">＜select name="mySel" size="1"＞<br />　　＜option value="1" selected＞yesky.com＜/option＞<br />　　＜option value="d2"＞chinabyte.com＜/option＞<br />　　＜/select＞<br /></span><br />　<b>样例8：</b><br />　　 <select multiple="true" size="3" name="mySelt"> <option value="1">yesky.com</option> <option value="d2">chinabyte.com</option> <option value="3">internet.com</option></select> 按Ctrl可以多选<br /><br />样例8代码： <br />　　<span class="code">＜select name="mySelt" size="3" multiple＞<br />　　＜option value="1" selected＞yesky.com＜/option＞<br />　　＜option value="d2"＞chinabyte.com＜/option＞<br />　　＜option value="3"＞internet.com＜/option＞<br />　　＜/select＞<br /></span><br /><b>1.3 表单按钮</b><br /><br />　　表单按钮控制表单的运作。<br /><br /><b>1.3.1 提交按钮<br /><br /></b>　　提交按钮用来将输入的信息提交到<a href='http://www.jztop.com/systems/' target='_blank' class='infotextkey'>服务器</a>。<br /><br />　　代码格式：＜input type="submit" name="..." value="..."＞<br /><br />　　<b>属性解释：</b><br />　　type="submit"定义提交按钮；<br />　　name属性定义提交按钮的名称；<br />　　value属性定义按钮的显示文字；<br /><br />　<b>样例9：</b> <input type="submit" name="mySent" /> <br /><br />样例9代码：</p><p><span class="code">＜input type="submit" name="mySent" value="发送"＞<b> </b><br /></span><br /><b /></p><p><b>1.3.2 复位按钮</b><br /><br />　　复位按钮用来重置表单。<br /><br />　　代码格式：＜input type="reset" name="..." value="..."＞<br /><br />　　<b>属性解释：</b><br />　　type="reset"定义复位按钮；<br />　　name属性定义复位按钮的名称；<br />　　value属性定义按钮的显示文字；<br /><br />　<b>样例10：</b> <input type="reset" name="myCancle" /> <br /></p><p>样例10代码：</p><p><span class="code">＜input type="reset" name="myCancle" value="取消"＞<br /></span><br /></p><b /><p><b>1.3.3 一般按钮</b><br /><br />　　一般按钮用来控制其他定义了处理脚本的处理工作。<br /><br />　　代码格式：＜input type="button" name="..." value="..." onClick="..."＞<br /><br />　　<b>属性解释：</b><br />　　type="button"定义一般按钮；<br />　　name属性定义一般按钮的名称；<br />　　value属性定义按钮的显示文字；<br />　　onClick属性，也可以是其它的事件，通过指定脚本函数来定义按钮的行为；<br /><br /><b>样例11：</b> <input onclick="function anonymous() { alert('it is a button') }" type="button" name="myB" /> <br /></p><p>样例11代码：<br />　　<span class="code">＜input type="button" name="myB" value="保存" onClick="javascript:alert('it is a button')"＞</span></p></div><span id="codea"></span> <div class="otlink"> <!-- 相关链接 --> <h5>相关文章</h5> <ul class="list"> 无相关信息 </ul> <div align="right" class="ft14">【<a href="http://www.jztop.com/e/pl?classid=98&id=20833">评论</a>】【<a href='#fav' onClick='window.external.AddFavorite(location.href, document.title);'>收藏本文</a>】【<a href="/e/DoPrint?classid=98&id=20833" target="_blank">打印</a>】【<a href="javascript:window.close()">关闭</a>】</div> <p class="next">上一篇文章：<a href='http://www.jztop.com/web/css/2006-06-15/20832.html'>JS实例：用 或 || 来兼容FireFox</a><br />下一篇文章：<a href='http://www.jztop.com/web/css/2006-06-15/20836.html'>用tabIndex轻松实现网页导航</a></p> <div class="ld"></div> <!-- 评论开始 --> <div class="endCommendNum"> <div class="title"><a href="http://www.jztop.com/e/pl?classid=classid=98&id=20833"><img src="/images/end_p1.gif" alt="讨论区" width="85" height="34" border="0" /></a></div> <div class="pic"> <a href="http://www.jztop.com/e/pl?classid=98&id=20833"><img src="/images/end_details.gif" alt="查看" width="71" height="19" border="0" /></a> </div> <div class="text"> <a href="http://www.jztop.com/e/pl?classid=98&id=20833">已有 <span id="pinglun" class="f_red">0</span> 位对此新闻感兴趣的网友发表了看法</a> </div> </div> <form name=saypl method=post action="http://www.jztop.com/e/enews/index.php" onsubmit="return CheckPl(document.saypl)" style="margin:0px;padding:0px;"> <div class="textBox"> <textarea name="saytext" id="saytext">