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 typeatributo apropiado en todas las entradas (p. ej., emailpara la dirección de correo electrónico o numberpara 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.

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-textclase.

<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 disabledatributo 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 disabledatributo 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-hiddenclase
• Apuntando a un elemento existente que puede actuar como una etiqueta usandoaria-labelledby
• Proporcionar un titleatributo
• Estableciendo explícitamente el nombre accesible en un elemento usandoaria-label

Si ninguno de estos está presente, las tecnologías de asistencia pueden recurrir al uso del placeholderatributo 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-labele incluso placeholdercontenido, 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 $input-btn-*y $input-*variables.

Variables

$input-btn-*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;