Formularios

Visión xeral

Os controis de formulario de Bootstrap amplíanse nos nosos estilos de formulario reiniciados con clases. Use estas clases para optar polas súas pantallas personalizadas para obter unha representación máis consistente en navegadores e dispositivos.

Asegúrate de usar un typeatributo apropiado en todas as entradas (por exemplo, emailpara o enderezo de correo electrónico ou numberpara a información numérica) para aproveitar os controis de entrada máis novos como a verificación de correo electrónico, a selección de números e moito máis.

Aquí tes un exemplo rápido para demostrar os estilos de formulario de Bootstrap. Continúa lendo para obter documentación sobre as clases requiridas, o deseño do formulario e moito máis.

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

Formulario de texto

Pódese crear texto de formulario a nivel de bloque ou en liña usando .form-text.

O texto do formulario debaixo das entradas pódese modificar con .form-text. Se se utilizará un elemento a nivel de bloque, engádese unha marxe superior para facilitar o espazo das 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>

O texto en liña pode usar calquera elemento HTML en liña típico (xa sexa un <span>, <small>ou outra cousa) sen máis que a .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 desactivados

Engade o disabledatributo booleano nunha entrada para evitar as interaccións do usuario e facelo parecer máis claro.

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

Engade o disabledatributo a <fieldset>para desactivar todos os controis dentro. Os navegadores tratan todos os controis de formularios nativos ( <input>, <select>, e <button>elementos) dentro dunha <fieldset disabled>como desactivados, evitando interaccións tanto do teclado como do rato neles.

Non obstante, se o teu formulario tamén inclúe elementos personalizados parecidos a botóns, como <a class="btn btn-*">...</a>, só se lles dará un estilo de pointer-events: none, o que significa que aínda poden ser enfocados e operables mediante o teclado. Neste caso, debes modificar manualmente estes controis engadindo tabindex="-1"para evitar que reciban o foco e aria-disabled="disabled"para sinalar o seu estado ás tecnoloxí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>

Accesibilidade

Asegúrese de que todos os controis do formulario teñan un nome accesible e axeitado para que o seu propósito se poida transmitir aos usuarios de tecnoloxías de asistencia. O xeito máis sinxelo de conseguilo é utilizar un <label>elemento ou, no caso dos botóns, incluír texto suficientemente descritivo como parte do <button>...</button>contido.

Para situacións nas que non é posible incluír un <label>contido de texto visible ou apropiado, existen formas alternativas de proporcionar un nome accesible, como:

• <label>elementos ocultos usando a .visually-hiddenclase
• Apuntando a un elemento existente que pode actuar como etiqueta usandoaria-labelledby
• Proporcionando un titleatributo
• Configurar explícitamente o nome accesible nun elemento usandoaria-label

Se ningunha destas está presente, as tecnoloxías de asistencia poden recorrer ao uso do placeholderatributo como alternativa para o nome <input>e os <textarea>elementos accesibles. Os exemplos desta sección proporcionan algúns enfoques suxeridos e específicos para cada caso.

Aínda que o uso de contido visualmente oculto ( .visually-hidden, aria-label, e mesmo placeholdercontido, que desaparece unha vez que un campo de formulario ten contido) beneficiará aos usuarios de tecnoloxía de asistencia, a falta de texto de etiqueta visible aínda pode ser problemática para certos usuarios. Algún tipo de etiqueta visible é xeralmente o mellor enfoque, tanto para a accesibilidade como para a usabilidade.

Sass

Moitas variables do formulario establécense nun nivel xeral para ser reutilizadas e ampliadas por compoñentes individuais do formulario. Verás estes máis a miúdo como $input-btn-*e $input-*variables.

Variables

$input-btn-*as variables son variables globais compartidas entre os nosos botóns e os nosos compoñentes de formulario. Atoparás estes reasignados frecuentemente como valores a outras variables específicas de compoñentes.

$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;