input、buttom的type为submit的区别
总结:input和button 标签都差不多,type=submit时都会被提交,type=“button” 是就是单纯的按钮,不会提交数据!只不过button是一个容器空间,可以容纳其他标签,input则不可以
1.input[type=submit]
我们直接来看例子:
代码如下:
<form><input name="name"><input type="submit" value="提交">
</form>
其中点击按钮后的url变为?name=222222222。
其中有些值得注意的细节:
设置type=submit后,输入控件会变成一个按钮,显示的文字为其value值,默认值是Submit。
form[method]默认值为GET,所以提交后会使用GET方式进行页面跳转。
input[type]默认值为text,所以第一个input显示为文本框。
input其实是一个由输入控件改装过来的按钮,这源于Web早期的简陋设计。我们给它设置name便可以验证这一点:
<input name='btn' value='提交' type='submit'>
提交后的结果为:
注意其中的URL为/?key=foo&btn=ok。作为按钮的input控件同时被当做一个表单输入提交给了服务器。 它到底是交互控件还是数据控件呢?定位是有些不清晰。再加上它的样式难以定制、不可作为其他标签的容器, 所以建议不要用input作为表单提交按钮。
注意:input的type属性还可以是button,这时它只是一个按钮,不会引发表单提交。
2.button[type=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。
3.回车键提交表单
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>
input、buttom的type为submit的区别相关推荐
- js submit onsubmit区别
submit()和onsubmit()的区别 表单提交前验证的问题,如果用submit类型的按钮提交的时候是会正常激发onsubmit事件的. 而用一个普通的button按钮代替 submit按钮, ...
- button 和 submit 的区别
表单提交中button和submit的区别 submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和button,二者都以按钮的形式展现,看起来都是按钮 ...
- 【input 标签的 type 属性详解】
input 标签的 type 属性详解 1. input 输入标签的 type 属性 1.1 input 标签的 type类型 属性的常用属性值 ⑴ 单行文本框: type="text&qu ...
- 解决Undefined function or method 'vgg_kmiter' for input arguments of type 'double'.
Undefined function or method 'vgg_kmiter' for input arguments of type 'double'. Error in ==> vgg_ ...
- php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
if(isset($_POST['submit'])) 它的意思是不是判断是否配置了$_POST['submit'] 这个变量呢?如果有这个变量 在执行其它代码 应该这样用if(isset($_POS ...
- python中dtype什么意思_浅谈python 中的 type(), dtype(), astype()的区别
如下所示: 函数 说明 type() 返回数据结构类型(list.dict.numpy.ndarray 等) dtype() 返回数据元素的数据类型(int.float等) 备注:1)由于 list. ...
- Undefined function 'adb' for input arguments of type 'double'.
错误原因:No.1 在调用函数时,应该确保函数文件在matlab当前目录下,不然会报错: Undefined function 'adb' for input arguments of type 'd ...
- Undefined function 'conv2' for input arguments of type 'double' and attributes 'full 3d complex'.
matlab提示错误:Undefined function 'conv2' for input arguments of type 'double' and attributes 'full 3d c ...
- js/jquery 获取本地文件的文件路劲 获取input框中type=‘file’ 中的文件路径(转载)...
原文:http://blog.csdn.net/niyingxunzong/article/details/16989947 js/jquery 获取本地文件的文件路劲 获取input框中type=' ...
最新文章
- 特征匹配--GMS: Grid-based Motion Statistics for Fast, Ultra-robust Feature Correspondence
- JavaScript 正则表达式相关理解
- Java属性中指定Json的属性名称(序列化和反序列化)
- Java集合框架HashMap和ConcurrentHashMap实现分析
- 同事发来的文件是个html,逮到一个疑是感染html,htm,网页文件的木马
- 做数据迁移差点累死的程序员有话要说----数据迁移经验分享
- 萨达萨达发神鼎飞丹砂
- lightgbm可视化后的threshold和leaf_value是什么意思?
- C#往图片上面添加文字
- bomb和mysql_Bigger Bomb
- 介绍一个开源博客项目并部署到Nginx服务器
- 软件项目接单渠道丨软件公司项目接单平台
- 112-RTKLIB中关于dcb文件读取的问题
- 主板上的内存插槽颜色到底代表了什么意思?
- 数据中心基础设施运维——设备维护
- 华为2020实习生招聘机试题
- Minecraft 1.16.5 生化8 模组 1.8版本 版本同步+支持服务器联机
- 不惧新冠疫情 DDN公司销售收入逆势增长
- android studio按坐标布局,Android studio一个手势锁的界面布局
- 为什么要创建对象(实例化)?
热门文章
- dom相关的api操作
- 初学者基础教学篇一——握拍
- MATLAB2017a点击图标后闪退的解决方法
- Python: PyCharm 启动后总是不停的 updating indexes...
- 行转列方法 及 pivot函数使用问题
- unity vr自然灾害安全教育方案——vr地震安全(户外/家庭/校园)
- 厦门vr虚拟现实,工地安全教育VR体验,院校vr虚拟仿真实训系统,3d虚拟仿真交互系统开发
- 我在异界从java开始
- 计算机组成原理基础知识
- ssm欢欢宠物医院管理系统的设计与实现 毕业设计-附源码171734