7.0
Table Of Contents
id="fcPersonCodeField" class="formField"/>
</span>
</div>
</div>
</fieldset>
</div>
</form>
</div>
The <form> tag is used to process the information entered by the user. The contents of the <form> tag are
captured by a <div> with a unique id.
4.8.1 Form head
The first content element is the form header. In the default skin the information in this tag is used to visually
group the elements in the form.
.formHeader {
display: block;
width: 100%;
background-color: <? generateSkinMainColor(); ?>;
color: #FFFFFF;
padding: 2px;
font-weight: bold;
}
4.8.2 Form lines
Each line in an edit form is enclosed by a <div> tag. This element has an unique id and a Formline class.
Normally each line contains two child elements: a label and a field. The form fields can be of various types, for
example: plain text input, a pull down menu, radio buttons or a range of check boxes. The following snippet
shows a form line containing a form label and a regular text input field. As the field requires input an
additional <span> tag is added for the asterisk symbol.
<div id="fcUserNameLine" class="formLine ">
<span id="fcUserNameLabel" class="formLabel">
User name:<span class="asterisk">*</span>
</span>
<span class="formElement">
<input type="text" value="" name="fcUserName" id="fcUserNameField" class="formField"/>
</span>
</div>
4.8.3 Warnings and Errors
Warnings and errors are hidden elements for which the visibility is changed when the actual warning/error
occurs. A warning line has two child element: a warning label and a container element for the warning icon
and message.
Styling - Edit forms
Objectif Lune Inc. © 2010 32