City of Tampa Pattern Library

Basic Form

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.


<form>
  <div class="form-group">
    <label for="inputName3" class="col-sm-2 control-label">Name</label>
    <div>
      <input type="text" class="form-control" id="inputName3" placeholder="Name" required>
    </div>
  </div>
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div>
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email" required>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div>
      <input type="password" class="form-control" id="inputPassword3" required>
    </div>
  </div>
  <div class="form-group">
    <label for="comment-box" class="col-sm-2 control-label">Comments</label>
    <div>
      <textarea id="comment-box"  class="form-control" rows="3"></textarea>
    </div>
  </div>
  <div class="form-group">
    <div>
      <div class="radio">
        <label>
          <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
          Option one
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
          Option two
        </label>
      </div>
      <div class="radio disabled">
        <label>
          <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
          Option three is disabled
        </label>
      </div>
    </div>
  </div>
  <hr>
  <div class="form-group">
    <div>
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div>
      <button type="submit" class="btn btn-standard">Sign in</button>
    </div>
  </div>
</form>

Button Groups

<div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>

Dropdown

Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declaresposition: relative;. Then add the menu's HTML.

<div class="dropdown">
  <button class="btn btn-standard dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Filter Form

Filter list form control with refresh glyphicon in input field.

<form class="form-inline" action="" method="get" accept-charset="UTF-8">
    <div class="form-group">
    <label class="control-label" for="filter">Filter list:</label>
      <div class="input-group">
        <input class="form-control form-text" type="text" name="title" value="" size="30" maxlength="128" autocomplete="off" aria-autocomplete="list">
        <span class="element-invisible" aria-live="assertive"></span>
        <span class="input-group-addon"><i class="icon glyphicon glyphicon-refresh" aria-hidden="true"></i></span>
      </div>
    </div>
    <div class="form-group">
      <button class="btn btn-info form-submit btn-sm btn-block" value="Filter" type="submit">Filter</button>
    </div>
</form>

Horizontal Form

Use Bootstrap's 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="inputName3" class="col-sm-2 control-label">Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputName3" placeholder="Name" required>
    </div>
  </div>
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email" required>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password" required>
    </div>
  </div>
  <div class="form-group">
    <label for="comment-box" class="col-sm-2 control-label">Comments</label>
    <div class="col-sm-10">
      <textarea id="comment-box"  class="form-control" rows="3"></textarea>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="radio">
        <label>
          <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
          Option one
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
          Option two
        </label>
      </div>
      <div class="radio disabled">
        <label>
          <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
          Option three is disabled
        </label>
      </div>
    </div>
  </div>
  <hr>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-standard">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.

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

Input w/Icon

Flexbox controled add-ons for input fields, for icons/images/text/buttons. FontAwesome required if you want icons as demonstrated below. Bootstrap icons can however be used as is. Caution: This input form box with button will maintain the button along side the input field even on mobile, do not use wide button elements like search box allows for.

GO
<!-- appending -->
<div class="form-group">
  <label for="inputAddOn1" class="col-sm-2 control-label">Search</label>
  <div>
    <div class="inputAddOn">
          <input type="email" class="form-control inputAddOn-field" id="inputAddOn1" placeholder="Email" required>
          <span class="inputAddOn-item">GO</span>
    </div>
  </div>
</div>

<!-- prepending -->
<div class="form-group">
  <label for="inputAddOn2" class="col-sm-2 control-label">Add Item</label>
  <div>
    <div class="inputAddOn">
        <span class="inputAddOn-item"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span></span>
        <input type="email" class="form-control inputAddOn-field" id="inputAddOn2" placeholder="Enter Search Query" required>
    </div>
  </div>
</div>

<!-- both -->
<div class="form-group">
  <label for="inputAddOn3" class="col-sm-2 control-label">Email</label>
  <div>
    <div class="inputAddOn">
        <span class="inputAddOn-item"><i class="fa fa-envelope-o" aria-hidden="true"></i></span>
        <input type="email" class="form-control inputAddOn-field" id="inputAddOn3" placeholder="Add Item" required>
        <button class="inputAddOn-item"><i class="fa fa-share" aria-hidden="true"></i></button>
    </div>
  </div>
</div>

Search Box

A form without padding so that the input box and button are touching. Simply add .no-col-padding to the row to eliminate padding so the columns touch. This pattern is different from input w/icon in the way it collpases for mobile, the button will become full width on mobile.

<div class="row row-padding no-col-padding">
    <form class="form" action="" method="get" accept-charset="UTF-8">
        <div class="form-group col-sm-5 col-sm-offset-3">
            <input class="form-control form-text" type="text" name="title" value="" autocomplete="off" aria-autocomplete="list" placeholder="Enter a Keyword..." required>
            <span class="element-invisible" aria-live="assertive"></span>
        </div>
        <div class="form-group col-sm-2">
          <button class="btn btn-info form-submit btn-sm btn-block" value="Filter" type="submit"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> Find Services</button>
        </div>
    </form>
</div>

Sign In Form

A template for signing a user into a website or app. Click-able elements are positioned with enough space in between them for proper touch controls.

Sign in or create an account
Reset Password
<form>
    <fieldset>
        <legend>Sign in</legend>
        <span>or <a href="#">create an account</a></span>
        <div class="form-group">
            <label for="username">Username or email address</label>
            <input type="text" class="form-control" id="username" placeholder="jane.doe@example.com" autocapitalize="off" autocorrect="off" required>
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" class="form-control" id="password" name="password" required>
        </div>

        <a href="ResetPassword.aspx">Reset Password</a>

        <div class="row">
            <div class="col-xs-4  col-xs-offset-7 text-right col-md-5 col-md-offest-7">
                <button type="submit" class="btn btn-standard btn-block">Sign in</button>
            </div>
        </div>
    </fieldset>
</form>

Tracking Form

Tracking form template example.

Track your City business.
Log in or sign up today.
<div class="row tracking-form">
  <div class="col-md-3"><h5>Track your City business.</h5>
    <a class="cot-text-lrg" href="/appl_MyTampaGov/index.asp?strRedirect_Page=/appl_customer_service_center/index.asp"> Log in or sign up today.</a></div>
  <div class="col-md-9">
    <form class="form row">
      <!--<legend>Track or update a prior request</legend> -->
        <div class="form-group col-md-4">
          <label for="strMsgRootID">Tracking Number</label>
          <input type="text" class="form-control" id="strMsgRootID" name="strMsgRootID" required placeholder="45-678-91" required>
        </div>
        <div class="form-group col-md-4">
          <label for="strAccessKey">Access Key</label>
          <input type="text" class="form-control" id="strAccessKey" name="strAccessKey" required placeholder="45-64897" required>
        </div>
        <div class="form-group col-md-4">
            <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-tag" aria-hidden="true"></span> Check Status</button>
        </div>
    </form>
  </div>
</div>