Developed by Codescandy

Forms

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

Basic Froms

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.

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji. 
<form>
                                                            <!-- Input -->
                                                            <div class="mb-3">
                                                               <label class="form-label" for="textInput">Text</label>
                                                               <input type="text" id="textInput" class="form-control"
                                                                  placeholder="Input Text">
                                                            </div>
                                                            <!-- Password -->
                                                            <div class="mb-3">
                                                               <label class="form-label" for="passwordInput">Password</label>
                                                               <input type="password" id="passwordInput" class="form-control"
                                                                  value="********">
                                                            </div>
                                                            <!-- Helper Text -->
                                                            <div class="mb-3">
                                                               <label class="form-label">Helper text</label>
                                                               <input type="password" class="form-control" value="**********">
                                                               <span class="text-muted ">Your password must be 8-20
                                                               characters long, contain letters and numbers, and must not
                                                               contain spaces, special characters, or emoji.</span>
                                                            </div>
                                                            <!-- Email -->
                                                            <div class="mb-3">
                                                               <label class="form-label" for="emailInput">Email</label>
                                                               <input type="email" id="emailInput" class="form-control"
                                                                  placeholder="name@example.com">
                                                            </div>
                                                            <!-- Select Option -->
                                                            <div class="mb-3">
                                                               <label class="form-label" for="selectOne">Select <span
                                                                  class="form-label-secondary">(Optional)</span></label>
                                                               <select id="selectOne" class="form-control">
                                                                  <option>Choose an option</option>
                                                                  <option>1</option>
                                                                  <option>2</option>
                                                                  <option>3</option>
                                                                  <option>4</option>
                                                               </select>
                                                            </div>
                                                            <!-- Mulitple Select Option -->
                                                            <div class="mb-3">
                                                               <label class="form-label" for="selectTwo">Multiple
                                                               select</label>
                                                               <select id="selectTwo" class="form-control" size="3"
                                                                  multiple="">
                                                                  <option>1</option>
                                                                  <option>2</option>
                                                                  <option>3</option>
                                                                  <option>4</option>
                                                                  <option>5</option>
                                                               </select>
                                                            </div>
                                                            <!-- Text Area -->
                                                            <div class="mb-3">
                                                               <label class="form-label" for="textareaInput">Textarea</label>
                                                               <textarea id="textareaInput" class="form-control"
                                                                  placeholder="Textarea field" rows="4"></textarea>
                                                            </div>
                                                         </form>

Sizing

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


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

Select Menu

Custom <select> menus need only a custom class, .form-select to trigger the custom styles. Custom styles are limited to the <select>’s initial appearance and cannot modify the <option>s due to browser limitations.

<select class="form-select">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

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

<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 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>

Validation states

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

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting. 
<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 
<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.

<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.

<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.

<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".

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