Как создавать веб-формы в Bootstrap CSS [Примеры]

 
    <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="Email address">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Password">
    </div>
    </div>
 

Вот результат:

Источник

Обратите внимание: я добавил некоторые настройки полей в CSS, чтобы макет выглядел лучше. Вы можете увидеть этот код, щелкнув ссылку на источник.

Пример встроенной формы Bootstrap

Если вы хотите занимать меньше места, вы можете создать встроенную форму, в которой все элементы находятся в одной строке. Вы можете сделать это, добавив класс .form-inline к элементу и некоторым классам столбцов, зависящих от размера.

Вы увидите, что mb-2 был добавлен по всему коду, например, который устанавливает нижний край этих элементов в .5rem в Bootstrap. Точно так же mr-sm-2 устанавливает margin-right этих элементов на .5rem, а точку останова на small.

Давайте воспользуемся примером сверху и превратим его во встроенную форму. Вот код:

 
    <form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputEmail" placeholder="Email Address">
  <label class="sr-only" for="inlineFormInputGroupUsername2">Email Address</label>
  <div class="input-group mb-2 mr-sm-2">
    <input type="text" class="form-control" id="inlineFormInputPassword" placeholder="Password">
  </div>
  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

Вот результат:

Источник

Примечание. Если устройство или область просмотра, которые вы используете, имеют ширину менее 576 пикселей, элементы будут располагаться друг над другом. Если я уменьшу размер экрана до 400 пикселей, например, форма будет выглядеть так:

Пример проверки формы начальной загрузки

Предположим, вы хотите включить полезную обратную связь для пользователей, заполняющих ваши формы, например, напоминание о том, чтобы установить флажок «Запомнить меня», если они забыли перед отправкой. Вы можете сделать это, применив классы проверки к элементу Bootstrap .

Например, класс .was-validated сообщит пользователям, какие поля должны быть заполнены или отмечены перед отправкой, тогда как класс .needs-validation сообщит пользователям только об отсутствии полей после попытки отправки.

Какой бы класс вы ни использовали, поля ввода, которые были заполнены, будут иметь зеленую рамку, а поля ввода, которые не были заполнены, будут иметь красную рамку. Если вы хотите сообщить пользователям, какая именно информация отсутствует (и какая информация была успешно предоставлена), вы даже можете добавить сообщения .valid-feedback и .invalid-feedback.

В приведенном ниже примере давайте воспользуемся классом .needs-validation, чтобы пользователь знал, что чего-то не хватает.

Вот HTML, который вам нужно добавить в вашего HTML.

 
    <form action="/action_page.php" class="needs-validation" novalidate>
    <div class="form-group">
      <label for="email">Email Address</label>
      <input type="text" class="form-control" id="uname" placeholder="Enter email address" name="uname" required>
      <div class="valid-feedback">Thanks for entering a valid email address.</div>
      <div class="invalid-feedback">Please enter your email address.</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">Thanks for entering a valid password.</div>
      <div class="invalid-feedback">Please enter your password.</div>
    </div>
    <div class="form-group form-check">
      <label class="form-check-label">
        <input class="form-check-input" type="checkbox" name="remember" required> Remember me
        <div class="invalid-feedback">Please check this box to continue.</div>
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
 

И вот начальный JavaScript, который вам нужно добавить ниже в вашего HTML.

 
   <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>

Вот результат:

Добавление форм на ваш Bootstrap-сайт

Веб-формы – важный элемент дизайна вашего сайта. Они могут позволить вам создавать подписки на рассылку новостей, принимать заказы в Интернете и отслеживать информацию как о клиентах, так и о потенциальных клиентах. Веб-формы бывают самых разных форм и размеров, отчасти потому, что существует множество различных способов их создания.

Если вы используете Bootstrap, вы можете использовать указанные выше шаблоны для создания различных форм. Или, если вы не используете фреймворк для разработки, вы можете создать его полностью с нуля. Или, если вы используете WordPress, вы можете использовать плагин HubSpot WordPress.

Источник записи: https://blog.hubspot.com