TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment créer des formulaires Bootstrap 5 ?

1 245

Les formulaires sont une partie importante et inévitable de tout site Web. Bootstrap 4 utilise les éléments de formulaire HTML5 standard pour ajouter une variété d’éléments dans un formulaire. Dans cet article, explorons comment créer différents styles de formulaires dans Bootstrap 5. N’oubliez pas que Bootstrap est un framework frontal. Il vous permet uniquement de créer des composants prêts à l’emploi avec des CSS et des scripts précompilés. Vous devriez trouver un moyen de traiter les entrées de formulaire reçues sur votre serveur.

Tutoriel sur les formulaires Bootstrap 5

Ce tutoriel couvre les sujets suivants :

  1. Bootstrap 5 classes de formulaire
  2. Formulaire de synchronisation de cuisine
  3. Formulaires en ligne
  4. Utilisation du groupe de formulaires
  5. Formulaire utilisant la disposition en grille
  6. Dimensionnement et ajout de texte d’aide
  7. Autres variantes
  8. Validation de formulaire

1 Classes CSS du formulaire Bootstrap

La forme est un composant plus important par rapport à de nombreux autres composants tels que les boutons, les badges et les alertes. Il contient les classes CSS de base suivantes :

Classe CSS La description Remarques
.form-group Utilisé pour regrouper les contrôles de formulaire  
.form-control Saisies de texte Il peut s’agir d’un texte, d’un mot de passe, d’une date, d’une heure, etc.
.form-control-file Téléchargement de fichiers  
.form-check Case à cocher et bouton radio  
.form-check-input Classe d’élément d’entrée  Pour la case à cocher et le bouton radio
.form-check-label Classe d’étiquette de texte Pour la case à cocher et le bouton radio
.form-control-lg Éléments de formulaire plus grands  
.form-control-sm Éléments de formulaire plus petits  
.form-control-plaintext Saisie de texte brut Utilisé pour les éléments d’entrée en lecture seule

2 Formulaire de synchronisation de cuisine utilisant divers éléments

Les formulaires peuvent contenir différents types d’éléments tels que la saisie de texte, le mot de passe, la sélection unique, la sélection multiple, la zone de texte, le téléchargement de fichier, la case à cocher, les boutons radio et le bouton d’envoi. Chaque élément est regroupé à l’intérieur d’un

avec la classe ".form-group". Vous pouvez également utiliser

pour regrouper des éléments similaires comme des boutons radio et des cases à cocher. Créons un formulaire de synchronisation de cuisine avec différents éléments pour mieux comprendre.

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <!-- Start of Form --> <form> <!-- 1. Text Input --> <div class="form-group"> <label for="username">Enter Username</label> <input type="text" class="form-control" id="username" aria-describedby="Username" placeholder="Enter Username"> <small id="Username" class="form-text text-muted">Enter username to login.</small> </div> <!-- 2. Password --> <div class="form-group"> <label for="password">Enter Password</label> <input type="password" class="form-control" id="password" placeholder="Password"> </div> <!-- 3. Single Select --> <div class="form-group"> <label for="singleselect">Single Select from the Dropdown</label> <select class="form-control" id="singleselect"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> <option>Option 5</option> </select> </div> <!-- 4. Multiple Select --> <div class="form-group"> <label for="multipleselect">Multiple Select from List</label> <select multiple class="form-control" id="multipleselect"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> <option>Option 5</option> </select> </div> <!-- 5. Textarea --> <div class="form-group"> <label for="textarea">Textarea Input</label> <textarea class="form-control" id="textarea" rows="5"></textarea> </div> <!-- 6. File Upload --> <div class="form-group"> <label for="fileupload">Upload File</label> <input type="file" class="form-control-file" id="fileupload" aria-describedby="fileupload"> <small id="fileupload" class="form-text text-muted">Choose the file from your computer and the browse screen depends on your operating system.</small> </div> <!-- 7. Radio Buttons --> <fieldset class="form-group"> <legend>Radio Buttons</legend> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="radio" id="radio1" value="Option 1" checked> Option 1</label> </div> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="radio" id="radio2" value="Option 2"> Option 2 </label> </div> <div class="form-check disabled"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="radio" id="radio3" value="Option 3" disabled> Option 3</label> </div> </fieldset> <!-- 8. Checkbox --> <fieldset class="form-group"> <div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check-input"> This is a checkbox 1. </label> </div> <div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check-input"> This is a checkbox 2. </label> </div> <div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check-input"> This is a checkbox 3. </label> </div> </fieldset> <!-- 9. Submit Button --> <button type="submit" class="btn btn-success">Submit</button> </form> <!-- End of Form --> <!-- Bootstrap 5 Scripts --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>

Le résultat ressemblera à ci-dessous sur le navigateur :

Comment créer des formulaires Bootstrap 5 ?

Les éléments du formulaire sont identifiés par des chiffres et le code correspondant est marqué avec la section commentaire à des fins de compréhension. Le formulaire de synchronisation de cuisine ci-dessus contient le code complet, y compris Bootstrap CSS et les scripts. Dans tous les exemples ci-dessous, nous n’avons donné que le bloc de code pour le composant de formulaire. Vous pouvez remplacer le bloc de code entre le début et la fin du formulaire par les codes suivants pour créer différents styles de formulaires.

3 formulaires en ligne

Si vous avez remarqué dans l’exemple ci-dessus, tous les éléments sont alignés sous l’étiquette ou la légende. Vous pouvez également aligner les éléments en ligne à l’aide de la classe ".form-inline" comme ci-dessous :

<form class="form-inline"> <label class="sr-only" for="inlineforminput">Username</label> <div class="input-group mb-2 mr-sm-2 mb-sm-0"> <div class="input-group-addon">@</div> <input type="text" class="form-control" id="inlineforminput" placeholder="Username"> </div> <label class="sr-only" for="inlineform">Password</label> <input type="password" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineform" placeholder="Enter Password"> <div class="form-check mb-2 mr-sm-2 mb-sm-0"> <label class="form-check-label"> <input class="form-check-input" type="checkbox">Remember </label> </div> <button type="submit" class="btn btn-info">Login</button> </form>

Et le résultat sera affiché comme ci-dessous avec les trois éléments alignés horizontalement sur une seule ligne.

Comment créer des formulaires Bootstrap 5 ?

4 Regroupement d’éléments de formulaire avec un groupe de formulaire

Vous pouvez facilement regrouper des éléments similaires dans un formulaire en utilisant la classe ".form-group" comme ci-dessous :

<form> <div class="form-group"> <label class="form-control-label" for="formGroup1">First Name</label> <input type="text" class="form-control" id="formGroup1" placeholder="First Name"> </div> <div class="form-group"> <label class="form-control-label" for="formGroup2">Last Name</label> <input type="text" class="form-control" id="formGroup2" placeholder="Last Name"> </div> </form>

Le regroupement ajoutera la bordure inférieure comme indiqué ci-dessous, vous ne verrez aucun autre changement visible avec la classe ".form-group".

Comment créer des formulaires Bootstrap 5 ?

Regroupement d’éléments dans un formulaire

5 Formulaire avec système de grille

Lorsque vous avez besoin de colonnes et de largeurs différentes pour différents éléments de formulaire, utilisez le système de grille par défaut pour aligner les éléments selon vos besoins. Voici un exemple de formulaire avec disposition en grille :

<form> <div class="form-row"> <div class="form-group col-md-6"> <label for="Email" class="col-form-label">Email</label> <input type="email" class="form-control" id="Email" placeholder="Email"> </div> <div class="form-group col-md-6"> <label for="Password" class="col-form-label">Password</label> <input type="password" class="form-control" id="Password" placeholder="Password"> </div> </div> <div class="form-group"> <label for="Address" class="col-form-label">Address</label> <input type="text" class="form-control" id="Address" placeholder="Address First Line"> </div> <div class="form-group"> <label for="Address1" class="col-form-label">Address 2</label> <input type="text" class="form-control" id="Address1" placeholder="Address Second Line"> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="City" class="col-form-label">City</label> <input type="text" class="form-control" id="City" placeholder="City"> </div> <div class="form-group col-md-4"> <label for="State" class="col-form-label">State</label> <select id="State" class="form-control">Choose</select> </div> <div class="form-group col-md-2"> <label for="Zip" class="col-form-label">Zip</label> <input type="text" class="form-control" id="Zip"> </div> </div> <div class="form-group"> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox"> Remember me </label> </div> </div> <button type="submit" class="btn btn-primary">Submit</button> </form>

Il produira le résultat suivant sur le navigateur :

Comment créer des formulaires Bootstrap 5 ?

Formulaire Bootstrap 4 utilisant la disposition en grille

6 Dimensionnement et ajout de texte d’aide pour les champs

Dans l’exemple ci-dessus, nous avons utilisé deux autres classes supplémentaires :

  • ".form-control-lg" pour agrandir les éléments. Utilisez la classe ".form-control-sm" pour la rendre plus petite.
  • La classe ".form-text" est utilisée pour ajouter du texte d’aide sous forme muette à l’aide de la classe ".text-muted".

7 autres variantes

Vous trouverez ci-dessous quelques-unes des manières simples de personnaliser le formulaire Bootstrap 4:

  • Par défaut, les éléments du formulaire occupent toute la largeur, ce qui peut être restreint en les plaçant dans un conteneur ou en utilisant des CSS supplémentaires.
  • Vous pouvez également placer les formulaires dans des classes de grille pour contrôler la taille et la réactivité du formulaire.
  • Il est également possible d’avoir des éléments désactivés en utilisant la classe «.disabled ».

8 Validations de formulaire

La partie importante de l’utilisation des formulaires est de valider les entrées obligatoires saisies par l’utilisateur. Il existe deux manières de valider les entrées : utilisez un script personnalisé pour la validation ou laissez la partie validation au navigateur.

8.1. Validation avec un script personnalisé

Vous trouverez ci-dessous le code pour créer un formulaire avec un script de validation personnalisé. Le script vérifiera que tous les champs de formulaire requis sont saisis par l’utilisateur lorsque le bouton de soumission est cliqué.

<form class="container" id="form-validation" novalidate> <div class="row"> <div class="col-md-6 mb-3"> <label for="validation1">First name</label> <input type="text" class="form-control" id="validation1" placeholder="First name" value="Jhon" required> </div> <div class="col-md-6 mb-3"> <label for="validation2">Last name</label> <input type="text" class="form-control" id="validation2" placeholder="Last name" value="Doe" required> </div> </div> <div class="row"> <div class="col-md-6 mb-3"> <label for="validation3">City</label> <input type="text" class="form-control" id="validation3" placeholder="City" required> <div class="invalid-feedback"> Enter city. </div> </div> <div class="col-md-3 mb-3"> <label for="validation4">State</label> <input type="text" class="form-control" id="validation4" placeholder="State" required> <div class="invalid-feedback"> Enter state. </div> </div> <div class="col-md-3 mb-3"> <label for="validation5">Zip</label> <input type="text" class="form-control" id="validation5" placeholder="Zip" required> <div class="invalid-feedback"> Enter zip code. </div> </div> </div> <button class="btn btn-secondary btn-md" type="submit">Submit</button> </form> <script> // Custom JavaScript for Validation (function() { "use strict"; window.addEventListener("load", function() { var form = document.getElementById("form-validation"); form.addEventListener("submit", function(event) { if (form.checkValidity() == false) { event.preventDefault(); event.stopPropagation(); } form.classList.add("was-validated"); }, false); }, false); }()); </script>

La validation affichera le résultat ci-dessous si l’utilisateur clique sur le bouton Soumettre sans remplir les champs obligatoires.

Comment créer des formulaires Bootstrap 5 ?

8.2. Validation du navigateur

Vous pouvez simplement supprimer le script personnalisé dans le code du formulaire ci-dessus pour permettre au navigateur d’arrêter la soumission du formulaire. La validation par défaut est effectuée par tous les navigateurs modernes comme Chrome, Safari et Firefox.

Vous verrez le message d’erreur suivant, lorsque l’utilisateur n’a pas rempli le champ requis et soumis le formulaire.

Comment créer des formulaires Bootstrap 5 ?

Emballer

Les formulaires sont un élément important de toute page Web pour collecter les entrées des utilisateurs. Bootstrap 4 permet de créer des formulaires simples à complexes pour afficher différents champs de saisie avec regroupement. Mais la validation et le traitement complexes des données collectées côté serveur nécessitent un langage de script comme PHP. Vous devez donc intégrer les formulaires en PHP pour obtenir et traiter les données utilisateur.


Apprendre Bootstrap 5 (Index )


Source d’enregistrement: www.webnots.com

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails