Tutoriel Bootstrap 5 – #9 Les formulaires

Aujourd’hui, nous allons explorer les formulaires et découvrir comment créer des formulaires interactifs à 100% grâce à Bootstrap. Suivez ces pas à pas détaillés pour maîtriser les différents éléments de formulaire .

Version vidéo

Tu préfères la version vidéo? Je t’invite à regarder ce tutoriel version vidéo sur la chaîne YouTube Informerick.

Style formulaire Bootstrap

Pour appliquer le style Bootstrap à un formulaire, suivez ces étapes :

Ajoutez la classe « form-control » à vos éléments de formulaire, tels que les champs de texte, les zones de texte et les sélecteurs.

Exemple :

<input type="text" class="form-control">

Consultez la documentation Bootstrap sur les formulaires pour plus d’exemples et d’options de personnalisation.

Grosseur Formulaire Bootstrap

Si vous souhaitez modifier la taille des éléments de formulaire, suivez ces étapes :

Utilisez les classes « form-control-lg » pour une taille large et « form-control-sm » pour une taille petite.

Ajoutez la classe correspondante à vos éléments de formulaire.

Exemple :

<input type="text" class="form-control form-control-lg">

Pour la taille par défaut, vous pouvez simplement utiliser la classe « form-control ».

Formulaire désactivé / Lecture seule

Pour désactiver ou rendre en lecture seule un champ de formulaire, suivez ces étapes :

Ajoutez l’attribut « disabled » pour désactiver le champ ou l’attribut « readonly » pour le rendre en lecture seule.

Exemple :

<input type="text" class="form-control" disabled> 

<!-- ou -->

<input type="text" class="form-control" readonly>

Consultez la documentation Bootstrap sur les formulaires pour plus d’informations.

Sélecteur de couleurs

Pour ajouter un sélecteur de couleurs à votre formulaire, suivez ces étapes :

1. Utilisez la classe « form-control » pour créer un champ de texte.
2. Ajoutez la classe « form-control-color » pour appliquer le sélecteur de couleurs.

Exemple :

<input type="color" class="form-control form-control-color">.

Listes déroulantes

Pour créer une liste déroulante dans votre formulaire, suivez ces étapes :

1. Utilisez la balise <select> pour définir votre liste déroulante.
2. Ajoutez la classe « form-select » pour appliquer le style Bootstrap.
3. Ajoutez les options à l’intérieur de la balise <select>.

Exemple:

<select class="form-select"> 
     <option value="1">Option 1</option>
     <option value="2">Option 2</option>
     <option value="3">Option 3</option> 
</select>

Cases à cocher

Pour créer des cases à cocher dans votre formulaire, suivez ces étapes :

1. Utilisez la balise <div> avec la classe « form-check » pour créer un conteneur de case à cocher.
2. Ajoutez la balise <input> de type « checkbox » à l’intérieur de la balise <div>.
3. Ajoutez la classe « form-check-input » à l’élément <input> pour appliquer le style Bootstrap.
4. Ajoutez également une balise <label> à l’intérieur de la balise <div> pour afficher le texte de la case à cocher.
5. Ajoutez la classe « form-check-label » à l’élément <label>.

Exemple :

<div class="form-check">
   <input class="form-check-input" type="checkbox" id="checkbox1">
   <label class="form-check-label" for="checkbox1">Option 1</label>
</div>

Boutons radio

Pour créer des boutons radio dans votre formulaire, suivez ces étapes :

1. Utilisez la balise <div> avec la classe « form-check » pour créer un conteneur de bouton radio.
2. Ajoutez la balise <input> de type « radio » à l’intérieur de la balise <div>.
3. Ajoutez la classe « form-check-input » à l’élément <input>.
4. Ajoutez aussi une balise <label> à l’intérieur de la balise <div> pour afficher le texte du bouton radio.
5. Ajoutez la classe « form-check-label » à l’élément <label>.

Exemple:

<div class="form-check">
   <input class="form-check-input" type="radio" name="radioGroup" id="radio1">
   <label class="form-check-label" for="radio1">Option 1</label>
</div>

Les ranges

Pour ajouter une barre de progression à votre formulaire, suivez ces étapes :

1. Utilisez la balise <input> de type « range » pour créer une barre de progression.
2. Ajoutez la classe « form-range » à l’élément <input>.
3. Vous pouvez également spécifier une valeur minimale et maximale en utilisant les attributs « min » et « max ».

Exemple:

<input type="range" class="form-range" min="0" max="100">

Les groupes de contrôles

Pour regrouper des éléments de formulaire ensemble, suivez ces étapes :

1. Utilisez la balise <div> avec la classe « input-group » pour créer un conteneur de groupe de contrôles.
2. Ajoutez les éléments de formulaire, tels que les champs de texte, les boutons ou les listes déroulantes, à l’intérieur de la balise <div>.

Exemple:

<div class="input-group">
   <input type="text" class="form-control">
   <select class="form-select">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
   </select>
</div>

Les labels flottants

Pour créer des labels flottants dans votre formulaire, suivez ces étapes :

1. Utilisez la classe « form-floating » sur un conteneur <div> pour englober à la fois l’input et le label.
2. Ajoutez la balise <label> à l’intérieur du <div> pour définir le label flottant.
3. Ajoutez de plus la classe « form-control » à l’élément <input> pour appliquer le style Bootstrap.

Exemple:

<div class="form-floating">
   <input type="text" class="form-control" id="floatingInput">
   <label for="floatingInput">Votre nom</label>
</div>

FAQ