Bootstrap Inputs

The last article explained how to create beautiful looking forms with bootstrap. This article and the one after this explains what are some of the different input types that can be used to get information from the user. Bootstrap inputs fall into one of the following five categories.

  • input
  • checkbox
  • textarea
  • radio
  • select

The input can be further stratified by specifying the type of the input. Bootstrap supports following input types: text, password, email, date, month, datetime, datetime-local, week, number, time, search, url, tel and color.

Bootstrap Inputs Type

Take a look at the following example to see how input with types are used in bootstrap forms.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
         <form role="form">
          <div class="form-group">
            <label for="fname">First Name</label>
            <input type="text" class="form-control" id="fname">
          </div>
          <div class="form-group">
            <label for="email">Email</label>
            <input type="email" class="form-control" id="email">
          </div>
            
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
    
    </body>

</html>

Download the code Try the code

If you run the above webpage in browser, you shall see a text box for name and email along with a submit button. Enter some name in name text box and email in the email box and click submit. If the email entered is doesnt follow the correct email format, bootstrap will display a message prompting user to enter valid email. This is really cool, because you have not implemented any client side or server side validation for email, yet bootstrap validates if email entered is in correct form.

Text Area Control

Text area input control is used to get large texts from the user such as messages, comments etc. The following example demonstrates the usage of textarea in bootstrap forms.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
         <form role="form">
        
            <div class="form-group">
              <label for="message">Message:</label>
              <textarea class="form-control" rows="10" id="message"></textarea>
            </div>
            
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
    
    </body>

</html>

Download the code Try the code

If you look at the script for textarea, you should see that it contains an attribute row. This specifies the number of the rows of the text area by default.

Checkbox, Radiobutton & Select

Checkboxes are particularly useful when you want to allow user to select multiple options. On the other hand, radio boxes are used when you want to limit the selection of the user to one option. Finally, select is used where you want to display a list of items and allow user to choose multiple items from the list. Take a look at the following example to see how they work.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
         <form role="form">

          <label class="checkbox-inline"><input type="checkbox" value="">Mathematics</label>
            <label class="checkbox-inline"><input type="checkbox" value="">English</label>
            <label class="checkbox-inline"><input type="checkbox" value="">Science</label>

             <br>
             
            <label class="radio-inline"><input type="radio" name="rd">Paris</label>
            <label class="radio-inline"><input type="radio" name="rd">London</label>
            <label class="radio-inline"><input type="radio" name="rd">Barcelona</label>
             
             <br>
             <div class="form-group">
              <label for="Fruits">Select Fruit:</label>
              <select class="form-control" id="Fruits">
                <option>Apple</option>
                <option>Mango</option>
                <option>Guava</option>
                <option>Banana</option>
              </select>
            </div>

          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    
    </body>

</html>

Download the code Try the code

<<< Bootstrap FormsBootstrap Input Size Options >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .