The other day I was investigating some odd behaviour in a form. Users were clicking the text label next to a radio input (which if set up correctly selects that radio input) but were then unable to use the Enter key to submit the form.

This contradicts with the idea that if a user’s browser focus is on a form input, the Enter key will submit that form. Here’s HTML for a basic form with two radio inputs:

<form method="post" action="#">
    <fieldset>
        <input type="radio" name="gender" id="gender-male" value="gender-male" checked="checked">
        <label for="gender-male">Male</label>
        <input type="radio" name="gender" id="gender-female" value="gender-female">
        <label for="gender-female">Female</label>
    </fieldset>
    <button type="submit">Submit Form</button>
</form>

Here’s the output. Note how both the radio input itself or the text label can be clicked to select a radio: In the same way users can click in the Google search box and press the Enter, I would expect a form to submit with the Enter key after selecting a radio input, to match the behaviour of other form inputs (with the exception of <textarea> in which Enter triggers a line-break). However my testing on this behaviour threw up some surprising results:

Things to note from these results:

• Chrome Canary and Chrome Stable on the same OS have different behaviour. Is Google in the process of changing this behaviour in their browser?
• Firefox on Windows and Firefox on OSX have different behaviour. Is this a bug or a conscious decision?
• The browser behaviour of clicking a radio input or the text label is inconsistent, but if tabbed to these radio inputs are correctly “focused” and the form submitted upon Enter.

Has anyone else experienced this in their work? Can anyone explain these inconsistencies?