Quelle est la différence entre disabled = "disabled" et readonly = "readonly" pour les champs de saisie de formulaire HTML?


435

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


connexes: "comment émuler l'attribut en lecture seule pour une balise de sélection, et toujours obtenir les données POST?" stackoverflow.com/questions/368813/…
Adrien Be

Réponses:


729

Un readonlyélément n'est tout simplement pas modifiable, mais est envoyé lorsque le formsoumissionnaire le soumet. Un disabledélément n'est pas modifiable et n'est pas envoyé lors de la soumission. Une autre différence est que les readonlyéléments peuvent être ciblés (et se concentrer lors de la "tabulation" dans un formulaire) alors que les disabledéléments ne le peuvent pas.

En savoir plus à ce sujet dans cet excellent article ou la définition du w3c . Pour citer la partie importante:

Différences clés

L'attribut Disabled

  • Les valeurs des éléments de formulaire désactivés ne sont pas transmises à la méthode du processeur. Le W3C appelle cela un élément réussi (cela fonctionne de la même manière que les cases à cocher des formulaires qui ne sont pas cochées).
  • Certains navigateurs peuvent remplacer ou fournir un style par défaut pour les éléments de formulaire désactivés. (Texte grisé ou en relief) Internet Explorer 5.5 est particulièrement désagréable à ce sujet.
  • Les éléments de formulaire désactivés ne reçoivent pas le focus.
  • Les éléments de formulaire désactivés sont ignorés dans la navigation par tabulation.

L'attribut en lecture seule

  • Tous les éléments du formulaire n'ont pas d'attribut en lecture seule. Le plus notable, le <SELECT>,<OPTION> et les <BUTTON>éléments ne sont pas des attributs readonly (bien qu'ils ont tous les deux attributs handicapés)
  • Les navigateurs ne fournissent aucune rétroaction visuelle remplacée par défaut indiquant que l'élément de formulaire est en lecture seule. (Cela peut être un problème… voir ci-dessous.)
  • Les éléments de formulaire avec l'ensemble d'attributs en lecture seule seront transmis au processeur de formulaire.
  • Les éléments de formulaire en lecture seule peuvent recevoir le focus
  • Les éléments de formulaire en lecture seule sont inclus dans la navigation par onglets.

5
sur l'élément en lecture seule, vous ne pouvez pas utiliser CTRL + C mais vous pouvez utiliser le clic droit de la souris et sélectionner Copier.
Rumplin

7
@Rumplin en êtes-vous sûr? Je viens de tester et j'ai pu copier avec le raccourci clavier dans Chrome sur OS X.
evanrmurphy

5
"Tous les éléments du formulaire n'ont pas d'attribut en lecture seule. Plus notable, les éléments <SELECT>, <OPTION> et <BUTTON> n'ont pas d'attributs en lecture seule (bien que vos deux aient des attributs désactivés)". C'est pourquoi parfois vous devez utiliser l'attribut "désactivé" avec un champ de saisie masqué pour certains formulaires.
Donato

Dans la version actuelle de Chrome, les éléments en lecture seule ne peuvent pas recevoir le focus. Cela pose problème si vous vous attendez à ce que les utilisateurs puissent faire défiler des valeurs plus longues que la taille de l'entrée.
Mike Feltman

5
C'est donc ma compréhension qui disabled implique readonly mais readonlyn'implique pas disabled. En d'autres termes, si un élément a l' disabledattribut, il n'est pas nécessaire d'inclure également l' readonlyattribut. Correct?
chharvey

91

Aucun événement n'est déclenché lorsque l'élément a un attribut désactivé.

Aucun des éléments ci-dessous ne sera déclenché.

$("[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

En lecture seule sera déclenché.

$("[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

35

Désactivé signifie qu'aucune donnée de cet élément de formulaire ne sera soumise lors de l'envoi du formulaire. En lecture seule, toutes les données de l'élément seront soumises, mais elles ne peuvent pas être modifiées par l'utilisateur.

Par exemple:

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

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

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

Cela ne soumettra rien pour l'élément "votrenom".


6
Les deux readonlyet disabledsont des valeurs booléennes. Utiliser disabledau lieu de disabled="disabled"(idem en lecture seule)
Raptor

5
Les deux sont sémantiquement corrects. HTML5 vous permet d'utiliser l'un ou l'autre.
Michael Irigoyen

3
Une mise en garde sans contexte pour utiliser uniquement les noms d'attribut, sans valeurs, est mal avisée - car alors le code ne sera pas XML / XHTML valide. Je sais que beaucoup de développeurs ne s'en soucient pas, mais ils devraient au moins être conscients de l'écueil. Personnellement, je m'efforce de me conformer à XHTML - sauf indication contraire, que je n'ai pas encore reçue - j'utilise donc le formulaire long / dupliqué.
underscore_d

1
@ToolmakerSteve Avez-vous une citation spécifiant que les chaînes vides sont du XHTML valide? Je ne peux trouver que des pages de commentaires disant que c'est valable pour HTML5. Tous ceux que j'ai vus parler de XHTML disent que sa forme pour les attributs booléens doit être attrname="attrname". Quoi qu'il en soit, cela ne semble pas être particulièrement bien documenté, du moins pas que je puisse trouver. Eh bien, il y a ceci - w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2 - mais il ne mentionne spécifiquement que SGML et HTML, pas XHTML .... trop d'acronymes: S
underscore_d

1
... mais en sautant le bit pour HTML, où la présence / absence est suffisante - nous obtenons ceci, qui s'applique probablement par omission à XHTML: Boolean attributes may legally take a single value: the name of the attribute itself (e.g., selected="selected").La chaîne vide ne semble donc pas être valide.
underscore_d

4

Identique aux autres réponses (désactivé n'est pas envoyé au serveur, en lecture seule), mais certains navigateurs empêchent la mise en surbrillance d'un formulaire désactivé, tandis que la lecture seule peut toujours être mise en surbrillance (et copiée).

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

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

Un champ en lecture seule ne peut pas être modifié. Cependant, un utilisateur peut y tabuler, le mettre en surbrillance et copier le texte à partir de celui-ci.


1

Si la valeur d'une zone de texte désactivée doit être conservée lorsqu'un formulaire est effacé (réinitialisé), disabled = "disabled"doit être utilisé, car la zone de texte en lecture seule ne conservera pas la valeur

Par exemple:

HTML

Zone de texte

<input type="text" id="disabledText" name="randombox" value="demo" disabled="disabled" />

Bouton de réinitialisation

<button type="reset" id="clearButton">Clear</button>

Dans l'exemple ci-dessus, lorsque vous appuyez sur le bouton Effacer, la valeur de texte désactivée sera conservée dans le formulaire. La valeur ne sera pas conservée en cas deinput type = "text" readonly="readonly"

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.