Input submit, button and enter details

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

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

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

Input is actually a button modified by the input control, which stems from the early web design. We can verify this by setting the name for it:

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

The URL after submission becomes localhost:3980/input.html?name=222222&btn= commit

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? Positioning is somewhat unclear. In addition to its style is difficult to customize, not as a container for other labels, it is recommended not to use input as the form Submit button.

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

2, Button[tpe=submit]button semantics is very clear, is a button does not contain data, the role is user interaction. But it also has the type and Value property. The default value of type is submit, so clicking on a button causes the form to be submitted:

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

If you are doing Internet Explorer compatibility, remember Button[type] The default value in IE is button, which means it is just a button and does not cause form submission.

In addition, we specify the text of the button by setting the element's content. 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 reason why a large number of buttons are used as examples in bootstrap documents.

However, the button can be messy. button to set name and value. When a form is submitted, value is submitted to the server as the form data. In IE, the contents of the button start and end tag are even submitted to the server as the value corresponding to the name. button and input are similar to this, and button can also set Type=reset, where clicking the button causes the form to reset (which is useful). W3school gives the following example:

<form action= "form_action.asp" method= "get" > First name: <input type= "text" name= "fname"/> Last Name: <in Put 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 interactive buttons to submit the form. Also note that the Type=submit is set to be compatible with IE.

Return Enter Submit Form

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

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

When there is only one single line 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 of text instead of textarea, and it is obvious how difficult it is to enter the textarea to submit the form. In fact, in practice, there are multiple single-line input can also be submitted with enter, such as the login page.

4. Block form submission

Blocking form submissions is also a common topic that is commonly used for client-side form validation. The common approach is to set onsubmit:

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

It is only necessary to return false at the end of a series of statements in onsubmit to prevent it from being committed. If you want to call a method to decide whether to block commits, remember to return the method's return value here:

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

The above is the whole content, thanks to the support of topic.alibabacloud.com

