Bootstrap 4 prend en charge les types de contrôles de formulaire suivants:
- input
- textarea
- checkbox
- radio
- select
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 :
