Bootstrap - Contrôles de formulaires : Un guide complet pour les débutants

Salut à toi, futur(e) développeur(euse) web ! Je suis ravi de commencer ce voyage avec toi alors que nous explorons le merveilleux monde des contrôles de formulaires Bootstrap. En tant que quelqu'un qui enseigne l'informatique depuis plus d'une décennie, je peux te garantir que maîtriser ces concepts sera un véritable game-changer dans ta carrière de développeur web. Alors, mettons-nous à l'œuvre !

Introduction aux contrôles de formulaires Bootstrap

Avant de commencer, laisse-moi te partager une petite histoire. J'avais un étudiant qui avait du mal à créer des formulaires. Il passait des heures à essayer d'aligner les champs et à les rendre présentables. Puis, il a découvert les contrôles de formulaires Bootstrap, et c'était comme si une ampoule s'allumait au-dessus de sa tête ! Voilà la puissance de Bootstrap – il rend complexe simple.

Les contrôles de formulaires Bootstrap sont des éléments pré-stylisés qui permettent aux utilisateurs de saisir des données sur ta page web. Ils sont réactifs, personnalisables et extrêmement faciles à utiliser. Explorons chaque type en détail.

Tailles

Une des premières choses que tu voudras apprendre est comment ajuster la taille de tes contrôles de formulaires. Bootstrap propose trois tailles : petite, par défaut et grande.

<input class="form-control form-control-lg" type="text" placeholder="Entrée grande">
<input class="form-control" type="text" placeholder="Entrée par défaut">
<input class="form-control form-control-sm" type="text" placeholder="Entrée petite">

Dans cet exemple, nous avons créé trois champs d'entrée de différentes tailles. La classe form-control est la classe de base pour tous les contrôles de formulaires dans Bootstrap. Ajouter form-control-lg la rend grande, tandis que form-control-sm la rend petite.

Texte de formulaire

Parfois, tu as besoin de fournir des informations supplémentaires sur un champ de formulaire. C'est là que le texte de formulaire devient pratique.

<label for="inputPassword5" class="form-label">Mot de passe</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
Ton mot de passe doit être compris entre 8 et 20 caractères, contenir des lettres et des chiffres, et ne pas contenir d'espaces, de caractères spéciaux ou d'emojis.
</div>

Ici, nous avons ajouté du texte utile sous le champ de mot de passe. La classe form-text style ce texte de manière appropriée, le faisant ressortir comme information supplémentaire.

Désactivé

Il peut y avoir des situations où tu veux désactiver certains contrôles de formulaires. Bootstrap rend cela facile :

<input class="form-control" type="text" placeholder="Entrée désactivée" aria-label="Exemple d'entrée désactivée" disabled>
<textarea class="form-control" placeholder="Zone de texte désactivée" aria-label="Exemple de zone de texte désactivée" disabled></textarea>

En ajoutant l'attribut disabled, nous avons rendu ces contrôles de formulaires non modifiables. Ils apparaîtront en grisés, indiquant à l'utilisateur qu'ils ne peuvent pas être modifiés.

ReadOnly

Les entrées en lecture seule sont similaires aux entrées désactivées, mais elles peuvent toujours être focusées et sélectionnées.

<input class="form-control" type="text" value="Entrée en lecture seule ici..." aria-label="Exemple d'entrée en lecture seule" readonly>

L'attribut readonly rend l'entrée non modifiable mais permet encore de la focuser.

Texte en lecture seule

Parfois, tu veux afficher des informations comme faisant partie d'un formulaire sans les rendre modifiables. C'est là que le texte en lecture seule entre en jeu :

<div class="mb-3 row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
</div>
</div>

La classe form-control-plaintext supprime le style de champ de formulaire par défaut, le faisant apparaître comme du texte brut.

Entrée de fichier

Les entrées de fichier permettent aux utilisateurs de télécharger des fichiers. Voici comment tu peux en créer un :

<div class="mb-3">
<label for="formFile" class="form-label">Exemple d'entrée de fichier par défaut</label>
<input class="form-control" type="file" id="formFile">
</div>

Cela crée un champ d'entrée de fichier stylé de manière cohérente avec les autres contrôles de formulaires Bootstrap.

Taille de l'entrée de fichier

Tout comme les autres contrôles de formulaires, les entrées de fichier peuvent être dimensionnées :

<div class="mb-3">
<label for="formFileSm" class="form-label">Exemple d'entrée de fichier petite</label>
<input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<div>
<label for="formFileLg" class="form-label">Exemple d'entrée de fichier grande</label>
<input class="form-control form-control-lg" id="formFileLg" type="file">
</div>

Nous utilisons les mêmes classes de dimensionnement que précédemment : form-control-sm et form-control-lg.

Attributs de l'entrée de fichier

Tu peux également personnaliser les entrées de fichier en utilisant des attributs :

<div class="mb-3">
<label for="formFileMultiple" class="form-label">Exemple d'entrée de fichier multiple</label>
<input class="form-control" type="file" id="formFileMultiple" multiple>
</div>

L'attribut multiple permet aux utilisateurs de sélectionner plusieurs fichiers.

Couleur

Bootstrap prend même en charge les entrées de couleur :

<label for="exampleColorInput" class="form-label">Sélecteur de couleur</label>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choisis ta couleur">

Cela crée un sélecteur de couleur stylé de manière cohérente avec les autres contrôles de formulaires Bootstrap.

Listes de données

Les listes de données fournissent une liste d'options prédéfinies pour un champ d'entrée :

<label for="exampleDataList" class="form-label">Exemple de liste de données</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Tape pour rechercher...">
<datalist id="datalistOptions">
<option value="San Francisco">
<option value="New York">
<option value="Seattle">
<option value="Los Angeles">
<option value="Chicago">
</datalist>

Cela crée un champ d'entrée avec des suggestions d'auto-complétion provenant de la liste de données.

Résumé des méthodes de contrôle de formulaire Bootstrap

Voici un tableau résumant les méthodes que nous avons couvertes :

Méthode	Description
Dimensionnement	Ajuster la taille des contrôles de formulaires en utilisant des classes comme form-control-lg et form-control-sm
Texte de formulaire	Ajouter du texte supplémentaire aux contrôles de formulaires en utilisant la classe form-text
Désactivé	Rendre les contrôles de formulaires non modifiables en utilisant l'attribut disabled
ReadOnly	Rendre les contrôles de formulaires non modifiables mais focusables en utilisant l'attribut readonly
Texte en lecture seule	Afficher des informations comme du texte brut en utilisant la classe form-control-plaintext
Entrée de fichier	Créer des entrées de téléchargement de fichiers en utilisant type="file"
Taille de l'entrée de fichier	Ajuster la taille des entrées de fichier en utilisant des classes de dimensionnement
Attributs de l'entrée de fichier	Personnaliser les entrées de fichier avec des attributs comme multiple
Couleur	Créer des sélecteurs de couleur en utilisant type="color"
Listes de données	Fournir des suggestions d'auto-complétion pour un champ d'entrée en utilisant l'élément <datalist>

Et voilà ! Tu viens d'apprendre les inside-outs des contrôles de formulaires Bootstrap. Souviens-toi, la pratique rend parfait. Essaie d'intégrer ces éléments dans tes propres projets, et bientôt tu seras en mesure de créer des formulaires magnifiques et réactifs avec facilité.

Bonne programmation, futurs développeurs web !

Credits: Image by storyset