Introduction à la mise en page du formulaire Bootstrap
HTML et CSS sont les langages de base pour la conception de formulaires de sites Web. Tous les modèles de base fabriqués par HTML, mais nous devons concevoir et créer un fichier CSS unique puis nécessaire séparément. Cette méthode est compliquée en raison des références de classe et d'ID. Pour surmonter tous les problèmes dans les fichiers HTML et CSS vient le bootstrap. Bootstrap est une technique avancée de conception de sites Web. Pour la validation et le format requis du formulaire, bootstrap a sa propre classe pour Textarea, entrée et autres contrôles comme form-control, input-group, etc. En utilisant la disposition bootstrap, nous pouvons décider du format du formulaire. Nous pouvons facilement créer des formats de formulaires verticaux, horizontaux et en ligne en utilisant bootstrap.
Types de présentation du formulaire Bootstrap
La disposition du formulaire Bootstrap crée un type de formulaire différent. il rend la conception et la validation sans fichiers CSS et JavaScript. En raison de la disposition du formulaire, réduisez le codage et les complications. Bootstrap a sa propre classe pour surmonter tous les codes CSS et JavaScript complexes.
Bootstrap a trois types de disposition de formulaire.
- Forme verticale
- Forme horizontale
- Formulaire en ligne
Voyons ces trois types en détail:
1. Forme verticale
Dans la disposition de formulaire verticale, les éléments d'étiquette et de texte sont verticaux et chaque groupe de formulaires est vertical. La forme verticale est la forme par défaut dans le bootstrap. Il n'y a pas de règle supplémentaire pour le format de formulaire vertical.
2. Forme horizontale
Dans une disposition de formulaire horizontale, les éléments d'étiquette et de texte sont horizontaux mais chaque groupe de formulaires est vertical . Ajoutez deux classes principales pour la forme horizontale.
Ajoutez la classe dans l'élément de formulaire.
Ajoutez la classe dans les éléments d'étiquette.
3. Formulaire en ligne
Sous forme en ligne, l'étiquette et les éléments sont en ligne et alignés à gauche. La fenêtre d'affichage a au moins 768 pixels de large. Ajoutez une classe pour le formulaire en ligne.
Ajoutez la classe aux éléments du formulaire.
La disposition du formulaire d'amorçage a une classe par défaut pour la convention de formulaire mentionnée ci-dessous:
- .form-group: cette classe utilisée pour l'espacement des formulaires et lier l'étiquette. Il est flexible pour lier les messages de validation de formulaire, et plus encore pour le formulaire.
- . form-control: cette classe utilisée pour tous les éléments textuels et l'espace pour le formulaire, etc. Elle est utilisée pour tous les styles comme la taille, le focus.
- .form-control-lg et .form-control-sm sont utilisés pour la taille d'élément d'entrée grande et petite respectivement.
Élément et classe pris en charge
Certains éléments et classes pris en charge pour la validation de formulaire Bootstrap sans JavaScript. Il facilite et surmonte une grande partie du codage de validation côté serveur.
1) .form-control-file: Cette classe est utilisée pour ajouter un fichier comme pdf, Docx, etc. au lieu d'utiliser la classe form-control, dans les données de fichier que cette classe utilise dans.
Exemple:
2) Lecture seule: il s'agit d'un attribut booléen utilisé pour les éléments d'entrée. Dans cet attribut, l'utilisateur ne peut pas modifier la valeur et désactiver le curseur pour écrire.
Exemple:
3) .form-control-plainxt: cette classe fonctionne comme en lecture seule mais est livrée avec une marge et un remplissage corrects.
Exemple:
Exemple de mise en page du formulaire Bootstrap
Les exemples donnés sont donnés ci-dessous:
1. Exemple de formulaire vertical (formulaire par défaut)
Name:
Email:
- La forme verticale est une forme simple et par défaut dans le bootstrap.
- L'exemple ci-dessus a deux champs de saisie et un bouton de connexion verticalement avec l'étiquette.
- En utilisant uniquement le groupe de formulaires de classe et le contrôle de formulaire de classe, le formulaire vertical a été créé.
- Vous pouvez modifier la taille des éléments d'entrée sans ajuster la taille du fichier CSS. L'utilisateur n'a besoin que d'une classe qui est .form-control-lg et .form-control-sm respectivement pour les grandes et les petites tailles.
2. Exemple de forme horizontale
class=”form-horizontal”>
Name:
Email:
- En utilisant la classe form-horizontal, l'utilisateur crée un formulaire horizontal. L'étiquette et l'élément d'entrée sont en ligne mais le groupe de formulaires de classe est vertical. Classe «étiquette de contrôle col-sm-2» et = «col-sm-10» utilisée pour la colonne divisée. Affectation à deux colonnes pour l'étiquette et affectation à dix colonnes pour les éléments d'entrée.
- Classe «col-sm-offset-2 col-sm-10» utilisée pour le bouton de connexion. Décalage utilisé pour l'espace, col-sm-offset-2 utilise des espaces à deux colonnes à partir de la gauche dans un formulaire.
- Voir l'exemple de formulaire horizontal et sa sortie pour comprendre la disposition. Son nom vu et son texte d'entrée sont sur une ligne puis le courrier électronique et les éléments sont sur une autre ligne.
- Sur un écran grand et moyen, la forme semble horizontale, mais sur un petit écran (767 pixels et moins), la forme semble verticale.
- La forme horizontale est compliquée à l'aide de la méthode traditionnelle, mais la disposition du bootstrap aide à faciliter l'utilisation du contrôle de classe et d'étiquette.
3. Exemple de formulaire en ligne
class=”form-inline”>
Name:
Email:
placeholder=”Enter email”>class=”form-inline”>
Name:
Email:
placeholder=”Enter email”>
- Sous forme en ligne, toutes les étiquettes et tous les éléments sont sur une seule ligne. Tous les groupes de formulaires sont sur une seule ligne. Le formulaire en ligne de classe est la valeur par défaut pour cette disposition. L'utilisateur a placé cette classe dans. Le formulaire en ligne utilisé davantage pour les boutons radio, vérifie les boutons, etc.
- Ce formulaire fonctionne principalement sur au moins 576 pixels, après quoi il apparaît comme le formulaire par défaut. Dans l'étiquette, classe sr-only utilisée. Cette classe est un lecteur d'écran, utilisé pour masquer l'étiquette et affiche le seul élément.
- Si l'élément d'entrée dans le formulaire en ligne, l'utilisateur doit venir avec un espace réservé dans un élément d'entrée pour reconnaître l'élément.
Conclusion - Bootstrap à partir de la mise en page
Pour comprendre la technologie Bootstrap, l'utilisateur doit connaître HTML, CSS et JavaScript. Le formulaire bootstrap est le moyen le plus simple de travailler sur un formulaire au format standard. Il a ses propres classes pour supprimer le codage et les fichiers CSS et JavaScript non requis. En utilisant le formulaire Bootstrap, l'utilisateur obtient une vitesse de codage et évite la conception et le style du codage par blocs. Bootstrap est un cadre pour la conception Web frontale qui est léger et auto-implémenté.
Articles recommandés
Ceci est un guide de mise en page du formulaire Bootstrap. Nous discutons ici de l'introduction à la mise en page du formulaire Bootstrap ainsi que des types et des exemples. Vous pouvez également consulter nos autres articles suggérés pour en savoir plus–
- Typographie Bootstrap
- Disposition d'amorçage
- Système de grille d'amorçage
- Composants d'amorçage