Formulaires d'amorçage
Paramètres par défaut de Bootstrap
Les contrôles de formulaire reçoivent automatiquement un style global avec Bootstrap :
Tous les éléments textuels <input>, <textarea>et
<select>de classe .form-controlont une largeur de 100 %.
Dispositions de formulaire Bootstrap
Bootstrap fournit trois types de mises en page de formulaire :
- Forme verticale (c'est la valeur par défaut)
- Forme horizontale
- Formulaire en ligne
Règles standard pour les trois mises en page de formulaire :
- Enveloppez les étiquettes et les contrôles de formulaire
<div class="form-group">(nécessaire pour un espacement optimal) - Ajouter une classe à tous les éléments
.form-controltextuels<input>,<textarea>et<select>
Formulaire vertical bootstrap (par défaut)
L'exemple suivant crée un formulaire vertical avec deux champs de saisie, une case à cocher et un bouton d'envoi :
Exemple
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Formulaire en ligne Bootstrap
Dans un formulaire en ligne, tous les éléments sont en ligne, alignés à gauche et les étiquettes sont à côté.
Remarque : cela ne s'applique qu'aux formulaires dans des fenêtres d'au moins 768 pixels de large !
Règle supplémentaire pour un formulaire en ligne :
- Ajouter une classe
.form-inlineà l'<form>élément
L'exemple suivant crée un formulaire en ligne avec deux champs de saisie, une case à cocher et un bouton d'envoi :
Exemple
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Conseil : Si vous n'incluez pas d'étiquette pour chaque entrée, les lecteurs d'écran auront des problèmes avec vos formulaires. Vous pouvez masquer les libellés de tous les appareils, à l'exception des lecteurs d'écran, en utilisant la
.sr-onlyclasse :
Exemple
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label class="sr-only" for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label class="sr-only" for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Forme horizontale bootstrap
Une forme horizontale signifie que les étiquettes sont alignées à côté du champ de saisie (horizontal) sur les écrans grands et moyens. Sur les petits écrans (767px et moins), il se transformera en une forme verticale (les étiquettes sont placées au-dessus de chaque entrée).
Règles supplémentaires pour un formulaire horizontal :
- Ajouter une classe
.form-horizontalà l'<form>élément - Ajouter une classe
.control-labelà tous les<label>éléments
Conseil : utilisez les classes de grille prédéfinies de Bootstrap pour aligner les étiquettes et les groupes de contrôles de formulaire dans une disposition horizontale.
L'exemple suivant crée un formulaire horizontal avec deux champs de saisie, une case à cocher et un bouton d'envoi.
Exemple
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>