A newbie's guide to designing good web forms: the technical bits

The somewhat belated third (and probably final part) in my mini series about web form design. See part one, which focused on the kinds of questions you ask and part two, about visual design if you haven’t already. This post is going to cover technical implementation details from the frontend perspective. Inputs, labels, IDs Every single one of your <input>, <select> and <textarea> elements should have a <label> element associated with it. Always. Well… actually there are a lot of exceptions where you don’t need to include a label, but if you don’t already know what those exceptions are, you should probably be using <label>s. This is a one-to-one relationship. One label to one input. Always. No exceptions. That one is actually always. The most flexible way of associating labels to elements is by using for and id attributes. for goes on the <label>, id on the input. <label for="your-cool-name">What's your rad-as-hell name?</label> <input type="text" id="your-cool-name" /> The same holds…

Commenting on Bubbles has been removed. Why? If you want to talk about this post, write to the author, use the comments on their blog if it has them, or reply with a "RE:" post on your own blog. Suggestions? feedback@bubbles.town