Explication détaillée de la balise de HTML et de sa méthode de désactivation pour la production de pages HTML/Xhtml_Web

Définition et utilisation
La balise est utilisée pour collecter des informations sur l'utilisateur.
Selon les différentes valeurs d'attribut de type, les champs de saisie ont de nombreuses formes. Les champs de saisie peuvent être des champs de texte, des cases à cocher, des contrôles de texte masqué, des boutons radio, des boutons, etc.
Différences entre HTML et XHTML
En HTML, la balise
En XHTML, la balise doit être correctement fermée.
Exemple
Un formulaire HTML simple contenant deux zones de saisie de texte et un bouton d'envoi :

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <formulaire action="form_action.asp" méthode="obtenir">
2. Prénom : <saisie type= "texte" nom="fname" />
3. Nom : <entrée type= "texte" nom="lnom" />
4. <entrée type="soumettre" valeur="Soumettre" />
5. formulaire>

L'attribut désactivé spécifie que l'élément d'entrée doit être désactivé.
Un élément de saisie désactivé n'est ni disponible ni cliquable. L'attribut désactivé peut être défini jusqu'à ce qu'une autre condition soit remplie (telle qu'une case à cocher sélectionnée, etc.). Ensuite, vous devez utiliser JavaScript pour supprimer la valeur désactivée et basculer la valeur de l'élément d'entrée sur disponible.

Les trois méthodes d'écriture suivantes peuvent désactiver la saisie

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <entrée type="texte" désactivé="désactivé" valeur="Désactivé" />
2. <entrée type="texte" désactivé="désactivé" valeur="Désactivé" />
3. <entrée type="texte" désactivé="désactivé" valeur="Désactivé" />

Les entrées désactivées sont grises par défaut et peuvent être stylisées via CSS. Remarque : IE9 et versions antérieures ne peuvent pas changer la couleur de la police
1. Utilisez CSS3 : définition de pseudo-élément désactivée

Code CSSCopier le contenu dans le presse-papiers

1. //Chrome Firefox Opera Safari
2. entrée : désactivée{
3. bordure: 1px solide #DDD
4. couleur de fond : #F5F5F5
;
5.  couleur :#ACA899; 
6. }

2. Utilisez les sélecteurs d'attributs pour définir

Code CSSCopier le contenu dans le presse-papiers

1. //IE6 a échoué
2. entrée[désactivée]{
3.  bordure : 1px solide #DDD
4. couleur de fond : #F5F5F5
;
5.  couleur :#ACA899; 
6. }

3. Utilisez la classe pour définir et ajouter une classe pour que l'entrée soit désactivée

Code CSSCopier le contenu dans le presse-papiers

1. input.disabled{
2.  bordure : 1px solide #DDD
3. couleur de fond : #F5F5F5
;
4.  couleur :#ACA899; 
5. }

Résultat final :

Code CSSCopier le contenu dans le presse-papiers

1. //Chrome Firefox Opera Safari IE9
2. entrée : désactivée{
3.  bordure : 1px solide #DDD
4. couleur de fond : #F5F5F5
;
5.  couleur :#ACA899; 
6. }
7. //IE8-
8. entrée[désactivée]{
9.  bordure : 1px solide #DDD
10. couleur de fond : #F5F5F5
;
11.  couleur :#ACA899; 
12. }
13. //IE6 Utilisation de Javascript pour ajouter une classe CSS "désactivé"
14. * html input.disabled{
15.  bordure : 1px solide #DDD
16. couleur de fond : #F5F5F5
;
17.  couleur :#ACA899; 
18. }

Remarque : bug d'IE8
Comme IE8 ne reconnaît pas :disabled, les styles input[disabled] et input:disabled deviennent invalides. Vous pouvez envisager de les écrire séparément, ou d'utiliser directement input[disabled]. ;La couleur de la police ne peut pas être modifiée dans IE9 et versions antérieures.

Démo