Maison > interface Web > tutoriel HTML > Introduction à la balise en html et comment la désactiver

Introduction à la balise en html et comment la désactiver

PHPz
Libérer: 2017-04-02 09:44:11
original
3215 Les gens l'ont consulté

Définition et utilisation

La balise est utilisée pour collecter des informations sur l'utilisateur.
Les champs de saisie ont de nombreuses formes basées sur différents types valeurs d'attribut . Les champs de saisie peuvent être des champs de texte, des cases à cocher, des contrôles de texte masqués, 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 de soumission :

 
<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>
Copier après la connexion

L'attribut désactivé spécifie que l'élément de saisie 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="已禁用" />
Copier après la connexion

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

CSS Code复制内容到剪贴板
//Chrome Firefox Opera Safari   
input:disabled{   
    border: 1px solid #DDD;   
    background-color: #F5F5F5;   
    color:#ACA899;   
}
Copier après la connexion

2. Utilisez le sélecteur d'attribut pour définir
<🎜. >

CSS Code复制内容到剪贴板
//IE6 failed   
input[disabled]{   
    border: 1px solid #DDD;   
    background-color: #F5F5F5;   
    color:#ACA899;   
}
Copier après la connexion
3. Utilisez la classe pour définir et ajouter une classe pour l'entrée à désactiver



CSS Code复制内容到剪贴板
input.disabled{   
    border: 1px solid #DDD;   
    background-color: #F5F5F5;   
    color:#ACA899;   
}
Copier après la connexion
Résultat final :



CSS Code复制内容到剪贴板
//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;   
}
Copier après la connexion
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 input[disabled]. directement. ;La couleur de la police ne peut pas être modifiée dans IE9 et versions antérieures.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal