Branding & Style Guide

4 form Form

These are the default form styles applied to HTML elements. For error states, these are triggered via JavaScript handlers only upon user submisson.

Source: sass/styles.scss, line 29
Example
Legend

Wafer biscuit chupa chups donut. Cheesecake dragée macaroon. Bear claw candy canes jelly cake tootsie roll chocolate caramels candy. Chocolate bar toffee candy canes caramels cookie soufflé. Danish powder pie bonbon pastry carrot cake candy. Candy fruitcake jelly-o sweet roll gingerbread toffee chupa chups.

This example demonstrates the default state of a required input element.

This example demonstrates the error state of a required input element.

Radio Buttons:

Checkboxes:

Markup: base/form_html.twig
<fieldset>
  <legend>Legend</legend>
  <p>
    Wafer biscuit chupa chups donut. Cheesecake dragée macaroon. Bear claw candy
    canes jelly cake tootsie roll chocolate caramels candy. Chocolate bar toffee
    candy canes caramels cookie soufflé. Danish powder pie bonbon pastry carrot
    cake candy. Candy fruitcake jelly-o sweet roll gingerbread toffee chupa
    chups.
  </p>
</fieldset>

<form>
  <p><label for="text_field">Text Field:</label>
    <input type="text" id="text_field">
  </p>

  <p><label for="text_field">Invalid Text Field:</label>
    <input type="text" id="text_field" required>
    <div class="description">This example demonstrates the default state of a required input element.</div>
  </p>

  <p><label for="text_field">Error Text Field:</label>
    <input type="text" id="text_field" required class="error">
    <div class="description">This example demonstrates the error state of a required input element.</div>
  </p>

  <p><label for="text_field_disabled">Disabled Text Field:</label>
    <input type="text" id="text_field_disabled" disabled="" value="I'm disabled">
  </p>

  <p><label for="text_field_readonly">Readonly Text Field:</label>
    <input type="text" id="text_field_readonly" readonly="" value="I'm readonly">
  </p>

  <p><label for="text_area">Text Area:</label>
    <textarea id="text_area" style="margin: 0px; width: 357px; height: 69px;"></textarea>
  </p>

  <p><label for="text_area_disabled">Disabled Text Area:</label>
    <textarea id="text_area_disabled" disabled="">I'm disabled</textarea>
  </p>

  <p><label for="text_area">Readonly Text Area:</label>
    <textarea id="text_area" readonly="">I'm readonly</textarea>
  </p>

  <p><label for="select_element">Select Element:</label>
    <select id="select_element">
      <optgroup label="Option Group 1">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
      </optgroup>
      <optgroup label="Option Group 2">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3" disabled="">Disabled Option</option>
      </optgroup>
    </select>
  </p>

  <p><label for="select_element_disabled">Disabled Select Element:</label>
    <select id="select_element_disabled" disabled="">
      <option value="1">Unselectable Option</option>
      <option value="2">This option should not even be seen</option>
    </select>
  </p>

  <p>Radio Buttons:
    <input type="radio" class="radio" name="radio_button" value="radio_1">
      <label for="radio1">Radio 1</label>
    <input type="radio" class="radio" name="radio_button" value="radio_2">
      <label for="radio2">Radio 2</label>
    <input type="radio" class="radio" name="radio_button" value="radio_3">
      <label for="radio3">Radio 3</label>
    <input type="radio" class="radio" name="radio_button" value="radio_4" disabled="">
      <label for="radio4">Radio Disabled</label>
  </p>

  <p>Checkboxes:
    <input type="checkbox" class="checkbox" name="checkboxes" value="check_1">
      <label for="check_1">Checkbox 1</label>
    <input type="checkbox" class="checkbox" name="checkboxes" value="check_2">
      <label for="check_2">Checkbox 2</label>
    <input type="checkbox" class="checkbox" name="checkboxes" value="check_3">
      <label for="check_3">Checkbox 3</label>
    <input type="checkbox" class="checkbox" name="checkboxes" value="check_4" disabled="">
      <label for="check_4">Checkbox Disabled</label>
  </p>

  <p><label for="password">Password:</label>
    <input type="password" class="password" id="password">
  </p>

  <p><label for="file">File Input:</label>
    <input type="file" class="file" id="file">
  </p>

</form>
Source: sass/base/_form.scss, line 1

4.2 form.html5 Form HTML5

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Some elements shown are considered to be experimental, and do not have full cross-browser support at this time.

Example

42

350 degrees

Markup: base/form_html5.twig
<form>


  <p><label for="email">Email:</label>
    <input type="email" id="email">
  </p>

  <p><label for="url">URL:</label>
    <input type="url" id="url">
  </p>

  <p><label for="tel">Telephone:</label>
    <input type="tel" id="tel">
  </p>

  <p><label for="number">Number:</label>
    <input type="number" id="number" min="0" max="10" step="1" value="5">
  </p>

  <p><label for="search">Search:</label>
    <input type="search" id="search">
  </p>

  <p><label for="date">Date:</label>
    <input type="date" id="date">
  </p>

  <p><label for="datetime">Datetime:</label>
    <input type="datetime" id="datetime">
  </p>

  <p><label for="datetime-local">Datetime-local:</label>
    <input type="datetime-local" id="datetime-local">
  </p>

  <p><label for="time">Time:</label>
    <input type="time" id="time">
  </p>

  <p><label for="color">Color:</label>
    <input type="color" id="color">
  </p>

  <p><label for="datalist">Datalist:</label>
    <input list="browsers" name="browser" type="datalist" id="datalist">
    <datalist id="browsers">
      <option value="Internet Explorer">
      </option>
      <option value="Firefox">
      </option>
      <option value="Chrome">
      </option>
      <option value="Opera">
      </option>
      <option value="Safari">
      </option>
    </datalist>
  </p>

  <p><label for="range">Range:</label>
    <input type="range" id="range" name="points" min="1" max="10">
  </p>

  <p><label for="output">Output:</label>
    <output name="result" id="output">42</output>
  </p>

  <p><label for="progress">Progress:</label>
    <progress id="progress" value="65" max="100"></progress>
  </p>

  <p><label for="meter">Meter:</label>
    <meter id="meter" min="200" max="500" value="350">350 degrees</meter>
  </p>

  <p>
    <button class="button">Button Element</button>
  </p>

  <p>
    <input class="button" type="reset" value="Clear">
  </p>

  <p>
    <input class="button" type="submit" value="Submit">
  </p>

</form>
Source: sass/base/_form.scss, line 444