✅ 1. Basic Bootstrap Form
html
<form class="mt-4">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter your email">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
✅ 2. Floating Labels
html
<form class="mt-4">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingEmail" placeholder="name@example.com">
<label for="floatingEmail">Email address</label>
</div>
<div class="form-floating mb-3">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<button type="submit" class="btn btn-success">Login</button>
</form>
✅ 3. Form Grid / Row Layout
html
<form class="row g-3 mt-4">
<div class="col-md-6">
<label for="firstName" class="form-label">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
<div class="col-md-6">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
<div class="col-md-12">
<label for="emailAddress" class="form-label">Email</label>
<input type="email" class="form-control" id="emailAddress">
</div>
<div class="col-12">
<button type="submit" class="btn btn-outline-primary">Register</button>
</div>
</form>
✅ 4. Validation Styles
html
<form class="needs-validation mt-4" novalidate>
<div class="mb-3">
<label for="validationEmail" class="form-label">Email</label>
<input type="email" class="form-control" id="validationEmail" required>
<div class="invalid-feedback">
Please enter a valid email.
</div>
</div>
<div class="mb-3">
<label for="validationPassword" class="form-label">Password</label>
<input type="password" class="form-control" id="validationPassword" required>
<div class="invalid-feedback">
Password is required.
</div>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
<script>
// Enable client-side validation
(function () {
'use strict'
const forms = document.querySelectorAll('.needs-validation')
Array.from(forms).forEach(form => {
form.addEventListener('submit', function (e) {
if (!form.checkValidity()) {
e.preventDefault()
e.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
</script>
