Bootstrap Forms

Bootstrap is a free and open source front end development framework for the creation of websites and web apps.
Post Reply
User avatar
C0D3D
Site Admin
Posts: 159
Joined: Sun Jun 26, 2022 10:46 pm
Contact:
Contact C0D3D

Bootstrap Forms

Post by C0D3D »

Creating vertical form layouts with Bootstrap

Example 1

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Vertical Form Layout</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <form action="/examples/actions/confirmation.php" method="post">
        <div class="mb-3">
            <label class="form-label" for="inputEmail">Email</label>
            <input type="email" class="form-control" id="inputEmail" placeholder="Email" required>
        </div>
        <div class="mb-3">
            <label class="form-label" for="inputPassword">Password</label>
            <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
        </div>
        <div class="mb-3">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="checkRemember">
                <label class="form-check-label" for="checkRemember">Remember me</label>
            </div>
        </div>
        <button type="submit" class="btn btn-primary">Sign in</button>
    </form>
</div>
</body>
</html>


Creating horizontal form layouts with Bootstrap

Example 2

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Horizontal Form Layout</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <form action="/examples/actions/confirmation.php" method="post">
        <div class="row mb-3">
            <label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="inputEmail" placeholder="Email" required>
            </div>
        </div>
        <div class="row mb-3">
            <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-sm-10 offset-sm-2">
                <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="checkRemember">
                        <label class="form-check-label" for="checkRemember">Remember me</label>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-10 offset-sm-2">
                <button type="submit" class="btn btn-primary">Sign in</button>
            </div>
        </div>
    </form>
</div>
</body>
</html>


Creating inline form layouts with Bootstrap

Example 3

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Inline Form Layout</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <form action="/examples/actions/confirmation.php" method="post">
        <div class="row align-items-center g-3">
            <div class="col-auto">
                <label class="visually-hidden" for="inputEmail">Email</label>
                <input type="email" class="form-control" id="inputEmail" placeholder="Email" required>
            </div>
            <div class="col-auto">
                <label class="visually-hidden" for="inputPassword">Password</label>
                <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
            </div>
            <div class="col-auto">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="checkRemember">
                    <label class="form-check-label" for="checkRemember">Remember me</label>
                </div>
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-primary">Sign in</button>
            </div>
        </div>
    </form>
</div>
</body>
</html>


Creating responsive form layouts with Bootstrap

Example 4

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Responsive Form Layout</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <form action="/examples/actions/confirmation.php" method="post">
        <div class="row align-items-center g-3">
            <div class="col-md-auto col-12">
                <label class="form-label d-md-none" for="inputEmail">Email</label>
                <input type="email" class="form-control" id="inputEmail" placeholder="Email" required>
            </div>
            <div class="col-md-auto col-12">
                <label class="form-label d-md-none" for="inputPassword">Password</label>
                <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
            </div>
            <div class="col-md-auto col-12">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="checkRemember">
                    <label class="form-check-label" for="checkRemember">Remember me</label>
                </div>
            </div>
            <div class="col-md-auto col-12">
                <button type="submit" class="btn btn-primary">Sign in</button>
            </div>
        </div>
    </form>
    <p class="mt-4"><strong>Note:</strong> Please change the Editor layout/orientation to see how responsive layout actually works.</p>
</div>
</body>
</html>


Bootstrap static form controls

Example 5

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Static Form Control</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <form action="/examples/actions/confirmation.php" method="post">
        <div class="row mb-3">
            <label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
            <div class="col-sm-10">
                <input type="email" readonly class="form-control-plaintext" id="inputEmail" value="peterparker@example.com">
            </div>
        </div>
        <div class="row mb-3">
            <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-sm-10 offset-sm-2">
                <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="checkRemember">
                        <label class="form-check-label" for="checkRemember">Remember me</label>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-10 offset-sm-2">
                <button type="submit" class="btn btn-primary">Sign in</button>
            </div>
        </div>
    </form>
</div>
</body>
</html>


Placing checkboxes inline with Bootstrap

Example 6

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Placing Checkboxes Inline</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <h3 class="mb-4">Default Placement of Checkboxes</h3>
    <div class="row">
        <div class="col-12">
            <div class="form-check mb-3">
                <input type="checkbox" class="form-check-input" name="hobbies" id="checkMusic">
                <label class="form-check-label" for="checkMusic">Music</label>
            </div>
            <div class="form-check mb-3">
                <input type="checkbox" class="form-check-input" name="hobbies" id="checkTravel" checked>
                <label class="form-check-label" for="checkTravel">Travel</label>
            </div>
            <div class="form-check">
                <input type="checkbox" class="form-check-input" name="hobbies" id="checkReading" checked>
                <label class="form-check-label" for="checkReading">Reading</label>
            </div>
        </div>
    </div>
  	<hr>
    <h3 class="mb-4">Inline Placement of Checkboxes</h3>
    <div class="row">
        <div class="col-12">
            <div class="form-check form-check-inline">
                <input type="checkbox" class="form-check-input" name="hobbies" id="checkMusic">
                <label class="form-check-label" for="checkMusic">Music</label>
            </div>
            <div class="form-check form-check-inline ms-3">
                <input type="checkbox" class="form-check-input" name="hobbies" id="checkTravel" checked>
                <label class="form-check-label" for="checkTravel">Travel</label>
            </div>
            <div class="form-check form-check-inline ms-3">
                <input type="checkbox" class="form-check-input" name="hobbies" id="checkReading" checked>
                <label class="form-check-label" for="checkReading">Reading</label>
            </div>
        </div>
    </div>
</div>
</body>
</html>



Placing radio buttons inline with Bootstrap

Example 7

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Placing Radio Buttons Inline</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <h3 class="mb-4">Default Placement of Radio Buttons</h3>
    <div class="row">
        <div class="col-12">
            <div class="form-check mb-3">
                <input type="radio" class="form-check-input" name="gender" id="radioMale" checked>
                <label class="form-check-label" for="radioMale">Male</label>
            </div>
            <div class="form-check">
                <input type="radio" class="form-check-input" name="gender" id="radioFemale">
                <label class="form-check-label" for="radioFemale">Female</label>
            </div>
        </div>
    </div>
  	<hr>
    <h3 class="mb-4">Inline Placement of Radio Buttons</h3>
    <div class="row">
        <div class="col-12">
            <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input" name="gender" id="radioMale" checked>
                <label class="form-check-label" for="radioMale">Male</label>
            </div>
            <div class="form-check form-check-inline ms-3">
                <input type="radio" class="form-check-input" name="gender" id="radioFemale">
                <label class="form-check-label" for="radioFemale">Female</label>
            </div>
        </div>
    </div>
</div>
</body>
</html>


Height sizing of Inputs and select boxes with Bootstrap

Example 8

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Height Sizing of Form Controls</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>
</head>
<body>
<div class="bs-example">
    <form>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label col-form-label-lg">Email</label>
            <div class="col-sm-10">
                <input type="email" class="form-control form-control-lg" placeholder="Large input">
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label">Email</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" placeholder="Default input">
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label">Email</label>
            <div class="col-sm-10">
                <input type="email" class="form-control form-control-sm" placeholder="Small input">
            </div>
        </div>
        <hr>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label col-form-label-lg">State</label>
            <div class="col-sm-10">
                <select class="form-control form-control-lg">
                    <option>Large select</option>
                </select>
            </div>
        </div>    
        <div class="form-group row">
            <label class="col-sm-2 col-form-label">State</label>
            <div class="col-sm-10">
                <select class="form-control">
                    <option>Default select</option>
                </select>
            </div>
        </div>    
        <div class="form-group row">
            <label class="col-sm-2 col-form-label col-form-label-sm">State</label>
            <div class="col-sm-10">
                <select class="form-control form-control-sm">
                    <option>Small select</option>
                </select>
            </div>
        </div>
    </form>
</div>
</body>
</html>


Grid sizing of form controls with Bootstrap

example 9

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Grid Sizing of Form Controls</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <div class="row g-3">
        <div class="col-6">
            <input type="text" class="form-control" placeholder="City">
        </div>
        <div class="col-4">
            <select class="form-select">
                <option>State</option>
            </select>
        </div>
        <div class="col-2">
            <input type="text" class="form-control" placeholder="Zip">
        </div>
    </div>
</div>
</body>
</html>

Disabling form controls with Bootstrap

Example 10

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Disabled Form Controls</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <input type="text" class="form-control mb-3" placeholder="Disabled input" disabled>
    <textarea class="form-control mb-3" placeholder="Disabled textarea" disabled></textarea>
    <select class="form-select" disabled>
        <option>Disabled select</option>
    </select>
</div>
</body>
</html>

Disabling all form controls at once with Bootstrap

Example 11

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Disabled Form</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <form action="/examples/actions/confirmation.php" method="post">
        <fieldset disabled>
            <div class="row mb-3">
                <label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" id="inputEmail" placeholder="Email" required>
                </div>
            </div>
            <div class="row mb-3">
                <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-sm-10 offset-sm-2">
                    <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="checkRemember">
                            <label class="form-check-label" for="checkRemember">Remember me</label>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-10 offset-sm-2">
                    <button type="submit" class="btn btn-primary">Sign in</button>
                </div>
            </div>
        </fieldset>
    </form>
</div>
</body>
</html>


Creating readonly inputs with Bootstrap

Example 12

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Bootstrap 3 Readonly Inputs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
    .bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <form>
    	<input type="text" class="form-control" placeholder="Readonly input" readonly="readonly">
    </form>
</div>
</body>
</html>



Placing block help text around form controls

Example 13

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Block Help Text</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <label class="form-label" for="inputPassword">Password</label>
    <input type="password" class="form-control" id="inputPassword">
    <div class="form-text">
        Must be 8-20 characters long, contain letters, numbers and special characters, but must not contain spaces.
    </div>
</div>
</body>
</html>


Placing inline help text around form controls

Example 14

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Inline Help Text</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <div class="row align-items-center g-3">
        <div class="col-auto">
            <label class="col-form-label" for="inputPassword">Password</label>
        </div>
        <div class="col-auto">
            <input type="password" class="form-control" id="inputPassword">
        </div>
        <div class="col-auto">
            <span class="form-text">Must be 8-20 characters long.</span>
        </div>
    </div>
</div>
</body>
</html>


Bootstrap form validation

Example 15

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Form Validation</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <form action="/examples/actions/confirmation.php" class="needs-validation" method="post" novalidate>
        <div class="mb-3">
            <label class="form-label" for="inputEmail">Email</label>
            <input type="email" class="form-control" id="inputEmail" placeholder="Email" required>
            <div class="invalid-feedback">Please enter a valid email address.</div>
        </div>
        <div class="mb-3">
            <label class="form-label" for="inputPassword">Password</label>
            <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
            <div class="invalid-feedback">Please enter your password to continue.</div>
        </div>
        <div class="mb-3">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="checkRemember">
                <label class="form-check-label" for="checkRemember">Remember me</label>
            </div>
        </div>
        <button type="submit" class="btn btn-primary">Sign in</button>
    </form>

    <!-- JavaScript for disabling form submissions if there are invalid fields -->
    <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>
</div>
</body>
</html>


Displaying Bootstrap validation feedback in tooltip style

Example 16

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Display Form Validation Feedback in Tooltip Style</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="m-4">
        <form action="/examples/actions/confirmation.php" class="needs-validation" method="post" novalidate>
            <div class="mb-3 position-relative">
                <label class="form-label" for="inputEmail">Email</label>
                <input type="email" class="form-control" id="inputEmail" placeholder="Email" required>                
                <div class="invalid-tooltip">Please enter a valid email address.</div>
            </div>
            <div class="mb-3 position-relative">
                <label class="form-label" for="inputPassword">Password</label>
                <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
                <div class="invalid-tooltip">Please enter your password to continue.</div>
            </div>
            <div class="mb-3">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="checkRemember">
                    <label class="form-check-label" for="checkRemember">Remember me</label>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Sign in</button>
        </form>
      
        <!-- JavaScript for disabling form submissions if there are invalid fields -->
        <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>
    </div>
</body>
</html>

Supported form controls in Bootstrap

Example 17

Code: Select all

<!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</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<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="m-4">
    <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="row mb-3">
            <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="row mb-3">
            <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="row mb-3">
            <label class="col-sm-3 col-form-label" for="emailAddress">Email Address:</label>
            <div class="col-sm-9">
                <input type="email" class="form-control" id="emailAddress" placeholder="Email Address" required>
            </div>
        </div>
        <div class="row mb-3">
            <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="row mb-3">
            <label class="col-sm-3 col-form-label">Date of Birth:</label>
            <div class="col-sm-3">
                <select class="form-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="form-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="form-select">
                    <option>Year</option>
                </select>
            </div>
        </div>
        <div class="row mb-3">
            <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="row mb-3">
            <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="row mb-3">
            <label class="col-sm-3 col-form-label" for="uploadImage">Upload Image:</label>
            <div class="col-sm-9">
                <input type="file" class="form-control" id="uploadImage">
            </div>
        </div>
        <div class="row mb-3">
            <label class="col-sm-3 col-form-label">Gender:</label>
            <div class="col-sm-9 mt-2">
                <div class="form-check form-check-inline">
                    <input type="radio" class="form-check-input" name="gender" id="radioMale">
                    <label class="form-check-label" for="radioMale">Male</label>
                </div>
                <div class="form-check form-check-inline">
                    <input type="radio" class="form-check-input" name="gender" id="radioFemale">
                    <label class="form-check-label" for="radioFemale">Female</label>
                </div>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-sm-9 offset-sm-3">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="checkAgree" value="agree">
                    <label class="form-check-label" for="checkAgree">I agree to the <a href="#">Terms and Conditions</a></label>
                </div>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-sm-9 offset-sm-3">
                <input type="submit" class="btn btn-primary" value="Submit">
                <input type="reset" class="btn btn-secondary ms-2" value="Reset">
            </div>
        </div>
    </form>
</div>
</body>
</html>
----------------------------------------------------------------------
Together we are one! One we are many... Much Love from one brother to another...
Working together to achieve amazing things!
Teamwork is key.
Knowledge is Power!

4 Basic datatypes.
Strings: Which store a series of characters.
Int: Which store a full integer or number.
Float: A numeric value with a decimal.
Boolean: Only stores True or False and are very useful with if statements
----------------------------------------------------------------------
ImgBB Image upload
Top
Post Reply

Return to “_._Bootstrap_._”

Who is online

Users browsing this forum: Ahrefs [Bot] and 0 guests