Bootstrap 4 - Gruppo di input

Descrizione

Utilizzando i gruppi di input è possibile anteporre e aggiungere facilmente testo o pulsanti agli input basati su testo.

Gruppo di input di base

Puoi creare un gruppo di input aggiungendo la classe .input-group all'interno dell'elemento <div>. Aggiungi il testo davanti all'input usando .input-group-prepend e usa la classe .input-group-append per aggiungere il testo dietro l'input. Definisci lo stile del testo specificato aggiungendo la classe .input-group-text .

L'esempio seguente mostra il gruppo di input di base:

Esempio

<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>Input Group</h2>
         <div class = "input-group mb-3">
            <div class = "input-group-prepend">
               <span class = "input-group-text" id = "basic-addon1">[email protected]</span>
            </div>
            <input type = "text" class = "form-control" placeholder = "Username" 
               aria-label = "Username" aria-describedby = "basic-addon1">
         </div>
         
         <div class = "input-group mb-3">
            <input type = "text" class = "form-control" 
               placeholder = "Recipient's username" aria-label = "Recipient's username" 
               aria-describedby = "basic-addon2">
            <div class = "input-group-append">
               <span class = "input-group-text" id = "basic-addon2">@tutorialspoint.com</span>
            </div>
         </div>
         
         <div class = "input-group mb-3">
            <div class = "input-group-prepend">
               <span class = "input-group-text">Price in $</span>
            </div>
            <input type = "text" class = "form-control" 
               aria-label = "Amount (to the nearest dollar)">
            
            <div class = "input-group-append">
               <span class = "input-group-text">.00</span>
            </div>
         </div>
      </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>

Produrrà il seguente risultato:

Produzione

Dimensionamento del gruppo di input

È possibile creare piccoli gruppi di input utilizzando .input-group-sm class e grandi gruppi di input utilizzando .input-group-lg class come mostrato nell'esempio seguente:

Esempio

<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>Input Group Sizing</h2>
         <div class = "input-group input-group-lg">
            <div class = "input-group-prepend">
               <span class = "input-group-text" id = "inputGroup-sizing-lg">@</span>
            </div>
            <input type = "text" class = "form-control" aria-label = "Sizing example input" 
               aria-describedby = "inputGroup-sizing-lg" placeholder = "Large Input Group">
         </div>
         <br>
         
         <div class = "input-group mb-3">
            <div class = "input-group-prepend">
               <span class = "input-group-text" id = "inputGroup-sizing-default">@</span>
            </div>
            <input type = "text" class = "form-control" aria-label = "Sizing example input" 
               aria-describedby = "inputGroup-sizing-default" placeholder = "Default Input Group">
         </div>
         
         <div class = "input-group input-group-sm mb-3">
            <div class = "input-group-prepend">
               <span class = "input-group-text" id = "inputGroup-sizing-sm">@</span>
            </div>
            <input type = "text" class = "form-control" aria-label = "Sizing example input" 
               aria-describedby = "inputGroup-sizing-sm" placeholder = "Small Input Group">
         </div>
      </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>

Produrrà il seguente risultato:

Produzione

Casella di controllo e pulsante di opzione

È possibile utilizzare caselle di controllo e pulsanti di opzione invece del testo all'interno di un gruppo di input, come mostrato nell'esempio seguente:

Esempio

<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>Input Group with Checkbox and Radio Button</h2>
         <div class = "input-group mb-3">
            <div class = "input-group-prepend">
               <div class = "input-group-text">
                  <input type = "checkbox" aria-label = "Checkbox for following text input">
               </div>
            </div>
            <input type = "text" class = "form-control" 
               aria-label = "Text input with checkbox" placeholder = "Checkbox">
         </div>
         
         <div class = "input-group">
            <div class = "input-group-prepend">
               <div class = "input-group-text">
                  <input type = "radio" aria-label = "Radio button for following text input">
               </div>
            </div>
            <input type = "text" class = "form-control" 
               aria-label = "Text input with radio button" placeholder = "Radio button">
         </div>
      </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>

Produrrà il seguente risultato:

Produzione

Ingressi multipli

È possibile aggiungere più input a un gruppo di input come mostrato nell'esempio seguente:

Esempio

<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>Multiple Inputs</h2>
         <div class = "input-group">
            <div class = "input-group-prepend">
               <span class = "input-group-text">User Name and Password</span>
            </div>
            <input type = "email" aria-label = "User Name" class = "form-control">
            <input type = "password" aria-label = "Password" class = "form-control">
         </div>
      </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>

Produrrà il seguente risultato:

Produzione

Pulsanti di gruppo di input e con pulsante a discesa

Puoi aggiungere un pulsante in un gruppo di input aggiungendo la classe .btn all'interno della classe .input-group e puoi anche aggiungere menu a discesa all'interno della classe .input-group .

L'esempio seguente mostra l'aggiunta di pulsanti Gruppo di input e insieme al pulsante a discesa -

Esempio

<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>Input Group Button</h2>
         <div class = "input-group mb-3">
            <div class = "input-group-prepend">
               <button class = "btn btn-outline-info" type = "button" 
                  id = "button-addon1">Button</button>
            </div>
            <input type = "text" class = "form-control" 
               placeholder = "Button in Input Group" 
               aria-label = "Example text with button addon" aria-describedby = "button-addon1">
         </div>
         
         <h2>Input Group with Dropdown Button</h2>
         <div class = "input-group mb-3">
            <div class = "input-group-prepend">
               <button class = "btn btn-outline-info dropdown-toggle" 
                  type = "button" data-toggle = "dropdown" 
                  aria-haspopup = "true" aria-expanded = "false">Dropdown</button>
               <div class = "dropdown-menu">
                  <a class = "dropdown-item" href = "#">Option #1</a>
                  <a class = "dropdown-item" href = "#">Option #2</a>
                  <a class = "dropdown-item" href = "#">Option #3</a>
                  <div role = "separator" class = "dropdown-divider"></div>
                  <a class = "dropdown-item" href = "#">Option #4</a>
               </div>
            </div>
            <input type = "text" class = "form-control" 
               aria-label = "Text input with dropdown button" 
               placeholder = "Dropdown in Input Group">
         </div>
      </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>

Produrrà il seguente risultato:

Produzione

Moduli personalizzati

È possibile creare selezioni personalizzate e input di file personalizzati in un gruppo di input. Il seguente esempio lo dimostra:

Esempio

<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>Custom Select</h2>
         <div class = "input-group mb-3">
            <div class = "input-group-prepend">
               <label class = "input-group-text" for = "inputGroupSelect01">Select Options</label>
            </div>
            <select class = "custom-select" id = "inputGroupSelect01">
               <option selected>Select</option>
               <option value = "1">Option #1</option>
               <option value = "2">Option #2</option>
               <option value = "3">Option #3</option>
            </select>
         </div>
         
         <h2>Custom File Input</h2>
         <div class = "input-group mb-3">
            <div class = "input-group-prepend">
               <span class = "input-group-text" id = "inputGroupFileAddon01">Attach Files</span>
            </div>
            
            <div class = "custom-file">
               <input type = "file" class = "custom-file-input" 
                  id = "inputGroupFile01" aria-describedby = "inputGroupFileAddon01">
               <label class = "custom-file-label" for = "inputGroupFile01">Choose Files</label>
            </div>
            
         </div>
      </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>

Produrrà il seguente risultato:

Produzione

↰ Previous page

Bootstrap 4 - Gruppo di input

Descrizione

Gruppo di input di base

Esempio

Produzione

Dimensionamento del gruppo di input

Esempio

Produzione

Casella di controllo e pulsante di opzione

Esempio

Produzione

Ingressi multipli

Esempio

Produzione

Pulsanti di gruppo di input e con pulsante a discesa

Esempio

Produzione

Moduli personalizzati

Esempio

Produzione

Tutorial Bootstrap 4

Bootstrap 4 Risorse utili