Forms Standards: Inline Layout Usage

Version 1.1 by Ecaterina Moraru (Valica) on 2011/02/07
Warning: For security reasons, the document is displayed in restricted mode as it is not the current version. There may be differences and errors due to this.

Failed to execute the [velocity] macro. Cause: [The execution of the [velocity] script macro is not allowed in [xwiki:Documentation.DevGuide.FrontendResources.InlineForms.WebHome]. Check the rights of its last author or the parameters if it's rendered from another script.]. Click on this message for details.

Forms Standards: Inline Layout Usage

Content

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.buttonwrapperButton controls
input     button           .button    .secondary  span.buttonwrapperButton controls
a                          .button    .secondary  span.buttonwrapperButton controls

B. Components

1. Labels

[preview]

inlineform.png

[html]

<form action="." class="xformInline" method="post" name="form_name1">
      <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>
</form>

[demo]

[css]

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

About

About

Support

Platform

User Guide

Admin Guide

Developer Guide

Projects

XWiki

Extensions

Other

Contribute

Status

Practices

Under the Hood

Get Involved

Get Connected