Form styling best practices

Question

I've created a nice set of form elements in Photoshop and am looking to convert them into HTML and CSS. The simple input-text form will have a background image, as the field does not change in size. However, the text-area form will dynamically change size as the user types.

Normally, to build out this sort of style, I'd wrap the form field in divs, as such:

<div class = "textarea-top">
  <div class = "textarea-bottom">
    <textarea></textarea>
  </div>
</div>

Or by using multiple background-images in one wrapping div:

<div class = "textarea">
  <textarea></textarea>
</div>

Is there a better way to approach this? To restate, the field styles are advanced images that can be repeated (for the body of the field), and have styling for the top and bottom. The question is, what is the best practice in dealing with these advanced form styling?

Answer 1

I'm not entirely sure what you mean by "best practice", but one thing I'd improve are the semantics. You could (should?) use <fieldset>'s instead of a, rather meaningless, <div>.

And you don't need to use two <div>'s around the textarea, or even multiple background images on a single <div> (which is a CSS3 property, and not widely-supported).

Instead, you should wrap the <textarea> in a <label> element, and nest your background-images as I've described below:

Try this:

<fieldset class="expandableInput">
  <label>
    Semantic text:
    <textarea></textarea>
  </label>
</fieldset>

Bonus: wrapping form elements in <label>'s like this, affords a larger click area, for the user to gain focus on the form element at hand. Just be wary of <select>'s, which doesn't play nice (even though it's valid HTML)

The CSS would be something like:

.expandableInput {background: url(/path/to/first/img);}
  .expandableInput label {display: block; background: url(/path/to/second/img);}
    .expandableInput textarea {display: block; margin-top: 3px; background: url(/path/to/third/img);}

Also; For consistent looks on form elements, in every browser & platform, I can highly recommend Nathan Smith's Formalize CSS (it requires JS for HTML5 support in older browsers).