Forms
Forms can be a complicated pain in your website, but hopefully Front Street can help. With forms, there generally isn't always a "right" way to do something. So the framework provides default styling for most common form fields and throughout this article, we'll demonstrate how this styling can be best utilized in different layouts.
- Basic Example
- Text Inputs
- Number Inputs
- Text Areas
- Select Menus
- Checkboxes
- Radio Buttons
- Field Sizing
- Field Groups
- Field Icons
- Required Fields
- Help Text
- Fieldsets and Legends
- Form Layout
Basic Example
Below is an example of a basic contact form.
And the following demonstrates how adding the helper class text-light can effect the form fields when using them on a dark background.
Text Inputs
Number Inputs
Text Areas
Select Menus
Select Menu
Multiple Select Menu
Checkboxes
Single Checkbox
The following example shows a basic checkbox. Note that the class checkbox-label has been added to the <label>.
Checkbox Groups
For a group of checkboxes, group them in an unordered list with class checkbox-group.
- Favorite Players
- Favorite Players
And if you'd like your checkbox group to be within a <fieldset> with a <legend>, you can do that, as well.
Inline Checkbox Groups
To display your .checkbox-group fields inline, add class checkbox-group-inline.
- Favorite Players
- Favorite Players
Radio Buttons
Radio Groups
For a group of radioes, group them in an unordered list with class radio-group.
- Favorite Player
- Favorite Player
And if you'd like your radio group to be within a <fieldset> with a <legend>, you can do that, as well.
Inline Radio Groups
To display your .radio-group fields inline, add class radio-group-inline.
- Favorite Player
- Favorite Player
Field Sizing
For different size <input> fields add classes field-xs, field-sm, field-lg, field-xl, field-xxl or field-xxxl.
And the same classes can be added <select> fields, as well.
Field Groups
Fields and buttons can easily be put into horizontal groups by adding them within an element with class field-group. This is necessary when you want the elements within to equally span the row.
Multiple fields will automatically adjust to fit, as well.
Slightly more complex uses with labels can be also utilized here.
And using matching sizes on your fields and buttons can adjust the overall field group sizes.
And your .field-group elements can also contain <select> menus, too.
Field Icons
Adding Font Awesome icons into your form fields is easy. Wrap a form field <input> or <select> menu in an element with class field-icon and add your icon within.
Below is a practical example of an <input> meant to serve as a simple search field. We've taken a standard <input> and wrapped it in a <div> with class field-icon. And then, we just add the Font Awesome icon in, as normal.
And next is an example of a <select> menu. Again, we've just wrapped it in a <div> with class field-icon and added the icon within.
Your .field-icon elements can also contain different field sizes. However in addition to your properly sized field, on your .field-icon wrapper, you need to also add the matching size class — field-icon-xs, field-icon-sm, field-icon-lg, field-icon-xl, field-icon-xxl or field-icon-xxl.
And of course, sizing works with <select> menus, too.
Looking to combine .field-icon elements with .field-group elements? No problem.
And here's another practical example combining field groups and icons with more fields.
Required Fields
For letting the user know that a field is required, add <span class="required">*</span> within its label.
Help Text
To give the user a description for a field, add a <span> with class help-text below the field.
Please fill in your first and last name.
Please fill in your first and last name.
And if you're inserting your .help-text elements dynamically, you can also utilize contextual classes, if applicable — success, info, warning, and danger.
Oops! You forgot to enter your name.
Please fill in your first and last name.
Fieldsets and Legends
When working with more complex forms, it's often good practice to group related fields with <fieldset>. And when doing this, you can use <legend> to give that group of fields a title. Front Street styles <legend> and <label> similarly, with <legend> being a little larger.
The following example demonstrates the hierarchy of <legend> and <label> within a <fieldset>.
And next, this is a slightly different way of accomplishing the same concept. But instead of using a <label> for each field, we're just relying on .help-text descriptions below each field, instead.
Form Layout
In the beginning of the article there is a basic example of a contact form. Utilizing grid classes we can expand our form layouts.
And here's an example of a standard comment form, utilizing required fields.
And last, we've got a more complex example bringing together fieldsets, legends, and grids.