Bootstrap Champs de saisie de texte désactivés

Bootstrap Champs De Saisie De Texte Desactives



Dans Bootstrap, différentes classes sont utilisées pour créer un formulaire efficacement. Ces classes fournissent de nombreuses propriétés de style aux éléments, notamment ' contrôle de formulaire ”, “ groupe de formulaires ”, “ formulaire-vérifier-étiquette ', et beaucoup plus. Plus précisément, les champs de saisie de formulaire sont des champs de saisie de texte utilisés pour collecter des informations auprès des utilisateurs. Cependant, nous pouvons désactiver le champ de saisie en utilisant le ' désactivé ” classe ou attribut.

Cette rédaction couvrira les sujets suivants :

Prérequis : créer un formulaire

Tout d'abord, créez un formulaire en utilisant le code HTML ' ' élément:







< former >< / former >

Ensuite, ajoutez un ' ' élément et attribuez-lui une classe ' col-12 ”. Dans l'élément , spécifiez la légende du formulaire :



< jeu de champs classer = 'col-md-12' >

< Légende >Formulaire d'inscription des étudiants< / Légende >

< / jeu de champs >

Sortir







Comment désactiver le champ de saisie de texte ?

Pour l'exemple en cours, suivez les instructions données :

  • À l'intérieur de ' ', après l'élément de légende, ajoutez une balise
    et attribuez-lui une classe' groupe de formulaires ”.
  • Ensuite, incluez ' <étiquette> ' et ' ” pour les champs de légende et de saisie, respectivement. Attribuez à l'élément d'entrée une classe ' contrôle de formulaire ”.
  • Après cela, attribuez le ' désactivé ” pour désactiver le champ de saisie :
< div classer = 'groupe de formulaires' >

< étiquette >Entrez votre Nom

< contribution taper = 'texte' classer = 'contrôle de formulaire' désactivé>

< / étiquette >

< / div >

Voici l'explication des classes mentionnées ci-dessus:



  • ' groupe de formulaires ” est une classe flexible qui fournit le moyen le plus simple d'inclure une structure dans les formulaires.
  • ' contrôle de formulaire ” ajoute automatiquement un style aux éléments de formulaire.

Sortir

Ajoutez un autre champ de saisie sans le ' désactivé ' attribut:

< div classer = 'groupe de formulaires' >

< étiquette >Entrez votre Père Nom

< contribution taper = 'texte' classer = 'contrôle de formulaire' >

< / étiquette >

< / div >

On peut observer que le premier champ de saisie est désactivé et le second est activé :

Comment désactiver l'option Select Box ?

Pour créer une zone de sélection dans le formulaire, utilisez le code HTML ' ' élément. Les ' ” Les éléments sont ensuite ajoutés pour sélectionner les éléments de la boîte.

Dans cet exemple, notez que la deuxième option est définie comme désactivée à l'aide du ' désactivé ' attribut:

< div classer = 'groupe-formulaire' >

< étiquette > désactivé Sélectionnez la boîte

< sélectionner classer = 'contrôle de formulaire' >

< option >sélectionnez < / option >

< option désactivé> désactivé sélectionner< / option >

< option >Menu< / option >

< / sélectionner >

< / étiquette >

< / div >

Sortir

Comment désactiver l'élément d'entrée de case à cocher ?

Créons une autre case à cocher de contrôle de formulaire. Pour désactiver la case à cocher, le ' désactivé ” est spécifié comme suit :

< div classer = 'vérification de formulaire' >

< étiquette classer = 'formulaire-vérifier-étiquette' >

< contribution classer = 'formulaire-vérification-entrée' taper = 'case à cocher' désactivé>

Vous pouvez ne vérifie pas ça



Sortir

Comment désactiver l'élément d'entrée de bouton ?

Vous pouvez également ajouter un élément de bouton HTML pour la soumission du formulaire. Maintenant, désactivons ce bouton en utilisant le ' désactivé ' classer:

< bouton taper = 'nous faire parvenir' classer = 'btn btn-primary btn-lg désactivé' >Soumettre< / bouton >

Sortir

Il s'agissait de désactiver les champs de saisie dans Bootstrap.

Conclusion

Dans Bootstrap, les contrôles de formulaire peuvent être désactivés à l'aide du ' désactivé ” attribut ou classe. L'attribut est placé à l'intérieur de la balise de début de l'élément. D'autre part, le « désactivé ' la classe est placée dans le ' classer ' attribut. Cet article a fourni des exemples pour illustrer comment désactiver les contrôles de formulaire dans Bootstrap.