Form Elements

Basic Input Types 
 <input type="text" class="form-control" id="input">
                        <textarea class="form-control mt-3" id="text-area" rows="3"></textarea>
Input With Placeholders 
<input type="text" class="form-control" id="inputs" placeholder="This is placeholder">
                        <textarea class="form-control mt-3" id="text-area3" rows="3" placeholder="This is placeholder"></textarea>
Disabled Inputs 
 <input type="text" id="input-disabled" class="form-control" placeholder="Disabled input" disabled="">
                        <textarea class="form-control mt-3" id="text-area1" rows="3" placeholder="Disabled input" disabled=""></textarea>
Pilled Inputs 
  <input type="text" class="form-control rounded-pill" id="input2">
Readonly Inputs 
  <input class="form-control" type="text" value="Readonly input here..." aria-label="readonly input example" readonly="">
Datalist example 
 <label for="input-DataList" class="form-label">Datalist example </label>
                                <input class="form-control" list="datalistOptions" id="input-DataList" placeholder="Type to search..."><datalist id="datalistOptions">
                                    <option value="San Francisco">
                                    </option>
                                    <option value="New York">
                                    </option>
                                    <option value="Seattle">
                                    </option>
                                    <option value="Los Angeles">
                                    </option>
                                    <option value="Chicago">
                                    </option>
                                    </datalist>
Form Input With Label 
  <label for="input-labels" class="form-label">Form Input With Label</label>
                                <input type="text" class="form-control" id="input-labels">
Input Type Text 
 <label for="input-label" class="form-label">Type Text</label>
                            <input type="text" class="form-control" id="input-label" placeholder="Number">
Input Type Number 
 <label for="input-number" class="form-label">Input Type Number</label>
                                    <input type="number" class="form-control" id="input-number" placeholder="Number">
Input Type Password 
 <label for="input-password" class="form-label">Input Type Password</label>
                                <input type="password" class="form-control" id="input-password" placeholder="Password">
Input Type Email 
  <label for="input-email" class="form-label">Input Type Email</label>
                                <input type="email" class="form-control" id="input-email" placeholder="Email@xyz.com">
Input Type Tel 
  <label for="input-tel" class="form-label">Input Type Tel</label>
                                <input type="tel" class="form-control" id="input-tel" placeholder="+1100-2031-1233">
Input Type Date 
  <label for="input-date" class="form-label">Input Type Date</label>
                                <input type="date" class="form-control" id="input-date">
Input Type Week 
  <label for="input-week" class="form-label">Input Type Week</label>
                                <input type="week" class="form-control" id="input-week">
Input Type Month 
  <label for="input-months" class="form-label">Input Type Month</label>
                                <input type="month" class="form-control" id="input-months">
Input Type Month 
  <label for="input-month" class="form-label">Input Type Month</label>
                                <input type="month" class="form-control" id="input-month">
Input Type Time 
  <label for="input-time" class="form-label">Input Type Time</label>
                                <input type="time" class="form-control" id="input-time">
Type datetime-local 
  <label for="input-datetime-local" class="form-label">Type datetime-local</label>
                                <input type="datetime-local" class="form-control" id="input-datetime-local">
Type Search 
 <label for="input-search" class="form-label">Type Search</label>
                                <input type="search" class="form-control" id="input-search"  placeholder="Search">
Type Submit 
 <label for="input-submit2" class="form-label">Type Submit</label>
                                <input type="submit" class="form-control" id="input-submit2"  value="submit">
Type Reset 
 <label  class="form-label">Type Reset</label>
                                <input type="reset" class="form-control" id="input-submit">
Type Button 
<label for="input-button" class="form-label">Type Button</label>
                                <input type="button" class="form-control btn btn-primary" id="input-button"  value="Button">
Type Color 
<label  class="form-label">Type Color</label>
                                <input class="form-control form-input-color" type="color" value="#136bd0">
Type Url 
<label  class="form-label">Type Url</label>
                                <input class="form-control" type="url"  name="website" placeholder="http://example.com">
Type File 
<label   for="input-file"  class="form-label">Type File</label>
                                <input class="form-control" type="file" id="input-file">
Input Readonly Text 
<label for="input-readonlytext" class="form-label">Input Readonly Text</label>
                                <input type="text" readonly="" class="form-control-plaintext" id="input-readonlytext" value="email@example.com">
Overview
We'll never share your email with anyone else.
<form>
        <div class="mb-3">
            <label for="exampleInputEmail1" class="form-label">Email
                address</label>
            <input type="email" class="form-control" id="exampleInputEmail1"
                aria-describedby="emailHelp">
            <div id="emailHelp" class="form-text">We'll
                never share your email
                with
                anyone else.</div>
        </div>
        <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1">
        </div>
        <div class="mb-3 form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Check
                me out</label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
Disabled forms
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>
Form text
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji. 
<label for="inputPassword5" class="form-label">Password</label>
    <input type="password" id="inputPassword5" class="form-control"
        aria-describedby="passwordHelpBlock">
    <div id="passwordHelpBlock" class="form-text">
        Your password must be 8-20 characters long, contain letters and
        numbers,
        and
        must not contain spaces, special characters, or emoji.
    </div>
Inline text can use any typical inline HTML element with nothing more than the .form-text class.
Must be 8-20 characters long. 
<div class="row g-3 align-items-center">
        <div class="col-auto">
            <label for="inputPassword6" class="col-form-label">Password</label>
        </div>
        <div class="col-auto">
            <input type="password" id="inputPassword6" class="form-control"
                aria-describedby="passwordHelpInline">
        </div>
        <div class="col-auto">
            <span id="passwordHelpInline" class="form-text">
                Must be 8-20 characters long.
            </span>
        </div>
    </div>
Input Sizing 
<input class="form-control form-control-sm mb-3" type="text"
    placeholder=".form-control-sm" aria-label=".form-control-sm example">
    <input class="form-control mb-3" type="text" placeholder="Default input"
        aria-label="default input example">
    <input class="form-control form-control-lg" type="text"
    placeholder=".form-control-lg" aria-label=".form-control-lg example">