Formulário Bootstrap 5

Formulários empilhados

Todos os elementos <input> e <textarea> com a classe .form-control recebem o estilo de formulário correto:

Exemplo

<form action="/action_page.php">
  <div class="mb-3 mt-3">
    <label for="email" class="form-label">E-mail:</label>
    <input type="email" class="form-control" id="email" placeholder="Por favor, insira o endereço de e-mail" name="email">
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Senha：</label>
    <input type="password" class="form-control" id="pwd" placeholder="Por favor, insira a senha" name="pswd">
  </div>
  <div class="form-check mb-3">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember"> Lembrar-me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Enviar</button>
</form>

Experimente pessoalmente

Além disso, note que adicionamos .form-label a classe para garantir o preenchimento correto.

As caixas de seleção têm diferentes marcas. Elas são configuradas .form-check a classe do elemento contenedor. A configuração de label .form-check-label a classe, enquanto as caixas de seleção e os botões de opção usam .form-check-input。

Textarea

Exemplo

<label for="comment">Comentário：</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>

Experimente pessoalmente

linha de formulário / grade (formulário em linha)

Se você deseja que os elementos do formulário sejam exibidos lado a lado, use .row e .col：

Exemplo

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="Por favor, insira o endereço de e-mail" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="Por favor, insira a senha" name="pswd">
    </div>
  </div>
</form>

Experimente pessoalmente

Você estará Bootstrap Grid Aprenda mais sobre colunas e linhas no capítulo.

Tamanhos de controles de formulário

Você pode usar .form-control-lg ou .form-control-sm Alterar .form-control Tamanho dos controles de entrada:

Exemplo

<input type="text" class="form-control form-control-lg" placeholder="Controle de entrada grande">
<input type="text" class="form-control" placeholder="Controle de entrada comum">
<input type="text" class="form-control form-control-sm" placeholder="Controle de entrada pequeno">

Experimente pessoalmente

Desativado e only de leitura

Use as propriedades disabled e/ou readonly para desativar campos de entrada:

Exemplo

<input type="text" class="form-control" placeholder="Controle de entrada comum">
<input type="text" class="form-control" placeholder="Controle de entrada desativado" disabled>
<input type="text" class="form-control" placeholder="Controle de entrada de leitura only" readonly>

Experimente pessoalmente

Controle de entrada de texto puro

Use .form-control-plaintext Use a classe para definir o estilo dos campos de entrada sem bordas, mas mantendo margens externas e internas apropriadas:

Exemplo

<input type="text" class="form-control-plaintext" placeholder="Controle de entrada de texto puro">
<input type="text" class="form-control" placeholder="Controle de entrada comum">

Experimente pessoalmente

Selector de cores

Para configurar corretamente o estilo de entrada type="color", use .form-control-color Classe:

Exemplo

<input type="color" class="form-control form-control-color" value="#CCCCCC">

Experimente pessoalmente