@@include("../partials/head.html")
@@include("../partials/doc-navbar.html")
@@include("../partials/doc-sidenav.html")

# Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

## Form Control

Textual form controls—like `<input>`s, `<select>`s, and `<textarea>`s—are styled with the `.form-control` class. Included are styles for general appearance, focus state, sizing, and more.

### Input

Input

    <!-- Input -->
                            <div class="mb-3">
                            <label class="form-label" for="textInput">Input</label>
                            <input type="text"
                              id="textInput"
                              class="form-control" placeholder="Input Text">
                            </div>

### Email

Email

    <!-- Email -->
                            <div class="mb-3">
                            <label class="form-label" for="email">Email</label>
                            <input type="email"
                              id="email"
                              class="form-control" placeholder="email@example.com">
                            </div>

### Password

Password

     <!-- Passowrd -->
                            <div class="mb-3">
                            <label class="form-label" for="password">Password</label>
                            <input type="password"
                              id="password"
                              class="form-control" value="passwordexample">
                            </div>

### Textarea

Textarea Hello World!

    <!-- Textarea -->
                            <div class="mb-3">
                            <label for="textarea-input" class="form-label">Textarea</label>
                            <textarea class="form-control" id="textarea-input" rows="5">Hello World!</textarea>
                            </div>

### Search

Search

    <!-- Search input -->
                            <div class="mb-3">
                            <label for="search-input" class="form-label">Search</label>
                            <input class="form-control" type="search"
                              id="search-input" value="Search components">
                            </div>

### Url

URL

    <!-- URL Input -->
                            <div class="mb-3">
                            <label for="url-input"
                              class="form-label">URL</label>
                            <input class="form-control" type="url" id="url-input"
                              value="https://getbootstrap.com">
                            </div>

### Phone

Phone

    <!-- Phone Input -->
                            <div class="mb-3">
                            <label for="telinput"
                              class="form-label">Phone</label>
                            <input class="form-control" type="tel" id="telinput"
                              value="+91
                                12 3456 7890">
                            </div>

## Sizing

Set heights using classes like `.form-control-lg` and `.form-control-sm`.

    <!-- large input -->
                            <div class="mb-3">
                            <input type="text"
                              class="form-control form-control-lg" placeholder="Large input">
                            </div>
                            <!-- normal input -->
                            <div class="mb-3">
                            <input type="text"
                              class="form-control" placeholder="Normal input">
                            </div>
                            <!-- small input -->
                            <div class="mb-3">
                            <input type="text"
                              class="form-control form-control-sm" placeholder="Small input">
                            </div>

## Select

Customize the native `<select>`s with custom CSS that changes the element’s initial appearance.

Select (Optional)

                            <!-- Select Option -->
                            <div class="mb-3">
                            <label class="form-label" for="selectOne">Select <span
                              class="text-secondary">(Optional)</span></label>
                            <select class="form-select" aria-label="Default select example">
                            <option selected>Open this select menu</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                            </select>
                            </div>

### Multiple Select

Multiple select

                            <!-- Select Option -->
                            <div class="mb-3">
                            <label class="form-label" for="selectOne">Select <span
                              class="text-secondary">(Optional)</span></label>
                            <select class="form-select" aria-label="Default select example">
                            <option selected>Open this select menu</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                            </select>
                            </div>

## Select Menu Sizes

You may also choose from small and large custom selects to match our similarly sized text inputs.

    <!-- Select Large -->
                            <select class="form-select form-select-lg mb-3">
                            <option selected>Open this select menu</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                            </select>
                            <!-- Select Small -->
                            <select class="form-select form-select-sm">
                            <option selected>Open this select menu</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                            </select>

### Checks

Default checkbox
Checked checkbox

     <!-- Checks -->
                            <div class="form-check">
                            <input class="form-check-input" type="checkbox"
                              value="" id="flexCheckDefault">
                            <label class="form-check-label" for="flexCheckDefault">
                            Default checkbox
                            </label>
                            </div>
                            <div class="form-check">
                            <input class="form-check-input" type="checkbox"
                              value="" id="flexCheckChecked" checked>
                            <label class="form-check-label" for="flexCheckChecked">
                            Checked checkbox
                            </label>
                            </div>

### Indeterminate

Checkboxes can utilize the `:indeterminate` pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).

Indeterminate checkbox

     <!-- Checks -->
                            <div class="form-check">
                            <input class="form-check-input" type="checkbox"
                              value="" id="flexCheckDefault">
                            <label class="form-check-label" for="flexCheckDefault">
                            Default checkbox
                            </label>
                            </div>
                            <div class="form-check">
                            <input class="form-check-input" type="checkbox"
                              value="" id="flexCheckChecked" checked>
                            <label class="form-check-label" for="flexCheckChecked">
                            Checked checkbox
                            </label>
                            </div>

### Disabled

Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input’s state.

Disabled checkbox
Disabled checked checkbox

    <!-- disabled -->
                            <div class="form-check">
                            <input class="form-check-input" type="checkbox"
                              value="" id="flexCheckDisabled" disabled>
                            <label class="form-check-label" for="flexCheckDisabled">
                            Disabled checkbox
                            </label>
                            </div>
                            <div class="form-check">
                            <input class="form-check-input" type="checkbox"
                              value="" id="flexCheckCheckedDisabled" checked
                              disabled>
                            <label class="form-check-label" for="flexCheckCheckedDisabled">
                            Disabled checked checkbox
                            </label>
                            </div>

### Radios

Default radio
Default checked radio

    <!-- radio-->
                            <div class="form-check">
                            <input class="form-check-input" type="radio"
                              name="flexRadioDefault" id="flexRadioDefault1">
                            <label class="form-check-label" for="flexRadioDefault1">
                            Default radio
                            </label>
                            </div>
                            <div class="form-check">
                            <input class="form-check-input" type="radio"
                              name="flexRadioDefault" id="flexRadioDefault2" checked>
                            <label class="form-check-label" for="flexRadioDefault2">
                            Default checked radio
                            </label>
                            </div>

### Disabled

Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input’s state.

Disabled radio
Disabled checked radio

    <!-- disabled -->
                            <div class="form-check">
                            <input class="form-check-input" type="radio"
                              name="flexRadioDisabled" id="flexRadioDisabled" disabled>
                            <label class="form-check-label" for="flexRadioDisabled">
                            Disabled radio
                            </label>
                            </div>
                            <div class="form-check">
                            <input class="form-check-input" type="radio"
                              name="flexRadioDisabled" id="flexRadioCheckedDisabled" checked
                              disabled>
                            <label class="form-check-label" for="flexRadioCheckedDisabled">
                            Disabled checked radio
                            </label>
                            </div>

## Switches

A switch has the markup of a custom checkbox but uses the `.form-switch` class to render a toggle switch. Consider using `role="switch"` to more accurately convey the nature of the control to assistive technologies that support this role. In older assistive technologies, it will simply be announced as a regular checkbox as a fallback. Switches also support the `disabled` attribute.

Default switch checkbox input
Checked switch checkbox input
Disabled switch checkbox input
Disabled checked switch checkbox input

    <!-- Switches -->
                            <div class="form-check form-switch mb-2">
                            <input class="form-check-input" type="checkbox"
                              role="switch"
                              id="flexSwitchCheckDefault">
                            <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
                            </div>
                            <div class="form-check form-switch mb-2">
                            <input class="form-check-input" type="checkbox"
                              role="switch"
                              id="flexSwitchCheckChecked" checked>
                            <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
                            </div>
                            <div class="form-check form-switch mb-2">
                            <input class="form-check-input" type="checkbox"
                              role="switch"
                              id="flexSwitchCheckDisabled" disabled>
                            <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
                            </div>
                            <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox"
                              role="switch"
                              id="flexSwitchCheckCheckedDisabled" checked
                              disabled>
                            <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
                            </div>

## Validation states

It provides valuable, actionable feedback to your users with HTML5 form validation.

First name
Looks good!
Last name
Looks good!
Username
@
Please choose a username.
City
Please provide a valid city.
State
Please select a valid state.
Zip
Please provide a valid zip.
Agree to terms and conditions
You must agree before submitting.

    <!-- Validation Form -->
                            <form class="row
                                g-3 needs-validation" novalidate>
                            <div class="col-md-4">
                            <label for="validationCustom01" class="form-label">First name</label>
                            <input type="text"
                              class="form-control" id="validationCustom01" value="Mark"
                              required>
                            <div class="valid-feedback">
                            Looks good!
                            </div>
                            </div>
                            <div class="col-md-4">
                            <label for="validationCustom02" class="form-label">Last name</label>
                            <input type="text"
                              class="form-control" id="validationCustom02" value="Otto"
                              required>
                            <div class="valid-feedback">
                            Looks good!
                            </div>
                            </div>
                            <div class="col-md-4">
                            <label for="validationCustomUsername" class="form-label">Username</label>
                            <div class="input-group has-validation">
                            <span class="input-group-text" id="inputGroupPrepend">@</span>
                            <input type="text"
                              class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
                            <div class="invalid-feedback">
                            Please choose a username.
                            </div>
                            </div>
                            </div>
                            <div class="col-md-6">
                            <label for="validationCustom03" class="form-label">City</label>
                            <input type="text"
                              class="form-control" id="validationCustom03" required>
                            <div class="invalid-feedback">
                            Please provide a valid city.
                            </div>
                            </div>
                            <div class="col-md-3">
                            <label for="validationCustom04" class="form-label">State</label>
                            <select class="form-select" id="validationCustom04" required>
                            <option selected disabled value="">Choose...</option>
                            <option>...</option>
                            </select>
                            <div class="invalid-feedback">
                            Please select a valid state.
                            </div>
                            </div>
                            <div class="col-md-3">
                            <label for="validationCustom05" class="form-label">Zip</label>
                            <input type="text"
                              class="form-control" id="validationCustom05" required>
                            <div class="invalid-feedback">
                            Please provide a valid zip.
                            </div>
                            </div>
                            <div class="col-12">
                            <div class="form-check">
                            <input class="form-check-input" type="checkbox"
                              value="" id="invalidCheck" required>
                            <label class="form-check-label" for="invalidCheck">
                            Agree to terms and conditions
                            </label>
                            <div class="invalid-feedback">
                            You must agree before submitting.
                            </div>
                            </div>
                            </div>
                            <div class="col-12">
                            <button class="btn
                                btn-primary" type="submit">Submit form</button>
                            </div>
                            </form>

## Disabled & Readonly Fields

Use `readonly` or `disabled` attributes for `.form-control`

Disabled fieldset example
Disabled input
Disabled select menu
Can't check this

    <!-- Disabled Input -->
                            <form>
                            <fieldset disabled>
                            <legend>Disabled fieldset example</legend>
                            <div class="mb-3">
                            <label for="disabledTextInput" class="form-label">Disabled input</label>
                            <input type="text"
                              id="disabledTextInput" class="form-control" placeholder="Disabled input">
                            </div>
                            <div class="mb-3">
                            <label for="disabledSelect" class="form-label">Disabled select menu</label>
                            <select id="disabledSelect" class="form-select">
                            <option>Disabled select</option>
                            </select>
                            </div>
                            <div class="mb-3">
                            <div class="form-check">
                            <input class="form-check-input" type="checkbox"
                              id="disabledFieldsetCheck" disabled>
                            <label class="form-check-label" for="disabledFieldsetCheck">
                            Can't check this
                            </label>
                            </div>
                            </div>
                            <button type="submit"
                              class="btn
                                btn-primary">Submit</button>
                            </fieldset>
                            </form>

## Range

Create custom `<input type="range">` controls with `.custom-range.` The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and Firefox support “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.

Example range

     <!-- range -->
                            <label for="customRange1" class="form-label">Example range</label>
                            <input type="range"
                              class="form-range" id="customRange1">

### Disabled

Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events.

Disabled range

    <!-- Disabled -->
                            <label for="disabledRange" class="form-label">Disabled range</label>
                            <input type="range"
                              class="form-range" id="disabledRange" disabled>

### Mix and max

Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events.

Example range

    <!-- mix and max range
                              -->
                            <label for="customRange2" class="form-label">Example range</label>
                            <input type="range"
                              class="form-range" min="0" max="5" id="customRange2">

### Steps

By default, range inputs “snap” to integer values. To change this, you can specify a `step` value. In the example below, we double the number of steps by using `step="0.5"`.

Example range

    <!-- Steps -->
                            <label for="customRange3" class="form-label">Example range</label>
                            <input type="range"
                              class="form-range" min="0" max="5" step="0.5" id="customRange3">

@@include("../partials/buy-template.html") @@include("../partials/scripts.html")