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"> </label><div class="element"><input id="submit" name="submit" value="Submit" type="submit" /></div></li> <li class="reqnote"><label class="element"> </label><span class="required">*</span> denotes required field</li> </ol> </fieldset> </form>
