Basics

Form elements

Standard HTML form elements

Forms should be clear and simple. Only ask for information you absolutely need.

  • They should be organized in a logical manner.
  • Provide clear instructions about what information is desired.
  • If you ask for optional information, mark the labels of optional fields with '(optional)'
  • Do not mark mandatory fields with asterisks.

Read the official Bootstrap documentation for forms.

The <form> element

This element represents a document section that contains interactive controls to submit information to a web server.

Top of page

The <fieldset> and <legend> elements

The <fieldset> element provides a container for related form controls, and the <legend> element acts as a heading to identify the group.

Top of page

The <input> element with text-based input fields

Text boxes allow the user to input a simple text value. A text box only allows for a single line of input.

Use the input-lg class to create large input elements.

Top of page

The <input> element with checkboxes and radios

Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

Top of page

The <textarea> element

Users need to input an extended, potentially multi-line text value. Change rows attribute as necessary.

Top of page

The <label> element

Top of page

The <select> element

Avoid select boxes if at all possible. Use radio buttons, checkboxes or free text boxes instead.

Reasons for avoiding:

  • Choices are hidden from users and interaction is needed to show all answers.
  • Users find them hard to use and they usually contain too many options.
  • They can cause accessibility issues and are harder to use on a mobile device.

Top of page