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" />

Please ensure that all form inputs have an appropriate label! Never use a placeholder instead of a label.

Inputs

Text Input

Input example

Email input

Use type="email" on the input element.

Email input example

Password input

Use type="password" on the input element.

Password input example

Search input

Use type="search" on the input element.

Search input example

Number input

Use type="number" on the input element.

Number input example

Tel input

Use type="tel" on the input element.

Input example

Date input

Use type="date" on the input element.

Input example

Month input

Use type="month" on the input element.

Input example

Time input

Use type="time" on the input element.

Input example

Colour input

Use type="color" on the input element.

Input example

Range input

Use type="range" on the input element.

Input example

File upload input

Use type="file" on the input element.

Input example

Textarea

Textarea example

Checkbox

Checkbox example

Radio

Radio buttons example

Select

Select example
Dropdown example

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 input example

Required textarea

Required textarea example

Required checkbox

Required checkbox example

Required radio buttons

Required radio buttons example

Required select

Required select example

Disabled inputs

Here are some examples of disabled inputs.

Disabled input

Add the disabled property on the input element.

Disabled input example

Disabled textarea

Add the disabled property to the textarea element.

Disabled textarea example

Disabled select

Add the disabled property to the select element.

Disabled select example

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
Required field example

Email validation

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

Email validation example

Custom validation

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

Custom validation example

Errors

Here are some examples of error messages.

Input error

Input error example
Error message.

Textarea error

Textarea error example
Error message.

Radio buttons error

Radio buttons error example
Error message.

Checkbox error

Checkbox error example
Error message.

Select error

Select error example
Error message.

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.

Inline form example

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

Inline with icon form example

You can also use a combination of text and icon.

Inline form with icon and text example