What is a form input?
Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms.
Form controls
It supports the following form controls,
- Input
- Textarea
- Checkbox
- Radio
- Select
Bootstrap Input
The bootstrap supports all html5 inputs types for example text,password,datetime,date,month,time,week,number,email,url,search and color
It is not fully styled if their type is not properly declared
Sample program for form input
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial scale=1">
- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
- </head>
- <body>
- <div class="container">
- <div class="row">
-
- <div class="form-group">
- <label for="usr">Name:</label>
- <input type="text" class="form-control" id="usr">
- </div>
- <div class="form-group">
- <label for="pwd">Password:</label>
- <input type="password" class="form-control" id="pwd">
- </div>
-
- </div>
- </div>
- <script type="text/javascript" src="js/bootstrap.min.js"></script>
- <script type="text/css" src="js/jquery"></script>
- </body>
- </html>
Output
It is the output for the bootstrap input
Textarea
In this text area basically used to the comment box, address box etc..
Sample program for textarea
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial scale=1">
- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
- </head>
- <body>
- <div class="container">
- <div class="row">
- <div class="form-group">
- <label for="comment">Comment:</label>
- <textarea class="form-control" rows="5" id="comment">
-
-
-
- <script type="text/javascript" src="js/bootstrap.min.js"></script>
- <script type="text/css" src="js/jquery"></script>
- </body>
- </html>
Output
This is the output for the textarea
Checkboxes
This checkbox is basically used to select the many number of options from a list of the preset options
There are many checkboxes we can use to access the single list
Sample program for checkbox
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial scale=1">
- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
- </head>
- <body>
- <div class="container">
- <div class="row">
- <div class="checkbox">
- <label><input type="checkbox" value="">Option 1</label>
- </div>
- <div class="checkbox">
- <label><input type="checkbox" value="">Option 2</label>
- </div>
- <div class="checkbox">
- <label><input type="checkbox" value="">Option 3</label>
- </div>
- </div>
- </div>
- <script type="text/javascript" src="js/bootstrap.min.js"></script>
- <script type="text/css" src="js/jquery"></script>
- </body>
- </html>
Output
This the output for the bootstrap checkbox
Checkboxes are used in inline
In this inline class it is used so the checkboxes appear in a single line
.checkbox-inline class is used to set an inline checkbox
Sample program for inline checkboxes (example 1)
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial scale=1">
- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
- </head>
- <body>
- <div class="container">
- <div class="row">
- <div class="checkbox-inline">
- <label><input type="checkbox" value="">Option 1</label>
- </div>
- <div class="checkbox-inline">
- <label><input type="checkbox" value="">Option 2</label>
- </div>
- <div class="checkbox-inline">
- <label><input type="checkbox" value="">Option 3</label>
- </div>
- </div>
- </div>
- <script type="text/javascript" src="js/bootstrap.min.js"></script>
- <script type="text/css" src="js/jquery"></script>
- </body>
- </html>
Sample program for inline checkboxes (example 2)
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial scale=1">
- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
- </head>
- <body>
- <div class="container">
- <div class="row">
- <label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
- <label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
- <label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>
-
- </div>
- </div>
- <script type="text/javascript" src="js/bootstrap.min.js"></script>
- <script type="text/css" src="js/jquery"></script>
- </body>
- </html>
Output
This the output for the bootstrap inline checkbox
Radio Buttons
Radio buttons are used if you want to limit the user to just one selection from a list of preset options.
The radio button is basically used to chose the identification for humans (male or female)
Sample program for the radio button
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial scale=1">
- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
- </head>
- <body>
- <div class="container">
- <div class="row">
- <div class="radio">
- <label><input type="radio" name="optradio">Male</label>
- </div>
- <div class="radio">
- <label><input type="radio" name="optradio">Female</label>
- </div>
- <div class="radio">
- <label><input type="radio" name="optradio">Other</label>
- </div>
- </div>
- </div>
- <script type="text/javascript" src="js/bootstrap.min.js"></script>
- <script type="text/css" src="js/jquery"></script>
- </body>
- </html>
Output
This is the output for the radio button
Radio button using the inline
Inline class is used so the radio button apears in a single line
.radio-inline class is used to set an inline checkbox
Sample program for inline radio button
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial scale=1">
- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
- </head>
- <body>
- <div class="container">
- <div class="row">
- <label class="radio-inline"><input type="radio" name="optradio">Male</label>
- <label class="radio-inline"><input type="radio" name="optradio">Female</label>
- <label class="radio-inline"><input type="radio" name="optradio">Other</label>
- </div>
- </div>
- <script type="text/javascript" src="js/bootstrap.min.js"></script>
- <script type="text/css" src="js/jquery"></script>
- </body>
- </html>
Output
This is the output for the inline radio button
Select List
Select lists are used if you want to allow the user to pick from multiple options.
Sample program for the select list
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial scale=1">
- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
- </head>
- <body>
- <div class="container">
- <div class="row">
- <div class="form-group">
- <label for="sel1">Select list:</label>
- <select class="form-control" id="sel1">
- <option>1</option>
- <option>2</option>
- <option>3</option>
- <option>4</option>
- </select>
- </div>
- </div>
- </div>
- <script type="text/javascript" src="js/bootstrap.min.js"></script>
- <script type="text/css" src="js/jquery"></script>
- </body>
- </html>
Output
This is the output for the bootstrap select list
Static Control
If you want plain text next to a form label within a horizontal form use .form-cotrol-static
That is included in to the <p> tag
Sample program for the static control
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial scale=1">
- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
- </head>
- <body>
- <div class="container">
- <div class="row">
- <form class="form-horizontal">
- <div class="form-group">
- <label class="control-label col-sm-2" for="email">Email:</label>
- <div class="col-sm-10">
- <p class="form-control-static">[email protected]</p>
- </div>
- </div>
- </form>
- </div>
- </div>
- <script type="text/javascript" src="js/bootstrap.min.js"></script>
- <script type="text/css" src="js/jquery"></script>
- </body>
- </html>
Output
This is the output for the static control
Input Groups
This .input-group is used to enhance an input by adding an icons, text or button in front or behind it as a “help text”,
- .input-group-addon class attaches an icon or help text to the input field
- .input-group-btn class is used button next an input it is combined to gather in to the search bar
Sample program for the input groups
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial scale=1">
- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
- </head>
- <body>
- <div class="container">
- <div class="row">
- <form>
- <div class="input-group">
- <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
- <input id="email" type="text" class="form-control" name="email" placeholder="Email">
- </div>
- <div class="input-group">
- <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
- <input id="password" type="password" class="form-control" name="password" placeholder="Password">
- </div>
- <div class="input-group">
- <span class="input-group-addon">Text</span>
- <input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info">
- </div>
- <div class="input-group">
- <input type="text" class="form-control" placeholder="Search">
- <div class="input-group-btn">
- <button class="btn btn-default" type="submit">
- <i class="glyphicon glyphicon-search"></i>
- </button>
- </div>
- </form>
- </div>
- </div>
- <script type="text/javascript" src="js/bootstrap.min.js"></script>
- <script type="text/css" src="js/jquery"></script>
- </body>
- </html>
Output
This the output for the bootstrap input groups
Input Sizing
Input sizing in form
There are two types of input sizing; one is large another one is small,
- .input-lg-* class is used for the large size
- .input-sm-* class is used for the small size
Quickly size labels and form controls within horizontal forms to add .form-group class to the <div class=”form-group”> tag element
Sample program for input sizing
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial scale=1">
- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
- </head>
- <body>
- <div class="container">
- <div class="row">
- <form>
- <div class="form-group">
- <label for="inputsm">Small input</label>
- <input class="form-control input-sm" id="inputsm" type="text">
- </div>
- <div class="form-group">
- <label for="inputdefault">Default input</label>
- <input class="form-control" id="inputdefault" type="text">
- </div>
- <div class="form-group">
- <label for="inputlg">Large input</label>
- <input class="form-control input-lg" id="inputlg" type="text">
- </div>
- </form>
- </div>
- </div>
- <script type="text/javascript" src="js/bootstrap.min.js"></script>
- <script type="text/css" src="js/jquery"></script>
- </body>
- </html>
Output
This is the output for the input sizing
Conclusion
I hope now you can understand how to use and create the Bootstrap Form inputs and sizing. In the future we can learn about the Bootstrap techniques step by step. Stay tuned.