CSS Usage

Formlets provides CSS classes for all of its elements. The HTML tree looks like this:

 <form name='[formlet name]' id='[formlet name]' ...> 
   <ul class='form-fields'> 
     <li>
        <span class='label'>[input name]</span>
        <input name='[input name]' class='text-box' type='[input type]' />
     </li> 
 ...
     <li>
       <span class='label'></span> 
       <input type='submit' class='submit' value='[submit value]' /> 
     </li> 
   </ul> 
 </form> 

All the values surrounded by [ ] are declared as part of the formlet declaration (see Tutorial). Inputs of type text and password are given the class text-box to allow easier styling without the use of advanced CSS statements.

A general error has the class general-error, and inline errors have the class inline-error.

Here is an example CSS block styling the formlet system:

 .form-fields { list-style: none; padding-bottom: 0px; }
 .form-fields li { margin-bottom: 10px; clear: both; }
 .form-fields input { margin: 0px; }
 .form-fields textarea, .form-fields .text-box { border: 1px solid #000; width: 250px; }
 .submit { border: 1px solid #000; background-color: #ddd; }
 .form-fields .label { width: 100px; display: block; float: left; text-align: right; padding-right: 5px; height: 20px; }
 .general-error { border: 1px solid #900; background-color: #faa; margin-left: 195px; margin-top: 10px; width: 236px; padding: 5px; }
 .inline-error { border: 1px solid #900; background-color: #faa; position: absolute; padding: 2px; margin-left: 5px; }

The above was generated by cl-css, not written by hand, so excuse the formatting and repetitive clauses.