Bootstrap 4 - Formulários

Descrição

O elemento do formulário é usado para coletar a entrada do usuário usando campos como caixas de seleção, botões de opção ou campos de texto, etc.

Forma básica

Você pode envolver rótulos e controles em um elemento <div> com class .form-group e adicionar uma classe de .form-control a todos os elementos textuais <input>, <textarea> e <select>.

Exemplo

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Basic Form</h2>
         <form>
            <div class = "form-group">
               <label for = "exampleInputEmail1">Email</label>
               <input type = "email" class = "form-control" 
                  id = "exampleInputEmail1" aria-describedby = "emailHelp" 
                  placeholder = "Enter your email">
            </div>
            
            <div class = "form-group">
               <label for = "exampleInputPassword1">Password</label>
                  <input type = "password" class = "form-control" 
                     id = "exampleInputPassword1" placeholder = "Enter your password">
            </div>
            
            <div class = "form-group form-check">
               <label class = "form-check-label" for = "exampleCheck1">
               <input type = "checkbox" class = "form-check-input" 
                  id = "exampleCheck1">Remember me
               </label>
            </div>
            <button type = "submit" class = "btn btn-primary">Sign In</button>
         </form>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Resultado

Controles de formulário

O Bootstrap suporta nativamente os controles de formulário mais comuns, como entrada , área de texto e seleção .

O exemplo a seguir demonstra os controles de formulário suportados acima especificados com a classe .form-control -

Exemplo

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <form>
            <h4>Example Input</h4>
            <div class = "form-group">
               <input type = "email" class = "form-control" 
                  id = "exampleFormControlInput1" placeholder = "Enter your email">
            </div>
            
            <h4>Example Select</h4>
            <div class = "form-group">
               <select class = "form-control" id = "exampleFormControlSelect1">
                  <option>Select Option #1</option>
                  <option>Select Option #2</option>
                  <option>Select Option #3</option>
                  <option>Select Option #4</option>
                  <option>Select Option #5</option>
               </select>
            </div>
            
            <h4>Example Multiple Select</h4>
            <div class = "form-group">
               <select multiple class = "form-control" id = "exampleFormControlSelect2">
                  <option>Multiple Select #1</option>
                  <option>Multiple Select #2</option>
                  <option>Multiple Select #3</option>
                  <option>Multiple Select #4</option>
                  <option>Multiple Select #5</option>
               </select>
            </div>
            
            <h4>Example Textarea</h4>
            <div class = "form-group">
               <textarea class = "form-control" id = "exampleFormControlTextarea1" rows = "3"></textarea>
            </div>
         </form>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Resultado

Entradas de dimensionamento, somente leitura e intervalo

O campo de entrada pode ser exibido em tamanhos grandes e pequenos usando as classes .form-control-lg e .form-control-sm respectivamente. O atributo readonly é um atributo booleano, que torna o campo de entrada somente leitura e não pode ser modificado. Você pode colocar intervalo para as entradas usando a classe .form-control-range .

O exemplo a seguir demonstra os tipos acima -

Exemplo

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <form>
            <h2>Sizing</h2>
            <input class = "form-control form-control-lg" type = "text" 
               placeholder = "Large Input">
            <br>
            
            <input class = "form-control" type = "text" 
               placeholder = "Default Input">
            <br>
            
            <input class = "form-control form-control-sm" type = "text" 
               placeholder = "Small Input">
            <br>
            <br>
            
            <h2>Readonly</h2>
            <input class = "form-control" type = "text" 
               placeholder = "This is readonly text" readonly>
            <br>
            <br>
            
            <h2>Range Inputs</h2>
            <div class = "form-group">
               <input type = "range" class = "form-control-range" 
               id = "formControlRange">
            </div>
         </form>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Resultado

Grade de formulário usando Form Row

Você pode criar formulários complexos que requerem várias colunas usando a classe .form-row que especifica o layout compacto para a coluna. O exemplo a seguir demonstra isso -

Exemplo

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <form>
            <h2>Form Row</h2>
            <div class = "form-row">
               <div class = "form-group col-md-6">
                  <label for = "inputEmail4">First Name</label>
                  <input type = "text" class =" form-control" 
                     id = "inputEmail4" placeholder = "First Name">
               </div>
               
               <div class = "form-group col-md-6">
                  <label for = "inputPassword4">Last Name</label>
                  <input type = "text" class = "form-control" 
                     id = "inputPassword4" placeholder = "Last Name">
               </div>
            </div>
            
            <div class = "form-group">
               <label for = "inputAddress">Address</label>
               <input type = "text" class = "form-control" id = "inputAddress" 
                  placeholder = "Address">
            </div>
            
            <div class = "form-row">
               <div class = "form-group col-md-6">
                  <label for = "inputCity">City</label>
                  <input type = "text" class = "form-control" placeholder = "City" 
                     id = "inputCity">
               </div>
               
               <div class = "form-group col-md-4">
                  <label for = "inputState">State</label>
                  <select id = "inputState" class = "form-control">
                     <option selected disabled>Select State</option>
                     <option>State 1</option>
                     <option>State 1</option>
                  </select>
               </div>
               
               <div class = "form-group col-md-2">
                  <label for = "inputZip">Pin Code</label>
                  <input type = "text" class = "form-control" id = "inputZip" 
                     placeholder = "Pin Code">
               </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">
                     I Agree To Terms and Conditions
                  </label>
               </div>
            </div>
            <button type = "submit" class = "btn btn-primary">Submit</button>
         </form>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Resultado

Formas Horizontais

Crie formulários horizontais adicionando a classe .row para formar grupos. A largura dos rótulos e controles pode ser especificada usando .col - * - * classes e adicione a classe .col-form-label ao seu <label>, para que você possa colocar os controles do formulário centralizados verticalmente.

O exemplo a seguir demonstra isso -

Exemplo

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <form>
            <h2>Horizontal Forms</h2>
            <div class = "form-group row">
               <label for = "inputEmail3" class = "col-sm-2 col-form-label">First Name</label>
               <div class = "col-sm-10">
                  <input type = "text" class = "form-control" id = "inputEmail3" 
                     placeholder = "First Name">
               </div>
            </div>
            
            <div class = "form-group row">
               <label for = "inputPassword3" class = "col-sm-2 col-form-label">Last Name</label>
               <div class = "col-sm-10">
                  <input type = "text" class = "form-control" id = "inputPassword3" 
                     placeholder = "Last Name">
               </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">
                           Option 1
                        </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">
                           Option 2
                        </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">
                           Option 3 (disabled)
                        </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">
                        Option 1
                     </label>
                  </div>
                  
                  <div class = "form-check">
                     <input class = "form-check-input" type = "checkbox" id = "gridCheck2">
                     <label class = "form-check-label" for = "gridCheck1">
                        Option 2
                     </label>
                  </div>
               </div>
            </div>
            
            <div class = "form-group row">
               <div class = "col-sm-10">
                  <button type = "submit" class = "btn btn-primary">Submit</button>
               </div>
            </div>
            
         </form>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Resultado

Formulário Inline

Você pode criar um formulário onde todos os elementos estão embutidos, alinhados à esquerda e os rótulos estão ao lado, adicionando a classe .form-embutido à tag <form>.

O exemplo a seguir demonstra a exibição de controles de formulário em uma única linha horizontal -

Exemplo

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Inline Forms</h2>
         <form class = "form-inline" action = "/action_page.php">
            <label for = "email">Email : 
            <input type = "email" class = "form-control" id = "email" 
               placeholder = "Enter email" name =" email"></label>
            
            <label for = "pwd">Password :
            <input type = "password" class = "form-control" id = "pwd" 
               placeholder = "Enter password" name = "pswd"></label>
            
            <button type = "submit" class = "btn btn-primary">Sign In</button>
         </form>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Resultado

Formulário Desabilitado e Texto de Ajuda

Use o atributo disabled para desabilitar os controles de formulário (bloqueia as interações do usuário em uma entrada). Você pode inserir texto nos campos relacionados usando a classe .form-text . O exemplo a seguir demonstra isso -

Exemplo

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Disabled Form</h2>
         <form>
            <fieldset disabled>
               <div class = "form-group">
                  <label for = "disabledTextInput">Name</label>
                  <input type = "text" id = "disabledTextInput" class = "form-control" placeholder = "Name">
               </div>
               
               <div class = "form-group">
                  <label for = "disabledSelect">Select your option</label>
                  <select id = "disabledSelect" class = "form-control">
                     <option>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">
                     Remember Me
                  </label>
               </div>
               
               <button type = "submit" class = " btn btn-primary">Submit</button>
               <br>
               <br>
               
               <h2>Help Text</h2>
               <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 6-10 characters long (This is help text).
               </small>
            </fieldset>
            
         </form>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Resultado