Form field hints using CSS?

HTML & CSS
1

I’ve poured over dozens of sites about forms and in particular I was reading about form field hints. Obviously this is when a field is in focus regardless of whether its an input, select, textarea, etc it shows a hint, usually to the right of the field.

I’ve stuck with using the adjacent sibling selector, for example:

input:focus + span {declarations}

Of course the span tag will contain a hint and the HTML code is something like this:

<label for="email">Email:</label>
<input type="text" size="50" maxlength="50" name="emailaddress" id="email" />
<span>A maximum of 50 characters are allowed. Email format should be email@address</span>

I know about accessibility saying that the span tag should be in the label tag, and I also know that this works in IE8, perhaps IE7, Firefox, Safari, Opera, etc and as for IE6 users they simply have to live with server side script feedback for errors. Personally I love using CSS for the form field hints because its so simple and clean :smiley:

What I want to know is whether anyone has used this for their own forms using just CSS or is the JavaScript option better overall?

2

I would (and I do, scroll down to the ?'s) put the hints in the label. Two reasons:

one is flow. Anyone going through a form linearly (such as in a text browser or with a screen reader) doesn’t want to answer the question first and THEN get told how to answer it. Lots of backpedaling.

Second, the span won’t be read out in a screen reader who has a Forms Mode. The Big 2 for Windows do have a Forms Mode, where the user is in a special mode to interact with the inputs. Here, only form controls are read out. If the user is in a regular reading mode then p’s and spans and things will get read out. But if the span’s in a label, it does get heard (I sometimes wonder if it’s a bad thing but my boss did insist on help text). The whole idea of hints is always assuming a sighted person with a broad field of vision.

If you’re going to use CSS like you’re thinking, it has to be non-essential information. Something nice to have, but that any user without it has no trouble using the form (in the example you give, yeah, people will find the maxlength on their own anyway).

perhaps IE7

Should work in IE7.

and as for IE6 users they simply have to live with server side script feedback for errors.

Everyone should get server-side errors. Errors are not hints. Hints are extras… niceties, pretties, whipped cream on the cake. Error messages however are essential. Everyone need to get them.

I think if your hints are just slightly redundant stuff like telling people what an email address consists of, then you can consider doing it with the span and adjacent selector and CSS (heck, screw the span: see below) alone.

input:focus:after {
content: “an email address must have an @ symbol”;
display: block;
blah blah styles;
}

You might have to make all the inputs relatively positioned (with no coordinates) and make the :after absolutely positioned to make enough room, but I’ve done this with anchor titles when I know I want sighted keyboarders to be able to get the benefits of title text, and it works except in IE6 and 7. Does work in IE8. Again, this isn’t a problem if the text is superfluous anyway.