diff options
Diffstat (limited to 'files/fr/web/html/attributes/readonly/index.md')
| -rw-r--r-- | files/fr/web/html/attributes/readonly/index.md | 146 |
1 files changed, 62 insertions, 84 deletions
diff --git a/files/fr/web/html/attributes/readonly/index.md b/files/fr/web/html/attributes/readonly/index.md index 9eba1c737c..0b76f76e6e 100644 --- a/files/fr/web/html/attributes/readonly/index.md +++ b/files/fr/web/html/attributes/readonly/index.md @@ -9,99 +9,77 @@ tags: - required translation_of: Web/HTML/Attributes/readonly --- -<div>{{HTMLSidebar}}</div> +{{HTMLSidebar}} -<p>L'attribut booléen <strong><code>readonly</code></strong>, 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 <code>readonly</code> 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.</p> +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. -<p>L'attribut <code>readonly</code> est pris en charge par les types <a href="/fr/docs/Web/HTML/Element/Input/text"><code>text</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/search"><code>search</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/url"><code>url</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/tel"><code>tel</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/email"><code>email</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/password"><code>password</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/month"><code>mois</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a>, et <a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a> de <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> et les éléments de contrôle de formulaire <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a>. S'il est présent sur l'un de ces types de saisie et éléments, la pseudo-classe <a href="/fr/docs/Web/CSS/:read-only"><code>:read-only</code></a> correspondra. Si l'attribut n'est pas inclus, la pseudo-classe <a href="/fr/docs/Web/CSS/:read-write"><code>:read-write</code></a> correspondra.</p> +L'attribut `readonly` est pris en charge par les types [`text`](/fr/docs/Web/HTML/Element/Input/text), [`search`](/fr/docs/Web/HTML/Element/Input/search), [`url`](/fr/docs/Web/HTML/Element/Input/url), [`tel`](/fr/docs/Web/HTML/Element/Input/tel), [`email`](/fr/docs/Web/HTML/Element/Input/email), [`password`](/fr/docs/Web/HTML/Element/Input/password), [`date`](/fr/docs/Web/HTML/Element/Input/date), [`mois`](/fr/docs/Web/HTML/Element/Input/month), [`week`](/fr/docs/Web/HTML/Element/Input/week), [`time`](/fr/docs/Web/HTML/Element/Input/time), [`datetime-local`](/fr/docs/Web/HTML/Element/Input/datetime-local), et [`number`](/fr/docs/Web/HTML/Element/Input/number) de [`<input>`](/fr/docs/Web/HTML/Element/Input) et les éléments de contrôle de formulaire [`<textarea>`](/fr/docs/Web/HTML/Element/Textarea). S'il est présent sur l'un de ces types de saisie et éléments, la pseudo-classe [`:read-only`](/fr/docs/Web/CSS/:read-only) correspondra. Si l'attribut n'est pas inclus, la pseudo-classe [`:read-write`](/fr/docs/Web/CSS/:read-write) correspondra. -<p>L'attribut n'est pas pris en charge ou pertinent pour <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a> ou les types d'entrée qui ne sont déjà pas mutables, comme <a href="/fr/docs/Web/HTML/Element/Input/checkbox"><code>checkbox</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/radio"><code>radio</code></a> ou ne peuvent pas, par définition, commencer par une valeur, comme le type d'entrée <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a>. <a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/color"><code>color</code></a>, car tous deux ont des valeurs par défaut. Il n'est pas non plus pris en charge sur <a href="/fr/docs/Web/HTML/Element/Input/hidden"><code>hidden</code></a>, 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 <code>image</code>.</p> +L'attribut n'est pas pris en charge ou pertinent pour [`<select>`](/fr/docs/Web/HTML/Element/select) ou les types d'entrée qui ne sont déjà pas mutables, comme [`checkbox`](/fr/docs/Web/HTML/Element/Input/checkbox) et [`radio`](/fr/docs/Web/HTML/Element/Input/radio) ou ne peuvent pas, par définition, commencer par une valeur, comme le type d'entrée [`file`](/fr/docs/Web/HTML/Element/Input/file). [`range`](/fr/docs/Web/HTML/Element/Input/range) et [`color`](/fr/docs/Web/HTML/Element/Input/color), car tous deux ont des valeurs par défaut. Il n'est pas non plus pris en charge sur [`hidden`](/fr/docs/Web/HTML/Element/Input/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`. -<div class="note"> - <p><strong>Note :</strong>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 <code>readonly</code> ne s'applique pas.</p> -</div> +> **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`](/fr/docs/Web/CSS/: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`](/fr/docs/Web/CSS/:read-write). + +### Interactions entre attributs + +La différence entre [`disabled`](/fr/docs/Web/HTML/Attributes/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`](required) n'a aucun effet sur les entrées pour lesquelles l'attribut `readonly` est également spécifié. -<p>Lorsqu'une entrée possède l'attribut <code>readonly</code>, la pseudo-classe <a href="/fr/docs/Web/CSS/:read-only"><code>:read-only</code></a> s'y applique également. Inversement, les entrées qui prennent en charge l'attribut <code>readonly</code> mais qui n'ont pas l'attribut défini correspondent à la pseudo-classe <a href="/fr/docs/Web/CSS/:read-write"><code>:read-write</code></a>.</p> +Le seul moyen de modifier dynamiquement la valeur de l'attribut readonly est d'utiliser un script. -<h3 id="attribute_interactions">Interactions entre attributs</h3> +> **Note :**L'attribut `required` n'est pas autorisé sur les entrées pour lesquelles l'attribut `readonly` est spécifié. -<p>La différence entre <a href="/fr/docs/Web/HTML/Attributes/disabled"><code>disabled</code></a> et <code>readonly</code> 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.</p> +### Validation des contraintes -<p>Comme un champ en lecture seule ne peut pas voir sa valeur modifiée par une interaction avec l'utilisateur, <a href="required"><code>required</code></a> n'a aucun effet sur les entrées pour lesquelles l'attribut <code>readonly</code> est également spécifié.</p> +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. -<p>Le seul moyen de modifier dynamiquement la valeur de l'attribut readonly est d'utiliser un script.</p> +## Exemples -<div class="note"> - <p><strong>Note :</strong>L'attribut <code>required</code> n'est pas autorisé sur les entrées pour lesquelles l'attribut <code>readonly</code> est spécifié.</p> +### 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 + +{{EmbedLiveSample('examples')}} + +## Spécifications + +| Spécification | Statut | +| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | +| {{SpecName('HTML WHATWG', 'forms.html#attr-input-readonly', 'l\'attribut readonly')}} | {{Spec2('HTML WHATWG')}} | +| {{SpecName('HTML5 W3C', 'forms.html#attr-input-readonly', 'l\'attribut readonly')}} | {{Spec2('HTML5 W3C')}} | +| {{SpecName('HTML5.1', 'sec-forms.html#the-readonly-attribute', 'l\'attribut readonly')}} | {{Spec2('HTML5.1')}} | + +## Compatibilité des navigateurs + +{{Compat("html.elements.attributes.readonly")}} + +## Voir aussi -<h3 id="constraint_validation">Validation des contraintes</h3> - -<p>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.</p> - -<h2 id="examples">Exemples</h2> - -<h3 id="html">HTML</h3> - -<pre class="brush: 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> -</pre> - -<h3 id="result">Résultat</h3> - -<div>{{EmbedLiveSample('examples')}}</div> - -<h2 id="specifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'forms.html#attr-input-readonly', 'l\'attribut readonly')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#attr-input-readonly', 'l\'attribut readonly')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', 'sec-forms.html#the-readonly-attribute', 'l\'attribut readonly')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - </tr> - </tbody> -</table> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat("html.elements.attributes.readonly")}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li>Les pseudo-classses <a href="/fr/docs/Web/CSS/:read-only"><code>:read-only</code></a> et <a href="/fr/docs/Web/CSS/:read-write"><code>:read-write</code></a></li> - <li>L'élément <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a></li> - <li>L'élément <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a></li> -</ul> +- Les pseudo-classses [`:read-only`](/fr/docs/Web/CSS/:read-only) et [`:read-write`](/fr/docs/Web/CSS/:read-write) +- L'élément [`<input>`](/fr/docs/Web/HTML/Element/Input) +- L'élément [`<select>`](/fr/docs/Web/HTML/Element/select) |