Formularios
Ejemplos y pautas de uso para estilos de control de formulario, opciones de diseño y componentes personalizados para crear una amplia variedad de formularios.
Visión general
Los controles de formulario de Bootstrap amplían nuestros estilos de formulario reiniciados con clases. Use estas clases para optar por sus pantallas personalizadas para una representación más consistente en todos los navegadores y dispositivos.
Asegúrese de utilizar un type
atributo apropiado en todas las entradas (p. ej., email
para la dirección de correo electrónico o number
para la información numérica) para aprovechar los controles de entrada más nuevos, como la verificación de correo electrónico, la selección de números y más.
Aquí hay un ejemplo rápido para demostrar los estilos de formulario de Bootstrap. Siga leyendo para obtener documentación sobre las clases requeridas, el diseño de formularios y más.
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Texto del formulario
El texto del formulario a nivel de bloque o en línea se puede crear usando .form-text
.
Asociación de texto de formulario con controles de formulario
El texto del formulario debe asociarse explícitamente con el control de formulario con el que se relaciona el uso del aria-describedby
atributo. Esto garantizará que las tecnologías de asistencia, como los lectores de pantalla, anuncien el texto de este formulario cuando el usuario enfoca o ingresa el control.
El texto del formulario debajo de las entradas se puede diseñar con .form-text
. Si se utilizará un elemento a nivel de bloque, se agrega un margen superior para facilitar el espaciado de las entradas anteriores.
<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>
El texto en línea puede usar cualquier elemento HTML en línea típico (ya sea un <span>
, <small>
o cualquier otro) con nada más que la .form-text
clase.
<div class="row g-3 align-items-center">
<div class="col-auto">
<label for="inputPassword6" class="col-form-label">Password</label>
</div>
<div class="col-auto">
<input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
</div>
<div class="col-auto">
<span id="passwordHelpInline" class="form-text">
Must be 8-20 characters long.
</span>
</div>
</div>
formularios deshabilitados
Agregue el disabled
atributo booleano en una entrada para evitar las interacciones del usuario y hacer que parezca más claro.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Agregue el disabled
atributo a <fieldset>
para deshabilitar todos los controles dentro. Los navegadores tratan todos los controles de formulario nativos ( <input>
, <select>
y <button>
elementos) dentro de un <fieldset disabled>
como deshabilitados, lo que evita las interacciones del teclado y el mouse en ellos.
Sin embargo, si su formulario también incluye elementos personalizados similares a botones como <a class="btn btn-*">...</a>
, estos solo tendrán un estilo de pointer-events: none
, lo que significa que aún se pueden enfocar y operar con el teclado. En este caso, debe modificar manualmente estos controles agregándolos tabindex="-1"
para evitar que reciban atención y aria-disabled="disabled"
señalar su estado a las tecnologías de asistencia.
<form>
<fieldset disabled>
<legend>Disabled fieldset example</legend>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="mb-3">
<label for="disabledSelect" class="form-label">Disabled select menu</label>
<select id="disabledSelect" class="form-select">
<option>Disabled select</option>
</select>
</div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
<label class="form-check-label" for="disabledFieldsetCheck">
Can't check this
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
Accesibilidad
Asegúrese de que todos los controles de formulario tengan un nombre accesible adecuado para que su propósito pueda transmitirse a los usuarios de tecnologías de asistencia. La forma más sencilla de lograr esto es utilizar un <label>
elemento o, en el caso de los botones, incluir texto suficientemente descriptivo como parte del <button>...</button>
contenido.
Para situaciones en las que no es posible incluir un <label>
contenido de texto visible o apropiado, existen formas alternativas de proporcionar un nombre accesible, como:
<label>
elementos ocultos usando la.visually-hidden
clase- Apuntando a un elemento existente que puede actuar como una etiqueta usando
aria-labelledby
- Proporcionar un
title
atributo - Estableciendo explícitamente el nombre accesible en un elemento usando
aria-label
Si ninguno de estos está presente, las tecnologías de asistencia pueden recurrir al uso del placeholder
atributo como respaldo para el nombre accesible en <input>
y <textarea>
elementos. Los ejemplos de esta sección proporcionan algunos enfoques sugeridos para casos específicos.
Si bien el uso de contenido visualmente oculto ( .visually-hidden
, aria-label
e incluso placeholder
contenido, que desaparece una vez que un campo de formulario tiene contenido) beneficiará a los usuarios de tecnología de asistencia, la falta de texto de etiqueta visible aún puede ser problemático para ciertos usuarios. Alguna forma de etiqueta visible es generalmente el mejor enfoque, tanto para la accesibilidad como para la usabilidad.
Hablar con descaro a
Muchas variables de formulario se establecen en un nivel general para ser reutilizadas y ampliadas por componentes de formulario individuales. Verá estos más a menudo como $btn-input-*
y $input-*
variables.
Variables
$btn-input-*
Las variables son variables globales compartidas entre nuestros botones y nuestros componentes de formulario. Encontrará que estos se reasignan con frecuencia como valores a otras variables específicas de componentes.
$input-btn-padding-y: .375rem;
$input-btn-padding-x: .75rem;
$input-btn-font-family: null;
$input-btn-font-size: $font-size-base;
$input-btn-line-height: $line-height-base;
$input-btn-focus-width: .25rem;
$input-btn-focus-color-opacity: .25;
$input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity);
$input-btn-focus-blur: 0;
$input-btn-focus-box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;
$input-btn-padding-y-sm: .25rem;
$input-btn-padding-x-sm: .5rem;
$input-btn-font-size-sm: $font-size-sm;
$input-btn-padding-y-lg: .5rem;
$input-btn-padding-x-lg: 1rem;
$input-btn-font-size-lg: $font-size-lg;
$input-btn-border-width: $border-width;