Foundation Forms

Foundation form controls are automatically set to global styles:

All<textarea>, <select>and<input>Elements are 100% width, with margins, padding, shadows, and hover effects.

Example

<form>
  Input:
  <input type="text" placeholder="Name">

  Textarea:
  <textarea rows="4" placeholder="Address"></textarea>

  Select:
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</form>

Try it Yourself »

Tags

Use in Form<label>Use the element to set labels; labels can have `for` and `id` attributes. When users click the label or the input field, the input box gains focus:

Example

<form>
  <label for="name">Input
    <input type="text" placeholder="Name" id="name">
  </label>

  <label for="adr">Label
    <textarea rows="4" placeholder="Address" id="adr"></textarea>
  </label>

  <label for="num">Select
    <select id="num">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
  </label>
</form>

Try it Yourself »

If you need to right-align labels, you can use.rightClass:

Example

<label class="right">

Try it Yourself »

Fieldset

Foundation Rendering<fieldset>The styles of the elements are as follows:

Example

<form>
  <fieldset>
    <legend>Fieldset Legend</legend>
    <label>Name
      <input type="text" placeholder="First Name..">
    </label>
    <label>Email
      <input type="text" placeholder="Enter email..">
    </label>
  </fieldset>
</form>

Try it Yourself »

Error state

Usage.errorclasses to set styles for error labels, input fields, and text areas:

Example

<form>
  <label class="error">Error
    <input type="text" placeholder="Name..">
  </label>
  <small class="error">Wrong input</small>

  <textarea rows="4" placeholder="Address"></textarea>
  <small class="error">Wrong input</small>
</form>

Try it Yourself »
Note You need to use JavaScript to update the error state of the user input.
other extensions