Analyze the differences between input submit, button and enter key to submit data

Recently, a lot of form submissions have been used in projects, and I found that input, button, submit and even the enter key can trigger form submission. The following will tell you about the differences in their use.

<form>
  <input name="name">
  <input type="submit" value="提交">
</form>

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

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:

<input name='btn' value='Submit' type='submit'>

The URL after submission will change to 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:

<form>
 <input name=&#39;key&#39;>
 <button>确定</button>
</form>

If you are doing IE browser compatibility, please remember button[ The default value of 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:

<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>

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:

<form onsubmit="return false;">
 <input name=&#39;key&#39;>
 <input value=&#39;ok&#39; type=&#39;submit&#39;>
</form>

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

<form onsubmit="return false;">
 <input name=&#39;key&#39;>
 <input value=&#39;ok&#39; type=&#39;submit&#39;>
</form>

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