Geek Answers Handbook

Excellent forms styling techniques

I created a nice set of form elements in Photoshop and want to convert them to HTML and CSS. A simple form of text input will have a background image, since the field does not change in size. However, the shape of the text area will dynamically resize according to the type of user.

Normally, to create such a style, I would wrap the form field in divs as such:

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

Or, using multiple background images in one wrapping div:

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

Is there a better way to approach this? To repeat, the field styles are extended images that can be repeated (for the body of the field), and have a style for the top and bottom. The question is, what is the best practice regarding these advanced forms?

+5
1

, " ", , , - . (?) <fieldset> a, , <div>.

<div> textarea <div> ( CSS3 ).

<textarea> <label> , :

:

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

: <label>, , , . <select> 's, ( HTML)

CSS :

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

; , , Nathan Smith Formalize CSS ( HTML5 JS ).

+3

More articles:


All Articles