Input submit, button and enter key submission data detailed _ Basic tutorial

<form>
  <input name= "name" >
  <input type= "Submit" value= "submitted" >
</form>

Submitted in this manner, when the input value is 22222222, the URL submitted later becomes localhost:3980/input.html?name=222222
Some of the notable details include:

When you set the Type=submit, the input control becomes a button with the text displayed as its value and the default value is submit.
Form[method] The default is get, so the page jump is done using the gets method after submission.
Input[type] The default value is text, so the first input is displayed as a text box.

Input is actually a button that is modified by an input control, which is a result of the web's early primitive design. We can verify this by setting name to it:

<input name='btn' value='提交' type='submit'>

The URL that is submitted becomes localhost:3980/input.html?name=222222&btn= committed

Note that the URL is/?key=foo&btn=ok. The input control as a button is submitted to the server as a form input. Is it an interactive control or a data control? Positioning is a bit unclear. Plus its style is difficult to customize, not as a container for other labels, so it is recommended not to use input as a form submission button.

Note: The type attribute of input can also be a button, at which point it is just a pushbutton and does not raise the form submission.

2, Button button[tpe=submit] 's semantics is very clear, is a button does not contain data, the role is the user interaction. But it also has the type and value properties. The default value for type is submit, so clicking a button causes the form to submit:

<form>
 <input name= ' key ' >
 <button> OK </button>
</form>

If you are making compatibility with IE, remember that the default value of Button[type in IE is button, which means it is just a button and does not raise the form submission.

In addition, we specify the text of the button by setting the content of the element. This means that the button is a container control that can contain arbitrary HTML tags, while the style is easier to customize. This is one of the reasons why the button is used extensively in bootstrap documents.

But the button would be messy. button to set name and value. When submitting a form, value is submitted to the server as the form data. In IE, the value of the button beginning with the end tag is even submitted to the server as name. button and input are more similar than this, button can also set Type=reset, the click button will cause the form to reset (which is useful). W3school gives the following example:

<form action= "form_action.asp" method= "get" >
 name: <input type= "text" name= "fname"/>
 Name: <input type= "text" name= "lname"/> <button type=
 "Submit" value= "Submit" >Submit</button>
 <button type= "reset" value= "reset" >Reset</button>
</form>

For the button is not much to say, it is recommended to use the button as an interactive buttons to submit the form. Also note that you set up Type=submit to be compatible with IE.

Enter key Submit Form

The ENTER key is available to submit the form! But you may have noticed that not all forms can be submitted with the ENTER key. See HTML2.0 Standard:

When there are only one single-line text input field in a form, the user agent should accept Enter into that field as a Reque St to submit the form.

When there is only one single row of text input controls in the form, the user agent should accept the ENTER key to submit the form.

"Single line" refers to the type is text instead of textarea, obviously in the textarea carriage return submission form is difficult to accept. In fact, in practice, there are several single line of input can also be submitted with Enter, such as login page.

4. Block form submission

Blocking form submission is also a common topic, often used for client form validation. The common approach is to set up onsubmit:

<form onsubmit= "return false;" >
 <input name= ' key ' >
 <input value= ' OK ' type= ' submit ' >
</form>

You can prevent it from committing by simply returning false to a series of statements in OnSubmit. If you want 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= ' key ' >
 <input value= ' OK ' type= ' submit ' >
</form>