L'attribut booléenreadonly, lorsqu'il est présent, rend l'élément non mutable, ce qui signifie que l'utilisateur·ice ne peut pas modifier le contrôle.

Exemple interactif

<label for="firstName">Prénom&nbsp;:</label><input name="firstName" type="text" value="Adam" /><label for="age">Âge&nbsp;:</label><input name="age" type="number" value="42" readonly /><label for="hobbies">Hobbies&nbsp;:</label><textarea name="hobbies" readonly>Baseball</textarea>

label {  display: block;  margin-top: 1em;}input:read-only,textarea:read-only {  background-color: silver;}

Vue d'ensemble

Si l'attributreadonly est défini sur un élément de saisie, parce que l'utilisateur·ice ne peut pas modifier la saisie, l'élément ne participe pas à la validation des contraintes.

L'attributreadonly est pris en charge par les contrôles de formulaire textuels, notamment :

• Les éléments<input> de type :
  • text
  • search
  • tel
  • url
  • email
  • password
  • date
  • month
  • week
  • time
  • datetime-local
  • number
• <textarea>

L'attribut n'est pas pertinent pour tous les autres éléments, y compris<select> et<button>. Il ne s'applique pas non plus aux éléments de saisie non textuels, notamment :

• hidden
• range
• color
• checkbox
• radio
• file
• submit
• image
• reset
• button

Les éléments qui prennent en charge l'attributreadonly mais ne l'ont pas défini correspondent à la pseudo-classe:read-write. Tous les autres éléments correspondent à la pseudo-classe:read-only.

Interactions entre attributs

La différence entredisabled etreadonly est que les contrôles en lecture seule peuvent toujours fonctionner et être sélectionnés, tandis que les contrôles désactivés ne peuvent pas être sélectionnés, ne sont pas envoyés avec le formulaire et ne fonctionnent généralement pas tant qu'ils ne sont pas activés.

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

La seule façon de modifier dynamiquement la valeur de l'attribut readonly est via un script.

Utilisabilité

Les navigateurs affichent l'attributreadonly.

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·ice et ne participe pas à la validation des contraintes.

Exemples

HTML

<div>  <input type="text" value="Une valeur" readonly="readonly" />  <label for="text">Zone de texte</label></div><div>  <input type="date" value="2020-01-01" readonly="readonly" />  <label for="date">Date</label></div><div>  <input    type="email"    value="exemple@domaine.fr"    readonly="readonly"    />  <label for="email">Courriel</label></div><div>  <input type="password" value="MotDePasse123" readonly="readonly" />  <label for="pwd">Mot de passe</label></div><div>  <textarea readonly="readonly">Un message</textarea>  <label for="ta">Message</label></div>

Résultat

Spécifications

Compatibilité des navigateurs

html.elements.input.readonly

html.elements.textarea.readonly

Voir aussi

• Les pseudo-classses CSS:read-only et:read-write
• L'élément<input>
• L'élément<select>