7.1

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">
<span id="fcUserNameLabel">
User name:<span>*</span>
</span>
<span>
<input type="text" value="" name="fcUserName" id="fcUserNameField"/>
</span>
</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">
<div>
<span>&nbsp;</span>
<span>
<span>Password is a required field!</span>
</span>
</div>
</div>
The warningLabel <span> is used as spacer to make sure that the warning icon and message align with the field of the accom-
panying form line. The warningIcon <span> holds the actual warning message which is stored in a separate <span> tag. The
warning icon is set using CSS. The following snippet shows background-image attributes for the warning icon.
.warningIcon {
display: inline-block;
width: 73%;
background-image: url(../../images/icon_alert.gif);
background-repeat: no-repeat;
background-position: 0px 3px;
display: inline-block;
vertical-align: top;
}
In this case the icon is coming from the image folder stored in the PrintShop Mail Web web site root. You can use you own icon
by placing an image within the skins folder (or an images folder in your skin folder) and changing the path to that image file.
©2010 Objectif Lune Inc - 237 -