Me!

TJ VanToll

The Enter Key should Submit Forms, Stop Suppressing it

| Comments

I try to do most of my work and play on the internet with the keyboard. In the course of my internet-ing there’s one unfortunate trend that I’ve noticed; an increasing number of sites are not allowing the enter key to submit a form. Before I tell you why you care, let’s look at how this should work.

Enter = Submit

Take the following basic form:

<form>
    <label for="name">Name:</label>
    <input type="text" name="name" id="name">
    <input type="submit" value="Submit">
</form>

If you have focus in the textbox and hit enter, the form will be submitted automatically. This behavior is consistent across all browsers and is known as implicit submission. So why is this important?

Accessibility

Implicit submission is vital to assistive technologies and impaired users that cannot use a mouse at all. From the HTML5 specification:

“There are pages on the Web that are only usable if there is a way to implicitly submit forms, so user agents [browsers] are strongly encouraged to support this.”

The spec strongly encourages browsers to allow implicit submission; they all do.

User Expectations

Many users have an expectation that implicit submission will just work. Interfering with this leads to a negative user experience for these users.

How to Prevent Implicit Submission

What are sites doing to keep this from happening? Here’s a few things I’ve seen.

No Submit Buttons

Many sites do not have a submit button within the form. From the spec here’s how browsers determine what to do when enter is clicked.

“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.”

Basically, if the user hits enter when a text field is focused, the browser should find the first submit button in the form and click it.

“If the form has no submit button, then the implicit submission mechanism must do nothing if the form has more than one field that blocks implicit submission, and must submit the form element from the form element itself otherwise.

For the purpose of the previous paragraph, an element is a field that blocks implicit submission of a form element if it is an input element whose form owner is that form element and whose type attribute is in one of the following states: Text, Search, URL, Telephone, E-mail, Password, Date and Time, Date, Month, Week, Time, Local Date and Time, Number”

So, in a form with no submit buttons, implicit submission will be done if only one input is present. Therefore, pressing enter in this textbox will submit the form:

<form>
    <label for="name">Name:</label>
    <input type="text" name="name" id="name">
</form>

But in this form it will not because there are multiple fields:

<form>
    <label for="name">Name:</label>
    <input type="text" name="name" id="name">
    <label for="address">Address:</label>
    <input type="text" name="address" id="address">
</form>

Therefore, if you have a form with more than one input field, always include a submit button. Specifically an <input> with the type="submit" attribute, or a <button> element should be present. (Note: IE7 has a bug where the type attribute of a <button> defaults to button instead of submit. Therefore for IE7 compatibility you’ll need <button type="submit">.)

If you need to run some JavaScript before the form is submitted (validation, data manipulation, etc), do it in a submit event handler on the form, not a click handler on a button.

No <form>

I’ve seen a few forms that do not use the <form> HTML tag. Why would they do that?

With modern day browsers and JavaScript libraries it’s easy to send data to the server via AJAX. Because an AJAX request does not require a true <form> tag, it is often omitted. However, much like implicit submission, surrounding form data with a true <form> tag is vital for accessibility. Most screen readers have a mode specifically for filling out forms, and by omitting a true <form> tag you risk this mode not being activated.

Explicit Prevention

Finally, it’s also quite easy to prevent implicit submission in JavaScript. Take the following example:

<form>
    <label for="name">Name:</label>
    <input type="text" name="name" id="name">
    <input type="submit" value="Submit">
</form>
<script>
    document.getElementById('name').addEventListener('keypress', function(event) {
        if (event.keyCode == 13) {
            event.preventDefault();
        }
    });
</script>

This sets up a keypress event handler that prevents the default action (implicit submission) from occurring when the enter key is pressed.

This technique can be handy. For example, say you have a form with multiple submit buttons. As we saw earlier, the implicit submission algorithm will click the first submit button that it finds. Therefore, if you need control over which submit button is clicked, you can use the above technique to listen an for enter keypress, prevent the default action, then explicitly click the appropriate button.

Take the following example:

<form>
    <label for="age">Age:</label>
    <input type="number" min="0" max="120" name="age" id="age">
    <button id="child">Child</button>
    <button id="adult">Adult</button>
</form>
<script>
    (function() {
        var age = document.getElementById('age');
        age.addEventListener('keypress', function(event) {
            if (event.keyCode == 13) {
                event.preventDefault();
                if (age.value > 20) {
                    document.getElementById('adult').click();
                } else {
                    document.getElementById('child').click();
                }
            }
        });
    }());
</script>

When enter is clicked in the number input, the keypress event handler determines which submit button is appropriate and clicks it.

While this technique can be handy, I’ve seen it used plenty of times to completely prevent implicit submission from working. Don’t do that.

Conclusion

When filling out a form, pressing enter in a textbox should submit the form. This is known as an implicit form submission. Despite being vital for assistive technologies and an important user convenience, many web forms prevent it for one reason or another. If you write web forms, please take a minute to ensure that the enter key can indeed be used to submit them; it’ll help make the web a better place for everyone.

Comments