Balise HTML et sa désactivation

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 :

<form action="form_action.asp" method="get">  
  First name: <input type="text" name="fname" />  
  Last name: <input type="text" name="lname" />  
  <input type="submit" value="Submit" />  
</form>

où désactivé L'attribut précise 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

<input type="text" disabled="disabled" value="已禁用" />  
<input type="text" disabled="disabled" value="已禁用" />  
<input type="text" disabled="disabled" value="已禁用" />

La saisie désactivée est grisée par défaut et peut être modifiée via Style 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

//Chrome Firefox Opera Safari   
input:disabled{   
    border: 1px solid #DDD;   
    background-color: #F5F5F5;   
    color:#ACA899;   
}

2. Utilisez la définition du sélecteur d'attribut

.

//IE6 failed   
input[disabled]{   
    border: 1px solid #DDD;   
    background-color: #F5F5F5;   
    color:#ACA899;   
}

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

input.disabled{   
    border: 1px solid #DDD;   
    background-color: #F5F5F5;   
    color:#ACA899;   
}

Résultat final :

//Chrome Firefox Opera Safari IE9+   
input:disabled{   
    border: 1px solid #DDD;   
    background-color: #F5F5F5;   
    color:#ACA899;   
}   
//IE8-   
input[disabled]{   
    border: 1px solid #DDD;   
    background-color: #F5F5F5;   
    color:#ACA899;   
}   
//IE6 Using Javascript to add CSS class "disabled"  
* html input.disabled{   
    border: 1px solid #DDD;   
    background-color: #F5F5F5;   
    color:#ACA899;   
}

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

Pour plus d'articles liés à la balise de HTML et à sa désactivation, veuillez faire attention au site Web chinois de PHP !