Attribut HTML : readonly

L'attribut booléen readonly, lorsqu'il est présent, rend l'élément non mutable, ce qui signifie que l'utilisateur ne peut pas modifier le contrôle. Si l'attribut readonly est spécifié sur un élément de saisie, comme l'utilisateur ne peut pas modifier la saisie, l'élément ne participe pas à la validation des contraintes.

L'attribut readonly est pris en charge par les types text, search, url, tel, email, password, date, mois, week, time, datetime-local, et number de <input> et les éléments de contrôle de formulaire <textarea>. S'il est présent sur l'un de ces types de saisie et éléments, la pseudo-classe :read-only correspondra. Si l'attribut n'est pas inclus, la pseudo-classe :read-write correspondra.

L'attribut n'est pas pris en charge ou pertinent pour <select> ou les types d'entrée qui ne sont déjà pas mutables, comme checkbox et radio ou ne peuvent pas, par définition, commencer par une valeur, comme le type d'entrée file. range et color, car tous deux ont des valeurs par défaut. Il n'est pas non plus pris en charge sur hidden, car on ne peut pas s'attendre à ce qu'un utilisateur remplisse un formulaire qui est caché. Il n'est pas non plus supporté sur des types de boutons, y compris image.

Note : Seuls les contrôles de texte peuvent être rendus en lecture seule, car pour les autres contrôles (comme les cases à cocher et les boutons), il n'y a pas de distinction utile entre être en lecture seule et être désactivé, donc l'attribut readonly ne s'applique pas.

Lorsqu'une entrée possède l'attribut readonly, la pseudo-classe :read-only s'y applique également. Inversement, les entrées qui prennent en charge l'attribut readonly mais qui n'ont pas l'attribut défini correspondent à la pseudo-classe :read-write.

Interactions entre attributs

La différence entre disabled et readonly est que les contrôles en lecture seule peuvent toujours fonctionner et sont toujours focusables, alors que les contrôles désactivés ne peuvent pas recevoir de focus et ne sont pas soumis avec le formulaire et ne fonctionnent généralement pas comme contrôles jusqu'à ce qu'ils soient activés.

Comme un champ en lecture seule ne peut pas voir sa valeur modifiée par une interaction avec l'utilisateur, required n'a aucun effet sur les entrées pour lesquelles l'attribut readonly est également spécifié.

Le seul moyen de modifier dynamiquement la valeur de l'attribut readonly est d'utiliser un script.

Note : L'attribut required n'est pas autorisé sur les entrées pour lesquelles l'attribut readonly est spécifié.

Validation des contraintes

Si l'élément est en lecture seule, la valeur de l'élément ne peut pas être mise à jour par l'utilisateur et ne participe pas à la validation des contraintes.

Exemples

HTML

html
<div class="group">
  <input type="textbox" value="Some value" readonly="readonly" />
  <label>Textbox</label>
</div>
<div class="group">
  <input type="date" value="2020-01-01" readonly="readonly" />
  <label>Date</label>
</div>
<div class="group">
  <input type="email" value="Some value" readonly="readonly" />
  <label>Email</label>
</div>
<div class="group">
  <input type="password" value="Some value" readonly="readonly" />
  <label>Password</label>
</div>
<div class="group">
  <textarea readonly="readonly">Some value</textarea>
  <label>Message</label>
</div>

Résultat

Spécifications

Specification
HTML Standard
# attr-input-readonly
HTML Standard
# attr-textarea-readonly

Compatibilité des navigateurs

html.elements.input.readonly

BCD tables only load in the browser

html.elements.textarea.readonly

BCD tables only load in the browser

Voir aussi