Disable Preloader

### Forms

#### Don't have an Account? Register Now

Name
Email Address
Choose Username
Choose Password
Re-enter Password

#### Login Your Account

Username/Email
Password
Check me out

#### Other form elements

Email address
Password
File input

Example block-level help text here.

Check me out
Option one is this and that—be sure to include why it's great
Option two is disabled
Option one is this and that—be sure to include why it's great
Option two can be something else and selecting it will deselect option one
Option three is disabled
1 2 3
1 2 3

## Bootstrap Forms

#### Basic example

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.

Email address
Password
File input

Example block-level help text here.

Check me out

    <form>
      <div class="form-group">
        <label for="exampleInputEmail2">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="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="exampleInputFile2">File input</label>
        <input type="file" id="exampleInputFile2">
        <p class="help-block">Example block-level help text here.</p>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox"> Check me out
        </label>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </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.

Name
Email

    <form class="form-inline">
      <div class="form-group">
        <label for="exampleInputName3">Name</label>
        <input type="text" class="form-control" id="exampleInputName3" placeholder="Jane Doe">
      </div>
      <div class="form-group">
        <label for="exampleInputEmail2">Email</label>
        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
      </div>
      <button type="submit" class="btn btn-default">Send invitation</button>
    </form>

Email address
Password
Remember me

    <form class="form-inline">
      <div class="form-group">
        <label class="sr-only" for="exampleInputEmail4">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail4" placeholder="Email">
      </div>
      <div class="form-group">
        <label class="sr-only" for="exampleInputPassword3">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
      <button type="submit" class="btn btn-default">Sign in</button>
    </form>

Amount (in dollars)
$
.00

    <form class="form-inline">
      <div class="form-group">
        <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
        <div class="input-group">
          <div class="input-group-addon">$</div>
          <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
          <div class="input-group-addon">.00</div>
        </div>
      </div>
      <button type="submit" class="btn btn-dark btn-flat">Transfer cash</button>
    </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-group`s to behave as grid rows, so no need for `.row`.

Email
Password
Remember me

    <form class="form-horizontal">
      <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">
        </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">
        </div>
      </div>
      <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-default">Sign in</button>
        </div>
      </div>
    </form>

## Supported controls

#### Inputs

Most common form control, text-based input fields. Includes support for all HTML5 types: `text`, `password`, `datetime`, `datetime-local`, `date`, `month`, `time`, `week`, `number`, `email`, `url`, `search`, `tel`, and `color`.

Type declaration required, Inputs will only be fully styled if their type is properly declared.

    <input type="text" class="form-control" placeholder="Text input">

#### Textarea

Form control which supports multiple lines of text. Change `rows` attribute as necessary.

    <textarea class="form-control"rows="3"></textarea>

#### Checkboxes and radios

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

Disabled checkboxes and radios are supported, but to provide a "not-allowed" cursor on hover of the parent `<label>`, you'll need to add the `.disabled` class to the parent `.radio`, `.radio-inline`, `.checkbox`, or `.checkbox-inline`.

Default (stacked)

Option one is this and that—be sure to include why it's great
Option two is disabled
Option one is this and that—be sure to include why it's great
Option two can be something else and selecting it will deselect option one
Option three is disabled

    <div class="checkbox">
      <label>
        <input type="checkbox" value="">
        Option one is this and that&mdash;be sure to include why it's great
      </label>
    </div>
    <div class="checkbox disabled">
      <label>
        <input type="checkbox" value="" disabled>
        Option two is disabled
      </label>
    </div>

    <div class="radio">
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios4" value="option1" checked>
        Option one is this and that&mdash;be sure to include why it's great
      </label>
    </div>
    <div class="radio">
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios5" value="option2">
        Option two can be something else and selecting it will deselect option one
      </label>
    </div>
    <div class="radio disabled">
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios6" value="option3" disabled>
        Option three is disabled
      </label>
    </div>

#### Inline checkboxes and radios

Use the `.checkbox-inline` or `.radio-inline` classes on a series of checkboxes or radios for controls that appear on the same line.

4 5 6
1 2 3

    <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox4" value="option1"> 1
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox5" value="option2"> 2
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox6" value="option3"> 3
    </label>

    <label class="radio-inline">
      <input type="radio" name="inlineRadioOptions" id="inlineRadio4" value="option1"> 1
    </label>
    <label class="radio-inline">
      <input type="radio" name="inlineRadioOptions" id="inlineRadio5" value="option2"> 2
    </label>
    <label class="radio-inline">
      <input type="radio" name="inlineRadioOptions" id="inlineRadio6" value="option3"> 3
    </label>

#### Checkboxes and radios without label text

Should you have no text within the `<label>`, the input is positioned as you'd expect. Currently only works on non-inline checkboxes and radios. Remember to still provide some form of label for assistive technologies (for instance, using `aria-label`).

    <div class="checkbox">
      <label>
        <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
      </label>
    </div>
    <div class="radio">
      <label>
        <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
      </label>
    </div>

#### Selects

Note that many native select menus—namely in Safari and Chrome—have rounded corners that cannot be modified via `border-radius` properties.

    <select class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>

For `<select>` controls with the `multiple` attribute, multiple options are shown by default.

    <select multiple class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>

#### Static control

When you need to place plain text next to a form label within a form, use the `.form-control-static` class on a `<p>`.

Email

[email protected]

Password

    <form class="form-horizontal">
      <div class="form-group">
        <label class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
          <p class="form-control-static">[email protected]</p>
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
      </div>
    </form>

Email

[email protected]

Password

    <form class="form-inline">
      <div class="form-group">
        <label class="sr-only">Email</label>
        <p class="form-control-static">[email protected]</p>
      </div>
      <div class="form-group">
        <label for="inputPassword2" class="sr-only">Password</label>
        <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
      </div>
      <button type="submit" class="btn btn-default">Confirm identity</button>
    </form>

#### Focus state

We remove the default `outline` styles on some form controls and apply a `box-shadow` in its place for `:focus`.

#### Disabled state

Add the `disabled` boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a `not-allowed` cursor.

    <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

#### Disabled fieldsets

Add the `disabled` attribute to a `<fieldset>` to disable all the controls within the `<fieldset>` at once.

Disabled input
Disabled select menu
Can't check this

    <form>
      <fieldset disabled>
        <div class="form-group">
          <label for="disabledTextInput">Disabled input</label>
          <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
        </div>
        <div class="form-group">
          <label for="disabledSelect">Disabled select menu</label>
          <select id="disabledSelect" class="form-control">
            <option>Disabled select</option>
          </select>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox"> Can't check this
          </label>
        </div>
        <button type="submit" class="btn btn-dark btn-flat">Submit</button>
      </fieldset>
    </form>

#### Readonly state

Add the `readonly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

    <input class="form-control" type="text" placeholder="Readonly input here…" readonly>

#### Readonly state

Block level help text for form controls.

Input with help text
A block of help text that breaks onto a new line and may
extend beyond one line.

    <label class="sr-only" for="inputHelpBlock">Input with help text</label>
    <input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
    ...
    <span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

#### Help text

Block level help text for form controls.

Input with help text
A block of help text that breaks onto a new line and may extend beyond one line.

    <label class="sr-only" for="inputHelpBlock1">Input with help text</label>
    <input type="text" id="inputHelpBlock1" class="form-control" aria-describedby="helpBlock2">
    ...
    <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

#### Validation states

Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add `.has-warning`, `.has-error`, or `.has-success` to the parent element. Any `.control-label`, `.form-control`, and `.help-block` within that element will receive the validation styles.

Input with success A block of help text that breaks onto a new line and may extend beyond one line.
Input with warning
Input with error
Checkbox with success
Checkbox with warning
Checkbox with error

    <div class="form-group has-success">
      <label class="control-label" for="inputSuccess1">Input with success</label>
      <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock3">
      <span id="helpBlock3" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
    </div>
    <div class="form-group has-warning">
      <label class="control-label" for="inputWarning1">Input with warning</label>
      <input type="text" class="form-control" id="inputWarning1">
    </div>
    <div class="form-group has-error">
      <label class="control-label" for="inputError1">Input with error</label>
      <input type="text" class="form-control" id="inputError1">
    </div>
    <div class="has-success">
      <div class="checkbox">
        <label>
          <input type="checkbox" id="checkboxSuccess" value="option1">
          Checkbox with success
        </label>
      </div>
    </div>
    <div class="has-warning">
      <div class="checkbox">
        <label>
          <input type="checkbox" id="checkboxWarning" value="option1">
          Checkbox with warning
        </label>
      </div>
    </div>
    <div class="has-error">
      <div class="checkbox">
        <label>
          <input type="checkbox" id="checkboxError" value="option1">
          Checkbox with error
        </label>
      </div>
    </div>

#### With optional icons

You can also add optional feedback icons with the addition of `.has-feedback` and the right icon.Feedback icons only work with textual `<input class="form-control">` elements.

Input with success (success)
Input with warning (warning)
Input with error (error)
Input group with success
@
(success)

    <div class="form-group has-success has-feedback">
      <label class="control-label" for="inputSuccess2">Input with success</label>
      <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess2Status" class="sr-only">(success)</span>
    </div>
    <div class="form-group has-warning has-feedback">
      <label class="control-label" for="inputWarning2">Input with warning</label>
      <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
      <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
      <span id="inputWarning2Status" class="sr-only">(warning)</span>
    </div>
    <div class="form-group has-error has-feedback">
      <label class="control-label" for="inputError2">Input with error</label>
      <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
      <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
      <span id="inputError2Status" class="sr-only">(error)</span>
    </div>
    <div class="form-group has-success has-feedback">
      <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
    </div>

#### Optional icons in horizontal and inline forms

Block level help text for form controls.

Input with success
(success)
Input group with success
@
(success)

    <form class="form-horizontal">
      <div class="form-group has-success has-feedback">
        <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
        <div class="col-sm-9">
          <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
          <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
          <span id="inputSuccess3Status" class="sr-only">(success)</span>
        </div>
      </div>
      <div class="form-group has-success has-feedback">
        <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
        <div class="col-sm-9">
          <div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
          </div>
          <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
          <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
        </div>
      </div>
    </form>

Input with success (success)
Input group with success
@
(success)

    <form class="form-inline">
      <div class="form-group has-success has-feedback">
        <label class="control-label" for="inputSuccess4">Input with success</label>
        <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
        <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
        <span id="inputSuccess4Status" class="sr-only">(success)</span>
      </div>
    </form>
    <form class="form-inline">
      <div class="form-group has-success has-feedback">
        <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
        <div class="input-group">
          <span class="input-group-addon">@</span>
          <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
        </div>
        <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
        <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
      </div>
    </form>

#### Optional icons with hidden .sr-only labels

If you use the `.sr-only` class to hide a form control's `<label>` (rather than using other labelling options, such as the `aria-label` attribute), Bootstrap will automatically adjust the position of the icon once it's been added.

Hidden label (success)
Input group with success
@
(success)

    <div class="form-group has-success has-feedback">
      <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
      <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess5Status" class="sr-only">(success)</span>
    </div>
    <div class="form-group has-success has-feedback">
      <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
    </div>

#### Control sizing

Set heights using classes like `.input-lg`, and set widths using grid column classes like `.col-lg-*`.

    <input class="form-control input-lg" type="text" placeholder=".input-lg">
    <input class="form-control" type="text" placeholder="Default input">
    <input class="form-control input-sm" type="text" placeholder=".input-sm">

    <select class="form-control input-lg">...</select>
    <select class="form-control">...</select>
    <select class="form-control input-sm">...</select>

#### Horizontal form group sizes

Quickly size labels and form controls within `.form-horizontal` by adding `.form-group-lg` or `.form-group-sm`.

Large label
Small label

    <form class="form-horizontal">
      <div class="form-group form-group-lg">
        <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
        <div class="col-sm-10">
          <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
        </div>
      </div>
      <div class="form-group form-group-sm">
        <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
        <div class="col-sm-10">
          <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
        </div>
      </div>
    </form>

#### Column sizing

Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.

    <div class="row">
      <div class="col-xs-2">
        <input type="text" class="form-control" placeholder=".col-xs-2">
      </div>
      <div class="col-xs-3">
        <input type="text" class="form-control" placeholder=".col-xs-3">
      </div>
      <div class="col-xs-4">
        <input type="text" class="form-control" placeholder=".col-xs-4">
      </div>
    </div>