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

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.

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.

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

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".

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.

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"