Bootstrap 5-Forms
Bootstrap5 forms use to create a function for user interaction. The form element collects and updates information from the user using fields such as checkboxes, radio buttons, or text fields. We can insert and save users' data in the database.
Bootstrap 5 form types
- Bootstrap 5 Stacked Forms
- Bootstrap 5 Inline Form
<head>
<title> Bootstrap 5 Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "container mt-3">
<h1>Bootstrap 5 Stacked form</h1>
<form action = " ">
<div class = "my-2">
<label for = "uname"> Student Name: </label>
<input type = "text" class = "form-control" id = "uname" placeholder = "Enter student name" name = "sname">
</div>
<div class="my-2">
<label for = "pswd"> Student Password: </label>
<input type = "password" class = "form-control" id = "pswd" placeholder = "Enter student password" name="pswd">
</div>
<div class="form-check mb-2">
<label class = "form-check-label" id = "fcl">
<input class = "form-check-input" type = "checkbox" name = "click" id = "ad">
Click here </label>
</div>
<button type = "submit" class = "btn btn-danger"> Submit </button>
</form>
</div>
</body>
</html>
Bootstrap 5 Stacked form
<html lang = "en">
<head>
<title> Bootstrap 5 Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container mt-3">
<h2>Inline Forms</h2>
<p>If you want your form elements to appear side by side, use .row and .col:</p>
<form> <div class="row"> <div class="col"> <input type="text" class="form-control" placeholder="Enter email" name="email">
</div>
<div class="col">
<input type="password" class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
</div>
</body>
</html>
Inline Forms
If you want your form elements to appear side by side, use .row and .col:
Bootstrap 5 Form control size
<html lang = "en"><head>
<title> Bootstrap 5 Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container mt-3">
<h2>Bootstrap 5 Form control size </h2>
<form>
<div class="row">
<div class="col">
<label for = "uname"> Student Name: </label>
<input type = "text" class = "form-control-lg" id = "uname" placeholder = "Large size element" name = "sname">
</div>
<div class = "col">
<label for = "pswd">Student Password: </label>
<input type = "password" class = "form-control" id = "pswd" placeholder = "Default size element" name = "pswd">
</div>
<div class = "col">
<label for = " nmbr "> Student Numbers: </label>
<input type = "nmbr" class = "form-control-sm" id = "nmbr" placeholder = " Large size element " name = "nmbr">
</div>
<div class = "col mt-4">
<button type = "submit" class = "btn btn-danger"> Submit </button>
</div>
</div>
</form>
</div>
</body>
</html>
Bootstrap 5 Form control size
Bootstrap 5 Form Validations
Form validation is "the technical process by which a web form verifies the accuracy of the user's input."
Login form Example
<html lang = "en"><head>
<title> Bootstrap 5 Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container mt-3" style = "border:2px solid black;">
<h5> Bootstrap 5 Login form validations
<form action = " " class = "was-validated">
<div class = "emailid">
<label for = "emid" class = "form-label"> Email Id: </label>
<input type = "email" class = "form-control" id = " emid " placeholder = "Enter email_id" name = " emid " required>
<div class = "valid-feedback"> Valid data. </div>
<div class = "invalid-feedback"> Please fill the email id.</div>
</div>
<div class = "passwrd">
<label for = "passwrd" class = "form-label"> Password:</label>
<input type = "text" class = "form-control" id = "passwrd" placeholder = "Enter password" name = "passwrd" required>
<div class = "valid-feedback"> Valid data. </div>
<div class = "invalid-feedback"> Please fill the password </div>
</div>
<button type = "submit" class = "btn btn-info mt-2"> Submit
</form>
</div>
</body>
</html>