Formularios

Descripción general

Los controles de formulario de Bootstrap se expanden sobre nuestros estilos de formulario Reboot con clases. Usa estas clases para optar por sus visualizaciones personalizadas para un renderizado más consistente entre navegadores y dispositivos.

Asegúrate de usar un atributo type apropiado en todas las entradas (p. ej., email para direcciones de correo electrónico o number para información numérica) para aprovechar los nuevos controles de entrada como la 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 ver la 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 de formulario

Se puede crear texto de formulario a nivel de bloque o inline usando .form-text.

El texto de formulario debajo de las entradas se puede estilizar con .form-text. Si se usa un elemento a nivel de bloque, se añade un margin superior para un fácil espaciado de las entradas de arriba.

<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 inline puede usar cualquier elemento HTML inline típico (ya sea un <span>, <small>, u otra cosa) con nada más que la clase .form-text.

<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

Añade el atributo booleano disabled en una entrada para evitar interacciones del usuario y hacerla aparecer más clara.

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

Añade el atributo disabled a un <fieldset> para deshabilitar todos los controles dentro. Los navegadores tratan todos los controles de formulario nativos (elementos <input>, <select> y <button>) dentro de un <fieldset disabled> como deshabilitados, evitando tanto las interacciones de teclado como de ratón en ellos.

Sin embargo, si tu formulario también incluye elementos personalizados tipo botón como <a class="btn btn-*">...</a>, estos solo recibirán un estilo de pointer-events: none, lo que significa que siguen siendo enfocables y operables usando el teclado. En este caso, debes modificar manualmente estos controles añadiendo 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>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úrate de que todos los controles de formulario tengan un nombre accesible apropiado para que su propósito pueda ser transmitido a los usuarios de tecnologías de asistencia. La forma más simple de lograr esto es usar un elemento <label>, o—en el caso de los botones—incluir texto suficientemente descriptivo como parte del contenido de <button>...</button>.

Para situaciones donde no es posible incluir una <label> visible o contenido de texto apropiado, hay formas alternativas de proporcionar aún un nombre accesible, como:

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

Aunque 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ías de asistencia, la falta de texto de etiqueta visible puede seguir siendo problemática para ciertos usuarios. Algún tipo de etiqueta visible es generalmente el mejor enfoque, tanto para accesibilidad como para usabilidad.

Sass

Muchas variables de formulario se establecen a un nivel general para ser reutilizadas y extendidas por componentes de formulario individuales. Las verás más a menudo como variables $input-btn-* y $input-*.

Variables

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