diff options
Diffstat (limited to 'files/fr/web/html/element/dialog/index.html')
| -rw-r--r-- | files/fr/web/html/element/dialog/index.html | 219 |
1 files changed, 105 insertions, 114 deletions
diff --git a/files/fr/web/html/element/dialog/index.html b/files/fr/web/html/element/dialog/index.html index e748648f51..ea1a1effa4 100644 --- a/files/fr/web/html/element/dialog/index.html +++ b/files/fr/web/html/element/dialog/index.html @@ -2,46 +2,94 @@ title: '<dialog> : l''élément de boîte de dialogue' slug: Web/HTML/Element/dialog tags: + - Dialog - Element - - Experimental - HTML + - HTML interactive elements - Reference - Web + - polyfill translation_of: Web/HTML/Element/dialog +browser-compat: html.elements.dialog --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <code><strong><dialog></strong></code> représente une boite de dialogue ou un composant interactif (par exemple un inspecteur ou une fenêtre).</p> +<p class="summary">L'élément HTML <code><strong><dialog></strong></code> représente une boite de dialogue ou un composant interactif (par exemple un inspecteur ou une fenêtre).</p> -<h2 id="Attributes">Attributes</h2> - -<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>. L'attribut <code>tabindex</code> ne doit pas être utilisé sur l'élément <code><dialog></code>.</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/Using_HTML_sections_and_outlines#sectioning_roots"> racine de sectionnement</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Tout élément qui accepte du <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><a href="/fr/docs/Web/Accessibility/ARIA/Roles/dialog_role"><code>dialog</code></a></td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td><a href="https://w3c.github.io/aria/#alertdialog"><code>alertdialog</code></a></td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLDialogElement"><code>HTMLDialogElement</code></a></td> + </tr> + </tbody> + </table> + +<h2 id="attributes">Attributs</h2> + +<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> + +<div class="notecard warning"> + <p>L'attribut <code>tabindex</code> ne doit pas être utilisé sur l'élément <code><dialog></code>.</p> +</div> <dl> - <dt>{{htmlattrdef("open")}}</dt> - <dd>Cet attribut indique que la boîte de dialogue est active et peut être utilisée de façon interactive. Si l'attribut n'est pas renseigné, la boîte de dialogue ne doit pas être présentée à l'utilisateur.</dd> + <dt><code id="attr-open">open</code></dt> + <dd>Cet attribut indique que la boîte de dialogue est active et peut être utilisée de façon interactive. Si l'attribut n'est pas renseigné, la boîte de dialogue ne doit pas être présentée à l'utilisateur.</dd> </dl> -<h2 id="Notes">Notes</h2> +<h2 id="usage_notes">Notes d'utilisation</h2> <ul> - <li>L'élément <code><form></code> peut être intégré dans une boîte de dialogue en spécifiant l'attribut <code><code>method="dialog</code>"</code>. Lorsqu'un formulaire de ce type est envoyé, la boîte de dialogue est fermée avec un attribut {{domxref("HTMLDialogElement.returnValue", "returnValue")}} mis à jour avec la valeur <code>value</code> du bouton d'envoi utilisé.</li> - <li>Le pseudo-élément CSS {{cssxref('::backdrop')}} peut être utilisé pour mettre en forme l'arrière plan d'un élément <code><dialog></code>. On peut par exemple estomper un contenu inaccessible pendant que la boîte de dialogue est active. Cette ombre portée est uniquement dessinée lorsque l'élément <code><dialog></code> est affiché via {{domxref("HTMLDialogElement.showModal()")}}.</li> + <li>Les éléments <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a> peuvent fermer un dialogue s'ils possèdent l'attribut <code>method="dialog"</code>. Lorsqu'un tel formulaire est soumis, le dialogue se ferme avec sa propriété <a href="/fr/docs/Web/API/HTMLDialogElement/returnValue"><code>returnValue</code></a> définie sur la <code>value</code> (valeur) du bouton qui a été utilisé pour soumettre le formulaire.</li> + <li>Le pseudo-élément CSS <a href="/fr/docs/Web/CSS/::backdrop"><code>::backdrop</code></a> peut être utilisé pour créer un style derrière un élément <code><dialog></code> lorsque le dialogue est affiché avec <a href="/fr/docs/Web/API/HTMLDialogElement/showModal"><code>HTMLDialogElement.showModal()</code></a>. Par exemple, pour atténuer le contenu inaccessible derrière la boîte de dialogue modale.</li> </ul> -<h2 id="Exemples">Exemples</h2> +<h2 id="examples">Exemples</h2> + +<h3 id="simple_example">Exemple simple</h3> + +<pre class="brush: html"><dialog open> + <p>Salutations, à tous et à toutes !</p> +</dialog></pre> + +<h3 id="advanced_example">Exemple avancé</h3> -<h3 id="HTML">HTML</h3> +<h4 id="html">HTML</h4> -<pre class="brush: html"><!-- Une boîte de dialogue qui contient un formulaire --> +<pre class="brush: html"><!-- Boîte de dialogue contextuelle simple contenant un formulaire --> <dialog id="favDialog"> <form method="dialog"> <p><label>Animal préféré : <select> <option></option> - <option>Panda roux</option> - <option>Macrotus</option> - <option>Koala</option> + <option>Crevette en saumure</option> + <option>Panda rouge</option> + <option>Singe-araignée</option> </select> </label></p> <menu> @@ -55,112 +103,55 @@ translation_of: Web/HTML/Element/dialog <button id="updateDetails">Mettre à jour les détails</button> </menu> -<output aria-live="polite"></output> -</pre> +<output aria-live="polite"></output></pre> -<h3 id="JavaScript">JavaScript</h3> +<h4 id="javascript">JavaScript</h4> -<pre class="brush: js">(function() { - var updateButton = document.getElementById('updateDetails'); - var favDialog = document.getElementById('favDialog'); - var outputBox = document.getElementsByTagName('output')[0]; - var selectEl = document.getElementsByTagName('select')[0]; - var confirmBtn = document.getElementById('confirmBtn'); +<pre class="brush: js">let updateButton = document.getElementById('updateDetails'); +let favDialog = document.getElementById('favDialog'); +let outputBox = document.querySelector('output'); +let selectEl = document.querySelector('select'); +let confirmBtn = document.getElementById('confirmBtn'); - // Le bouton "mettre à jour les détails" ouvre la boîte de dialogue - updateButton.addEventListener('click', function onOpen() { - if (typeof favDialog.showModal === "function") { - favDialog.showModal(); - } else { - console.error("L'API dialog n'est pas prise en charge par votre navigateur"); - } - }); - // Le champ "animal préféré" définit la valeur pour le bouton submit - selectEl.addEventListener('change', function onSelect(e) { - confirmBtn.value = selectEl.value; - }); - // Le bouton "Confirmer" déclenche l'évènement "close" sur le dialog avec [method="dialog"] - favDialog.addEventListener('close', function onClose() { - outputBox.value = "Vous avez cliqué sur le bouton " + favDialog.returnValue + " !"; - }); -})(); +// Le bouton "Mettre à jour les détails" ouvre le <dialogue> ; modulaire +updateButton.addEventListener('click', function onOpen() { + if (typeof favDialog.showModal === "function") { + favDialog.showModal(); + } else { + console.error("L'API <dialog> n'est pas prise en charge par ce navigateur."); + } +}); +// L'entrée "Animal favori" définit la valeur du bouton d'envoi. +selectEl.addEventListener('change', function onSelect(e) { + confirmBtn.value = selectEl.value; +}); +// Le bouton "Confirmer" du formulaire déclenche la fermeture +// de la boîte de dialogue en raison de [method="dialog"] +favDialog.addEventListener('close', function onClose() { + outputBox.value = favDialog.returnValue + " bouton cliqué - " + (new Date()).toString(); +});</pre> -</pre> +<h4 id="result">Résultat</h3> -<h3 id="Résultat">Résultat</h3> +<p>{{EmbedLiveSample("advanced_example", "", 300)}}</p> -<p>{{EmbedLiveSample("Exemples","400","500")}}</p> +<h2 id="specifications">Spécifications</h2> -<h2 id="Résumé_technique">Résumé technique</h2> +<p>{{Specifications}}</p> -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></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/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement"> racine de sectionnement</a>.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>.</td> - </tr> - <tr> - <th scope="row">Omission de balises</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Parents autorisés</th> - <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>{{ARIARole("alertdialog")}}</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLDialogElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2> - -<p>Cette prothèse peut être utilisée pour fournir un support pour les navigateurs : <a href="https://github.com/GoogleChrome/dialog-polyfill">dialog-polyfill</a>.</p> - -<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-dialog-element', '<dialog>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5.2', 'interactive-elements.html#the-dialog-element', '<dialog>')}}</td> - <td>{{Spec2('HTML5.2')}}</td> - <td>Définition initiale.</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> - -<p>{{Compat("html.elements.dialog")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat}}</p> + +<h2 id="Polyfill">Prothèse d'émulation (polyfill)</h2> + +<p>Incluez ce polyfill pour fournir un support aux navigateurs sans élément <code><dialog></code> : <a href="https://github.com/GoogleChrome/dialog-polyfill">dialog-polyfill</a>.</p> + +<h2 id="See_also">Voir aussi</h2> <ul> - <li>L'évènement {{event("close")}}</li> - <li>L'évènement {{event("cancel")}}</li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Guide sur les formulaires HTML</a></li> - <li>Le pseudo-élément {{cssxref("::backdrop")}}</li> + <li>L'évènement <a href="/fr/docs/Web/Reference/HTMLDialogElement/close_event">close</a></li> + <li>L'évènement <a href="/fr/docs/Web/Reference/HTMLDialogElement/cancel_event">cancel</a></li> + <li><a href="/fr/docs/Learn/Forms">Guide sur les formulaires HTML</a></li> + <li>Le pseudo-élément <a href="/fr/docs/Web/CSS/::backdrop"><code>::backdrop</code></a></li> </ul> |