2.2
PrintShop Web Skinning Guide | 35
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;
}
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 class="formLine" id="fcPasswordLine">
<span class="formLabel" id="fcPasswordLabel">Password:
<span class="asterisk">*</span>
</span>
<input type="password" class="formField" id="fcPasswordField" name="fcPassword"
value="administrator">
</div>
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.
<div id="personEditInfoForm_fcPassword_Required" class="warnings">
<div class="warningTable">
<span class="warningLabel"> </span>
<span class="warningIcon">
<span class="warningItem">Password is a required field!</span>
</span>
</div>
</div>