@ithaka/bonsai/documentation/pages/components/forms/forms-overview.md

ITHAKA core styling

---
title: Forms
description: A collection of form elements that illustrate how these elements can work together and describes how to create the form structure.
sass: ./scss/_forms.scss
foundation: http://foundation.zurb.com/sites/docs/forms.html
---

## How to use

Wrap various input elements within a form to perform an action the call to action button is pressed.
Please visit [checkboxes](checkboxes.html), [radio buttons](radiobuttons.html), [text inputs](text-inputs.html), and [dropdown-selector](dropdown-selector.html)for details on each component.

``` html_example
<form action="#">

    <h2>Example Form</h2>

    <label for="inp_1">
        <a href="inputs.html">Text Input</a>
        <input type="text" id="inp_1" name="default_with_placeholder" placeholder="placeholder text"/>
    </label>
    <br />

    <label for="select_01"><a href="select.html">Select</a></label>
    <div class="select-container">
        <select id="select_01">
            <option selected>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
        </select>
    </div>
    <br />

    <h3><a href="option-sets.html">Checkboxes and Radio Buttons</a></h3>

    <fieldset>
        <legend>Example Checkboxes</legend>
        <input type="checkbox" id="checkbox1"/>
        <label for="checkbox1">Checkbox 1</label>
        <input type="checkbox" id="checkbox2"/>
        <label for="checkbox2">Checkbox 2</label>
    </fieldset>
    <br />

    <fieldset class="mtl">
        <legend>Example Radio Buttons</legend>
        <input type="radio" name="radios" id="radio-1"/>
        <label for="radio-1">Radio 1</label>
        <input type="radio" name="radios" id="radio-2" checked="checked"/>
        <label for="radio-2">Radio 2</label>
    </fieldset>
    <br />

    <button class="button" type="submit">Submit</button>
</form>

```

<hr />

## <a name="forms-accessibility"></a> Accessibility
1. All form control tags should have an associated label. The label's `for` attribute value should match the related input `id` attribute and should also be unique to the entire page.
1. Any additional information — such as required, optional, or example text — should be wrapped within the label tags.
1. Do not replace tag-based form controls with styled `div` tags, or use JavaScript to create 'fake' form controls. Screen readers have a difficult time reading form controls that are not written in semantic HTML.
1. Ensure a minimum contrast ratio of 4.5:1 (for small text, 3:1 for large) for all states. This includes default, hover, selected, and disabled.


## Guidelines
1. Group related fields together.
1. On valid contact form completion, show the user a confirmation page.
1. On valid registration form completion, redirect the user back to the page they were previously on.
1. On valid information update form, show the user a success message at the top of the page.
1. Present fields in a single column layout.
1. Distinguish optional and required fields.
1. Explain any input or formatting requirements.
1. When input element loses focus, input data is validated and the user is notified of errors related to that field.

## Avoid
1. Using 'Reset' and 'Clear' buttons.
1. Allowing form submission when any form input is invalid or a required input is left blank.