Template Form Styling

From Web Developer Network Wiki
Jump to: navigation, search

This is an old form style. For the newer, theme-able forms, check out the Zenform.

The UNL Templates have an optional CSS file which can be used to style HTML forms]].

To use the forms css component, add the following link within the editable area of the <head> of your document:

<link rel="stylesheet" type="text/css" href="/wdn/templates_3.0/css/content/forms.css" />

For the styling to function correctly, your form markup must follow some simple guidelines:

Use fieldsets, legends, and ordered lists for form elements. The following is a sample HTML form. <source lang="xml"> <form action="?" method="post">

       <legend>Sample Form Content</legend>
  1. <label for="name" class="element">*Name</label>
    <input id="name" name="name" type="text" />
  2. <label for="email" class="element">*Email</label>
    <input id="email" name="email" type="text" />
  3. <label class="element">I Can Has Cheezburger?</label>
    <input name="helpful" value="1" type="radio" id="cheezyes" /><label for="cheezyes">Yes</label><input name="helpful" value="0" type="radio" id="cheezno" /><label for="cheezno">No</label>
  4. <label for="helpful_comments" class="element">In what way?</label>
    <textarea id="helpful_comments" name="helpful_comments" cols="60" rows="5"></textarea>
  5. <label for="submit" class="element"> </label>
    <input id="submit" name="submit" value="Submit" type="submit" />
  6. <label class="element"> </label>* denotes required field

</form> </source>

Form Component Sample.png

Personal tools