Forms

Fieldsets

Fieldsets are a semantic grouping of related form elements. The first element inside the fieldset should be a legend element, which provides a label for the group.

Correct fieldset usage

<fieldset>
  <legend>Legend text</legend>
  <label for="f-name">Label text</label>
  <input id="f-name" type="text" name="" />
</fieldset>

Incorrect fieldset usage

<div>
  <p>Legend text</p>
  <label for="f-name">Label text</label>
  <input id="f-name" type="text" name="" />
</div>

Screenreaders

If you wish to hide the legend but still have it present for screenreaders, use the class screenreaders-only.

For the purpose of demonstrations below (except checkbox and radio buttons) the legend is being hidden using screenreaders-only.

Labels

Screen readers go into forms mode when they encounter form input fields. Unless form elements have labels associated with them, the screen reader cannot tell the user what data needs to be entered.

Adding a for attribute to the label and an id to the input field tells the screen reader that the input field has a label.

Correct label usage

<label for="f-name">First name</label>
<input id="f-name" type="text" name="" />

Incorrect label usage

 First name
<input type="text" name="" />

Don't use the placholder attribute as a replacement for the label.

 First name
<input type="text" name="" placeholder="First name" />

Inputs

Text Input

Email input

Use type="email" on the input element.

Password input

Use type="password" on the input element.

Search input

Use type="search" on the input element.

Number input

Use type="number" on the input element.

Tel input

Use type="tel" on the input element.

Date input

Use type="date" on the input element.

Month input

Use type="month" on the input element.

Time input

Use type="time" on the input element.

Colour input

Use type="color" on the input element.

Range input

Use type="range" on the input element.

File upload input

Use type="file" on the input element.

Textarea

Checkbox

Radio

Select

Dropdown

Buttons

Required inputs

Here are some examples of required inputs.

The aria-required attribute informs screen readers that input fields require a value. The data-required attribute can be used to display a * symbol next to the label.

Required input

Required textarea

Required checkbox

Required radio buttons

Required select

Disabled inputs

Here are some examples of disabled inputs.

Disabled input

Add the disabled property on the input element.

Disabled textarea

Add the disabled property to the textarea element.

Disabled select

Add the disabled property to the select element.

Validation

You can add validation to any form by using the data-validate="" attribute.

<form data-validate=""></form>

Required validation

• the data-required attribute can be used to display a * symbol next to the label
• the aria-required attribute informs screen readers that input fields require a value
• the data-error attribute is used to display an error message to the user

Email validation

To validate if an email address is valid use data-pattern="email"

Custom validation

You can use a custom regex pattern to validate the field.

Errors

Here are some examples of error messages.

Input error

Textarea error

Radio buttons error

Checkbox error

Select error

Error message

You can display a general error above the form content. An example would be displaying an error message received from the server.

Inline Form

Inline forms are one exception to the rule of always using a label with an input . In this case use a combination of aria-label and placeholder to inform users.

You can choose to use an icon instead by using the button element.

You can also use a combination of text and icon.