Bootstrap 4 | Inputs

    List of form control in bootstrap 4.

  1. Input
  2. Textarea
  3. Checkboxes
  4. Inline Checkboxes
  5. Radio Buttons
  6. Select list
  7. Form Control Sizing
  8. Form Control with Plain Text
  9. Form Control File and Range

    1. Input type:The input types that Bootstrap 4 supports are text, password,number. datetime, datetime-local, date, month, time, week, , email, url, search, tel, and color that means it support all the HTML 5 iput types.



    Below is the implementation of all the input types.

  • Text,Password and number code:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" 
    content="width=device-width, initial-scale=1">
    <link rel="stylesheet" 
    <script src=
    <script src=
    </script>
    <script src=
    </script>
    </head>
    <body>
    <center>
    <div class="container">
    <h2 style="color:green;">GeeksforGeeks</h2>
    <p>The form below contains type text and one
     of type password:</p>
    <form>
        <div class="form-group">
        <label for="usr">Name:</label>
        <input type="text" class="form-control"
                                       id="usr" name="username">
        </div>
        <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" 
                                       id="pwd" name="password">
        </div>
        <div class="form-group" style="width:100px;">
        <label for="number">Number:</label>
        <input type="number" class="form-control" id="number">
        </div>
        <button type="submit" class="btn btn-primary">
                          Submit</button>
    </form>
    </div>
    </center>
    </body>
    </html>                    

    chevron_right

    
    

    Output:

  • Time,Date, Date & time, Week and month code:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" 
         content="width=device-width, initial-scale=1">
        <link rel="stylesheet"
        <script src=
        </script>
        <script src=
        </script>
        <script src=
        </script>
        <style>
        .st_row{
            width:200px;
            float:left;
        }
        .nd_row{
            width:200px;
            float:right;
        }
        </style>
    </head>
      
    <body>
        <center>
            <div class="container">
                <h2 style="color:green;">GeeksforGeeks</h2>
                <p>The form below conains Current time,Current date,
                  Current date and time Cureent week and Cureent month:</p>
                <form>
                    <div class="form-group">
                        <div class="st_row">
                        <label for="time">Current time:</label>
                        <input type="time" class="form-control" id="time">
                      
                        <label for="dt">Current date:</label>
                        <input type="date" class="form-control" id="dt">
                        </div>
                        <div class="nd_row">
                        <label for="datetime-local">Current date and time:
                        </label>
                        <input type="datetime-local" class="form-control" 
                        id="datetime-local">
                      
                        <label for="week">Current week:</label>
                        <input type="week" class="form-control" id="week">
                        </div>
                        <div class="rd_row">
                        <label for="month">Current month :</label>
                        <input type="month" class="form-control" id="month">
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </center>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

  • url ,Search ,tel and color code:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" 
         content="width=device-width, initial-scale=1">
        <link rel="stylesheet"
        <script src=
        </script>
        <script src=
        </script>
        <script src=
        </script>
        <style>
            .st_row {
                width: 250px;
                float: left;
                margin-bottom: 10px;
            }
              
            .nd_row {
                width: 250px;
                float: right;
                margin-bottom: 10px;
            }
        </style>
    </head>
      
    <body>
        <center>
            <div class="container">
                <h2 style="color:green;">GeeksforGeeks</h2>
                <p>The form below conains url ,Search ,tel and color:</p>
                <form>
                    <div class="form-group">
                        <div class="st_row">
                            <label for="url">url:</label>
                            <input type="url" class="form-control" id="url">
      
                            <label for="search">Search:</label>
                            <input type="search" class="form-control" id="search">
                        </div>
                        <div class="nd_row">
                            <label for="tel">tel:</label>
                            <input type="tel" class="form-control" id="tel">
      
                            <label for="color">color:</label>
                            <input type="color" class="form-control" id="color">
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </center>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    2.Textarea: Textarea basically used for feedback or for commenting section

    Code:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" 
         content="width=device-width, initial-scale=1">
        <link rel="stylesheet"
        <script src=
        </script>
        <script src=
        </script>
        <script src=
        </script>
    </head>
      
    <body>
        <center>
          <div class="container">
            <h1 style="color:green">GeeksforGeeks</h1>
            <p>The form below contains a textarea for comments or feedbacks:</p>
            <form action="/action_page.php">
              <div class="form-group">
                <label for="comment">Comment | Feedback:</label>
                  <textarea class="form-control" rows="6" id="comment" name="text">
                  </textarea>
              </div>
              <button type="submit" class="btn btn-primary">Submit</button>
             </form>
          </div>
        </center>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    3. Checkboxes:It is used for selecting any specific items from the provided list. Here we will use class=”form-check” to maintain the proper margin, to lebel elements “.form-check-label” and to style the check-boxes we will use “.form-check-input”

    Code:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" 
              content="width=device-width, initial-scale=1">
        <link rel="stylesheet" 
        <script src=
        </script>
        <script src=
        </script>
        <script src=
        </script>
    </head>
      
    <body>
        <center>
            <div class="container">
                <h1 style="color:green">GeeksforGeeks</h1>
                <p>The form below contains three checkboxes. 
                  The first option is checked by default, 
                    and the second option is disabled:</p>
                <form action="/action_page.php">
                    <div class="form-check">
                        <label class="form-check-label" for="check1">
                            <input type="checkbox" class="form-check-input" 
                                 id="check1" name="option1" value="something" checked>
                            Option 1
                        </label>
                    </div>
                    <div class="form-check">
                        <label class="form-check-label" for="check2">
                            <input type="checkbox" class="form-check-input" id="check2"
                                   disabled>Option 2
                        </label>
                    </div>
                    <div class="form-check">
                        <label class="form-check-label">
                            <input type="checkbox" class="form-check-input" name="option2"
                                   value="something">Option 3
                        </label>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
            <center>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    4. Inline Checkboxes: To use inline checkboxes just replace “form-check-label” with “form-check-inline” and contains all the option in a single <div>
    Code:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" 
      <script src=
      <script src=
      <script src=
    </head>
    <body>
    <center>
    <div class="container">
      <h1 style="color:green">GeeksforGeeks</h1>
      <p>The form below contains three inline checkboxes.
        The first option is checked by default,
         and the last option is disabled:</p>
      <form action="/action_page.php">
        <div class="form-check">
          <label class="form-check-inline" for="check1">
            <input type="checkbox" class="form-check-input" id="check1" 
                        name="option1" value="something" checked>Option 1
          </label>
          <label class="form-check-inline" for="check2">
            <input type="checkbox" class="form-check-input" id="check2"
                               name="option2" value="something">Option 2
          </label>
          <label class="form-check-inline">
            <input type="checkbox" class="form-check-input" disabled>Option 3
          </label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </div>
    <center>
    </body>
    </html>

    chevron_right

    
    

    Output:

    5. Radio Buttons: Radio button is used for selecting only option from multiple options by user. It is similar to Checkboxes just remove the “checkbox” from input type and place “radio” and also we can use that inline radio button.
    Code:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" 
         content="width=device-width, initial-scale=1">
        <link rel="stylesheet" 
        <script src=
        </script>
        <script src=
        </script>
        <script src=
        </script>
    </head>
      
    <body>
        <center>
            <div class="container">
                <h1 style="color:green">GeeksforGeeks</h1>
      
                <p>The form below contains three radio buttons. 
                  The first option is checked by default, and the 
                  last option is disabled:</p>
                <form action="/action_page.php">
                    <div class="form-check">
                        <label class="form-check-label" for="radio1">
                            <input type="radio" class="form-check-input" id="radio1"
                                   name="optradio" value="option1" checked>Option 1
                        </label>
                    </div>
                    <div class="form-check">
                        <label class="form-check-label" for="radio2">
                            <input type="radio" class="form-check-input" id="radio2"
                                   name="optradio" value="option2">Option 2
                        </label>
                    </div>
                    <div class="form-check">
                        <label class="form-check-label">
                            <input type="radio" class="form-check-input" disabled>
                            Option 3
                        </label>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
      </center>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    6. Select list: There is two type of select list here selecting single element from a list and selecting two or more element from the list to select multiple elements just hold the shift key and select your items one by one.
    Code:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" 
         content="width=device-width, initial-scale=1">
        <link rel="stylesheet" 
        <script src=
        </script>
        <script src=
        </script>
        <script src=
        </script>
    </head>
      
    <body>
        <center>
            <div class="container">
                <h1 style="color:green">GeeksforGeeks</h1>
      
                <p>The form below contains two dropdown menus (select lists):
                </p>
                <form action="/action_page.php">
                    <div class="form-group">
                        <label for="geeks1">Select list (select one):</label>
                        <select class="form-control" id="sel1" name="sellist1">
                            <option>Python</option>
                            <option>C++</option>
                            <option>C#</option>
                            <option>Java</option>
                        </select>
                        <br>
                        <label for="geeks2">Mutiple select list 
                          (to select more than one old shift):</label>
                        <select multiple class="form-control" id="sel2" name="sellist2">
                            <option>Python</option>
                            <option>C++</option>
                            <option>C#</option>
                            <option>Java</option>
                            <option>MongoDB</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
      </center>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    7. Form Control Sizing: We will use .form-control-sm or .form-control-lg: to change the size of the form control.
    Code:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" 
         content="width=device-width, initial-scale=1">
        <link rel="stylesheet" 
        <script src=
        </script>
        <script src=
        </script>
        <script src=
        </script>
    </head>
      
    <body>
        <center>
         <div class="container">
           <h1 style="color:green">GeeksforGeeks</h1>
             <p>Change the size of the form control
                with .form-control-sm or .form-control-lg:</p>
             <form action="/action_page.php">
               <div class="form-group">
                <input type="text" class="form-control form-control-sm" 
                   placeholder="Small form control" name="text1">
               </div>
               <div class="form-group">
                <input type="text" class="form-control" 
                   placeholder="Default form control" name="text2">
               </div>
               <div class="form-group">
                 <input type="text" class="form-control form-control-lg"
                   placeholder="Large form control" name="text3">
               </div>
               <button type="submit" class="btn btn-primary">Submit</button>
             </form>
         </div>
       </center>
    </body>
    </html>

    chevron_right

    
    

    Output:

    8. Form Control with Plain Text: If you want to modify the input field as plain text then you can use “.form-control-plaintext” in place of “form-control form-control” which is in the input tag class
    Code:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" 
         content="width=device-width, initial-scale=1">
        <link rel="stylesheet" 
        <script src=
        </script>
        <script src=
        </script>
        <script src=
        </script>
    </head>
      
    <body>
        <center>
         <div class="container">
           <h1 style="color:green">GeeksforGeeks</h1>
             <p>Change the size of the form control with 
                form-control-plaintext: </p>
             <form action="/action_page.php">
               <div class="form-group">
                <input type="text" class="form-control-plaintext" 
                   placeholder="form-control-plaintext" name="text1"
                    style="border:2px solid black;">
               </div>
               <button type="submit" class="btn btn-primary">Submit</button>
             </form>
         </div>
       </center>
    </body>
    </html>

    chevron_right

    
    

    Output:

    9. Form Control File and Range: You can add the .form-control-range class to input type”range” or .form-control-file to input type”file” to style a range control else a file field with full-width
    Code:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" 
        content="width=device-width, initial-scale=1">
        <link rel="stylesheet"
        <script src=
        </script>
        <script src=
        </script>
        <script src=
        </script>
    </head>
      
    <body>
        <center>
            <div class="container">
                <h1 style="color:green">GeeksforGeeks</h1>
                <p>.form-control-range class to input type"range"
                  or .form-control-file to input type"file" to style a range control
                  or a file field with full-width:</p>
                <form action="/action_page.php">
                    <div class="form-group">
                        <input type="range" class="form-control-range" name="range">
                    </div>
                    <div class="form-group">
                        <input type="file" class="form-control-file border" name="file">
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </center>
    </body>
      
    </html>

    chevron_right

    
    

    Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.