Foundation Forms

Foundation form controls are automatically set to global styles:

All <textarea>, <select>, and <input> elements have a width of 100%, and include 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>

Labels

Use the <label> element to set labels within forms. Labels can have for and id attributes. Clicking on the label or input field focuses the input box:

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>

If you need to align labels to the right, you can use the .right class:

Example

<label class="right">

Fieldset

Foundation styles the <fieldset> element 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>

Error States

Use the .error class to style error labels, input boxes, 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>

| | You need to use JavaScript to update the error states of user inputs. | | --- | --- |