轻松玩转花样表单

第 1 页 表单概括本专题从最普通的表单常识，到表单的高档运用，让你有一个比拟所有地看法，断定你在读完本专题此后，确定会对表单特殊熟习。一、表单概括表单，在网页中的效率不行轻视，重要控制数据搜集的功效，比方你不妨搜集考察者的名字和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：样例2代码：＜textarea name="example2" cols="20" rows="2" wrap="physical"＞＜/textarea＞1.2.3 暗号框是一种特出的文本域，用来输出暗号。当考察者输出笔墨时，笔墨会被对号或其它标记包办，而输出的笔墨会被湮没。代码方法：＜input type="password" name="..." size="..." maxlength="..."＞属性证明：type="password"设置暗号框；name属性设置暗号框的称呼，要保护数据的精确搜集，必需设置一个举世无双的称呼；size属性设置暗号框的宽窄，单元是单个字符宽窄；maxlength属性设置最多输出的字符数。 样例3： 样例3代码：＜input type="password" name="example3" size="20" maxlength="15"＞1.2.4 湮没域湮没域是用来搜集或发送消息的不看来元素，对于网页的考察者来说，湮没域是看不见的。当表单被提交时，湮没域就会将消息用你树立时设置的称呼和值发送给效劳器上。 代码方法：＜input type="hidden" name="..." value="..."＞属性证明：type="hidden"设置湮没域；name属性设置湮没域的称呼，要保护数据的精确搜集，必需设置一个举世无双的称呼；value属性设置湮没域的值比方：＜input type="hidden" name="expws" value="dd"＞1.2.5 复选框复选框承诺在待选项当选中一项之上的选项。每个复选框都是一个独力的元素，都必需有一个独一的称呼。代码方法：＜input type="checkbox" name="..." value="..."＞属性证明：type="checkbox"设置复选框；name属性设置复选框的称呼，要保护数据的精确搜集，必需设置一个举世无双的称呼；value属性设置复选框的值样例4： yesky.com chinabyte.com样例4代码： ＜input type="checkbox" name="yesky" value="09"＞yesky.com ＜input type="checkbox" name="chinabyte" value="08"＞chinabyte.com1.2.6 单选框当须要考察者在待选项中采用独一的谜底时，就须要用到单选框了。代码方法：＜input type="radio" name="..." value="..."＞属性证明：type="radio"设置单选框；name属性设置单选框的称呼，要保护数据的精确搜集，单选框都是以组为单元运用的，在同一组中的单选项都必需用同一个称呼；value属性设置单选框的值，在同一组中，它们的域值必需是各别的。样例5： yesky.com chinabyte.com样例5代码： ＜input type="radio" name="myfavor" value="1"＞yesky.com ＜input type="radio" name="myfavor" value="2"＞chinabyte.com1.2.7 文献上传框 有功夫，须要用户上传本人的文献，文献上传框看上去和其它文本域差不离，不过它还包括了一个欣赏按钮。考察者不妨经过输出须要上传的文献的路途大概点击欣赏按钮采用须要上传的文献。 提防：在运用文献域往日，请先决定你的效劳器能否承诺隐姓埋名上传文献。表单标签中必需树立enctype="multipart/form-data"来保证文献被精确源代码；其余，表单的传递办法必需树立成post。代码方法：＜input type="file" name="..." size="15" maxlength="100"＞属性证明：type="file"设置文献上传框；name属性设置文献上传框的称呼，要保护数据的精确搜集，必需设置一个举世无双的称呼；size属性设置文献上传框的宽窄，单元是单个字符宽窄；maxlength属性设置最多输出的字符数。 样例6： 样例6代码：＜input type="file" name="myfile" size="15" maxlength="100"＞1.2.8 下拉采用框下拉采用框承诺你在一个有限的空间树立多种选项。代码方法：＜select name="..." size="..." multiple＞＜option value="..." selected＞...＜/option＞...＜/select＞属性证明：size属性设置下拉采用框的行数；name属性设置下拉采用框的称呼；multiple属性表白不妨多选，即使不树立本属性，那么只能单选；value属性设置采用项的值；selected属性表白默许仍旧采用本选项。样例7： yesky.com chinabyte.com 样例7代码： ＜select name="mysel" size="1"＞＜option value="1" selected＞yesky.com＜/option＞＜option value="d2"＞chinabyte.com＜/option＞＜/select＞样例8： yesky.com chinabyte.com internet.com 按ctrl不妨多选样例8代码： ＜select name="myselt" size="3" multiple＞＜option value="1" selected＞yesky.com＜/option＞＜option value="d2"＞chinabyte.com＜/option＞＜option value="3"＞internet.com＜/option＞＜/select＞1.3 表单按钮表单按钮遏制表单的运作。1.3.1 提交按钮提交按钮用来将输出的消息提交到效劳器。代码方法：＜input type="submit" name="..." value="..."＞属性证明：type="submit"设置提交按钮；name属性设置提交按钮的称呼；value属性设置按钮的表露笔墨；样例9： 样例9代码：＜input type="submit" name="mysent" value="发送"＞ 1.3.2 复位按钮复位按钮用来重置表单。代码方法：＜input type="reset" name="..." value="..."＞属性证明：type="reset"设置复位按钮；name属性设置复位按钮的称呼；value属性设置按钮的表露笔墨；样例10： 样例10代码：＜input type="reset" name="mycancle" value="废除"＞1.3.3 普遍按钮普遍按钮用来遏制其余设置了处置剧本的处置处事。代码方法：＜input type="button" name="..." value="..." onclick="..."＞属性证明：type="button"设置普遍按钮；name属性设置普遍按钮的称呼；value属性设置按钮的表露笔墨；onclick属性，也不妨是其它的事变，经过指定剧本因变量来设置按钮的动作；样例11： 样例11代码：＜input type="button" name="myb" value="生存" onclick="javascript:alert('it is a button')"＞