Template Form Styling
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="/ucomm/templatedependents/templatecss/components/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>
