Branding & Style Guide

3 form Form

These are the default form styles applied to HTML elements.

Source: styles.scss, line 23
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.

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_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: base/_form.scss, line 1
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: base/_form.scss, line 344