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 clase .form-controltienen un ancho del 100 %.
Diseños de formulario de Bootstrap 4
Bootstrap proporciona dos tipos de diseños de formulario:
- Formulario apilado (ancho completo)
- formulario en línea
Bootstrap 4 formulario apilado
El siguiente ejemplo crea un formulario apilado con dos campos de entrada, una casilla de verificación y un botón de envío.
Agregue un elemento contenedor con .form-group, alrededor de cada control de formulario, para garantizar márgenes adecuados:
Ejemplo
<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 línea Bootstrap
En un formulario en línea, todos los elementos están en línea y alineados a la izquierda.
Nota: Esto solo se aplica a los formularios dentro de las ventanas gráficas que tienen al menos 576 px de ancho. En pantallas de menos de 576 px, se apilará horizontalmente.
Regla adicional para un formulario en línea:
- Agregar clase
.form-inlineal<form>elemento
El siguiente ejemplo crea un formulario en línea con dos campos de entrada, una casilla de verificación y un botón de envío:
Ejemplo
<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>
Formulario 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 mayores). Y se usa una clase inferior de margen ( .mb-2) para diseñar el campo de entrada cuando se rompe (va de horizontal a vertical debido a que no hay suficiente espacio/ancho):
Ejemplo
<form class="form-inline" action="/action_page.php">
<label for="email"
class="mr-sm-2">Email address:</label>
<input type="email" class="form-control
mb-2 mr-sm-2" placeholder="Enter email" id="email">
<label for="pwd"
class="mr-sm-2">Password:</label>
<input type="password" class="form-control
mb-2 mr-sm-2" placeholder="Enter password" id="pwd">
<div class="form-check mb-2 mr-sm-2">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary
mb-2">Submit</button>
</form>
Aprenderá más sobre el espaciado y otras clases de "ayuda" en nuestro Capítulo de utilidades de Bootstrap 4 .
Forma Fila/Cuadrícula
También puede usar columnas ( .col) para controlar el ancho y la alineación de las entradas de formulario sin usar las utilidades de espaciado. Solo recuerda ponerlos dentro de un .rowrecipiente.
En el siguiente ejemplo, usamos dos columnas que aparecerán una al lado de la otra. Aprenderá mucho más sobre las columnas y las filas en el capítulo Bootstrap Grids .
Ejemplo
<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 desea menos márgenes de cuadrícula (anular las medianías de columna predeterminadas), use .form-rowen lugar de .row:
Ejemplo
<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>
Validación de formulario
Puede usar diferentes clases de validación para proporcionar comentarios valiosos a los usuarios. Agregue .was-validatedo .needs-validational <form>elemento, dependiendo de si desea 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 puede agregar un
mensaje .valid-feedbacko .invalid-feedbackpara decirle al usuario explícitamente qué falta o qué debe hacerse antes de enviar el formulario.
Ejemplo
En este ejemplo, usamos .was-validatedpara 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>
Ejemplo
En este ejemplo, usamos .needs-validation, que agregará el efecto de validación DESPUÉS de que se haya enviado el formulario (si falta algo). Tenga en cuenta que también tendrá que agregar algo de 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>