Attribut HTML : readonly

Exemple interactif

<label for="firstName">Prénom&nbsp;:</label>
<input id="firstName" name="firstName" type="text" value="Adam" />

<label for="age">Âge&nbsp;:</label>
<input id="age" name="age" type="number" value="42" readonly />

<label for="hobbies">Hobbies&nbsp;:</label>
<textarea id="hobbies" 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'attribut readonly 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'attribut readonly 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'attribut readonly 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 entre disabled et readonly 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'attribut readonly 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'attribut readonly.

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.

Exemple

HTML

<div class="group">
  <input type="text" value="Une valeur" readonly="readonly" id="text" />
  <label for="text">Zone de texte</label>
</div>
<div class="group">
  <input type="date" value="2020-01-01" readonly="readonly" id="date" />
  <label for="date">Date</label>
</div>
<div class="group">
  <input
    type="email"
    value="[email protected]"
    readonly="readonly"
    id="email" />
  <label for="email">Courriel</label>
</div>
<div class="group">
  <input type="password" value="MotDePasse123" readonly="readonly" id="pwd" />
  <label for="pwd">Mot de passe</label>
</div>
<div class="group">
  <textarea readonly="readonly" id="ta">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 :read-only et :read-write
• L'élément <input>
• L'élément <select>