Bootstrap 4 - Groupe d'entrée

La description

En utilisant des groupes de saisie, vous pouvez facilement ajouter du texte ou des boutons aux entrées textuelles.

Groupe d'entrée de base

Vous pouvez créer un groupe d'entrée en ajoutant la classe .input-group dans l'élément <div>. Ajoutez le texte devant l'entrée à l'aide de .input-group-prepend et utilisez la classe .input-group-append pour ajouter le texte derrière l'entrée. Stylisez le texte spécifié en ajoutant la classe .input-group-text .

L'exemple suivant illustre le groupe d'entrée de base -

Exemple

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

Il produira le résultat suivant -

Production

Dimensionnement du groupe d'entrée

Vous pouvez créer de petits groupes d'entrée à l'aide de la classe .input-group-sm et de grands groupes d'entrées à l'aide de la classe .input-group-lg comme indiqué dans l'exemple ci-dessous -

Exemple

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

Il produira le résultat suivant -

Production

Case à cocher et bouton radio

Vous pouvez utiliser des cases à cocher et des boutons radio au lieu du texte dans un groupe de saisie, comme indiqué dans l'exemple ci-dessous -

Exemple

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

Il produira le résultat suivant -

Production

Entrées multiples

Vous pouvez ajouter plusieurs entrées à un groupe d'entrées comme indiqué dans l'exemple ci-dessous -

Exemple

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

Il produira le résultat suivant -

Production

Boutons de groupe d'entrée et avec bouton déroulant

Vous pouvez ajouter un bouton dans un groupe d'entrée en ajoutant une classe .btn dans la classe .input-group et vous pouvez également ajouter des listes déroulantes dans la classe .input-group .

L'exemple suivant montre l'ajout de boutons de groupe d'entrée et avec le bouton déroulant -

Exemple

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

Il produira le résultat suivant -

Production

Formulaires personnalisés

Vous pouvez créer une sélection personnalisée et des entrées de fichier personnalisées dans un groupe d'entrée. L'exemple suivant illustre ceci -

Exemple

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

Il produira le résultat suivant -

Production

↰ Previous page

Bootstrap 4 - Groupe d'entrée

La description

Groupe d'entrée de base

Exemple

Production

Dimensionnement du groupe d'entrée

Exemple

Production

Case à cocher et bouton radio

Exemple

Production

Entrées multiples

Exemple

Production

Boutons de groupe d'entrée et avec bouton déroulant

Exemple

Production

Formulaires personnalisés

Exemple

Production

Tutoriel Bootstrap 4

Bootstrap 4 Ressources utiles