Les formulaires

1 . Les classes pour écrire un formulaire

Bootstrap dispose de ses propres classes pour créer un formulaire, ces classes sont : ``` <form> <div class="mb-3"> //les composants de votre formulaire iront ici </div> </form> ```

2 . Les inputs

Pour que l'utilisateur puisse entrer des données nous allons créer un champ de texte. Pour cela copier et coller le code dans le code que vous avez utilisé dans la section précédente : ``` <label for="votrenom" class="form-label">Entrez votre nom</label> <input type="text" class="form-control" id="votrenom" placeholder="Jean Dupond"> ```   Voici un exemple de ce que l'on peut faire :  Enfin si vous voulez écrire un texte plus long vous pouvez utiliser un `textarea` comme ceci : ``` <textarea class="form-control" id="longtext" rows="3"></textarea> ```

3 . Les listes déroulantes

Si vous avez besoin que l'utilisateur sélectionne un mot précis parmi une liste prédéfinie vous pouvez utiliser une liste déroulante. Pour ce faire voici un code que vous pourrez adapter ; ``` <select class="form-select" aria-label="Ma voiture préférée"> <option disabled>Liste de voiture</option> <option value="Peugeot">Peugeot</option> <option value="Aston Martin">Aston Martin</option> <option value="Mercedes">Mercedes</option> <option value="Volvo">Volvo</option> </select> ```

4 . Les cases à cocher

Une case à cocher peut être utilisée pour demander le consentement d'un utilisateur par exemple. Voici le code à utiliser ; ``` <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="accepterlereglement"> <label class="form-check-label" for="accepterlereglement"> J'accepte le réglement du site</label> </div> ``` Voici le rendu final : 

5 . Les boutons radios

Les boutons radios peuvent être utilisés pour demander le sexe de l'utilisateur ou alors une autre question qui a un choix binaire (oui ou non pour simplifier) Voici le code à utiliser : ``` <label>Etes-vous heureux ?</label> <div class="form-check"> <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1"> <label class="form-check-label" for="flexRadioDefault1"> Oui </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked> <label class="form-check-label" for="flexRadioDefault2"> Non </label> </div> ``` Voici le rendu : 

6 . Les intervalles

Si vous voulez noter la satisfaction du client pour un produit vous pouvez utiliser les intervalles ! Voici le code à utiliser : ``` <label for="satisfait" class="form-label">Etes-vous satisfait du site ? </label> <input type="range" class="form-range" id="satisfait"> ``` Voici le rendu : 

7 . Bouton d'envoie de données

Pour envoyer les données c'est très simple il suffit de mettre un bouton qui va activer une fonction en PHP (que vous verrez dans d'autres tutoriels) Le code pour ce bouton est : ``` <button type="submit" class="btn btn-primary mb-3">Envoyer les données !</button> ```