Quantcast
Viewing all articles
Browse latest Browse all 15

Focusing on HTML forms fields through a link

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;
});

Viewing all articles
Browse latest Browse all 15

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>