search
HomeWeb Front-endHTML TutorialExample analysis of the difference between input, submit, button and enter key to submit data

This article will use examples to analyze the differences between input, submit, button and the Enter key to submit data. Recently, a lot of form submissions have been used in projects, and it is found that input, button, submit and even the Enter key can trigger form submission. The following will be explained separately. Let's talk about the differences between them in use, I hope it can help everyone.


     

Submit in this way, when the input value is 22222222, the url submitted later will become localhost:3980/input.html?name=222222
There are some noteworthy details:

After setting type=submit, the input control will become a button, and the displayed text will be its value. The default value is Submit.
The default value of form[method] is GET, so the GET method will be used to jump to the page after submission.
The default value of input[type] is text, so the first input is displayed as a text box.

Input is actually a button modified from an input control, which originated from the crude design of the early days of the Web. We can verify this by setting a name to it:


Submit The resulting Url will become localhost:3980/input.html?name=222222&btn=submit

Note that the URL is /?key=foo&btn=ok. The input control as a button is also submitted to the server as a form input. Is it an interactive control or a data control? The positioning is a bit unclear. In addition, its style is difficult to customize and cannot be used as a container for other tags, so it is recommended not to use input as a form submission button.

Note: The type attribute of input can also be button. At this time, it is just a button and will not trigger form submission.

2. button[tpe=submit]The semantics of button are very clear, that is, a button does not contain data, and its function is user interaction. But it also has type and value attributes. The default value of type is submit, so clicking a button will cause the form to be submitted:


   

If you are doing IE browser compatibility, please remember that the default value of button[type] in IE is button, which means it is just a button and does not trigger a form submission.

In addition, we specify the text of the button by setting the element content. This means that the button is a container control, which can contain arbitrary HTML tags, and the style is easier to customize. This is one of the reasons why buttons are used extensively as examples in the Bootstrap documentation.

However, buttons will be messy. Button can set name and value. When the form is submitted, the value will be submitted to the server as form data. In IE, the content between the button's start and end tags will even be submitted to the server as the value corresponding to the name. The similarities between button and input don't stop there. Button can also be set with type=reset. Clicking the button will cause the form to be reset (this is quite useful). w3school gives the following example:


 First name:   Last name:     

I won’t say much about buttons. It is recommended to use buttons as interactive buttons to submit forms. Please also pay attention to setting type=submit to be compatible with IE.

Enter key to submit the form

The Enter key can submit the form! But you may have noticed that not all forms can be submitted with the Enter key. Let’s look at the HTML2.0 standard:

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.

When there is only a single-line text input control in the form, the user agent should accept the Enter key to submit the form.

"Single line" refers to the type being text rather than textarea. Obviously it is unacceptable to press enter to submit the form in textarea. In fact, in practice, multiple single-line inputs can also be submitted using Enter, such as the login page.

4. Preventing form submission

Preventing form submission is also a common topic and is usually used for client-side form validation. The general method is to set onsubmit:


   

You only need to return false at the end of a series of onsubmit statements to prevent it from submitting. If you want to call a method to decide whether to prevent submission, remember to return the return value of the method here:


   

Related recommendations:

form form submission data problem

Questions about submitting data

Example of how to control input format in html

The above is the detailed content of Example analysis of the difference between input, submit, button and enter key to submit data. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
html怎么设置button大小及颜色html怎么设置button大小及颜色Mar 05, 2021 pm 05:16 PM

在html中,可以使用width和height属性来设置button元素的大小,使用background-color属性来设置button元素的颜色,具体语法为“button{width:宽度值;height:高度值;background-color: 颜色值;}”。

vue3怎么封装input组件和统一表单数据vue3怎么封装input组件和统一表单数据May 12, 2023 pm 03:58 PM

准备工作用vuecreateexample创建项目,参数大概如下:用原生input原生的input,主要是value和change,数据在change的时候需要同步。App.tsx如下:import{ref}from'vue';exportdefault{setup(){//username就是数据constusername=ref('张三');//输入框变化的时候,同步数据constonInput=;return()=>({

laravel input隐藏域怎么实现laravel input隐藏域怎么实现Dec 12, 2022 am 10:07 AM

laravel input隐藏域的实现方法:1、找到并打开Blade模板文件;2、在Blade模板中使用method_field方法来创建隐藏域,其创建语法是“{{ method_field('DELETE') }}”。

点击input框没有光标怎么办点击input框没有光标怎么办Nov 24, 2023 am 09:44 AM

点击input框没有光标的解决办法:1、确认输入框焦点;2、清除浏览器缓存;3、更新浏览器;4、使用JavaScript;​5、检查硬件设备;6、检查输入框属性;7、调试JavaScript代码;8、检查页面其他元素;9、考虑浏览器兼容性。

Vue文档中的input框绑定事件详解Vue文档中的input框绑定事件详解Jun 21, 2023 am 08:12 AM

Vue.js是一种轻量级的JavaScript框架,具有易用、高效和灵活的特点,是目前广受欢迎的前端框架之一。在Vue.js中,input框绑定事件是一个十分常见的需求,本文将详细介绍Vue文档中的input框绑定事件。一、基础概念在Vue.js中,input框绑定事件指的是将输入框的值绑定到Vue实例的数据对象中,从而实现输入和响应的双向绑定。在Vue.j

Vue文档中的input框回车事件和验证函数使用方法Vue文档中的input框回车事件和验证函数使用方法Jun 20, 2023 am 09:13 AM

Vue是一个流行的JavaScript前端框架,它的核心是响应式数据绑定和组件系统。在Vue的应用程序中,input框是最常用的UI元素之一。在用户输入文本时,我们希望可以监听回车事件,并且在提交前对输入内容进行验证。本篇文章将介绍Vue文档中的input框回车事件和验证函数使用方法。一、Vue中input框回车事件在Vue中监听input框的回车事件非常简

jquery中input是什么元素jquery中input是什么元素Jun 06, 2023 pm 02:18 PM

jquery中input是选择器选取表单元素,其作用是:1、input用于搜集用户信息,根据不同的type属性值,输入字段拥有很多种形式,输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等;2、input标签可定义输入域的开始,在其中用户可输入数据;3、使用input标签来进行定义,其中包括文本字段、多选列表、可单击的图像和提交按钮等。

html5 input 禁止输入怎么实现html5 input 禁止输入怎么实现Feb 03, 2023 am 10:02 AM

html5 input禁止输入的实现方法:1、通过readonly规定输入字段为只读可复制;2、通过disabled实现被禁用的input元素可复制,但不能接收焦点;3、通过控制input的max length为0实现;4、通过“οnfοcus="this.blur();"”实现不能输入文本即可。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),