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="form-group">
                                                               <label class="input-label" for="textInput">Text</label>
                                                               <input type="text" id="textInput" class="form-control"
                                                                  placeholder="Input Text">
                                                            </div>
                                                            <!-- Password -->
                                                            <div class="form-group">
                                                               <label class="input-label" for="passwordInput">Password</label>
                                                               <input type="password" id="passwordInput" class="form-control"
                                                                  value="********">
                                                            </div>
                                                            <!-- Helper Text -->
                                                            <div class="form-group">
                                                               <label class="input-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="form-group">
                                                               <label class="input-label" for="emailInput">Email</label>
                                                               <input type="email" id="emailInput" class="form-control"
                                                                  placeholder="name@example.com">
                                                            </div>
                                                            <!-- Select Option -->
                                                            <div class="form-group">
                                                               <label class="input-label" for="selectOne">Select <span
                                                                  class="input-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="form-group">
                                                               <label class="input-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="form-group">
                                                               <label class="input-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="form-group">
    <input type="text" class="form-control form-control-lg" placeholder="Large input">
</div>
<div class="form-group">
    <input type="text" class="form-control" placeholder="Normal input">
</div>
<div class="form-group">
    <input type="text" class="form-control form-control-sm" placeholder="Small input">
</div>

Select Menu

Custom <select> menus need only a custom class, .custom-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="custom-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="custom-select custom-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="custom-select custom-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.

Valid feedback 
<form>
                                                            <div class="form-group">
                                                                <label for="validationValidInput1">Valid input</label>
                                                                <input type="text" class="form-control is-valid" id="validationValidInput1" placeholder="Placeholder"> </div>
                                                            <div class="form-group">
                                                                <label for="validationValidSelect1">Valid select</label>
                                                                <select class="form-control custom-select is-valid" id="validationValidSelect1">
                                                                    <option>Choose an option</option>
                                                                    <option>2</option>
                                                                    <option>3</option>
                                                                    <option>4</option>
                                                                    <option>5</option>
                                                                </select> <span class="valid-feedback">Valid feedback</span> </div>
                                                            <div class="form-group">
                                                                <label for="validationValidTextarea1">Valid textarea</label>
                                                                <textarea class="form-control is-valid" placeholder="Textarea field" id="validationValidTextarea1" rows="4"></textarea>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="validationValidFileInput1">Valid file input</label>
                                                                <div class="custom-file">
                                                                    <input type="file" id="validationValidFileInput1" class="custom-file-input is-valid">
                                                                    <label class="form-control custom-file-label" for="validationValidFileInput1">Choose file</label>
                                                                </div>
                                                            </div>
                                                        </form>
Valid feedback 
<form>
                                                            <div class="form-group">
                                                                <label for="validationInvalidInput1">Valid input</label>
                                                                <input type="text" class="form-control is-invalid" id="validationInvalidInput1" placeholder="Placeholder"> </div>
                                                            <div class="form-group">
                                                                <label for="validationInvalidSelect1">Valid select</label>
                                                                <select class="form-control custom-select is-invalid" id="validationInvalidSelect1">
                                                                    <option>Choose an option</option>
                                                                    <option>2</option>
                                                                    <option>3</option>
                                                                    <option>4</option>
                                                                    <option>5</option>
                                                                </select> <span class="invalid-feedback">Valid feedback</span> </div>
                                                            <div class="form-group">
                                                                <label for="validationInvalidTextarea1">Valid textarea</label>
                                                                <textarea class="form-control is-invalid" placeholder="Textarea field" id="validationInvalidTextarea1" rows="4"></textarea>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="validationInvalidFileInput1">Valid file input</label>
                                                                <div class="custom-file">
                                                                    <input type="file" id="validationInvalidFileInput1" class="custom-file-input is-invalid">
                                                                    <label class="form-control custom-file-label" for="validationInvalidFileInput1">Choose file</label>
                                                                </div>
                                                            </div>
                                                        </form>

Disabled & Readonly Fields

Use readonly or disabled attributes for .form-control

<div class="form-group row">
                                                                <label class="col-sm-3 col-form-label">Readonly plain text</label>
                                                                <div class="col-sm-9">
                                                                    <input type="text" class="form-control-plaintext" value="email@example.com" readonly=""> </div>
                                                            </div>
                                                            <div class="form-group row">
                                                                <label class="col-sm-3 col-form-label">Readonly field</label>
                                                                <div class="col-sm-9">
                                                                    <input type="text" class="form-control" value="Read only" readonly=""> </div>
                                                            </div>
<div class="form-group">
                                                                <label class="input-label">Disabled input</label>
                                                                <input type="text" class="form-control" placeholder="Disabled input" disabled=""> </div>
                                                            <div class="form-group">
                                                                <label class="input-label">Disabled select</label>
                                                                <select class="custom-select" disabled="">
                                                                    <option>Choose an option</option>
                                                                    <option>2</option>
                                                                    <option>3</option>
                                                                    <option>4</option>
                                                                    <option>5</option>
                                                                </select>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="input-label">Disabled textarea</label>
                                                                <textarea class="form-control" placeholder="Disabled textarea" disabled=""></textarea>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="input-label">Disabled file input</label>
                                                                <div class="custom-file">
                                                                    <input type="file" id="customFileEg2" class="custom-file-input" disabled="">
                                                                    <label class="custom-file-label" for="customFileEg2">Choose file</label>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="input-label">Disabled range input</label>
                                                                <input type="range" class="custom-range" value="3" min="0" max="10" disabled=""> </div>

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">Example range</label>
<input type="range" class="custom-range" id="customRange1">

Range inputs have implicit values for min and max—0 and 100, respectively. You may specify new values for those using the min and max attributes.

<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">

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">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">