闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧湱鈧懓瀚崳纾嬨亹閹烘垹鍊為悷婊冪箻瀵娊鏁冮崒娑氬幈濡炪値鍘介崹鍨濠靛鐓曟繛鍡楃箳缁犳娊鏌嶈閸撴瑧绮诲澶婄?闂侇剙鍗曢崶顒夋晬婵犲﹤鎳愰悞濂告煟鎼搭垳绉甸柛瀣╃劍缁傚秴饪伴崼鐔哄幐闂佸憡鍔戦崝宀勫焵椤掑倹鏆鐐茬箻閸╁嫰宕樿缁犳艾顪冮妶鍡楀闁稿﹥娲熷鎼佸箣濠€垹閰e畷鎯邦檪闂婎剦鍓熼弻鐔碱敊閻e本鍣板銈冨灪濡啫鐣烽悢鐓幬╅柕澶堝€曢ˉ姘舵煟閻斿摜鐭婄紒缁樺浮瀹曟岸骞掗幘鍓佺槇濠殿喗锕╅崜娑㈩敇濞差亝鈷戦柟绋垮閻撱儵鏌涘Ο鑽ょ煉鐎规洘鍨块獮妯肩磼濡粯鐝栭梻渚€鈧偛鑻晶鎾煙椤曗偓缁犳牠寮幘缁樺亹闁肩⒈鍓﹂崥瀣繆閻愵亜鈧牕螞娴h鍙忛柕鍫濐樈閺佸﹪鏌¢崶銉ョ仾闁抽攱甯掗湁闁挎繂鎳忛幉鍝ョ磼婢跺苯鍔嬪ǎ鍥э躬椤㈡洟濮€閳ュ厖娣梻浣筋嚃閸犳岸宕戦妶澶婃瀬闁告劦鍠栫壕鍏兼叏濡潡鍝洪柣鎿勭秮濮婄粯鎷呴崫銉ㄥ┑鈽嗗亜濞硷繝骞冮悙鐑樻櫇闁稿本绋戞禍妤呮⒑闂堟侗妲撮柡鍛矒閹繝鎮㈤崗鑲╁幐闂佹悶鍎弲娑欑濠婂牊鐓冪憸婊堝礈濞嗗骏鑰块梺顒€绉撮悞鍨亜閹哄秷鍏岄柛鐔哥叀閺岀喖宕欓妶鍡楊伓     濠电姷鏁告慨鐑藉极閸涘﹥鍙忛柣鎴f閺嬩線鏌涘☉姗堟敾闁告瑥绻橀弻锝夊閻樺樊妫岄梺杞扮閿曨亪寮婚垾鎰佸悑閹肩补鈧磭顔愰梻鍌氬€搁崑鍡涘垂闁秴桅闁告洦鍨伴崘鈧梺闈浤涢崨顖氬笌缂傚倸鍊峰ù鍥╃礄娴兼潙纾规繝闈涱儏閽冪喖鏌ㄥ┑鍡╂Ч闁哄懏鐓¢弻娑樷槈閸楃偞鐏嶉梺鍦厴娴滃爼骞冨Δ鍐╁枂闁告洦鍓涢ˇ銊╂⒑缂佹ɑ鎯堢紒缁樼箓椤曪絾绻濆顓炰簻闁荤偞绋堥埀顒€鍘栨竟鏇炩攽閻愭潙鐏︽い蹇庡嵆楠炲鏁冮埀顒傚閸ф鐓涢柛銉㈡櫅閺嬫梻绱掗悩鑽ょ暫闁哄瞼鍠撻埀顒佺⊕宀e潡骞婇崘顔界厽闊洤锕ュ▍濠囨煛瀹€瀣М妤犵偞岣块埀顒勬涧閹诧繝宕氬☉銏♀拺闁告繂瀚﹢浼存煟閳哄﹤鐏﹂柣娑卞櫍瀹曞爼顢楅埀顒傜矆閸岀偞鐓曟繝闈涘閸旀粓鏌¢崨顓滃仮婵﹦绮幏鍛存惞閻熸壆顐奸梻浣烘嚀閹诧繝骞冮崒鐐偓渚€寮介妸銉х獮婵犵數濮寸€涒晝绱炴惔鈾€鏀介柣鎰级閳绘洖霉濠婂嫮鐭掓鐐村灴閹虫粓鎮欓柅娑氱泿闂備浇顫夊畷妯衡枖濞戞瑧顩锋繝濠傚暊閺€浠嬫煃閳轰礁鏆為柕鍥ㄧ箖閹便劍绻濋崨顕呬哗闂佺懓寮堕幐鍐茬暦閻旂⒈鏁囬柣鏃偳归弲鎼佹⒑鐠囧弶鍞夋い顐㈩槸鐓ら柣鏂捐荡缂傛氨鎲搁弮鍫涒偓浣割潩鐠轰綍銊╂煥閺傚灝鈷旈柣锕€鐗撳娲箹閻愭彃濮岄梺鍛婃煥缁夋挳鍩㈠澶婎潊闁靛牆妫岄幏娲煟閻樺厖鑸柛鏂胯嫰閳诲秹骞囬悧鍫㈠幍闂佸憡鍨崐鏍偓姘炬嫹

45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 电脑教程 > 阅读资讯:input submitbuttonbutton和回车键提交数据的方法技巧

input submitbuttonbutton和回车键提交数据的方法技巧

2016-11-22 05:30:11 来源:www.45fan.com 【

input submitbuttonbutton和回车键提交数据的方法技巧

<form>
 <input name="name">
 <input type="submit" value="提交">
</form>

以这种方式提交,input 值为22222222时,后面递交的url 就会变为localhost:3980/input.html?name=222222

其中有些值得注意的细节:

设置type=submit后,输入控件会变成一个按钮,显示的文字为其value值,默认值是Submit。

form[method]默认值为GET,所以提交后会使用GET方式进行页面跳转。

input[type]默认值为text,所以第一个input显示为文本框。

input其实是一个由输入控件改装过来的按钮,这源于Web早期的简陋设计。我们给它设置name便可以验证这一点:

<input name='btn' value='提交' type='submit'>

提交后的Url就会变为localhost:3980/input.html?name=222222&btn=提交

注意其中的URL为/?key=foo&btn=ok。作为按钮的input控件同时被当做一个表单输入提交给了服务器。 它到底是交互控件还是数据控件呢?定位是有些不清晰。再加上它的样式难以定制、不可作为其他标签的容器, 所以建议不要用input作为表单提交按钮。

注意:input的type属性还可以是button,这时它只是一个按钮,不会引发表单提交。

2、button[tpe=submit]button的语义很明确,就是一个按钮不含数据,作用就是用户交互。但它也有type和value属性。 type的默认值是submit,所以点击一个button会引起表单提交:

<form>
 <input name='key'>
 <button>确定</button>
</form>

如果你在做IE浏览器的兼容,请记住button[type]在IE中的默认值是button,这意味着它只是一个按钮而不会引发表单提交。

另外,我们通过设置元素内容的方式来指定button的文字。这意味着button是一个容器控件, 其中可以包含任意的HTML标签,同时样式更容易定制。这也是为什么Bootstrap 文档中大量使用button作为示例的原因之一。

但是,button会很乱。button可以设置name和value。提交表单时,value会被作为表单数据提交给服务器。 在IE中,甚至会把button开始与结束标签之间的内容作为name对应的值提交给服务器。button和input的相似还不止于此,button也可以设置type=reset,此时点击按钮会导致表单被重置(这还挺有用的)。 w3school给出了如下的示例:

<form action="form_action.asp" method="get">
 First name: <input type="text" name="fname" />
 Last name: <input type="text" name="lname" />
 <button type="submit" value="Submit">Submit</button>
 <button type="reset" value="Reset">Reset</button>
</form>

对于button就不多说了,建议用button作为交互用的按钮,来提交表单。同时请注意设置type=submit来兼容IE。

回车键提交表单

Enter键是可以提交表单的!但是你可能已经注意到了,并非所有的表单都可以用Enter键来提交。来看HTML2.0 标准:

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

当表单中只有一个单行的文本输入控件时,用户代理应当接受回车键来提交表单。

“单行”指的是type为text而非textarea,显然在textarea中回车提交表单是怎样的难以接受。 其实在实践中,有多个单行的input也可以用Enter提交,比如登录页面。

4.阻止表单提交

阻止表单提交也是一个常见的话题,通常用于客户端的表单验证。通用的办法是设置onsubmit:

<form onsubmit="return false;">
 <input name='key'>
 <input value='ok' type='submit'>
</form>

只需要在onsubmit的一系列语句最后返回false,便可以阻止它提交。 如果你希望调用一个方法来决定是否阻止提交,记得在此处返回方法的返回值:

<form onsubmit="return false;">
 <input name='key'>
 <input value='ok' type='submit'>
</form>

本文地址:http://www.45fan.com/dnjc/83753.html
Tags: input Button submit
编辑:路饭网
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部