Vertical Layout Forms Standards Usage

Version 1.4 by Ecaterina Valica on 2010/10/08 23:26

Vertical Layout Forms Standards Usage

Content

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]

label.png

[html]

<form action="." class="xform" method="post" name="form_name1">
    <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 input[type="text"], .xform input[type="password"],
.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]

required.png

[html]

<label for="input_id2">Label <span class="xRequired">(Required)</span></label>

[demo]

[css]

.xform .xRequired {
 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]

hint.png

[html]

<dt>
  <label for="input_id3">Label</label>
  <span class="xHint">Hint</span>
</dt>

[demo]

[css]

.xform .xHint {
 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]

error.png

[html]

    <dl>
      <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]

.xform .xErrorMsg {
 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]

buttons.png

[html]

  • Use an additional .buttonwrapper class span container to surround button elements 
      <span class="buttonwrapper">
        <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

.buttonwrapper input.secondary, .buttonwrapper a.secondary {
 background-color: $theme.buttonSecondaryBackgroundColor;
 color: $theme.buttonSecondaryTextColor;
}

Grouping

[preview]

grouping.png

[html]

 <h2>Group 1</h2>

[demo]

[css]

.xform h2 {
 font-size: 1.2em;
 font-weight: bold;
 margin: 2em 0 0;
}

Form Examples

[preview]

example.png

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