Detailed description of data submitted by inputsubmit, button, and enter key

Recently, many forms have been used in the project. It is found that input, button, submit, and even the Enter key can all trigger form submission. The following describes their differences in use.

When the input value is 22222222, the url submitted later will be changed to localhost: 3980/input.html? Name = 222222
Some noteworthy details are as follows:

After type = submit is set, the input control changes to a button and the displayed text is its value. The default value is Submit.
The default value of form [method] Is GET. After submission, the GET method is used for page Jump.
The default value of input [type] is text, so the first input is displayed as text box.

Input is actually a button modified by the input control, which originated from the simple design of Web in the early stages. We can set the name to verify this point:

The submitted Url is changed to localhost: 3980/input.html? Name = 222222 & btn = submit

Note that the URL is /? Key = foo & btn = OK. The input control, which acts 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 somewhat unclear. In addition, the style is difficult to customize and cannot be used as a container for other labels. Therefore, we recommend that you do not use input as the form submission button.

Note: The type attribute of input can also be a button, which is only a button and does not trigger form submission.

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

If you are compatible with IE, remember that the default value of button [type] in IE is button, which means it is only a button and does not trigger 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 any HTML tag, and the style is easier to customize. This is one of the reasons why buttons are widely used in the Bootstrap document as an example.

However, the button will be messy. You can set name and value for the button. When a form is submitted, the value is submitted to the server as the form data. In IE, the content between the start and end tags of a button is submitted to the server as the value corresponding to the name. Button and input are similar. You can also set type = reset for the button. clicking the button will reset the form (which is quite useful ). W3school provides the following example:

We recommend that you use a button as the interaction button to submit the form. In addition, set type = submit to be compatible with IE.

Enter key submission form

The Enter key can be used to submit a form! However, you may have noticed that not all forms can be submitted using 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 shocould accept Enter in that field as a request to submit the form.

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

A single row refers to text rather than textarea. It is obviously unacceptable to press enter to submit a form in textarea. In practice, you can use Enter to submit multiple single rows of input, such as the logon page.

4. Prevent form submission

Blocking form submission is also a common topic and is usually used for form verification on the client side. 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 committing. If you want to call a method to determine whether to block submission, remember to return the return value of the method here:

For more details about how to submit input submit, button, and enter keys, please follow the PHP Chinese website!