Code Club Style Guide

Forms

Basic Form Markup

Although it doesn't trigger any currently presentational styles, all forms must begin and end with the following markup.

You'll need to ensure that your form's method and action attributes are correct too, and any forms handling file uploads will require the enctype="multipart/form-data"; attribute to be present too.

You should wrap your form's inner elements in one or more fieldset elements. If your form has multiple sections it may be beneficial to the user to include a legend element in each fieldset, for the purposes of describing the fields contained therein. This may not be necessary on smaller, more focused forms, such as a "log in" or "search" form.

Example
<form class="c-form">
<fieldset class="c-form__fieldset">
<legend class="c-form__legend">Form Legend Text</legend>
...
</fieldset>
</form>

Labels or Placeholders?

In order to maximise the accessibility and usability of your forms, all input fields should have an accompanying <label> element. According to the WHATWG HTML specification:

The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.

The placeholder attribute should not be used as an alternative to a label. For a longer hint or other advisory text, the title attribute is more appropriate.

I short, this means that your <input> fields should have a <label> to indicate the content your user is required to enter, and an optional placeholder with an example of that data.

Here are a couple of examples. First, the bad:

Example

And the correct way to show a form field with a label:

Example

Please also make sure that your labels and inputs are semantically associated with one another using a for attribute on the label that corresponds with the id attribute on the intended input.

A note about buttons

This page doesn't contain any examples of "submit" buttons or similar. When your forms need a button, use one of the options shown on the buttons page.

If a form is your page's primary action, then you should use a green button. If it performs a destructive action then use a red button.


Basic Form Elements

Labels

Example
<label class="c-form__label">Enter your email address again</label>

In cases where the label is also intended to denote an optional or a required field, use the following extra markup:

Example
<label class="c-form__label">
Enter your email address again
<span class="c-form__label-note">(optional)</span>
</label>

Basic Input Fields

This style should be used for any field that accepts a free input of alphanumeric characters. It can contain an optional placeholder, where browser support exists.

Example
<input class="c-form__input" name="user[name]" placeholder="Grace Hopper" type="text">

Input Sizes

By default all inputs are displayed at 100% width of their containing element. If you need more control over your input sizes then use the following classes:

Example

Inline Inputs

Input fields are set to behave as a block level element. To override this behavior use the c-form__input--inline class.

Example
<input class="c-form__input c-form__input--inline c-form__input--width-s" name="user[name]" placeholder="Grace Hopper" type="text">
<input class="c-form__input c-form__input--inline c-form__input--width-s" name="user[name]" placeholder="Grace Hopper" type="text">
<input class="c-form__input c-form__input--inline c-form__input--width-s" name="user[name]" placeholder="Grace Hopper" type="text">
<input class="c-form__input c-form__input--inline c-form__input--width-s" name="user[name]" placeholder="Grace Hopper" type="text">
<input class="c-form__input c-form__input--inline c-form__input--width-s" name="user[name]" placeholder="Grace Hopper" type="text">

Textareas

When creating your textareas, remember to set the rows and cols attributes to suitable numbers. Defining the number of cols is purely in the interests of valid markup, as the style will always stretch to the full width of its parent.

Example
<textarea class="c-form__textarea" id="whatevers_textarea" name="user[whatevers]" placeholder="Lorem ipsum dolor sit amet..." rows="5" cols="40"></textarea>

Select Boxes

Example
<select name="user[selection]" id="whatevers_select" class="c-form__select">
<option>Volunteer at a club</option>
<option>Find volunteers for my club</option>
<option>Find a public club</option>
</select>

Select Box Sizes

Just like regular inputs, select boxes can be sized with the following classes:

Example

Inline Select Boxes

Select boxes are set to behave as a block level element. To override this behavior use the c-form__select--inline class.

Example

Checkboxes

Example
<label class="c-form__label">
<input name="user[terms_accepted]" type="checkbox" value="true" checked="checked">
Please accept our Terms of Service
</label>
<label class="c-form__label">
<input name="user[newsletter_signup]" type="checkbox" value="true">
Would you like to subscribe to our newsletter?
</label>
<label class="c-form__label">
<input name="user[other]" type="checkbox" value="true">
Some other question?
</label>

Radio Buttons

Example
<label class="c-form__label">
<input name="user[options]" type="radio" value="1" checked="checked">
This is the first possible answer of three.
</label>
<label class="c-form__label">
<input name="user[options]" type="radio" value="2">
And here's the second.
</label>
<label class="c-form__label">
<input name="user[options]" type="radio" value="3">
Would you look at that? It's the third option!
</label>
Example
<input type="search" class="c-form__search" placeholder="Search"/>

File Upload Inputs

Example
<input class="c-form__input" id="whatevers" name="user[whatevers]" placeholder="example@domain.com" type="file">

Creating More Useful Forms

Fields with Additional Information

Occasionally you'll need to provide the user with guidance on what kind of information your form's inputs expect. You can use the alert component to achieve this.

Example
If you are a teacher please use your school email address
<label class="c-form__label" for="whatevers">Email Address</label>
<div class="c-alert c-alert--info c-alert--inline">
<span class="c-icon c-icon--small c-icon--info-fill c-icon--white"></span>
If you are a teacher please use your school email address
</div>
<input class="c-form__input" id="whatevers" name="user[whatevers]" placeholder="example@domain.com" type="email">

Error Highlighting

Alerts can also be used to notify the user of data entry errors on individual fields.

It's often a good idea to also notify the user that errors have occured in a separate alert at the top of the page, but this might not be necessary if your form and its inline errors are the focus of the page, for example on a dedicated "log in" screen.

Example
Please provide a valid email address
<label class="c-form__label c-form__label--error" for="whatevers">Email Address</label>
<div class="c-alert c-alert--error c-alert--inline">
<span class="c-icon c-icon--small c-icon--error c-icon--white"></span>
Please provide a valid email address
</div>
<input class="c-form__input c-form__input--error" id="whatevers" name="user[whatevers]" placeholder="example@domain.com" type="email" value="user@hotmial">
Your can also use --error with other form elements:

Extra form styles

Checkbox Group

When you need a group of stylised checkboxes, use the following markup. Be careful to ensure that your labels' for attribute matches its corresponding input's id attribute.

Example
<div class="c-form__input-group">
<input class="c-form__input-group-checkbox" id="input-group-checkbox-1" name="user[terms_accepted]" type="checkbox" value="true" checked="checked">
<label class="c-form__input-group-label" for="input-group-checkbox-1">Please accept our Terms of Service</label>
<input class="c-form__input-group-checkbox" id="input-group-checkbox-2" name="user[newsletter_signup]" type="checkbox" value="true">
<label class="c-form__input-group-label" for="input-group-checkbox-2">Would you like to subscribe to our newsletter?</label>
<input class="c-form__input-group-checkbox" id="input-group-checkbox-3" name="user[other]" type="checkbox" value="true">
<label class="c-form__input-group-label" for="input-group-checkbox-3">Some other question?</label>
</div>

Radio Input Group

You can achieve a similar effect to the checkbox group with a series of radio inputs.

Example
<div class="c-form__input-group">
<input class="c-form__input-group-radio" id="input-group-radio-1" name="user[options]" type="radio" value="1" checked="checked">
<label class="c-form__input-group-label" for="input-group-radio-1">This is the first possible answer of three.</label>
<input class="c-form__input-group-radio" id="input-group-radio-2" name="user[options]" type="radio" value="2">
<label class="c-form__input-group-label" for="input-group-radio-2">And here's the second.</label>
<input class="c-form__input-group-radio" id="input-group-radio-3" name="user[options]" type="radio" value="3">
<label class="c-form__input-group-label" for="input-group-radio-3">Would you look at that? It's the third option!</label>
</div>