Skip Navigation

Web Developer Network Wiki

Template Form Styling

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.

 
<form action="?" method="post">
    <fieldset>
        <legend>Sample Form Content</legend>
        <ol>
            <li><label for="name" class="element"><span class="required">*</span>Name</label><div class="element"><input id="name" name="name" type="text" /></div></li>
            <li><label for="email" class="element"><span class="required">*</span>Email</label><div class="element"><input id="email" name="email" type="text" /></div></li>
            <li><label class="element">I Can Has Cheezburger?</label><div class="element"><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></div></li>
            <li><label for="helpful_comments" class="element">In what way?</label><div class="element"><textarea id="helpful_comments" name="helpful_comments" cols="60" rows="5"></textarea></div></li>
            <li><label for="submit" class="element">&nbsp;</label><div class="element"><input id="submit" name="submit" value="Submit" type="submit" /></div></li>
            <li class="reqnote"><label class="element">&nbsp;</label><span class="required">*</span> denotes required field</li>
        </ol>
    </fieldset>
</form>
 

Image:Form_Component_Sample.png