Scribd
Upload
13 views

8.bootstrap Forms

bootstrap form

Uploaded by

SIVAVEDATHRI
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

8.bootstrap Forms

bootstrap form

Uploaded by

SIVAVEDATHRI
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

Bootstrap Forms

In bootstrap, forms are useful to apply some default styles for form controls such as input
elements, labels, textareas, select elements, etc., with a predefined set of classes.

By using bootstrap predefined .form-control class, we can style textual form controls such
as <input>, <select> and <textarea> elements. Same way, we need to use other predefined
classes such as .form-check-input, .form-control-fileEtc. to style checkboxes, file inputs, etc.,
based on our requirements.

The bootstrap has provided three types of form layouts: default (vertical), horizontal, and inline
forms. Now, we will learn how we can create different form layouts with different input controls.

Bootstrap Create Form with Controls


In bootstrap, we can create the form layout by wrapping all form controls inside
of <form> element and we need to wrap each form control with a .form-group class to ensure
proper margins.

Following is the example of creating the default (vertical) form layout with required form controls
in bootstrap.

<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap Forms Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<style>

.bcontent {

margin-top: 10px;

}
</style>

</head>

<body>

<div class="container-fluid bcontent">

<h2>Bootstrap Forms</h2>

<hr />

<form>

<div class="form-group">

<label for="email">Email</label>

<input type="email" class="form-control" id="email" placeholder="Enter email">

</div>

<div class="form-group">

<label for="password">Password</label>

<input type="password" class="form-control" id="pwd" placeholder="Enter password">

</div>

<div class="form-group">

<label for="fileupload">Profile Pic</label>

<input type="file" class="form-control-file" id="imgUpload">

</div>

<div class="form-group form-check">

<input type="checkbox" class="form-check-input" id="chkletters">

<label class="form-check-label" for="NewlettersCheck">Subscribe to newsletters</label>

</div>

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

</form>

</div>

</body>

</html>
Output:

Bootstrap Horizontal Forms


In bootstrap, we can create the horizontal form layouts using grid classes to align the labels and
form controls side by side.

To create horizontal forms, you need to add .row class to form groups and add .col-*-* classes
to your labels and controls to specify the width. Also, be sure to add .col-form-label to
your <label> elements to align vertically centered to their associated form controls.

<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap Horizontal Forms Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<style>

.bcontent {
margin-top: 10px;

</style>

</head>

<body>

<div class="container-fluid bcontent">

<h2>Bootstrap Horizontal Forms</h2>

<hr />

<form>

<div class="form-group row">

<label for="email" class="col-sm-2 col-form-label">Email</label>

<div class="col-sm-10">

<input type="email" class="form-control" id="email" placeholder="Enter email">

</div>

</div>

<div class="form-group row">

<label for="password" class="col-sm-2 col-form-label">Password</label>

<div class="col-sm-10">

<input type="password" class="form-control" id="pwd" placeholder="Enter password">

</div>

</div>

<div class="form-group row">

<label for="gender" class="col-sm-2 col-form-label">Gender</label>

<div class="col-sm-10">

<div class="form-check">

<input class="form-check-input" type="radio" name="genderadios" id="rdbmale"


value="male" checked>

<label class="form-check-label" for="gridRadios1">Male</label>

</div>

<div class="form-check">

<input type="radio" class="form-check-input" name="genderadios" id="rdbfemal"


value="female">
<label class="form-check-label" for="gridRadios2">Female</label>

</div>

</div>

</div>

<div class="form-group row">

<label for="fileupload" class="col-sm-2 col-form-label">Profile Pic</label>

<div class="col-sm-10">

<input type="file" class="form-control-file" id="imgUpload">

</div>

</div>

<div class="form-group row">

<div class="col-sm-10 offset-sm-2">

<div class="form-check">

<input type="checkbox" class="form-check-input" id="chkletters">

<label class="form-check-label" for="NewlettersCheck">Subscribe to


newsletters</label>

</div>

</div>

</div>

<div class="form-group row">

<div class="col-sm-10 offset-sm-2">

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

</div>

</div>

</form>

</div>

</body>

</html>
Bootstrap Inline Forms
In bootstrap, if you want to show all the form elements such as labels, input controls, etc., on a
single horizontal row, then you need to use inline forms.

Generally, the inline forms will display all the labels and form controls on the same line only when
viewports that are at least 576px wide otherwise, the form controls will appear horizontally.

In bootstrap, we can create the inline forms by adding .form-inline class to <form> element.
Following is the example of creating the inline form with required form controls in bootstrap.

<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap Inline Forms Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<style>
.bcontent {

margin-top: 10px;

</style>

</head>

<body>

<div class="container-fluid bcontent">

<h2>Bootstrap Inline Forms</h2>

<hr />

<form class="form-inline">

<label for="email">Email: </label>

<input type="email" class="form-control" id="email" placeholder="Enter email">

<label for="password">Password: </label>

<input type="password" class="form-control" id="pwd" placeholder="Enter password">

<div class="form-check">

<input type="checkbox" class="form-check-input" id="chkletters">

<label class="form-check-label" for="inlineCheck">Remember me</label>

</div>

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

</form>

</div>

</body>

</html>

If you observe the above result, the inline form has arranged the controls without having any
spaces, and it looks like a compressed form. In inline form, we need to use bootstrap spacing
utility classes to align the controls properly.

Following is the example of using the bootstrap spacing utility classes to align the inline form
controls properly.
<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap Inline Forms with Utilities Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<style>

.bcontent {

margin-top: 10px;

</style>

</head>

<body>

<div class="container-fluid bcontent">

<h2>Bootstrap Inline Forms with Utilities</h2>

<hr />

<form class="form-inline">

<label for="email" class="mr-sm-2">Email:</label>

<input type="email" class="form-control mb-2 mr-sm-2" id="email" placeholder="Enter


email">

<label for="password" class="mr-sm-2">Password:</label>

<input type="password" class="form-control mb-2 mr-sm-2" id="pwd" placeholder="Enter


password">

<div class="form-check mb-2 mr-sm-2">

<input type="checkbox" class="form-check-input" id="chkletters">

<label class="form-check-label" for="inlineCheck">Remember me</label>


</div>

<button type="submit" class="btn btn-primary mb-2">Submit</button>

</form>

</div>

</body>

</html>

Bootstrap Form Validation


Bootstrap has built-in form validation classes to provide actionable feedback to users. Generally,
the bootstrap will use browser form validation APIs to validate the form.

<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap Form Validation Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<style>

.bcontent {

margin-top: 10px;

</style>

</head>

<body>
<div class="container-fluid bcontent">

<h2>Bootstrap Form Validation</h2>

<hr />

<form class="was-validated">

<div class="form-group">

<label for="fname">First Name</label>

<input type="text" class="form-control" id="fname" name="fname" placeholder="Enter


first name" required>

<div class="valid-feedback">Valid.</div>

<div class="invalid-feedback">Please enter first name.</div>

</div>

<div class="form-group">

<label for="lname">Last Name</label>

<input type="text" class="form-control" id="lname" placeholder="Enter last name"


required>

<div class="valid-feedback">Valid.</div>

<div class="invalid-feedback">Please enter last name.</div>

</div>

<div class="form-group">

<label for="email">Email</label>

<input type="email" class="form-control" id="email" placeholder="Enter email" required>

<div class="valid-feedback">Valid.</div>

<div class="invalid-feedback">Please enter email.</div>

</div>

<div class="form-group form-check">

<input type="checkbox" class="form-check-input" id="chkterms" required> I agree all terms


& conditions

<div class="valid-feedback">Valid.</div>

<div class="invalid-feedback">Please agree terms & conditions.</div>

</div>

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

</form>
</div>

</body>

</html>

You might also like