Forms Standards: Vertical Layout Usage
Version 3.1 by Ecaterina Moraru (Valica) on 2011/01/06
Forms Standards: Vertical Layout Usage
XWiki Forms are a general usage purpose CSS classes, that need to be used in order to have a consistent view of forms across XWiki. This classes implementation has been voted at [Vote] [Standards] Forms: Usage + Documentation page to XWiki.org and implemented in XSCOLIBRI-260
- Forms Layout Type:
- Vertical Layout (xform): uses a dl-dt-dd structure
- Inline Layout (not standardized yet)
A. Usage
- Obs: The CSS classes have as parent the .xform class. This is supposed to be used on the form tag, but if the styling is done inside dynamically generated structures it can be used on other elements, like divs, as long as the element remains the parent for the other form components.
| Tag | Type | Size | Classes | Usage | ||
|---|---|---|---|---|---|---|
| Required | Optional | Container | ||||
| form | .xform | .half, .third | Container for the form controls | |||
| label | dt | Descriptive label for the control | ||||
| span | .xRequired | dt label | Displays the required status of a control | |||
| span | .xHint | dt | Attach hint information to a control | |||
| span | .xErrorMsg | dt | Alert or error information for the control | |||
| input | hidden | |||||
| input | text | size=60 | dd | |||
| .xErrorField | dd | Alert or error triggering control | ||||
| input | password | size=60 | dd | |||
| .xErrorField | dd | Alert or error triggering control | ||||
| input | radio | |||||
| input | checkbox | |||||
| input | submit | .button | .secondary | span.buttonwrapper | Button controls | |
| input | button | .button | .secondary | span.buttonwrapper | Button controls | |
| a | .button | .secondary | span.buttonwrapper | Button controls | ||
| textarea | rows=7 cols=45 | |||||
| .xErrorField | dd | Alert or error triggering control | ||||
| select | size=1 | |||||
| fieldset | ||||||
| legend |
B. Components
1. Labels
- This element provides a descriptive label for the containing form control.
- Obs.1: Use uppercase ('UPPERCASE') bold fonts for input field labels [ title case ('Title Case') in the translation keys]
- Obs.2: Do not use colons(:) at the end of labels
[preview]
[html]
<form action="." class="xform" method="post" name="form_name1">
<dl>
<dt>
<label for="input_id1">Label</label>
</dt>
<dd>
<input id="input_id1" name="input_name1" type="text" size="60" value=""/>
</dd>
</dl>
<p>
<span class="buttonwrapper">
<input class="button" type="submit" value="Button"/>
</span>
</p>
</form>
<dl>
<dt>
<label for="input_id1">Label</label>
</dt>
<dd>
<input id="input_id1" name="input_name1" type="text" size="60" value=""/>
</dd>
</dl>
<p>
<span class="buttonwrapper">
<input class="button" type="submit" value="Button"/>
</span>
</p>
</form>
[demo]
[css]
.xform input[type="text" size="60"], .xform input[type="password"],
.xform select, .xform textarea{
width: 99%;
}
.xform dt {
margin-top: 1.2em;
}
.xform label {
color: $theme.textColor;
display: block;
font-size: .85em;
font-weight: 700;
margin-bottom: .3em;
text-transform: uppercase;
}
.xform select, .xform textarea{
width: 99%;
}
.xform dt {
margin-top: 1.2em;
}
.xform label {
color: $theme.textColor;
display: block;
font-size: .85em;
font-weight: 700;
margin-bottom: .3em;
text-transform: uppercase;
}
2. Required
- This element displays the required status of a form control.
[preview]
[html]
<label for="input_id2">Label <span class="xRequired">(Required)</span></label>
[demo]
[css]
.xform .xRequired {
color: $theme.textSecondaryColor;
font-size: .9em;
font-style: italic;
font-weight: normal;
margin-left: 1ex;
text-transform: none;
}
color: $theme.textSecondaryColor;
font-size: .9em;
font-style: italic;
font-weight: normal;
margin-left: 1ex;
text-transform: none;
}
[translation]
xe.form.required=(Required)
3. Hint
- This element provides a convenient way to attach hint information to a form control.
[preview]
[html]
<dt>
<label for="input_id3">Label</label>
<span class="xHint">Hint</span>
</dt>
<label for="input_id3">Label</label>
<span class="xHint">Hint</span>
</dt>
[demo]
[css]
.xform .xHint {
color: $theme.textSecondaryColor;
display: block;
font-size: .8em;
font-style: normal;
font-weight: 400;
margin-bottom: .3em;
}
color: $theme.textSecondaryColor;
display: block;
font-size: .8em;
font-style: normal;
font-weight: 400;
margin-bottom: .3em;
}
4. Error
- This element provides a convenient way to attach alert or error information to a form control.
[preview]
[html]
<dl>
<dt>
<label for="input_id5">Label</label>
<span class="xHint">Hint</span>
<span class="xErrorMsg">Error</span>
</dt>
<dd>
<input class="xErrorField" id="input_id5" name="input_name5" type="text" size="60" value=""/>
</dd>
</dl>
<dt>
<label for="input_id5">Label</label>
<span class="xHint">Hint</span>
<span class="xErrorMsg">Error</span>
</dt>
<dd>
<input class="xErrorField" id="input_id5" name="input_name5" type="text" size="60" value=""/>
</dd>
</dl>
[demo]
[css]
.xform .xErrorMsg {
color: #CC3333;
display: block;
font-size: .8em;
font-weight: normal;
margin-bottom: .3em;
}
.xform .xErrorField {
border: 1px solid #CC3333;
}
color: #CC3333;
display: block;
font-size: .8em;
font-weight: normal;
margin-bottom: .3em;
}
.xform .xErrorField {
border: 1px solid #CC3333;
}
5. Buttons
- Group multiple buttons in a .buttons div
[preview]
[html]
- Use an additional .buttonwrapper class span container to surround button elements
<div class="buttons">
<span class="buttonwrapper">
<input class="button" type="submit" value="Button"/>
</span>
<span class="buttonwrapper">
<a href="." class="button">Link</a>
</span>
<span class="buttonwrapper">
<input class="button secondary" type="submit" value="Secondary Button"/>
</span>
<span class="buttonwrapper">
<a href="." class="button secondary">Secondary Link</a>
</span>
</div>
<span class="buttonwrapper">
<input class="button" type="submit" value="Button"/>
</span>
<span class="buttonwrapper">
<a href="." class="button">Link</a>
</span>
<span class="buttonwrapper">
<input class="button secondary" type="submit" value="Secondary Button"/>
</span>
<span class="buttonwrapper">
<a href="." class="button secondary">Secondary Link</a>
</span>
</div>
[demo]
[css]
.buttonwrapper and .button classes are described in colibri.css
.buttonwrapper input.secondary, .buttonwrapper a.secondary {
background-color: $theme.buttonSecondaryBackgroundColor;
color: $theme.buttonSecondaryTextColor;
}
background-color: $theme.buttonSecondaryBackgroundColor;
color: $theme.buttonSecondaryTextColor;
}
6. Grouping
- Grouping can be done by using fieldset/legend or other markup (like headers)
[preview]
[html]
<h2>Group 1</h2>
[demo]
[css]
.xform h2 {
font-size: 1.2em;
font-weight: bold;
margin: 2em 0 0;
}
font-size: 1.2em;
font-weight: bold;
margin: 2em 0 0;
}
C. Form Examples
[preview]
[demo]
D. Tips
D1. Other useful CSS classes
- Read about Special CSS classes that can be used for forms elements.
D2. LiveValidation
- XWIKI-4792: Add javascript LiveValidation input validation library
D3. Captchas
D4. WCAG
Form created within XWiki must validated accordingly with WCAG rules. There are some exceptions stated for XWiki.
