Bootstrap 4 – Formularios

Configuración predeterminada de Bootstrap 4

Los controles de formulario reciben automáticamente un estilo global con Bootstrap. Todos los elementos textuales <input>, <textarea> y <select> con la clase .form-control tienen un ancho del 100%.

Bootstrap 4 diseños de formulario

Bootstrap 4 provee dos tipos de diseño de formularios:

  • Formulario apilado (ancho completo)
  • Formulario en línea

Formulario apilado (ancho completo)

Formulario apilado (ancho completo) Bootstrap 4

El siguiente ejemplo crea un formulario apilado con dos campos de entrada, una casilla de verificación y un botón de envío.

Agrega un elemento contenedor con .form-group, alrededor de cada control de formulario, para garantizar los márgenes adecuados.

Ejm

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

Formulario en linea

Formulario en linea Bootstrap 4

En un formulario en línea, todos sus elementos están en línea ordenados a la izquierda.

Nota: Esto solo se aplica a formularios dentro de ventanas gráficas que tienen al menos 576 px de ancho. En pantallas de menos de 576 px, se apilará horizontalmente.

La regla adicional para un formulario en línea es la siguiente:

  • Añade la clase .form-inline a la etiqueta <form>.

El siguiente ejm crea un formulario en línea con dos etiquetas <input>, un checkbox y un botón de enviar formulario.

Ejm

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

Formularios en línea con utilidades

El formulario en línea anterior se siente “comprimido” y se verá mucho mejor con las utilidades de espaciado de Bootstrap. El siguiente ejemplo agrega un margen derecho (.mr-sm-2) a cada entrada en todos los dispositivos (pequeños y superiores). Y se usa una clase de margen inferior (.mb-2) para diseñar el campo de entrada cuando se rompe (va de horizontal a vertical debido a la falta de espacio / ancho suficiente):

Formularios en ilnea con utilidades Bootstrap 4

Ejm

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="Enter password" name="pswd">
    </div>
  </div>
</form>

Si deseas menos márgenes de cuadrícula (anular los canales de columna predeterminados), usa .form-row en lugar de .

Bootstrap 4

Ejm

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="Enter password" name="pswd">
    </div>
  </div>
</form>

Formulario de validación

Formulario de validación Bootstrap 4

Puedes usar diferentes clases de validación para proporcionar comentarios valiosos a los usuarios. Agrega .was-validated o .needs-validation al elemento <form>, dependiendo de si deseas proporcionar comentarios de validación antes o después de enviar el formulario. Los campos de entrada tendrán un borde verde (válido) o rojo (no válido) para indicar lo que falta en el formulario. También puedes agregar un mensaje .valid-feedback o .invalid-feedback para decirle explícitamente al usuario qué falta o qué debe hacerse antes de enviar el formulario.

Ejm

En este ejemplo, usamos .was-validated para indicar lo que falta antes de enviar el formulario.

<form action="/action_page.php" class="was-validated">
  <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>

Ejm

En este ejemplo, usamos .needs-validation, que agregará el efecto de validación DESPUÉS de que el formulario se haya enviado (si falta algo). Ten en cuenta que también tendrás que agregar un código jQuery para que este ejemplo funcione correctamente:

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

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