Síntesis de las propiedades de Bootstrap 4+ para Formularios.
Para más información consultar https://getbootstrap.com
Por defecto los formularios se definen como display: block, width: 100%
.form-control: Controles básicos <input>, <select>, <textarea>
<input type="email" class="form-control">.form-control-file: Archivo
<input type="file" class="form-control-file">.form-control-lg, .form-control-sm: Tamaño de controles
<input class="form-control form-control-lg" type="text">
.form-group: Estructurar controles
Agrupar etiquetas relacionadas (labels, controles, texto opcional, mensajes de validación)
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
readonly: Solo lectura
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
disabled: Deshabilitar
Si se aplica a fieldset, deshabilita todos los “form controls”.
Cuidado con los enlaces, pueden estar activados: Más información
<input class="form-control" type="text" placeholder="Disabled input here..." disabled>
.sr-only: Campos ocultos
Pensado para “screen readers”
<label class="sr-only" for="inlineFormInput">Name</label>
.form-control-plaintext: Texto plano, sin diseño
Recomendado usar con readonly
<input type="text" readonly class="form-control-plaintext">
.form-inline: Campos en línea
<form class="form-inline">
<div class="form-group mb-2">…</div>
<div class="form-group mx-sm-3 mb-2">…</div>
<button type="submit">Confirm identity</button>
</form>
.form-control-range: Scroll
<input type="range" class="form-control-range">
.form-check (.form-check-input, .form-check-label): checkboxes y radios
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">Default checkbox</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">Default radio</label>
</div>
.form-check-inline: checkboxes y radios en línea
<div class="form-check form-check-inline"> ... </div>
<div class="form-check form-check-inline"> ... </div>
.position-static: .form-check que no poseen label
Se recomienda utilizar conjuntamente con aria-label
<div class="form-check">
<input class="form-check-input position-static" type="checkbox">
</div>
Estructuras complejas
Pueden ser construidas a través de las “grid classes”
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
</div>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
</form>
.form-row Reemplaza a .row para un diseño compacto
<form>
<div class="form-row">
<div class="col"> ... </div>
</div>
</form>
Ejemplos de estructuras complejas
Estructuras complejas utilizando grid classes
Formulario horizontal utilizando grid classes
.col-form-label: centrar verticalmente
<form><div class="form-group row"><label for="inputEmail3" class="col-sm-2 col-form-label"> ... </label><div class="col-sm-10"> ... </div></div>
.col-form-label-sm, .col-form-label-lg: Tamaño del label
Utilizar correctamente con form-control-sm, form-control-lg
<form><div class="form-group row"><label for="inputEmail3" class="col-sm-2 col-form-label col-form-label-sm"> ... </label><div class="col-sm-10"> ... </div></div>
.col-auto: Auto-tamaño
Utiliza flex-box par crear columnas autoajustables.
Pueden ser utilizadas conjuntamente con columnas de tamaño específico
<form>
<div class="form-row">
<div class="col-auto"> ... </div>
<div class="col-auto"> ... </div>
</div>.form-text: Texto de ayuda
<small class="form-text text-muted">
La clave debe ser de 8 caracteres
</small>CSS de validación
Incluir el atributo novalidate en los formularios.
Novalidate requiere de javascript para administrar los eventos del formulario.
<form novalidate>.valid-feedback, .invalid-feedback: Mensaje de validación o invalidación
<formnovalidate>
<div class="form-row">
<div class="col-auto">
<label for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" required>
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback">
Error!
</div>
</div>.is-valid, .is-invalid: Indicar si un campo es válido o no
Utilizado cuando se realiza validación en el servidor.
<input type="text" class="form-control is-valid">
<input type="text" class="form-control is-invalid">.valid-tooltip, .invalid-tooltip: Mensaje de validación o invalidación a través de un tooltip
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-auto">
<label for="validationTooltip01">First name</label>
<input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
<div class="valid-tooltip">
Looks good!
</div>
<div class="invalid-tooltip">
Error!
</div>.input-group, .input-group-prepend, .input-group-append, .input-group-text: Extender controles
<label>s afuera del input-group
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control">
</div><div class="input-group mb-3">
<input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">@example.com</span>
</div>
</div><div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>input-group-sm, input-group-lg: Tamaño de input-group
<div class="input-group input-group-sm">
<div class="input-group input-group-lg">Multiple inputs
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">First and last name</span>
</div>
<input type="text" aria-label="First name" class="form-control">
<input type="text" aria-label="Last name" class="form-control">
</div>Multiple add-ons
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
</div>
<input type="text" class="form-control">
</div>