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>
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.
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.
Full-width Single Forms
Use the class form--single
to make the first form item span the full width available.
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!