Forms
Use the form class on a <div> or a <section> enclosing a group of form controls.
Each row of the form must be enclosed in a block element with class form-row.
Inside it, place a <label> and an input enclosed in a <div> with class form-field.
<div class="form">
<div class="form-row">
<label for="f_title">Title:</label>
<div class="form-field">
<input id="f_title" type="text" size="24" placeholder="Enter title" />
</div>
</div>
<div class="form-row">
<label for="f_color">Color:</label>
<div class="form-field">
<select id="f_color">
<option>Red</option>
<option selected>Blue</option>
<option>Green</option>
</select>
</div>
</div>
<div class="form-row">
<label for="f_date">Start date:</label>
<div class="form-field">
<input id="f_date" type="date" />
</div>
</div>
</div>
Form footer
Enclose submit and other buttons in a form-footer element. The primary
action in the form, usually the submit button, should have the accent class.
Dangerous actions, e.g. actions that have a destructive effect, should use the
danger class and preferrably placed far from the primary one.
<div class="form">
<form>
<div class="form-row">
<label for="f_title_2">Title:</label>
<div class="form-field">
<input id="f_title_2" type="text" size="24" placeholder="Enter a title" />
</div>
</div>
<div class="form-footer">
<input type="submit" class="accent" value="Order" />
<input type="reset" value="Cancel" />
<input type="submit" class="danger" value="Delete" />
</div>
</form>
</div>