Formularios
Exemplos e pautas de uso para estilos de control de formularios, opcións de deseño e compoñentes personalizados para crear unha gran variedade de 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 type
atributo apropiado en todas as entradas (por exemplo, email
para o enderezo de correo electrónico ou number
para 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
.
Asociar texto de formulario con controis de formulario
O texto do formulario debe estar asociado explícitamente co control de formulario co que se relaciona usando o aria-describedby
atributo. Isto garantirá que as tecnoloxías de asistencia, como os lectores de pantalla, anunciarán este texto do formulario cando o usuario se concentre ou entre no control.
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-text
clase.
<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 disabled
atributo 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 disabled
atributo 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-hidden
clase- Apuntando a un elemento existente que pode actuar como etiqueta usando
aria-labelledby
- Proporcionando un
title
atributo - Configurar explícitamente o nome accesible nun elemento usando
aria-label
Se ningunha destas está presente, as tecnoloxías de asistencia poden recorrer ao uso do placeholder
atributo 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 placeholder
contido, 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 $btn-input-*
e $input-*
variables.
Variables
$btn-input-*
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;