Forms Standards: Inline Layout Usage
XWiki Forms (xform / xformInline) are general usage purpose CSS classes, that need to be used in order to have a consistent view of forms across XWiki.
- Forms Layout Type:
- Vertical Layout (xform): uses a dl-dt-dd structure
- Inline Layout (xformInline)
A. Usage
- Obs: The CSS classes have as parent the .xformInline 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 | .xformInline | .half, .third | Container for the form controls | |||
| label | Descriptive label for the control | |||||
| input | text | size=30 | ||||
| input | password | size=30 | ||||
| select | size=1 | |||||
| input | submit | .button | .secondary | span.buttonwrapper | Button controls | |
| input | button | .button | .secondary | span.buttonwrapper | Button controls | |
| a | .button | .secondary | span.buttonwrapper | Button controls |
B. Components
1. Labels
[preview]
[html]
<form action="." class="xformInline" method="post" name="form_name1">
<div>
<label for="input_id1">Label</label>
<input id="input_id1" name="input_name1" type="text" value="" size="30"/>
<span class="buttonwrapper">
<input class="button" type="submit" value="Button"/>
</span>
</div>
</form>
<div>
<label for="input_id1">Label</label>
<input id="input_id1" name="input_name1" type="text" value="" size="30"/>
<span class="buttonwrapper">
<input class="button" type="submit" value="Button"/>
</span>
</div>
</form>
[demo]
[css]
.xformInline label {
color: $theme.textColor;
font-size: .85em;
font-weight: 700;
margin-bottom: .3em;
text-transform: uppercase;
}
color: $theme.textColor;
font-size: .85em;
font-weight: 700;
margin-bottom: .3em;
text-transform: uppercase;
}
