FormsAndButtons.html

<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Test</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B"
            crossorigin="anonymous">
      <link rel="stylesheet" href="style.css">
</head>

<body>
      <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
            <a href="index.html" class="navbar-brand">eSKej</a>
            <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
                  <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarMenu">
                  <ul class="navbar-nav">
                        <li class="nav-item">
                              <a href="FormsAndButtons.html" class="nav-link">Form &amp; Buttons</a>
                        </li>
                        <li class="nav-item">
                              <a href="#" class="nav-link">...</a>
                        </li>
                  </ul>
            </div>
      </nav>

      <form action="" class="main-form needs-validation" novalidate>

            <div class="row">
                  <div class="col">
                        <div class="form-group">
                              <label for="firstname">Firstname</label>
                              <input type="text" name="firstname" id="firstname" class="form-control" required>
                              <!-- <div class="invalid-feedback">Uzupełnij pole!</div> -->
                              <!-- <div class="valid-feedback">OK!</div> -->
                        </div>
                  </div>
                  <div class="col">
                        <div class="form-group">
                              <label for="lastname">Lastname</label>
                              <input type="text" name="lastname" id="lastname" class="form-control" required>
                        </div>
                  </div>
            </div>
            <div class="form-group">
                  <label for="username">Username</label>
                  <input type="text" name="username" id="username" class="form-control" required>
            </div>
            <div class="form-group">
                  <label for="password">Password</label>
                  <input type="text" name="password" id="password" class="form-control" required>
            </div>
            <div class="form-group">
                  <label for="gender" id="gender">Gnder</label>
                  <select name="gender" id="gener" class="form-control">
                        <option value="male">Male</option>
                        <option value="male">Female</option>
                  </select>
            </div>
            <div class="row">
                  <div class="col">
                        <div class="form-check">
                              <input type="checkbox" id="accept-terms" class="form-check-input" required>
                              <label for="accept-terms" class="form-check-label">Accept Terms &amp; Conditions</label>
                        </div>
                  </div>
                  <div class="col-auto">
                        <div class="form-group">
                              <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                  </div>
            </div>
      </form>

      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em"
            crossorigin="anonymous"></script>


      <script>
            var form = document.querySelector('.needs-validation');
            form.addEventListener('submit', function (event) {
                  event.preventDefault();
                  if (form.checkValidity() === false) {
                        event.stopPropagation();
                  }
                  form.classList.add('was-validated');
            })
      </script>
</body>

</html>