Tales includes modular HTML & CSS components you may find useful when developing a child theme. This page covers the form, label, field classes.

---

Forms can be marked up with the following classes:

<form class="form">
    <ul class="form__list">
        <li class="form__item"> <!-- field --> </li>
    </ul>
</form>

Add label and field pairs inside the form__item elements. Use the class field for all text inputs and textarea elements.

<li class="form__item">
    <label for="your-name">Your Name</label>
    <input class="field" type="text" id="your-name">
</li>

• Email Address
• Password

Jump to example code below.

Aligned Forms

Use the class form--aligned to align labels and fields side-by-side. This style only exists for larger viewports (min-width: 640px).

Aligned forms will not take effect in IE7–8.

• Email Address
• Password
• Remember me

Create inline checkboxes with the class label--checkbox (move the input element inside the label). Wrap the label text with span to highlight it when checked.

<label class="label--checkbox">
    <input type="checkbox"> <span>Remember me</span>
</label>

Inline Forms

Use the class form--inline to make form items flow inline.

• Email Address
• Password

Full-width Single Forms

Use the class form--single to make the first form item span the full width available.

• Search

Example Code

<form class="form">
    <ul class="form__list">
        <li class="form__item">
            <label for="form-email">Email Address</label>
            <input class="field" type="email" id="form-email" placeholder="[email protected]…">
        </li>
        <li class="form__item">
            <label for="form-password">Password</label>
            <input type="password" class="field" id="form-password">
        </li>
        <li class="form__item">
            <input type="submit" value="Login">
        </li>
    </ul>
</form>

---

And that's forms!