Bootstrap Login from (part 1) -5

 

<!-- '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' -->

  <div class="container">

     

     <!-- From ar uporer line    -->

    <h2>Stacked form</h2>       

    <!-- submit korle jei page e jabe -->

    <form action="https://www.youtube.com">

      <div class="form-group">

        <!-- protthekta ghor er uporer name -->

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

         <!--Email input ar line -->

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

      </div>

       <!-- Password input er jonno -->

      <div class="form-group">

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

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

      </div>

        <!-- Checkbox ar line -->

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

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

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

        </label>

     </div>

     <!-- Button ar line  -->

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

   

    </form>

  </div>

<!-- .......................................................................................................... -->

<div class="container">

  <h2>Form Validation</h2>

  <p>In this example, we use <code>.needs-validation</code>, which will add the validation effect AFTER the form has been submitting (if there's anything missing).</p>

  <p>Try to submit this form before filling out the input fields, to see the effect.</p>

 

  <form action="https://www.youtube.com" 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>

</div>

<script>

  // 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);

  })();

  </script>