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

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 RequiredOptional      Container       Usage
form                 .xformInline.half, .third                Container for the form controls
label                                                                      Descriptive label for the control
input text   size=30                                                      
input passwordsize=30                                                      
select        size=1                                                       
input submit        .button     .secondary  span.buttonwrapperButton controls
input button        .button     .secondary  span.buttonwrapperButton controls
a                    .button     .secondary  span.buttonwrapperButton controls

Components

Labels

[preview]

inlineform.png

[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>

[demo]

[css]

.xformInline label {
 color: $theme.textColor;
 font-size: .85em;
 font-weight: 700;
 margin-bottom: .3em;
 text-transform: uppercase;
}

Get Connected