Bootstrap Forms Examples |Complete Form in boostarap

Bootstrap Forms Examples |Complete Form in boostarap

Bootstrap Forms Examples | Complete Form in boostarap

Basic example

A basic example of a simple login form with input fields (email and password), checkbox and submit button.

Checkbox and “forgot password” link are positioned inline by using 2 column grid layout.

 

[su_note note_color=”#e3e3e3″]Note: Most of the demo examples have a fixed width for the demo purpose. Included code examples do not have a fixed width, so they’ll naturally fill the full width of its parent element.[/su_note]

To control the width of the form place it in the grid, use the sizing utilities, or set the width inline.

 

<form>

  <!-- Email input -->

  <div class="form-outline mb-4">

    <input type="email" id="form1Example1" class="form-control" />

    <label class="form-label" for="form1Example1">Email address</label>

  </div>

<!-- Password input -->

<div class="form-outline mb-4">

<input type="password" id="form1Example2" class="form-control" />

<label class="form-label" for="form1Example2">Password</label>

</div>

<!-- 2 column grid layout for inline styling -->

<div class="row mb-4">

<div class="col d-flex justify-content-center">

<!-- Checkbox -->

<div class="form-check">

<input

class="form-check-input"

type="checkbox"

value=""

id="form1Example3"

checked

/>

<label class="form-check-label" for="form1Example3"> Remember me </label>

</div>

</div>

<div class="col">

<!-- Simple link -->

<a href="#!">Forgot password?</a>

</div>

</div>

<!-- Submit button -->

<button type="submit" class="btn btn-primary btn-block">Sign in</button>

</form>

 

Every group of form fields should reside in a <form> element. MDB provides no default styling for the <form> element, but there are some powerful browser features that are provided by default.

 

Bootstrap 4 Default Settings

Form controls automatically receive some global styling with Bootstrap:

All textual <input>, <textarea>, and <select> elements with class .form-control have a width of 100%.

 

Bootstrap 4 Form Layouts

Bootstrap provides two types of form layouts:

Stacked (full-width) form

Inline form

 

Bootstrap 4 Stacked Form

The following example creates a stacked form with two input fields, one checkbox, and a submit button.

Add a wrapper element with .form-group, around each form control, to ensure proper margins:

 

Example

<form action="/action_page.php">

  <div class="form-group">

    <label for="email">Email address:</label>

    <input type="email" class="form-control" placeholder="Enter email" id="email">

  </div>

  <div class="form-group">

    <label for="pwd">Password:</label>

    <input type="password" class="form-control" placeholder="Enter password" id="pwd">

  </div>

  <div class="form-group form-check">

    <label class="form-check-label">

      <input class="form-check-input" type="checkbox"> Remember me

    </label>

  </div>

  <button type="submit" class="btn btn-primary">Submit</button>

</form>

 

In an inline form, all of the elements are inline and left-aligned.

[su_note note_color=”#e3e3e3″]Note: This only applies to forms within viewports that are at least 576px wide. On screens smaller than 576px, it will stack horizontally.[/su_note]

Additional rule for an inline form:

  • Add class .form-inline to the <form> element

 

The following example creates an inline form with two input fields, one checkbox, and one submit button:

Example

<form class="form-inline" action="/action_page.php">

  <label for="email">Email address:</label>

  <input type="email" class="form-control" placeholder="Enter email" id="email">

  <label for="pwd">Password:</label>

  <input type="password" class="form-control" placeholder="Enter password" id="pwd">

  <div class="form-check">

    <label class="form-check-label">

      <input class="form-check-input" type="checkbox"> Remember me

    </label>

  </div>

  <button type="submit" class="btn btn-primary">Submit</button>

</form>

 

Login form

Typical login form with additional register buttons.

 

HTML

<form>

  <!-- Email input -->

  <div class="form-outline mb-4">

    <input type="email" id="form2Example1" class="form-control" />

    <label class="form-label" for="form2Example1">Email address</label>

  </div>

 

<!-- Password input -->

<div class="form-outline mb-4">

<input type="password" id="form2Example2" class="form-control" />

<label class="form-label" for="form2Example2">Password</label>

</div>

 

<!-- 2 column grid layout for inline styling -->

<div class="row mb-4">

<div class="col d-flex justify-content-center">

<!-- Checkbox -->

<div class="form-check">

<input

class="form-check-input"

type="checkbox"

value=""

id="form2Example3"

checked

/>

<label class="form-check-label" for="form2Example3"> Remember me </label>

</div>

</div>

 

<div class="col">

<!-- Simple link -->

<a href="#!">Forgot password?</a>

</div>

</div>

 

<!-- Submit button -->

<button type="submit" class="btn btn-primary btn-block mb-4">Sign in</button>

 

<!-- Register buttons -->

<div class="text-center">

<p>Not a member? <a href="#!">Register</a></p>

<p>or sign up with:</p>

<button type="button" class="btn btn-primary btn-floating mx-1">

<i class="fab fa-facebook-f"></i>

</button>

 

<button type="button" class="btn btn-primary btn-floating mx-1">

<i class="fab fa-google"></i>

</button>

 

<button type="button" class="btn btn-primary btn-floating mx-1">

<i class="fab fa-twitter"></i>

</button>

 

<button type="button" class="btn btn-primary btn-floating mx-1">

<i class="fab fa-github"></i>

</button>

</div>

</form>

 

Register form

Typical register form with additional register buttons.

HTML

<form>

  <!-- 2 column grid layout with text inputs for the first and last names -->

  <div class="row mb-4">

    <div class="col">

      <div class="form-outline">

        <input type="text" id="form3Example1" class="form-control" />

        <label class="form-label" for="form3Example1">First name</label>

      </div>

    </div>

    <div class="col">

      <div class="form-outline">

        <input type="text" id="form3Example2" class="form-control" />

        <label class="form-label" for="form3Example2">Last name</label>

      </div>

    </div>

  </div>

 

<!-- Email input -->

<div class="form-outline mb-4">

<input type="email" id="form3Example3" class="form-control" />

<label class="form-label" for="form3Example3">Email address</label>

</div>

 

<!-- Password input -->

<div class="form-outline mb-4">

<input type="password" id="form3Example4" class="form-control" />

<label class="form-label" for="form3Example4">Password</label>

</div>

 

<!-- Checkbox -->

<div class="form-check d-flex justify-content-center mb-4">

<input

class="form-check-input me-2"

type="checkbox"

value=""

id="form2Example3"

checked

/>

<label class="form-check-label" for="form2Example3">

Subscribe to our newsletter

</label>

</div>

<!-- Submit button -->

<button type="submit" class="btn btn-primary btn-block mb-4">Sign up</button>

<!-- Register buttons -->

<div class="text-center">

<p>or sign up with:</p>

<button type="button" class="btn btn-primary btn-floating mx-1">

<i class="fab fa-facebook-f"></i>

</button>

<button type="button" class="btn btn-primary btn-floating mx-1">

<i class="fab fa-google"></i>

</button>

<button type="button" class="btn btn-primary btn-floating mx-1">

<i class="fab fa-twitter"></i>

</button>

<button type="button" class="btn btn-primary btn-floating mx-1">

<i class="fab fa-github"></i>

</button>

</div>

</form>

 

Form Validation

Example

In this example, we use .needs-validation, which will add the validation effect AFTER the form has been submitting (if there’s anything missing). Note that you will also have to add some jQuery code for this example to work properly:

 

<form action="/action_page.php" class="needs-validation" novalidate>

  <div class="form-group">

    <label for="uname">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="form-group">

    <label for="pwd">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-group form-check">

    <label class="form-check-label">

      <input class="form-check-input" type="checkbox" name="remember" required> I agree on blabla.

      <div class="valid-feedback">Valid.</div>

      <div class="invalid-feedback">Check this checkbox to continue.</div>

    </label>

  </div>

  <button type="submit" class="btn btn-primary">Submit</button>

</form>

 

// Disable form submissions if there are invalid fields

(function() {

  'use strict';

  window.addEventListener('load', function() {

    // Get the forms we want to add 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);

})();

Related searches for Bootstrap Forms Examples

2 thoughts on “Bootstrap Forms Examples |Complete Form in boostarap”

Leave a Comment

Your email address will not be published. Required fields are marked *