input submit、button和回车键提交数据详解

问说网 · 发布于 2017-04-13 · 字数11593 · 浏览 878 · 评论 0

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

<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,这时它只是一个按钮,不会引发表单提交。

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

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

如果你在做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>
本文系作者 问说网 授权问说网发表,并经问说网编辑,转载请注明出处和 本文链接

相关文章

  • 2016-07-15Intel Tick-Tock策略简介
  • 2016-09-24紫色背景扁平化iPhone5手机样机素材
  • 2016-10-03Blogify简约扁平化博客主题PSD模板
  • 2016-10-21多彩好看的淘宝销售标签箭头EPS素材
  • 2016-12-26恒创主机2017跨年盛典 主机/云服务器/独立服务器买就送
  • 2017-02-17问说网站长分享提升WordPress访问速度优化
  • 2017-04-01Wordpress固定链接伪静态的设置方法
  • 2017-04-04java中的Runable和Thread
  • 发布评论

    为您推荐

    多彩好看的淘宝销售标签箭头EPS素材
    问说网 · 发布于 2016-10-21

    多彩好看的淘宝销售标签箭头EPS素材

    恒创主机2017跨年盛典 主机/云服务器/独立服务器买就送
    问说网 · 发布于 2016-12-26

    恒创主机2017跨年盛典 主机/云服务器/独立服务器买就送

    恒创这次跨年促销,活动力度大,活动产品多。国内/香港/韩国/美国所有节点,新购/续费多重福利,满390元送小米VR眼镜。还可以免费抽奖,蓝牙耳机,小米充电宝等。

    问说网 · 发布于 2017-02-17

    问说网站长分享提升WordPress访问速度优化

    问说网创建也有5年了,最开始并不是使用的WordPress,是使用国内的DedeCMS开源程序,中间被黑客入侵了就换成了WordPress一直用到现在,随着文章…

    问说网 · 发布于 2017-04-01

    WordPress固定链接伪静态的设置方法

    今天,想着在我机器上测试一下wordpress,虽然之前也有这个开源的程序,可是一直没有安装呢,再加上最近一直忙于其他的工作,也忽略了不少,突然想建立一个属于自…

    问说网 · 发布于 2017-04-04

    java中的Runable和Thread

    在java中可有两种方式实现多线程,一种是继承Thread类,一种是实现Runnable接口;Thread类是在java.lang包中定义的。一个类只要继承了T…

    问说网 · 发布于 2017-04-05

    解决mysql无法远程访问的问题

    问题描述 1.windows 2003 server 32bit+IIS+护卫神+安全狗+navicat 2.root@%已配置 3.干掉护卫神,安全狗,防火墙…

    问说网 · 发布于 2017-04-19

    ASP.NET MVC 4 中的JSON数据交互的方法

    前台Ajax请求很多时候需要从后台获取JSON格式数据,一般有以下方式: 拼接字符串 1 return Content("{\"id\":\"1\",\"nam…

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    问说网

    问说网分享与设计有关的文章素材界面和作品,提供设计教程、素材分享、界面欣赏、编程设计、设计书籍、设计师导航等内容,你可以在这里阅读、学习、分享、交流。

    13130 文章
    494 评论
    1968 人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 1958

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 1874

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 1898

    图片素材

    关注 图片素材

    文章 29463 · 浏览 1373

    高清图片

    关注 高清图片

    文章 26530 · 浏览 1581

    更多 推荐作者

    关注 秋天的孤寂

    文章 99 · 评论 0

    关注 走了留下什么

    文章 110 · 评论 0

    关注 莪很迷茫

    文章 97 · 评论 0

    关注 流浪的脚步

    文章 86 · 评论 0

    关注 凉城梦镜

    文章 79 · 评论 0

    关注 思念像咒语

    文章 102 · 评论 0

    顶部 反馈 评论 底部

    意见反馈

    感谢您对问说网的支持,提出您在使用过程中遇到的问题或宝贵建议,您的反馈对我们产品的完善有很大帮助。

    您的反馈我们已收到!

    感谢您提供的宝贵意见,我们会在1-2个工作日,通过您留下的联系方式将处理结果反馈给您!