Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Supported HTML Form Controls in Bootstrap 4</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script> <style> .bs-example{ margin: 20px; } </style> <script> // Self-executing function (function() { 'use strict'; window.addEventListener('load', function() { // Fetch all the forms we want to apply custom Bootstrap validation styles to var forms = document.getElementsByClassName('needs-validation'); // Loop over them and prevent submission var validation = Array.prototype.filter.call(forms, function(form) { form.addEventListener('submit', function(event) { if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); }, false); }); }, false); })(); </script> </head> <body> <div class="bs-example"> <h1 class="border-bottom pb-3 mb-4">Registration Form</h1> <form class="needs-validation" action="/examples/actions/confirmation.php" method="post" novalidate> <div class="form-group row"> <label class="col-sm-3 col-form-label" for="firstName">First Name:</label> <div class="col-sm-9"> <input type="text" class="form-control" id="firstName" placeholder="First Name" required> </div> </div> <div class="form-group row"> <label class="col-sm-3 col-form-label" for="lastName">Last Name:</label> <div class="col-sm-9"> <input type="text" class="form-control" id="lastName" placeholder="Last Name" required> </div> </div> <div class="form-group row"> <label class="col-sm-3 col-form-label" for="inputEmail">Email Address:</label> <div class="col-sm-9"> <input type="email" class="form-control" id="inputEmail" placeholder="Email Address" required> </div> </div> <div class="form-group row"> <label class="col-sm-3 col-form-label" for="phoneNumber">Mobile Number:</label> <div class="col-sm-9"> <input type="number" class="form-control" id="phoneNumber" placeholder="Phone Number" required> </div> </div> <div class="form-group row"> <label class="col-sm-3 col-form-label">Date of Birth:</label> <div class="col-sm-3"> <select class="custom-select" required> <option value="">Date</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select> </div> <div class="col-sm-3"> <select class="custom-select" required> <option value="">Month</option> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select> </div> <div class="col-sm-3"> <select class="custom-select"> <option>Year</option> </select> </div> </div> <div class="form-group row"> <label class="col-sm-3 col-form-label" for="postalAddress">Postal Address:</label> <div class="col-sm-9"> <textarea rows="3" class="form-control" id="postalAddress" placeholder="Postal Address" required></textarea> </div> </div> <div class="form-group row"> <label class="col-sm-3 col-form-label" for="ZipCode">Zip Code:</label> <div class="col-sm-9"> <input type="text" class="form-control" id="ZipCode" placeholder="Zip Code" required> </div> </div> <div class="form-group row"> <label class="col-sm-3 col-form-label">Gender:</label> <div class="col-sm-9 mt-2"> <label class="mb-0 mr-3"> <input type="radio" class="mr-1" name="gender"> Male </label> <label class="mb-0 mr-3"> <input type="radio" class="mr-1" name="gender"> Female </label> </div> </div> <div class="form-group row"> <div class="col-sm-9 offset-sm-3"> <label class="checkbox-inline"> <input type="checkbox" class="mr-1" value="agree"> I agree to the <a href="#">Terms and Conditions</a>. </label> </div> </div> <div class="form-group row"> <div class="col-sm-9 offset-sm-3"> <input type="submit" class="btn btn-primary" value="Submit"> <input type="reset" class="btn btn-secondary" value="Reset"> </div> </div> </form> </div> </body> </html>
