Formulários

Visão geral

Os controles de formulário do Bootstrap expandem nossos estilos de formulário reiniciados com classes. Use essas classes para ativar suas exibições personalizadas para uma renderização mais consistente em navegadores e dispositivos.

Certifique-se de usar um typeatributo apropriado em todas as entradas (por exemplo, emailpara endereço de e-mail ou numberpara informações numéricas) para aproveitar os controles de entrada mais recentes, como verificação de e-mail, seleção de número e muito mais.

Aqui está um exemplo rápido para demonstrar os estilos de formulário do Bootstrap. Continue lendo para obter documentação sobre classes obrigatórias, layout de formulário e muito mais.

<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 do formulário

O texto de formulário em nível de bloco ou em nível embutido pode ser criado usando .form-text.

O texto do formulário abaixo das entradas pode ser estilizado com .form-text. Se um elemento de nível de bloco for usado, uma margem superior é adicionada para facilitar o espaçamento das entradas acima.

<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 embutido pode usar qualquer elemento HTML embutido típico (seja um <span>, <small>, ou qualquer outra coisa) com nada mais do que a .form-textclasse.

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

Formulários desativados

Adicione o disabledatributo booleano em uma entrada para evitar interações do usuário e torná-la mais clara.

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

Adicione o disabledatributo a a <fieldset>para desabilitar todos os controles dentro. Os navegadores tratam todos os controles de formulário nativos ( <input>, <select>, e <button>elementos) dentro de um <fieldset disabled>como desabilitados, impedindo interações de teclado e mouse neles.

No entanto, se o seu formulário também incluir elementos personalizados semelhantes a botões, como <a class="btn btn-*">...</a>, eles receberão apenas um estilo de pointer-events: none, o que significa que ainda podem ser focados e operáveis ​​usando o teclado. Nesse caso, você deve modificar manualmente esses controles adicionando tabindex="-1"para impedir que eles recebam o foco e aria-disabled="disabled"para sinalizar seu estado para tecnologias assistivas.

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

Acessibilidade

Certifique-se de que todos os controles de formulário tenham um nome acessível apropriado para que sua finalidade possa ser transmitida aos usuários de tecnologias assistivas. A maneira mais simples de conseguir isso é usar um <label>elemento ou, no caso de botões, incluir texto suficientemente descritivo como parte do <button>...</button>conteúdo.

Para situações em que não é possível incluir um <label>conteúdo de texto visível ou apropriado, existem formas alternativas de ainda fornecer um nome acessível, como:

• <label>elementos ocultos usando a .visually-hiddenclasse
• Apontando para um elemento existente que pode atuar como um rótulo usandoaria-labelledby
• Fornecendo um titleatributo
• Definindo explicitamente o nome acessível em um elemento usandoaria-label

Se nenhum deles estiver presente, as tecnologias assistivas podem recorrer ao uso do placeholderatributo como um substituto para o nome acessível em <input>e <textarea>elementos. Os exemplos nesta seção fornecem algumas abordagens sugeridas para casos específicos.

Embora o uso de conteúdo visualmente oculto ( .visually-hidden, aria-labele até mesmo placeholderconteúdo, que desaparece quando um campo de formulário tem conteúdo) beneficie os usuários de tecnologia assistiva, a falta de texto de rótulo visível ainda pode ser problemática para alguns usuários. Alguma forma de etiqueta visível geralmente é a melhor abordagem, tanto para acessibilidade quanto para usabilidade.

Sass

Muitas variáveis ​​de formulário são definidas em um nível geral para serem reutilizadas e estendidas por componentes de formulário individuais. Você verá isso com mais frequência como $btn-input-*e $input-*variáveis.

Variáveis

$btn-input-*variáveis ​​são variáveis ​​globais compartilhadas entre nossos botões e nossos componentes de formulário. Você encontrará esses valores frequentemente reatribuídos como valores para outras variáveis ​​específicas do componente.

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