Formularios (Forms)

Descripción general

Los controles de formulario de Bootstrap amplían nuestros estilos de formulario normalizados (Rebooted) mediante clases. Usa estas clases para optar por sus visualizaciones personalizadas para una representación más consistente entre navegadores y dispositivos.

Asegúrate de usar un atributo type adecuado en todas las entradas (por ejemplo, email para dirección de correo electrónico o number para 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í hay un ejemplo rápido para demostrar los estilos de formulario de Bootstrap. Sigue 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">Márcame</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 claro.

<input class="form-control" id="disabledInput" type="text" placeholder="Entrada deshabilitada aquí..." disabled>

Agrega el atributo disabled a un <fieldset> para deshabilitar todos los controles en su interior. Los navegadores tratan todos los controles de formulario nativos (elementos <input>, <select>, y <button>) dentro de un <fieldset disabled> como deshabilitados, evitando interacciones tanto del teclado como del mouse sobre ellos.

Sin embargo, si tu formulario también incluye elementos personalizados similares a botones como <a class="btn btn-*">...</a>, a estos solo se les dará un estilo de pointer-events: none, lo que significa que siguen siendo enfocables y utilizables con el teclado. En este caso, debes modificar manualmente estos controles agregando tabindex="-1" para evitar que reciban enfoque y aria-disabled="disabled" para señalar su estado a las tecnologías de asistencia.

<form>
  <fieldset disabled>
    <legend>Ejemplo de grupo de campos (fieldset) deshabilitado</legend>
    <div class="mb-3">
      <label for="disabledTextInput" class="form-label">Entrada deshabilitada</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Entrada deshabilitada">
    </div>
    <div class="mb-3">
      <label for="disabledSelect" class="form-label">Menú de selección deshabilitado</label>
      <select id="disabledSelect" class="form-select">
        <option>Selección deshabilitada</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 se puede 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 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 elemento <label> o, en el caso de los botones, incluir texto lo suficientemente descriptivo como parte del contenido de <button>...</button>.

Para situaciones en las que no es posible incluir una etiqueta <label> visible o un contenido de texto apropiado, existen formas alternativas de proporcionar un nombre accesible, como por ejemplo:

• Elementos <label> ocultos mediante la clase .visually-hidden
• Apuntar a un elemento existente que pueda actuar como etiqueta utilizando aria-labelledby
• Proporcionar un atributo title
• Establecer explícitamente el nombre accesible en un elemento mediante 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 los elementos <input> y <textarea>. Los ejemplos de esta sección proporcionan algunos enfoques sugeridos y específicos para cada caso.

Si bien el uso de contenido oculto visualmente (contenido de .visually-hidden, aria-label e incluso placeholder, que desaparece una vez que el campo del formulario tiene contenido) beneficiará a los usuarios de tecnologías de asistencia, la falta de texto de etiqueta visible puede seguir siendo problemática para ciertos usuarios. Generalmente, algún tipo de etiqueta visible es el mejor enfoque, tanto para la accesibilidad como para la usabilidad.

CSS

Muchas variables de formulario se establecen a nivel general para que los componentes de formulario individuales las reutilicen y las amplíen. Las verás con mayor frecuencia como variables $input-btn-* y $input-*.

Variables Sass

Las variables $input-btn-* son variables globales compartidas entre nuestros botones y nuestros componentes de formulario. Las encontrarás frecuentemente reasignadas como valores de 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:         $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);