web-dev-qa-db-fra.com

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 différents navigateurs traitent les choses.

htmlcross-browser
390
Andy

Un élément readonly n'est tout simplement pas éditable, mais est envoyé lorsque la variable form correspondante est soumise. Un élément disabled n'est pas éditable ni envoyé lors de la soumission. Une autre différence réside dans le fait que les éléments readonly peuvent être focalisés (et le sont également lorsque vous "passez" par un formulaire) alors que les éléments disabled ne le peuvent pas.

En savoir plus à ce sujet dans ce très bon article ou la définition de w3c . Pour citer la partie importante:

Différences clés

L'attribut désactivé

  • 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 manière similaire aux cases à cocher de formulaire 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. Internet Explorer 5.5 est particulièrement méchant à 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 de formulaire n'ont pas d'attribut en lecture seule. En particulier, les éléments <SELECT>, <OPTION> et <BUTTON> n'ont pas d'attribut en lecture seule (bien qu'ils aient tous deux des attributs désactivés).
  • Les navigateurs ne fournissent aucun retour visuel écrasé 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'attribut readonly 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.
665
oezi

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

Aucun des éléments ci-dessous ne se déclenchera.

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

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 signifie que 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" />

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

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

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

32
Michael Irigoyen

Les éléments avec l'attribut Désactivé ne seraient pas soumis ou pourraient indiquer que leurs valeurs ne seraient pas publiées avec la demande.

c'est à dire.

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

Différence

  • Les contrôles désactivés ne reçoivent pas le focus.
  • Les contrôles désactivés sont ignorés dans la navigation par tabulation.
  • Les contrôles désactivés ne peuvent pas être publiés avec succès.

Utilisez l'attribut readonly si vous souhaitez publier les données de votre champ.

c'est à dire.

<input type="textbox" name="field" value="field" readonly="readonly" />
  • Les éléments en lecture seule reçoivent le focus mais ne peuvent pas être modifiés par l'utilisateur.
  • Les éléments en lecture seule sont inclus dans la navigation par tabulation.
  • Les éléments en lecture seule sont publiés avec succès.
9
user1787700

Identique aux autres réponses (désactivé n'est pas envoyé au serveur, mais en lecture seule), mais certains navigateurs empêchent la mise en évidence d'un formulaire désactivé, alors 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 accéder par onglet, le surligner et en copier le texte.

4
Tim