Scale

Style

Field sizes

Field style

Choose Your Favorite

Check these out

Field disabled

Elements of a Form

A form should be marked up using it's default HTML properties. The ones we make use of include (in hierarchical order)

  • form
  • label
  • input
  • select
  • textarea
  • button

How to Use

Make forms great and easy to use with the following rules:

  • Wrap checkboxes and radio buttons within labels for larger hit areas, and be sure to set the for, name, and id attributes for all applicable elements.
  • Series of checkboxes and radio buttons below within a ul.
  • Before selecting any set of fields to use for a required input, explore other options (e.g., radio buttons over select lists).
<form>
  <div class="large-12 columns">
    <label for="awesome-input">
      Input Label
    </label>
    <input type="text" id="awesome-input" name="awesome-input">
  </div>
</form>

Mobile first search form

Dashboard

About youA valid email address is requiredEmail confirmation not matchYou must have a password
Informations