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
140
141
142
143
144
145
146
147
|
---
title: HTMLButtonElement
slug: Web/API/HTMLButtonElement
tags:
- API
- HTML DOM
- Interface
- Reference
- TopicStub
translation_of: Web/API/HTMLButtonElement
---
<div>{{APIRef("HTML DOM")}}</div>
<p> <span class="tlid-translation translation"><span title="">L'interface</span></span> <span class="tlid-translation translation"><span title=""> </span></span><strong><code>HTMLButtonElement</code></strong> <span class="tlid-translation translation"><span title="">fournit des propriétés et des méthodes (au-delà de l'interface d'objet {{HTMLElement ("button")}} dont elle dispose également par héritage) pour manipuler la présentation et la présentation des éléments de bouton.</span></span></p>
<p>{{InheritanceDiagram(600, 120)}}</p>
<h2 id="Propriétés"><span class="tlid-translation translation"><span title="">Propriétés</span></span></h2>
<p><span class="tlid-translation translation"><span title="">Hérite des propriétés de son parent,</span></span> <em> {{domxref("HTMLElement")}}.</em></p>
<dl>
<dt>{{domxref("HTMLButtonElement.accessKey")}}</dt>
<dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMString")}} indiquant la touche de clavier à caractère unique permettant d'accéder au bouton.</span></span></dd>
<dt>{{domxref("HTMLButtonElement.autofocus")}}</dt>
<dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("Boolean")}} indiquant si le contrôle doit avoir ou non le focus d'entrée lors du chargement de la page, sauf si l'utilisateur le remplace, par exemple en tapant un contrôle différent.</span> <span title="">Cet attribut est spécifié pour un seul élément associé à un formulaire dans un document.</span></span></dd>
<dt>{{domxref("HTMLButtonElement.disabled")}}</dt>
<dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("Boolean")}} indiquant si le contrôle est désactivé ou non, ce qui signifie qu'il n'accepte aucun clic</span></span> .</dd>
<dt>{{domxref("HTMLButtonElement.form")}} {{readonlyInline}}</dt>
<dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("HTMLFormElement")}} reflétant le formulaire auquel ce bouton est associé.</span> <span title="">Si le bouton est un descendant d'un élément de formulaire, cet attribut est l'ID de cet élément de formulaire.</span><br>
<span title="">Si le bouton n'est pas un descendant d'un élément de formulaire, l'attribut peut être l'identifiant de n'importe quel élément de formulaire dans le même document auquel il est lié, ou la valeur null si aucun élément ne correspond</span></span> .</dd>
<dt>{{domxref("HTMLButtonElement.formAction")}}</dt>
<dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMString")}} reflétant l'URI d'une ressource qui traite les informations soumises par le bouton.</span> <span title="">S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("action", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.</span></span></dd>
<dt>{{domxref("HTMLButtonElement.formEnctype")}}</dt>
<dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMString")}} reflétant le type de contenu utilisé pour soumettre le formulaire au serveur.</span> <span title="">S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("enctype", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.</span></span></dd>
<dt>{{domxref("HTMLButtonElement.formMethod")}}</dt>
<dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMChaine")}} reflétant la méthode HTTP que le navigateur utilise pour soumettre le formulaire.</span> <span title="">S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("méthode", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.</span></span></dd>
<dt>{{domxref("HTMLButtonElement.formNoValidate")}}</dt>
<dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("Boolean")}} indiquant que le formulaire ne doit pas être validé lors de sa soumission.</span> <span title="">S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("novalidate", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.</span></span></dd>
<dt>{{domxref("HTMLButtonElement.formTarget")}}</dt>
<dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMChaîne")}} reflétant un nom ou un mot clé indiquant où afficher la réponse reçue après la soumission du formulaire.</span> <span title="">S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("target", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.</span></span></dd>
<dt>{{domxref("HTMLButtonElement.labels")}} {{readonlyInline}}</dt>
<dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("NodeList")}} qui représente une liste d'éléments {{HTMLElement ("label")}} qui sont des étiquettes pour ce bouton.</span></span></dd>
<dt>{{domxref("HTMLButtonElement.menu")}} {{experimental_inline}}</dt>
<dd><span class="tlid-translation translation"><span title="">Est-ce un {{domxref ("HTMLMenuElement")}} représentant l'élément de menu à afficher si le bouton est cliqué et de type = "menu".</span></span></dd>
<dt>{{domxref("HTMLButtonElement.name")}}</dt>
<dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMString")}} représentant le nom de l'objet lorsqu'il est soumis avec un formulaire.</span> <span title="">{{HTMLVersionInline (5)}} Si spécifié, il ne doit pas s'agir d'une chaîne vide.</span></span></dd>
<dt>{{domxref("HTMLButtonElement.tabIndex")}}</dt>
<dd><span class="tlid-translation translation"><span title="">Est un</span></span> <code>long</code> <span class="tlid-translation translation"><span title="">qui représente la position de cet élément dans l'ordre de tabulation</span></span> .</dd>
<dt>{{domxref("HTMLButtonElement.type")}}</dt>
<dd>: <span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMString")}} indiquant le comportement du bouton.</span> <span title="">C'est un attribut énuméré avec les valeurs possibles suivantes:</span></span>
<ul>
<li><code>"submit"</code>: <span class="tlid-translation translation"><span title="">Le bouton soumet le formulaire.</span> <span title="">Il s'agit de la valeur par défaut si l'attribut n'est pas spécifié, {{HTMLVersionInline (5)}} ou s'il est modifié dynamiquement en une valeur vide ou non valide.</span></span></li>
<li><code>"reset"</code>: <span class="tlid-translation translation"><span title="">Le bouton réinitialise le formulaire.</span></span></li>
<li><code>"button"</code>: <span class="tlid-translation translation"><span title="">Le bouton ne fait rien.</span></span></li>
<li><code>"menu"</code>: <span class="tlid-translation translation"><span title="">Le bouton affiche un menu.</span> <span title="">{{experimental_inline}}</span></span></li>
</ul>
</dd>
<dt>{{domxref("HTMLButtonElement.validationMessage")}} {{readonlyInline}}</dt>
<dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMString")}} représentant le message localisé décrivant les contraintes de validation que le contrôle ne satisfait pas (le cas échéant).</span> <span title="">Cet attribut est la chaîne vide si le contrôle n'est pas candidat à la validation de contrainte (willValidate est false) ou s'il respecte ses contraintes.</span></span></dd>
<dt>{{domxref("HTMLButtonElement.validity")}} {{readonlyInline}}</dt>
<dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("ValidityState")}} représentant les états de validité dans lesquels se trouve ce bouton.</span></span></dd>
<dt>{{domxref("HTMLButtonElement.value")}}</dt>
<dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMString")}} représentant la valeur de contrôle de formulaire actuelle du bouton.</span></span></dd>
<dt>{{domxref("HTMLButtonElement.willValidate")}} {{readonlyInline}}</dt>
<dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("Boolean")}} indiquant si le bouton est candidat à la validation de contrainte.</span> <span title="">Il est</span></span> <code>false</code> <span class="tlid-translation translation"><span title="">si des conditions l'empêchent de valider la contrainte</span></span> .</dd>
</dl>
<h2 id="Les_méthodes"><span class="tlid-translation translation"><span title="">Les méthodes</span></span></h2>
<p><span class="tlid-translation translation"><span title="">Hérite des méthodes de son parent, {{domxref ("HTMLElement")}}.</span></span></p>
<table class="standard-table" style="height: 239px; width: 1383px;">
<thead>
<tr>
<th scope="col">Nom</th>
<th scope="col"><span class="tlid-translation translation"><span title="">Type de retour</span></span></th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>checkValidity()</code></td>
<td>{{domxref("Boolean")}}</td>
<td>
<p><span class="tlid-translation translation"><span title="">Non pris en charge pour les éléments de bouton.</span></span></p>
</td>
</tr>
<tr>
<td>
<p><code>setCustomValidity(in DOMString error)</code></p>
</td>
<td><code>void</code></td>
<td><span class="tlid-translation translation"><span title="">Non pris en charge pour les éléments de bouton.</span></span></td>
</tr>
</tbody>
</table>
<p><span class="tlid-translation translation"><span title="">Avec un navigateur basé sur Gecko, utilisez la pseudo-classe {{cssxref (": - moz-submit-invalid")}} pour styler les boutons de soumission en fonction de la validation d'un formulaire.</span></span></p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spécification</th>
<th scope="col">Statut</th>
<th scope="col">Commentaire</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "forms.html#the-button-element", "HTMLButtonElement")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td><span class="tlid-translation translation"><span title="">L'attribut suivant a été ajouté</span></span> : <code>menu</code>.<br>
<span class="tlid-translation translation"><span title="">L'attribut</span></span> <code>type</code> <span class="tlid-translation translation"><span title="">peut prendre une valeur supplémentaire</span></span> , <code>"menu"</code>.</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', "forms.html#the-button-element", "HTMLButtonElement")}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td><span class="tlid-translation translation"><span title="">Les attributs</span></span> <code>tabindex</code> et <code>accesskey</code>, <span class="tlid-translation translation"><span title="">sont maintenant définis sur</span></span> {{domxref("HTMLElement")}}.<br>
<span class="tlid-translation translation"><span title="">Les attributs suivants ont été ajoutés</span></span> : <code>autofocus</code>, <code>formAction</code>, <code>formEnctype</code>, <code>formMethod</code>, <code>formNoValidate</code>, <code>formTarget</code>, <code>labels</code>, <code>validity</code>, <code>validationMessage</code>, and <code>willValidate</code>.<br>
<span class="tlid-translation translation"><span title="">Les méthodes suivantes ont été ajoutées</span></span> : <code>checkValidity()</code>, <code>setCustomValidity()</code>.<br>
The <code>type</code> attribute is no more read-only.</td>
</tr>
<tr>
<td>{{SpecName('DOM2 HTML', 'html.html#ID-34812697', 'HTMLButtonElement')}}</td>
<td>{{Spec2('DOM2 HTML')}}</td>
<td><span class="tlid-translation translation"><span title="">Aucun changement de</span></span> {{SpecName("DOM1")}}.</td>
</tr>
<tr>
<td>{{SpecName('DOM1', 'level-one-html.html#ID-34812697', 'HTMLButtonElement')}}</td>
<td>{{Spec2('DOM1')}}</td>
<td>. <span class="tlid-translation translation"><span title="">Définition initiale</span></span></td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs"><span class="tlid-translation translation"><span title="">Compatibilité des navigateurs</span></span></h2>
<div class="hidden"><span class="tlid-translation translation"><span title="">Le tableau de compatibilité sur cette page est généré à partir de données structurées.</span> <span title="">Si vous souhaitez contribuer aux données, veuillez consulter</span></span> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> <span class="tlid-translation translation"><span title="">et envoyez-nous une </span></span>requête .</div>
<p>{{Compat("api.HTMLButtonElement")}}</p>
<h2 id="Voir_également"><span class="tlid-translation translation"><span title="">Voir également</span></span></h2>
<ul>
<li><span class="tlid-translation translation"><span title="">Élément HTML implémentant cette interface</span></span> : {{HTMLElement("button")}}</li>
</ul>
|
