Forms
Contents
Default form styling
Forms receive no default styling in Odin, so any custom CSS you write will not conflict with default styling.
Basic form styling
If you do want some basic styling added without writing custom CSS, a class form-basic is provided to give some styling to forms.
Inputs are given a light gray border until they receive focus. The following input types are supported: text, tel, url, search, number, range, date, time, datetime-local, week, month, color, file, radio, and checkbox. In addition, textareas and select elements receive similar styling.
The border is removed on the fieldset element. Instead, the legend element has a bottom border applied. Fieldsets and legends are used to group the form elements demonstrated below.
Buttons can be created using either button or input elements. While buttons in a form-basic do not receive any default styling, Odin button classes can be used. In the example below, the button-primary and button-secondary classes were used to style the form buttons.
<form class="form-basic">
<fieldset>
<legend>Some form fields</legend>
<label for="some_text">Enter some text:</label>
<input id="some_text" type="text" name="some_text">
<br>
<label for="one">
<input id="one" type="radio" name="choice">Choice 1
</label>
<label for="two">
<input id="two" type="radio" name="choice">Choice 2
</label>
<label for="three">
<input id="three" type="radio" name="choice">Choice 3
</label>
<br>
<label for="check_it">
<input id="check_it" type="checkbox" name="check_it">Check this box.
</label>
</fieldset>
<fieldset>
<legend>More form fields</legend>
<label for="another_choice">Another choice:</label>
<select id="another_choice">
<option value="">Select one...</option>
<option value="one">Choice 1</option>
<option value="two">Choice 2</option>
<option value="three">Choice 3</option>
</select>
<br>
<label for="more_text">Enter more text:</label>
<textarea id="more_text" name="more_text"></textarea>
</fieldset>
<fieldset>
<legend>Buttons</legend>
<button class="button-primary" type="button">A Button!</button>
<input class="button-secondary" type="button" value="Another button!">
</fieldset>
</form>
Disabled form elements
Elements given a disabled attribute are grayed out and the cursor changes on mouse over.
<label for="some_text">You can't enter text here:</label>
<input id="some_text" type="text" name="some_text" disabled>
<br>
<label for="cant_check_this">
<input id="cant_check_this" type="checkbox" name="cant_check_this" disabled>You cant check this box.
</label>
Form validation
Special automatically validating type such as email and url and elements marked as required or given a pattern attribute will be given a red border when invalid. Use the HTML5 pattern attribute to validate fields such as phone numbers that do not have built-in validation. A form-hint class is provided style special instructions.
<label for="name">Name:</label>
<input id="name" type="text" name="name" required>
<span class="form-hint">Required</span>
<br>
<label for="email">Email:</label>
<input id="email" type="email" name="name">
<span class="form-hint">Enter a valid email address</span>
<br>
<label for="phone">Phone:</label>
<input id="phone" type="tel" name="phone" pattern="\d{3}[\-]\d{3}[\-]\d{4}">
<span class="form-hint">123-456-7890</span>
Stacked form
Using the class form-stack will reflow the form so that input elements (with the exception of checkbox and radio) are displayed below their labels. An optional class form-wide has also been applied so that inputs occupy 100% of their containing element's width.
<form class="form-basic form-stack form-wide">
<label for="name">Name:</label>
<input id="name" type="text" name="name">
<label for="email">Email:</label>
<input id="email" type="text" name="email">
<label for="comments">Comments:</label>
<textarea id="comments"></textarea>
<button type="submit">Submit</button>
</form>
Responsive Forms
Aligned form
In this example, a grid is used to create an aligned form. On smaller screens, the columns will stack. In case you're wondering, it is perfectly fine to include a grid-based form inside a column of a larger grid.
<form class="form-basic form-wide">
<div class="row gutter-none">
<div class="col-md-2">
<label for="name">Name:</label>
</div>
<div class="col-md-10">
<input id="name" type="text" name="name">
</div>
</div>
<div class="row gutter-none">
<div class="col-md-2">
<label for="email">Email:</label>
</div>
<div class="col-md-10">
<input id="email" type="email" name="email">
</div>
</div>
<div class="row gutter-none">
<div class="col-md-2">
<label for="comments">Comments:</label>
</div>
<div class="col-md-10">
<textarea id="comments" name="comments"></textarea>
</div>
</div>
<div class="row gutter-none">
<div class="col-md-2">
<!-- nothing here -->
</div>
<div class="col-md-10">
<button type="button">Submit</button>
</div>
</div>
</form>
Multi-column form
Here's an example of a more complicated form layout using a grid. You can create your own custom classes to enhance the form even more.
<form class="form-basic form-stack form-wide">
<fieldset>
<legend>Ship To</legend>
<div class="row">
<div class="col-md-6">
<label for="first_name">First name:</label>
<input id="first_name" type="text" name="first_name">
</div>
<div class="col-md-6">
<label for="last_name">Last name:</label>
<input id="last_name" type="text" name="last_name">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<label for="address">Address:</label>
<input id="address" type="text" name="address">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="city">City:</label>
<input id="city" type="text" name="city">
</div>
<div class="col-sm-6 col-md-3">
<label for="state">State:</label>
<select id="state">
<option value="">Select one...</option>
<option value="">Alabama</option>
<option value="">Alaska</option>
<option value="">Arizona</option>
</select>
</div>
<div class="col-sm-6 col-md-3">
<label for="zip">Zip Code:</label>
<input id="zip" type="text" name="zip">
</div>
</div>
</fieldset>
<fieldset>
<legend>Contact Info</legend>
<div class="row">
<div class="col-md-6">
<label for="email">Email:</label>
<input id="email" type="text" name="email">
</div>
<div class="col-md-6">
<label for="phone">Phone:</label>
<input id="phone" type="text" name="phone">
</div>
</div>
</fieldset>
<fieldset>
<legend>Payment Details</legend>
<div class="row">
<div class="col-md-6">
<label for="card_num">Credit Card Number:</label>
<input id="card_num" type="text" name="card_num">
</div>
<div class="col-sm-4 col-md-2">
<label for="state">Exp Month:</label>
<select id="month">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
</div>
<div class="col-sm-4 col-md-2">
<label for="state">Exp Year:</label>
<select id="year">
<option value="">2016</option>
<option value="">2017</option>
<option value="">2018</option>
</select>
</div>
<div class="col-sm-4 col-md-2">
<label for="cvn">CVN:</label>
<input id="cvn" type="text" name="cvn">
</div>
</div>
</fieldset>
<div class="row">
<div class="col-xs-12 push-right">
<button type="submit">Place Order</button>
</div>
</div>
</form>