diff options
| author | tristantheb <tristantheb@users.noreply.github.com> | 2021-06-19 10:25:05 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-06-19 10:25:05 +0200 |
| commit | a47584de1bd47788cb5aa6178fa88b31977b2a8e (patch) | |
| tree | 1c153a5dd0e939a3ef819df87d6b988da950352f /files/fr/web/html/element/button | |
| parent | 1b0940218952a8132ceb9e4b56792ad47e94d552 (diff) | |
| download | translated-content-a47584de1bd47788cb5aa6178fa88b31977b2a8e.tar.gz translated-content-a47584de1bd47788cb5aa6178fa88b31977b2a8e.tar.bz2 translated-content-a47584de1bd47788cb5aa6178fa88b31977b2a8e.zip | |
UPDATE: Update translation of the HTML elements — 🛠 Priority work area (#500)
* UPDATE: Updating pages starting with A
* FIX: Update missing KS to html anchor
* Review HTML Element a
* Review HTML Element abbr
* Review HTML Element acronym
* Review HTML Element address
* Review HTML Element applet
* Review HTML Element area
* Review HTML Element article
* Review HTML Element aside
* Review HTML Element audio
* UPDATE: Updating pages wtarting with B
* Review HTML Element b
* Review HTML Element base
* Review HTML Element basefont
* Review HTML Element bdi
* Review HTML Element bdo
* Review HTML Element big
* Review HTML Element blink
* Review HTML Element blockquote
* Review HTML Element body
* Review HTML Element br
* Review HTML Element button
* Review HTML Element button - rm HTMLRef
* Review HTML Element button - lint link
* UPDATE: Updating pages starting with C
* UPDATE: Updating pages starting with D
* UPDATE: Refresh the reference page
* UPDATE: Updating pages starting with E
* Review HTML Element canvas
* Review HTML Element caption
* Review HTML Element center
* Review HTML Element cite
* UPDATE: Updating pages starting with F
* BCD: Update all updated pages with new BCD format
* FIX: add missing bracket
* Review - HTML element - code
* Review - HTML Element - col
* Review - HTML Element - colgroup
* Review - HTML Element - content
* Review - HTML Element - data
* Review - HTML Element - datalist
* Review - HTML Element - dd
* Review - HTML Element - del
* Review - HTML Element
* Review - HTML Element - dfn
* Review - HTML Element - dialog
* Review - HTML element - dir
* Review - HTML Element div
* Review - HTML Element - dl
* Review - HTML Element - dt
* Review - HTML Element - em
* Review - HTML Element - embed
* Review - HTML Element - fieldset
* Review - HTML Element - figcaption
* Review - HTML Element - figure
* Review - HTML Element - font
* Review - HTML Element - footer
* Review - HTML Element - form
* Review - HTML Element - frame
* Review - HTML Element - frameset
* Review updates since PR start - A
* Review updates since PR start - B
* Review updates since PR start - C
* Review updates since PR start - D
* Review updates since PR start - F
Co-authored-by: julieng <julien.gattelier@gmail.com>
Diffstat (limited to 'files/fr/web/html/element/button')
| -rw-r--r-- | files/fr/web/html/element/button/index.html | 333 |
1 files changed, 142 insertions, 191 deletions
diff --git a/files/fr/web/html/element/button/index.html b/files/fr/web/html/element/button/index.html index be7ad23143..93bffb8e99 100644 --- a/files/fr/web/html/element/button/index.html +++ b/files/fr/web/html/element/button/index.html @@ -3,253 +3,204 @@ title: '<button> : l''élément représentant un bouton' slug: Web/HTML/Element/Button tags: - Element + - Forms - HTML + - HTML forms - Reference - Web translation_of: Web/HTML/Element/button +browser-compat: html.elements.button --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><button></code></strong> est utilisé afin de créer un contrôle interactif ayant la forme d'un bouton et qui pourra être utilisé dans un formulaire ou dans le document.</p> - -<p>Par défaut, les boutons HTML sont mis en forme avec les styles natifs provenant du système d'exploitation mais leur apparence peut être adaptée grâce à CSS.</p> +<p class="summary">L'élément <strong><code><button></code></strong> représente un bouton cliquable, utilisé pour soumettre <a href="/fr/docs/Learn/Forms">des formulaires</a> ou n'importe où dans un document pour une fonctionnalité de bouton accessible et standard. Par défaut, les boutons HTML sont présentés dans un style ressemblant à la plate-forme d'exécution de <a href="/fr/docs/Glossary/User_agent">l'agent utilisateur</a>, mais vous pouvez modifier l'apparence des boutons avec <a href="/fr/docs/Web/CSS">CSS</a>.</p> <div>{{EmbedInteractiveExample("pages/tabbed/button.html", "tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content">contenu interactif</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#form_listed">listable</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#form_labelable">étiquetable</a> et <a href="/fr/docs/Web/Guide/HTML/Content_categories#form_submittable">soumettable</a> <a href="/fr/docs/Web/Guide/HTML/Content_categories#form-associated_content">associé aux formulaires</a> et <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">Contenu phrasé</a> mais sans <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content">contenu interactif</a>.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>Aucune omision de balise possible.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Tout élément acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><code><a href="/fr/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td><a href="https://w3c.github.io/aria/#checkbox"><code>checkbox</code></a>, <a href="https://w3c.github.io/aria/#link"><code>link</code></a>, <a href="https://w3c.github.io/aria/#menuitem"><code>menuitem</code></a>, <a href="https://w3c.github.io/aria/#menuitemcheckbox"><code>menuitemcheckbox</code></a>, <a href="https://w3c.github.io/aria/#menuitemradio"><code>menuitemradio</code></a>, <a href="https://w3c.github.io/aria/#option"><code>option</code></a>, <a href="https://w3c.github.io/aria/#radio"><code>radio</code></a>, <a href="https://w3c.github.io/aria/#switch"><code>switch</code></a>, <a href="https://w3c.github.io/aria/#tab"><code>tab</code></a>.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLButtonElement"><code>HTMLButtonElement</code></a></td> + </tr> + </tbody> +</table> -<h2 id="Attributs">Attributs</h2> +<h2 id="attributes">Attributs</h2> -<p>Cet élément peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> +<p>Cet élément peut utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> <dl> - <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline(5)}}</dt> - <dd>Cet attribut booléen, qui ne doit être défini qu'une fois par document, indique au navigateur que cet élément doit automatiquement avoir le focus lorsque la page est chargée. Cela permet d'utiliser immédiatement ce bouton, via un raccourci clavier par exemple, sans avoir à cliquer au préalable dans le contrôle adéquat.</dd> - <dt>{{htmlattrdef("autocomplete")}} {{non-standard_inline}}</dt> - <dd>Pour l'élément <code><button></code>, cet attribut, propre à Firefox, n'est pas standard. Par défaut et à la différence des autres navigateurs, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox conserve l'état de désactivation d'un bouton</a> d'un élément {{HTMLElement("button")}} au fur et à mesure des chargements d'une page. Utiliser cet attribut avec la valeur <code>off</code> (i.e. <code>autocomplete="off"</code>) désactive cette fonctionnalité (cf. {{bug(654072)}} pour plus d'informations).</dd> - <dt>{{htmlattrdef("disabled")}}</dt> - <dd>La présence de cet attribut booléen indique que le contrôle est désactivé, c'est-à-dire non modifiable. Il apparaît souvent en grisé dans les navigateurs et ne reçoit plus les évènements de navigation (par exemple un clic de souris) ou ceux en relation avec le focus. S'il n'est pas défini, l'élément peut malgré tout hériter cet état de ses ancêtres, par exemple si élément {{HTMLElement("fieldset")}} désactivé. Par défaut le bouton sera activé.</dd> - <dd>À la différence des autres navigateurs, Firefox conservera par défaut l'état de désactivation d'un bouton même après un rechargement. Pour contrôler ce comportement, on utilisera l'attribut {{htmlattrxref("autocomplete","button")}} présenté ci-avant.</dd> - <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt> - <dd>Cet attribut contient l'attribut <code><strong>id</strong></code> de l'élément {{HTMLElement("form")}} auquel celui-ci est rattaché. Par défaut, le bouton est rattaché à l'élément {{HTMLElement("form")}} qui est son plus proche ancêtre. Cet attribut permet à un bouton d'être placé n'importe où dans le document et pas seulement comme un descendant d'éléments {{HTMLElement("form")}}.</dd> - <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline(5)}}</dt> - <dd> - <p>Cet attribut indique l'URI à laquelle le formulaire doit être soumis si le contrôle est activé. Si l'attribut n'est pas indiqué, l'attribut <code><strong>action</strong></code> de l'élément {{HTMLElement("form")}} étant le plus proche ancêtre de cet élément est pris en compte. Si les deux sont absents, l'URI sera une chaîne vide. Si cet attribut est défini, il écrasera l'attribut {{htmlattrxref("action","form")}} du formulaire rattaché au bouton.</p> - </dd> - <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline(5)}}</dt> - <dd>Lorsque l'attribut <code><strong>type</strong></code> possède la valeur <code>submit</code>, cet attribut définit le <a class="external" href="https://fr.wikipedia.org/wiki/Type_MIME">type MIME</a> qui sera utilisée pour encoder les données envoyées au serveur. C'est un attribut à valeur contrainte qui peut prendre les valeurs suivantes : - <ul> - <li><code>application/x-www-form-urlencoded</code> : la valeur par défaut.</li> - <li><code>multipart/form-data</code>, (utilisez cet valeur si vous utilisez un {{HTMLElement("input")}} avec un attribut {{htmlattrxref("type","input")}} défini à <code>file</code>.)</li> - <li><code>text/plain</code></li> - </ul> - - <p>Si cet attribut n'est pas défini, c'est la valeur de l'attribut {{htmlattrxref("enctype","form")}} de l'élément {{HTMLElement("form")}} qui est le plus proche ancêtre de cet élément qui est utilisé. Si cet attribut est défini, il écrasera l'attribut {{htmlattrxref("enctype","form")}} du formulaire rattaché au bouton.</p> - </dd> - <dt>@{{htmlattrdef("formmethod")}} {{HTMLVersionInline(5)}}</dt> - <dd>Lorsque l'attribut <code><strong>type</strong></code> possède la valeur <code>submit</code>, cet attribut définit la méthode <a class="external" href="/fr/docs/Web/HTTP">HTTP</a> qui sera utilisée pour envoyer les données au serveur. C'est un attribut à valeur contrainte qui peut prendre les valeurs suivantes : - <ul> - <li><code>GET</code>, correspondant à la <a class="external" href="/fr/docs/Web/HTTP/Methods/GET">méthode GET</a> du protocole HTTP;</li> - <li><code>POST</code>, correspondant à la <a class="external" href="/fr/docs/Web/HTTP/Methods/POST">méthode POST</a> du protocole HTTP;</li> - <li><code>PUT</code>, correspondant à la <a class="external" href="/fr/docs/Web/HTTP/Methods/PUT">méthode PUT</a> du protocole HTTP;</li> - <li><code>DELETE</code>, correspondant à la <a class="external" href="/fr/docs/Web/HTTP/Methods/DELETE">méthode DELETE</a> du protocole HTTP.</li> - </ul> - - <p>Si cet attribut n'est pas défini, c'est la valeur de l'attribut {{htmlattrxref("method","form")}} de l'élément {{HTMLElement("form")}} qui est le plus proche ancêtre de cet élément qui est utilisé. En son absence, la valeur par défaut utilisée est <code>GET</code>. Si cet attribut est défini, il écrasera l'attribut {{htmlattrxref("method","form")}} du formulaire rattaché au bouton.</p> - </dd> - <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline(5)}}</dt> - <dd> - <p>Lorsque l'attribut <code><strong>type</strong></code> possède la valeur <code>submit</code>, cet attribut booléen indique si le formulaire doit être validé au moment de sa soumission. S'il n'est pas mis, l'attribut {{htmlattrxref("novalidate","form")}} de l'élément {{HTMLElement("form")}} qui est le plus proche ancêtre de cet élément est pris en compte. En leur absence à tous les deux, le formulaire sera validé.</p> - - <p>Si cet attribut est défini, il écrasera l'attribut {{htmlattrxref("novalidate","form")}} du formulaire rattaché au bouton.</p> - </dd> - <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline(5)}}</dt> - <dd>Lorsque l'attribut <code><strong>type</strong></code> possède la valeur <code>submit</code>, cet attribut indique le contexte de navigation (onglet, fenêtre, frame) associé avec le formulaire, sa cible. Outre un attribut <code><strong>id </strong></code>valide du document, il peut prendre l'une de ces valeurs particulières: - <ul> - <li><code>_self</code> où la cible sera le contexte actuel;</li> - <li><code>_parent</code> où la cible sera le contexte hiérarchiquement au-dessus du contexte actuel (où le contexte actuel, s'il n'y en a pas);</li> - <li><code>_top</code> où la cible sera le contexte hiérarchiquement le plus au-dessus du contexte actuel (typiquement l'onglet courant);</li> - <li><code>_blank</code> où la cible sera un nouveau contexte proche, c'est-à-dire facilement atteignable, du contexte actuel (un nouvel onglet ou une nouvelle fenêtre par exemple).</li> - </ul> - - <p>S'il n'est pas mis, l'attribut {{htmlattrxref("target","form")}} de l'élément {{HTMLElement("form")}} qui est le plus proche ancêtre de cet élément est pris en compte. En leur absence à tous les deux, la cible sera déterminée par l'attribut {{htmlattrxref("target","base")}} du premier élément {{HTMLElement("base")}} descendant de l'élément {{HTMLElement("head")}} du document. S'il n'y en a pas, la cible sera la chaîne vide.</p> - - <p>Si cet attribut est défini, il écrasera l'attribut {{htmlattrxref("target","form")}} du formulaire rattaché au bouton.</p> - </dd> - <dt>{{htmlattrdef("name")}}</dt> - <dd>Le nom du contrôle, qui sera soumis avec les données du formulaire.</dd> - <dt>{{htmlattrdef("type")}}</dt> - <dd>Le type du bouton. Le type par défaut si cet attribut énuméré n'est pas spécifié est <code>submit</code>. Les valeurs, et les actions associées, possibles sont : - <ul> - <li><code>submit</code> : l'activation du bouton entraîne la soumission du formulaire au serveur distant (après validation des contraintes du formulaire);</li> - <li><code>reset</code> : l'activation du bouton entraîne la réinitialisation du formulaire et dans ce cas-là, l'élément est exclu de la validation des contraintes;</li> - <li><code>button</code> : l'activation du bouton n'entraîne aucun action automatique et dans ce cas-là également, l'élément est exclu de la validation des contraintes. C'est cette valeur qui doit être utilisée si le bouton n'est pas utilisé pour envoyer un formulaire.</li> - </ul> - - <p>Si l'attribut <code><strong>disabled</strong></code> est activé, aucune action n'a lieu.</p> - </dd> - <dt>{{htmlattrdef("value")}}</dt> - <dd>Cet attribut contient la valeur de ce bouton en rapport avec la soumission du formulaire; il n'est ajouté aux données envoyées au serveur que si le bouton a été utilisée pour initier l'envoi.</dd> + <dt><strong id="attr-autofocus"><code>autofocus</code></strong></dt> + <dd>Cet attribut booléen, <strong>qui ne doit être défini qu'une fois par document</strong>, indique au navigateur que cet élément doit automatiquement avoir le <a href="/fr/docs/Web/API/HTMLOrForeignElement/focus">focus</a> lorsque la page est chargée. Cela permet d'utiliser immédiatement ce bouton, via un raccourci clavier par exemple, sans avoir à cliquer au préalable dans le contrôle adéquat.</dd> + <dt><strong id="attr-autocomplete"><code>autocomplete</code></strong> {{non-standard_inline}}</dt> + <dd>Pour l'élément <code><button></code>, cet attribut, propre à Firefox, n'est pas standard. Par défaut et à la différence des autres navigateurs, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox conserve l'état de désactivation d'un bouton</a> d'un élément <code><button></code> au fur et à mesure des chargements d'une page. Utiliser cet attribut avec la valeur <code>off</code> (i.e. <code>autocomplete="off"</code>) désactive cette fonctionnalité (cf. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">bug 654072</a> pour plus d'informations).</dd> + <dt><strong id="attr-disabled"><code>disabled</code></strong></dt> + <dd> + <p>Cet attribut booléen empêche l'utilisateur d'interagir avec le bouton : il ne peut pas être pressé ou ciblé.</p> + + <p>Firefox, contrairement aux autres navigateurs, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persiste l'état désactivé dynamique</a> d'un <code><bouton></code> à travers les chargements de page. Utilisez l'attribut <a href="#attr-autocomplete"><code>autocomplete</code></a> pour contrôler cette fonctionnalité.</p> + </dd> + <dt><strong id="attr-form"><code>form</code></strong></dt> + <dd>L'élément <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a> auquel associer le bouton (son <em>formulaire rattaché</em>). Cet attribut contient l'attribut <code><strong>id</strong></code> de l'élément <code><form></code> auquel celui-ci est rattaché. Par défaut, le bouton est rattaché à l'élément <code><form></code> qui est son plus proche ancêtre. Cet attribut permet à un bouton d'être placé n'importe où dans le document et pas seulement comme un descendant d'éléments <code><form></code>. Il permet également de rattacher le bouton à un autre formulaire que son élément parent.</dd> + <dt><strong id="attr-formaction"><code>formaction</code></strong></dt> + <dd>L'URL qui traite les informations soumises par le bouton. Remplace l'attribut <a href="/fr/docs/Web/HTML/Element/Form#attr-action"><code>action</code></a> du formulaire rattaché au bouton. Il ne fait rien s'il n'y a pas de formulaire rattaché.</dd> + <dt><strong id="attr-formenctype"><code>formenctype</code></strong></dt> + <dd>Lorsque l'attribut <code><strong>type</strong></code> possède la valeur <code>submit</code>, cet attribut définit le <a class="external" href="https://fr.wikipedia.org/wiki/Type_MIME">type MIME</a> qui sera utilisée pour encoder les données envoyées au serveur. C'est un attribut à valeur contrainte qui peut prendre les valeurs suivantes : + <ul> + <li><code>application/x-www-form-urlencoded</code> : La valeur par défaut.</li> + <li><code>multipart/form-data</code> : Utilisé pour soumettre des éléments <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> dont les attributs <a href="/fr/docs/Web/HTML/Element/Input#attr-type"><code>type</code></a> sont définis sur <code>file</code>.</li> + <li><code>text/plain</code> : Spécifié comme une aide au débogage ; ne doit pas être utilisé pour la soumission réelle du formulaire.</li> + </ul> + + <p>Si cet attribut est spécifié, il remplace l'attribut <a href="/fr/docs/Web/HTML/Element/Form#attr-enctype"><code>enctype</code></a> du formulaire rattaché au bouton.</p> + </dd> + <dt><strong id="attr-formmethod"><code>formmethod</code></strong></dt> + <dd>Lorsque l'attribut <code><strong>type</strong></code> possède la valeur <code>submit</code> (explicitement ou comme valeur par défaut), cet attribut définit la <a href="/fr/docs/Web/HTTP/Methods">méthode HTTP</a> qui sera utilisée pour envoyer les données au serveur. C'est un attribut à valeur contrainte qui peut prendre les valeurs suivantes : + <ul> + <li><code>post</code> : Les données du formulaire sont incluses dans le corps de la requête HTTP lorsqu'elles sont envoyées au serveur. À utiliser lorsque le formulaire contient des informations qui ne devraient pas être publiques, comme les identifiants de connexion.</li> + <li><code>get</code> : Les données du formulaire sont ajoutées à l'URL <code>action</code> du formulaire, avec un <code>?</code> comme séparateur, et l'URL résultante est envoyée au serveur. Utilisez cette méthode lorsque le formulaire <a href="/fr/docs/Glossary/Idempotent">n'a pas d'effets secondaires</a>, comme les formulaires de recherche.</li> + </ul> + + <p>S'il est spécifié, cet attribut remplace l'attribut <a href="/fr/docs/Web/HTML/Element/Form#attr-method"><code>method</code></a> du formulaire rattaché au bouton.</p> + </dd> + <dt><strong id="attr-formnovalidate"><code>formnovalidate</code></strong></dt> + <dd>Si le bouton est un bouton de soumission (<code>type</code> non défini ou défini avec la valeur <code>"submit"</code>), cet attribut booléen spécifie que le formulaire ne doit pas être <a href="/fr/docs/Learn/Forms/Form_validation">validé</a> lorsqu'il est soumis. Si cet attribut est spécifié, il remplace l'attribut <a href="/fr/docs/Web/HTML/Element/Form#attr-novalidate"><code>novalidate</code></a> du formulaire rattaché au bouton.</dd> + <dd>Cet attribut est également disponible sur les éléments <code><a href="/fr/docs/Web/HTML/Element/Input/image"><input type="image"></a></code> et <code><a href="/fr/docs/Web/HTML/Element/Input/submit"><input type="submit"></a></code>.</p> + </dd> + <dt><strong id="attr-formtarget"><code>formtarget</code></strong></dt> + <dd>Lorsque l'attribut <code><strong>type</strong></code> possède la valeur <code>submit</code>, cet attribut indique le contexte de navigation (onglet, fenêtre, frame) associé avec le formulaire, sa cible. Outre un attribut <code><strong>id </strong></code>valide du document, il peut prendre l'une de ces valeurs particulières: + <ul> + <li><code>_self</code> : Charge la réponse dans le même contexte de navigation que le contexte actuel. Il s'agit de la valeur par défaut si l'attribut n'est pas spécifié.</li> + <li><code>_blank</code> : Charge la réponse dans un nouveau contexte de navigation sans nom — généralement un nouvel onglet ou une nouvelle fenêtre, selon les paramètres du navigateur de l'utilisateur.</li> + <li><code>_parent</code> : Charge la réponse dans le contexte de navigation parent de celui en cours. S'il n'y a pas de parent, cette option se comporte de la même manière que <code>_self</code>.</li> + <li><code>_top</code> : Charge la réponse dans le contexte de navigation de niveau supérieur (c'est-à-dire le contexte de navigation qui est un ancêtre du contexte actuel, et qui n'a pas de parent). S'il n'y a pas de parent, cette option se comporte de la même manière que <code>_self</code>.</li> + </ul> + </dd> + <dt><strong id="attr-name"><code>name</code></strong></dt> + <dd>Le nom du bouton, soumis en tant que paire avec la <code>valeur</code> du bouton comme partie des données du formulaire.</dd> + <dt><strong id="attr-type"><code>type</code></strong></dt> + <dd>Le comportement par défaut du bouton. Les valeurs possibles sont : + <ul> + <li><code>submit</code> : Le bouton soumet les données du formulaire au serveur. C'est la valeur par défaut si l'attribut n'est pas spécifié pour les boutons associés à un <code><form></code>, ou si l'attribut est une valeur vide ou invalide.</li> + <li><code>reset</code> : Le bouton réinitialise tous les contrôles à leur valeur initiale, comme <a href="/fr/docs/Web/HTML/Element/Input/reset"><input type="reset"></a>. (Ce comportement a tendance à agacer les utilisateurs).</li> + <li><code>button</code> : Le bouton n'a pas de comportement par défaut et ne fait rien lorsqu'il est pressé par défaut. Les scripts côté client peuvent écouter les événements de l'élément, qui sont déclenchés lorsque les événements se produisent.</li> + </ul> + </dd> + <dt><strong id="attr-value"><code>value</code></strong></dt> + <dd>Définit la valeur associée au <code>name</code> du bouton lorsqu'il est soumis avec les données du formulaire. Cette valeur est transmise au serveur en paramètres lorsque le formulaire est soumis.</dd> </dl> -<h2 id="Exemple">Exemple</h2> +<h2 id="notes">Notes</h2> -<pre class="brush:html notranslate"><button name="button">Cliquez sur moi :)</button> -</pre> +<p>Un bouton de soumission avec l'attribut <code>formaction</code> défini, mais sans formulaire associé ne fait rien. Vous devez définir un formulaire rattaché, soit en l'enveloppant dans un <code><form></code>, soit en définissant la valeur de l'attribut <code>form</code> avec l'identifiant du formulaire.</p> + +<p>Les éléments <code><button></code> sont beaucoup plus faciles à styliser que les éléments <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>. Vous pouvez ajouter du contenu HTML interne (pensez à <code><i></code>, <code><br></code>, ou même <code><img></code>), et utiliser les pseudo-éléments <a href="/fr/docs/Web/CSS/::after"><code>::after</code></a> et <a href="/fr/docs/Web/CSS/::before"><code>::before</code></a> pour un rendu complexe.</p> + +<p>Si vos boutons ne servent pas à soumettre des données de formulaire à un serveur, assurez-vous de définir leur attribut <code>type</code> à <code>bouton</code>. Sinon, ils tenteront de soumettre des données de formulaire et de charger la réponse (inexistante), détruisant éventuellement l'état actuel du document.</p> -<p>{{EmbedLiveSample('Exemple', 200, 64, '', 'Web/HTML/Element/Button')}}</p> +<h2 id="example">Exemple</h2> -<h2 id="Accessibilité">Accessibilité</h2> +<pre class="brush: html"><button name="button">Cliquez sur moi :)</button></pre> -<h3 id="Boutons_avec_une_icône">Boutons avec une icône</h3> +<p>{{EmbedLiveSample('example', 200, 64)}}</p> -<p>Les boutons qui reposent uniquement sur une icône pour représenter une fonctionnalité n'ont pas de nom accessible. Un nom accessible permet à un outil d'assistance (un lecteur d'écran par exemple) de générer un <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">arbre d'accessibilité</a> correct lors de l'analyse du document. Les outils d'assistance utilisent cet arbre d'accessibilité pour permettre aux utilisateurs de naviguer et d'utiliser le contenu de la page.</p> +<h2 id="accessibility_concerns">Problèmes d'accessibilité</h2> + +<h3 id="icon_buttons">Boutons avec une icône</h3> + +<p>Les boutons qui reposent uniquement sur une icône pour représenter une fonctionnalité n'ont pas de nom accessible. Un nom accessible permet à un outil d'assistance (un lecteur d'écran par exemple) de générer un <a href="/fr/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis">arbre d'accessibilité</a> correct lors de l'analyse du document. Les outils d'assistance utilisent cet arbre d'accessibilité pour permettre aux utilisateurs de naviguer et d'utiliser le contenu de la page.</p> <p>Afin de fournir un nom accessible pour un bouton, on fournira un contenu texte dans l'élément qui décrit, de façon concise, la fonctionnalité offerte par le bouton.</p> -<h4 id="Exemple_2">Exemple</h4> +<h4 id="example_2">Exemple</h4> -<pre class="brush: html notranslate"><button name="favorite" type="button"> - <svg aria-hidden="true" viewBox="0 0 10 10"><path d="<code class="language-html"><span class="tag token"><span class="attr-value token">M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z</span></span></code>"/></svg> - Add to favorites +<pre class="brush: html"><button name="favorite" type="button"> + <svg aria-hidden="true" viewBox="0 0 10 10"> + <path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z"/> + </svg> + Ajouter aux favoris </button> </pre> -<p id="Result_3">Si on souhaite que le texte du bouton ne soit pas visible, on peut le faire de façon accessible grâce à une <a href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link">combinaison de propriétés</a> qui permettent de le masquer visuellement mais qui permet toujours aux technologies d'assistance de l'analyser.</p> +<p>Si on souhaite que le texte du bouton ne soit pas visible, on peut le faire de façon accessible grâce à une <a href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link">combinaison de propriétés</a> qui permettent de le masquer visuellement mais qui permet toujours aux technologies d'assistance de l'analyser.</p> <p>Toutefois, on notera que laisser le texte visible permettra aux personnes qui ne sont pas familières avec l'application de comprendre le rôle du bouton. Cela vaut particulièrement pour les personnes qui utilisent peu la technologie ou dont la culture apporte une autre interprétation aux images utilisées.</p> <ul> - <li><a href="https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/">Qu'est-ce qu'un nom accessible ? <em>The Paciello Group</em> (en anglais)</a></li> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Robust#Guideline_4.1_—_Compatible_Maximize_compatibility_with_current_and_future_user_agents_including_assistive_technologies">Comprendre les règles WCAG 4.1</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html"><em>Understanding Success Criterion 4.1.2 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li> + <li><a href="https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/">Qu'est-ce qu'un nom accessible ? <em>The Paciello Group</em> (en anglais)</a></li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Robust#Guideline_4.1_—_Compatible_Maximize_compatibility_with_current_and_future_user_agents_including_assistive_technologies">Comprendre les règles WCAG 4.1</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html"><em>Understanding Success Criterion 4.1.2 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li> </ul> -<h3 id="Dimensionnement_et_proximité">Dimensionnement et proximité</h3> +<h3 id="size_and_proximity">Dimensionnement et proximité</h3> -<h4 id="Dimensionnement_-_taille">Dimensionnement - taille</h4> +<h4 id="size">Dimensionnement</h4> -<p>Les éléments interactifs tels que les boutons doivent fournir une surface suffisamment grande pour qu'il soit facile de les activer. Cela facilitera la tâche à une variété de personnes : celles qui ont des problèmes moteur, celles qui utilisent des dispositifs de pointage peu précis (doigt ou stylet). La taille interactive minimale recommandée est de 44x44 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels">pixels CSS</a>.</p> +<p>Les éléments interactifs tels que les boutons doivent fournir une surface suffisamment grande pour qu'il soit facile de les activer. Cela facilitera la tâche à une variété de personnes : celles qui ont des problèmes moteurs, celles qui utilisent des dispositifs de pointage peu précis (doigt ou stylet). La taille interactive minimale recommandée est de 44×44 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels">pixels CSS</a>.</p> <ul> - <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Comprendre le critère d'accessibilité 2.5.5 sur la taille des cibles - Comprendre WCAG 2.1 (en anglais)</a></li> - <li><a href="http://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Taille des cibles et critère 2.5.5, billet en anglais de Adrian Roselli</a></li> - <li><a href="https://a11yproject.com/posts/large-touch-targets/">Test rapide : cibles tactiles suffisamment grande - Projet A11Y (billet en anglais)</a></li> + <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Comprendre le critère d'accessibilité 2.5.5 sur la taille des cibles - Comprendre WCAG 2.1 (en anglais)</a></li> + <li><a href="https://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Taille des cibles et critère 2.5.5, billet en anglais d'Adrian Roselli</a></li> + <li><a href="https://a11yproject.com/posts/large-touch-targets/">Test rapide : cibles tactiles suffisamment grande — Projet A11Y (billet en anglais)</a></li> </ul> -<h4 id="Proximité">Proximité</h4> +<h4 id="proximity">Proximité</h4> <p>Lorsque plusieurs contenus interactifs (y compris les boutons) sont placés les uns à côté des autres, il est nécessaire de les espacer suffisamment pour minimiser le risque d'activer le mauvais contenu lors de la navigation.</p> -<p>Un tel espacement peut être obtenu grâce à la propriété CSS {{cssxref("margin")}}.</p> +<p>Un tel espacement peut être obtenu grâce à la propriété CSS <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>.</p> <ul> - <li><a href="https://axesslab.com/hand-tremors/">Les tremblements de la main et le problème du bouton géant - Axess Lab (en anglais)</a></li> + <li><a href="https://axesslab.com/hand-tremors/">Les tremblements de la main et le problème du bouton géant — Axess Lab (en anglais)</a></li> </ul> -<h3 id="Firefox">Firefox</h3> +<h3 id="aria">Informations sur l'état de l'ARIA</h3> + +<p>Pour décrire l'état d'un bouton, le bon attribut ARIA à utiliser est <code>aria-pressed</code> et non <code>aria-checked</code> ou <code>aria-selected</code>. Pour en savoir plus, lisez les informations sur le <a href="/fr/docs/Web/Accessibility/ARIA/Roles/button_role">rôle ARIA de bouton</a>.</p> -<p>Firefox ajoute une bordure en pointillés sur le bouton qui a le focus. Cette bordure est ajoutée via la feuille de style du navigateur et il est possible de la surcharger avec son propre style via <code>button{{cssxref("::-moz-focus-inner")}} { }</code>.</p> +<h3 id="firefox">Firefox</h3> + +<p>Firefox ajoute une bordure en pointillés sur le bouton qui a le focus. Cette bordure est ajoutée via la feuille de style du navigateur et il est possible de la surcharger avec son propre style via <code>button<a href="/fr/docs/Web/CSS/::-moz-focus-inner">::-moz-focus-inner { }</a></code>.</p> <p>Si ce comportement est surchargé, il est nécessaire de vérifier que le changement de focus est clairement perceptible, y compris lorsque la vision ou les conditions d'éclairage réduisent la visibilité du document.</p> <p>Le ratio de contraste est calculé en comparant la luminosité de la couleur du texte et celle de l'arrière-plan. Afin de respecter les <a href="https://www.w3.org/WAI/intro/wcag" rel="noopener">préconisations d'accessibilité sur le Web (WCAG)</a>, un ratio minimal de 4.5:1 est obligatoire pour le contenu textuel normal et un ratio minimal de 3:1 est obligatoire pour grands textes ou les titres. Un <em>grand</em> texte est défini comme un texte qui mesure 18.66px et qui est en gras ou comme un texte qui mesure 24px ou plus.</p> <ul> - <li><a href="https://webaim.org/resources/contrastchecker/">Vérificateur de contraste WebAIM (en anglais)</a></li> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li> - <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 - W3C Understanding WCAG 2.0</a></em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html"> (en anglais)</a></li> + <li><a href="https://webaim.org/resources/contrastchecker/">Vérificateur de contraste WebAIM (en anglais)</a></li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li> + <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 - W3C Understanding WCAG 2.0</a></em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html"> (en anglais)</a></li> </ul> -<h2 id="Résumé_technique">Résumé technique</h2> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a>, listable, étiquettable, soumettable, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_associ.C3.A9_aux_formulaires">contenu associé aux formulaires</a> et <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Contenu autorisé</dfn></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a> mais sans <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Omission de balises</dfn></th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row"><dfn>Parents autorisés</dfn></th> - <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>{{ARIARole("checkbox")}}, {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}.</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLButtonElement")}}</td> - </tr> - <tr> - <th scope="row">Type d'élément</th> - <td>En ligne</td> - </tr> - </tbody> -</table> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'forms.html#the-button-element', '<button>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#the-button-element', '<button>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '<button>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> +<h2 id="specifications">Spécifications</h2> -<p>{{Compat("html.elements.button")}}</p> +<p>{{Specifications}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<ul> - <li>Les autres éléments HTML utilisés pour créer des formulaires : - <ul> - <li>{{HTMLElement("form")}}</li> - <li>{{HTMLElement("datalist")}}</li> - <li>{{HTMLElement("fieldset")}}</li> - <li>{{HTMLElement("input")}}</li> - <li>{{HTMLElement("keygen")}}</li> - <li>{{HTMLElement("label")}}</li> - <li>{{HTMLElement("legend")}}</li> - <li>{{HTMLElement("meter")}}</li> - <li>{{HTMLElement("optgroup")}}</li> - <li>{{HTMLElement("option")}}</li> - <li>{{HTMLElement("output")}}</li> - <li>{{HTMLElement("progress")}}</li> - <li>{{HTMLElement("select")}}</li> - <li>{{HTMLElement("textarea")}}</li> - </ul> - </li> -</ul> +<p>{{Compat}}</p> |