form和enter键的那些事

form是什么

HTML form 是用来收集用户输入的。<form>元素定义了一个form。一个form通常包含一些input元素和提交按钮。input有各种类型,如text,radio,checkbox等等。提交按钮不是必须的,但最好有一个,后面会说明为什么。form还有个action属性,用来指定表单提交的动作,就是web服务器处理程序的URL。
下面是个简单的例子:

<form action="action_page.php">
    <div>First name:<input type="text" name="firstname" value="Mickey"></div>
    <div>Last name: <input type="text" name="lastname" value="Mouse"></div>
    <input type="submit" value="Submit">
</form>

隐式提交

当用户填完表单后,最希望的便捷操作是什么?就是直接按enter键提交数据。这就是所谓的隐式提交,form就有这个机制,前提是form包含submit按钮或者只包含一个输入框。除了前面的例子,下面这种情况也可以隐式提交:

<form action="action_page.php">
    <label for="name">Name:</label> 
    <input type="text" name="name" id="name">
</form>

多个submit按钮怎么处理

如果form包含多个submit按钮,enter键只会触发第一个。submit按钮是<button>元素或者<input type="submit">。(IE7有个bug,button默认不是type="submit",所以要显式加上这个类型)。

现在我们可能不再用这种原始的方式提交数据,而是用AJAX。不过我们还是可以利用form的特性,在它的submit事件里完成AJAX提交。
参考:

The Enter Key should Submit Forms, Stop Suppressing it

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本人做php的,最近发现JS真的是博大精深啊,比PHP难.在HTML中,表单是由form元素来表示的,但是在jav...
    linfree阅读 6,609评论 3 17
  • React中没有类似Angular那样的双向数据绑定,在做一些表单复杂的后台类页面时,监听、赋值、传递、校验时编码...
    tedyuen777阅读 13,295评论 1 23
  • 第一章 入门 基本功能:访问和操作 dom 元素,控制页面样式,对页面的事件处理,与ajax完美结合,有丰富的插件...
    X_Arts阅读 4,650评论 0 2
  • 今天想要讲的东西比较杂乱,自己理了好久的思路感觉一直找不到一条线串联起这些碎片化的知识。然后就想着那就先写写看吧,...
    Programmer客栈阅读 6,215评论 0 9
  • 一、家道 家庭角色不同,有不同的讲究之道。 男人无志,家道不兴。女人不柔,把财赶走。 女性性情应柔美如水,这样才会...
    duoduo_four阅读 3,720评论 1 0