UI Toolkit

Form Templates

Patterns for some of the most commonly used forms on MAX applications.

More Information in the WCAG 2.0 Guidelines

G161: Providing a search function to help users find content

Search Form Requires MAX Custom Bootstrap Stylesheet

Use HTML 5 Input Types

When you use the appropriate input type="search" on a search input, modern browsers will provide useful controls for users (and older browsers will handle it just fine).

<form>
  <div class="input-group">
    <input type="search" class="form-control" placeholder="Search this site">
    <div class="input-group-btn">
      <button type="button" class="btn btn-primary"><span class="fa fa-search"></span> Search</button>
    </div>
  </div>
</form>

Back to Top

Login Form Requires MAX Custom Bootstrap Stylesheet

Use Email Address as Username

Whenever possible, use email address instead of username. This has several benefits, including:

It is guaranteed to be unique.
It means there is one less thing for a user to remember.
It eliminates the need for a user to choose a username, eliminating a step in the registration process.
It ensures that you have a user’s actual contact information (assuming you’re performing email confirmation).

Use HTML 5 Input Types

When you use the appropriate input type="email" on an email input, modern browsers will provide useful controls for users (and older browsers will handle it just fine). Modern browsers will also do basic client-side validation.

Don’t Leave Users Helpless

Ensure that you give users a method to recover their password (and their username if applicable).

<form>
  <h4>Login</h4>
  <div class="form-group">
    <label for="exampleInputEmail1">Username or Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember Me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Login</button>
  <div class="pull-right small"><a href="#">Forgot your Username/Password?</a></div>
</form>

Back to Top

User Lookup Form Requires MAX Custom Bootstrap Stylesheet Requires MAX Custom Bootstrap JavaScript

Find Users

Starts With Contains

Guide Users Whenever Possible

In this example, the Bureau select is disabled until a Department or Agency that has multiple bureaus is selected. We could also choose to hide the Bureau select entirely until that point, but adding and removing form elements can be jarring for users.

<form>
  <h4>Find Users</h4>
  <section class="row">
    <div class="col-md-8">
      <label class="sr-only" for="firstname">First Name</label>
      <input type="text" class="form-control bumper" id="firstname" placeholder="First Name">
    </div>
    <div class="col-md-4">
      <label class="radio small">
        <input type="radio" name="first-params" value="option1" checked> Starts With
      </label>
      <label class="radio small">
        <input type="radio" name="first-params" value="option2"> Contains
      </label>
    </div>
  </section>
  <section class="row">
    <div class="col-md-8">
      <label class="sr-only" for="lastname">Last Name</label>
      <input type="text" class="form-control bumper" id="lastname" placeholder="Last Name">
    </div>
    <div class="col-md-4">
      <label class="radio small">
        <input type="radio" name="last-params" value="option1" checked> Starts With
      </label>
      <label class="radio small">
        <input type="radio" name="last-params" value="option2"> Contains
      </label>
    </div>
  </section>
  <section class="row">
    <div class="col-md-8">
      <label class="sr-only" for="email">Email Address</label>
      <input type="email" class="form-control bumper" id="email" placeholder="Email Address">
    </div>
    <div class="col-md-4">
      <label class="radio small">
        <input type="radio" name="email-params" value="option1"> Starts With
      </label>
      <label class="radio small">
        <input type="radio" name="email-params" value="option2" checked> Contains
      </label>
    </div>
  </section>
  <section class="row">
    <div class="col-xs-12">
      <select class="form-control" id="user-dept">
        <option value="" selected disabled>Department/Agency</option>
        <option value="ahp">Affordable Housing Program</option>
        <option value="cia">Central Intelligence Agency</option>
        <option value="cfpb">Consumer Financial Protection Bureau</option>
        <option value="cpb">Corporation for Public Broadcasting</option>
        <option value="doa">Department of Agriculture</option>
        <option value="" disabled>&vellip;</option>
      </select>
    </div>
  </section>
  <section class="row">
    <div class="col-xs-12">
      <select class="form-control" disabled id="user-bureau">
        <option value="" selected disabled>Bureau</option>
        <option>Agricultural Marketing Service</option>
        <option>Agricultural Research Service</option>
        <option>Animal and Plant Health Inspection Service</option>
        <option>Buildings and Facilities</option>
        <option>Department of Agriculture</option>
        <option value="" disabled>&vellip;</option>
      </select>
    </div>
  </section>
  <section class="row">
    <div class="col-xs-12">
      <button type="button" class="btn btn-primary"><i class="fa fa-search"></i> Search</button>
    </div>
  </section>
</form>

Back to Top