Bootstrap 5 Forms Classes | Expliqué

Des formulaires sont utilisés pour recueillir des informations sur une personne, un produit ou une entreprise et sont très essentiels pour mener des enquêtes. Les formulaires bootstrap sont la combinaison de champs de texte, de textaas, de cases de sélection, de boutons radio et de cases. Appliquer CSS manuellement sur les formulaires est un processus d'ennui et de prise de temps, c'est pourquoi Bootstrap nous facilite l'aide de classes bootstrap prédéfinies.

Dans cet article, vous obtenez une connaissance détaillée sur

• Comment créer une forme de base
• Types de formes bootstrap
• Composants des formes bootstrap

Comment créer un formulaire

Pour créer une utilisation de formulaire Tag, à l'intérieur de ce formulaire Utilisation de la balise Tag avec la classe .étiquette de forme Pour le titre d'un champ de texte puis utilisez Tag pour créer différents champs de formulaire comme exigence. Les champs de formulaire sont spécifiés par le type = “*” attribut avec la classe .contrôler Pour appliquer le paramètre de formulaire par défaut à partir de bootstrap.

• Texte
• Mot de passe
• Date
• DateTime
• Déposer
• E-mail
• Nombre
• Radio
• Cocher
• Soumettre
• Réinitialiser
• Gamme

Remplacer l'un d'eux par * pour créer différents champs.

Code

Prénom



Nom de famille



Adresse



Ville



États

Punjab
Sindh
Kpk
Baloutchistan



Zipper



Télécharger un domicile



Genre




Homme



Femme



Autre





Soumettre

C'est ainsi qu'une forme simple est créée.

Les types

Il existe trois types de formes en bootstrap.

• Formes verticales
• Formes horizontales
• Formes en ligne

Formes verticales

Dans ce type de formulaires, l'étiquette et les champs de texte sont empilés verticalement.

Code

E-mail



Mot de passe








Souviens-toi de moi

C'est ainsi que les formes verticales sont créées.

Formes horizontales

Dans ce type de formulaires, l'étiquette et les champs de texte sont empilés horizontalement.

Code

E-mail







Mot de passe











Souviens-toi de moi

C'est ainsi que les formes horizontales sont créées.

Formes en ligne

Dans ces types de formes, chaque champ de formulaire est empilé horizontalement dans une ligne. Ces formulaires sont utiles lorsque l'espace est limité ou où vous voulez rendre les choses compactes.

Code

C'est ainsi que les formes en ligne sont créées.

Composants

Voici les composants utilisés sous une forme. Ces composants ne fonctionnent que correctement à l'intérieur d'un étiqueter.

Champs de texte

Le champ texte est l'endroit où vous tapez des informations comme le nom, le mot de passe, l'e-mail, le numéro, l'adresse.

Code

Les champs de texte sont créés en utilisant étiqueter et définir son taper attribuer à "texte" avec la classe .contrôler. Utiliser .formulaire de formulaire-lg classe pour le champ de texte de grande taille, .contrôler classe pour le champ de texte par défaut et .format de formulaire pour petit champ de texte. Une autre chose que je veux mentionner ici est que pour créer une lecture uniquement .formulaire de format classe avec un mot-clé lecture seulement dans un étiqueter.

Radio-boutons

Les boutons radio sont les boutons arrondis qui sont utilisés où vous devez sélectionner parmi deux ou trois options.

Code

Homme



Femme

Les radio-boutons sont créés en utilisant Tag, puis définissez son taper attribuer à "radio" avec la classe .co-vérification de formulaire et donner la même valeur de nom Attribut à chaque bouton radio. Si vous souhaitez activer n'importe quel bouton par défaut, utilisez vérifié mot-clé ou si vous souhaitez désactiver n'importe quel bouton, utilisez désactivé Mot-clé dans la balise d'entrée.

Cocher

Les cases à cocher sont de petites boîtes utilisées où vous devez sélectionner parmi plusieurs options.

Code

Homme



Femme

Les cases à cocher sont créées en utilisant Tag, puis définissez son taper attribuer à «Box» avec la classe .co-vérification de formulaire. Si vous souhaitez activer n'importe quel bouton par défaut, utilisez vérifié mot-clé ou si vous souhaitez désactiver n'importe quel bouton, utilisez désactivé Mot-clé dans la balise d'entrée.

Textarea

TextArea est l'endroit où vous tapez des informations descriptives comme le message, les commentaires.

Code

TextArea est créé en utilisant le Tag avec la classe .contrôler.

Menu de sélection

Les menus de sélection sont utilisés où vous souhaitez que votre utilisateur sélectionne une option dans un menu déroulant.

Stata

Punjab
Sindh
Kpk
Baloutchistan

Le menu de sélection est créé en utilisant Tag avec la classe .contrôler Et enroulant Mots clés. Utiliser .formulaire de formulaire-lg Menu de sélection de grande taille, .contrôler Classe pour le menu de sélection de taille par défaut et .format de formulaire pour le menu de sélection de petites taille.

Ligne flottante

Les étiquettes flottantes sont la combinaison des espaces réservés et des étiquettes

Code

E-mail





Mot de passe






Souviens-toi de moi

Les étiquettes flottantes sont créées par emballage et Tag à l'intérieur d'une div avec la classe .flottant Et l'important est que les étiquettes flottantes fonctionnent correctement, l'espace réservé et l'étiquette est obligatoire.

Conclusion

Pour créer une balise d'utilisation de formulaire, à l'intérieur de la balise de formulaire pour créer une utilisation de champ de texte, pour créer une utilisation de case à cocher, pour créer des boutons radio à utiliser, pour créer une balise TextArea et pour créer un menu de sélection Utilisez la balise et enveloppez-la autour de la balise. Dans l'article ci-dessus, chaque chose importante à propos de la forme bootstrap est couverte.