Why Does a Form with One Text Input Submit on Enter While One with Two Text Inputs Does Not

Why does a FORM with one text INPUT submit on enter while one with two text INPUTs does not?

This behaviour was introduced in the HTML 2.0 specification. See the following article for more details:

Form submission and the ENTER key?

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

Source: W3C Specs

Why does forms with single input field submit upon pressing enter key in input

This is a little known "Quirk" that has been out for a while. I know some people have resolved it in various ways.

The easiest bypass in my opinion is to simply have a second input that isn't displayed to the user. Granted not all that user friendly on the backend, it does work to resolve the issue.

I should note that the most common place that I hear of this issue is with IE specifically and not with FireFox or others. Although it does seem to affect them as well.

Form submit on enter needs at-least one input type = text element

As regards to the added question “as per W3C standards, we need to provide atleast one input type "text" element ?”, the answer is that no HTML specification requires that a form be submittable by pressing Enter at all. The specs just describe (vaguely) what browsers may do.

Originally, the idea was that you can submit a form containing only one text input field (and possibly radion buttons and checkboxes) by hitting Enter after filling in the input field. This was deemed useful for simple forms, typically search forms or subscription forms, to make things faster for the user.

Later, the idea was often extended to forms that have several text input fields. This often causes problems, since the user might press Enter before filling in all the fields he should have filled. Yet, this is how modern browsers generally behave (provided that there is a submit button in the form).

HTML5 follows the tradition, just describing what browsers might do, though deviating from the tradition by strongly recommending (but not requiring for conformance) the common behavior, in the Implicit submission section:

If the user agent supports letting the user submit a form implicitly
(for example, on some platforms hitting the "enter" key while a text
field is focused implicitly submits the form), then doing so for a
form whose default button has a defined activation behavior must cause
the user agent to run synthetic click activation steps on that default
button.

[...]

Note: There are pages on the Web that are only usable if there is a way to
implicitly submit forms, so user agents are strongly encouraged to
support this

(Regarding the original question, the answer is that you need to handle such things in JavaScript, and @bardznusny’s answer shows one concise way of doing that.)

Form not submitting when pressing enter

You have two choices:

1. Create an event handler for the enter button and add it to your bindings.
2. Use an <input type=submit> in the form somewhere, which is what gets the automatic Enter Key behavior you're after.

Hitting enter from an input (text) field when a form has a submit input

Yeah, sorry, it's not directly fixable. I don't know what your previous ‘working’ case was, but I suspect there might have been an extra input present. (It's only when there's a single text input that the exceptional behaviour occurs.)

With the historical mines around the question of whether a default-submit button is ‘successful’, it's better never to rely on it. Add the hidden input to signify a submission and omit the name on the submit button. Put any submission scripting on form onsubmit rather than the default button.

If you have additional submit buttons for different actions (eg. Edit vs Delete), then make the first button perform the ‘default’ action and set no name, then add name/values that override the default behaviour on the other buttons. These are sure to be ‘successful’ (and will receive a click event) if clicked.

Two submit buttons in one form

If you give each one a name, the clicked one will be sent through as any other input.

<input type="submit" name="button_1" value="Click me">

---

Related Topics