27-Jul-24
Bootstrap 5 Form Control
All textual <input> and <textarea> elements with class
.form-control get proper form styling:
Add a .form-label class to each label element to ensure
correct padding.
Checkboxes are wrapped around a container element with
.form-check, and labels have a class of .form-check-label,
while checkboxes and radio buttons use .form-check-input.
Saturday, July 27, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 51
Bootstrap 5 Forms – Sample Codes
<form action="/action_page.php">
<div class="mb-3 mt-3">
<label for="email" class="form-label">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter
email" name="email">
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter
password" name="pswd">
</div>
<div class="form-check mb-3">
<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>
Saturday, July 27, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 52
1
27-Jul-24
Various Form Controls
<form>
<label for="comment">Comments:</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>
<input type="text" class="form-control form-control-lg" placeholder="Large input">
<input type="text" class="form-control" placeholder="Normal input">
<input type="text" class="form-control form-control-sm" placeholder="Small input">
<select class="form-select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<input type="text" class="form-control-plaintext" placeholder="Plaintext input">
<input type="text" class="form-control" placeholder="Normal input">
</form>
Saturday, July 27, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 53
Form Row/Grid (Inline Forms)
<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>
Saturday, July 27, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 54
2
27-Jul-24
Check Boxes and Radio Buttons -- 1
Checkboxes are used if you want the user to select any number of options
from a list of preset options.
Radio buttons on the other hand are used if you want to limit the user to just
one selection from a list of preset options.
To style checkboxes, use a wrapper element such as <div> with class="form-
check" to ensure proper margins for labels and checkboxes.
Then, add the .form-check-label class to label elements, and .form-check-
input to style checkboxes properly inside the .form-check container.
Use the checked attribute if you want the checkbox to be checked by default.
If you want your checkbox to be styled as a toggle switch, use the .form-
switch class together with the .form-check container:
Saturday, July 27, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 55
Check Boxes and Radio Buttons -- 2
<div class="form-check">
<input class="form-check-
input" type="checkbox" id="check1" name="option1" value="something" checked>
<label class="form-check-label">Option 1</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-
input" id="radio1" name="optradio" value="option1" checked>Option 1
<label class="form-check-label" for="radio1"></label>
</div>
<div class="form-check">
<input type="radio" class="form-check-
input" id="radio2" name="optradio" value="option2">Option 2
<label class="form-check-label" for="radio2"></label>
</div>
<div class="form-check form-switch">
<input class="form-check-
input" type="checkbox" id="mySwitch" name="darkmode" value="yes" checked>
<label class="form-check-label" for="mySwitch">Dark Mode</label>
</div>
Saturday, July 27, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 56
3
27-Jul-24
Input Groups -- 2
The .input-group class is a container to enhance an input by adding an icon,
text or a button in front or behind the input field as a "help text".
To style the specified help text, use the .input-group-text class.
Saturday, July 27, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 57
Input Groups -- 2
<form>
<div class="input-group">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Your Email">
<span class="input-group-text">@example.com</span>
</div>
</form>
Saturday, July 27, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 58
4
27-Jul-24
Floating Labels
By default, when using labels, they normally appear on top of the
input field.
Floating labels, enable us insert the label inside the input field, and
make them float/animate when you click on the input field
Saturday, July 27, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 59
Floating Labels
<div class="form-floating mb-3 mt-3">
<input type="text" class="form-control" id="email" placeholder="Enter
email" name="email">
<label for="email">Email</label>
</div>
<div class="form-floating mt-3 mb-3">
<input type="text" class="form-control" id="pwd" placeholder="Enter
password" name="pswd">
<label for="pwd">Password</label>
</div>
Saturday, July 27, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 60
5
27-Jul-24
Bootstrap Form Validation
Saturday, July 27, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 61
Bootstrap Form Validation
You can use different validation classes to provide valuable
feedback to users.
Add either .was-validated or .needs-validation to the <form>
element, depending on whether you want to provide validation
feedback before or after submitting the form.
The input fields will have a green (valid) or red (invalid) border to
indicate what's missing in the form.
You can also add a .valid-feedback or .invalid-feedback message
to tell the user explicitly what's missing, or needs to be done
before submitting the form.
Saturday, July 27, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 62
6
27-Jul-24
Bootstrap 5 Form Validation
<form action="action_page.php" class="was-validated">
<div class="mb-3 mt-3">
<label for="uname" class="form-label">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="mb-3">
<label for="pwd" class="form-label">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-check mb-3">
<input class="form-check-input" type="checkbox" id="myCheck" name="remember" required>
<label class="form-check-label" for="myCheck">I agree on terms and conditions.</label>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Check this checkbox to continue.</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Saturday, July 27, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 63
