Forms
Forms and form elements in action.

Create an Account
Please provide us with some information.

help inline text.

Example block-level help text here.

This is a separate form section.

Example markup for a form:

<div class="py2">
  <div class="form-wrap">
    <form action="#" class="form" role="form">
      <h2 class="form-info">
        Create an Account <br>
        <small>Please provide us with some information.</small>
      </h2>
      <div class="form-group">
        <label for="name">Name</label>
        <span class="help-inline">help inline text.</span>
        <input type="text" placeholder="Your Name" class="form-control">
      </div>
      <div class="form-group">
        <label for="email">Email</label>
        <input type="email" placeholder="user@example.com" class="form-control">
        <p class="help-block">Example block-level help text here.</p>
      </div>
      <div class="form-section">
        <div class="form-group">
          <label for="password">Password</label>
          <input type="password" class="form-control">
        </div>
      </div>
      <div class="form-section">
        <div class="form-info">
          <h4>This is a separate form section.</h4>
        </div>
      </div>
      <div class="form-group">
        <label for="file-input">Upload a file</label>
        <input type="file" id="file-input">
      </div>
      <div class="actions">
        <input name="commit" type="submit" value="Create Account">
      </div>
    </form>
  </div>
</div>

Highlight errors for end users

Forms with Errors
An example with a form-group that has an error.

Error message.

  • With list.
  • Of errors.

I'm a help block within .form-group.has-error.

Example markup for a form with errors:

<div class="py2">
  <h3>A Form with Errors</h3>
  <div class="py2">
  <div class="form-wrap">
    <form action="#" class="form" role="form">
      <h2 class="form-info">
        Forms with Errors <br>
        <small>An example with a form-group that has an error.</small>
      </h2>
      <div class="alert alert-danger alert-dismissable">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
        <h2>Error message.</h2>
        <ul>
          <li>With list.</li>
          <li>Of errors.</li>
        </ul>
      </div>
      <div class="form-group has-error">
        <label for="email">Email</label>
        <input type="email" placeholder="user@example.com" class="form-control">
        <p class="help-block">
          I'm a help block within .form-group.has-error.
        </p>
      </div>
      <div class="actions">
        <input name="commit" type="submit" value="Create Account">
      </div>
    </form>
  </div>
</div>

</div>

Example of an inline form within a panel:

AwesomeThing
Action 1 Action 2
# Heading Heading Heading Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell