Attractive, accessible web forms Apr28 '05

# (1 of 4): Josh » joahua.com/blog

11 hours, 31 minutes after the fact. (Fri 29 Apr 2005, 2:32 AM CST)

Not quite sure about your markup there, in terms of how non-visual UA's (screen readers) or non-graphical UA's (Lynx/Links/users with images disabled) would be able to access it, but your final outcome is pretty darn attractive.

I haven't tested your markup in Links, but personally I'd be inclined to go with something more like this (taken from my contact form):

<label for="msgname">Your name:</label> <input type="text" name="msgname" id="msgname" tabindex="1" />

and use CSS to set the label size to 1px height, or hidden display by some other means -- and THEN apply styling to your input element. I think this would be a more accessible solution, but haven't fully tested yours, so take this criticism as tentative. Having said that, I know for a fact this alternative would work fine in other agents.

# (2 of 4): Josh » joahua.com/blog

13 hours, 54 minutes after the fact. (Fri 29 Apr 2005, 4:55 AM CST)

On second reading, my first comment was pretty negative, sorry... I got caught up in markup and forgot to say that I love the design of it, and think it's an excellent technique to use -- one I hadn't even considered before (not the background, changing the size of the dialogue to fit it below the text... brilliant!)

Just out of curiousity, what happens when the user resizes the text? Does it go over the background?

# (3 of 4): Matthom

15 hours, 13 minutes after the fact. (Fri 29 Apr 2005, 6:13 AM CST)

Josh, you're right - the markup is wrong.

The <label> elements should surround the actual label, and not the text field.

And, these designs were just me being rather unproductive one afternoon - I don't think they would float in the real world.

Thanks for your thoughts.

# (4 of 4): Jennifer Grucza » jennifergrucza.com

1 day, 1 hour after the fact. (Fri 29 Apr 2005, 4:46 PM CST)

Hmm, I've never had a problem using labels, you just have to make sure to actually include some label text somewhere, or of course it won't display. Also, you don't need to include the for="id" if the input is nested inside of the label tag - you only need it if the input is seperate.

Pretty cool background labels - I would have never thought of doing that. Very original.