Bootstrap Formulaires
Dans ce chapitre, nous allons apprendre à utiliser Bootstrap pour créer des formulaires. Bootstrap peut créer des formulaires de différents styles grâce à quelques balises HTML simples et classes étendues.
Bootstrap fournit les types de dispositions de formulaires suivants :
- Formulaire vertical (par défaut)
- Formulaire en ligne
- Formulaire horizontal
Formulaire vertical ou de base
La structure de formulaire de base est intégrée à Bootstrap, et les contrôles de formulaire individuels reçoivent automatiquement certains styles globaux. Les étapes pour créer un formulaire de base sont listées ci-dessous :
- Ajoutez à l'élément parent <form>role="form"。
- Placez les étiquettes et les contrôles dans un div avec la classe.form-groupdans un <div>. Cela est nécessaire pour un espacement optimal.
- Ajoutez class = à tous les éléments textuels <input>, <textarea> et <select>form-control" 。
Exemple
<form role="form">
<div class="form-group">
<label for="name">Nom</label>
<input type="text" class="form-control" id="name" placeholder="Veuillez saisir votre nom">
</div>
<div class="form-group">
<label for="inputfile">Saisie de fichier</label>
<input type="file" id="inputfile">
<p class="help-block">Voici un exemple de texte d'aide au niveau du bloc.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox">Veuillez cocher</label>
</div>
<button type="submit" class="btn btn-default">Envoyer</button>
</form>
Essayez-le »
Le résultat est le suivant :
Formulaire en ligne
Si vous devez créer un formulaire où tous les éléments sont en ligne, alignés à gauche, et où les libellés sont côte à côte, ajoutez la classe à la balise <form>.form-inline。
Exemple
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="name">Nom</label>
<input type="text" class="form-control" id="name" placeholder="Veuillez saisir votre nom">
</div>
<div class="form-group">
<label class="sr-only" for="inputfile">Saisie de fichier</label>
<input type="file" id="inputfile">
</div>
<div class="checkbox">
<label>
<input type="checkbox">Veuillez cocher</label>
</div>
<button type="submit" class="btn btn-default">Envoyer</button>
</form>
Essayez-le »
Le résultat est le suivant :
- Par défaut, input, select et textarea dans Bootstrap ont une largeur de 100 %. Lorsque vous utilisez des formulaires en ligne, vous devez définir une largeur sur les contrôles de formulaire.
- En utilisant la classe.sr-only, vous pouvez masquer les libellés du formulaire en ligne.
Formulaire horizontal
Les formulaires horizontaux diffèrent des autres formulaires non seulement par la quantité de balisage, mais aussi par la façon dont le formulaire est présenté. Pour créer un formulaire disposé horizontalement, suivez les étapes ci-dessous :
- Ajoutez la classe.form-horizontal à l'élément parent <form>。
- Placez les libellés et les contrôles dans une div avec la classe.form-groupdans une <div>.
- Ajoutez la classe au libellé.control-label。
Exemple
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">Prénom</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname" placeholder="Veuillez saisir votre prénom">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">Nom</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastname" placeholder="Veuillez saisir votre nom de famille">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">Se souvenir de moi</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Connexion</button>
</div>
</div>
</forme>
Essayez-le »
Le résultat est le suivant :
Bootstrap prend en charge les contrôles de formulaire les plus courants, principalementinput, textarea, checkbox, radio et select。
Entrée
Le champ de texte de formulaire le plus courant est l'input. Les utilisateurs peuvent y saisir la plupart des données de formulaire nécessaires. Bootstrap prend en charge tous les types d'input HTML5 natifs, notamment :text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、teletcolor. Une déclaration correcte detypeest requise pour queinputles styles complets sont obtenus.
Exemple
<form role="form">
<div class="form-group">
<label for="name">Étiquettes</label>
<input type="text" class="form-control" placeholder="Saisie de texte">
</div>
</forme>
Essayez-le vous-même »
Le résultat est le suivant :
Zone de texte
Lorsque vous avez besoin d'une saisie multiligne, vous pouvez utiliser l'élément textarea. Vous pouvez modifier l'attributrowssi nécessaire (moins de lignes = boîte plus petite, plus de lignes = boîte plus grande).
Exemple
<form role="form">
<div class="form-group">
<label for="name">Zone de texte</label>
<textarea class="form-control" rows="3"></textarea>
</div>
</form>
Essayez-le vous-même »
Le résultat est le suivant :
Cases à cocher et boutons radio
Les cases à cocher et les boutons radio sont utilisés pour permettre aux utilisateurs de choisir parmi un ensemble d'options prédéfinies.
- Lors de la création d'un formulaire, si vous souhaitez que les utilisateurs choisissent plusieurs options dans une liste, utilisezcheckbox. Si vous limitez les utilisateurs à ne sélectionner qu'une seule option, utilisezradio。
- Pour une série de cases à cocher et de boutons radio, utilisez la classe.checkbox-inlineou.radio-inlinepour qu'ils restent affichés sur la même ligne.
L'exemple suivant illustre les deux types (par défaut et en ligne) :
Exemple
<label for="name">Exemple de cases à cocher et de boutons radio par défaut</label>
<div class="checkbox">
<label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Option 2</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Option 1</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Option 2 - La sélectionner désélectionnera l'option 1</label>
</div>
<label for="name">Exemple de cases à cocher et de boutons radio en ligne</label>
<div>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1">Option 1</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2">Option 2</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3">Option 3</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked>Option 1</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2">Option 2</label>
</div>
Essayez-le vous-même »
Le résultat est le suivant :
Sélection
Lorsque vous souhaitez que les utilisateurs choisissent parmi plusieurs options, mais qu'une seule option peut être sélectionnée par défaut, utilisez une liste déroulante.
- Utilisez <select> pour afficher une liste d'options, généralement des listes que les utilisateurs connaissent, telles que des États ou des nombres.
- Utilisezmultiple="multiple"pour permettre aux utilisateurs de sélectionner plusieurs options.
L'exemple suivant illustre les deux types (select et multiple) :
Exemple
<form role="form">
<div class="form-group">
<label for="name">Liste déroulante</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<label for="name">Liste déroulante à choix multiples</label>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>
Essayez-le vous-même »
Le résultat est le suivant :
Lorsque vous devez placer du texte brut après un libellé de formulaire dans un formulaire horizontal, utilisez la classe sur un <p>.form-control-static。
Exemple
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">E-mail</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Mot de passe</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Veuillez saisir le mot de passe">
</div>
</div>
</form>
Essayez-le vous-même »
Le résultat est le suivant :
En plus de l'état:focus(c'est-à-dire lorsque l'utilisateur clique sur le champ de saisie ou utilise la touche Tab pour placer le focus sur l'élément), nous avons également des styles pour les champs de saisie désactivés et les classes de validation de formulaire.
Focus du champ de saisie
Lorsque le champ de saisie est en:focus, le contour du champ de saisie est supprimé et unebox-shadow。
Champ de saisie désactivé
Si vous souhaitez désactiver un champ de saisie, ajoutez simplement l'attributdisabled, qui non seulement désactive le champ de saisie mais modifie également son style et le style du curseur de la souris lorsque le pointeur survole l'élément.
Fieldset désactivé
Ajoutez l'attribut disabled à <fieldset> pour désactiver tous les contrôles à l'intérieur du <fieldset>.
États de validation
Bootstrap inclut des styles de validation pour les messages d'erreur, d'avertissement et de succès. Ajoutez simplement la classe appropriée à l'élément parent (.has-warning, .has-error, ou .has-success) pour utiliser les états de validation.
L'exemple suivant illustre tous les états des contrôles :
Exemple
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Focus</label>
<div class="col-sm-10">
<input class="form-control" id="focusedInput" type="text" value="Ce champ de saisie reçoit le focus...">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Désactivé</label>
<div class="col-sm-10">
<input class="form-control" id="disabledInput" type="text" placeholder="Cette entrée n'est pas modifiable..." disabled>
</div>
</div>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput" class="col-sm-2 control-label">Entrée désactivée (Fieldset désactivé)</label>
<div class="col-sm-10">
<input type="text" id="disabledTextInput" class="form-control" placeholder="Non modifiable">
</div>
</div>
<div class="form-group">
<label for="disabledSelect" class="col-sm-2 control-label">Menu déroulant désactivé (Fieldset désactivé)</label>
<div class="col-sm-10">
<select id="disabledSelect" class="form-control">
<option>Non sélectionnable</option>
</select>
</div>
</div>
</fieldset>
<div class="form-group has-success">
<label class="col-sm-2 control-label" for="inputSuccess">Saisie réussie</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSuccess">
</div>
</div>
<div class="form-group has-warning">
<label class="col-sm-2 control-label" for="inputWarning">Avertissement de saisie</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputWarning">
</div>
</div>
<div class="form-group has-error">
<label class="col-sm-2 control-label" for="inputError">Erreur de saisie</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputError">
</div>
</div>
</forme>
Essayez-le vous-même »
Les résultats sont les suivants :
Vous pouvez utiliser la classe.input-lget.col-lg-*pour définir la hauteur et la largeur du formulaire. L'exemple suivant le démontre :
Exemple
<form role="form">
<div class="form-group">
<input class="form-control input-lg" type="text" placeholder=".input-lg">
</div>
<div class="form-group">
<input class="form-control" type="text" placeholder="Entrée par défaut">
</div>
<div class="form-group">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
</div>
<div class="form-group"></div>
<div class="form-group">
<select class="form-control input-lg">
<option value="">.input-lg</option>
</select>
</div>
<div class="form-group">
<select class="form-control">
<option value="">Sélection par défaut</option>
</select>
</div>
<div class="form-group">
<select class="form-control input-sm">
<option value="">.input-sm</option>
</select>
</div>
<div class="row">
<div class="col-lg-2">
<input type="text" class="form-control" placeholder=".col-lg-2">
</div>
<div class="col-lg-3">
<input type="text" class="form-control" placeholder=".col-lg-3">
</div>
<div class="col-lg-4">
<input type="text" class="form-control" placeholder=".col-lg-4">
</div>
</div>
</form>
Essayez-le vous-même »
Les résultats sont les suivants :
Les contrôles de formulaire Bootstrap peuvent avoir un texte d'aide au niveau du bloc sur l'élément input. Pour ajouter un bloc de contenu qui occupe toute la largeur, utilisez-le après <input>.help-block. L'exemple suivant le démontre :
Exemple
<form role="form">
<span>Exemple de texte d'aide</span>
<input class="form-control" type="text" placeholder="">
<span class="help-block">Un bloc de texte d'aide plus long qui dépasse une ligne et doit s'étendre sur la ligne suivante. Le texte d'aide dans cet exemple comporte au total deux lignes.</span>
</form>
Essayez-le vous-même »
Les résultats sont les suivants :
Autres extensions
