Type = text submission in form input

Sometimes we want to press enter in the input element to submit the form, but sometimes we do not want. For example, you want to directly press the Enter key to submit the form immediately after entering the keywords. In some complex forms, you may need to avoid incorrect input keys that trigger the form submission when the form is not completed.

To control these behaviors, you do not need to use JavaScript. the browser has already done these operations for us. The following are some examples:

1. By default, a text box is submitted, regardless of whether the button type is submit or button:

<Form action = "http://www.bkjia.com"> <input type = "text"> <input type = "button" value = "Submit"> </form>

2. How can I not submit a text box by adding a hidden text box:

<Form action = "http://www.bkjia.com"> <input type = "text"> <input type = "text" style = "display: none "> <input type =" button "value =" Submit "> </form>

3. As long as a button with the type of submit exists, one text box or multiple text boxes are submitted:

<Form action = "http://www.bkjia.com"> <input type = "text"> <input type = "submit" value = "submit"> </form>

<Form action = "http://www.bkjia.com"> <input type = "text"> <input type = "text"> <input type = "submit" value = "submit"> </form>

4. If you do not submit multiple text boxes, use the button with the type of "button:

<Form action = "http://www.bkjia.com"> <input type = "text"> <input type = "text"> <input type = "button" value = "Submit"> </form>

5. When the button element is used, FF and IE have different performances:

<Form action = "http://www.bkjia.com"> <input type = "text"> <input type = "text"> <button> submit </button> </form>

6. Radio and checkbox will also trigger the submission form in FX, but not in IE:

<Form action = "http://www.bkjia.com"> <input type = "text"> <input type = "radio" name = "a"> <input type = "checkbox" name = "B "> <input type =" checkbox "name =" c "> <input type =" button "value =" Submit "> </form>

7. A button whose type is image is equivalent to a button whose type is submit.

<form action="http://www.bkjia.com"> <input type="text"> <input type="text"> <input type="image" src="http://www.bkjia.com/images/FeedMe.jpg"> </form> 

Summarize several rules:

• If there is a type = "submit" button in the form, the Enter key takes effect.
• If there is only one input of type = "text" in the form, no matter what type the button is, the Enter key takes effect.
• If the button does not use input, but button, and type is not added, type = button is used by default in IE, and type = submit is used by default in FF.
• Other form elements, such as textarea and select, do not affect the trigger rule. However, in FF, radio checkbox does not affect the trigger rule, but it will respond to the carriage return key and does not respond in IE.
• The input of type = "image" has the same effect as type = "submit". I don't know why such a type is designed. It is not recommended. It should be appropriate to add a background image with CSS.

In actual application, it is easy to make the form respond to the carriage return key, and ensure that there is a type = "submit" button in the form. What if there is only one text box that does not want to respond to the Enter key? My method is a bit awkward, that is, to write another meaningless text box and hide it. According to the 3rd rules, we try to explicitly declare the type when using the button to make the browser consistent.