Forms

Forms consist of labels and input fields and are used when the user needs to input something into the system. A typical example could be to add a new customer or supplier to the system. The label is used to describe the input or element it belongs to.

We have two options for displaying labels; side labelling and top labelling. Carefully go through the examples before choosing one option and be very careful not to mix them. Read more about forms in the UX Guidelines.

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

Behaviour

  • Use a descriptive label.
  • Keep the label as short as you can.
  • Display the inputs in logical order and put the most important fields first.

Accessibilty

Provide clear instructions to help users understand how to complete the form and use individual form controls. Indicate any required and optional input, data formats, and other relevant information.

Use the label element to associate text with form elements explicitly. The for attribute of the label must exactly match the id of the form control.
In some situations, form controls cannot be labeled explicitly. For example, a content author might not know the id of a form field generated by a script, or that script might not add an id at all. In this case, the label element is used as a container for both the form control and the label text, so that the two are associated implicitly.

In some cases (eg. search field), the purpose of a form control may be clear enough from the context when the content is rendered visually. The label can be hidden visually, though it still needs to be provided within the code to support other forms of presentation and interaction, such as for screen reader and speech input users. Another option that you can use are the aria-label or aria-labelledby attributes to identify form controls.

Read more about about web accessibility on forms on www.w3.org


Side labelling / Horizontal forms

This is our classic design where the labels are placed to the left of their corresponding fields.

Side labelling is best used in forms with a lot of optional fields, unfamiliar data or advanced settings, as it allows users to effectively scan the labels. If you want users to slow down and carefully consider each input, side labelling is the way to go.

It is used where the space allows for both the label and its possible translations, and where cross-device usage (e.g. switching between desktop, tablet, smartphone etc) of the product is not expected.

Use the predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a <form>). Doing so changes .form-groups to behave as grid rows, so no need for .row.

					


<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail1" class="col-sm-3 control-label">Email</label>
    <div class="col-sm-9">
      <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword1" class="col-sm-3 control-label">Password</label>
    <div class="col-sm-9">
      <input type="password" class="form-control" id="inputPassword1" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-md-9 offset-md-3">
      <div class="checkbox">
        <input type="checkbox" id="checkbox1"> 
        <label for="checkbox1">Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-md-9 offset-md-3">
      <button type="submit" class="btn">Sign in</button>
    </div>
  </div>
</form>

Inline form

Add .form-inline to your form (which doesn't have to be a <form>) for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.

Example 1



Example 2



Example 3

					

<!-- Inline form - Example 1 -->



<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName1">Name</label>
    <input type="text" class="form-control" id="exampleInputName1" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn">Send</button>
</form>



<!-- Inline form - Example 2  -->



<form class="form-inline">
  <div class="form-group">
    <label for="exampleSelectOption">Choose option</label>
    <div class="select-wrapper">
       <select class="form-control"> ... </select>
    </div>
  </div>
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Name">
  </div>
  <button type="submit" class="btn">Send</button>
</form>



<!-- Inline form - Example 3  -->



<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputSearch">Search user</label>
    <input type="email" class="form-control" id="exampleInputSearch" placeholder="Search user" area-label="Search user">
  </div>
  <button type="submit" class="btn">Search user</button>
</form>

Top labelling

This is an alternative design where the labels are placed right above their corresponding fields.

Top labelling is best used for familiar data, such as addresses and credit card information. It makes good use of proximity grouping and gestalt principle, as it quickly guides the user through the flow.

It is used in contexts where cross-device use of a product is expected, and where horizontal space is an issue, but at the cost of vertical space.

					


<form>
  <div class="form-group">
    <label for="exampleInputEmail4">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail4" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
  </div>
  <div class="checkbox">
    <input type="checkbox" id="checkbox3"> 
    <label for="checkbox3">Check me out</label>
  </div>
  <button type="submit" class="btn">Submit</button>
</form>

Group boxes

Form groups using <fieldset> tag and using the grid classes col-* in order to arrange the boxes. As a title for each section you can use <legend>

Form group heading 1
Form group heading 2
Form group heading 3
Form group heading 4 
					


<form role="form" class="row form-horizontal">
  <fieldset class="col-md-6" >
    <legend>Form group heading 1</legend>
    <div class="form-group">
      <label class="col-sm-4 control-label" for="inputEmail4">Email</label>
      <div class="col-sm-8">
        <input type="text" id="inputEmail4" class="form-control" placeholder="Email">
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-4 control-label" for="Quisque">Quisque</label>
      <div class="col-sm-8">
        <span class="select-wrapper">
          <select id="Quisque" class="form-control">
            ...
          </select>
        </span>
      </div>
    </div>
    <div class="form-group disabled">
      <label class="col-sm-4 control-label" for="Disabled">Disabled</label>
      <div class="col-sm-8">
        <input type="text" id="Disabled" class="form-control" placeholder="Disabled field">
      </div>
    </div>
  </fieldset>
  ...
</form>