Source

Formulários

Exemplos e diretrizes de uso para estilos de controle de formulário, opções de layout e componentes personalizados para criar uma ampla variedade de 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.

Nunca compartilharemos seu e-mail com mais ninguém. 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="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>

Controles de formulário

Controles de formulários textuais — como <input>s, <select>s e <textarea>s — são estilizados com a .form-controlclasse. Estão incluídos estilos para aparência geral, estado de foco, dimensionamento e muito mais.

Certifique-se de explorar nossos formulários personalizados para mais estilos <select>.

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

Para entradas de arquivo, troque .form-controlpor .form-control-file.

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

Dimensionamento

Defina as alturas usando classes como .form-control-lge .form-control-sm.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

Somente leitura

Adicione o readonlyatributo booleano em uma entrada para evitar a modificação do valor da entrada. As entradas somente leitura parecem mais claras (assim como as entradas desabilitadas), mas mantêm o cursor padrão.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Texto simples somente leitura

Se você quiser ter <input readonly>elementos em seu formulário com estilo de texto simples, use a .form-control-plaintextclasse para remover o estilo de campo de formulário padrão e preservar a margem e o preenchimento corretos.

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>
<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

Caixas de seleção e rádios

Caixas de seleção e rádios padrão são aprimorados com a ajuda de .form-checkuma única classe para ambos os tipos de entrada que melhora o layout e o comportamento de seus elementos HTML . As caixas de seleção são para selecionar uma ou várias opções em uma lista, enquanto os rádios são para selecionar uma opção entre muitas.

Caixas de seleção e rádios desativados são suportados, mas para fornecer um not-allowedcursor ao passar o cursor do pai <label>, você precisará adicionar o disabledatributo ao arquivo .form-check-input. O atributo disabled aplicará uma cor mais clara para ajudar a indicar o estado da entrada.

O uso de caixas de seleção e rádios são criados para dar suporte à validação de formulários baseada em HTML e fornecer rótulos concisos e acessíveis. Como tal, nossos <input>s e <label>s são elementos irmãos em oposição a um <input>dentro de um <label>. Isso é um pouco mais detalhado, pois você deve especificar ide foratributos para relacionar o <input>and <label>.

Padrão (empilhado)

Por padrão, qualquer número de caixas de seleção e rádios que são irmãos imediatos serão empilhados verticalmente e espaçados adequadamente com .form-check.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check disabled">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

Em linha

Agrupe caixas de seleção ou rádios na mesma linha horizontal adicionando .form-check-inlinea qualquer arquivo .form-check.

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

Sem rótulos

Adicione .position-staticàs entradas .form-checkque não têm nenhum texto de rótulo. Lembre-se de ainda fornecer algum tipo de rótulo para tecnologias assistivas (por exemplo, usando aria-label).

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

Esquema

Como o Bootstrap se aplica display: blocka width: 100%quase todos os nossos controles de formulário, os formulários, por padrão, serão empilhados verticalmente. Classes adicionais podem ser usadas para variar esse layout em uma base por formulário.

Grupos de formulários

A .form-groupclasse é a maneira mais fácil de adicionar alguma estrutura aos formulários. Ele fornece uma classe flexível que incentiva o agrupamento adequado de rótulos, controles, texto de ajuda opcional e mensagens de validação de formulário. Por padrão, aplica-se apenas margin-bottom, mas seleciona estilos adicionais .form-inlineconforme necessário. Use-o com <fieldset>s, <div>s ou quase qualquer outro elemento.

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </div>
</form>

Grade do formulário

Formulários mais complexos podem ser construídos usando nossas classes de grade. Use-os para layouts de formulário que exigem várias colunas, larguras variadas e opções de alinhamento adicionais.

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Linha do formulário

Você também pode trocar .rowpor .form-row, uma variação de nossa linha de grade padrão que substitui as calhas de coluna padrão para layouts mais apertados e compactos.

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Layouts mais complexos também podem ser criados com o sistema de grade.

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Forma horizontal

Crie formulários horizontais com a grade adicionando a .rowclasse aos grupos de formulários e usando as .col-*-*classes para especificar a largura de seus rótulos e controles. Certifique-se de adicionar .col-form-labelaos seus <label>s também para que eles fiquem centralizados verticalmente com seus controles de formulário associados.

Às vezes, talvez você precise usar utilitários de margem ou preenchimento para criar o alinhamento perfeito que você precisa. Por exemplo, removemos o padding-toprótulo de entradas de rádio empilhadas para alinhar melhor a linha de base do texto.

Rádios
Caixa de seleção 
<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>
Dimensionamento de rótulo de formulário horizontal

Certifique-se de usar .col-form-label-smou .col-form-label-lgpara seus <label>s ou <legend>s para seguir corretamente o tamanho de .form-control-lge .form-control-sm.

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>

Dimensionamento da coluna

Conforme mostrado nos exemplos anteriores, nosso sistema de grade permite que você coloque qualquer número de .cols dentro de um .rowou .form-row. Eles dividirão a largura disponível igualmente entre eles. Você também pode escolher um subconjunto de suas colunas para ocupar mais ou menos espaço, enquanto os .cols restantes dividem igualmente o resto, com classes de coluna específicas como .col-7.

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

Dimensionamento automático

O exemplo abaixo usa um utilitário flexbox para centralizar verticalmente o conteúdo e muda .colpara .col-autoque suas colunas ocupem apenas o espaço necessário. Dito de outra forma, a coluna se dimensiona com base no conteúdo.

@ 
<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="form-check-label" for="autoSizingCheck">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

Você pode então remixar isso mais uma vez com classes de coluna específicas de tamanho.

@ 
<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto my-1">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
        <label class="form-check-label" for="autoSizingCheck2">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

E, claro , controles de formulário personalizados são suportados.

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Formulários embutidos

Use a .form-inlineclasse para exibir uma série de rótulos, controles de formulário e botões em uma única linha horizontal. Os controles de formulário dentro de formulários embutidos variam ligeiramente de seus estados padrão.

  • Os controles são display: flex, recolhendo qualquer espaço em branco HTML e permitindo que você forneça controle de alinhamento com utilitários de espaçamento e flexbox .
  • Os controles e grupos de entrada recebem width: autopara substituir o padrão do Bootstrap width: 100%.
  • Os controles só aparecem em linha em viewports com pelo menos 576 pixels de largura para levar em conta as viewports estreitas em dispositivos móveis.

Pode ser necessário endereçar manualmente a largura e o alinhamento de controles de formulário individuais com utilitários de espaçamento (como mostrado abaixo). Por fim, certifique-se de sempre incluir um <label>com cada controle de formulário, mesmo se precisar ocultá-lo de visitantes que não são leitores de tela com .sr-only.

@ 
<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

Controles e seleções de formulários personalizados também são suportados.

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>
Alternativas para rótulos ocultos

Tecnologias assistivas, como leitores de tela, terão problemas com seus formulários se você não incluir um rótulo para cada entrada. Para esses formulários embutidos, você pode ocultar os rótulos usando a .sr-onlyclasse. Existem outros métodos alternativos de fornecer um rótulo para tecnologias assistivas, como o atributo aria-label, aria-labelledbyou . titleSe nenhum deles estiver presente, as tecnologias assistivas podem recorrer ao uso do placeholderatributo, se presente, mas observe que o uso de placeholdercomo substituto de outros métodos de rotulagem não é recomendado.

Texto de ajuda

O texto de ajuda em nível de bloco em formulários pode ser criado usando .form-text(anteriormente conhecido como .help-blockna v3). O texto de ajuda embutido pode ser implementado de forma flexível usando qualquer elemento HTML embutido e classes de utilitário como .text-muted.

Associando texto de ajuda a controles de formulário

O texto de ajuda deve ser explicitamente associado ao controle de formulário ao qual se relaciona usando o aria-describedbyatributo. Isso garantirá que as tecnologias assistivas, como leitores de tela, anunciem esse texto de ajuda quando o usuário focar ou entrar no controle.

O texto de ajuda abaixo das entradas pode ser estilizado com .form-text. Esta classe inclui display: blocke adiciona alguma margem superior para facilitar o espaçamento das entradas acima.

Sua senha deve ter de 8 a 20 caracteres, conter letras e números e não deve conter espaços, caracteres especiais ou emoji. 
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

O texto embutido pode usar qualquer elemento HTML embutido típico (seja um <small>, <span>, ou qualquer outro) com nada mais do que uma classe de utilitário.

Deve ter de 8 a 20 caracteres. 
<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

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.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <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>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
Advertência com âncoras

Por padrão, os navegadores tratarão todos os controles de formulário nativos ( <input>, <select>e <button>elementos) dentro de <fieldset disabled>como desabilitados, impedindo interações de teclado e mouse neles. No entanto, se o seu formulário também incluir <a ... class="btn btn-*">elementos, eles receberão apenas um estilo de pointer-events: none. Conforme observado na seção sobre estado desabilitado para botões (e especificamente na subseção para elementos âncora), essa propriedade CSS ainda não é padronizada e não é totalmente suportada no Opera 18 e abaixo, ou no Internet Explorer 10, e ganhou não impede que usuários de teclado consigam focar ou ativar esses links. Portanto, por segurança, use JavaScript personalizado para desativar esses links.

Compatibilidade entre navegadores

Embora o Bootstrap aplique esses estilos em todos os navegadores, o Internet Explorer 11 e versões anteriores não oferecem suporte total ao disabledatributo em um arquivo <fieldset>. Use JavaScript personalizado para desativar o conjunto de campos nesses navegadores.

Validação

Forneça feedback valioso e acionável para seus usuários com validação de formulário HTML5 – disponível em todos os nossos navegadores compatíveis . Escolha entre os comentários de validação padrão do navegador ou implemente mensagens personalizadas com nossas classes integradas e JavaScript inicial.

É altamente recomendável estilos de validação personalizados, pois os padrões do navegador nativo não são anunciados aos leitores de tela.

Como funciona

Veja como a validação de formulário funciona com o Bootstrap:

  • A validação de formulários HTML é aplicada por meio de duas pseudoclasses de CSS :invalide :valid. Aplica-se a <input>, <select>, e <textarea>elementos.
  • Bootstrap abrange os estilos :invalide :validpara a classe pai .was-validated, geralmente aplicada ao <form>. Caso contrário, qualquer campo obrigatório sem valor aparecerá como inválido no carregamento da página. Dessa forma, você pode escolher quando ativá-los (normalmente após a tentativa de envio do formulário).
  • Como um fallback, .is-invalide .is-validclasses podem ser usadas em vez das pseudo-classes para validação do lado do servidor . Eles não exigem uma .was-validatedclasse pai.
  • Devido a restrições em como o CSS funciona, não podemos (no momento) aplicar estilos a um <label>que vem antes de um controle de formulário no DOM sem a ajuda de JavaScript personalizado.
  • Todos os navegadores modernos suportam a API de validação de restrição , uma série de métodos JavaScript para validar controles de formulário.
  • As mensagens de feedback podem utilizar os padrões do navegador (diferentes para cada navegador e não estilizados via CSS) ou nossos estilos de feedback personalizados com HTML e CSS adicionais.
  • Você pode fornecer mensagens de validade personalizadas setCustomValidityem JavaScript.

Com isso em mente, considere as demonstrações a seguir para nossos estilos de validação de formulário personalizados, classes opcionais do lado do servidor e padrões do navegador.

Estilos personalizados

Para mensagens personalizadas de validação de formulário do Bootstrap, você precisará adicionar o novalidateatributo boolean ao seu arquivo <form>. Isso desativa as dicas de ferramentas de feedback padrão do navegador, mas ainda fornece acesso às APIs de validação de formulário em JavaScript. Tente enviar o formulário abaixo; nosso JavaScript interceptará o botão de envio e enviará feedback para você.

Ao tentar enviar, você verá os estilos :invalide :validaplicados aos seus controles de formulário.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

Padrões do navegador

Não está interessado em mensagens de feedback de validação personalizadas ou em escrever JavaScript para alterar os comportamentos do formulário? Tudo bem, você pode usar os padrões do navegador. Tente enviar o formulário abaixo. Dependendo do seu navegador e sistema operacional, você verá um estilo de feedback ligeiramente diferente.

Embora esses estilos de feedback não possam ser estilizados com CSS, você ainda pode personalizar o texto de feedback por meio de JavaScript.

@ 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" placeholder="City" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Lado do servidor

Recomendamos usar a validação do lado do cliente, mas caso você precise do lado do servidor, você pode indicar campos de formulário inválidos e válidos com .is-invalide .is-valid. Observe que .invalid-feedbacktambém é compatível com essas classes.

Parece bom!
Parece bom!
@
Por favor, escolha um nome de usuário.
Forneça uma cidade válida.
Forneça um estado válido.
Forneça um CEP válido.
Você deve concordar antes de enviar. 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Elementos compatíveis

Nossos formulários de exemplo mostram s textuais nativos <input>acima, mas os estilos de validação de formulário também estão disponíveis para nossos controles de formulário personalizados.

Exemplo de texto de feedback inválido
Mais exemplo de texto de feedback inválido
Exemplo de feedback de seleção personalizado inválido
Exemplo de feedback de arquivo personalizado inválido 
<form class="was-validated">
  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="custom-file">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>
</form>

Dicas de ferramentas

Se o layout do formulário permitir, você poderá trocar as .{valid|invalid}-feedbackclasses por .{valid|invalid}-tooltipclasses para exibir comentários de validação em uma dica de ferramenta com estilo. Certifique-se de ter um pai com position: relativeele para o posicionamento da dica de ferramenta. No exemplo abaixo, nossas classes de coluna já têm isso, mas seu projeto pode exigir uma configuração alternativa.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" placeholder="City" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
      <div class="invalid-tooltip">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" placeholder="Zip" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Formulários personalizados

Para ainda mais personalização e consistência entre navegadores, use nossos elementos de formulário totalmente personalizados para substituir os padrões do navegador. Eles são construídos sobre marcação semântica e acessível, portanto, são substitutos sólidos para qualquer controle de formulário padrão.

Caixas de seleção e rádios

Cada caixa de seleção e rádio é envolto em um <div>com um irmão <span>para criar nosso controle personalizado e um <label>para o texto que o acompanha. Estruturalmente, esta é a mesma abordagem que nosso padrão .form-check.

Usamos o seletor irmão ( ~) para todos os nossos <input>estados - como :checked- para estilizar adequadamente nosso indicador de formulário personalizado. Quando combinado com a .custom-control-labelclasse, também podemos estilizar o texto de cada item com base no <input>estado do .

Ocultamos o padrão <input>com opacitye usamos o .custom-control-labelpara criar um novo indicador de formulário personalizado em seu lugar com ::beforee ::after. Infelizmente não podemos construir um personalizado apenas <input>porque o CSS contentnão funciona nesse elemento.

Nos estados verificados, usamos ícones SVG incorporados em base64 do Open Iconic . Isso nos fornece o melhor controle para estilo e posicionamento em navegadores e dispositivos.

Caixas de seleção

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

As caixas de seleção personalizadas também podem utilizar a :indeterminatepseudoclasse quando configuradas manualmente via JavaScript (não há atributo HTML disponível para especificá-lo).

Se você estiver usando jQuery, algo assim deve ser suficiente:

$('.your-checkbox').prop('indeterminate', true)

Rádios

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

Em linha

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

Desabilitado

Caixas de seleção e rádios personalizados também podem ser desativados. Adicione o disabledatributo booleano ao <input>e o indicador personalizado e a descrição do rótulo serão estilizados automaticamente.

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
  <label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</label>
</div>

Selecione o menu

<select>Os menus personalizados precisam apenas de uma classe personalizada .custom-selectpara acionar os estilos personalizados.

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Você também pode escolher entre seleções personalizadas pequenas e grandes para corresponder às nossas entradas de texto de tamanho semelhante.

<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

O multipleatributo também é suportado:

<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Assim como o sizeatributo:

<select class="custom-select" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Navegador de arquivos

A entrada de arquivo é a mais complicada do grupo e requer JavaScript adicional se você quiser conectá-los com a função Escolher arquivo… e o texto do nome do arquivo selecionado.

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

Ocultamos o arquivo padrão <input>via opacitye, em vez disso, estilizamos o <label>. O botão é gerado e posicionado com ::after. Por fim, declaramos um widthe heightno <input>para o espaçamento adequado para o conteúdo ao redor.

Traduzindo ou personalizando as strings

A :lang()pseudo-classe é usada para permitir a tradução do texto “Browse” para outros idiomas. Substitua ou adicione entradas à $custom-file-textvariável Sass com a tag de idioma relevante e strings localizadas. As strings em inglês podem ser personalizadas da mesma maneira. Por exemplo, veja como se pode adicionar uma tradução em espanhol (o código de idioma do espanhol é es):

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

Aqui está lang(es)em ação na entrada de arquivo personalizado para uma tradução em espanhol:

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

Você precisará definir o idioma do seu documento (ou subárvore dele) corretamente para que o texto correto seja exibido. Isso pode ser feito usando o langatributo no <html>elemento ou o Content-Languagecabeçalho HTTP , entre outros métodos.