Quick Reach
How to create Bootstrap form?
The Bootstrap framework includes a number of CSS classes related to building HTML forms with Bootstrap in your web documents. By simply including classes into <form> tag or <input> types you can build beautiful forms for the website that are responsive to all kind of devices as well.
In this tutorial, we will show you a number of classes provided by Twitter Bootstrap to build forms horizontally, vertically or inline along with online examples that you can see by clicking “Experience it online”.
A few CSS classes related to forms in Bootstrap are:
- form-group (that you can use in the Div for proper spacing of labels and form controls)
- form-control (applies to form controls for 100% available width)
- form-inline (Use to add inline-block controls)
- form-horizontal
and others. Following are a few examples of using these classes.
A general form in Bootstrap example
The example creates a basic bootstrap form with different input types including textbox, checkbox, a textarea that takes 100% available space and a submit button.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
<!DOCTYPE html>
<html>
<head>
<title>Forms</title>
<link rel=“stylesheet” type=“text/css” href=“css/bootstrap.min.css”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
</head>
<body>
<div>
<h1>Form example</h1>
<form role=“form”>
<div class=“form-group”>
<label for=“exampleInputEmail1”>Login</label>
<input type=“email” class=“form-control” id=“loginid” placeholder=“login”>
</div>
<div class=“form-group”>
<label for=“exampleInputPassword1”>Password</label>
<input type=“password” id=“pwd” placeholder=“Password”>
</div>
<div class=“form-group”>
<label>Your Message</label>
<textarea class=“form-control” placeholder=“enter your message here”></textarea>
</div>
<div class=“checkbox”>
<label>
<input type=“checkbox”> A checkbox
</label>
</div>
<button type=“submit”>Send Message</button>
</form>
</div>
</body>
</html>
|
You can see, the form-group class is used. You can use a placeholder in the form field to show pre-defined text as we used in the Login, password and textarea fields.
A Bootstrap inline login form example
Following is an example with login form fields. This is only front-end with the form-inline class used to create an inlined form. You can set target page in the form and script can process entered information written in PHP, Ruby on Rails, JSP etc.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Forms</title>
<link rel=“stylesheet” type=“text/css” href=“css/bootstrap.min.css”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
</head>
<body>
<div>
<h1>Form example</h1>
<form role=“form” class=“form-inline” method=“post” target=“”>
<div class=“form-group”>
<input type=“email” id=“email” placeholder=“email”>
</div>
<div class=“form-group”>
<input type=“password” id=“pwd” placeholder=“Password”>
</div>
<div class=“checkbox”>
<label>
<input type=“checkbox”>Remember Password
</label>
</div>
<button type=“submit” class=“btn btn-default”>Login</button>
</form>
</div>
</body>
</html>
|
A Bootstrap horizontal form example
The following example uses the form-horizontal class in the <form> tag that creates a horizontal form. You can use predefined bootstrap grid classes to align labels and form elements like textboxes, checkbox, radio etc. The form is created for a basic “create account” page with the fields: name, email, password, the gender. These fields use text boxes, checkbox, dropdown and a button.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
<!DOCTYPE html>
<html>
<head>
<title>Forms</title>
<link rel=“stylesheet” type=“text/css” href=“css/bootstrap.min.css”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
</head>
<body>
<div>
<h1>Form example</h1>
<form class=“form-horizontal” role=“form”>
<div class=“form-group”>
<label for=“name1”>Name</label>
<div class=“col-sm-5”>
<input type=“email” id=“name1” placeholder=“Full Name”>
</div>
</div>
<div class=“form-group”>
<label for=“gender1”>Gender</label>
<div class=“col-sm-2”>
<select class=“form-control” id=“gender1”>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
<div class=“form-group”>
<label for=“email1”>Email</label>
<div class=“col-sm-5”>
<input type=“email” id=“email1” placeholder=“Email”>
</div>
</div>
<div class=“form-group”>
<label for=“password1”>Password</label>
<div class=“col-sm-5”>
<input type=“password” id=“password1” placeholder=“Password”>
</div>
</div>
<div>
<label for=“address1”>Address</label>
<div class=“col-sm-5”>
<input type=“email” id=“address1” placeholder=“Address”>
</div>
</div>
<div class=“form-group”>
<div class=“col-sm-offset-2 col-sm-10”>
<div class=“checkbox”>
<label>
<input type=“checkbox”> Remember me
</label>
</div>
</div>
</div>
<div class=“form-group”>
<div class=“col-sm-offset-2 col-sm-10”>
<button type=“submit”>Create Account</button>
</div>
</div>
</form>
</div>
</body>
</html>
|
Autofocus example in a form
You can use autofocus attribute in a form element to make it focused as it loads. In the following example, the email field is auto-focused with a blue shadow outline, though its number is third in the form.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Forms</title>
<link rel=“stylesheet” type=“text/css” href=“css/bootstrap.min.css”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
</head>
<body>
<div>
<h1>Bootstrap Form example</h1>
<form role=“form”>
<div class=“form-group”>
<label for=“name1”>Name</label>
<div class=“col-sm-5”>
<input type=“email” id=“name1” placeholder=“Full Name”>
</div>
</div>
<div class=“form-group”>
<label for=“gender1”>Gender</label>
<div class=“col-sm-2”>
<select class=“form-control” id=“gender1”>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
<div class=“form-group”>
<label for=“email1”>Email</label>
<div class=“col-sm-5”>
<input type=“email” id=“email1” placeholder=“Email” autofocus>
</div>
</div>
<div class=“form-group”>
<label for=“password1”>Password</label>
<div class=“col-sm-5”>
<input type=“password” id=“password1” placeholder=“Password”>
</div>
</div>
<div class=“form-group”>
<label for=“address1”>Address</label>
<div class=“col-sm-5”>
<input type=“email” id=“address1” placeholder=“Address”>
</div>
</div>
<div class=“form-group”>
<div class=“col-sm-offset-2 col-sm-10”>
<div class=“checkbox”>
<label>
<input type=“checkbox”> Remember me
</label>
</div>
</div>
</div>
<div class=“form-group”>
<div class=“col-sm-offset-2 col-sm-10”>
<button type=“submit”>Create Account</button>
</div>
</div>
</form>
</div>
</body>
</html>
|
Bootstrap form validation example
One of the cool features is to show the user validation messages in your web pages. For example, as filling the forms for the email, you might have noticed a Cross sign, that this email already exists. Similarly warning messages like weak passwords, success messages for password and re-enter the password can be shown while users are filling the forms and that really adds great UI experience.
With Bootstrap, you just have to include classes as shown in the example below:
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<!DOCTYPE html>
<html>
<head>
<title> Forms</title>
<link rel=“stylesheet” type=“text/css” href=“css/bootstrap.min.css”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
</head>
<body>
<div>
<h1>Form example</h1>
<div>
<label class=“control-label” for=“inputSuccess2”>Input with success</label>
<input type=“text” id=“inputSuccess2”>
<span class=“glyphicon glyphicon-ok form-control-feedback”></span>
</div>
<div>
<label class=“control-label” for=“inputWarning2”>Input with warning</label>
<input type=“text” id=“inputWarning2”>
<span class=“glyphicon glyphicon-warning-sign form-control-feedback”></span>
</div>
<div>
<label class=“control-label” for=“inputError2”>Input with error</label>
<input type=“text” id=“inputError2”>
<span class=“glyphicon glyphicon-remove form-control-feedback”></span>
</div>
</div>
</body>
</html>
|
Following example shows horizontal radio button in Bootstrap.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap radio button example</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
</head>
<body>
<!–Main container div starts here –>
<div class=“container”>
<h1>A Bootstrap radio button example</h1>
<div class=“radio”>
<label>
<input type=“radio” name=“optionsRadios” id=“optionsRadios1” value=“option1” checked>
Bootstrap radio button checked
</label>
</div>
<div class=“radio”>
<label>
<input type=“radio” name=“optionsRadios” id=“optionsRadios2” value=“option2”>
Radio button 2
</label>
</div>
<div class=“radio disabled”>
<label>
<input type=“radio” name=“optionsRadios” id=“optionsRadios3” value=“option3” disabled>
Disabled radio button
</label>
</div>
</div>
</body>
</html>
|
Useful Reading: Twitter Bootstrap Tutorial | Bootstrap table| Bootstrap CSS
Leave A Comment?