Quelle est la différence entre disabled=“disabled” readonly=“readonly” pour formulaire HTML champs de saisie?

J'ai lu un peu sur ce sujet, mais je n'arrive pas à trouver quelque chose de solide sur la façon dont les différents navigateurs traiter les choses.

  • Andy: Vous mentionnez textarea, mais ne peut-on pas généraliser votre question à l'ensemble des formulaire HTML champs de saisie? L' (v bonne) réponse de @oezi semble le faire. Je vais mettre à jour votre question si vous le voulez bien.
  • connexes: "comment faire pour émuler l'attribut lecture seule pour une balise select, et encore obtenir le POSTE de données?" stackoverflow.com/questions/368813/...
InformationsquelleAutor Andy | 2011-10-11
  1. 652

    Un readonly élément est tout simplement pas modifiable, mais est envoyé lorsque la fonction form soumet. Un disabled élément n'est pas modifiable et n'est pas envoyé sur soumettre. Une autre différence est que readonly éléments peuvent être concentré (et d'être concentré lors de la "tabulation" par le biais d'un formulaire), tandis que disabled éléments ne peuvent pas.

    Lire plus à ce sujet dans cet excellent article ou la définition par le w3c. Pour citer, la partie importante:

    Principales Différences

    Les personnes Handicapées de l'attribut

    • Valeurs pour les personnes handicapées des éléments de formulaire ne sont pas transmises au processeur de méthode. Le W3C appelle cela une réussite.(Cela fonctionne de la même pour
      forme de cases à cocher qui ne sont pas vérifiées.)
    • Certains navigateurs peuvent remplacer ou de fournir de style par défaut pour les personnes handicapées des éléments de formulaire. (Gris ou estampage texte) Internet Explorer
      5.5 est particulièrement désagréable à ce sujet.
    • Personnes handicapées constituent des éléments à ne pas recevoir le focus.
    • Désactivé les éléments de formulaire sont ignorés dans la navigation de tabulations.

    L'Attribut Lecture Seule

    • Pas tous les éléments de formulaire ont un attribut lecture seule. Plus notable, le <SELECT> , <OPTION> , et <BUTTON> éléments ne sont pas en lecture seule
      attributs (même si ils ont tous les deux handicapés attributs)
    • Navigateurs fournissent pas de valeur par défaut substituée retour visuel que l'élément de formulaire est en lecture seule. (Cela peut être un problème... voir ci-dessous).
    • Éléments de formulaire avec l'attribut lecture seule jeu sera adopté à la forme du processeur.
    • Lire uniquement les éléments de formulaire peut recevoir le focus
    • Lire uniquement les éléments de formulaire sont inclus dans les onglets de navigation.
    • sur readonly élément que vous ne pouvez pas utiliser les touches CTRL + C, mais vous pouvez utiliser le clic droit de la souris et sélectionnez Copier.
    • êtes-vous sûr de cela? Je viens de tester et a été en mesure de copier le raccourci clavier dans google Chrome sur mac OS X.
    • "Pas tous les éléments de formulaire ont un attribut lecture seule. Plus notable, le <SELECT> , <OPTION> et <BUTTON> éléments n'ont pas d'attributs readonly (bien que tes deux ont désactivé les attributs)". C'est pourquoi, parfois, vous devez utiliser le "désactivé" attribut avec un champ caché pour sélectionner les formes.
    • Dans la version actuelle de Chrome readonly éléments ne peut pas recevoir le focus. C'est problématique si vous vous attendez à des utilisateurs d'être en mesure de faire défiler les valeurs qui sont plus longs que la taille de l'entrée.
    • Aussi, si vous êtes en utilisant Angularjs ng-readonly="true" permet l'entrée pour recevoir le focus sur Chrome, ie et firefox au moins. Il ne permet pas encore de défilement pour voir l'intégralité du contenu d'un tronc d'entrée, mais vous pouvez au moins copier le texte.
    • Donc, c'est ma compréhension que disabled implique readonly mais readonly n'implique pas disabled. En d'autres termes, si un élément a de la disabled attribut, il n'est pas nécessaire d'inclure aussi les readonly attribut. - Il Correct?
    • Archive Wayback de cet article: web.archive.org/web/20150620041010/https://...

    InformationsquelleAutor oezi
  2. 86

    Pas d'événements se déclencher lorsque l'élément est d'avoir désactivé attribut.

    Aucun des ci-dessous va se déclencher.

    $("[disabled]").click( function(){ console.log("clicked") });//No Impact
$("[disabled]").hover( function(){ console.log("hovered") });//No Impact
$("[disabled]").dblclick( function(){ console.log("double clicked") });//No Impact

    Tout en readonly sera déclenchée.

    $("[readonly]").click( function(){ console.log("clicked") });//log - clicked
$("[readonly]").hover( function(){ console.log("hovered") });//log - hovered
$("[readonly]").dblclick( function(){ console.log("double clicked") });//log - double clicked
    InformationsquelleAutor Hrishabh Gupta
  3. 30

    Désactivé signifie qu'aucune des données de cet élément de formulaire sera soumis lorsque le formulaire est soumis. Lecture seule: toutes les données à partir de l'intérieur de l'élément sera soumis, mais il ne peut pas être modifié par l'utilisateur.

    Par exemple:

    <input type="text" name="yourname" value="Bob" readonly="readonly" />

    Ce soumettra la valeur "Bob" pour l'élément "votrenom".

    <input type="text" name="yourname" value="Bob" disabled="disabled" />

    Cela va soumettre rien pour l'élément "votrenom".

    • Les deux readonly et disabled sont des valeurs booléennes. Utilisation disabled au lieu de disabled="disabled" (même pour readonly)
    • Les deux sont sémantiquement correct. HTML5 vous permet d'utiliser.
    • Oui, car il vérifie seulement si l'attribut existe ou pas. Mais certains développeurs essayez d'utiliser disabled="no", ce qui n'est pas valide.
    • Ensuite, les développeurs devraient lire la spec. Il n'y a rien de mal avec les exemples dans ma réponse.
    • Libre de tout contexte exhortation à utiliser uniquement les noms d'attribut, sans valeurs, est mal conseillé, car alors le code ne sera pas valide XML/XHTML. Je sais que beaucoup de développeurs ne se soucient pas de ceux-ci, mais ils devraient au moins être au courant de l'écueil. Personnellement, je m'efforce conformité avec le langage XHTML - à moins d'avoir une raison impérieuse, que je n'ai pas encore reçu - j'utilise donc le long dupliqué forme.
    • Je trouve le long dupliqué forme lourd. Pourquoi ne pas utiliser une chaîne vide, ce qui est également permise? readonly=""
    • Avez-vous une spec citation que les cordes à vide sont valides XHTML? Je ne peux que trouver commentaire pages de dire que c'est valable pour HTML5. Tout le monde, j'ai vu parler de XHTML-dire que sa forme pour les attributs booléens doivent être attrname="attrname". De toute façon, il ne semble pas être particulièrement bien documenté, au moins pas ce que je peux trouver. Eh bien, il y a cette - w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2 - mais il ne mentionne spécifiquement SGML et HTML, pas de XHTML.... trop d'acronymes :S
    • ...mais en sautant sur les bits pour le code HTML, où la présence/absence est suffisant - nous en arrivons à ce, qui sans doute s'applique par omission en XHTML: Boolean attributes may legally take a single value: the name of the attribute itself (e.g., selected="selected"). de Sorte que la chaîne vide ne semble pas être valide.

    InformationsquelleAutor Michael Irigoyen
  4. 8

    Éléments Handicapés attribut ne serait pas soumis ou peuvent dire que leurs valeurs ne serait pas publié avec la demande.

    c'est à dire

    <input type="textbox" name="field" value="field" disabled="disabled" />

    Différence

    • Désactivé contrôles de ne pas recevoir le focus.
    • Désactivé éléments sont ignorés dans la navigation de tabulations.
    • Désactivé des contrôles ne peut pas être correctement affiché.

    Utiliser l'attribut lecture seule dans le cas où vous voulez afficher les données du champ.

    c'est à dire

    <input type="textbox" name="field" value="field" readonly="readonly" />
    • En lecture seule des éléments de recevoir le focus, mais ne peut pas être modifié par l'utilisateur.
    • En lecture uniquement les éléments qui sont inclus dans la navigation de tabulations.
    • En lecture seule les éléments sont correctement affichés.
    InformationsquelleAutor user1787700
  5. 3

    Même que les autres réponses (désactivé n'est pas envoyé au serveur, en lecture seule), mais certains navigateurs empêchent de mettre en évidence une forme désactivée, tout en lecture seule peuvent encore être mis en évidence (et copié).

    http://www.w3schools.com/tags/att_input_disabled.asp

    http://www.w3schools.com/tags/att_input_readonly.asp

    Un champ en lecture seule ne peuvent pas être modifiés. Cependant, un utilisateur peut onglet pour cela, mettez-le en surbrillance et copier le texte à partir d'elle.

    • note: Vous avez confiance w3schools? oups. Lire w3fools.com
    • w3schools n'est pas désapprouvée plus longtemps. À partir de w3fools.com: W3Schools a encore des questions, mais ils ont au moins travaillé sur la principale préoccupation des développeurs avait. Pour beaucoup de débutants, W3Schools a structuré des tutoriels et des terrains de jeux qui offrent un décent expérience d'apprentissage.
    InformationsquelleAutor Tim