Forms Standards: Inline Layout
Last modified by Vincent Massol on 2023/10/10
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)
This classes implementation has been voted at [Vote] [Standards] Forms: Usage + Documentation page to XWiki.org and implemented in XSCOLIBRI-266
Usage
| Tag | Type | Size | Classes Required | Optional | Container | Usage |
|---|---|---|---|---|---|---|
| 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 |
Components
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;
}
