表单提交中的input、button、submit的区别(转来学习)

最近项目中用了很多的表单提交,发现input、button、submit甚至回车键都可以引发表单提交,下面将分别验证他们在使用中的区别。

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作为表单提交按钮

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

2.button[type=submit]

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

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

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

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

  但是,button会很乱。button可以设置namevalue。提交表单时,value会被作为表单数据提交给服务器。 在IE中,甚至会把button开始与结束标签之间的内容作为name对应的值提交给服务器。buttoninput的相似还不止于此,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.

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

“单行”指的是typetext而非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>
时间: 2024-08-05 05:42:37

表单提交中的input、button、submit的区别(转来学习)的相关文章

表单提交中get和post方式的区别

表单提交中get和post方式的区别有5点 1.get是从服务器上获取数据,post是向服务器传送数据. 2.get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到.post是通过HTTPpost机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址.用户看不到这个过程. 3.对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Requ

表单提交中的input、button、submit的区别

参考博文:http://www.cnblogs.com/shytong/p/5087147.html 设置type=submit后,输入控件会变成一个按钮,显示的文字为其value值,默认值是Submit. form[method]默认值为GET,所以提交后会使用GET方式进行页面跳转. input[type]默认值为text,所以第一个input显示为文本框. 我这里只想说一点就是button默认的type类型是submit. 如果想进行表单校验的话,type类型可以写成button,但是这个

表单提交中的重复问题(表单令牌验证)

在日常的表单提交中,如果由于网络或其他原因,很容易出现同一个表单提交多次,此时可以使用表单令牌验证 在提交的表单里,增加多一个隐藏数据,token,该token由后台脚本生成(如:php使用md5(rand(1,99999999))) 然后将生成的值保持至session或文本中,在表单提交中,对该token进行准确性认证,以确定表单提交的唯一性

详解JavaScript中的Url编码/解码,表单提交中网址编码

本文主要针对URI编解码的相关问题做了介绍,对Url编码中哪些字符需要编码.为什么需要编码做了详细的说明,并对比分析了Javascript 中和 编解码相关的几对函数escape / unescape,encodeURI / decodeURI和 encodeURIComponent / decodeURIComponent. 预备知识 foo://example.com:8042/over/there?name=ferret#nose \_/ \______________/ \_______

关于form表单提交ajaxForm和ajaxSubmit的用法与区别

前几天在学习form表单提交时看到这两种方法,这两种方法都是实现form的ajax提交的方法,看了很多资料还是不太明白其用法和区别,最后直接自己写demo,很快就理解,所以说实操是学习的最快捷直接的途径.好了,下面回到正题: 在使用这两种方法之前,首先需要安装form.js的插件,下载就不放了,网上一搜就有: <script src="/Tool/HtmlPage/S45/js/jquery-form.js"></script> 一.首先说用法,ajaxForm

锋利的jQuery-6--序列化函数serialize()和serializeArray()在表单提交中的作用

在通过jQuery ajax提交表单的时候,通常用下边的方法获取表单内容. var form = 'add-account-form'; //表单id $('#' + form).submit(function() { var account = { 'user_id':'', 'partner_name':'', 'site_url': '','product_url':'' }; for(var i in account) { if (account.hasOwnProperty(i)) {

extract函数在表单提交中提供的方便之处

extract - 从数组中将变量导入到当前的符号表 在form.html中, <!DOCTYPE html> <html> <head> <title>extract</title> <meta charset="utf-8"> </head> <body> <div> <form action="action.php" method="po

html_表单form中的input类型大集合

学到后面发现前面的内容都不是很巩固了. 知道自己的不足之后,最近在复习一些学过的知识. 做了一个表单form的input的属性type的大部分功能,当然还有没有涉及到的,比如range,time,month,number等等等等 贴上代码 <div class="content"> <h2>商品信息</h2> <form method="post" class="goods_form"> <d

工作总结 表单提交中 Input 设置 disabled readonly

input框里面添加disabled属性之后,该内容就无法向上提交  需要的时候也可以再移除disabled readonly这个属性来禁止用户修改, 可以正常提交. Hiddent 隐藏  也可以正常提交