Formularios

Ejemplos y pautas de uso para estilos de control de formularios, opciones de diseño y componentes personalizados para crear una amplia variedad de formularios.

Descripción general

Los controles de formulario de Bootstrap amplían nuestros estilos de formulario reiniciados (Reboot) con clases. Utiliza estas clases para optar por sus pantallas personalizadas y obtener una representación más consistente en todos los navegadores y dispositivos.

Asegúrate de usar un atributo type apropiado en todas las entradas (por ejemplo, email para la dirección de correo electrónico o number para obtener información numérica) para aprovechar los controles de entrada más nuevos, como verificación de correo electrónico, selección de números y más.

Aquí tienes un ejemplo rápido para demostrar los estilos de formulario de Bootstrap. Continúa 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">Dirección de correo electrónico</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
        <div id="emailHelp" class="form-text">Nunca compartiremos tu correo electrónico con nadie más.</div>
    </div>
    <div class="mb-3">
        <label for="exampleInputPassword1" class="form-label">Contraseña</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">Échame un vistazo</label>
    </div>
    <button type="submit" class="btn btn-primary">Enviar</button>
</form>

Formularios deshabilitados

Agrega el atributo booleano disabled en una entrada para evitar interacciones del usuario y hacer que parezca más ligera.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Agrega el atributo disabled a un <fieldset> para deshabilitar todos los controles que contiene. Los navegadores tratan todos los controles de formulario nativos (elementos<input>, <select> y <button>) dentro de un <fieldset disabled> como deshabilitado, lo que impide la interacción con el teclado y el mouse.

Sin embargo, si tu formulario también incluye elementos personalizados tipo botón como <a class="btn btn-*">...</a>, a estos solo se les dará un estilo de pointer-events: none, lo que significa que aún se pueden enfocar y operar usando el teclado. En este caso, debes modificar manualmente estos controles agregando tabindex="-1" para evitar que reciban el foco y aria-disabled="disabled" para señalar su estado a las tecnologías de asistencia.

<form>
    <fieldset disabled="">
        <legend>Ejemplo de conjunto de campos deshabilitado</legend>
        <div class="mb-3">
            <label for="disabledTextInput" class="form-label">Entrada deshabilitada</label>
            <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
        </div>
        <div class="mb-3">
            <label for="disabledSelect" class="form-label">Menú de selección deshabilitado</label>
            <select id="disabledSelect" class="form-select">
                <option>Select deshabilitado</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">
                    No puedo marcar esto
                </label>
            </div>
        </div>
        <button type="submit" class="btn btn-primary">Enviar</button>
    </fieldset>
</form>

Accesibilidad

Asegúrate de que todos los controles de formulario tengan un nombre accesible apropiado 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 elemento <label> 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> visible o contenido de texto apropiado, existen formas alternativas de proporcionar un nombre accesible, como como:

• <label> elementos ocultos usando .visually-hidden (clase)
• Apuntar a un elemento existente que puede actuar como etiqueta usando aria-labelledby
• Proporcionar un title (atributo)
• Establecer 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 atributo placeholder como alternativa para el nombre accesible en <input> y <textarea>. Los ejemplos de esta sección proporcionan algunos enfoques sugeridos para casos específicos.

Al usar contenido visualmente oculto (.visually-hidden, aria-label e incluso contenido placeholder, 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. Por lo general, el mejor enfoque es algún tipo de etiqueta visible, tanto por motivos de accesibilidad como de usabilidad.

CSS

Muchas variables de formulario se configuran a nivel general para ser reutilizadas y ampliadas por componentes de formulario individuales. Los verás con mayor frecuencia como variables $input-btn-* y $input-*.

Variables Sass

$input-btn-* son variables globales compartidas entre nuestros botones y nuestros componentes de formulario. Los encontrará frecuentemente reasignados como valores a otras variables específicas de componentes.

scss/_variables.scss (opens in a new tab)

$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:         $focus-ring-width;
$input-btn-focus-color-opacity: $focus-ring-opacity;
$input-btn-focus-color:         $focus-ring-color;
$input-btn-focus-blur:          $focus-ring-blur;
$input-btn-focus-box-shadow:    $focus-ring-box-shadow;
 
$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:      var(--#{$prefix}border-width);