Forms


Inputs

description of the field
description of the field

Inline/Horizontal Inputs

Inputs info

  • All form components must be inside a <div class="fg">
  • Default state is: Label above form field (like a block element). This improve form's readibility.
  • All text input must have the class="text"
  • But we can display inline forms items wrapping form elements with the class="fh"
  • Size class: Input can have one of those classes: large or small
  • We can insert field annotations width: <small>notes</small>
  • To show an error in an input we must add class="fg_error" to the wrapper element.
  • If we want that the field show a placeholder text we must add attribute placeholder="text" in the input

Selects / Dropdown

description of the field

Textarea

description of the field

Dropdown & Text area info

  • All form components must be inside a <div class="fg">
  • Default state is: Label above form field (like a block element). This improve form's readibility.
  • Size class: Combos can have one of those classes: large or small
  • We can display inline forms items wrapping form elements with the class="fh"
  • We can insert field annotations width: <small>notes</small>
  • To show an error in an input we must add class="fg_error" to the wrapper element.

Checkbox

Radio

Checkbox & Radio info

  • This is a checkbox structure:
    <div class="fg checkboxGroup">
      <label>Checkbox Group</label>
      <div class="options">
        <div class="option">
          <input type="checkbox" id="name" class="checkbox">
          <label for="name">option 1</label>
        </div>
        <div class="option">
          <input type="checkbox" id="name" class="checkbox">
          <label for="name">option 2</label>
        </div>
      </div>
    </div>
  • This is a Radiogroup structure:
    <div class="fg radioGroup">
      <label>Radio Group</label>
      <div class="options">
        <div class="option">
          <input type="radio" id="name" class="radio">
          <label for="name">option 1</label>
        </div>
        <div class="option">
          <input type="radio" id="name" class="radio">
          <label for="name">option 2</label>
        </div>
      </div>
    </div>
  • To show inline checkbox or radios you must wrap your form component in a class="fh"

Componente Multiselección

Multiselección Info

  • Dependendencia de jquery.localisation.min.js (documentado en la sección de textos)
  • Creación: $(".multiselect").multiselect();
  • El combo utiliado deberá tener la propiedad multiple="multiple"