Don’t call me DOM

22 November 2010

Focusing on HTML forms fields through a link

Filed under:

I inquired earlier today if there was a way to give focus to an HTML form field through a simple link.

The reason of my inquiry was that WCAG 2.0 recommends to make it possible for the user [to] easily navigate to [detected form submission errors] to fix the problem.

But in practice, with the following HTML form:

<p><label for='email' id='emaillabel'>Email:</label>
<input type='text' id='email' name='email'></p>

neither a link to #email nor to #emaillabel will give focus to the input field.

For instance, it would be useful to be able to markup a possible error message above that form as follows:

<p class='error'>The <a href="#email">email address</a> is not valid.</p>

And when the user hits the link in that message, she gets moved to the email field, with focus on it, ready to fix the noted problem.

I don’t know if there is a justification to explain that links don’t activate form fields — it would seem like a fairly reasonable way for browsers to facilitate their users’ life.

In any case, here is a tiny piece of JQuery-based JavaScript that does this, for links with the class field:

$("a.field").click(function() {
  var target = $(this).attr("href").substring(1);
  $("#" + target).focus();
  return false;
});

7 Responses to “Focusing on HTML forms fields through a link”

  1. Robin Berjon Says:

    I suspect that this is largely a UI oversight, I wouldn’t be surprised if it got implemented natively if someone prodded the right people with a bug or some such.

  2. Tweets that mention Don’t call me DOM » Activating HTML forms fields through a link -- Topsy.com Says:

    [...] This post was mentioned on Twitter by Dom Hazael-Massieux, Sorin Stefan. Sorin Stefan said: RT @dontcallmedom: On the blog: Activating HTML forms fields through a link http://kwz.me/oi [...]

  3. Florent V. Says:

    At least in FF4, this is broader than just input elements or form fields. Try to do the same with any focusable element (a link or Whatever), and the element won’t get the focus either.

    See this quick test page:
    http://covertprestige.info/temp/focus-target.html

    Elements do get the :target state, including the first paragraph which cannot gain focus, but they don’t get the focus. Regarding focus, the behavior is different from one browser to another:

    - Firefox takes the focus away from the clicked link, but doesn’t give it to any element. BUT, the target element becomes the starting point for keyboard navigation so the next keystroke on TAB gives focus to the focusable element right after the target element.
    - Safari and Chrome keep the focus on the clicked link.
    - Haven’t tested other browsers (Opera crashes on my Mac).

    Is there a spec documenting the expected behavior? Looks like a typical instance of “nobody thought of specifying this, so everyone is doing what they please.” Candidate for some clarification in HTML5 maybe?

  4. Dom Says:

    @Florent I don’t have the answer to your last questions, which seem very relevant indeed — asking HTML WG would be probably be a good idea.

    Thanks very much for the testing, very informative.

  5. Dom Says:

    I eventually went ahead and posted a related message to public-html: http://lists.w3.org/Archives/Public/public-html/2010Nov/0351.html

  6. On not changing the keyboard focus in Web documents Says:

    [...] Dominique Hazaël-Massieux wrote about automatically setting focus to form controls upon opening the page. There are unfortunately designers that do that. It is unfortunate, because [...]

  7. Jordan Clark Says:

    Sorry, that should have read:

    <form>
    <p id=”error”>
    <label for=”email”>Please enter a valid email address</label>
    </p>

    <p>
    <label for=”email”>Email</label>
    <input type=”text” id=”email” name=”email”>
    </p>

    </form>

Picture of Dominique Hazael-MassieuxDominique Hazaël-Massieux (dom@w3.org) is part of the World Wide Web Consortium (W3C) Staff; his interests cover a number of Web technologies, as well as the usage of open source software in a distributed work environment.