Django - 4.3 Formulaires Bootstrap : champs, fichier et listes
Ce formulaire reprend les champs vus précédemment, avec le style de Bootstrap : adresse e-mail, mot de passe, message, envoi d'une photo et liste de choix. La leçon montre aussi comment Bootstrap utilise les variables CSS pour partager les couleurs entre les contrôles.
Construire le formulaire
Le formulaire contient une adresse e-mail, un mot de passe, un message et un bouton d'envoi. Tous ces éléments doivent être regroupés dans une balise form.
Une fois enregistré, le formulaire s'affiche dans le navigateur. Chaque champ possède un label, et la vidéo reste sur un rendu simple et lisible.
Ce formulaire reprend les champs vus précédemment, mais avec des classes Bootstrap. Les champs sont enveloppés dans des éléments form-group, ce qui structure la mise en page sans écrire de CSS.
Ajouter un fichier et une liste de choix
Un champ de type fichier permet de choisir une photo sur l'ordinateur. Dans la vidéo, le fichier est rangé dans un dossier photos, puis le lien s'ouvre directement dans le navigateur.
Une liste de choix s'écrit avec la balise select et des options. La vidéo ajoute une liste de pays, qui s'ouvre au clic.
- Le champ fichier se déclare comme les autres champs du formulaire.
- Les options d'une liste sont écrites une par une dans la balise select.
- Les couleurs des libellés et des champs peuvent être personnalisées.
Les variables CSS de Bootstrap
Bootstrap utilise une petite quantité de variables CSS pour gérer le style des formulaires. Ces variables sont partagées entre la plupart des contrôles de formulaire.
Pour aller plus loin, la documentation officielle de Bootstrap explique chaque variable. Quelques exercices permettent de bien assimiler le fonctionnement.
Ces variables permettent de partager les couleurs entre plusieurs contrôles. Pour bien comprendre Bootstrap, il faut lire la documentation, faire quelques exercices et observer le code des exemples.
En résumé
Un formulaire Bootstrap combine des champs texte, un champ fichier et une liste de choix, le tout dans une balise form. Bootstrap s'appuie sur des variables CSS partagées, documentées en détail sur son site officiel.
Points clés
- Les champs d'un formulaire doivent être regroupés dans une balise form.
- Un champ de type fichier permet de joindre une photo.
- La balise select crée une liste de choix avec des options.
- Bootstrap utilise des variables CSS partagées entre les contrôles.
- La documentation officielle explique les variables en détail.
Questions fréquentes
Comment ajouter un champ pour envoyer un fichier ?
Ajoutez un champ de type fichier dans le formulaire. Le navigateur permet alors de choisir un fichier sur l'ordinateur.
Où trouver la liste des variables CSS de Bootstrap ?
Dans la documentation officielle de Bootstrap, comme le recommande la vidéo.
Pourquoi utiliser une liste de choix ?
Elle évite une saisie libre et propose des valeurs prédéfinies, par exemple une liste de pays.