Vertical Layout Forms Standards Usage
Vertical Layout Forms Standards Usage
XWiki Forms (xform / xformInline) 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 implements the voted XWiki Form Standards.
Type:
- Vertical Layout (xform): uses a dl-dt-dd structure
- Inline Layout (xformInline)
Usage
Tag | Type | Classes | Usage | ||
---|---|---|---|---|---|
Required | Optional | Container | |||
form | .xform | 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 | dd | |||
.xErrorField | dd | Alert or error triggering control | |||
input | password | 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 | |||||
.xErrorField | dd | Alert or error triggering control | |||
select | |||||
fieldset | |||||
legend |
Components
Labels
- This element provides a descriptive label for the containing form control.
[preview]
[html]
<dl>
<dt>
<label for="input_id1">Label</label>
</dt>
<dd>
<input id="input_id1" name="input_name1" type="text" value=""/>
</dd>
</dl>
<p>
<span class="buttonwrapper">
<input class="button" type="submit" value="Button"/>
</span>
</p>
</form>
[demo]
[css]
.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;
}
Required
- This element displays the required status of a form control.
[preview]
[html]
[demo]
[css]
color: $theme.textSecondaryColor;
font-size: .9em;
font-style: italic;
font-weight: normal;
margin-left: 1ex;
text-transform: none;
}
[translation]
xe.form.required=(Required)
Hint
- This element provides a convenient way to attach hint information to a form control.
[preview]
[html]
<label for="input_id3">Label</label>
<span class="xHint">Hint</span>
</dt>
[demo]
[css]
color: $theme.textSecondaryColor;
display: block;
font-size: .8em;
font-style: normal;
font-weight: 400;
margin-bottom: .3em;
}
Error
- This element provides a convenient way to attach alert or error information to a form control.
[preview]
[html]
<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" value=""/>
</dd>
</dl>
[demo]
[css]
color: #CC3333;
display: block;
font-size: .8em;
font-weight: normal;
margin-bottom: .3em;
}
.xform .xErrorField {
border: 1px solid #CC3333;
}
Buttons
- Read more about Buttons Standard
- Note: margin-top for .buttonwrapper
- have a p surrounding them, no need for margin-top
- have .buttonwrapper {display:inline-block;}: how this affect the inline layout for older browsers?
[preview]
[html]
- Use an additional .buttonwrapper class span container to surround button elements
<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>
[demo]
[css]
.buttonwrapper and .button classes are described in colibri.css
background-color: $theme.buttonSecondaryBackgroundColor;
color: $theme.buttonSecondaryTextColor;
}
Grouping
- Grouping can be done by using fieldset/legend or other markup (like headers)
- Fieldset Forms Example
[preview]
[html]
[demo]
[css]
font-size: 1.2em;
font-weight: bold;
margin: 2em 0 0;
}
Form Examples
[preview]
[demo]
Tips
Other useful CSS classes
.hidden Class
- Hides elements from the display using CSS
.withTip Class
- XWIKI-4163: New "withTip" behavior for input fields
- automatically hides and reinserts the default text for input fields, acting as a tip
.suggestDocuments Class
- XWIKI-5301: New "suggestDocuments" behavior for input fields
- All input fields with classname suggestDocuments will receive an autocomplete control suggesting document names.
LiveValidation
- XWIKI-4792: Add javascript LiveValidation input validation library
Captchas
WCAG
Form created within XWiki must validated accordingly with WCAG rules. There are some exceptions stated for XWiki.