w3tutoriels.com

Bootstrap les contrôles de saisie

Bootstrap 4 prend en charge les types de contrôles de formulaire suivants:

Exemple

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Bootstrap Exemple</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Formulaire: exemple de champ de saisie</h2>
  <form>
    <div class="form-group">
      <label for="usr">Nom:</label>
      <input type="text" class="form-control" id="usr">
    </div>
    <div class="form-group">
      <label for="pwd">Mot de passe:</label>
      <input type="password" class="form-control" id="pwd">
    </div>
  </form>
</div>
</body>
</html>

Résultat :

Bootstrap Input

Bootstrap supporte tous les contrôles de saisie de HTML5 : text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

Bootstrap Checkbox (Cases à cocher)

La case à cocher vous permet de sélectionner un nombre quelconque d’options dans une liste d’options actuelles.

Voir cet exemple:

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <title>Bootstrap Exemple</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
   
</head>  
<body>  
  
<div class="container">  
  <h2>Case à cocher</h2>  
  <form role="form">  
    <div class="checkbox">  
      <label><input type="checkbox" value="">Option 1</label>  
    </div>  
    <div class="checkbox">  
      <label><input type="checkbox" value="">Option 2</label>  
    
    </div>  
  </form>  
</div>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
</body>  
</html>  

Résultat :

Utilisez la classe .checkbox-inline si vous souhaitez que les cases à cocher apparaissent sur la même ligne:

Voir cet exemple:

<!DOCTYPE html>  
<html lang="fr">  
<head>  
  <title>Bootstrap Exemple</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
    
</head>  
<body>  
  
<div class="container">  
  <h2>checkbox linéaire</h2>  
  <p>Les cases à cocher suivantes apparaissent dans la même ligne:</p>  
  <form role="form">  
    <label class="checkbox-inline">  
      <input type="checkbox" value="">Option 1  
    </label>  
    <label class="checkbox-inline">  
      <input type="checkbox" value="">Option 2  
    </label>  
  </form>  
</div>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
</body>  
</html>  

Résultat :

Bootstrap Boutons Radio

Les boutons radio vous permettent également de sélectionner une seule option ou un choix parmi une liste d’options.

Voir cet exemple:

<!DOCTYPE html>  
<html lang="fr">  
<head>  
  <title>Bootstrap Example</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
    
</head>  
<body>  
<div class="container">  
  <h2>Boutons Radios</h2>  
    
  <form role="form">  
    <div class="radio">  
      <label><input type="radio" name="optradio">Option 1</label>  
    </div>  
    <div class="radio">  
      <label><input type="radio" name="optradio">Option 2</label>  
    </div>  
  </form>  
</div>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
</body>  
</html>  

Résultat :

Utilisez la classe .radio-inline si vous souhaitez que les boutons radio apparaissent sur la même ligne:

Voir cet exemple:

<!DOCTYPE html>  
<html lang="fr">  
<head>  
  <title>Bootstrap Example</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
    
</head>  
<body>  
  
<div class="container">  
  <h2>Bouton radio linéaires</h2>  
  <p>Les boutons radio suivantes apparaissent sur la même ligne:</p>  
  <form role="form">  
    <label class="radio-inline">  
      <input type="radio" name="optradio">Option 1  
    </label>  
    <label class="radio-inline">  
      <input type="radio" name="optradio">Option 2  
    </label>  
  </form>  
</div>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
</body>  
</html>  

Résultat :

Bootstrap Textarea

Utilisez textarea avec « form-control » pour créer un bootstrap textarea.

Exemple:

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <title>Bootstrap Exemple</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>  
</head>  
<body>  
<div class="container">  
  <h2>Formulaire: textarea</h2>  
  <p>Le formulaire ci-dessous contient une zone de texte pour les commentaires:</p>  
  <form>  
    <div class="form-group">  
      <label for="comment">Commentaire:</label>  
      <textarea class="form-control" rows="5" id="comment"></textarea>  
    </div>  
  </form>  
</div>  
</body>  
</html>

Liste de sélection bootstrap

La liste de sélection de bootstrap est utilisée pour sélectionner une ou plusieurs options. La liste de sélection est utilisée si vous souhaitez permettre à l’utilisateur de choisir parmi plusieurs options.

Exemple:

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Bootstrap Exemple</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Formulaire: select</h2>
  <p>Le formulaire ci-dessous contient deux menus déroulants (listes de sélection):</p>
  <form>
    <div class="form-group">
      <label for="sel1">Liste de sélection (en choisir une):</label>
      <select class="form-control" id="sel1">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
      <br>
      <label for="sel2">Liste de sélection multiple (maintenez la touche Maj enfoncée pour en sélectionner plusieurs):</label>
      <select multiple class="form-control" id="sel2">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div>
  </form>
</div>
</body>
</html>

Résultat :

Quitter la version mobile