Bootstrap Forms
Form as we all know it is a type of sheet in which we used to fill the information. Same like that webpages do have a form like login form or etc.
In Bootstrap we are having two forms layout
- Stacked (Full-width) form
- Inline form
Stacked form
In stacked type all the elements comes one by one in sequential manner.
Let’s understand this by the following program:-
<!DOCTYPE html>
<html lang="en">
<head>
<title> bootstrap 5 Example</title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h2>Stacked form </h2>
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email"
placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd"
placeholder="Enter password" name="pswd">
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"
name="remember"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Output of this Program
So we get our login form in a sequential manner .
Form Row/Grid
<!DOCTYPE html>
<html lang="en">
<head>
<title> bootstrap 5 Example</title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Form Grid</h2>
<form action="/index.html">
<div class="row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="col">
<input type="password" class="form-control" placeholder="Enter password" name="pswd">
<div>
</div>
<button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>
</div>
</body>
</html>
Output of this Program
Form Validation
<!DOCTYPE html>
<html lang="en">
<head>
<title> bootstrap 5 Example</title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Form Validation</h2>
<form action="/index.html" class="was-validated">
<div class="form-group">
<label for="uname">Username:</label>
<input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember" required> I agree
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Check this checkbox to continue.</div>
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Output of this Program
Here our login form is not sequential but its inline.
