Sometimes we want the return key to knock on the text box (input Element) to submit the form, but sometimes we don't want to. For example, search behavior, you want to enter the keyword immediately after the press return directly to submit the form, and some complex forms, you may want to avoid the return key error operation in the unfinished form filled out when it triggered the form submission.
To control these behaviors, no need to use JS, the browser has helped us do these processing, here summed up a few rules:
In practical applications, it is easy to make the form respond to the ENTER key, ensuring that there is a type= "submit" button on the form. And what happens when you have only one text box and don't want to respond to enter? My method is a little awkward, is to write a meaningless text box, hidden. According to rule 3rd, when we use a button, we try to explicitly declare the type so that the browser behaves in a consistent way.
Made a DEMO list of some examples.
Run Code Box
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" > <ptml> <pead> & Lt;meta http-equiv= "Content-type" content= "text/html; CHARSET=GBK "> <title>submit</title> </pead> <body> <p> This demo shows whether pressing ENTER in a text box triggers the submission of the form </p> <p> by default, a text box is submitted, regardless of the button type is submit or button</p> <form action= "http://www.koubei.com" > <input type= "text" > <input type= "button" value= "Submit" > </form> <p> a text box how to do not submit, the method is to add a hidden text box </p> <form action= "http://www.koubei.com" > <input type= " Text "> <input type=" text "style=" Display:none "> <input type=" button "value=" Submit "> </form> <H2 > As long as there is a button with type submit, a text box or multiple text boxes are submitted </p> <form action= "http://www.koubei.com" > <input type= " Text "> <input type=" Submit "value=" submitted "> </form> <p> as long as there is a button with type submit, a text box or multiple text boxes are submitted </H2 > <form action= "http://www.koubei.com" > <iNput type= "text" > <input type= "text" > <input type= "Submit" value= "submitted" > </form> <p> multiple text boxes , do not commit, the button with type buttons on the line </p> <form action= "http://www.koubei.com" > <input type= "text" > <input Type= "text" > <input type= "button" value= "Submit" > </form> <p> with button elements, FX and IE have different performance </p> <form action= "http://www.koubei.com" > <input type= "text" > <input type= "text" > <button> Submit < /button> </form> <p>radio and checkbox under FX will also trigger the submission form, under IE will not </p> <form action= "http:// Www.koubei.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> <p> A button of type image, equivalent to the effect of type for submit </p> <form action= "http://www.koubei.com" > <input type= "Text" > <input type= "text" > <input type= "image" src=http://www.webjx.com/web/"http://k.kbcdn.coM/images/common/logo_yahookoubei_s.gif "> </form> </body> </ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
