1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
---
title: 'Attribut HTML : disabled'
slug: Web/HTML/Attributes/disabled
tags:
- Attribute
- Attributes
- Constraint validation
- Forms
- required
translation_of: Web/HTML/Attributes/disabled
---
<p>{{HTMLSidebar}}</p>
<p>L'attribut booléen <code><strong>disabled</strong></code>, lorsqu'il est présent, rend l'élément non mutable, non focusable, ou même non soumis avec le formulaire. L'utilisateur ne peut ni modifier ni cibler le contrôle, ni les descendants du contrôle de formulaire. Si l'attribut <code>disabled</code> est spécifié sur un contrôle de formulaire, l'élément et ses descendants de contrôle de formulaire ne participent pas à la validation des contraintes. Souvent, les navigateurs grisent ces contrôles et ils ne reçoivent aucun événement de navigation, comme les clics de souris ou les événements liés au focus.</p>
<p>L'attribut <code>disabled</code> est utilisé par <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a>, <a href="/fr/docs/Web/HTML/Element/Fieldset"><code><fieldset></code></a>, <a href="/fr/docs/Web/HTML/Element/Keygen"><code><keygen></code></a>, <a href="/fr/docs/Web/HTML/Element/Optgroup"><code><optgroup></code></a>, <a href="/fr/docs/Web/HTML/Element/Option"><code><option></code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a>, <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a> et <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>.</p>
<p>Cet attribut booléen indique que l'utilisateur ne peut pas interagir avec le contrôle ou ses contrôles descendants. Si cet attribut n'est pas spécifié, le contrôle hérite ce paramètre de l'élément contenant, par exemple <code>fieldset</code> ; s'il n'y a pas d'élément contenant avec l'attribut <code>disabled</code> défini, et que le contrôle lui-même ne possède pas cet attribut, alors le contrôle est activé. S'il est déclaré sur un <a href="/fr/docs/Web/HTML/Element/Optgroup"><code><optgroup></code></a>, le sélecteur est toujours interactif (sauf s'il est désactivé autrement), mais aucun des éléments du groupe d'options n'est sélectionnable.</p>
<div class="note">
<p><strong>Note :</strong>Si un <a href="/fr/docs/Web/HTML/Element/Fieldset"><code><fieldset></code></a> est désactivé, les contrôles de formulaire descendants sont tous désactivés, à l'exception des contrôles de formulaire dans la légende (<a href="/fr/docs/Web/HTML/Element/Legend"><code><legend></code></a>).</p>
</div>
<p>Lorsqu'un élément de support a l'attribut <code>disabled</code> est appliqué, la pseudo-classe <a href="/fr/docs/Web/CSS/:disabled"><code>:disabled</code></a> s'y applique également. Inversement, les éléments qui prennent en charge l'attribut <code>disabled</code> mais qui n'ont pas l'attribut défini correspondent à la pseudo-classe <a href="/fr/docs/Web/CSS/:enabled"><code>:enabled</code></a>.</p>
<p>Cet attribut booléen empêche l'utilisateur d'interagir avec le bouton. Si cet attribut n'est pas défini, le bouton peut toujours être désactivé à partir d'un élément contenant, par exemple <a href="/fr/docs/Web/HTML/Element/Fieldset"><code><fieldset></code></a> ; s'il n'y a pas d'élément contenant avec l'attribut <code>disabled</code> défini, alors le bouton est activé.</p>
<p>Firefox va, contrairement aux autres navigateurs, faire persister l'état désactivé dynamique d'un <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a> à travers les chargements de pages. Utilisez l'attribut <a href="/fr/docs/Web/HTML/Attributes/autocomplete"><code>autocomplete</code></a> pour contrôler cette fonctionnalité.</p>
<h3 id="attribute_interactions">Interactions entre attributs</h3>
<p>La différence entre <code>disabled</code> et <a href="/fr/docs/Web/HTML/Attributes/readonly"><code>readonly</code></a> 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>
<p>Étant donné qu'un champ désactivé ne peut pas voir sa valeur modifiée, <a href="/fr/docs/Web/HTML/Attributes/required"><code>required</code></a> n'a aucun effet sur les entrées dont l'attribut <code>disabled</code> est également spécifié. De plus, puisque les éléments deviennent immuables, la plupart des autres attributs, tels que <a href="/fr/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a>, n'ont aucun effet, tant que le contrôle n'est pas activé.</p>
<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>disabled</code> est spécifié.</p>
</div>
<h3 id="usability">Utilisation</h3>
<p>Les navigateurs affichent les contrôles de formulaire désactivés en grisé, car les contrôles de formulaire désactivés sont immuables, ne reçoivent pas de focus ou d'événements de navigation, comme les clics de souris ou les événements liés au focus, et ne sont pas soumis avec le formulaire.</p>
<p>S'il est présent sur un élément de support, la pseudo-classe <a href="/fr/docs/Web/CSS/:disabled"><code>:disabled</code></a> correspondra. Si l'attribut n'est pas inclus, la pseudo-classe <a href="/fr/docs/Web/CSS/:enabled"><code>:enabled</code></a> correspondra. Si l'élément ne prend pas en charge l'attribut disabled, l'attribut n'aura aucun effet, y compris celui de ne pas être apparié par les pseudo-classes <code>:disabled</code> et <code>:enabled</code>.</p>
<h3 id="constraint_validation">Validation des contraintes</h3>
<p>Si l'élément est <code>disabled</code>, alors la valeur de l'élément ne peut pas recevoir de focus et ne peut pas être mis à jour par l'utilisateur, et ne participe pas à la validation des contraintes.</p>
<h2 id="examples">Exemples</h2>
<p>Lorsque les contrôles de formulaire sont désactivés, de nombreux navigateurs les affichent par défaut dans une couleur plus claire et grisée. Voici des exemples de case à cocher, bouton radio, <a href="/fr/docs/Web/HTML/Element/Option"><code><option></code></a> et <a href="/fr/docs/Web/HTML/Element/Optgroup"><code><optgroup></code></a>, ainsi que certains contrôles de formulaire qui sont désactivés via l'attribut <code>disabled</code> défini sur l'élément ancêtre <a href="/fr/docs/Web/HTML/Element/Fieldset"><code><fieldset></code></a>. Les <a href="/fr/docs/Web/HTML/Element/Option"><code><option></code></a> sont désactivés, mais le <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a> lui-même ne l'est pas. Nous aurions pu désactiver l'ensemble de <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a> en ajoutant l'attribut à cet élément plutôt qu'à ses descendants.</p>
<pre class="brush: html"><fieldset>
<legend>Cases à cocher</legend>
<p><label>
<input type="checkbox" name="chbox" value="regular"> Régulier
</label></p>
<p><label>
<input type="checkbox" name="chbox" value="disabled" disabled> désactivé
</label></p>
</fieldset>
<fieldset>
<legend>Boutons radio</legend>
<p><label>
<input type="radio" name="radio" value="regular"> Régulier
</label></p>
<p><label>
<input type="radio" name="radio" value="disabled" disabled> désactivé
</label></p>
</fieldset>
<p>
<label>Sélectionnez une option :
<select>
<optgroup label="Groupe 1">
<option>Option 1.1</option>
</optgroup>
<optgroup label="Groupe 2">
<option>Option 2.1</option>
<option disabled>Option 2.2</option>
<option>Option 2.3</option>
</optgroup>
<optgroup label="Groupe 3" disabled>
<option>Désactivé 3.1</option>
<option>Désactivé 3.2</option>
<option>Désactivé 3.3</option>
</optgroup>
</select>
</label>
</p>
<fieldset disabled>
<legend>Champ désactivé</legend>
<p>
<label>Nom : <input type="name" name="radio" value="régulier"> Régulier</label>
</p>
<p>
<label>Nombre : <input type="number"></label>
</p>
</fieldset></pre>
<div>{{EmbedLiveSample('examples', '', 460)}}</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-disabled', 'disabled attribute')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'forms.html#attr-input-disabled', 'disabled attribute')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', 'sec-forms.html#the-disabled-attribute', 'disabled attribute')}}</td>
<td>{{Spec2('HTML5.1')}}</td>
</tr>
</tbody>
</table>
<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
<p>{{Compat("html.elements.attributes.disabled")}}</p>
<h2 id="see_also">Voir aussi</h2>
<ul>
<li>Les pseudo-classes <a href="/fr/docs/Web/CSS/:disabled"><code>:disabled</code></a> et <a href="/fr/docs/Web/CSS/:enabled"><code>:enabled</code></a></li>
</ul>
|
