diff options
Diffstat (limited to 'files/fr/web/html/element')
164 files changed, 31068 insertions, 0 deletions
diff --git a/files/fr/web/html/element/a/index.html b/files/fr/web/html/element/a/index.html new file mode 100644 index 0000000000..e9ea38803c --- /dev/null +++ b/files/fr/web/html/element/a/index.html @@ -0,0 +1,333 @@ +--- +title: '<a> : l''élément d''ancre' +slug: Web/HTML/Element/a +tags: + - Contenu + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/a +--- +<div>{{HTMLRef}}</div> + +<p>L'élément <strong><code><a></code></strong> (pour ancre ou <em>anchor</em> en anglais) définit un hyperlien vers un autre endroit de la même page ou vers une autre page sur le Web.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/a.html")}}</div> + +<div 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> !</div> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}</dt> + <dd>Cet attribut indique au navigateur de télécharger l'objet vers lequel pointe l'URL plutôt que d'y diriger l'utilisateur. Cela ouvre une invite pour enregistrer la cible du lien comme un fichier local. Si l'attribut a une valeur, le navigateur doit l'interpréter comme le nom de fichier par défaut pour l'invite qui s'ouvre (l'utilisateur pourra bien entendu modifier le nom de fichier avant de cliquer sur « Enregistrer »). Il n'y a aucune limitation sur les valeurs autorisées, mais il faut se souvenir ici que la plupart des systèmes de fichiers ont des limitations concernant la ponctuation dans les noms de fichier, et que les navigateurs procéderont sûrement à des ajustements en conséquence (par exemple, les barres obliques et barres obliques inversées seront sans doute converties en tirets bas). + <div class="note"> + <p><strong>Note :</strong></p> + + <ul> + <li>Cet attribut ne fonctionne que pour les URL partageant <a href="fr/docs/Web/Security/Same_origin_policy_for_JavaScript">la même origine</a> mais jamais pour les URI utilisant le schéma <code>file:</code>.</li> + <li>Bien que les URL HTTPS doivent provenir de la même origine, les URL <a href="/fr/docs/Web/API/URL/createObjectURL"><code>blob:</code></a>, <code>data:</code> et <code>filesystem:</code> peuvent être utilisées afin de simplifier le téléchargement de contenus générés par un programme JavaScript (ex. : une image générée automatiquement).</li> + <li>Si l'en-tête HTTP {{HTTPHeader("Content-Disposition")}} est présent et fournit un nom de fichier différent que celui fourni par l'attribut alors ce sera l'en-tête HTTP qui aura la priorité sur l'attribut.</li> + <li>Si l'attribut est présent et que <code>Content-Disposition:</code> vaut <code>inline</code>, Firefox donnera la priorité à l'en-tête, Chrome donnera la priorité à l'attribut.</li> + <li>Cet attribut est uniquement respecté pour les liens des ressources de la même origine.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("href")}}</dt> + <dd>L'attribut <code>href</code> indique la cible du lien sous la forme d'une URL ou d'un fragment d'URL. Un fragment d'URL est un nom précédé par un dièse (#), qui indique une cible interne au document (un <a href="/fr/docs/Web/HTML/Attributs_universels/id">ID</a>). Les URL ne se limitent pas au documents web sur HTTP. Les URL peuvent utiliser n'importe quel protocole supporté par le navigateur. Par exemple, <code>file</code>, <code>ftp</code> et <code>mailto</code> fonctionnent avec la plupart des agents-utilisateur. + <div class="note"> + <p><strong>Note :</strong> Le fragment spécial <code>href="#top"</code> ou le fragment vide <code>href="#"</code> peuvent être utilisés pour créer un lien de retour vers le haut de la page ; par exemple <code><a href="#top">Retourner en haut</a></code>. <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#scroll-to-fragid">Ce comportement est défini par HTML5</a>.</p> + </div> + </dd> + <dt>{{htmlattrdef("hreflang")}}</dt> + <dd>Cet attribut indique la langue de la ressource liée. Il est purement indicatif. Les valeurs permises pour HTML5 sont définies par <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a> et pour HTML 4 par la <a class="external" href="https://www.ietf.org/rfc/rfc1766.txt">RFC1766</a>. Cet attribut ne doit être utilisé que si l'attribut {{htmlattrxref("href", "a")}} est présent.</dd> + <dt>{{htmlattrdef("ping")}}</dt> + <dd>Contient une liste d'URL séparées par des espaces vers lesquelles sont envoyées des requêtes {{HTTPMethod("POST")}} avec le corps <code>PING</code> lorsque l'utilisateur suit le lien. Cet attribut est généralement utilisé pour tracer un utilisateur.</dd> + <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> + <dd>Une chaîne de caractères qui indique le référent à utiliser lors de la récupération de la ressource : + <ul> + <li><code>'no-referrer'</code> indique que l'en-tête <code>Referer</code> ne sera pas envoyé.</li> + <li><code>'no-referrer-when-downgrade'</code> indique que l'en-tête <code>Referer</code> ne sera pas envoyé lorsque l'utilisateur navigue depuis une origine sans TLS/HTTPS. C'est le comportement par défaut de l'agent utilisateur si aucune autre politique n'est spécifiée.</li> + <li><code>'origin'</code> indique que le référent sera l'origine de la page (ce qui correspond au schéma utilisé, à l'hôte et au port).</li> + <li><code>'origin-when-cross-origin'</code> indique que lorsqu'on navigue sur d'autres origines, seule l'origine du document sera envoyée. Lorsqu'on navigue sur la même origine, le chemin de la ressource sera inclus dans le référent.</li> + <li><code>'strict-origin-when-cross-origin'</code> fonctionne comme <code>origin-when-cross-origin</code> mais les en-têtes d'origine sont envoyés via HTTPS plutôt que par HTTP.</li> + <li><code>'unsafe-url'</code> indique que le référent envoyé inclura l'origine et le chemin (mais pas le fragment, le mot de passe ou le nom d'utilisateur). Ce cas n'est pas considéré comme sûr car il peut laisser fuiter des origines et des chemins de ressources protégées par TLS vers des origines non-sécurisées.</li> + </ul> + </dd> + <dt>{{htmlattrdef("rel")}}</dt> + <dd>Cet attribut indique la relation entre la cible du lien et l'objet faisant le lien. La valeur est une liste de <a href="/fr/docs/Web/HTML/Link_types">types de liens</a> séparés par des espaces.</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd>Cet attribut indique où afficher la ressource liée. Il s'agit du nom, ou du mot-clé, d'un <em>contexte de navigation</em> (par exemple, un onglet, une fenêtre, ou une {{HTMLElement("iframe")}}). Les mots-clés suivants ont un sens particulier : + <ul> + <li><code>_self</code> : charge la réponse dans le contexte de navigation courant. Il s'agit de la valeur par défaut quand l'attribut n'est pas renseigné.</li> + <li><code>_blank</code> : charge la réponse dans un nouveau contexte de navigation. + <ul> + <li>Ajouter un lien vers une autre page en utilisant <code>target="_blank"</code> exécutera la page dans le même processus que la page courante. Si la nouvelle page consomme de nombreuses ressources, les performances de la page courante pourront en pâtir. Pour éviter ce problème, on pourra utiliser <code>rel="noopener"</code>.</li> + </ul> + </li> + <li><code>_parent</code> : charge la réponse dans le {{HTMLElement("frameset")}} HTML4 parent de la frame courante ou dans le contexte de navigation HTML5 parent relativement au contexte courant). S'il n'y a pas de parent, l'option se comporte de la même façon que <code>_self</code>.</li> + <li><code>_top</code> : En HTML4 : charge la réponse dans la fenêtre originale, annulant toutes les autres frames. En HTML5 : charge la réponse dans le contexte de navigation de plus haut niveau (c'est à dire, le contexte de navigation parent par rapport à l'actuel, et qui n'a lui-même aucun parent). S'il n'y a pas de parent, l'option se comporte de la même façon que <code>_self</code>.</li> + </ul> + + <p>Lorsque <code>target</code> est utilisé, on pourra ajouter <code>rel="noopener noreferrer"</code> afin d'éviter la fuite de données via l'API <code><a href="/fr/docs/Web/API/Window/opener">Window.opener</a></code>.</p> + </dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>Cet attribut indique le type de média de la cible du lien, sous la forme d'un type MIME. Généralement, il s'agit d'une information purement indicative.</dd> +</dl> + +<h3 id="Attributs_obsolètes">Attributs obsolètes</h3> + +<dl> + <dt>{{htmlattrdef("charset")}} {{Obsolete_Inline("HTML5")}}</dt> + <dd>Cet attribut définit le jeu de caractères de la ressource liée. La valeur est une liste de jeux de caractères (défini dans <a class="external" href="https://tools.ietf.org/html/rfc2045">RFC 2045</a>) séparés par des espaces ou des virgules. La valeur par défaut est ISO-8859-1. + <div class="note"> + <p><strong>Note d'utilisation : </strong>Cet attribut est obsolète en HTML5, et <strong>ne doit plus être utilisé</strong> par les auteurs. Pour obtenir le même effet, utiliser l'entête HTTP Content-Type sur la ressource liée.</p> + </div> + </dd> + <dt>{{htmlattrdef("coords")}} {{HTMLVersionInline(4)}} seulement, {{Obsolete_Inline("HTML5")}}</dt> + <dd>Pour utiliser avec des formes géométriques. Cet attribut utilise une liste de nombres séparés par des virgules, définissant les coordonnées de l'objet sur la page.</dd> + <dt>{{htmlattrdef("name")}} {{HTMLVersionInline(4)}} seulement, {{Obsolete_Inline("HTML5")}}</dt> + <dd>Cet attribut est utilisé pour définir une ancre cible au sein de la page. La valeur de <code><strong>name</strong></code> est similaire à la valeur de l'attribut global <code><strong>id</strong></code>, et doit être un identifiant alphanumérique unique au document. Sous la spécification HTML 4.01, <code><strong>id</strong></code> et <code><strong>name</strong></code> peuvent être tous les deux utilisés sur un élément <code><a></code> s'ils ont des valeurs identiques. + <div class="note"> + <p><strong>Note d'utilisation </strong><strong>:</strong> Cet attribut est obsolète en HTML5, il faut utiliser l'<a href="/fr/docs/Web/HTML/Attributs_globaux#id">attribut global <strong>id</strong></a> à la place.</p> + </div> + </dd> + <dt>{{htmlattrdef("rev")}} {{HTMLVersionInline(4)}} seulement, {{Obsolete_Inline("HTML5")}}</dt> + <dd>L'attribut indique un lien inversé : la relation inverse de l'attribut <strong><code>rel</code></strong>. Il est utile pour indiquer l'origine d'un objet, tel que l'auteur d'un document. + <div class="note"> + <p><strong>Note </strong><strong>:</strong> La spécification actuelle de HTML 5.2 du W3C n'indique plus l'attribut <code>rev</code> comme obsolète. En revanche, la spécification du WHATWG le considère toujours comme obsolète. Tant que cette incohérence n'est pas résolue, mieux vaut considérer cet attribut comme obsolète.</p> + </div> + </dd> + <dt>{{htmlattrdef("shape")}} {{HTMLVersionInline(4)}} seulement, {{Obsolete_Inline("HTML5")}}</dt> + <dd>Cet attribut est utilisé pour définir une zone cliquable pour un lien associé à une image, pour créer une image map. Les valeurs pour cet attribut sont <code>circle</code>, <code>default</code>, <code>polygon</code>, et <code>rect</code>. Le format de l'attribut <code>coords</code> dépend de la valeur de <code>shape</code>. Pour <code>circle</code>, la valeur est <code>x,y,r</code> où <code>x</code> et <code>y</code> sont les coordonnées en pixel pour le centre du cercle et <code>r</code> est le rayon du cercle en pixel. Pour <code>rect</code>, l'attribut <code>coords</code> doit être <code>x,y,w,h</code>. Les valeurs <code>x,y</code> définissent le coin supérieur gauche du rectangle, pendant <code>w</code> et <code>h</code> définissent respectivement la largeur et la hauteur. Une valeur <code>polygon</code> pour <strong>shape</strong> nécessite les valeurs <code>x1,y1,x2,y2,...</code> pour <code>coords</code>. Chaque paire de <code>x,y</code> définissent un point du polygone, avec les points successifs joints par des lignes droites, et le dernier point joint au premier. La valeur <code>default</code> pour <code>shape</code> nécessite que la totalité de la zone, habituellement une image, soit utilisée. + <div class="note"><strong>Note :</strong> Il est préférable d'utiliser l'attribut {{htmlattrxref("usemap","img")}} de l'élément {{HTMLElement("img")}} et l'élément {{HTMLElement("map")}} associé, pour définir des zones d'actions, à la place de l'attribut <code>shape</code>.</div> + </dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Hyperlien_vers_une_ressource_externe">Hyperlien vers une ressource externe</h3> + +<pre class="brush: html notranslate"><a href="https://www.mozilla.com/"> +Lien externe +</a></pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Hyperlien_vers_une_ressource_externe")}}</p> + +<h3 id="Créer_une_image_cliquable">Créer une image cliquable</h3> + +<p>Ce petit exemple utilise une image qui redirige vers la page d'accueil de MDN. La page d'accueil s'ouvrira dans un nouveau contexte de navigation, c'est une nouvelle page ou un nouvel onglet.</p> + +<div class="blockIndicator note"> +<p>Dans le cas d'une image cliquable, le texte alternatif doit contenir l'objet du lien, tel qu'indiqué dans <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-content">l'exemple 9 des WCAG 1.1.1 relatives aux alternatives textuelles</a>.</p> +</div> + +<pre class="brush: html notranslate"><a href="https://developer.mozilla.org/fr/" target="_blank"> + <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="Documentation du web - MDN" /> +</a></pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("Exemple_Cr%C3%A9er_une_image_cliquable", "320", "64")}}</p> + +<h3 id="Créer_un_lien_vers_un_numéro_de_téléphone">Créer un lien vers un numéro de téléphone</h3> + +<p>Lorsqu'on utilise des appareils connectés à des téléphones, il peut être pratique d'utiliser des liens avec le schéma <code>tel:</code> :</p> + +<pre class="brush: html notranslate"><a href="tel:+615701564">+6 15 70 15 64</a> +</pre> + +<p>Pour plus de détails sur ce schéma, se référer à la RFC {{RFC(3966)}}.</p> + +<h3 id="Créer_un_lien_pour_écrire_un_e-mail">Créer un lien pour écrire un e-mail</h3> + +<p>Il est courant de créer des boutons ou des hyperliens qui vont ouvrir l'application de messagerie de l'utilisateur pour lui permettre d'envoyer un nouveau message. Cela est possible en utilisant un lien <code>mailto</code>. Voici un exemple simple:</p> + +<pre class="brush: html notranslate"><a href="mailto:personne@mozilla.org">Envoyer un courriel à personne</a></pre> + +<p>Cela produit comme résultat, un lien qui ressemble à ceci: <a href="mailto:nowhere@mozilla.org">Envoyer un courriel à personne</a>.<br> + Pour plus de détails sur le schéma URL de <code>mailto</code>, comme comment inclure un sujet, un corps de texte, ou tout autre contenu prédéterminé, voir les <a href="/fr/docs/Web/Guide/HTML/Email_links">liens Emails</a> ou {{RFC(6068)}}.</p> + +<h3 id="Utiliser_lattribut_download_pour_sauvegarder_un_canvas_en_PNG">Utiliser l'attribut <code>download</code> pour sauvegarder un canvas en PNG</h3> + +<p>Si on souhaite permettre à un utilisateur de télécharger un canvas HTML comme une image, on peut créer un lien avec un attribut download et lui associer les données liées au {{HTMLElement('canvas')}} pour construire une URL de fichier.</p> + +<pre class="brush: js notranslate">var link = document.createElement('a'); +link.textContent = 'Télécharger une image'; +link.addEventListener('click', function(ev) { + link.href = canvas.toDataURL(); + link.download = "maToile.png"; +}, false); +document.body.appendChild(link);</pre> + +<p>Vous pouvez voir le résultat de ce code ici <a href="https://jsfiddle.net/codepo8/V6ufG/2/">https://jsfiddle.net/codepo8/V6ufG/2/</a></p> + +<h2 id="Notes">Notes</h2> + +<ul> + <li>Les raccourcis clavier suivants sont réservés par deux des principaux navigateurs, et ne doivent pas être utilisés comme valeur pour <code>accesskey</code> : a, c, e, f, g, h, v, flèche droite et flèche gauche.</li> +</ul> + +<h2 id="Sécurité_et_vie_privée">Sécurité et vie privée</h2> + +<p>Bien que l'élément <code><a></code> soit la plupart du temps utilisé innocemment, les informations qu'il peut transporter peuvent avoir des effets indésirables sur la sécurité et sur la vie privée des utilisateurs. Pour plus d'informations, voir <a href="/fr/docs/Web/Security/Referer_header:_privacy_and_security_concerns">cet article sur l'en-tête <code>Referer</code> et les problématiques qu'il soulève</a>.</p> + +<p>L'utilisation de <code>target="_blank"</code> sans <code>rel="noreferrer"</code> et sans <code>rel="noopener"</code> peut rendre un site vulnérable à certaines formes d'attaques utilisant l'API <code>window.opener</code> (voir <a href="https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/">ce billet</a>).</p> + +<h2 id="Accessibilité">Accessibilité</h2> + +<h3 id="Évènements_onclick">Évènements <code>onclick</code></h3> + +<p>Les ancres sont souvent détournées avec l'évènement <code>onclick</code> afin de créer des pseudo-boutons avec l'attribut <code>href</code> qui vaut <code>"#"</code> ou <code>"javascript:void(0)"</code> pour empêcher le rafraîchissement de la page.</p> + +<p>Ces valeurs produisent des résultats inadéquats lorsqu'on copie/déplace des liens, qu'on ouvre des liens dans de nouveaux onglets ou fenêtres, qu'on ajoute des marque-pages ou lorsque le JavaScript est encore en train d'être téléchargé. De plus, la sémantique exposée par le document, utilisée par les outils d'assistance, est incorrecte.</p> + +<p>Dans ces cas, on privilégiera plutôt l'utilisation d'un bouton {{HTMLElement("button")}}. De façon générale, une ancre ne doit être utilisée que pour naviguer vers une URL correcte.</p> + +<h3 id="Liens_externes_liens_vers_des_ressources_non-HTML">Liens externes, liens vers des ressources non-HTML</h3> + +<p>Les liens qui ouvrent un nouvel onglet ou une nouvelle fenêtre grâce à <code>target="_blank"</code>, ainsi que le liens qui ouvrent des fichiers devraient fournir une indication sur ce qui se produira lorsqu'on cliquera sur ces liens.</p> + +<p>Les personnes qui utilisent des outils d'assistance à la navigation comme des lecteurs d'écran et/ou qui souffrent de troubles de la vision, cognitifs peuvent être confuses lorsqu'un nouvel onglet, fichier ou une nouvelle fenêtre s'ouvre de façon inattendue. Les anciennes versions des lecteurs d'écran peuvent également ne pas annoncer ce comportement.</p> + +<h4 id="Lien_vers_un_nouvel_onglet_ou_une_nouvelle_fenêtre">Lien vers un nouvel onglet ou une nouvelle fenêtre</h4> + +<pre class="brush: html notranslate"><a target="_blank" href="https://www.wikipedia.org/">Wikipédia (s'ouvre dans une nouvelle fenêtre)</a> +</pre> + +<h4 id="Lien_vers_une_ressource_non-HTML">Lien vers une ressource non-HTML</h4> + +<pre class="brush: html notranslate"><a target="_blank" href="2017-rapport-annuel.ppt">Rapport annuel 2017 (PowerPoint)</a> +</pre> + +<p>Si une icône est utilisée en lieu et place du texte pour indiquer ce comportement, on s'assurera qu'elle contient bien <a href="/fr/docs/Web/HTML/Element/Img#attr-alt">une description alternative</a>.</p> + +<ul> + <li><a href="https://webaim.org/techniques/hypertext/hypertext_links">WebAIM : Liens et hypertexte (en anglais)</a></li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">Comprendre les règles WCAG 3.2</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G200.html">G200 : Ouvrir de nouvelles fenêtres et onglets à partir d'un lien lorsque c'est strictement nécessaire - WCAG 2.0 (en anglais)</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G201.html">G201 : Fournir un avertissement aux utilisateurs lorsqu'ils ouvrent une nouvelle fenêtre WCAG 2.0 (en anglais)</a></li> +</ul> + +<h3 id="Skip_links_-_liens_pour_laccès_rapide_au_contenu"><em>Skip links</em> - liens pour l'accès rapide au contenu</h3> + +<p>Un <em>skip link</em> (aussi appelé <em>skipnav</em> en anglais) est un élément <code>a</code> qui est placé le plus près possible de l'élément {{HTMLElement("body")}} et qui renvoie au début du contenu principal de la page.</p> + +<p>Ce lien permet alors de passer plus facilement le contenu qui se répète sur l'ensemble des pages (l'en-tête et la barre de navigation par exemple).</p> + +<p>Les <em>skip links</em> sont particulièrement utiles pour les personnes qui naviguent à l'aide d'outils d'assistance (commande vocale, stylets buccal ou frontal) pour lesquels devoir passer par des liens répétés peut freiner la lecture du document.</p> + +<ul> + <li><em><a href="https://webaim.org/techniques/skipnav/">WebAIM: "Skip Navigation" Links</a></em><a href="https://webaim.org/techniques/skipnav/"> (en anglais)</a></li> + <li><a href="https://a11yproject.com/posts/2013-05-11-skip-nav-links/">Comment utiliser les <em>skip links</em> - <em>The A11Y Project</em> (en anglais)</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">Comprendre les règles WCAG 2.4 (en anglais)</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html"><em>Understanding Success Criterion 2.4.1 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li> +</ul> + +<h3 id="Dimensionnement_et_proximité">Dimensionnement et proximité</h3> + +<h4 id="Dimensionnement_-_taille">Dimensionnement - taille</h4> + +<p>Les éléments interactifs tels que les liens 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> + +<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 (an anglais)</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> + +<p>Lorsque plusieurs contenus interactifs (y compris les ancres) 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> + +<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> +</ul> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a>, contenu tangible.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Modèle_de_contenu_transparent">Contenu transparent</a> qui contient du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a> (mais pas de <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a>) ou du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</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_phras.C3.A9">contenu phrasé</a> ou tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>. (un élément <code><a></code> ne peut pas avoir d'élément parent qui soit également un élément <code><a></code>).</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>{{ARIARole("button")}}, {{ARIARole("checkbox")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLAnchorElement")}}</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('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Ajout de l'attribut <code>referrer</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-a-element', '<a>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-a-element', '<a>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.2', '<a>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<div class="blockIndicator note"> +<p><strong>Note :</strong> HTML 3.2. définit uniquement les attributs <code>name</code>, <code>href</code>, <code>rel</code>, <code>rev</code> et <code>title</code>.</p> +</div> + +<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.a")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments ayant une sémantique textuelle : {{HTMLElement("abbr")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}</li> +</ul> diff --git a/files/fr/web/html/element/abbr/index.html b/files/fr/web/html/element/abbr/index.html new file mode 100644 index 0000000000..920bcc3a7e --- /dev/null +++ b/files/fr/web/html/element/abbr/index.html @@ -0,0 +1,203 @@ +--- +title: <abbr> +slug: Web/HTML/Element/abbr +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/abbr +--- +<div>{{HTMLRef}}</div> + +<p>L'élément <code><strong><abbr></strong></code> représente une abréviation ou un acronyme et permet, de façon optionnelle, d'en fournir une description complète. S'il est présent, l'attribut {{htmlattrxref("title")}} doit contenir cette même description complète et rien d'autre.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/abbr.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> + +<div class="note"> +<p><strong>Note :</strong> Voir <a href="/fr/Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte#Abbreviations">cet article introductif</a> pour la mise en forme du texte en général.</p> +</div> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément n'a pas d'autres attributs que les <a href="/fr/docs/Web/HTML/Attributs_universels" rel="internal">attributs universels</a>.</p> + +<p>On notera que l'attribut {{htmlattrdef("title")}} possède ici une sémantique spécifique et il représente la description complète de l'abréviation. Souvent, mais pas nécessairement, il s'affiche comme une info-bulle au survol de la souris.</p> + +<p>Chaque élément <code><abbr></code> est indépendant, rattacher un titre à l'un ne l'associe pas aux abrévations identiques qui suivent.</p> + +<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> + +<h3 id="Cas_d'usage_généraux">Cas d'usage généraux</h3> + +<p>Il n'est pas obligatoire d'utiliser <code><abbr></code> pour toutes les abrévations d'un document mais voici quelques cas où cet élément s'avère pertinent :</p> + +<ul> + <li>Lorsqu'une abrévation est utilisée et qu'on souhaite fournir une définition ou une explication en dehors du contenu du document, on utilisera <code><abbr></code> avec un attribut {{htmlattrxref("title")}} adéquat.</li> + <li>Lorsqu'une abrévation fait partie d'un jargon ou d'un vocabulaire qui risque d'être inconnu du lecteur, un élément <code><abbr></code> avec un attribut <code>title</code> explicatif pourra être utilisé.</li> + <li>Lorsqu'on souhaite bénéficier de la sémantique liée à l'abrévation (par exemple pour les manipuler en script ou les mettre en forme avec des feuilles de style), on pourra utiliser <code><abbr></code> pour identifier ces contenus.</li> + <li>Lorsqu'on souhaite définir des termes qui sont des abrévations, on pourra utiliser une combinaison de <code><abbr></code> et de {{HTMLElement("dfn")}}. Voir ci-après pour un exemple.</li> +</ul> + +<h3 id="Grammaire">Grammaire</h3> + +<p>Lorsqu'il est présent, le nombre (grammatical) du texte de l'attribut <code><strong>title</strong></code> devrait correspondre à celui du contenu de l'élément <code>abbr</code>. C'est également le cas dans les langues avec plus de deux genres grammaticaux (par exemple, l'Arabe, en plus des catégories pour le singulier et le pluriel, possède également une catégorie double).</p> + +<h2 id="Mise_en_forme_par_défaut">Mise en forme par défaut</h2> + +<p>Le but de cet élément est purement explicatif. Tous les navigateurs l'affichent en ligne ({{cssxref('display')}}<code>: inline</code>) par défaut mais le reste de la mise en forme par défaut peut varier d'un navigateur à l'autre :</p> + +<ul> + <li>Certains navigateurs tels qu'Internet Explore lui appliquent la même mise en forme qu'à un élément {{HTMLElement("span")}}.</li> + <li>Opera, Firefox et d'autres navigateurs souligne l'abréviation avec une ligne de points.</li> + <li>D'autres navigateurs ne soulignent pas le texte mais l'écrivent en petites majuscules. Pour éviter ce comportement, on pourra utiliser la règle CSS {{cssxref("font-variant")}}<code>: none</code>.</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Baliser_une_abrévation_pour_marquer_la_sémantique">Baliser une abrévation pour marquer la sémantique</h3> + +<p>On peut baliser une abrévation sans fournir de description ou de définition, il suffit d'utiliser <code><abbr></code> sans attribut.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>Nous allons voir le <abbr>HTML</abbr> qui sert à construire des pages web.</p></pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Baliser_une_abréviation_pour_marquer_la_sémantique")}}</p> + +<h3 id="Mettre_en_forme_des_abréviations">Mettre en forme des abréviations</h3> + +<p>CSS peut être utilisé pour appliquer une mise en forme particulière sur les abréviations.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p>Avec <abbr>CSS</abbr>, on peut mettre en forme les éléments.</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">abbr { + font-variant: all-small-caps; +}</pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("Mettre_en_forme_des_abréviations")}}</p> + +<h3 id="Fournir_une_description">Fournir une description</h3> + +<p>On peut ajouter un attribut {{htmlattrxref("title")}} afin de fournir une description de l'abréviation ou de l'acronyme.</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><p>Et là je lui ai répondu <abbr title="Laugh Out Loud">LOL</abbr>.</p></pre> + +<h4 id="Résultat_3">Résultat</h4> + +<p>{{EmbedLiveSample("Fournir_une_description")}}</p> + +<h3 id="Définir_une_abréviation">Définir une abréviation</h3> + +<p>Il est possible d'utiliser l'élément <code><abbr></code> avec {{HTMLElement("dfn")}} afin de formellement définir une abréviation.</p> + +<h4 id="HTML_4">HTML</h4> + +<pre class="brush: html"><p><dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr> +</dfn> est un langage de balise qui permet de créer la structure et d'organiser +la sémantique d'une page web.</p> + +<p>Une <dfn id="spec">Spécification</dfn> +(<abbr title="Specification">spec</abbr>) est un document qui décrit, de façon +détaillée comme une technologie ou une API fonctionne et comment l'utiliser.</p></pre> + +<h4 id="Résultat_4">Résultat</h4> + +<p>{{EmbedLiveSample("Définir_une_abréviation", 600, 120)}}</p> + +<h2 id="Accessibilité">Accessibilité</h2> + +<p>C'est une bonne pratique que d'épeler l'acronyme ou l'abréviation lorsqu'elle est utilisée pour la première fois. Cela permet au lecteur de mieux comprendre le terme, notamment si celui-ci est technique ou appartient à un jargon spécifique.</p> + +<h4 id="Exemple">Exemple</h4> + +<pre class="brush: html"><p>JavaScript Object Notation (<abbr>JSON</abbr>) est un format léger d'échange de données.</p> +</pre> + +<p>Cela peut servir aux personnes qui découvrent ces concepts pour la première fois ou pour les personnes souffrant de troubles cognitifs.</p> + +<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_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>.</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>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-abbr-element', '<abbr>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.abbr")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/Learn/HTML/Element/abbr">Utiliser l'élément <code><abbr></code></a></li> + <li>Les autres éléments ayant une sémantique textuelle : {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> + <li>L'élément obsolète {{HTMLElement("acronym")}} dont la sémantique a été « fusionnée » dans <code><abbr></code></li> +</ul> diff --git a/files/fr/web/html/element/acronym/index.html b/files/fr/web/html/element/acronym/index.html new file mode 100644 index 0000000000..cd1d71fa0a --- /dev/null +++ b/files/fr/web/html/element/acronym/index.html @@ -0,0 +1,77 @@ +--- +title: <acronym> +slug: Web/HTML/Element/acronym +tags: + - Element + - HTML + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/acronym +--- +<div>{{obsolete_header}}{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><acronym></code></strong>, pour les acronymes, permet aux auteurs de pages d'indiquer une suite de caractères composant un acronyme ou l'abréviation d'un mot.</p> + +<div class="note"><strong>Note d'utilisation : </strong>Cet élément n'existe plus en HTML5 et ne devrait plus être utilisé. <strong>Les développeurs web devraient utiliser l'élément {{HTMLElement("abbr")}} à la place.</strong></div> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément n'a pas d'autres attributs que les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>, communs à tous les éléments.</p> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Cet élément implémente l'interface {{domxref('HTMLElement')}}.</p> + +<div class="note"><strong>Note d'implémentation : </strong>Jusqu'à Gecko 1.9.2 (inclus), Firefox implémente l'interface {{domxref('HTMLSpanElement')}} pour cet élément.</div> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush:html"><p> + Le <acronym title="World Wide Web" lang="en">WWW</acronym> + n'est qu'une facette d'Internet. +</p> +</pre> + +<h2 id="Style_par_défaut">Style par défaut</h2> + +<p>Bien que le but de cette balise ne soit simplement qu'un avantage pratique pour l'auteur, son style par défaut varie selon les navigateurs :</p> + +<ul> + <li>Certains navigateurs comme Internet Explorer lui attribuent le même style qu'un élément {{HTMLElement("span")}}.</li> + <li>Opera, Firefox, et quelques autres ajoutent une ligne pointillée sous le contenu de l'élément.</li> + <li>Quelques navigateurs ajoutent une ligne pointillée en dessous et mettent le contenu en petites majuscules. Pour éviter ce comportement, il est possible d'ajouter {{cssxref('font-variant')}}<code>: none</code> à la feuille de style CSS.</li> +</ul> + +<p>Il est donc fortement recommandé que les développeurs web ne s'attendent pas à un comportement uniforme concernant ce style par défaut.</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('HTML4.01', 'struct/text.html#edef-ACRONYM', '<acronym>')}}</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> + +<p>{{Compat("html.elements.acronym")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'élément HTML {{HTMLElement("abbr")}}</li> +</ul> diff --git a/files/fr/web/html/element/address/index.html b/files/fr/web/html/element/address/index.html new file mode 100644 index 0000000000..2ac2eaa488 --- /dev/null +++ b/files/fr/web/html/element/address/index.html @@ -0,0 +1,127 @@ +--- +title: '<address> : l''élément d''adresse de contact' +slug: Web/HTML/Element/address +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/address +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><address></code></strong> indique des informations de contact pour une personne, un groupe de personnes ou une organisation.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/address.html", "tabbed-standard")}}</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> + +<p>L'information de contact fournie via cet élément peut prendre n'importe quelle forme pertinente : ce peut être une adresse physique, une URL, une adresse électronique, un numéro de téléphone, des coordonnées géographiques, etc. Ces informations devraient contenir le nom de la personne, du groupe de personne ou de l'organisation à laquelle le contact fait référence.</p> + +<p>Cet élément peut être employé dans un élément {{HTMLElement("article")}} ou faire référence à l'ancêtre {{HTMLElement("body")}} ; dans ce dernier cas, cela s'applique au document entier.</p> + + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément n'a pas d'autres attributs que les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>, communs à tous les éléments.</p> + +<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> + +<ul> + <li>Pour représenter une adresse arbitraire, qui n'est pas relative à l'information de contact, on utilisera l'élément {{HTMLElement("p")}} plutôt que l'élément <code><address></code>.</li> + <li>Cet élément ne doit pas contenir plus d'informations que l'information de contact, par exemple une date de publication (qui appartiendrait à l'élément {{HTMLElement("time")}}).</li> + <li>Typiquement un élément <code><address></code> peut être placé dans l'élément {{HTMLElement("footer")}} de la section courante, s'il y en a une.</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><address> + Vous pouvez contacter l'auteur à l'adresse <a href="http://www.undomaine.com/contact">www.undomaine.com</a>.<br> + Si vous relevez quelques bogues que ce soient, merci de contacter <a href="mailto:webmaster@somedomain.com">le webmaster</a>.<br> + Vous pouvez aussi venir nous voir :<br> + Mozilla Foundation<br> + 1981 Landings Drive<br> + Building K<br> + Mountain View, CA 94043-0801<br> + USA +</address> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemple")}}</p> + +<p>Bien que le rendu par défaut du texte de l'élément <code><address></code> utilise le même style par défaut que les éléments {{HTMLElement("i")}} ou {{HTMLElement("em")}}, il est plus approprié d'utiliser cet élément lorsque l'on traite d'informations de contact, étant donné qu'il apporte des informations sémantiques supplémentaires.</p> +<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_tangible">contenu tangible</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>, mais sans élément <code><address></code> inclus, sans contenu de titre ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}), sans contenu de section ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}), et sans {{HTMLElement("header")}} ou élément {{HTMLElement("footer")}}.</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 un <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a> mais pas d'éléments <code><address></code>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}. Avant Gecko 2.0 (Firefox 4), Gecko implémentait cet élément en utilisant l'interface {{domxref("HTMLSpanElement")}}.</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', 'semantics.html#the-address-element', '<address>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-address-element', '<address>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '<address>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("html.elements.address")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments liés aux sections d'un document : {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("header")}} ;</li> + <li class="last"><a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">Sections et titres d'un document HTML5</a></li> +</ul> diff --git a/files/fr/web/html/element/applet/index.html b/files/fr/web/html/element/applet/index.html new file mode 100644 index 0000000000..2515ada501 --- /dev/null +++ b/files/fr/web/html/element/applet/index.html @@ -0,0 +1,147 @@ +--- +title: '<applet> : l''élément d''applet Java embarqué' +slug: Web/HTML/Element/applet +tags: + - Element + - HTML + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/applet +--- +<div>{{HTMLRef}}{{obsolete_header}}</div> + +<div class="blockIndicator warning"> +<p><strong>Attention ! </strong>Cet élément a été retiré à partir de <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1279218">Gecko 56</a>, de <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=470301">Chrome 47</a> et le retrait est à l'étude pour <a href="https://bugs.webkit.org/show_bug.cgi?id=157926">WebKit</a> et <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11946645/">Edge</a>.</p> +</div> + +<p>L'élément HTML <strong><code><applet></code></strong>, pour les applets, définit l'intégration d'une applet Java. Cet élément est désormais déprécié en faveur de {{HTMLElement("object")}}.</p> + +<p>L'utilisation d'applets Java sur le Web est dépréciée, la plupart des navigateurs ne prennent plus en charge les plugins Java.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("align")}}</dt> + <dd>Cet attribut est utilisé pour positionner l'applet sur la page en fonction du contenu qui l'entoure. La spécification HTML 4.01 définit l'utilisation des valeurs <code>bottom</code> (en bas), <code>left</code> (à gauche), <code>middle</code> (au milieu), <code>right</code> (à droite), et <code>top</code> (en haut), tandis que Microsoft et Netscape supporteraient également les valeurs <strong>absbottom</strong>, <strong>absmiddle</strong>, <strong>baseline</strong>, <strong>center</strong>, et <strong>texttop</strong>.</dd> + <dt>{{htmlattrdef("alt")}}</dt> + <dd>Cet attribut génère un texte alternatif à afficher pour les navigateurs ne supportant pas Java. Il est à noter que le contenu de l'élément <code><applet></code> peut être également restitué comme du texte alternatif dans certains cas.</dd> + <dt>{{htmlattrdef("archive")}}</dt> + <dd>Cet attribut fait référence à une version archivée ou compressée de l'applet et des fichiers classes associés, ce qui peut aider à réduire le temps de téléchargement.</dd> + <dt>{{htmlattrdef("code")}}</dt> + <dd>Cet attribut définit l'URL du fichier classe de l'applet qui doit être chargé et exécuté. Les noms de fichiers pour les applets sont définis avec une extension en .class. L'URL définie par cet attribut peut être relative par rapport à l'attribut <code>codebase</code>.</dd> + <dt>{{htmlattrdef("codebase")}}</dt> + <dd>Cet attribut donne une URL absolue ou relative du répertoire où les fichiers classes de l'applet (déclarés dans l'attribut <code>code</code>) doivent être placés.</dd> + <dt>{{htmlattrdef("datafld")}}</dt> + <dd>Cet attribut, supporté par Internet Explorer à partir de sa version 4, définit le nom de colonne attribué aux objets de données fournis par les données attachées. Cet attribut peut être utilisé pour définir les différents éléments {{HTMLElement("param")}} envoyés à l'applet Java.</dd> + <dt>{{htmlattrdef("datasrc")}}</dt> + <dd>Comme l'attribut <code>datafld</code>, cet attribut est utilisé pour les données attachées sous Internet Explorer 4. Il indique un identifiant pour l'objet définissant la source des données qui seront attachées aux élément {{HTMLElement("param")}} associés à l'applet.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>Cet attribut définit la hauteur dont l'applet à besoin, en pixels.</dd> + <dt>{{htmlattrdef("hspace")}}</dt> + <dd>Cet attribut définit l'espace horizontal supplémentaire qui doit être réservé à côté de l'applet, en pixels.</dd> + <dt>{{htmlattrdef("mayscript")}}</dt> + <dd>Cet attribut, concerné par l'implémentation effectuée dans Netscape, permet l'accès à l'applet par les scripts contenus dans le document.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>Cet attribut donne un nom à l'applet afin qu'elle soit possiblement identifiée par d'autres ressources, notamment les scripts.</dd> + <dt>{{htmlattrdef("object")}}</dt> + <dd>Cet attribut définit l'URL d'une représentation de l'applet.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>Dans Internet Explorer 4 et ses versions ultérieures, cet attribut définit une URL pour le fichier associé à l'applet. La signification de cet attribut n'est pas claire et ne fait pas partie du standard HTML.</dd> + <dt>{{htmlattrdef("vspace")}}</dt> + <dd>Cet attribut définit l'espace supplémentaire qui doit être réservé en haut et en bas de l'applet, en pixels.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>Cet attribut définit la largeur, en pixels, dont l'applet a besoin</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><applet code="game.class" align="left" archive="game.zip" height="250" width="350"> + <param name="difficulte" value="facile"> + <b>Vous avez besoin de Java pour activer cela.</b> +</applet> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","100%", 300)}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Catégories de contenu</th> + <td><a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_intégré">contenu intégré</a>, <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_interactif">contenu interactif</a>, <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_tangible">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Zéro ou plusieurs {{HTMLElement("param")}} suivi d'un contenu <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Modèle_de_contenu_transparent">transparent</a>.</td> + </tr> + <tr> + <th scope="row">Omission de balise</th> + <td>Aucune. La balise de début et la balise de fin 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/Catégories_de_contenu#Contenu_intégré">contenu intégré</a>.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{DOMxRef("HTMLAppletElement")}}</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", "obsolete.html#applet", "<applet>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Retrait de l'élément, seule une note rappelle qu'il a existé.</td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "obsolete.html#the-applet-element", "<applet>")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "obsolete.html#the-applet-element", "<applet>")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "obsolete.html#the-applet-element", "<applet>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>L'élément est rendu obsolète.</td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "struct/objects.html#h-13.4", "<applet>")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td>Élément déprécié et remplacé par {{HTMLElement("object")}}</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.applet")}}</p> + +<h2 id="Notes">Notes</h2> + +<p>La spécification W3C désapprouve l'utilisation de l'élément <code><applet></code> et conseille l'utilisation de l'élément {{HTMLElement("object")}}. Pour HTML 4.01 cet élément est déprécié et est devenu entièrement obsolète sous HTML5.</p> diff --git a/files/fr/web/html/element/area/index.html b/files/fr/web/html/element/area/index.html new file mode 100644 index 0000000000..bf162fa477 --- /dev/null +++ b/files/fr/web/html/element/area/index.html @@ -0,0 +1,184 @@ +--- +title: <area> +slug: Web/HTML/Element/area +tags: + - Element + - HTML + - Multimedia + - Reference + - Web +translation_of: Web/HTML/Element/area +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><area></code></strong> définit une zone particulière d'une image et peut lui associer un {{Glossary("Hyperlink", "lien hypertexte")}}. Cet élément n'est utilisé qu'au sein d'un élément {{HTMLElement("map")}}.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/area.html", "tabbed-taller")}}</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> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("alt")}}</dt> + <dd>Un texte alternatif que les navigateurs doivent afficher afin de remplacer l'image si elle ne peut pas être affichée. Le texte doit être phrasé de façon à offrir les mêmes choix qui auraient été offerts par l'image. En HTML4, cet attribut est obligatoire mais peut prendre la valeur "" (la chaîne de caractères vide). En HTML5, cet attribut est requis uniquement si l'attribut <strong><code>href</code></strong> est utilisé.</dd> + <dt>{{htmlattrdef("coords")}}</dt> + <dd>A set of values specifying the coordinates of the hot-spot region. The number and meaning of the values depend upon the value specified for the <strong>shape</strong> attribute.</dd> + <dd> + <ul> + <li><code>rect</code> or rectangle: the <strong>coords</strong> value is two x,y pairs: left, top, right, bottom.</li> + <li><code>circle</code>: the value is <code>x,y,r</code> where <code>x,y</code> is a pair specifying the center of the circle and <code>r</code> is a value for the radius.</li> + <li><code>poly</code> or polygon: the value is a set of x,y pairs for each point in the polygon: <code>x1,y1,x2,y2,x3,y3,</code> and so on.</li> + </ul> + In HTML4, the values are numbers of pixels or percentages, if a percent sign (%) is appended; in HTML5, the values are numbers of CSS pixels.</dd> + <dt>{{htmlattrdef("href")}}</dt> + <dd>Le lien hypertexte porté par la zone d'intérêt. Ce doit être une URL valide. En HTML4, l'un des deux attributs <strong>href</strong> ou <strong>nohref</strong> doit être présent. En HTML5, cet attribut peut être absent et dans ce cas, la zone d'intérêt ne représente pas de lien hypertexte.</dd> + <dt>{{htmlattrdef("hreflang")}} {{HTMLVersionInline("5")}}</dt> + <dd>Indique la langue de la ressource liée. Les valeurs que peut prendre cet attribut sont définis dans le <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>. Cet attribut ne doit être utilisé que si l'attribut <strong>href</strong> est présent.</dd> + <dt>{{htmlattrdef("ping")}} {{HTMLVersionInline("5")}}</dt> + <dd>Cet attribut contient une liste d'URL séparées par des espaces vers lesquelles sont envoyées des requêtes HTTP {{HTTPMethod("POST")}} dont le corps vaut <code>PING</code> lors du clic sur le lien. Les requêtes sont envoyées en arrière-plan. Cet attribut est généralement utilisé à des fins de pistage.</dd> + <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> + <dd>Une chaîne de caractères qui indique le référent (<em>referrer</em>) à utiliser lors de la récupération de la ressource : + <ul> + <li><code>'no-referrer'</code> indique que l'en-tête <code>Referer</code> ne sera pas envoyé.</li> + <li><code>'no-referrer-when-downgrade'</code> indique que l'en-tête <code>Referer</code> ne sera pas envoyé lorsque l'utilisateur navigue depuis une origine sans TLS/HTTPS. C'est le comportement par défaut de l'agent utilisateur si aucune autre politique n'est spécifiée.</li> + <li><code>'origin'</code> indique que le référent sera l'origine de la page (ce qui correspond au schéma utilisé, à l'hôte et au port).</li> + <li><code>'origin-when-cross-origin'</code> indique que lorsqu'on navigue sur d'autres origines, seule l'origine du document sera envoyée. Lorsqu'on navigue sur la même origine, le chemin de la ressource sera inclus dans le référent.</li> + <li><code>'unsafe-url'</code> indique que le référent envoyé inclura l'origine et le chemin (mais pas le fragment, le mot de passe ou le nom d'utilisateur). Ce cas n'est pas considéré comme sûr car il peut laisser fuiter des origines et des chemins de ressources protégées par TLS vers des origines non-sécurisées.</li> + </ul> + </dd> + <dt>{{htmlattrdef("rel")}} {{HTMLVersionInline("5")}}</dt> + <dd>Pour les ancres contenant l'attribut <code><strong>href</strong></code>, cet attribut définit la relation entre l'objet ciblé et l'objet lié. La valeur est une liste des <a href="/fr/docs/Web/HTML/Types_de_lien">différentes relations</a> dont les valeurs sont séparées par des espaces. Les valeurs et leurs significations peuvent être enregistrées par une autorité jugée utile par l'auteur du document. La valeur par défaut est la relation vide. Cet attribut ne doit être utilisé seulement si l'attribut <code><strong>href</strong></code> est présent.</dd> + <dt>{{htmlattrdef("shape")}}</dt> + <dd>La forme de la zone d'intérêt. Les spécifications HTML5 et HTML4 définissent les valeurs <code>rect</code> (zone rectangulaire), <code>circle</code> (zone circulaire), <code>poly</code> (zone polygonale) et <code>default</code> (indiquant toute la zone). Beacuoup de navigateurs, comme Internet Explorer 4 et ultérieur, supportent les valeurs <code>circ</code>, <code>polygon</code> et <code>rectangle</code> pour l'attribut <code><strong>shape</strong></code>. Ces valeurs sont {{Non-standard_inline}}.</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd>Cet attribut précise où afficher la ressource liée. En HTML4 c'est le nom (ou un mot-clé) d'un cadre. En HTML5, c'est le nom (ou le mot-clé) d'un <em>contexte de navigation</em> (un onglet, une fenêtre, ou une <code>frame</code> <em>inline).</em> Les mots-clés peuvent avoir les significations suivantes : + <ul> + <li><code>_self</code> : Charge la réponse dans le même cadre HTML4 ou dans le même contexte de navigation HTML5. Cette valeur est la valeur par défaut si l'attribut n'est pas précisé.</li> + <li><code>_blank </code>: Charge la réponse dans une nouvelle fenêtre (sans nom) avec HTML4 ou dans un nouveau contenu de navigation HTML5 (sans nom).</li> + <li><code>_parent</code> : Charge la réponse dans le même cadre que le parent du cadre de l'élément actuel en HTML4. En HTML5 on a la même situation avec le contexte de navigation. S'il n'y pas de parent, cette valeur aura le même rôle que la valeur <code>_self</code>.</li> + <li><code>_top </code>: En HTML4 la réponse sera chargée dans toute la fenêtre d'origine annulant ainsi les autres cadres. En HTML5 la réponse sera chargée dans le contexte de navigation avec le plus haut niveau (autrement dit l'ancêtre du contexte actuel qui n'a pas de parent). Si le contexte actuel n'a pas de parent alors cette valeur aura le même effet que la valeur <code>_self</code>.</li> + </ul> + + <p>Cet attribut doit uniqument être utilisé si l'attribut <code><strong>href</strong></code> est présent.</p> + </dd> +</dl> + +<h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3> + +<dl> + <dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline("4")}} seulement, {{obsolete_inline("5.0")}}</dt> + <dd>Définit un raccourci clavier pour cet élément. Appuyer sur la touche ALT (ou une autre touche similaire) et sur la touche définie par l'attribut sélectionnera l'action associée à cette séquence. Il est conseillé de ne pas utiliser les combinaisons de touches déjà utilisées par les navigateurs. Cet attribut est global depuis HTML5.</dd> + <dt>{{htmlattrdef("name")}} {{HTMLVersionInline("4")}} seulement, {{obsolete_inline("5.0")}}</dt> + <dd>Définit un nom pour la zone sur laquelle on peut cliquer afin que cet élément puisse être interprété par les navigateurs plus anciens.</dd> + <dt>{{htmlattrdef("nohref")}} {{HTMLVersionInline("4")}} seulement, {{obsolete_inline("5.0")}}</dt> + <dd>Indique une absence d'hyperlien pour la zone d'intérêt. Cet attribut doit être présent si <strong>href</strong> ne l'est pas et <em>vice versa</em>. + <div class="note"> + <p><strong>Note d'utilisation : </strong>Cet attribut est obsolète en HTML5, ne pas utiliser l'attribut <strong>href</strong> suffit.</p> + </div> + </dd> + <dt>{{htmlattrdef("tabindex")}} {{HTMLVersionInline("4")}} seulement, {{obsolete_inline("5.0")}}</dt> + <dd>Une valeur numérique définissant l'ordre de la zone d'intérêt parmi les différentes étiquettes. Cet attribut est un attribut universel avec HTML5.</dd> + <dt>{{htmlattrdef("type")}}{{obsolete_inline("5.1")}}</dt> + <dd>Cet attribut définit le type MIME de la cible du lien. Cet attribut a généralement une fonction indicative. Cependant les prochains navigateurs pourraient ajouter une petite icône pour les types multimédia. Voir <a href="https://www.w3.org/TR/html4/references.html#ref-MIMETYPES">http://www.w3.org/TR/html4/references.html#ref-MIMETYPES</a> pour une liste complète des types MIME reconnus. Cet attribut ne doit être utilisé que si l'attribut <code><strong>href</strong></code> est présent.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<p>Dans cet exemple, la partie gauche est un lien vers une page et la partie droite est inactive.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><map name="exemple-map-1"> + <area shape="rect" coords="0,0 200,200" href="https://developer.mozilla.org" target="_blank" alt="Page d'accueil MDN" /> + <area shape="default" /> +</map> +<img usemap="#exemple-map-1" src="https://mdn.mozillademos.org/files/14546/map.png"> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","450","230")}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a></td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Aucun, cet élément est un {{Glossary("élément vide ", "élément vide")}}.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>Cet élément doit avoir une balise de fin et ne pas avoir de balise de début.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Tout élément acceptant du <a href="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>. L'élément <code><area></code> doit avoir un élément {{HTMLElement("map")}} parmi ses ancêtres mais ce dernier n'a pas besoin d'être son parent direct.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLAreaElement")}}</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('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerpolicy attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Ajout de l'attribut <code>referrerpolicy</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-map-element.html#the-area-element', '<area>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-area-element', '<area>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '<area>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="Notes">Notes</h3> + +<ul> + <li>Dans les spécifications HTML des versions 3.2, 4.0, et 5, la balise de fermeture <code></area></code> est proscrite.</li> + <li>La spécification XHTML 1.0 demande l'utilisation d'une barre oblique avant le chevron fermant : <code><area /></code>.</li> + <li>Les attributs <code><strong>id</strong></code>, <code><strong>class</strong></code> et <code><strong>style</strong></code> ont la même signification que ceux qui avaient été définis dans la spécification HTML 4. Cependant cette spécification n'avait été définie que par Microsoft et Netscape.</li> + <li>Les navigateurs Netscape de niveau 1 n'arrivent pas à interpréter l'attribut <code><strong>target</strong></code> si celui-ci fait référence à des éléments <code><strong>frames</strong></code>.</li> + <li>HTML 3.2 définit seulement les attributs <code><strong>alt</strong></code>, <code><strong>coords</strong></code>, <code><strong>href</strong></code>, <code><strong>nohref</strong></code> et <code><strong>shape</strong></code>.</li> +</ul> + +<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.area")}}</p> diff --git a/files/fr/web/html/element/article/index.html b/files/fr/web/html/element/article/index.html new file mode 100644 index 0000000000..fde2eb92dc --- /dev/null +++ b/files/fr/web/html/element/article/index.html @@ -0,0 +1,151 @@ +--- +title: '<article> : l''élément de contenu d''un article' +slug: Web/HTML/Element/article +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/article +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><article></code></strong> représente du contenu autonome dans un document, une page, une application, ou un site. Ceci peut être un message sur un forum, un article de journal ou de magazine, une parution sur un blog, un commentaire d'utilisateur, un widget ou gadget interactif, ou tout autre élément de contenu indépendant. Ce contenu est prévu pour être distribué ou réutilisé indépendamment (par exemple dans un <a href="/fr/docs/Web/RSS/Premiers_pas/Syndication">flux de syndication</a>).</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}}</div> + +<div 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> !</div> + +<p>Un document donné peut tout à fait avoir plusieurs articles. On peut par exemple avoir un blog qui affiche le texte de chaque billet au fur et à mesure que le lecteur fait défiler le contenu. Chaque billet serait un élément <code><article></code> et les sections de ces billets des éléments {{HTMLElement("section")}}.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément n'a pas d'autres attributs que les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>, communs à tous les éléments.</p> + +<h2 id="Notes"><strong>Notes</strong></h2> + +<ul> + <li>Chaque <code><article></code> autonome, qui n'est pas imbriqué dans un autre élément <code><article></code>, devrait être identifié typiquement, en incluant un élément d'en-tête <code><header></code> qui comprendrait lui-même un élément de titre <code><h1></code> à <code><h6></code>.</li> + <li>Quand un élément <code><article></code> est imbriqué dans un autre, l'élément contenu représente un article relatif à l'élément contenant. Par exemple, les commentaires d'une parution de blog peuvent être un élément <code><article></code> inclus dans l'<code><article></code> représentant la parution en elle-même.</li> + <li>Des informations à propos de l'auteur d'un élément <code><article></code> peuvent être fournies au travers de l'élément {{HTMLElement("address")}}, mais cela ne s'applique pas aux éléments <code><article></code> imbriqués.</li> + <li>La date et l'heure de publication d'un élément <code><article></code> peuvent être donnés en utilisant l'attribut {{htmlattrxref("datetime", "time")}} d'un élément {{HTMLElement("time")}}. <em>Notez que l'attribut {{htmlattrxref("pubdate", "time")}} de {{HTMLElement("time")}} ne fait plus partie de la norme W3C HTML 5.</em></li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><article class="film_review"> + <header> + <h2>Jurassic Park</h2> + </header> + <section class="main_review"> + <p>Les dinosaures étaient super !</p> + </section> + <section class="user_reviews"> + <article class="user_review"> + <p>Beaucoup trop effrayant pour moi</p> + <footer> + <p> + Posté le + <time datetime="2015-05-16 19:00">16 Mai</time> + par Lisa. + </p> + </footer> + </article> + <article class="user_review"> + <p>Je suis d'accord, les dinosaures sont mes préférés</p> + <footer> + <p> + Posté le + <time datetime="2015-05-17 19:00">17 Mai</time> + par Tom. + </p> + </footer> + </article> + </section> + <footer> + <p> + Posté le + <time datetime="2015-05-15 19:00">15 Mai</time> + par Staff. + </p> + </footer> +</article></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","300","500")}}</p> + +<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/Guide/HTML/Catégories_de_contenu#Contenu_sectionnant">contenu de section</a>, <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_de_flux">Contenu de flux</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_de_flux">contenu de flux</a>. Un élément <code><article></code> ne doit pas être un descendant d'un élément {{HTMLElement("address")}}.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("main")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}.</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', 'semantics.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sections.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("html.elements.article")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments liés aux sections d'un document : {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li> + <li class="last"><a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">Sections et structure d'un document HTML5</a>.</li> +</ul> diff --git a/files/fr/web/html/element/aside/index.html b/files/fr/web/html/element/aside/index.html new file mode 100644 index 0000000000..a68dc9f35a --- /dev/null +++ b/files/fr/web/html/element/aside/index.html @@ -0,0 +1,122 @@ +--- +title: '<aside> : l''élément Aparté' +slug: Web/HTML/Element/aside +tags: + - Element + - HTML + - HTML5 + - Reference + - Sections HTML + - Web +translation_of: Web/HTML/Element/aside +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">L'<strong>élément HTML <code><aside></code></strong> (en anglais, "aparté") représente une partie d'un document dont le contenu n'a qu'un rapport indirect avec le contenu principal du document.</span> Les apartés sont fréquemment présents sous la forme d'encadrés ou de boîtes de légende.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/aside.html", "tabbed-standard")}}</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> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément ne comprend que les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>.</p> + +<h2 id="Notes_d'utilisation"><strong>Notes d'utilisation</strong></h2> + +<p>Ne pas utiliser l'élément <code><aside></code> pour marquer du texte entre parenthèses, du fait que ce type de texte est considéré comme faisant partie du flux principal.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Dans cet exemple, on utilise <code><aside></code> afin de baliser un paragraphe d'un article. Ici, le paragraphe n'est pas directement lié au contenu principal de l'article et c'est pour cela qu'on utilise cet élément.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><article> + <p> + Le film Disney <cite>La petite Sirène</cite> est + sorti en salles en 1989. + </p> + <aside> + <p> + Le film a gagné 87 millions de dollars pendant sa sortie initiale. + </p> + </aside> + <p> + Plus d'informations sur le film... + </p> +</article> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p> + +<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/Guide/HTML/Catégories_de_contenu#Contenu_sectionnant">contenu de section</a>, <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_de_flux">Contenu de flux</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_de_flux">contenu de flux</a>. Notez qu'un élément <code><aside></code> ne doit pas être un descendant d'un élément {{HTMLElement("address")}}.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>{{ARIARole("feed")}}, {{ARIARole("note")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}, {{ARIARole("search")}}</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</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">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-aside-element', '<aside>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-aside-element', '<aside>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.aside")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments en rapport avec les sections : {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li> + <li><a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">Structures et sections d'un document HTML5</a></li> + <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Complementary_role">ARIA : le rôle <code>complementary</code></a></li> +</ul> diff --git a/files/fr/web/html/element/audio/index.html b/files/fr/web/html/element/audio/index.html new file mode 100644 index 0000000000..4a5ff5cbae --- /dev/null +++ b/files/fr/web/html/element/audio/index.html @@ -0,0 +1,371 @@ +--- +title: '<audio> : l''élément audio embarqué' +slug: Web/HTML/Element/audio +tags: + - Element + - HTML + - Multimedia + - Reference + - Web +translation_of: Web/HTML/Element/audio +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><audio></code></strong> est utilisé afin d'intégrer un contenu sonore dans un document. Il peut contenir une ou plusieurs sources audio représentées avec l'attribut <code>src</code> ou l'élément {{HTMLElement("source")}}. S'il y a plusieurs sources, l'agent utilisateur choisira celle qui convient le mieux.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/audio.html","tabbed-standard")}}</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> + +<p>L'exemple qui précède illustre le fonctionnement simple d'un élément <code><audio></code>, à la façon de ce qui peut être fait pour une image avec l'élément {{htmlelement("img")}} : on inclut un chemin vers la ressource grâce à l'attribut <code>src</code> et on peut ajouter d'autres attributs afin de fournir d'autres informations : lecture automatique, lecture en boucle, utilisation des contrôles par défaut du navigateur, etc</p> + +<p>Le contenu présent à l'intérieur des balises <code><audio></audio></code> est affiché comme contenu alternatif lorsque le navigateur ne prend pas en charge l'élément.</p> + +<p>Les navigateurs ne prennent pas en charge l'ensemble des <a href="/fr/docs/Web/Media/Formats/Audio_codecs">formats audio</a> et plusieurs sources peuvent être fournies en utilisant des éléments {{htmlelement("source")}} imbriqués. Ainsi, le navigateur sélectionnera la première ressource dont il prend en charge le format:</p> + +<pre class="brush: html"><audio controls> + <source src="monAudio.mp3" type="audio/mpeg"> + <source src="monAudio.ogg" type="audio/ogg"> + <p>Votre navigateur ne prend pas en charge l'audio HTML. Voici un + un <a href="myAudio.mp4">lien vers le fichier audio</a> pour le + télécharger.</p> +</audio></pre> + +<p>Autres notes :</p> + +<ul> + <li>Si l'attribut <code>controls</code> n'est pas indiqué, le lecteur audio n'incluera pas les contrôles par défaut du navigateur. Il est possible de créer des contrôles spécifiques en JavaScript grâce à l'API {{domxref("HTMLMediaElement")}}.</li> + <li>Afin d'avoir un contrôle précis sur le contenu audio, l'API <code>HTMLMediaElement</code> déclenche de nombreux<a href="/fr/docs/Web/Guide/DOM/Events/evenement_medias"> évènements</a>.</li> + <li>Il est aussi possible d'utiliser <a href="/fr/docs/Web/API/Web_Audio_API">lAPI Web Audio</a> afin de générer et de manipuler des flux audio en JavaScript.</li> + <li>Les éléments <code><audio></code> ne peuvent pas avoir de sous-titres contrairement aux éléments <code><video></code>. Pour plus d'informations et certaines méthodes de contournements, voir <a href="https://www.iandevlin.com/blog/2015/12/html5/webvtt-and-audio">WebVTT et l'audio</a>, écrit par Ian Devlin.</li> +</ul> + +<p>Pour apprendre comment utiliser les éléments liés aux médias, nous vous conseillons de lire <a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">le tutoriel sur le contenu audio et vidéo</a>.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme tous les autres éléments HTML, cet élément possède <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("autoplay")}}</dt> + <dd> + <p>Attribut booléen. Si celui-ci est renseigné (même avec une valeur "false"), l'élément audio sera joué automatiquement dès qu'assez de données seront chargées.</p> + + <div class="note"><strong>Note :</strong> la lecture automatique peut être source de nuisance pour les utilisateurs. Mieux vaut l'éviter lorsque c'est possible ou proposer à l'utilisateur de pouvoir choisir cette option. Cette valeur peut être utile lorsqu'on crée des fichiers audio dont la source sera définie <em>a posteriori</em>.</div> + </dd> + <dt>{{htmlattrdef("controls")}}</dt> + <dd>Si l'attribut est présent, le navigateur affichera des contrôles pour que l'utilisateur puisse gérer la lecture, le volume, et le déplacement du curseur de lecture.</dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>Cet attribut à valeur contrainte indique comment le CORS doit être utilisé afin de récupérer la ressource. <a href="/en-US/docs/CORS_Enabled_Image">Les ressources utilisant le CORS</a> peuvent être réutilisées dans un élément {{HTMLElement("canvas")}} sans corrompre celui-ci. Les valeurs autorisées pour cet attribut sont : + <dl> + <dt><code>anonymous</code></dt> + <dd>Une requête multi-origine est envoyée sans information d'authentification. Autrement dit, l'en-tête HTTP {{HTTPHeader("Origin")}} est envoyé sans cookie, certificat X.509 ou sans authentification HTTP. Si le serveur ne fournit pas d'information d'authentification au site d'origine (sans indiquer l'en-tête {{HTTPHeader("Access-Control-Allow-Origin")}}), la ressource sera corrompue (<em>tainted</em>) et son utilisation sera restreinte.</dd> + <dt><code>use-credentials</code></dt> + <dd>Une requête multi-origine est envoyée avec une information d'authentification (c'est-à-dire avec un en-tête HTTP <code>Origin:</code> qui contient un cookie, un certificat ou effectuant une authentification HTTP).</dd> + </dl> + Lorsque cet attribut n'est pas présent, la ressource est récupérée sans requête CORS et empêche ainsi d'utiliser la ressource dans un {{HTMLElement('canvas')}}. Si la valeur fournie est invalide, elle sera considérée comme <code>anonymous</code>. Voir <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS">Paramétrage des attributs relatifs au CORS</a> pour plus d'informations.</dd> + <dt>{{htmlattrdef("loop")}}</dt> + <dd>Attribut booléen. S'il est renseigné, la lecture du fichier se fera en boucle.</dd> + <dt>{{htmlattrdef("muted")}}</dt> + <dd>Attribut booléen, indiquant si le son de l'élément audio est initialement coupé. Sa valeur par défaut est <code>false</code>.</dd> + <dt>{{htmlattrdef("preload")}}</dt> + <dd>Cet attribut indique au navigateur ce que l'auteur du code html pense de l'utilisation optimale de cet élément. Il accepte uniquement les valeurs suivantes :<br> + + <ul> + <li><code>none</code> : l'élément audio ne devrait pas être mis en cache</li> + <li><code>metadata</code> : seules les méta-données (comme la durée) sont préchargées</li> + <li><code>auto</code> : tout le fichier peut être téléchargé, même s'il n'est pas certain que l'utilisateur le lira</li> + <li><code>"" </code>(chaîne de caractères vide) : synonyme de <code>auto</code></li> + </ul> + La valeur par défaut peut varier d'un navigateur à l'autre. Les spécifications recommandent la valeur <code>metadata</code>.</dd> +</dl> + +<div class="note"><strong>Notes d'utilisation :</strong> + +<ul> + <li>L'attribut <code>autoplay</code> est prioritaire sur cet attribut. Si le navigateur a besoin de jouer cet élément, il le téléchargera automatiquement</li> + <li>La spécification n'impose pas au navigateur de prendre en compte cet attribut. Il n'a qu'une valeur indicative.</li> +</ul> +</div> + +<dl> + <dt>{{htmlattrdef("src")}}</dt> + <dd>L'URL du fichier audio à intégrer. Cet attribut suit les <a href="/fr/docs/HTTP/Access_control_CORS">spécifications du CORS</a>. Il est optionnel; on peut lui préférer l'élément {{HTMLElement("source")}} dans le bloc de l'élément sur lequel il est défini.</dd> +</dl> + +<h2 id="Évènements">Évènements</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Nom</th> + <th scope="col">Condition du déclenchement</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("audioprocess")}}</td> + <td>La mémoire tampon en entrée d'un {{DOMxRef("ScriptProcessorNode")}} peut désormais être traité.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.canplay_event", 'canplay')}}</td> + <td>Le navigateur peut lire le média mais estime que trop peu de données ont été chargées pour lire le média jusqu'à sa fin (il faudra vraisemblablement un arrêt pour un chargement en mémoire tampon).</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.canplaythrough_event", 'canplaythrough')}}</td> + <td>Le navigateur estime qu'il peut lire le média jusqu'à sa fin, sans avoir à interrompre la lecture par du chargement en mémoire tampon.</td> + </tr> + <tr> + <td>{{Event("complete")}}</td> + <td>Le rendu d'un {{DOMxRef("OfflineAudioContext")}} est terminé.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.durationchange_event", 'durationchange')}}</td> + <td>L'attribut <code>duration</code> a été mis à jour.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.emptied_event", 'emptied')}}</td> + <td>Le média est devenu vide. Cela peut par exemple se produire lorsque le média a déjà été (partiellement ou complètement) chargé et que la méthode <a href="/fr/docs/Web/API/HTMLMediaElement/load" rel="internal"><code>load()</code></a> est invoquée pour le recharger.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.ended_event", 'ended')}}</td> + <td>La lecture a été interrompue car la fin du média est atteinte.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.loadeddata_event", 'loadeddata')}}</td> + <td>La première <em>frame</em> du média a été chargée.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.loadedmetadata_event", 'loadedmetadata')}}</td> + <td>Les métadonnées ont été chargées.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.pause_event", 'pause')}}</td> + <td>La lecture a été mise en pause.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.play_event", 'play')}}</td> + <td>La lecture a démarré.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.playing_event", 'playing ')}}</td> + <td>La lecture est prête à être lancée après avoir été mise en pause ou interrompue pour un chargement en mémoire de données.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.ratechange_event", 'ratechange')}}</td> + <td>La vitesse de lecture a changé.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.seeked_event", 'seeked')}}</td> + <td>Une opération de déplacement du curseur de lecture (<em>seek</em>) est terminée.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.seeking_event", 'seeking')}}</td> + <td>Une opération de déplacement du curseur de lecture (<em>seek</em>) a été initiée.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.stalled_event", 'stalled')}}</td> + <td>L'agent utilisateur tente de récupérer les données associées au média mais les données ne parviennent pas.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.suspend_event", 'suspend')}}</td> + <td>Le chargement des données du média ont été suspendues.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.timeupdate_event", 'timeupdate')}}</td> + <td>Le temps décrit par l'attribut <code>currentTime</code> a été mis à jour.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.volumechange_event", 'volumechange')}}</td> + <td>Le volume a été modifié.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.waiting_event", 'waiting')}}</td> + <td>La lecture a été interrompue en raison d'un manque temporaire de données.</td> + </tr> + </tbody> +</table> + +<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> + +<h3 id="Mise_en_forme_avec_CSS">Mise en forme avec CSS</h3> + +<p>L'élément <code><audio></code> n'a aucun affichage intrinsèque en dehors des contrôles par défaut du navigateur qui sont affichés lorsque l'attribut booléen <code>controls</code> est présent.</p> + +<p>Les contrôles par défaut sont affichés avec {{cssxref("display")}} qui vaut <code>inline</code> par défaut et il est possible de changer cette valeur en <code>block</code> dans une feuille de style afin de pouvoir placer le contrôle au sein de la disposition, à moins de vouloir le placer en incise.</p> + +<p>Les contrôles par défaut peuvent être mis en forme grâce à des propriétés qui influent sur l'ensemble du bloc. On peut ainsi utiliser {{cssxref("border")}}, {{cssxref("border-radius")}}, {{cssxref("padding")}}, {{cssxref("margin")}}, etc. Toutefois, il n'est pas possible de mettre en forme chacun des composants individuel du contrôle (on ne peut pas, par exemple, modifier la taille d'un des boutons ou leurs icones). Chaque navigateur peut avoir des contrôles par défaut qui soient différents.</p> + +<p>Pour obtenir un aspect identique dans les différents navigateurs, il vous faudra créer vos propres contrôles afin de les baliser et de les mettre en forme à votre convenance puis d'utiliser JavaScript et l'API {{domxref("HTMLMediaElement")}} pour manipuler les différentes fonctionnalités.</p> + +<p><a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Le guide sur la mise en forme des lecteurs vidéo</a> fournit quelques techniques utiles, bien qu'écrit à propos de l'élément <code><video></code>, certains concepts peuvent tout à fait s'appliquer aux éléments <code><audio></code>.</p> + +<h3 id="Détecter_l'ajout_et_la_suppression_de_pistes">Détecter l'ajout et la suppression de pistes</h3> + +<p>Il est aussi possible de détecter lorsque des pistes sont ajoutées et supprimées sur un élément <code><audio></code> en écoutant les évènements {{event("addtrack")}} et {{event("removetrack")}}. Toutefois, ces évènements ne sont pas directement envoyés sur l'élément <code><audio></code> mais sur l'objet représentant la liste de pistes de l'élément <code><audio></code> et rattaché à l'élément {{domxref("HTMLMediaElement")}}.</p> + +<dl> + <dt>{{domxref("HTMLMediaElement.audioTracks")}}</dt> + <dd>Un objet {{domxref("AudioTrackList")}} contenant l'ensemble des pistes audio associées à l'élément. Un écouteur <code>addtrack</code> peut être associé à l'objet afin d'alerter lorsque de nouvelles pistes audio sont ajoutées à l'élément.</dd> + <dt>{{domxref("HTMLMediaElement.videoTracks")}}</dt> + <dd>Un écouteur <code>addtrack</code> peut être ajouté à cet objet {{domxref("VideoTrackList")}} afin d'alerter lorsque de nouvelles pistes vidéo sont ajoutées à l'élément.</dd> + <dt>{{domxref("HTMLElement.textTracks")}}</dt> + <dd>Un écouteur <code>addtrack</code> peut être ajouté à cet objet {{domxref("TextTrackList")}} afin d'alerter lorsque de nouvelles pistes de texte sont ajoutées à l'élément.</dd> +</dl> + +<div class="note"> +<p><strong>Note :</strong> Bien qu'on parle ici d'un élément <code><audio></code>, il est possible qu'un tel élément possède des pistes vidéo et des pistes texte bien que la cohérence des interfaces puisse être mise à mal.</p> +</div> + +<p>Ainsi, on pourra utiliser un fragment de code analogue à celui qui suit pour détecter si de nouvelles pistes sont ajoutées ou supprimées d'un élément <code><audio></code> :</p> + +<pre class="brush: js">var elem = document.querySelector("audio"); + +elem.audioTrackList.onaddtrack = function(event) { + trackEditor.addTrack(event.track); +}; + +elem.audioTrackList.onremovetrack = function(event) { + trackEditor.removeTrack(event.track); +}; +</pre> + +<p>Ce code permet de surveiller lorsque de nouvelles pistes audio sont ajoutées et supprimées. Lorsque c'est le cas, une fonction (non décrite ici) est invoquée afin de mettre à jour l'éditeur présenté à l'utilisateur avec la liste des pistes disponibles.</p> + +<p>Il est aussi possible d'utiliser {{domxref("EventTarget.addEventListener", "addEventListener()")}} afin d'écouter les évènements {{event("addtrack")}} et {{event("removetrack")}}.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utilisation_simple">Utilisation simple</h3> + +<pre class="brush: html"><!-- Simple lecture audio --> +<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay> + Votre navigateur ne supporte pas l'élément <code>audio</code>. +</audio> +</pre> + +<h3 id="Utilisation_de_l'élément_<source>">Utilisation de l'élément <code><source></code></h3> + +<pre class="brush: html"><audio controls="controls"> + <source src="toto.wav" type="audio/wav"> + Votre navigateur ne prend pas en charge l'élément <code>audio</code>. +</audio> +</pre> + +<h3 id="Utilisation_de_plusieurs_éléments_<source>">Utilisation de plusieurs éléments <code><source></code></h3> + +<p>Dans l'exemple qui suit, le navigateur essaiera de jouer le premier fichier correspondant au premier élément (celui avec le codec Opus) : s'il peut le lire, il n'interprète pas les suivants ; s'il ne peut pas le lire, il tente de lire le deuxième puis, si ce n'est toujours pas possible, le troisième (au format MP3) :</p> + +<pre class="brush: html"><audio controls=""> + <source src="toto.opus" type="audio/ogg; codecs=opus"/> + <source src="toto.ogg" type="audio/ogg; codecs=vorbis"/> + <source src="toto.mp3" type="audio/mpeg"/> +</audio></pre> + +<h2 id="Accessibilité">Accessibilité</h2> + +<p>Les éléments audio contenant des dialogues parlés doivent fournir des sous-titres et des transcriptions qui décrivent précisément le contenu. Les sous-titres permettent aux personnes souffrant de troubles auditifs ou ne pouvant pas utiliser le son de l'appareil de lire le fichier. Les transcriptions permettent aux personnes ayant besoin de plus de temps pour lire le contenu d'utiliser un format plus adéquat.</p> + +<p>Si un service de sous-titre automatique est utilisé, il est nécessaire de vérifier le contenu généré afin de s'assurer qu'il correspond correctement à la source audio.</p> + +<p>En plus des dialogues, les sous-titres et transcriptions devraient également permettre d'identifier les musiques et effets sonores qui véhiculent des informations importantes (dont l'émotion et le ton) :</p> + +<pre>1 +00:00:00 --> 00:00:45 +[Musique avec des trompettes sonnantes] + +2 +00:00:46 --> 00:00:51 +Elle est où la poulette ? + +16 +00:00:52 --> 00:01:02 +[sur un ton énervé] Vous rendez la poulette ou c'est plus vous qui donnez à manger aux lapins ? +</pre> + +<ul> + <li><a href="/en-US/docs/Plugins/Flash_to_HTML5/Video/Subtitles_captions">Sous-titrage sur le web</a></li> + <li><a href="/fr/docs/Web/API/WebVTT_API">Web Video Text Tracks Format (WebVTT)</a></li> + <li><a href="https://webaim.org/techniques/captions/"><em>WebAIM: Captions, Transcripts, and Audio Descriptions</em> (en anglais)</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.2_—_Providing_text_alternatives_for_time-based_media">Comprendre les règles WCAG 1.2</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html"><em>Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html"><em>Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0</em> (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_int.C3.A9gr.C3.A9">contenu intégré</a>.<br> + Si l'attribut {{htmlattrxref("controls", "audio")}} est utilisé : <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a> et <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row"><dfn>Contenu autorisé</dfn></th> + <td>Si l'élément possède un attribut {{htmlattrxref("src", "audio")}} : zéro ou plusieurs éléments {{HTMLElement("track")}}, suivis par du contenu transparent ne contenant pas d'éléments média, c'est-à-dire des éléments qui ne soient pas {{HTMLElement("audio")}} ou {{HTMLElement("video")}}<br> + Sinon : zéro ou plusieurs éléments {{HTMLElement("source")}} suivis par un élément {{HTMLElement("track")}}, suivi par du contenu transparent ne contenant pas d'éléments média (ni {{HTMLElement("audio")}} ni {{HTMLElement("video")}}).</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 contenu intégré.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>{{ARIARole("application")}}</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLAudioElement")}}</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', 'embedded-content.html#the-audio-element', '<audio>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-audio-element', '<audio>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</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> + +<p>{{Compat("html.elements.audio")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/Media/Formats/Audio_codecs">Guide sur les codecs audio utilisés sur le Web</a></li> + <li><a href="/fr/docs/Web/HTML/formats_media_support">Formats de média pris en charge par les éléments <code>audio</code> et <code>video</code></a></li> + <li><a href="/fr/docs/Web/API/Web_Audio_API">API Web Audio</a></li> + <li>{{domxref("HTMLAudioElement")}}</li> + <li><a href="/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/NsIDOMHTMLMediaElement"><code>nsIDOMHTMLMediaElement</code></a></li> + <li>{{htmlelement("source")}}</li> + <li>{{htmlelement("video")}}</li> + <li><a href="/fr/docs/Web/HTML/Utilisation_d'audio_et_video_en_HTML5">Utiliser les éléments HTML5 <code>audio</code> et <code>video</code></a></li> + <li>L'élément <code>audio</code> selon <a href="https://www.whatwg.org/specs/web-apps/current-work/#audio">la spécification HTML5</a></li> + <li><a href="/fr/Apps/Fundamentals/Audio_and_video_delivery/Cross-browser_audio_basics">Utiliser des médias audio pour les différents navigateurs</a></li> +</ul> diff --git a/files/fr/web/html/element/b/index.html b/files/fr/web/html/element/b/index.html new file mode 100644 index 0000000000..bad2d8383b --- /dev/null +++ b/files/fr/web/html/element/b/index.html @@ -0,0 +1,119 @@ +--- +title: '<b> : l''élément portant à l''attention' +slug: Web/HTML/Element/b +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/b +--- +<div>{{HTMLRef}}</div> + +<p>L'élément <strong><code><b></code></strong> permet d'attirer l'attention du lecteur sur le contenu d'un élément sans que ce contenu revêt une importance particulière. Anciennement utilisé pour mettre le texte en gras. Cet élément ne doit pas être utilisé pour mettre en forme des éléments, c'est la propriété CSS {{cssxref("font-weight")}} qu'il faut utiliser. Si l'élément est d'une importance particulière, on utilisera l'élément HTML {{HTMLElement("strong")}}.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/b.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> + +<h2 id="Attributs">Attributs</h2> + +<p>Seuls <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> peuvent être utilisés pour cet élément.</p> + +<h2 id="Notes_d'utilisation"><strong>Notes d'utilisation</strong></h2> + +<ul> + <li><code><b></code> est habituellement utilisé pour les mots-clés dans les résumés, les noms de produits dans des tests (sans que ceux-ci aient une importance particulière). Il peut également être utilisé afin d'indiquer la première phrase de chaque paragraphe d'un article.</li> + <li>Il ne faut pas confondre l'élément <code><b></code> avec les éléments {{HTMLElement("strong")}}, {{HTMLElement("em")}}, ou {{HTMLElement("mark")}}. L'élément {{HTMLElement("strong")}} réprésente un texte d'une certaine <em>importance</em>, {{HTMLElement("em")}} met une emphase sur le texte et {{HTMLElement("mark")}} réprésente un texte avec une certaine <em>pertinence</em>. L'élément <code><b></code> ne porte aucune information sémantique particulière ; utilisez-le lorsque qu'aucun autre ne convient.</li> + <li>De la même façon, ne balisez pas les titres en utilisant l'élément <code><b></code>. Pour cet usage, utilisez les balises {{HTMLElement("h1")}} à {{HTMLElement("h6")}}. De plus, les feuilles de style peuvent changer le style par défaut de ces éléments. Ils ne seront pas <em>forcément</em> affichés en gras.</li> + <li>C'est généralement une bonne pratique d'utiliser l'attribut {{htmlattrxref("class")}} sur l'élément <code><b></code> lorsqu'on souhaite transporter des informations sémantiques supplémentaires. Cela facilitera le développement des styles à appliquer sur le document, sans avoir à modifier le code HTML.</li> + <li>Historiquement, l'élément <b> a été pensé pour rendre du texte avec une police grasse. Les éléments à seul but stylistique on été déprécié avec HTML 4. Ainsi, le sens de l'élément <code><b></code> a évolué.</li> + <li>S'il n'y aucune raison particulière d'utiliser l'élément <code><b></code>, en dehors de son apparence en gras, l'utilisation de la propriété <a href="/fr/docs/Web/CSS">CSS</a> {{cssxref('font-weight')}} avec une valeur <code>bold</code> est à privilégier.</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: html"><p> + Cet article décrit plusieurs éléments <b class="keyword">texte</b>. + Il explique leurs usage dans un document <b class="keyword">HTML</b>. +</p> +Les mots-clés sont affichés avec le style par défaut de +l'élément &lt;b&gt;, sûrement en gras. +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","200","300")}}</p> + +<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_tangible">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row"><dfn>Omission de balises</dfn></th> + <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</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>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row"><dfn>Interface DOM</dfn></th> + <td>{{domxref("HTMLElement")}}</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', 'semantics.html#the-b-element', '<b>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-b-element', '<b>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}</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> + +<p>{{Compat("html.elements.b")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments portants une sémantique textuelle : {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("abbr")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> + <li><a href="https://www.w3.org/International/questions/qa-b-and-i-tags">Utiliser les éléments <code><b></code> et <code><i></code> (W3C)</a></li> +</ul> diff --git a/files/fr/web/html/element/base/index.html b/files/fr/web/html/element/base/index.html new file mode 100644 index 0000000000..c98d297dd2 --- /dev/null +++ b/files/fr/web/html/element/base/index.html @@ -0,0 +1,122 @@ +--- +title: '<base> : l''élément pour l''URL de base du document' +slug: Web/HTML/Element/base +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/base +--- +<div>{{HTMLRef}}</div> + +<p>L'élément <strong><code><base></code></strong> définit l'URL de base à utiliser pour recomposer toutes les URL relatives contenues dans un document. Il ne peut y avoir qu'un seul élément <code><base></code> au sein d'un document.</p> + +<p>Il est possible d'accéder à l'URL de base d'un document via un script en utilisant {{domxref('document.baseURI')}}.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a> peuvent être utilisés sur cet élément.</p> + +<dl> + <dt>{{htmlattrdef("href")}}</dt> + <dd>L'URL de base à utiliser afin de recomposer les URL relatives contenues dans le document. Si cet attribut est défini, cet élément doit être présent avant les éléments dont les attributs sont des URL.<br> + Les URI absolues et relatives sont autorisées (voir la note ci-après).</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd>Un nom ou un mot-clé qui indique l'emplacement par défaut à utiliser pour afficher le résultat de la navigation via les hyperliens ou les formulaires. Il sera utilisé pour les éléments qui ne possèdent pas de cible (<em>target</em>) explicitement déclarées. En HTML4 c'est un nom ou un mot-clé associé à une <em>frame</em>. En HTML5, c'est un nom ou un mot-clé associé à un <em>contexte de navigation</em> (par exemple un onglet, une fenêtre ou une <em>frame</em>). Les mots-clés qui sont utilisés ont la signification suivante : + <ul> + <li><code>_self</code> : Charge le résultat dans la même <em>frame</em> HTML4 ou dans le même contexte de navigation HTML5 que le contexte courant. C'est la valeur par défaut de l'attribut s'il n'est pas utilisé.</li> + <li><code>_blank</code> : Charge le résultat dans une nouvelle fenêtre HTML4 non-nommée ou dans un nouveau contexte de navigation HTML5.</li> + <li><code>_parent</code> : Charge le résultat dans le <em>frameset</em> parent de la <em>frame</em> courante HTML4 ou dans le contexte de navigation parent du contexte courant HTML5. S'il n'y a pas de parent, cette option aura le même effet que <code>_self</code>.</li> + <li><code>_top</code> : En HTML4, charge le résultat dans la fenêtre originelle, supprimant les autres <em>frames</em>. En HTML5, charge le résultat dans le contexte de navigation de plus haut niveau (c'est-à-dire le contexte de navigation qui est un ancêtre du contexte courant et qui n'a pas de parent). S'il n'y a pas de parent, cette option aura le même effet que <code>_self</code>.</li> + </ul> + + <p>Si cet attribut est défini, cet élément devra être situé avant n'importe quel élément dont les valeurs des attributs sont des URL.</p> + </dd> +</dl> + +<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> + +<h3 id="Priorité">Priorité</h3> + +<p>Si plusieurs éléments <code><base></code> sont utilisés, seules les premières valeurs pour <code><strong>href</strong></code> et <code><strong>target</strong></code> sont utilisées, les autres valeurs sont ignorées.</p> + +<h3 id="Ancres">Ancres</h3> + +<p>Les ancres d'une page ({{HTMLElement("a")}}), par exemple <code><a href="#ancre">ancre</a></code>, sont résolues avec l'URL de base fournie via <code><base></code> et déclenche une requête HTTP vers l'URL de base.</p> + +<p>Ainsi, avec un document qui contient <code><base href="http://www.example.com/"></code> et plus loin <code><a href="#ancre">Ancre</a></code>, le lien fourni par l'ancre pointera vers <code>http://www.example.com/#ancre</code>.</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: html"><base href="http://www.example.com/"> +<base target="_blank" href="http://www.example.com/"> +</pre> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <th><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_m.C3.A9ta-donn.C3.A9es">Contenu de méta-données</a>.</td> + </tr> + <tr> + <th><dfn>Contenu autorisé</dfn></th> + <td>Aucun, c'est un élément vide.</td> + </tr> + <tr> + <th><dfn>Omission de balises</dfn></th> + <td>Il ne doit pas y avoir de balise fermante.</td> + </tr> + <tr> + <th> + <p><dfn>Parents autorisés</dfn></p> + </th> + <td>N'importe quel élément {{HTMLElement("head")}} qui ne contient pas un autre élément {{HTMLElement("base")}}.</td> + </tr> + <tr> + <th>Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th><dfn>Interface DOM</dfn></th> + <td>{{domxref("HTMLBaseElement")}}</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', 'semantics.html#the-base-element', '<base>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Aucune modification depuis la dernière dérivation.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata#the-base-element', '<base>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Définition du comportement de l'attribut <code>target</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.4', '<base>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Ajout de l'attribut <code>target</code>.</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.base")}}</p> diff --git a/files/fr/web/html/element/basefont/index.html b/files/fr/web/html/element/basefont/index.html new file mode 100644 index 0000000000..1906d3fc9e --- /dev/null +++ b/files/fr/web/html/element/basefont/index.html @@ -0,0 +1,66 @@ +--- +title: <basefont> +slug: Web/HTML/Element/basefont +tags: + - Element + - HTML + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/basefont +--- +<div>{{obsolete_header}}{{HTMLRef}}</div> + +<p>L'élément <code><strong><basefont></strong></code> définit la police par défaut (taille, fonte, couleur) pour les éléments qui sont des descendants de cet élément. La taille de la police utilisée peut ensuite varier relativement à cette taille de base grâce à l'élément {{HTMLElement("font")}}.</p> + +<div class="warning"> +<p><strong>Note d'utilisation : N'utilisez pas cet élément !</strong> L'ancien comportement de l'élément {{HTMLElement("font")}} peut être obtenu et contrôlé plus efficacement grâce <a href="/fr/docs/Web/CSS/CSS_Fonts">aux propriétés CSS relatives aux polices de caractères</a>.</p> +</div> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme tous les autres éléments HTML, cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("color")}}</dt> + <dd>Cet attribut définit la couleur du texte grâce à une couleur nommée ou à une couleur définie dans un format hexadécimal #RRGGBB.</dd> + <dt>{{htmlattrdef("face")}}</dt> + <dd>Cet attribut contient une liste d'un ou plusieurs noms de police. Le texte du document, dans son style par défaut, est rendu avec la première police prise en charge par le navigateur du client. Si aucune police listée ne se trouve sur le système local, le navigateur utilise la police proportionnelle ou à largeur fixe du système.</dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd>Cet attribut définit la taille de la police avec une valeur numérique ou relative. Les valeurs numériques vont de 1 à 7 ; 1 étant la plus petite et 3 la taille par défaut.</dd> +</dl> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Cette élément implémente l'interface {{domxref('HTMLBaseFontElement')}}.</p> + +<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> + +<p>Bien qu'ayant été une fois normalisé (imprécisément) dans HTML 3.2, il n'a pas été pris en charge par l'ensemble des navigateurs principaux. De plus, les différents navigateurs et leurs versions successives ne l'ont jamais implémentés de la même façon. Utiliser cet élément a toujours produit un résultat <em>imprévisible</em>.</p> + +<p>L'élément <code><basefont></code> a été rendu obsolète dans le standard, comme les autres éléments qui se limitaient à l'apparence. À partir de HTML4, HTML n'apporte plus d'informations de présentation (en dehors de {{HTMLElement("style")}} et de l'attribut <code><strong>style</strong></code> de chaque élément). Avec HTML5, l'élément <code><basefont></code> a complètement été retiré. Pour tout nouveau développement web, seul CSS doit être utilisé pour les aspects de présentation.</p> + +<p>Il faut privilégier <a href="/fr/docs/Web/CSS/CSS_Fonts">les propriétés CSS relatives aux polices de caractères</a> pour obtenir l'effet souhaité.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><basefont color="#FF0000" face="Helvetica" size="+2" /> +</pre> + +<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.basefont")}}</p> + +<h2 id="Notes">Notes</h2> + +<ul> + <li>HTML 3.2 supporte l'élément <code><basefont></code> mais seulement avec son attribut <code>size</code>.</li> + <li>Les spécifications HTML strict et XHTML ne supportent pas cet élément.</li> + <li>Bien qu'ayant fait parti de standards transitionnels, certains navigateurs respectant les standards comme Mozilla et Opera ne supportent pas cet élément.</li> + <li>Cet élément peut être imité avec une règle CSS sur l'élément {{HTMLElement("body")}}.</li> + <li>XHTML 1.0 requiert une barre oblique de fermeture à la fin de cet élément : <code><basefont /></code>.</li> +</ul> diff --git a/files/fr/web/html/element/bdi/index.html b/files/fr/web/html/element/bdi/index.html new file mode 100644 index 0000000000..cb0e30ee63 --- /dev/null +++ b/files/fr/web/html/element/bdi/index.html @@ -0,0 +1,199 @@ +--- +title: '<bdi> : l''élément d''isolation bidirectionnelle' +slug: Web/HTML/Element/bdi +tags: + - BiDi + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/bdi +--- +<div>{{HTMLRef}}</div> + +<p>L'élément <strong><code><bdi></code></strong> (ou élément d'isolation de texte bidirectionnel) isole une portée (<em>span</em>) de texte pouvant être formatée dans une direction différente de celle du texte qui l'entoure. Cela permet, par exemple, de présenter correctement une citation en arabe (écrit de droite à gauche) au sein d'un texte écrit en français (écrit de gauche à droite).</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/bdi.html", "tabbed-standard")}}</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> + +<p>Cet élément est utile lorsqu'on intègre du texte dont on ignore la directivité (provenant d'une base de données par exemple), au sein d'un autre texte dont la direction est connue.</p> + +<p class="note"><strong>Note :</strong> On peut également utiliser l'attribut {{htmlattrxref("dir")}} afin de surcharger la directionnalité de l'élément décidée par l'agent utilisateur pour le contenu de l'élément <code><bdi></code>.</p> + +<p>Un texte bidirectionnel est un texte qui contient à la fois des suites de caractères à lire de gauche à droite (LTR pour <em>left-to-right</em>) et des suites de caractères à lire de droite à gauche (RTL pour <em>right-to-left</em>), par exemple une citation en arabe dans un texte en néerlandais. Les navigateurs implémentent <a href="https://www.w3.org/International/articles/inline-bidi-markup/uba-basics">l'algorithme de bidirectionnalité Unicode</a> afin de gérer ces cas. Dans cet algorithme, les caractères ont une directionnalité implicite : les caractères latins sont considérés comme LTR et les caractères arabes comme RTL par exemple. D'autres caractères, comme les espaces ou certains caractères de ponctuation sont considérés comme neutres et leur directionnalité est fournie par les caractères environnant.</p> + +<p>La plupart du temps, cet algorithme fournira le bon résultat, sans que l'auteur ait besoin de fournir un balisage spécifique. Toutefois, dans certains cas, il faudra aider l'algorithme et c'est là qu'intervient <code><bdi></code>.</p> + +<p>L'élément <code><bdi></code> est utilisé afin d'encadrer un fragment de texte pour indiquer à l'algorithme de traiter ce texte avec une directionnalité différente du texte qui l'entoure. Cela fonctionne selon deux axes :</p> + +<ul> + <li>La directionnalité du texte contenu dans <code><bdi></code> <em>n'influence pas</em> la directionnalité du texte environnant.</li> + <li>La directionnalité du texte contenu dans <code><bdi></code> <em>n'est pas influencée</em> par la directionnalité du texte environnant.</li> +</ul> + +<p>Prenons le texte suivant :</p> + +<pre class="no-line-numbers">TEXTE-INJECTÉ - 1re place</pre> + +<p>Si <code>TEXTE-INJECTÉ</code> est un texte LTR, aucun problème. En revanche, si <code>TEXTE-INJECTÉ</code> est RTL, <code> - 1</code> sera considéré comme du texte RTL (car ce fragment est composé de caractères neutres/faibles pour la directionnalité) et le résultat sera donc un mélange incohérent :</p> + +<pre class="no-line-numbers">1 - TEXTE-INJECTÉre place</pre> + +<p>Si on connaît d'avance la directionnalité de <code>TEXTE-INJECTÉ</code>, on peut corriger le problème en enveloppant <code>TEXTE-INJECTÉ</code> dans un élément {{HTMLElement("span")}} avec un attribut {{htmlattrxref("dir")}} décrivant la bonne directionnalité. Cependant, si on ne connaît pas la directionnalité à l'avance (<code>TEXTE-INJECTÉ</code> provenant d'une base de données ou étant saisi par un utilisateur), on utilisera <code><bdi></code> afin d'empêcher la directionnalité de <code>TEXTE-INJECTÉ</code> d'avoir un impact sur le texte environnant.</p> + +<p>Bien que le même effet de rendu puisse être créé avec la règle CSS {{cssxref("unicode-bidi")}}<code> : isolate</code> sur un élément {{HTMLElement("span")}} ou toute méthode de formatage du texte, la sémantique est ici uniquement portée par l'élément <code><bdi></code> . Les navigateurs peuvent notamment ignorer la mise en forme induite par la feuille CSS. Dans ce cas, le texte serait bien affiché en utilisant l'élément HTML mais deviendrait inutilisable si seul CSS est utilisé pour apporter cette information.</p> + +<p>Utiliser <code><span dir="auto"></code> aura le même effet qu'utiliser <code><bdi></code> mais la sémantique portée sera moindre.</p> + +<p>Pour en apprendre plus sur le texte bidirectionnel en HTML, nous vous invitons à lire <a href="/fr/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm">cet article sur l'algorithme qui détermine la direction du texte</a>.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme tous les éléments HTML, cet élément dispose des <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>. Cependant il a une sémantique légèrement différente. En effet, l'attribut <code><strong>dir</strong></code> n'est pas hérité. S'il n'est pas renseigné, sa valeur par défaut sera <code>auto</code> et le navigateur décidera de la direction à appliquer selon le contenu de l'élément si aucune valeur parmi <code>"rtl"</code>, <code>"ltr"</code> n'est fournie.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Texte_écrit_de_gauche_à_droite">Texte écrit de gauche à droite</h3> + +<p>Cet exemple affiche les gagnants d'une compétition grâce à des éléments {{HTMLElement("span")}}. Ici, les noms ne s'écrivent que de gauche à droite et le résultat s'affiche correctement :</p> + +<div id="bdi-sample-1"> +<pre class="brush: html"><ul> + <li><span class="name">Henrietta Boffin</span> - 1re place</li> + <li><span class="name">Jerry Cruncher</span> - 2e place</li> +</ul> +</pre> + +<div class="hidden"> +<pre class="brush: css">body { + border: 1px solid #3f87a6; + max-width: calc(100% - 40px - 6px); + padding: 20px; + width: calc(100% - 40px - 6px); + border-width: 1px 1px 1px 5px; +} +</pre> +</div> +</div> + +<p>{{EmbedLiveSample('bdi-sample-1','','120','','','bdi-example')}}</p> + +<h3 id="Texte_de_droite_à_gauche">Texte de droite à gauche</h3> + +<p>Cela fonctionne sans problème tant que les noms s'écrivent de gauche à droite. Lorsqu'on insère un nom écrit de droite à gauche, la partie "<code>- 1</code>" sera captée par le texte en RTL et le résultat sera confus :</p> + +<div id="bdi-sample-2"> +<pre class="brush: html"><ul> + <li><span class="name">اَلأَعْشَى</span> - 1re place</li> + <li><span class="name">Jerry Cruncher</span> - 2e place</li> +</ul> +</pre> + +<div class="hidden"> +<pre class="brush: css">body { + border: 1px solid #3f87a6; + max-width: calc(100% - 40px - 6px); + padding: 20px; + width: calc(100% - 40px - 6px); + border-width: 1px 1px 1px 5px; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('bdi-sample-2','','120','','','bdi-example') }}</p> + +<h3 id="Utiliser_<bdi>_avec_du_texte_utilisant_les_deux_directions">Utiliser <code><bdi></code> avec du texte utilisant les deux directions</h3> + +<p>Pour éviter cet écueil, on pourra utiliser <code><bdi></code> pour séparer le contenu :</p> + +<div id="bdi-sample-3"> +<pre class="brush: html"><ul> + <li><bdi class="name">اَلأَعْشَى</bdi> - 1re place</li> + <li><bdi class="name">Jerry Cruncher</bdi> - 2e place</li> +</ul> +</pre> + +<div class="hidden"> +<pre class="brush: css">body { + border: 1px solid #3f87a6; + max-width: calc(100% - 40px - 6px); + padding: 20px; + width: calc(100% - 40px - 6px); + border-width: 1px 1px 1px 5px; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('bdi-sample-3','','120','','','bdi-example') }}</p> + +<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_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>.</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>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</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', 'semantics.html#the-bdi-element', '<bdi>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-bdi-element', '<bdi>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</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> + +<p>{{Compat("html.elements.bdi")}}</p> + +<h2 dir="ltr" id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/Localization">La localisation et l'internationalisation</a></li> + <li>{{HTMLElement("bdo")}}</li> + <li>Les propriétés CSS {{cssxref("direction")}} et {{cssxref("unicode-bidi")}}</li> +</ul> diff --git a/files/fr/web/html/element/bdo/index.html b/files/fr/web/html/element/bdo/index.html new file mode 100644 index 0000000000..2df6620cf0 --- /dev/null +++ b/files/fr/web/html/element/bdo/index.html @@ -0,0 +1,113 @@ +--- +title: '<bdo> : l''élément de surcharge bidirectionnelle' +slug: Web/HTML/Element/bdo +tags: + - BiDi + - Element + - HTML + - Reference +translation_of: Web/HTML/Element/bdo +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><bdo></code> </strong>(pour <em><strong>b</strong>i<strong>d</strong>irectional <strong>o</strong>verride</em> ou « surcharge bidirectionnelle ») est utilisé afin d'outrepasser la direction du texte. Cela permet d'imposer une direction donnée à un texte. L'orientation du texte est inversée mais pas celle des caractères.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/bdo.html", "tabbed-standard")}}</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> + + +<h2 id="Attributs">Attributs</h2> + +<p>Comme pour tous les éléments, on peut appliquer <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("dir")}}</dt> + <dd>La direction du texte au sein de l'élément. Cet attribut peut valoir : + <ul> + <li><code>ltr</code> : pour un texte allant de gauche à droite (<em>left-to-right</em>).</li> + <li><code>rtl</code> : pour un texte allant de droite à gauche (<em>right-to-left</em>).</li> + <li><code>auto</code> : Selon la nature du contenu, le navigateur décide de la direction.</li> + </ul> + </dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><!-- Change la direction du texte --> +<p>Ce texte se lit de gauche à droite.</p> +<p><bdo dir="rtl">Ce texte se lit de droite à gauche.</bdo></p></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<h2 id="Note">Note</h2> + +<p>La spécification HTML 4 ne définissait pas d'évènement pour cet élément. Ils ont été ajoutés en XHTML. Ceci était probablement un oubli de la spécification HTML 4.</p> +<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_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>.</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>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row"><dfn>Interface DOM</dfn></th> + <td>{{domxref("HTMLElement")}}. Auparavant et jusqu'à Gecko 1.9.2 (Firefox 4) inclus, Firefox implémente l'interface {{domxref("HTMLSpanElement")}} pour cet élément.</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', 'semantics.html#the-bdo-element', '<bdo>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-bdo-element', '<bdo>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'dirlang.html#h-8.2.4', '<bdo>')}}</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> + +<p>{{Compat("html.elements.bdo")}}</p> diff --git a/files/fr/web/html/element/bgsound/index.html b/files/fr/web/html/element/bgsound/index.html new file mode 100644 index 0000000000..a4bcdd1142 --- /dev/null +++ b/files/fr/web/html/element/bgsound/index.html @@ -0,0 +1,59 @@ +--- +title: '<bgsound> : l''élément d''arrière-plan sonore (obsolète)' +slug: Web/HTML/Element/bgsound +tags: + - Element + - HTML + - Non-standard + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/bgsound +--- +<div>{{HTMLRef}}{{non-standard_header}}{{obsolete_header}}</div> + +<p>L'élément HTML <strong><code><bgsound></code></strong> (pour <em>background sound</em> ou « son d'arrière-plan ») est un élément défini par Internet Explorer qui permet d'associer un son d'ambiance à une page.</p> + +<div class="warning"> +<p><strong>Attention : cet élément n'est pas standard et ne doit pas être utilisé !</strong> Pour intégrer du son à une page web, on utilisera l'élément {{HTMLElement("audio")}}.</p> +</div> + +<h2 id="Attributs">Attributs</h2> + +<dl> + <dt>{{htmlattrdef("balance")}}</dt> + <dd>Cet attribut accepte un nombre entre -10 000 et +10 000, qui déterminera comment le volume sera réparti entre les hauts-parleurs (ou les écouteurs).</dd> + <dt>{{htmlattrdef("loop")}}</dt> + <dd>Cet attribut indique le nombre de fois que le son doit être joué, grâce à une valeur numérique ou avec le mot-clé <code>infinite</code> (infini).</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>Cet attribut indique l'URL du fichier sonore qui doit être joué. Il doit être d'un des types suivants : .wav, .au, ou .mid.</dd> + <dt>{{htmlattrdef("volume")}}</dt> + <dd>Cet attribut accepte un nombre entre -10 000 et 0 qui déterminera le volume du son.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html"><bgsound src="son1.mid"> + +<bgsound src="son2.au" loop="infinite"> +</pre> + +<h2 id="Notes">Notes</h2> + +<p>Une fonctionnalité similaire pouvait être obtenue dans d'autres navigateurs grâce à l'élément {{htmlelement("embed")}} afin d'invoquer un lecteur audio. Cet élément étant également obsolète, il est préférable d'utiliser {{HTMLElement("audio")}}.</p> + +<p>On peut écrire <code>bgsound</code> avec une balise auto-fermante <code><bgsound /></code>. Cependant, puisque cet élément ne fait pas partie du standard, le transformer en XHTML ne le rendra pas valide.</p> + +<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.bgsound")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'élément standard {{htmlelement("audio")}} qui permet d'ajouter du son dans un document HTML.</li> +</ul> diff --git a/files/fr/web/html/element/big/index.html b/files/fr/web/html/element/big/index.html new file mode 100644 index 0000000000..77536b5bb8 --- /dev/null +++ b/files/fr/web/html/element/big/index.html @@ -0,0 +1,67 @@ +--- +title: '<big> : l''élément d''agrandissement de texte (obsolète)' +slug: Web/HTML/Element/big +tags: + - Element + - HTML + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/big +--- +<div>{{obsolete_header}}{{HTMLRef}}</div> + +<p>L'élément <strong><code><big></code></strong> (gros) augmente d'une taille la police du texte de l'élément (il permet par exemple de passer de <code>small</code> à <code>medium</code>, ou de <code>large</code> à <code>x-large</code>) jusqu'à atteindre la taille maximale du navigateur.</p> + +<div class="note"> +<p><strong>Note d'utilisation : </strong>Cet élément est purement stylistique. Il a été supprimé dans <a href="/fr/docs/Web/Guide/HTML/HTML5">HTML5</a> et ne doit plus être utilisé. Les développeurs web doivent utiliser les propriétés <a href="/fr/docs/Web/CSS">CSS</a> pour remplacer cet élément.</p> +</div> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément n'a aucun autre attribut en dehors des <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a> communs à tous les éléments.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_simple">Exemple simple</h3> + +<pre class="brush: html"><p> + Ceci est la première phrase. + <big> + Cette phrase est en grosses lettres. + </big> +</p></pre> + +<h3 id="Utilisation_du_CSS_pour_remplacer_<big>">Utilisation du CSS pour remplacer <code><big></code></h3> + +<pre class="brush: html"><p> + Ceci est la première phrase. + <span style="font-size:1.2em"> + Cette phrase est en grosses lettres. + </span> +</p></pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample("Utilisation_du_CSS_pour_remplacer_&lt;big&gt;",300,200)}}</p> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Cette élément implémente l'interface {{domxref('HTMLElement')}}.</p> + +<div class="note"><strong>Note d'implémentation : </strong>Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface {{domxref('HTMLSpanElement')}} pour cet élément.</div> + +<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.big")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{htmlelement("small")}}</li> + <li>{{htmlelement("font")}}</li> + <li>{{htmlelement("style")}}</li> + <li>Spécification HTML 4.01 sur <a class="external" href="http://www.w3.org/TR/html4/present/graphics.html#h-15.2">la mise en forme des polices</a></li> +</ul> diff --git a/files/fr/web/html/element/blink/index.html b/files/fr/web/html/element/blink/index.html new file mode 100644 index 0000000000..1baca82026 --- /dev/null +++ b/files/fr/web/html/element/blink/index.html @@ -0,0 +1,82 @@ +--- +title: '<blink> : l''élément de texte clignotant (obsolète)' +slug: Web/HTML/Element/blink +tags: + - Déprécié + - Element + - HTML + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/blink +--- +<div>{{HTMLRef}}{{Deprecated_header}}{{obsolete_header}}{{Non-standard_header}}</div> + +<p>L'élément HTML <strong><code><blink></code></strong> (N.D.T <em>blink</em> signifie « clignoter ») est un élément non-standard faisant clignoter le texte qu'il contient.</p> + +<div class="warning"><strong>Attention :</strong> ne pas utiliser cet élément qui n'est pas standard et qui est obsolète. Le clignotement de texte est contraire à la plupart des standards d'accessibilité, la spécification CSS permet donc aux navigateurs d'ignorer la valeur <code>blink</code><strong>.</strong></div> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Cet élément n'est pas pris en charge et implémente donc l'interface {{domxref('HTMLUnknownElement')}}.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html"><blink>ლ(ಠ_ಠლ)</blink> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","300","200")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<p>Cet élément est non-standard et n'appartient à aucune spécification. Pour vérifier, <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#non-conforming-features">voir la spécification HTML</a>.</p> + +<h2 id="Prothèse_CSS_(polyfill)">Prothèse CSS (<em>polyfill</em>)</h2> + +<p>Si vous avez réellement besoin de cette fonctionnalité (!!!) vous pouvez utiliser le code CSS suivant qui fonctionne à partir d'IE10.</p> + +<pre class="brush: css">blink { + -webkit-animation: 2s linear infinite condemed_blink_effect; // pour Safari 4.0-8.0 + animation: 2s linear infinite condemed_blink_effect; +} +@-webkit-keyframes condemed_blink_effect { // pour Safari 4.0-8.0 + 0% { + visibility: hidden; + } + 50% { + visibility: hidden; + } + 100% { + visibility: visible; + } +} +@keyframes condemed_blink_effect { + 0% { + visibility: hidden; + } + 50% { + visibility: hidden; + } + 100% { + visibility: visible; + } +}</pre> + +<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.blink")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="http://www.montulli.org/theoriginofthe%3Cblink%3Etag">Histoire autour de la création de l'élément <code><blink></code></a></li> + <li>{{cssxref("text-decoration")}} qui possède une valeur pour le clignotement, bien que les navigateurs ne soient pas obligés de restituer cet effet</li> + <li>{{htmlelement("marquee")}}, un autre élément non-standard similaire</li> + <li><a href="/fr/docs/Web/CSS/Animations_CSS">Les animations CSS</a> sont la meilleure façon d'obtenir un tel effet</li> +</ul> diff --git a/files/fr/web/html/element/blockquote/index.html b/files/fr/web/html/element/blockquote/index.html new file mode 100644 index 0000000000..31d38579c2 --- /dev/null +++ b/files/fr/web/html/element/blockquote/index.html @@ -0,0 +1,119 @@ +--- +title: '<blockquote> : l''élément de bloc de citation' +slug: Web/HTML/Element/blockquote +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/blockquote +--- +<div>{{HTMLRef}}</div> + +<p>L'élément <strong><code><blockquote></code></strong> (qui signifie <em>bloc de citation</em>) indique que le texte contenu dans l'élément est une citation longue. Le texte est généralement affiché avec une indentation (voir <a href="#notes">les notes</a> ci-après). Une URL indiquant la source de la citation peut être donnée grâce à l'attribut <strong><code>cite</code></strong> tandis qu'un texte représentant la source peut être donné via l'élément {{HTMLElement("cite")}}.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/blockquote.html","tabbed-standard")}}</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> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme pour tous les éléments HTML, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_globaux">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("cite")}}</dt> + <dd>Une URL qui désigne la source du document ou du message cité. Cet attribut est prévu pour signaler l'information expliquant le contexte ou la référence de la citation</dd> +</dl> + +<h2 id="Notes"><a id="notes" name="notes">Notes</a></h2> + +<ul> + <li>Pour changer l'indentation de <code><blockquote></code>, on utilisera la propriété <a href="/fr/docs/Web/CSS">CSS</a> {{cssxref("margin-left")}} ou {{cssxref("margin-right")}} (ou encore la propriété raccourcie {{cssxref("margin")}})</li> + <li>Pour les citations courtes, on pourra utiliser l'élément {{HTMLElement("q")}}.</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><blockquote cite="http://developer.mozilla.org"> + <p>Ceci est une citation issue du Mozilla Developer Network.</p> +</blockquote> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","200","200")}}</p> + +<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>, racine de section, <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_de_flux">Contenu de flux</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_de_flux">contenu de flux</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLQuoteElement")}}</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', 'semantics.html#the-blockquote-element', '<blockquote>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-blockquote-element', '<blockquote>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '<blockquote>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("html.elements.blockquote")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("q")}} qui permet de placer des citations en incise dans une ligne de texte.</li> + <li>{{HTMLElement("cite")}} qui permet d'indiquer la source de la citation.</li> +</ul> diff --git a/files/fr/web/html/element/body/index.html b/files/fr/web/html/element/body/index.html new file mode 100644 index 0000000000..a4ea8947d5 --- /dev/null +++ b/files/fr/web/html/element/body/index.html @@ -0,0 +1,172 @@ +--- +title: '<body> : l''élément pour le corps du document' +slug: Web/HTML/Element/body +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/body +--- +<div>{{HTMLRef}}</div> + +<p>L'élément <strong><code><body></code></strong> représente le contenu principal du document HTML. Il ne peut y avoir qu'un élément <code><body></code> par document.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme pour tous les autres éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("alink")}} {{obsolete_inline}}</dt> + <dd>La couleur du texte quand les liens hypertextes sont sélectionnés. La propriété CSS {{cssxref("color")}} doit être utilisé à la place avec la pseudo-classe {{cssxref(":active")}}.</dd> + <dt>{{htmlattrdef("background")}} {{obsolete_inline}}</dt> + <dd>L'URI d'une image à utiliser en tant qu'arrière-plan. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS {{cssxref("background")}} à la place.</dd> + <dt>{{htmlattrdef("bgcolor")}} {{obsolete_inline}}</dt> + <dd>Couleur d'arrière-plan pour le document. Cette méthode n'est pas conforme, utiliser la propriété CSS {{cssxref("background-color")}} sur l'élément à la place.</dd> + <dt>{{htmlattrdef("bottommargin")}} {{obsolete_inline}}</dt> + <dd>La marge à appliquer en bas du corps de la page. Cette méthode n'est pas conforme, il faut utiliser la propriété CSS {{cssxref("margin-bottom")}} sur l'élément.</dd> + <dt>{{htmlattrdef("leftmargin")}} {{obsolete_inline}}</dt> + <dd>La marge à appliquer à gauche du corps de la page. Cette méthode n'est pas conforme. Il faut utiliser la propriété CSS {{cssxref("margin-left")}} à la place.</dd> + <dt>{{htmlattrdef("link")}} {{obsolete_inline}}</dt> + <dd>La couleur du texte à utiliser pour les liens non visités. Cette méthode n'est pas conforme, il faut utiliser la propriété CSS {{cssxref("color")}} avec la pseudo-classe {{cssxref(":link")}}.</dd> + <dt>{{htmlattrdef("onafterprint")}} {{HTMLVersionInline(5)}}</dt> + <dd>Fonction à appeler après que l'utilisateur ait imprimé le document.</dd> + <dt>{{htmlattrdef("onbeforeprint")}} {{HTMLVersionInline(5)}}</dt> + <dd>Fonction à appeler lorsque l'utilisateur lance une impression du document.</dd> + <dt>{{htmlattrdef("onbeforeunload")}} {{HTMLVersionInline(5)}}</dt> + <dd>Fonction à appeler avant que le document ne disparaisse.</dd> + <dt>{{htmlattrdef("onblur")}} {{HTMLVersionInline(5)}}</dt> + <dd>Fonction à appeler quand le document perd le focus.</dd> + <dt>{{htmlattrdef("onerror")}} {{HTMLVersionInline(5)}}</dt> + <dd>Fonction à appeler quand le document n'arrive pas à se charger correctement.</dd> + <dt>{{htmlattrdef("onfocus")}} {{HTMLVersionInline(5)}}</dt> + <dd>Fonction à appeler quand le document reçoit le focus.</dd> + <dt>{{htmlattrdef("onhashchange")}} {{HTMLVersionInline(5)}}</dt> + <dd>Fonction à appeler quand le fragment (la partie commençant avec le caractère #) de l'adresse actuelle du document, a changé.</dd> + <dt>{{htmlattrdef("onlanguagechange")}} {{experimental_inline}}</dt> + <dd>Fonction à appeler lorsque les langues préférées ont été modifiées.</dd> + <dt>{{htmlattrdef("onload")}} {{HTMLVersionInline(5)}}</dt> + <dd>Fonction à appeler quand le document a fini de charger.</dd> + <dt>{{htmlattrdef("onmessage")}} {{HTMLVersionInline(5)}}</dt> + <dd>Fonction à appeler quand le document a reçu un message.</dd> + <dt>{{htmlattrdef("onoffline")}} {{HTMLVersionInline(5)}}</dt> + <dd>Fonction à appeler quand la connexion réseau est perdue.</dd> + <dt>{{htmlattrdef("ononline")}} {{HTMLVersionInline(5)}}</dt> + <dd>Fonction à appeler quand la connexion réseau est restaurée.</dd> + <dt>{{htmlattrdef("onpopstate")}} {{HTMLVersionInline(5)}}</dt> + <dd>Fonction à appeler quand l'utilisateur se déplace dans son historique de session.</dd> + <dt>{{htmlattrdef("onredo")}} {{HTMLVersionInline(5)}}</dt> + <dd>Fonction à appeler quand l'utilisateur avance et refait un élément de l'historique de transaction.</dd> + <dt>{{htmlattrdef("onresize")}} {{HTMLVersionInline(5)}}</dt> + <dd>Fonction à appeler quand le document a été redimensionné.</dd> + <dt>{{htmlattrdef("onstorage")}} {{HTMLVersionInline(5)}}</dt> + <dd>Fonction à appeler quand la zone de stockage a changée.</dd> + <dt>{{htmlattrdef("onundo")}} {{HTMLVersionInline(5)}}</dt> + <dd>Fonction à appeler quand l'utilisateur recule et défait l'historique de transaction.</dd> + <dt>{{htmlattrdef("onunload")}} {{HTMLVersionInline(5)}}</dt> + <dd>Fonction à appeler quand le document disparait.</dd> + <dt>{{htmlattrdef("rightmargin")}} {{obsolete_inline}}</dt> + <dd>La marge à appliquer à droite du corps de la page. Cette méthode n'est pas standard, il faut utiliser la propriété CSS {{cssxref("margin-right")}} sur l'élément à la place.</dd> + <dt>{{htmlattrdef("text")}} {{obsolete_inline}}</dt> + <dd>La couleur à utiliser pour la police du texte. Cette méthode n'est pas conforme, il faut utiliser la propriété CSS {{cssxref("color")}} sur l'élément à la place.</dd> + <dt>{{htmlattrdef("topmargin")}} {{obsolete_inline}}</dt> + <dd>La marge à appliquer en haut du corps de la page. Cette méthohde n'est pas conforme, il faut utiliser la propriété CSS {{cssxref("margin-top")}} sur l'élément à la place.</dd> + <dt>{{htmlattrdef("vlink")}} {{obsolete_inline}}</dt> + <dd>La couleur de texte pour les liens hypertextes visités. Cette méthode n'est pas conforme, il faut utiliser la propriété CSS {{cssxref("color")}} avec la pseudo-classe {{cssxref(":visited")}}.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><html> + <head> + <title>Titre du document</title> + </head> + <body> + <p>Et là un paragraphe…</p> + </body> +</html> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<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/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement">Racine de section</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>La balise d'ouverture peut être omise si le premier élément n'est pas un caractère espace, un commentaire, un élément {{HTMLElement("script")}}, ou un élément {{HTMLElement("style")}}. La balise de fermeture peut être omise si l'élément <code><body></code> a un contenu ou une balise d'ouverture, et qu'il n'est pas immédiatement suivi d'un commentaire.</td> + </tr> + <tr> + <th scope="row"><dfn>Parents autorisés</dfn></th> + <td>Il doit être le second élément d'un élément {{HTMLElement("html")}}.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLBodyElement")}} + <ul> + <li>L'élément <code><body></code> est accessible via l'interface {{domxref("HTMLBodyElement")}}.</li> + <li>Il est possible d'accéder à l'élément body grâce à l'attribut {{domxref("document.body")}}.</li> + </ul> + </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', 'semantics.html#the-body-element', '<body>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Modification de la liste des fonctionnalités non conformes.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-body-element', '<body>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Les attributs précédemment dépréciés sont désormais obsolètes. Définition du comportement des attributs non-conformes et non-standards <code>topmargin</code>, <code>leftmargin</code>, <code>rightmargin</code> et <code>bottommargin</code><strong>.</strong> Ajout des attributs <code>on*</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.1', '<body>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Dépréciation des attributs <code>alink</code>, <code>background</code>, <code>bgcolor</code>, <code>link</code>, <code>text</code> et <code>vlink</code>.</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.body")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("html")}}</li> + <li>{{HTMLElement("head")}}</li> +</ul> diff --git a/files/fr/web/html/element/br/index.html b/files/fr/web/html/element/br/index.html new file mode 100644 index 0000000000..b49d301453 --- /dev/null +++ b/files/fr/web/html/element/br/index.html @@ -0,0 +1,135 @@ +--- +title: '<br> : l''élément de saut de ligne' +slug: Web/HTML/Element/br +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/br +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <code><strong><br></strong></code> crée un saut de ligne (un retour chariot) dans le texte. Il s'avère utile lorsque les sauts de ligne ont une importance (par exemple lorsqu'on écrit une adresse ou un poème).</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/br.html", "tabbed-standard")}}</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> + +<div class="note"> +<p><strong>Note :</strong> Attention, <code><br></code> ne doit pas être utilisé de façon abusive afin d'augmenter l'espace entre les lignes d'un texte. Pour cela, on utilisera la propriété <a href="/fr/docs/Web/CSS">CSS</a> {{cssxref('margin')}} sur l'élément {{HTMLElement("p")}}.</p> +</div> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme pour tous les éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h3 id="Attributs_obsolètes">Attributs obsolètes</h3> + +<dl> + <dt>{{htmlattrdef("clear")}} {{deprecatedGeneric('inline','HTML4.01')}} {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>Cet attribut indique où commencer la prochaine ligne après le saut de ligne. + <div class="note"> + <p><strong>Note : </strong>Cet attribut est obsolète avec {{HTMLVersionInline(5)}} et ne doit pas être utilisé ! Il faut privilégier la propriété {{CSSxref('clear')}} à la place.</p> + </div> + </dd> +</dl> + +<h2 id="Mise_en_forme_avec_CSS">Mise en forme avec CSS</h2> + +<p><code><br></code> n'a aucun rôle purement stylistique et il sert uniquement à créer une rupture de ligne au sein d'un bloc de texte. Cet élément pourra très peu être mis en forme avec CSS.</p> + +<p>Bien qu'il soit possible d'appliquer une marge ({{cssxref("margin")}} sur les éléments <code><br></code> afin d'augmenter l'espacement entre les lignes de texte d'un même bloc, ce n'est pas une bonne pratique. Pour obtenir le même effet, on pourra utiliser la propriété {{cssxref("line-height")}}.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html">Maître corbeau, sur un arbre perché,<br> +Tenait en son bec un fromage.<br> +Maître renard par l'odeur alléché,<br> +Lui tint à peu près ce langage...<br> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","100%","200")}}</p> + +<h2 id="Accessibilité">Accessibilité</h2> + +<p>Utiliser une suite d'éléments <code><br></code> pour uniquement rajouter un espace entre des paragraphes sera source de confusion ou de frustration pour les personnes qui utilisent des outils d'assistance. Les lecteurs d'écran, par exemple, pourront annoncer la présence de l'élément alors qu'il n'y a aucun contenu associé.</p> + +<p>Si on souhaite ajouter un espace supplémentaire, on utilisera plutôt la propriété CSS {{cssxref("margin")}}.</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Aucun, c'est un élément vide.</td> + </tr> + <tr> + <th scope="row">Omission de balise</th> + <td>Cet élément doit avoir une balise de début et ne doit pas avoir de balise de fin. Pour les documents XHTML, on écrira cet élément <code><br /></code>.</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_phrasé">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLBRElement")}}</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', 'semantics.html#the-br-element', '<br>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-br-element', '<br>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.2.1', '<br>')}}</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> + +<p>{{Compat("html.elements.br")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("address")}}</li> + <li>{{HTMLElement("p")}}</li> +</ul> diff --git a/files/fr/web/html/element/button/index.html b/files/fr/web/html/element/button/index.html new file mode 100644 index 0000000000..be7ad23143 --- /dev/null +++ b/files/fr/web/html/element/button/index.html @@ -0,0 +1,255 @@ +--- +title: '<button> : l''élément représentant un bouton' +slug: Web/HTML/Element/Button +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/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> + +<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> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">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> +</dl> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush:html notranslate"><button name="button">Cliquez sur moi :)</button> +</pre> + +<p>{{EmbedLiveSample('Exemple', 200, 64, '', 'Web/HTML/Element/Button')}}</p> + +<h2 id="Accessibilité">Accessibilité</h2> + +<h3 id="Boutons_avec_une_icône">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="/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> + +<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> + +<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 +</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>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> +</ul> + +<h3 id="Dimensionnement_et_proximité">Dimensionnement et proximité</h3> + +<h4 id="Dimensionnement_-_taille">Dimensionnement - taille</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> + +<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> +</ul> + +<h4 id="Proximité">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> + +<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> +</ul> + +<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{{cssxref("::-moz-focus-inner")}} { }</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> +</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> + +<p>{{Compat("html.elements.button")}}</p> + +<h2 id="Voir_aussi">Voir aussi</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> diff --git a/files/fr/web/html/element/canvas/index.html b/files/fr/web/html/element/canvas/index.html new file mode 100644 index 0000000000..94ace3eeae --- /dev/null +++ b/files/fr/web/html/element/canvas/index.html @@ -0,0 +1,206 @@ +--- +title: '<canvas> : l''élément de canevas graphique' +slug: Web/HTML/Element/canvas +tags: + - Canvas + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/canvas +--- +<div>{{HTMLRef}}</div> + +<p>L'élément <strong><code><canvas></code></strong> permet de modifier une zone graphique via un script (habituellement en <a href="/fr/docs/Web/JavaScript">JavaScript</a> ou grâce à <a href="/fr/docs/Apprendre/WebGL">WebGL</a>). Il peut par exemple être utilisé afin de dessiner des graphiques, manipuler des images ou jouer des animations.</p> + +<p>Pour plus d'information sur l'élément <code><canvas></code>, voir la page sur <a href="/fr/docs/Web/HTML/Canvas">canvas</a>.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme les autres éléments HTML, cet élément possède les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs globaux</a>.</p> + +<dl> + <dt>{{htmlattrdef("height")}}</dt> + <dd>La hauteur de l'espace pour l'élément, exprimée en pixels CSS. La valeur par défaut est 150.</dd> + <dt>{{htmlattrdef("moz-opaque")}} {{non-standard_inline}}</dt> + <dd>Cet attribut permet d'indiquer s'il y aura de la transparence ou non. Si le canevas sait qu'il n'y aura pas de transparence, les performances de rendu pourront être améliorées. Cet attribut est uniquement pris en charge par les navigateurs Mozilla, il est préférable d'utiliser la méthode standard {{domxref("HTMLCanvasElement.getContext()", "canvas.getContext('2d', { alpha: false})")}} à la place.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>La largeur de l'espace pour l'élément, exprimée en pixels CSS. La valeur par défaut est 300.</dd> +</dl> + +<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> + +<h3 id="Contenu_alternatif">Contenu alternatif</h3> + +<p>Il est fortement recommandé de fournir un contenu alternatif au contenu du bloc <code><canvas></code>. Ce contenu pourra être utilisé par les navigateurs plus anciens qui ne supportent pas l'élément <code><canvas></code> et ceux pour lesquels JavaScript est désactivé.</p> + +<h3 id="Balise_<canvas>_obligatoire">Balise <code></canvas></code> obligatoire</h3> + +<p>À la différence de {{HTMLElement("img")}}, l'élément {{HTMLElement("canvas")}} doit être fermé avec la balise fermante <code></canvas></code>.</p> + +<h3 id="Dimensionnement_du_canevas_CSS_ou_HTML">Dimensionnement du canevas : CSS ou HTML</h3> + +<p>On peut modifier la taille affichée du canevas grâce à une feuille de style. L'image est mise à l'échelle lors du rendu pour correspondre à la taille indiquée par le style. Toutefois, cela pourra distordre l'image lors du rendu final.</p> + +<p>Mieux vaut utiliser les attributs explicites <code>width</code> et <code>height</code> de l'élément en HTML (ou via du code JavaScript).</p> + +<h3 id="Taille_maximale_d'un_canevas">Taille maximale d'un canevas</h3> + +<p>La taille maximale d'un élément <code><canvas></code> dépend du navigateur utilisé. Voici un tableau de mesures provenant de tests et diverses sources (ex. <a href="https://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element">Stack Overflow</a>):</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Navigateur</th> + <th scope="col">Hauteur maximale</th> + <th scope="col">Largeur maximale</th> + <th scope="col">Aire maximale</th> + </tr> + </thead> + <tbody> + <tr> + <td>Chrome</td> + <td>32 767 pixels</td> + <td>32 767 pixels</td> + <td>268 435 456 pixels (soit 16 384 x 16 384)</td> + </tr> + <tr> + <td>Firefox</td> + <td>32 767 pixels</td> + <td>32 767 pixels</td> + <td>472 907 776 pixels (soit 22 528 x 20 992)</td> + </tr> + <tr> + <td>Safari</td> + <td>32 767 pixels</td> + <td>32 767 pixels</td> + <td>268 435 456 pixels (soit 16 384 x 16 384)</td> + </tr> + <tr> + <td>IE</td> + <td>8 192 pixels</td> + <td>8 192 pixels</td> + <td>?</td> + </tr> + </tbody> +</table> + +<div class="blockIndicator note"> +<p><strong>Note :</strong> Si on dépasse les dimensions ou l'aire maximale, le canevas deviendra inutilisable et les commandes de dessin ne fonctionneront pas.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<p>Le fragment de code suivant ajoute un élément <code>canvas</code> au document. Un texte alternatif est fourni au cas où le navigateur ne peut pas afficher ce canevas. Un texte alternatif ou bien des éléments internes permettront de rendre le canevas plus accessible.</p> + +<pre class="brush: html"><canvas id="canvas" width="300" height="300"> + Désolé, votre navigateur ne prend pas en charge &lt;canvas&gt;. +</canvas> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<p>On utilise également ce fragment de code JavaScript avec la méthode {{domxref("HTMLCanvasElement.getContext()")}} afin d'obtenir le contexte de dessin puis on dessine sur le canevas.</p> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +ctx.fillStyle = 'green'; +ctx.fillRect(10, 10, 100, 100);</pre> + +<h3 id="Gérer_l'opacité">Gérer l'opacité</h3> + +<p>Si le canevas n'utilise pas la transparence, on pourra indiquer au navigateur que le canevas est opaque afin d'optimiser le rendu. Pour cela, on pourra utiliser la propriété <code>alpha</code> avec la valeur <code>false</code>.</p> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d', {alpha: false});</pre> + +<p>Avant que cette option soit standard, on pouvait utiliser l'attribut HTML <code>moz-opaque</code> {{non-standard_inline}} {{deprecated_inline}} pour les navigateurs basés sur Gecko. Toutefois, ce n'est pas une solution standard, cf. le bug {{bug(878155)}} pour suivre le retrait de cet attribut.</p> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","300","300")}}</p> + +<h2 id="Accessibilité">Accessibilité</h2> + +<h3 id="Contenu_alternatif_2">Contenu alternatif</h3> + +<p>Seul, l'élément <code><canvas></code> est une image matricielle et ne fournit pas d'informations sur les objets dessinés. Le contenu d'un canevas n'est pas accessible aux outils d'assistance qui se basent sur le contenu sémantique du document HTML. De façon générale, on évitera de se servir uniquement de <code><canvas></code> pour produire un document accessible.</p> + +<ul> + <li><a href="/Fr/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Les régions cliquables et l'accessibilité</a></li> + <li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases">Cas d'utilisation pour l'accessibilité de <code><canvas></code></a></li> + <li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Problèmes d'accessibilité de l'élément <code><canvas></code></a></li> + <li><a href="http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/">L'accessibilité de l'élément <code><canvas></code> dans Firefox 13, un article de Steve Faulkner (en anglais)</a></li> + <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices">Les meilleures pratiques pour concevoir des éléments <code><canvas></code> interactifs</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é">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_intégré">contenu intégré</a>, <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>Transparent mais sans aucun descendant étant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a> à l'exception des éléments {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} vaut <code>checkbox</code>, <code>radio</code>, ou <code>button</code>.</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 contenu acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés</td> + </tr> + <tr> + <th scope="row"><dfn>Interface DOM</dfn></th> + <td>{{domxref("HTMLCanvasElement")}}</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', 'scripting.html#the-canvas-element', '<canvas>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'scripting-1.html#the-canvas-element', '<canvas>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</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> + +<p>{{Compat("html.elements.canvas")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Canvas">Le portail MDN sur l'élément <code><canvas></code></a></li> + <li><a href="/fr/docs/Tutoriel_canvas">Tutoriel <code><canvas></code></a></li> + <li><a href="https://simon.html5.org/dump/html5-canvas-cheat-sheet.html">Anti-sèche <code><canvas></code></a></li> +</ul> diff --git a/files/fr/web/html/element/caption/index.html b/files/fr/web/html/element/caption/index.html new file mode 100644 index 0000000000..f1d9f809a3 --- /dev/null +++ b/files/fr/web/html/element/caption/index.html @@ -0,0 +1,164 @@ +--- +title: '<caption> : l''élément de légende d''un tableau' +slug: Web/HTML/Element/caption +tags: + - Element + - HTML + - Reference + - Tableau + - Web +translation_of: Web/HTML/Element/caption +--- +<div>{{HTMLRef}}</div> + +<p>L'élément <strong>HTML <code><caption></code> </strong>représente la légende (ou le titre) d'un tableau. Il doit être le première élément parmi les descendants de l'élément {{HTMLElement("table")}}. La mise en forme CSS peut placer cet élément à un autre endroit par rapport au tableau et on pourra notamment utiliser les propriétés {{cssxref("caption-side")}} et {{cssxref("text-align")}}.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/caption.html", "tabbed-standard")}}</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> + +<h2 id="Attributs">Attributs</h2> + +<p>On peut utiliser<a href="/fr/docs/Web/HTML/Attributs_universels"> les attributs universels</a> sur cet élément.</p> + +<h3 id="Attributs_obsolètes">Attributs obsolètes</h3> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecatedGeneric('inline','HTML4.01')}} {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>Cet attribut à valeur contrainte indique l'alignement de la légende du tableau par rapport au tableau lui-même. Il peut valoir : + <ul> + <li><code>left</code> pour un affichage à gauche du tableau</li> + <li><code>top</code> pour un affichage au dessus du tableau</li> + <li><code>right</code> pour un affichage à droite du tableau</li> + <li><code>bottom</code> pour un affichage en dessous du tableau</li> + </ul> + + <div class="note"><strong>Note d'utilisation : </strong>Ne pas utiliser cet attribut. Il a été déprécié. L'élément {{HTMLElement("caption")}} devrait être mis en forme grâce au <a href="/fr/docs/Web/CSS">CSS</a>. Afin d'obtenir des effets similaires à cet attribut, on utilisera les propriétés CSS {{cssxref("caption-side")}} et {{cssxref("text-align")}}.</div> + </dd> +</dl> + +<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> + +<p>Quand l'élément {{HTMLElement("table")}} (étant le parent de l'élément {{HTMLElement("caption")}}) n'est que l'unique descendant d'un élément {{HTMLElement("figure")}},c'est l'élément {{HTMLElement("figcaption")}} doit être utilisé.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><table> + <caption>Une légende pour un tableau</caption> + <tr> + <td>Bip bop bip bop</td> + <td>Bop bip bop bip</td> + </tr> +</table> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">caption { + caption-side: top; + align: right; +} +table { + border-collapse: collapse; + border-spacing: 0px; +} +table, th, td { + border: 1px solid black; +} +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","200","200")}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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>Aucune.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Catégorie de flux</a>.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>La balise de fin peut être absente si l'élément n'est pas immédiatement suivi d'un blanc ASCII ou d'un commentaire.</td> + </tr> + <tr> + <th scope="row">Éléments parents autorisés</th> + <td>Un élément {{HTMLElement("table")}} dont il doit être le premier descendant.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLTableCaptionElement")}}</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', 'tabular-data.html#the-caption-element', '<caption>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-caption-element', '<caption>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.2', '<caption>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("html.elements.caption")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments HTML relatifs aux tableaux : + <ul> + <li>{{HTMLElement("col")}}</li> + <li>{{HTMLElement("colgroup")}}</li> + <li>{{HTMLElement("table")}}</li> + <li>{{HTMLElement("tbody")}}</li> + <li>{{HTMLElement("td")}}</li> + <li>{{HTMLElement("tfoot")}}</li> + <li>{{HTMLElement("th")}}</li> + <li>{{HTMLElement("thead")}}</li> + <li>{{HTMLElement("tr")}}</li> + </ul> + </li> + <li>Les propriétés CSS pouvant être utilisées pour mettre en forme l'élément {{HTMLElement("caption")}} : + <ul> + <li>{{cssxref("text-align")}}</li> + <li>{{cssxref("caption-side")}}.</li> + </ul> + </li> +</ul> diff --git a/files/fr/web/html/element/center/index.html b/files/fr/web/html/element/center/index.html new file mode 100644 index 0000000000..cd47d48252 --- /dev/null +++ b/files/fr/web/html/element/center/index.html @@ -0,0 +1,97 @@ +--- +title: '<center> : l''élément de texte centré' +slug: Web/HTML/Element/center +tags: + - Element + - HTML + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/center +--- +<div>{{HTMLRef}}{{obsolete_header}}</div> + +<p>L’élément HTML <strong><code><center></code></strong> est un <a href="/fr/docs/Web/HTML/Éléments_en_bloc">élément de type bloc</a> qui contient des paragraphes et d'autres éléments de type bloc ou en ligne. Le contenu entier de cet élément est centré horizontalement au sein de son conteneur parent (généralement l'élément {{HTMLElement("body")}}).</p> + +<p>Cet élément a été déprécié en HTML4 (et XHTML 1) au profit de la propriété <a href="/fr/docs/Web/CSS">CSS</a> {{cssxref("text-align")}} qui peut être appliqué à l'élément {{HTMLElement("div")}} ou à un élément {{HTMLElement("p")}}. Pour centrer des blocs, on utilisera d'autres propriétés ({{cssxref("margin-left")}} et {{cssxref("margin-right")}} avec la valeur <code>auto</code> par exemple ou <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Utilisation_des_flexbox_en_CSS">les boîtes flexibles</a>).</p> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Cet élément implémente l'interface {{domxref("HTMLElement")}}.</p> + +<div class="note"> +<p><strong>Note d'implémentation :</strong> Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface {{domxref("HTMLSpanElement")}} pour cet élément.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Premier_exemple_(HTML)">Premier exemple (HTML)</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><center> + Ce texte sera centré. + <p>Ainsi que ce paragraphe.</p> +</center> +</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Premier_exemple_(HTML)","200","100")}}</p> + +<h3 id="Deuxième_exemple_(CSS)">Deuxième exemple (CSS)</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><div class="centrer"> + Ce texte sera centré. + <p>Ainsi que ce paragraphe.</p> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.centrer { + text-align: center; +} +</pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("Deuxième_exemple_(CSS)","200","100")}}</p> + +<h3 id="Troisième_exemple_(CSS)">Troisième exemple (CSS)</h3> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><p class="centrer"> + Cette ligne sera centrée.<br> + Ainsi que cette ligne. +</p></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">.centrer { + text-align: center; +} +</pre> + +<h4 id="Résultat_3">Résultat</h4> + +<p>{{EmbedLiveSample("Troisième_exemple_(CSS)","200","100")}}</p> + +<h2 id="Notes">Notes</h2> + +<p>Appliquer {{cssxref("text-align")}}<code>: center</code> sur un élément {{HTMLElement("p")}} ou {{HTMLElement("div")}} centre <em>le contenu</em> de ces éléments, tout en laissant leurs dimensions générales inchangées.</p> + +<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.center")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{cssxref("text-align")}}</li> + <li>{{cssxref("display")}}</li> +</ul> diff --git a/files/fr/web/html/element/cite/index.html b/files/fr/web/html/element/cite/index.html new file mode 100644 index 0000000000..a33ddafc2e --- /dev/null +++ b/files/fr/web/html/element/cite/index.html @@ -0,0 +1,145 @@ +--- +title: '<cite> : l''élément de citation' +slug: Web/HTML/Element/cite +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/cite +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><cite></code></strong> contient le titre d'une œuvre telle qu'un livre, une chanson, un film, une sculpture… Cet élément doit inclure le titre de l'œuvre. Cette référence peut-être abrégée en accord avec les conventions d'usages pour l'ajout des métadonnées de citations.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/cite.html", "tabbed-standard")}}</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> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément prend uniquement en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> + +<p>Voici des exemples d'œuvres auxquelles on pourrait faire référence grâce à un élément <code><cite></code> :</p> + +<div class="threecolumns" id="creative-works"> +<ul> + <li>Un livre</li> + <li>Un article de recherche</li> + <li>Un essai</li> + <li>Un poème</li> + <li>Une pièce musicale</li> + <li>Une chanson</li> + <li>Le script d'une pièce ou d'un film</li> + <li>Un film</li> + <li>Une émission télévisée</li> + <li>Un jeu</li> + <li>Une sculpture</li> + <li>Une peinture</li> + <li>Une pièce de théâtre</li> + <li>Un opéra</li> + <li>Une comédie musicale</li> + <li>Une exposition</li> + <li>Les minutes d'un procès</li> + <li>Un programme informatique</li> + <li>Un site web</li> + <li>Une page web</li> + <li>Un billet de blog ou un commentaire</li> + <li>Un billet ou un commentaire sur un forum</li> + <li>Une déclaration écrite ou orale</li> + <li>etc.</li> +</ul> +</div> + +<p>La spécification rédigée par le W3C indique qu'une référence à une œuvre peut inclure le nom de l'auteur. En revanche, celle écrite par le WHATWG indique qu'en aucun cas le nom d'une personne ne peut être inclus.</p> + +<p>Il faut utiliser l'attribut {{htmlattrxref("cite", "blockquote")}} d'un élément {{HTMLElement("blockquote")}} ou {{HTMLElement("q")}} pour fournir une ressource en ligne liée à une source.</p> + +<p>Afin d'éviter l'utilisation de l'italique par défaut pour l'élément <code><cite></code>, on pourra utiliser la propriété <a href="/fr/docs/Web/CSS">CSS</a> {{cssxref("font-style")}}.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p> + Plus d'informations sont disponibles dans <cite>[ISO-0000].</cite> +</p></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","200","100")}}</p> + +<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_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>.</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>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row"><dfn>Interface DOM</dfn></th> + <td>{{domxref("HTMLElement")}}. Auparavant et jusqu'à Gecko 1.9.2 (Firefox 4) inclus, Firefox implémentait l'interface {{domxref("HTMLSpanElement")}} pour cet élément</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', 'semantics.html#the-cite-element', '<cite>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-cite-element', '<cite>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'text.html#h-9.2.1', '<cite>')}}</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> + +<p>{{Compat("html.elements.cite")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("blockquote")}}, utilisé pour des citations longues.</li> + <li>{{HTMLElement("q")}}, utilisé pour des citations en incise.</li> +</ul> diff --git a/files/fr/web/html/element/code/index.html b/files/fr/web/html/element/code/index.html new file mode 100644 index 0000000000..1964257a35 --- /dev/null +++ b/files/fr/web/html/element/code/index.html @@ -0,0 +1,118 @@ +--- +title: '<code> : l''élément de code en incise' +slug: Web/HTML/Element/code +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/code +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><code></code></strong> représente un fragment de code machine. Par défaut, l'agent utilisateur utilise une police à chasse fixe (<em>monospace</em>) afin d'afficher le texte contenu dans cet élément.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/code.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> + + + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément prend uniquement en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p> + Texte normal. Voici comment déclarer une variable + en JavaScript : <br/> + <code>var i = 0;</code> + Texte normal. +</p> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","200","100")}}</p> + +<h2 id="Notes">Notes</h2> + +<p>Pour représenter plusieurs lignes de code, on pourra utiliser l'élément {{HTMLElement("pre")}}.</p> + +<p>On peut utiliser une règle CSS afin de surcharger la police par défaut des navigateurs. Cependant, il faut garder à l'esprit que les préférences de l'utilisateur peuvent prendre le dessus sur la mise en forme définie via le CSS.</p> +<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_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>.</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>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}. Jusqu'à Gecko 1.9.2 (Firefox 4) inclus, Firefox implémentait l'interface {{domxref("HTMLSpanElement")}} pour cet élément.</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', 'text-level-semantics.html#the-code-element', '<code>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-code-element', '<code>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<code>')}}</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> + +<p>{{Compat("html.elements.code")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("samp")}}</li> + <li>{{HTMLElement("kbd")}}</li> + <li>{{deprecated_inline}} {{HTMLElement("command")}}</li> + <li>{{HTMLElement("var")}}</li> + <li>{{HTMLElement("pre")}}</li> +</ul> diff --git a/files/fr/web/html/element/col/index.html b/files/fr/web/html/element/col/index.html new file mode 100644 index 0000000000..6bae79df54 --- /dev/null +++ b/files/fr/web/html/element/col/index.html @@ -0,0 +1,277 @@ +--- +title: <col> +slug: Web/HTML/Element/col +tags: + - Element + - HTML + - Reference + - Tableau + - Web +translation_of: Web/HTML/Element/col +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><col></code></strong> définit une colonne appartenant à un tableau et est utilisé afin de définir la sémantique commune à toutes ses cellules. On trouve généralement cet élément au sein d'un élément {{HTMLElement("colgroup")}}.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/col.html","tabbed-taller")}}</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> + +<p>Cet élément peut être mis en forme grâce à CSS mais seules quelques propriétés auront un effet sur la colonne (se référer à <a href="https://www.w3.org/TR/CSS21/tables.html#columns">la spécification CSS 2.1</a> pour une liste exhaustive)</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme pour tous les éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_globaux">les attributs universels</a> avec cet élément.</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>Cet attribut énuméré définit l'alignement horizontal pour le contenu de chaque cellule de la colonne. Les valeurs possibles sont : + <ul> + <li><code>left</code> : le contenu de la cellule est aligné à gauche de la cellule</li> + <li><code>center</code> : le contenu de la cellule est centré horizontalement</li> + <li><code>right</code> : le contenu de la cellule est aligné à droite de la cellule</li> + <li><code>justify</code> : insère des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié</li> + <li><code>char</code> : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs {{htmlattrxref("char", "col")}} et {{htmlattrxref("charoff", "col")}} {{unimplemented_inline(2212)}}.</li> + </ul> + + <p>Si cet attribut n'est pas renseigné, sa valeur est héritée de la valeur de l'attribut {{htmlattrxref("align", "colgroup")}} de l'élément {{HTMLElement("colgroup")}} auquel cette colonne appartient. S'il n'y en a pas, la valeur <code>left</code> est prise comme valeur par défaut.</p> + + <div class="warning"><strong>Attention : </strong>Cet attribut est devenu obsolète dans le dernier standard. + + <ul> + <li>Pour réaliser les mêmes effets que les valeurs <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code> : + + <ul> + <li>N'utilisez pas la propriété {{cssxref("text-align")}} sur un sélecteur renvoyant un élement {{HTMLElement("col")}}. Les éléments {{HTMLElement("td")}} ne sont pas des descendants de l'élément {{HTMLElement("col")}} il n'hériteront pas de cette propriété.</li> + <li>Si le tableau n'utilise pas l'attribut {{htmlattrxref("colspan", "td")}}, il est possible d'utiliser le sélecteur CSS <code>td:nth-child(an+b)</code> avec a qui vaut zéro et <code>b</code> la position ordinale de la colonne dans le tableau. <code>td:nth-child(2) { text-align: right; }</code> permettra d'aligner à droite la deuxième colonne.</li> + <li>Si le tableau utilise l'attribut {{htmlattrxref("colspan", "td")}}, l'effet peut être réalisé en combinant différents sélecteurs CSS comme <code>[colspan=n]</code>. Cependant cela n'est pas trivial à effectuer.</li> + </ul> + </li> + <li>Pour réaliser le même effet qu'avec la valeur <code>char</code>. Il est possible, en CSS3, d'utiliser la valeur de l'attribut {{htmlattrxref("char", "col")}} comme valeur de la propriété {{cssxref("text-align")}}. {{unimplemented_inline}}.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd>Cet attribut définit la couleur d'arrière-plan de toutes les cellules de la colonne. C'est un code à 6 chiffres hexadécimaux comme défini par le <a href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé. + <table> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>black</code> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>green</code> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>silver</code> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>lime</code> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>gray</code> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>olive</code> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>white</code> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>yellow</code> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>maroon</code> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>navy</code> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>red</code> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>blue</code> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>purple</code> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>teal</code> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>fuchsia</code> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>aqua</code> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Note d'utilisation : </strong>Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("col")}} doit être mis en forme grâce au CSS. Pour obtenir un effet semblable à celui obtenu avec l'attribut <code><strong>bgcolor</strong></code>, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments {{HTMLElement("td")}} souhaités.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules de la colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "col")}} ne vaut pas <code>char</code>, l'attribut est ignoré.</dd> + <dd> + <div class="note"><strong>Note d'utilisation : </strong>Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "col")}}, on pourra utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut<strong> char</strong> à appliquer au contenu des cellules. + <div class="note"><strong>Note d'utilisation : </strong>Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("span")}}</dt> + <dd>Cet attribut contient un entier positif indiquand le nombre de colonne consécutives regroupées sous l'élément <code><col></code>. La valeur par défaut de cet attribut est 1.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("valign")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont : + <ul> + <li><code>baseline</code> qui alignera le texte à la ligne la plus basse possible en utilisant la <a class="external" href="https://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29">ligne de base</a> des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur <code>bottom</code>.</li> + <li><code>bottom</code> qui placera le texte au plus bas de la cellule</li> + <li><code>middle</code> qui centrera verticalement le texte dans la cellule</li> + <li><code>top</code> qui placera le texte au plus haut de la cellule.</li> + </ul> + + <div class="note"><strong>Notes d'utilisation : </strong>Cet attribut étant maintenant obsolète (et n'étant plus supporté), il est fortement déconseillé de l'utiliser. + + <ul> + <li>Il ne faut pas essayer de régler la propriété {{cssxref("vertical-align")}} sur un sélecteur retournant un élément {{HTMLElement("col")}}. En effet les éléments {{HTMLElement("td")}} n'étant pas des descendants de l'élément {{HTMLElement("col")}}, ils n'hériteront pas de la propriété.</li> + <li>Si le tableau n'utilise pas d'attribut {{htmlattrxref("colspan", "td")}} il est possible d'utiliser le sélecteur CSS <code>tr:nth-child(an+b)</code> avec a le nombre total de colonnes dans le tableau et b la position ordinale de la colonne dans le tableau. La propriété {{cssxref("vertical-align")}} peut alors être utilisée sur le sélecteur.</li> + <li>Si le tableau n'utilise pas l'attribut {{htmlattrxref("colspan", "td")}} l'effet peut être obtenu avec une combinaison de différents sélecteurs CSS comme <code>[colspan=n]</code>. Cependant cela n'est pas trivial à réaliser.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("width")}} {{obsolete_inline("html5")}}</dt> + <dd>Cet attribut définit la largeur par défaut pour chaque colonne dans le groupe de colonnes. En plus de la notation standard en pixels et pourcents, cet attribut peut prendre la valeur spéciale<code> 0*</code>, indiquant ainsi que la largeur de chaque colonne doit être suffisante pour contenir les contenus des cellules. Utiliser cette notation de manière relative (par exemple <code>0.5*</code> ) est également possible.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><table> + <colgroup> + <col class="premiereColonne"> + <col class="deuxDernieresColonnes" span="2"> + </colgroup> + <tr> + <th>Citron vert</th> + <th>Citron</th> + <th>Orange</th> + </tr> + <tr> + <td>Vert</td> + <td>Jaune</td> + <td>Orange</td> + </tr> +</table></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","200","100")}}</p> + +<div class="note"> +<p><strong>Note :</strong> On pourra consulter la page {{HTMLElement("table")}} pour d'autres exemples sur les tableaux.</p> +</div> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu">Catégorie de contenu</a></th> + <td>Aucune.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Aucun, cet élément est un élément vide.</td> + </tr> + <tr> + <th scope="row">Omission de balise</th> + <td>La balise ouvrante est obligatoire, l'élément étant un élément vide, la balise de fin est interdite.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>{{HTMLElement("colgroup")}} uniquement. Toutefois, ce parent peut être défini de façon implicite car sa balise ouvrante n'est pas obligatoire. L'élément {{HTMLElement("colgroup")}} ne doit pas avoir d'attribut {{htmlattrxref("span", "colgroup")}}.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLTableColElement")}}</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', 'tables.html#the-col-element', '<col>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-col-element', '<col>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.4.2', '<col>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("html.elements.col")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments HTML relatifs aux tableaux : + <ul> + <li>{{HTMLElement("caption")}}</li> + <li>{{HTMLElement("colgroup")}}</li> + <li>{{HTMLElement("table")}}</li> + <li>{{HTMLElement("tbody")}}</li> + <li>{{HTMLElement("td")}}</li> + <li>{{HTMLElement("tfoot")}}</li> + <li>{{HTMLElement("th")}}</li> + <li>{{HTMLElement("thead")}}</li> + <li>{{HTMLElement("tr")}}</li> + </ul> + </li> + <li>Les propriétés et pseudo-classes CSS qui peuvent s'avérer utiles pour mettre en forme l'élément <code><col></code> : + <ul> + <li>La propriété {{cssxref("width")}} pour contrôler la largeur de la colonne</li> + <li>La pseudo-classe {{cssxref(":nth-child")}} qui permet de définir l'alignement sur les cellules d'une colonne</li> + <li>La propriété {{cssxref("text-align")}} qui permet d'aligner le contenu de cellules sur le même caractère (le point « . » par exemple).</li> + </ul> + </li> +</ul> diff --git a/files/fr/web/html/element/colgroup/index.html b/files/fr/web/html/element/colgroup/index.html new file mode 100644 index 0000000000..3de84d1f8c --- /dev/null +++ b/files/fr/web/html/element/colgroup/index.html @@ -0,0 +1,276 @@ +--- +title: <colgroup> +slug: Web/HTML/Element/colgroup +tags: + - Element + - HTML + - Reference + - Tableau + - Web +translation_of: Web/HTML/Element/colgroup +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><colgroup></code></strong> définit un groupe de colonnes au sein d'un tableau.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/colgroup.html","tabbed-taller")}}</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> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme pour tous les éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur cet élément.</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>Cet attribut à valeur contrainte définit l'alignement horizontal pour le contenu de chaque cellule de la colonne. Les valeurs possibles sont : + <ul> + <li><code>left</code> : le contenu de la cellule est alligné à gauche de la cellule</li> + <li><code>center</code> : le contenu de la cellule est centré horizontalement</li> + <li><code>right</code> : le contenu de la cellule est aligné à droite de la cellule</li> + <li><code>justify</code> : insère des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié</li> + <li><code>char</code> : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs {{htmlattrxref("char", "col")}} et {{htmlattrxref("charoff", "col")}} {{unimplemented_inline(2212)}}.</li> + </ul> + + <p>Si cet attribut n'est pas renseigné, la valeur <code>left</code> sera prise comme valeur par défaut. Les éléments {{HTMLElement("col")}} descendants peuvent surcharger cette valeur en utilisant leur attribut {{htmlattrxref("align", "col")}}.</p> + + <div class="note"><strong>Notes : </strong>Cet attribut est devenu obsolète et n'est plus supporté dans le dernier standard + + <ul> + <li>Pour réaliser les mêmes effets que les valeurs <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code> : + + <ul> + <li>Ne pas utiliser la propriété {{cssxref("text-align")}} sur un sélecteur renvoyant un élement {{HTMLElement("colgroup")}}. Les éléments {{HTMLElement("td")}} ne sont pas des descendants de l'élément {{HTMLElement("colgroup")}} il n'hériteront pas de cette propriété.</li> + <li>Si le tableau n'utilise pas l'attribut {{htmlattrxref("colspan", "td")}}, il est possible d'utiliser le sélecteur CSS <code>tr:nth-child(an+b)</code> avec a le nombre total de colonnes du tableau et b la position ordinale de la colonne. Une fois que ce selecteur a été utilisé, la propriété {{cssxref("text-align")}} peut être utilisée.</li> + <li>Si le tableau utilise l'attribut {{htmlattrxref("colspan", "td")}}, l'effet peut être réalisé en combinant différents sélecteurs CSS comme <code>[colspan=n]</code>. Cependant cela n'est pas trivial à réaliser.</li> + </ul> + </li> + <li>Pour réaliser le même effet qu'avec la valeur <code>char</code>. Il est possible, en CSS3, d'utiliser la valeur de l'attribut {{htmlattrxref("char", "colgroup")}} comme valeur de la propriété {{cssxref("text-align")}}. {{unimplemented_inline}}.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd>Cet attribut définit la couleur d'arrière-plan de toutes les cellules des colonnes appartenant au groupe de colonnes. C'est un code à 6 chiffres hexadécimaux tel que défini par le <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>, précédé d'un '#'. Un de ces seize mots-clés, comme présentés ci-dessous, peut être utilisé. + <table> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>black</code> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>green</code> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>silver</code> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>lime</code> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>gray</code> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>olive</code> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>white</code> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>yellow</code> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>maroon</code> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>navy</code> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>red</code> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>blue</code> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>purple</code> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>teal</code> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>fuchsia</code> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>aqua</code> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Note d'utilisation : </strong>Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémenté que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("colgroup")}} doit être mis en forme grâce au <a href="/fr/docs/Web/CSS">CSS</a>. Pour fournir un effet semblable à celui réalisé par l'attribut <code><strong>bgcolor</strong></code>, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments {{HTMLElement("td")}} souhaités.</div> + </dd> + <dt>{{htmlattrdef("char")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>Cet attribut spécifie l'alignement du contenu d'un groupe de colonnes en fonction d'un caractère.<br> + Les valeurs généralement utilisées pour cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "col")}} ne vaut pas <code>char</code>, l'attribut est ignoré. Cet attribut peut être surchargé avec l'attribut {{htmlattrxref("align", "col")}} de chacun des éléments {{HTMLElement("col")}} appartenant au groupe de colonnes.</dd> + <dd> + <div class="note"><strong>Note d'utilisation : </strong>Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "colgroup")}}, on pourra utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</div> + </dd> + <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut<strong> char</strong> à appliquer au contenu des cellules. + <div class="note"><strong>Note d'utilisation: </strong>Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("span")}}</dt> + <dd>La valeur de cet attribut est un entier positif indiquant le nombre de colonnes consécutives sur lesquelles appliquer les attributs de l'élément. S'il est absent, sa valeur par défaut est 1. + <div class="note"><strong>Note : </strong>Cet attribut s'applique aux attributs des colonnes du groupe. Il n'a pas d'effet sur les différentes règles CSS associées au groupe ou aux cellules des colonnes de ce groupe.. L'attribut <code>span</code>n'est pas autorisé s'il y a un ou plusieurs éléments <code><col></code> au sein de <code><colgroup></code>.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("valign")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont : + <ul> + <li><code>baseline</code> : qui alignera le texte à la ligne la plus basse possible en utilisant la <a class="external" href="https://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29">ligne de base</a> des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur <code>bottom</code>.</li> + <li><code>bottom</code> : qui placera le texte au plus bas de la cellule</li> + <li><code>middle</code> : qui centrera verticalement le texte dans la cellule</li> + <li><code>top</code> : qui placera le texte au plus haut de la cellule.</li> + </ul> + + <div class="note"><strong>Notes d'utilisation : </strong>Cet attribut étant maintenant obsolète (et n'étant plus supporté), il est fortement déconseillé de l'utiliser. + + <ul> + <li>Il ne faut pas essayer de régler la propriété {{cssxref("vertical-align")}} sur un sélecteur retournant un élément {{HTMLElement("colgroup")}}. En effet les éléments {{HTMLElement("td")}} n'étant pas des descendants de l'élément {{HTMLElement("colgroup")}} ils n'hériteront pas de la propriété.</li> + <li>Si le tableau n'utilise pas d'attribut {{htmlattrxref("colspan", "td")}} il est possible d'utiliser le sélecteur CSS <code>tr:nth-child(an+b)</code> avec a le nombre de colonne du tableau et b la position ordinale de la colonne dans le tableau puis d'utiliser la propriété {{cssxref("vertical-align")}} sur le sélecteur.</li> + <li>Si le tableau n'utilise pas l'attribut {{htmlattrxref("colspan", "td")}} l'effet peut être obtenu avec une combinaison de différents sélecteurs CSS comme <code>[colspan=n]</code>. Cependant cela n'est pas trivial à réaliser.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("width")}} {{obsolete_inline("html5")}}</dt> + <dd>Cet attribut définit la largeur par défaut pour chaque colonne dans le groupe de colonnes. En plus de la notation standard en pixels et en pourcents, cet attribut peut prendre la valeur spéciale<code> 0*</code>, indiquant ainsi que la largeur de chaque colonne doit être suffisante pour contenir les contenus des cellules. On peut également utiliser cette notation de manière relative (par exemple <code>0.5*</code>).</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><table> + <colgroup> + <col class="premiereColonne"> + <col class="deuxDernieresColonnes" span="2"> + </colgroup> + <tr> + <th>Citron vert</th> + <th>Citron</th> + <th>Orange</th> + </tr> + <tr> + <td>Vert</td> + <td>Jaune</td> + <td>Orange</td> + </tr> +</table></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","200","100")}}</p> + +<div class="note"> +<p><strong>Note :</strong> On pourra consulter la page {{HTMLElement("table")}} pour d'autres exemples sur les tableaux.</p> +</div> +<h2 id="Résumé_technique">Résumé technique</h2> + +<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>Aucune.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Si l'attribut {{htmlattrxref("span", "colgroup")}} est présent : aucun car c'est un élément vide.<br> + Si l'attribut n'est pas présent, zéro ou plusieurs éléments {{HTMLElement("col")}}.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>La balise de début peut être absente si le premier élément fils {{HTMLElement("col")}} et que celui-ci n'est pas précédé par un élément {{HTMLElement("colgroup")}} dont la balise de fin est absente. La balise de fin peut être absente s'il n'est pas suivi par un blanc ou par un commentaire.</td> + </tr> + <tr> + <th scope="row">Éléments parents autorisés</th> + <td>Un élément {{HTMLElement("table")}}. {{HTMLElement("colgroup")}} doit apparaître après tout élément {{HTMLElement("caption")}} optionnel et avant tout élément {{HTMLElement("thead")}}, {{HTMLElement("th")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}} et {{HTMLElement("tr")}}.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLTableColElement")}}</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', 'tables.html#the-colgroup-element', '<colgroup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-colgroup-element', '<colgroup>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'tables.html#edef-COLGROUP', '<colgroup>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("html.elements.colgroup")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments HTML liés aux tableaux : + <ul> + <li>{{HTMLElement("caption")}}</li> + <li>{{HTMLElement("col")}}</li> + <li>{{HTMLElement("table")}}</li> + <li>{{HTMLElement("tbody")}}</li> + <li>{{HTMLElement("td")}}</li> + <li>{{HTMLElement("tfoot")}}</li> + <li>{{HTMLElement("th")}}</li> + <li>{{HTMLElement("thead")}}</li> + <li>{{HTMLElement("tr")}}</li> + </ul> + </li> + <li>Les propriétés et pseudo-classes CSS qui peuvent s'avérer utiles pour mettre en forme l'élément <code><col></code> : + <ul> + <li>la propriété {{cssxref("width")}} pour contrôler la largeur de la colonne</li> + <li>la pseudo-classe {{cssxref(":nth-child")}} pour définir l'alignement des cellules d'une colonne</li> + <li>la propriété {{cssxref("text-align")}} pour aligner le contenu de cellules sur le même caractère (par exemple un point « . »).</li> + </ul> + </li> +</ul> diff --git a/files/fr/web/html/element/command/index.html b/files/fr/web/html/element/command/index.html new file mode 100644 index 0000000000..d5bdf50924 --- /dev/null +++ b/files/fr/web/html/element/command/index.html @@ -0,0 +1,117 @@ +--- +title: '<command> : l''élément de commande' +slug: Web/HTML/Element/command +tags: + - Element + - HTML + - Obsolete + - Reference +translation_of: Web/HTML/Element/command +--- +<div>{{obsolete_header}}{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><command></code></strong> représente une commande qui peut être lancée par l'utilisateur. Ces commandes font généralement partie d'un menu contextuel ou d'une barre d'outils mais on peut les exécuter n'importe où sur la page.</p> + +<div class="note"> +<p><strong>Note :</strong> L'élément <code><command></code> est inclus dans la spécification du W3C mais pas dans celle du WHATWG. Par ailleurs, à l'heure actuelle, aucun navigateur ne prend en charge cet élément.</p> +</div> + +<h2 id="Attributes">Attributes</h2> + +<p>Comme pour tous les éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur cet élément.</p> + +<dl> + <dt>{{htmlattrdef("checked")}}</dt> + <dd>Cet attribut indique que la commande est sélectionnée. Il ne doit pas être utilisé si l'attribut <code>type</code> ne vaut pas <code>checkbox</code> ou <code>radio</code>.</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>Cet attribut indique que la commande n'est pas disponible.</dd> + <dt>{{htmlattrdef("icon")}}</dt> + <dd>Cet attribut fournit une image qui représente la commande.</dd> + <dt>{{htmlattrdef("label")}}</dt> + <dd>Cet attribut indique le nom de la commande telle qu'elle est affichée à l'utilisateur.</dd> + <dt>{{htmlattrdef("radiogroup")}}</dt> + <dd>Cet attribut indique le nom du groupe de commandes auquel appartient la commande lorsque l'attribut <code>type</code> vaut <code>radio</code> le groupe sera activé lorsque la commande sera activée. Cet attribut ne doit pas être utilisé lorsque l'attribut <code>type</code> ne vaut pas <code>radio</code>.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>Cet attribut à valeur contrainte indique le type de commande. On peut utiliser une des trois valeurs . + <ul> + <li> + <p><code>command</code> (le type par défaut) indique une commande normale.</p> + </li> + <li> + <p><code>checkbox</code> indique que la commande peut être activée grâce à une case à cocher.</p> + </li> + <li> + <p><code>radio</code> indique que la commande peut être activée grâce à un bouton radio.</p> + </li> + </ul> + </dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><command type="command" label="Save" + icon="icons/save.png" onclick="save()"> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","200","100")}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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%C3%A9gorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_m%C3%A9ta-donn%C3%A9es">contenu de méta-données</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Aucun, cet élément est un élément vide.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>La balise de début est obligatoire et la balise de fin est interdite car c'est un élément vide.</td> + </tr> + <tr> + <th scope="row">Éléments parents autorisés</th> + <td>{{HTMLElement("colgroup")}} uniquement bien que celui-ci puisse être défini implicitement car sa balise de début n'est pas obligatoire. L'élément {{HTMLElement("colgroup")}} ne doit pas avoir d'élément fils {{HTMLElement("span")}}.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLCommandElement")}}</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', '#commands')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics.html#the-command-element', '<command>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</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> + +<p>{{Compat("html.elements.command")}}</p> diff --git a/files/fr/web/html/element/content/index.html b/files/fr/web/html/element/content/index.html new file mode 100644 index 0000000000..e3c3c4b46f --- /dev/null +++ b/files/fr/web/html/element/content/index.html @@ -0,0 +1,116 @@ +--- +title: <content> +slug: Web/HTML/Element/content +tags: + - Déprécié + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/content +--- +<div>{{Deprecated_header}}{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><content></code></strong> était utilisé au sein d'un <em><a href="/fr/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a></em> comme point d'insertion. Cet élément est désormais obsolète et n'était pas conçu pour être utilisé dans un document HTML simple mais pour être employé dans <a href="/fr/docs/Web/Web_Components">des composants web</a>. Il est désormais remplacé par l'élément <code><strong><slot></strong></code> qui permet de créer un point d'insertion pour un <em>shadow DOM</em> au sein du DOM.</p> + +<div class="note"> +<p><strong>Note : </strong>Bien que cet élément soit présent dans les premiers brouillons ded la spécification et implémenté dans plusieurs navigateurs, il a été retiré des dernières versions de la spécification et ne doit pas être utilisé. Cet élément est documenté afin d'aider à la migration.</p> +</div> + +<h2 id="Attributes">Attributes</h2> + +<p>Comme pour tous les éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur <code><content></code>.</p> + +<dl> + <dt><code>select</code></dt> + <dd>Une liste de sélecteurs séparés par des virgules. La syntaxe utilisée est la même que celle utilisée pour les sélecteurs CSS. Ils permettent de sélectionner le contenu à insérer à la place de l'élément <code><content></code>.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<p>Voici un exemple simple d'utilisation de l'élément <code><content></code>. Il s'agit d'un fichier HTML It is an HTML file with everything needed in it.</p> + +<h3 id="HTML">HTML</h3> + +<div class="note"> +<p><strong>Note :</strong> Pour que ce code fonctionne, le navigateur utilisé doit prendre en charge les composants web (voir par exemple <a href="/fr/docs/Web/Web_Components#Activer_les_Web_Components_dans_Firefox">l'activation des composants web dans Firefox</a>).</p> +</div> + +<pre class="brush: html"><html> + <head></head> + <body> + <!-- Le contenu original auquel on accède via <content> --> + <div> + <h4>L'en-tête de mon contenu</h4> + <p>Le texte de mon contenu</p> + </div> + + <script> + // On récupère le <div> ci-avant. + var myContent = document.querySelector('div'); + // On crée un shadow DOM sur le <div> + var shadowroot = myContent.createShadowRoot(); + // On ajoute un nouvel en-tête dans le shadow DOM + // et on conserve le paragraphe original. + shadowroot.innerHTML = + '<h2>Titre inséré</h2> <content select="p"></content>'; + </script> + + </body> +</html> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","200","130")}}</p> + +<h3 id="Capture">Capture</h3> + +<p><img alt="Contenu de l'exemple" src="https://mdn.mozillademos.org/files/10325/Capture.JPG" style="height: 193px; width: 464px;"></p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu" title="HTML/Content_categories">Catégories de contenu</a></th> + <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Modèle_de_contenu_transparent" title="HTML/Content_categories#Transparent_content_model">Contenu transparent</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 contenu de flux.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLContentElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Spécifications">Spécifications</h2> + +<p>Ce document ne fait plus partie d'aucune spécification.</p> + +<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.content")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/Web_Components">Les composants web</a></li> + <li>{{HTMLElement("shadow")}}</li> + <li>{{HTMLElement("template")}}</li> + <li>{{HTMLElement("slot")}}</li> + <li>{{HTMLElement("element")}}</li> +</ul> diff --git a/files/fr/web/html/element/data/index.html b/files/fr/web/html/element/data/index.html new file mode 100644 index 0000000000..83c25b0833 --- /dev/null +++ b/files/fr/web/html/element/data/index.html @@ -0,0 +1,107 @@ +--- +title: <data> +slug: Web/HTML/Element/data +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/data +--- +<div>{{HTMLRef}}</div> + +<p>L'élément <strong>HTML <code><data></code> </strong>relie un contenu à une version de ce contenu interprétable par un ordinateur. Si le contenu possède une composante temporelle, l'élément {{HTMLElement("time")}} doit être utiisé.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/data.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> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme pour tous les autres éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur <code><data></code>.</p> + +<dl> + <dt>{{htmlattrdef("value")}}</dt> + <dd>Cet attribut définit la version du contenu qui doit être interprétée par une machine.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<p>Dans l'exemple suivant, on affiche des noms de produits avec des codes correspondants :</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p>Nouveaux produits</p> +<ul> + <li><data value="3251546">Mini voiture</data></li> + <li><data value="5867654">Grande voiture</data></li> + <li><data value="9887635">Énorme voiture</data></li> +</ul> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","200","180")}}</p> + +<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_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>.</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"><dfn>Interface DOM</dfn></th> + <td>{{domxref("HTMLDataElement")}}</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', 'semantics.html#the-data-element', '<data>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Pas de changement depuis {{Spec2('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-data-element', '<data>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</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.data")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'élément {{HTMLElement("time")}}.</li> +</ul> diff --git a/files/fr/web/html/element/datalist/index.html b/files/fr/web/html/element/datalist/index.html new file mode 100644 index 0000000000..732a5ad5ed --- /dev/null +++ b/files/fr/web/html/element/datalist/index.html @@ -0,0 +1,114 @@ +--- +title: <datalist> +slug: Web/HTML/Element/datalist +tags: + - Element + - Formulaires + - HTML + - Reference + - Web + - polyfill +translation_of: Web/HTML/Element/datalist +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><datalist></code></strong> contient un ensemble d'éléments {{HTMLElement("option")}} qui représentent les valeurs possibles pour d'autres contrôles.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/datalist.html", "tabbed-standard")}}</div> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément ne possède que <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>, communs à tous les éléments.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><label for="monNavigateur">Veuillez choisir un navigateur parmi ceux-ci :</label> +<input list="navigateurs" id="monNavigateur" name="monNavigateur"/> +<datalist id="navigateurs"> + <option value="Chrome"> + <option value="Firefox"> + <option value="Internet Explorer"> + <option value="Opera"> + <option value="Safari"> +</datalist> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","200","200")}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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/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/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Soit <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">du contenu phrasé</a> ou zéro ou plus d'éléments {{HTMLElement("option")}}.</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>N'importe quel élément qui accepte <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">du contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLDataListElement")}}</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-datalist-element', '<datalist>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-datalist-element', '<datalist>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</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> + +<p>{{Compat("html.elements.datalist")}}</p> + +<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2> + +<p>Il est possible d'utiliser <a href="https://github.com/mfranzke/datalist-polyfill">cette bibliothèque</a> pour émuler la fonctionnalité dans les anciens navigateurs.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("input")}} et plus précisément son attribut {{htmlattrxref("list", "input")}}.</li> + <li>{{HTMLElement("option")}}.</li> +</ul> diff --git a/files/fr/web/html/element/dd/index.html b/files/fr/web/html/element/dd/index.html new file mode 100644 index 0000000000..473103b350 --- /dev/null +++ b/files/fr/web/html/element/dd/index.html @@ -0,0 +1,117 @@ +--- +title: '<dd> : l''élément de détail d''une description' +slug: Web/HTML/Element/dd +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/dd +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><dd></code></strong> (pour <em><strong>d</strong>efinition <strong>d</strong>escription</em>) indique la définition d'un terme au sein d'une liste de définitions (élément ({{HTMLElement("dl")}}). Cet élément ne peut apparaître qu'en tant qu'élément appartenant à une liste de définitions et doit être précédé d'un élément {{HTMLElement("dt")}}.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/dd.html","tabbed-standard")}}</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> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("nowrap")}} {{Non-standard_inline}}</dt> + <dd>Si la valeur de cet attribut est <code>yes</code>, il n'y aura pas de retour à la ligne si le texte de la définition dépasse la taille de la ligne. La valeur par défaut est <code>no</code>.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><dl> + <dt>Dancing</dt> + <dd> + A series of movements involving two partners + where speed and rhythm match harmoniously with + music. + </dd> +</dl> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","200","130")}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu" title="HTML/Content_categories">Catégories de contenu</a></th> + <td>Aucune.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" title="HTML/Content_categories#Flow_content">Contenu de flux</a>.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>Cet élément doit avoir une balise ouvrante. La balise de fin peut être omise s'il est immédiatement suivi par un autre élément <code><dd></code> ou un autre élément <code><dt></code> ou s'il n'y a plus d'autre contenu dans l'élément parent.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Au sein d'un élément {{HTMLElement("dl")}} après un élément {{HTMLElement("dt")}} ou après un élément {{HTMLElement("dd")}}. Sinon (selon le WHATWG), au sein d'un élément {{HTMLElement("div")}} situé dans un élément {{HTMLElement("dl")}}.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</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', 'grouping-content.html#the-dd-element', '<dd>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dd-element', '<dd>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dd>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("html.elements.dd")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLELement("dl")}}</li> + <li>{{HTMLElement("dt")}}</li> +</ul> diff --git a/files/fr/web/html/element/del/index.html b/files/fr/web/html/element/del/index.html new file mode 100644 index 0000000000..94839d3584 --- /dev/null +++ b/files/fr/web/html/element/del/index.html @@ -0,0 +1,144 @@ +--- +title: '<del> : l''élément de texte supprimé' +slug: Web/HTML/Element/del +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/del +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><del></code> </strong>représente une portion de texte ayant été supprimée d'un document. Cet élément est souvent (mais pas nécessairement) affiché rayé.</p> + +<p>L'élément {{HTMLElement("ins")}} est quant à lui utilisé pour représenter des portions de texte ajoutées.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/del.html", "tabbed-standard")}}</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> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme pour tous les autres éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur <code><del></code>.</p> + +<dl> + <dt>{{htmlattrdef("cite")}}</dt> + <dd>Une URL pour une ressource expliquant le changement (cela peut être un procès verbal d'une réunion par exemple).</dd> + <dt>{{htmlattrdef("datetime")}}</dt> + <dd>Cet attribut indique l'heure et la date du changement et doit être une date valide avec une heure facultative. Si la valeur ne peut pas être analysée comme telle, l'élément n'aura pas d'information temporelle associée. Voir <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">l'article sur les formats</a> pour la représentation d'<a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates">une date seule</a> ou d'<a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates_et_heures_locales">une date avec une heure</a>.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p><del>Ce texte a été supprimé.</del> mais pas celui-ci</p></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","200","100")}}</p> + +<h2 id="Accessibilité">Accessibilité</h2> + +<p>Par défaut, la plupart des outils d'assistance n'annoncent pas la présence de l'élément <code>del</code>. On peut le rendre annonçable via la propriété CSS {{cssxref("content")}} et grâce aux pseudo-éléments {{cssxref("::before")}} et {{cssxref("::after")}}.</p> + +<pre>del::before, +del::after { + clip-path: inset(100%); + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +del::before { + content: " [Début de la suppression]"; +} + +del::after { + content: " [Fin de la suppression] "; +} +</pre> + +<p>Certaines personnes qui utilisent des lecteurs d'écran désactivent sciemment ces annonces pour éviter une verbosité trop importante. Il est donc important de ne pas abuser de cette technique et de ne l'appliquer qu'à des situations où il est nécessaire de comprendre que du contenu a été supprimé.</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/"><em>Short note on making your mark (more accessible) | The Paciello Group</em> (en anglais)</a></li> + <li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html"><em>Tweaking Text Level Styles | Adrian Roselli</em> (en anglais)</a></li> +</ul> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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_phras.C3.A9">Contenu phrasé</a> ou <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Modèle_de_contenu_transparent">Transparent</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_phras.C3.A9">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLModElement")}}</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', 'edits.html#the-del-element', '<del>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'edits.html#the-del-element', '<del>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.4', '<del>')}}</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> + +<p>{{Compat("html.elements.del")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("ins")}} qui permet de représenter les insertions dans un texte</li> + <li>{{HTMLElement("s")}} qui permet de représenter des portions de texte qui ne sont plus pertinentes (elles sont généralement barrées)</li> +</ul> diff --git a/files/fr/web/html/element/details/index.html b/files/fr/web/html/element/details/index.html new file mode 100644 index 0000000000..70797fa6b9 --- /dev/null +++ b/files/fr/web/html/element/details/index.html @@ -0,0 +1,265 @@ +--- +title: <details> +slug: Web/HTML/Element/details +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/details +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><details></code></strong> est utilisé comme un outil permettant de révéler une information. Un résumé ou un intitulé peuvent être fournis grâce à un élément {{HTMLElement("summary")}}.</p> + +<p>La plupart du temps, le contrôle utilisé pour cet élément est un triangle qui est tourné ou tordu afin d'indiquer si l'élément est révélé ou non. Si le premier élément fils de l'élément <code><details></code> est un élément <code><summary></code>, c'est le contenu de ce dernier qui est utilisé comme intitulé pour le contenu à révéler (l'intitulé est donc toujours visible).</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/details.html", "tabbed-standard")}}</div> + +<div 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> !</div> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme tous les éléments HTML, cet élément accepte les <a href="/fr/docs/Web/HTML/Attributs_universels" title="fr/HTML/Global_attributes">attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("open")}}</dt> + <dd>Cet attribut booléen indique si les détails seront affichés lors du chargement de la page. La valeur par défaut est <code>false</code> (les détails sont alors cachés).</dd> +</dl> + +<h2 id="Évènement_toggle">Évènement <code>toggle</code></h2> + +<p>En plus des évènements classiques pris en charge par les éléments HTML, l'élément <code><details></code> prend en charge l'évènement {{event("toggle")}} qui est envoyé sur l'élément lorsque son état change entre ouvert et fermé (que ce soit dans un sens ou dans l'autre). L'évènement est envoyé après que l'état ait été changé et si plusieurs changement d'état ont eu lieu avant que le navigateur envoie l'évènement, le navigateur fusionnera ces évènements en un seul.</p> + +<p>On peut alors écouter cet évènement en JavaScript afin de détecter le changement d'état du contrôle :</p> + +<pre class="brush: js">detailsElem.addEventListener("toggle", function(evt){ + if(detailsElem.open) { + /* l'état est passé en "ouvert" */ + } else { + /* l'état est passé en "fermé" */ + } +}, false);</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Un_exemple_simple">Un exemple simple</h3> + +<p>Dans cet exemple, on utilise un élément <code><details></code> sans résumé/intitulé.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><details> + <p>Requires a computer running an operating system. The computer + must have some memory and ideally some kind of long-term storage. + An input device as well as some form of output device is + recommended.</p> +</details></pre> + +<p>Ici, le navigateur utilisera alors un intitulé par défaut (généralement, ce sera "Détails").</p> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Un_exemple_simple", 650, 150)}}</p> + +<h3 id="Fournir_un_résumé">Fournir un résumé</h3> + +<p>Dans cet exemple, on ajoute un résumé grâce à l'élément {{HTMLElement("summary")}} qu'on imbrique au début de l'élément <code><details></code> :</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><details> + <summary>System Requirements</summary> + <p>Requires a computer running an operating system. The computer + must have some memory and ideally some kind of long-term storage. + An input device as well as some form of output device is + recommended.</p> +</details></pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("Fournir_un_résumé", 650, 150)}}</p> + +<h3 id="Créer_un_contrôle_déja_ouvert">Créer un contrôle déja ouvert</h3> + +<p>Pour obtenir une boîte <code><details></code> dans un état ouvert, il suffit d'ajouter l'attribut booléen <code>open</code> :</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><details open> + <summary>System Requirements</summary> + <p>Requires a computer running an operating system. The computer + must have some memory and ideally some kind of long-term storage. + An input device as well as some form of output device is + recommended.</p> +</details></pre> + +<h4 id="Résultat_3">Résultat</h4> + +<p>{{EmbedLiveSample("Créer_un_contrôle_déja_ouvert", 650, 150)}}</p> + +<h3 id="Personnaliser_l’apparence">Personnaliser l’apparence</h3> + +<p>Utilisons un peu de CSS afin de personnaliser l'apparence du contrôle fourni par <code><details></code>.</p> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">details { + font: 16px "Open Sans", "Arial", sans-serif; + width: 620px; +} + +details > summary { + padding: 2px 6px; + width: 15em; + background-color: #ddd; + border: none; + box-shadow: 3px 3px 4px black; +} + +details > p { + border-radius: 0 0 10px 10px; + background-color: #ddd; + padding: 2px 6px; + margin: 0; + box-shadow: 3px 3px 4px black; +} +</pre> + +<p>Ce fragment de feuille de style CSS crée une apparence similaire à un onglet où, lorsqu'on clique sur l'onglet, il s'étend et révèle le contenu.</p> + +<h4 id="HTML_4">HTML</h4> + +<pre class="brush: html"><details> + <summary>System Requirements</summary> + <p>Requires a computer running an operating system. The computer + must have some memory and ideally some kind of long-term storage. + An input device as well as some form of output device is + recommended.</p> +</details></pre> + +<h4 id="Résultat_4">Résultat</h4> + +<p>{{EmbedLiveSample("Personnaliser_l’apparence", 650, 150)}}</p> + +<h3 id="Personnaliser_le_marqueur_de_révélation">Personnaliser le marqueur de révélation</h3> + +<p>Le triangle généralement utilisé peut également être personnalisé. Toutefois, cette fonctionnalité a été standardisée récemment et n'est pas encore largement prise en charge. De plus, la méthode de prise en charge varie encore d'un navigateur à un autre.</p> + +<p>L'élément {{HTMLElement("summary")}} permet d'utiliser la propriété raccourcie {{cssxref("list-style")}} ainsi que les propriétés détaillées associées (telle que {{cssxref("list-style-type")}}) afin de modifier l'icône utilisée pour le contrôle.</p> + +<p>Il est possible de retirer l'icône en utilisant la valeur <code>none</code> pour la propriété <code>list-style</code>. Il est aussi possible d'utiliser d'autres valeurs sur <code>list-style</code> afin de configurer l'apparence du contrôle.</p> + +<p>Actuellement, Chrome ne prend pas en charge cette fonctionnalité et il faut utiliser <a href="/fr/docs/Web/CSS/Pseudo-%C3%A9l%C3%A9ments">le pseudo-élément</a> spécifique <code>::-webkit-details-marker</code> afin de personnaliser l'apparence.</p> + +<p>Pour une meilleure compatibilité à court terme, vous pouvez utiliser <code>display: none</code> sur l'élément <code><summary></code> afin de désactiver l'affichage du contrôle.</p> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css; highlight:[12, 15-17]">details { + font: 16px "Open Sans", "Arial", sans-serif; + width: 620px; +} + +details > summary { + padding: 2px 6px; + width: 15em; + background-color: #ddd; + border: none; + box-shadow: 3px 3px 4px black; + list-style: none; +} + +details > summary::-webkit-details-marker { + display: none; +} + +details > p { + border-radius: 0 0 10px 10px; + background-color: #ddd; + padding: 2px 6px; + margin: 0; + box-shadow: 3px 3px 4px black; +} +</pre> + +<h4 id="HTML_5">HTML</h4> + +<pre class="brush: html"><details> + <summary>System Requirements</summary> + <p>Requires a computer running an operating system. The computer + must have some memory and ideally some kind of long-term storage. + An input device as well as some form of output device is + recommended.</p> +</details></pre> + +<h4 id="Résultat_5">Résultat</h4> + +<p>{{EmbedLiveSample("Personnaliser_le_marqueur_de_révélation", 650, 150)}}</p> + +<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>, racine de section, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a>, <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>Un élément {{HTMLElement("summary")}} suivi par du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</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_de_flux">contenu de flux</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row"><dfn>Interface DOM</dfn></th> + <td>{{domxref("HTMLDetailsElement")}}</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', 'interactive-elements.html#the-details-element', '<details>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-details-element', '<details>')}}</td> + <td>{{Spec2('HTML5.1')}}</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.details")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("summary")}}</li> +</ul> diff --git a/files/fr/web/html/element/dfn/index.html b/files/fr/web/html/element/dfn/index.html new file mode 100644 index 0000000000..7ff128d4f2 --- /dev/null +++ b/files/fr/web/html/element/dfn/index.html @@ -0,0 +1,196 @@ +--- +title: '<dfn> : l''élément de définition' +slug: Web/HTML/Element/dfn +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/dfn +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><dfn></code></strong> est utilisé afin d'indiquer le terme qui est en train d'être défini dans une phrase ou un paragraphe (sa définition est écrite dans son parent {{HTMLElement("p")}} ou {{HTMLElement("dt")}}/{{HTMLElement("dd")}} ou {{HTMLElement("section")}} le plus proche).</p> + +<div class="note"> +<p><strong>Note :</strong> Si cette phrase vous paraît absconse, n'hésitez pas à consulter les exemples ci-après.</p> +</div> + +<p>Le rôle de l'élément <code><dfn></code> est purement sémantique.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/dfn.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> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme pour tous les éléments, on peut appliquer <a href="/fr/docs/Web/HTML/Attributs_globaux">les attributs universels</a> sur <code><dfn></code>.</p> + +<p>Pour cet élément, l'attribut <code><strong>title</strong></code> possède un sens particulier noté ci-après.</p> + +<h2 id="Notes_d'utilisation"><strong>Notes d'utilisation :</strong></h2> + +<ul> + <li>L'élément <code><dfn></code> marque le terme étant défini. La définition du terme doit être donnée par l'élément {{HTMLElement("p")}}, ou {{HTMLElement("section")}} parent ou par un groupe de liste de définitions (généralement une paire {{HTMLElement("dt")}}, {{HTMLElement("dd")}}).</li> + <li>La valeur exacte du terme étant défini est déterminé par les règles suivantes : + <ol> + <li>Si l'élément <code><dfn></code> possède un attribut <code><strong>title</strong></code> alors le terme en question est la valeur de cet attribut. Dans ce cas, l'élément doit toujours contenir du texte mais ce dernier peut être une autre forme du terme (par exemple une abbréviation, auquel cas on utilisera un élément {{HTMLElement("abbr")}})</li> + <li>Sinon et s'il contient seulement un élément {{HTMLElement("abbr")}} avec l'attribut {{htmlattrxref("title", "abbr")}}, alors le terme en question est la valeur de cet attribut.</li> + <li>Dans tous les autres cas, le texte contenu par l'élément <code><dfn></code> est le terme qui est défini.</li> + </ol> + </li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Identification_simple_d’un_terme">Identification simple d’un terme</h3> + +<p>Dans cet exemple, on utilise simplement l'élément <code><dfn></code> afin d'identifier l'emplacement du terme défini au sein de sa définition.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p> + L'élément HTML de définition + (<strong><dfn>&lt;dfn&gt;</dfn></strong>) est + utilisé afin d'indiquer le terme en cours de + définition dans la phrase. +</p></pre> + +<p>L'élément <code><dfn></code> n'ayant ici pas d'attribut <code>title</code>, c'est le contenu textuel qui représente le terme que l'on définit.</p> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Identification_simple_d’un_terme", 650, 120)}}</p> + +<h3 id="Liens_vers_des_définitions">Liens vers des définitions</h3> + +<p>Il est possible d'utiliser l'attribut <code>id</code> afin de créer des liens avec des éléments {{HTMLElement("a")}} qui pointent vers la définition.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p>L'élément de définition +(<strong><dfn id="definition-dfn">&lt;dfn&gt;</dfn></strong>) est +utilisé afin d'indiquer le terme en train d'être défini dans le +contexte d'une phrase.</p> + +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece +donan, Latine voluptatem vocant. Confecta res esset. Duo Reges: +constructio interrete. Scrupulum, inquam, abeunti; </p> + +<p>Negare non possum. Dat enim intervalla et relaxat. Quonam modo? +Equidem e Cn. Quid de Pythagora? In schola desinis. </p> + +<p>Ubi ut eam caperet aut quando? Cur iustitia laudatur? Aperiendum +est igitur, quid sit voluptas; Quid enim? Non est igitur voluptas +bonum. Urgent tamen et nihil remittunt. Quid enim possumus hoc +agere divinius? </p> + +<p>C'est pourquoi nous avons décidé d'utiliser l'élément +<code><a href="#definition-dfn">&lt;dfn&gt;</a></code> pour +ce projet.</p></pre> + +<p>On voit ici que l'élément possède désormais un attribut {{htmlattrxref("id")}} avec la valeur <code>"definition-dfn"</code>. Cet attribut permet d'utiliser l'élément comme cible d'un lien. Plus bas, on crée un tel lien avec un élément {{HTMLElement("a")}} dont l'attribut {{htmlattrxref("href", "a")}} vaut <code>"#definition-dfn"</code>, ce qui permet de remonter à la définition.</p> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("Liens_vers_des_définitions", 650, 300)}}</p> + +<h3 id="Combiner_les_abbréviations_et_les_définitions">Combiner les abbréviations et les définitions</h3> + +<p>Dans certains cas, on souhaite utiliser l'abbréviation d'un terme lorsqu'on le définit. Pour cela, on peut utiliser <code><dfn></code> et {{HTMLElement("abbr")}} de la façon suivante :</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><p>The <dfn><abbr title="Hubble Space Telescope">HST</abbr></dfn> +is among the most productive scientific instruments ever constructed. +It has been in orbit for over 20 years, scanning the sky and +returning data and photographs of unprecedented quality and +detail.</p> + +<p>Indeed, the <abbr title="Hubble Space Telescope">HST</abbr> has +arguably done more to advance science than any device ever built.</p></pre> + +<p>On notera que l'élément <code><abbr></code> est imbriqué dans l'élément <code><dfn></code>. L'élément <code><abbr></code> indique que le terme est une abbréviation ("HST") et indique le détail de cette abbrévation ("Hubble Space Telescope") grâce à son attribut <code>title</code>. L'élément <code><dfn></code> indique quant à lui que c'est bien ce terme abrégé qu'on est en train de définir.</p> + +<h4 id="Résultat_3">Résultat</h4> + +<p>{{EmbedLiveSample("Combiner_les_abbréviations_et_les_définitions", 650, 200)}}</p> + +<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_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 élément {{HTMLElement("dfn")}} qui soit un descendant.</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>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row"><dfn>Interface DOM</dfn></th> + <td>{{domxref("HTMLElement")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécifications</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-dfn-element', '<dfn>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-dfn-element', '<dfn>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<dfn>')}}</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> + +<p>{{Compat("html.elements.dfn")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les éléments HTML en lien avec les listes de définitions : + <ul> + <li>{{HTMLElement("dl")}}</li> + <li>{{HTMLElement("dt")}}</li> + <li>{{HTMLElement("dd")}}</li> + </ul> + </li> + <li>{{HTMLElement("abbr")}}</li> +</ul> diff --git a/files/fr/web/html/element/dialog/index.html b/files/fr/web/html/element/dialog/index.html new file mode 100644 index 0000000000..e748648f51 --- /dev/null +++ b/files/fr/web/html/element/dialog/index.html @@ -0,0 +1,166 @@ +--- +title: '<dialog> : l''élément de boîte de dialogue' +slug: Web/HTML/Element/dialog +tags: + - Element + - Experimental + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/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> + +<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> + +<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> +</dl> + +<h2 id="Notes">Notes</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> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><!-- Une boîte de dialogue qui contient 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> + </select> + </label></p> + <menu> + <button value="cancel">Annuler</button> + <button id="confirmBtn" value="default">Confirmer</button> + </menu> + </form> +</dialog> + +<menu> + <button id="updateDetails">Mettre à jour les détails</button> +</menu> + +<output aria-live="polite"></output> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<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'); + + // 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 + " !"; + }); +})(); + +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","400","500")}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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> + +<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> +</ul> diff --git a/files/fr/web/html/element/dir/index.html b/files/fr/web/html/element/dir/index.html new file mode 100644 index 0000000000..4b62a33fbf --- /dev/null +++ b/files/fr/web/html/element/dir/index.html @@ -0,0 +1,58 @@ +--- +title: '<dir> : l''élément de répertoire (obsolète)' +slug: Web/HTML/Element/dir +tags: + - Element + - HTML + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/dir +--- +<div>{{Obsolete_header}}{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><dir></code></strong> (pour <em>directory</em>) est utilisé comme un conteneur pour un répertoire (c'est-à-dire un ensemble de fichiers). Des styles et icônes peuvent être appliqués par l'agent utilisateur. Cet élément obsolète ne doit pas être utilisé, il peut être remplacé par l'élément {{HTMLElement("ul")}} qui permet de représenter des listes et, entre autres, des listes de fichiers.</p> + +<div class="note"><strong>Note d'utilisation : </strong>Cet élément ne doit pas être utilisé. Bien que présent dans les premières spécifications HTML, il a été déprécié dans HTML 4, et rendu obsolète avec HTML5. Il faudra privilégier l'élément {{HTMLElement("ul")}}. De plus, aucun navigateur majeur ne prend en charge cet élément.</div> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Cet élément implémente l'interface {{domxref("HTMLDirectoryElement")}}.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme pour tous les autres éléments HTML, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur cet élément.</p> + +<dl> + <dt>{{htmlattrdef("compact")}}</dt> + <dd>Cet attribut booléen indique que la liste doit être rendue avec un affichage compact. L'interprétation de cet attribut dépend de l'agent utilisateur. Il ne fonctionne pas dans tous les navigateurs. + <div class="note"><strong>Note d'utilisation : </strong>Cet attribut ne doit pas être utilisé car il a été déprécié. L'élément {{HTMLElement("dir")}} doit être mis en forme en utilisant <a href="/fr/docs/Web/CSS">CSS</a>. Pour obtenir un effect visuel similaire à l'attribut <code>compact</code>, la propriété CSS {{cssxref("line-height")}} peut être utilisé avec la valeur <code>80%</code>.</div> + </dd> +</dl> + +<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.dir")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments HTML utilisés pour les listes : + <ul> + <li>{{HTMLElement("ol")}}</li> + <li>{{HTMLElement("ul")}}</li> + <li>{{HTMLElement("li")}}</li> + <li>{{HTMLElement("menu")}}</li> + </ul> + </li> + <li>Les propriétés CSS qui peuvent être utilisées pour mettre en forme l'élément <code><dir></code> : + <ul> + <li>La propriété {{cssxref('list-style')}} est utile pour choisir l'apparence des puces.</li> + <li><a href="/fr/docs/Web/CSS/Compteurs_CSS">Les compteurs CSS</a> sont utiles pour gérer des listes imbriquées complexes.</li> + <li>La propriété {{cssxref('line-height')}} est utile pour reproduire l'attribut déprécié {{htmlattrxref("compact", "dir")}}.</li> + <li>La propriété {{cssxref('margin')}} est utile pour contrôler l'indentation de la liste.</li> + </ul> + </li> +</ul> diff --git a/files/fr/web/html/element/div/index.html b/files/fr/web/html/element/div/index.html new file mode 100644 index 0000000000..b6371f8dda --- /dev/null +++ b/files/fr/web/html/element/div/index.html @@ -0,0 +1,154 @@ +--- +title: '<div> : l''élément de division du contenu' +slug: Web/HTML/Element/div +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/div +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><div></code></strong> (qui signifie <em>division du document</em>) est un conteneur générique qui permet d'organiser le contenu sans représenter rien de particulier. Il peut être utilisé afin de grouper d'autres éléments pour leur appliquer un style (en utilisant les attributs {{htmlattrxref("class")}} ou {{htmlattrxref("id")}}) ou parce qu'ils partagent des attributs aux valeurs communes, tel que {{htmlattrxref("lang")}}. Il doit uniquement être utilisé lorsqu'aucun autre élément sémantique (par exemple {{HTMLElement("article")}} ou {{HTMLElement("nav")}}) n'est approprié.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/div.html","tabbed-standard")}}</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> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme tous les autres éléments HTML, cet élément accepte <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<div class="note"> +<p><strong>Note :</strong> L'attribut <code><strong>align</strong></code> est désormais obsolète et ne doit plus être appliqué pour un <code><div></code>. On privilégiera l'utilisation des propriétés et outils CSS (tels que <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">la grille CSS</a> ou <a href="/fr/docs/Glossaire/Flexbox">les boîtes flexibles (flexbox)</a>) pour aligner et positionner des éléments <code><div></code>.</p> +</div> + +<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> + +<p>L'élément <code><div></code> doit uniquement être utilisé lorsqu'il n'existe aucun autre élément dont la sémantique permet de représenter le contenu (par exemple {{HTMLElement("article")}} ou {{HTMLElement("nav")}}).</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Un_exemple_simple">Un exemple simple</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div> + <p> + Tout type de contenu. Par exemple + &lt;p&gt;, &lt;table&gt;. À vous + de voir&nbsp;! + </p> +</div> +</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Un_exemple_simple","200","200")}}</p> + +<h3 id="Un_exemple_mis_en_forme">Un exemple mis en forme</h3> + +<p>Cet exemple crée une boîte avec une ombre en appliquant la mise en forme via du CSS sur l'élément <code><div></code>. On notera l'utilisation de l'attribut {{htmlattrxref("class")}} sur l'élément <code><div></code> afin d'appliquer la règle <code>"shadowbox"</code>.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><div class="shadowbox"> + <p>Voici un paragraphe très intéressant inscrit + dans une boîte avec une ombre.</p> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.shadowbox { + width: 15em; + border: 1px solid #333; + box-shadow: 8px 8px 5px #444; + padding: 8px 12px; + background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc); +}</pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("Un_exemple_mis_en_forme", 650, 120)}}</p> + +<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_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_de_flux">Contenu de flux</a>. Selon le WHATWG, si l'élément parent est un élément {{HTMLElement("dl")}}, un ou plusieurs éléments {{HTMLElement("dt")}} suivis par un ou plusieurs élément {{HTMLElement("dd")}} éventuellement entrecoupés par des éléments {{HTMLElement("script")}} ou {{HTMLElement("template")}}.</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 qui accepte un <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>. Selon le WHATWG, un élément {{HTMLElement("dl")}}.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLDivElement")}}</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', 'grouping-content.html#the-div-element', '<div>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Aucune modification depuis la dernière dérivation.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '<div>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>L'attribut <strong><code>align</code></strong> est désormais considéré obsolète.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '<div>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("html.elements.div")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les éléments dont la sémantique est liée au sectionnement du document : + <ul> + <li>{{HTMLElement("section")}}</li> + <li>{{HTMLElement("article")}}</li> + <li>{{HTMLElement("nav")}}</li> + <li>{{HTMLElement("header")}}</li> + <li>{{HTMLElement("footer")}}.</li> + </ul> + </li> + <li>{{HTMLElement("span")}} pour mettre en forme un contenu phrasé.</li> +</ul> diff --git a/files/fr/web/html/element/dl/index.html b/files/fr/web/html/element/dl/index.html new file mode 100644 index 0000000000..44c315b040 --- /dev/null +++ b/files/fr/web/html/element/dl/index.html @@ -0,0 +1,199 @@ +--- +title: '<dl> : l''élément de liste de descriptions' +slug: Web/HTML/Element/dl +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/dl +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><dl></code></strong> représente une liste de descriptions sous la forme d'une liste de paires associant des termes (fournis par des éléments {{HTMLElement("dt")}}) et leurs descriptions ou définitions (fournies par des éléments {{HTMLElement("dd")}}). On utilisera par exemple cet élément pour implémenter un glossaire.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/dl.html", "tabbed-standard")}}</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> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Un_seul_terme_et_une_seule_définition">Un seul terme et une seule définition</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><dl> + <dt>Firefox</dt> + <dd> + Un navigateur Web libre, open-source, multi-plateforme + dévelopé par la Mozilla Corporation et des centaines de + volontaires. + </dd> + <!-- D'autres termes et leurs descriptions --> +</dl> +</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Un_seul_terme_et_une_seule_définition","400","200")}}</p> + +<h3 id="Plusieurs_termes_avec_une_même_définition">Plusieurs termes avec une même définition</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><dl> + <dt>Firefox</dt> + <dt>Mozilla Firefox</dt> + <dt>Fx</dt> + <dd> + Un navigateur Web libre, open-source, multi-plateforme + dévelopé par la Mozilla Corporation et des centaines de + volontaires. + </dd> + <!-- D'autres termes et leurs définitions --> +</dl> +</pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("Plusieurs_termes_avec_une_même_définition","400","200")}}</p> + +<h3 id="Un_seul_terme_avec_plusieurs_définitions">Un seul terme avec plusieurs définitions</h3> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><dl> + <dt>Firefox</dt> + <dd> + Un navigateur Web libre, open-source, multi-plateforme + dévelopé par la Mozilla Corporation et des centaines de + volontaires. + </dd> + <dd> + Le petit panda, panda roux, panda fuligineux ou panda + éclatant (<em>Ailurus fulgens</em>), est un mammifère originaire + de l'Himalaya et de la Chine méridionale. + </dd> + <!-- D'autres termes et leurs définitions --> +</dl> +</pre> + +<h4 id="Résultat_3">Résultat</h4> + +<p>{{EmbedLiveSample("Un_seul_terme_avec_plusieurs_définitions","400","200")}}</p> + +<h3 id="Métadonnées">Métadonnées</h3> + +<p>Les listes de définitions sont utiles lorsqu'on souhaite afficher des métadonnées sous forme d'une liste de clés-valeurs.</p> + +<pre class="brush: html"><dl> + <dt>Name</dt> + <dd>Godzilla</dd> + <dt>Born</dt> + <dd>1952</dd> + <dt>Birthplace</dt> + <dd>Japan</dd> + <dt>Color</dt> + <dd>Green</dd> +</dl></pre> + +<div class="note"> +<p><strong>Astuce :</strong> Il peut être pratique de définir un séparateur clé/valeur en CSS3, par exemple : dt:after {content: ": ";}.</p> +</div> + +<h2 id="Notes">Notes</h2> + +<p>Cet élément ne doit pas être utilisé (de même que les éléments {{HTMLElement("ul")}}), dans le seul but de créer une indentation sur la page. Bien que cela fonctionne parfaitement, c'est une pratique déconseillée qui mêle mise en forme et sémantique. Cela modifie le rôle que doivent avoir les listes de définitions.</p> + +<p>Pour changer l'indentation de la définition d'un terme, il faut utiliser la propriété <a href="/fr/docs/Web/CSS">CSS</a> {{cssxref("margin")}}.</p> + +<h2 id="Accessibilité">Accessibilité</h2> + +<p>Les lecteurs d'écran annoncent <code><dl></code> de façon différente. Certains lecteurs d'écran tels que VoiceOver sur iOS n'annonceront pas le fait que le contenu de <code><dl></code> est une liste. Il faut donc s'assurer que la relation entre les éléments de la liste est bien communiquée grâce aux contenus des éléments.</p> + +<ul> + <li><a href="https://s.codepen.io/aardrian/debug/NzGaKP"><code><dt></code> et <code><dd></code> sur CodePen</a></li> +</ul> + +<p> </p> + +<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> et, si les éléments enfants de <code><dl></code> incluent une paire avec un nom et une valeur, du <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> + <p>Zéro ou plusieurs groupes composés d'un ou plusieurs éléments {{HTMLElement("dt")}}, chacun suivi par un ou plusieurs éléments {{HTMLElement("dd")}} entre lesquels on pourra éventuellement avoir des éléments {{HTMLElement("script")}} et {{HTMLElement("template")}}.</p> + + <p>Selon le WHATWG : un ou plusieurs éléments {{HTMLElement("div")}} éventuellement entrecoupés d'éléments {{HTMLElement("script")}} ou {{HTMLElement("template")}}.</p> + </td> + </tr> + <tr> + <th scope="row">Omission de balises</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_de_flux">contenu de flux</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row"><dfn>Interface DOM</dfn></th> + <td>{{domxref("HTMLDListElement")}}</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', 'semantics.html#the-dl-element', '<dl>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dl-element', '<dl>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dl>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("html.elements.dl")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("dt")}}</li> + <li>{{HTMLElement("dd")}}</li> +</ul> diff --git a/files/fr/web/html/element/dt/index.html b/files/fr/web/html/element/dt/index.html new file mode 100644 index 0000000000..bf91a4d6e7 --- /dev/null +++ b/files/fr/web/html/element/dt/index.html @@ -0,0 +1,123 @@ +--- +title: '<dt> : l''élément pour le terme d''une description' +slug: Web/HTML/Element/dt +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/dt +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><dt></code> </strong>identifie un terme dans une liste de définitions ou de descriptions. Cet élément n'apparaît qu'en tant qu'élément enfant d'un élément {{HTMLElement("dl")}} et est généralement suivi d'un élément {{HTMLElement("dd")}}.</p> + +<p>Cependant, on peut avoir plusieurs éléments <code><dt></code> à la suite qui indiquent que plusieurs termes seront définis par le même élément {{HTMLElement("dd")}} qui suivra.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/dt.html", "tabbed-standard")}}</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> + +<h2 id="Attributs">Attributs</h2> + +<p>On peut employer <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur cet élément.</p> + +<h2 id="Exemples">Exemples</h2> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><dl> + <dt>Firefox</dt> + <dd>Un navigateur Web libre, open-source, multi-plateforme + dévelopé par la Mozilla Corporation et des centaines de + volontaires.</dd> + <dd>Le petit panda, panda roux, panda fuligineux ou panda + éclatant (<em>Ailurus fulgens</em>), est un mammifère originaire + de l'Himalaya et de la Chine méridionale.</dd> + + <!-- D'autres termes et leurs définitions/descriptions --> +</dl> +</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Exemples","400","200")}}</p> + +<div class="note"> +<p><strong>Note :</strong> Pour d'autres exemples sur cet élément, on pourra consulter la page {{HTMLElement("dl")}}.</p> +</div> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu" title="HTML/Content_categories">Catégories de contenu</a></th> + <td>Aucune.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" title="HTML/Content_categories#Phrasing_content">Contenu de flux</a>, sans élément {{HTMLElement("header")}}, {{HTMLElement("footer")}}, sans contenu sectionnant et sans titre parmi les descendants.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>Cet élément doit avoir une balise ouvrante. La balise de fin peut être omise si l'élément est immédiatement suivi par un autre élément <code><dd></code> ou par un élément <code><dt></code> ou s'il n'y a plus de contenu au sein de l'élément parent.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>L'élement doit être situé avant un élément {{HTMLElement("dt")}} ou {{HTMLElement("dd")}} et à l'intérieur d'un élément {{HTMLElement("dl")}}. Sinon (selon le WHATWG), au sein d'un élément {{HTMLElement("div")}} situé dans un élément {{HTMLElement("dl")}}.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}} Jusqu'à Gecko 1.9.2 inclus (Firefox 4), Firefox implémentait l'interface <a href="/fr/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> pour cet élément.</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', 'semantics.html#the-dt-element', '<dt>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dt-element', '<dt>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dt>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatiblité_des_navigateurs">Compatiblité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("html.elements.dt")}}</p> + +<ul> + <li>Les autres éléments liés aux listes de définitions : + <ul> + <li>{{HTMLElement("dd")}}</li> + <li>{{HTMLElement("dl")}}</li> + </ul> + </li> +</ul> diff --git a/files/fr/web/html/element/element/index.html b/files/fr/web/html/element/element/index.html new file mode 100644 index 0000000000..7b2a731677 --- /dev/null +++ b/files/fr/web/html/element/element/index.html @@ -0,0 +1,73 @@ +--- +title: '<element> : l''élément pour les éléments personnalisés (obsolète)' +slug: Web/HTML/Element/element +tags: + - Element + - HTML + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/element +--- +<div>{{HTMLRef}}{{obsolete_header}}</div> + +<p>L'élément HTML <strong><code><element></code></strong> était conçu pour être utilisé afin de définir des éléments DOM personnalisés, il a été retiré de la spécification. Il a été retiré en faveur d'outils JavaScript qui permettront de créer de nouveaux éléments personnalisés, par exemple avec les Web Components.</p> + +<div class="warning"> +<p><strong>Attention !</strong> Cet élément a été retiré de la spécification. Pour plus d'informations, se référer à cette <a href="https://lists.w3.org/Archives/Public/public-webapps/2013JulSep/0287.html">note</a>.</p> +</div> + +<h2 id="Attributs">Attributs</h2> + +<p>On peut employer <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur cet élément.</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu" title="HTML/Content_categories">Catégories de contenu</a></th> + <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Modèle_de_contenu_transparent">Contenu transparent</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Indéfini.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Éléments parents autorisés</th> + <td>Indéfini.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Spécifications">Spécifications</h2> + +<p>Cet élément faisait actuellement partie d'un brouillon de spécification, <em><a href="https://w3c.github.io/webcomponents/spec/custom/">Custom Elements</a></em> mais a été retiré.</p> + +<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.element")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les éléments HTML liés aux composants web (<em>web components</em>) : + + <ul> + <li>{{HTMLElement("content")}}</li> + <li>{{HTMLElement("decorator")}}</li> + <li>{{HTMLElement("shadow")}}</li> + <li>{{HTMLElement("template")}}</li> + </ul> + </li> +</ul> diff --git a/files/fr/web/html/element/em/index.html b/files/fr/web/html/element/em/index.html new file mode 100644 index 0000000000..fb1de31a08 --- /dev/null +++ b/files/fr/web/html/element/em/index.html @@ -0,0 +1,122 @@ +--- +title: '<em> : l''élément de mise en emphase' +slug: Web/HTML/Element/em +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/em +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><em></code></strong> (pour emphase) est utilisé afin de marquer un texte sur lequel on veut insister. Les éléments <code><em></code> peuvent être imbriqués, chaque degré d'imbrication indiquant un degré d'insistance plus élevé.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/em.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> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme tous les éléments HTML, cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>L'élément <code><em></code> est souvent utilisé pour indiquer un contraste, implicite ou explicite.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p> + Dans HTML5, ce qui était appelé contenu de <em>type bloc</em> est maintenant appelé contenu de <em>flux</em>. +</p></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","100%","100")}}</p> + +<h2 id="Notes"><strong>Notes</strong></h2> + +<p>Habituellement, cet élément est affiché avec une police italique. Cependant, il ne doit pas être utilisé pour appliquer un style italique ; pour la mise en forme, on utilisera l'élément {{HTMLElement("i")}} ou des styles CSS. Pour marquer le titre d'une œuvre (livre, chanson, pièce, etc.), on utilisera l'élément {{HTMLElement("cite")}} ; il est aussi habituellement affiché avec une police italique, mais porte un sens différent. Enfin, on utilisera l'élément {{HTMLElement("strong")}} pour marquer un texte plus important que le texte qui l'entoure.</p> + +<h3 id="Italique_ou_mise_en_évidence">Italique ou mise en évidence ?</h3> + +<p>Pour les nouveaux développeurs, il est souvent perturbant d'avoir autant de façons différentes pour afficher du texte dans un site web. Parmi les ambiguïtés les plus répandues, l'italique et la mise en évidence ont une bonne place. Pourquoi utiliser <code><em></em></code> au lieu de <code><i></i></code> si ces deux éléments produisent à première vue le même résultat ?</p> + +<p>Eh bien ce n'est pas le même résultat : la mise en évidence porte un état logique, et l'italique est un état physique. Les états logiques séparent la mise en forme du contenu, et ainsi, peuvent être exprimés de façons très différentes, par exemple au lieu d'afficher un texte en italique, il pourrait être en rouge, ou dans une taille différente, ou surligné, ou même en gras. Il est plus logique de changer les propriétés de présentation de <code><em></code>, que celle de l'italique. L'italique est une mise en forme typographique ; il n'y a aucune séparation entre la présentation et le contenu (pour indiquer le titre d'une œuvre tel que le titre d'un film ou d'un livre, on utilisera plutôt l'élément {{HTMLElement("cite")}}).</p> + +<p>Par exemple, pour <code><em></code>, « Il suffit de le <em>faire</em> ! » ou « ça tient à <em>un</em> fil », une personne ou un logiciel pourrait traduire l'emphase par une mise en italique ou avec un autre mécanisme.</p> + +<p>Pour <code><i></code>, « Le <em>Charles de Gaulle</em> a appareillé le 15 novembre. » traduit bien la seule mise en forme. Il ne s'agit pas de mettre l'accent sur le nom du navire mais bien de respecter une règle typographique.</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_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/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</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_phras.C3.A9">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}.<br> + Jusqu'à Gecko 1.9.2 inclus (Firefox 4), Firefox implémentait l'interface {{domxref("HTMLSpanElement")}} pour cet élément.</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', 'text-level-semantics.html#the-em-element', '<em>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-em-element', '<em>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<em>')}}</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> + +<p>{{Compat("html.elements.em")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("i")}}</li> +</ul> diff --git a/files/fr/web/html/element/embed/index.html b/files/fr/web/html/element/embed/index.html new file mode 100644 index 0000000000..7ad376450f --- /dev/null +++ b/files/fr/web/html/element/embed/index.html @@ -0,0 +1,134 @@ +--- +title: '<embed> : l''élément de contenu externe embarqué' +slug: Web/HTML/Element/embed +tags: + - Element + - HTML + - Reference +translation_of: Web/HTML/Element/embed +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><embed></code> </strong>représente un point d'intégration pour une application externe ou pour du contenu interactif (autrement dit, pour un <em>plug-in</em>).</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/embed.html", "tabbed-standard")}}</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> + +<div class="note"> +<p><strong>Note :</strong> Cet article ne traite que de l'élément faisant partie du HTML5. Il ne concerne pas la version précédente et non normalisée de cet élément.</p> +</div> + +<p>Il faut garder à l'esprit que la plupart des navigateurs ont dépréciés voire retirer la prise en charge des plugins. Aussi, mieux vaut ne pas utiliser sur <code><embed></code> si on souhaite qu'un site ou une application soit fonctionnelle sur un navigateur moyen.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément possède <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("height")}}</dt> + <dd>La hauteur utilisée pour l'affichage de la ressource, exprimée en pixels CSS (uniquement des valeurs absolues, les pourcentages ne sont pas autorisés).</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>L'URL de la ressource à intégrer.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>Le type MIME à utiliser pour sélectionner le plug-in à instancier.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>La largeur utilisée pour l'affichage de la ressource, exprimée en pixels CSS (uniquement des valeurs absolues, les pourcentages ne sont pas autorisés).</dd> +</dl> + +<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> + +<p>Il est possible d'utiliser la propriété CSS {{cssxref("object-position")}} afin d'ajuster la position de l'objet embarqué au sein de la <em>frame</em> et la propriété CSS {{cssxref("object-fit")}} afin de contrôler la façon dont la taille de l'objet est ajustée par rapport à celle de la <em>frame</em>.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><embed type="video/quicktime" src="film.mov" width="640" height="480"> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","650","490")}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu" title="HTML/Content_categories">Catégories de contenu</a></th> + <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" title="HTML/Content categories#Flow content">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9" title="HTML/Content categories#Phrasing content">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_int%C3%A9gr%C3%A9">contenu intégré</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_interactif">contenu interactif</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Aucun, cet élément est un élément vide.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>Cet élément doit avoir une balise ouvrante mais ne doit pas avoir de balise fermante.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Tout élément qui accepte du contenu intégré.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("img")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLEmbedElement")}}</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', 'embedded-content.html#the-embed-element', '<embed>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-embed-element', '<embed>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="note"> +<p><strong>Note</strong> : Avant Firefox 45, Firefox n'affichait pas le contenu HTML de la ressource mais utilisait un message générique indiquant que le contenu nécessitait un plugin (cf. {{bug("730768")}}).</p> +</div> + +<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.embed")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments HTML utilisés pour intégrer différents types de contenu : + <ul> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("canvas")}}</li> + <li>{{HTMLElement("iframe")}}</li> + <li>{{HTMLElement("img")}}</li> + <li>{{MathMLElement("math")}}</li> + <li>{{HTMLElement("object")}}</li> + <li>{{SVGElement("svg")}}</li> + <li>{{HTMLElement("video")}}</li> + </ul> + </li> +</ul> diff --git a/files/fr/web/html/element/fieldset/index.html b/files/fr/web/html/element/fieldset/index.html new file mode 100644 index 0000000000..acbab754cb --- /dev/null +++ b/files/fr/web/html/element/fieldset/index.html @@ -0,0 +1,180 @@ +--- +title: '<fieldset> : l''élément pour les ensembles de champs' +slug: Web/HTML/Element/Fieldset +tags: + - Element + - Formulaires + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/fieldset +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><fieldset></code></strong> est utilisé afin de regrouper plusieurs contrôles interactifs ainsi que des étiquettes ({{HTMLElement("label")}}) dans un formulaire web.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/fieldset.html", "tabbed-standard")}}</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> + +<p>Comme on peut le voir dans l'exemple ci-avant, l'élément <code><fieldset></code> permet de regrouper une partie d'un formulaire HTML et d'associer une légende ({{htmlelement("legend")}}) décrivant ce groupe. Cet élément utilise quelques attributs et notamment <code>form</code> dont la valeur correspond à la valeur de l'attribut <code>id</code> d'un élément {{htmlelement("form")}} de la même page. De cette façon, on peut avoir un élément <code><fieldset></code> qui soit rattaché à un formulaire mais qui ne soit pas imbriqué dans ce formulaire. L'attribut <code>disabled</code> permet de désactiver l'élément <code><fieldset></code> ainsi que l'ensemble de son contenu via une seule valeur.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("disabled")}}{{HTMLVersionInline(5)}}</dt> + <dd>Si cet attribut booléen est utilisé, les contrôles de formulaires des éléments descendants sont désactivés (ils ne peuvent pas être édités). Bien qu'ils ne soient pas éditables, les données de ces contrôles seront envoyées avec le formulaire. Ces contrôles ne recevront pas les évènements liés à la navigations (tels que ceux liés aux clics ou au focus). La plupart du temps, ces contrôles désactivés apparaissent comme grisés. On notera que les éléments de formulaires au sein de l'élément {{HTMLElement("legend")}} ne seront pas désactivés.</dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd>La valeur de cet attribut correspond à la valeur de l'attribut <code>id</code> de l'élément {{HTMLElement("form")}} auquel il est rattaché. La valeur par défaut est l'identifiant du plus proche élément {{HTMLElement("form")}} dont l'élément <code><fieldset></code> est le descendant.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>Le nom associé au groupe. + <div class="note"><strong>Note :</strong> L'étiquette du groupe de contrôle est donné par le premier élément enfant {{HTMLElement("legend")}} du <code><fieldset></code>.</div> + </dd> +</dl> + +<h2 id="Mise_en_forme_avec_CSS">Mise en forme avec CSS</h2> + +<p>L'élément <code><fieldset></code> est quelque peu particulier pour la mise en forme.</p> + +<p>La valeur initiale de la propriété {{cssxref("display")}} pour cet élément est <code>block</code> et l'élément crée un contexte de formatage de bloc. Si l'élément <code><fieldset></code> est mis en forme avec une valeur <code>display</code> qui correspond à un style en ligne, celui-ci se comportera comme <code>inline-block</code> et sinon comme <code>block</code>. Par défaut, une bordure de 2 pixels ondulée entoure le contenu de l'élément et il y a un léger <em>padding</em>. Par défaut, l'élément a <code>min-inline-size: min-content</code>.</p> + +<p>Si un élément <code><legend></code> est présent, il est placé au dessus de la bordure située au début de l'axe de bloc. L'élément <code><legend></code> se réduit si besoin et établit également un contexte de formatage. Sa valeur <code>display</code> utilisée est <code>block</code> (autrement dit, on pourra le cibler avec <code>display: inline</code>, il continuera de se comporter comme <code>block</code>).</p> + +<p>Une boîte anonyme contiendra le contenu de <code><fieldset></code> et héritera de certaines propriétés de <code><fieldset></code>. Si l'élément <code><fieldset></code> est mis en forme avec <code>display: grid</code> ou <code>display: inline-grid</code>, la boîte anonyme aura un contexte de formatage de grille. Si <code><fieldset></code> est mis en forme avec <code>display: flex</code> ou <code>display: inline-flex</code>, la boîte anonyme aura un contexte de formatage flexible. Dans tous les autres cas, la boîte anonyme aura un contexte de formatage de bloc.</p> + +<div class="note"> +<p><strong>Note : </strong>À l'heure où nous écrivons ces lignes, Microsoft Edge et Google Chrome contiennent des bogues qui empêchent d'utiliser <a href="/fr/docs/Glossaire/Flexbox">les boîtes flexibles</a> et <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">les grilles</a> à l'intérieur d'un élément {{HTMLElement("fieldset")}}. <a href="https://github.com/w3c/csswg-drafts/issues/321">Cette <em>issue</em> GitHub</a> fournit les liens vers les différents bugs.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_simple">Exemple simple</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><form action="test.php" method="post"> + <fieldset> + <legend>Titre</legend> + <input type="radio" name="radio" id="radio"> + <label for="radio">Cliquez moi</label> + </fieldset> +</form></pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Exemple_simple","100%","80")}}</p> + +<h3 id="<fieldset>_désactivé"><code><fieldset></code> désactivé</h3> + +<p>Dans cet exemple, on voit comment l'attribut <code>disabled</code> permet de désactiver un élément <code><fieldset></code> et l'ensemble de ses éléments par la même occasion.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><form action="#"> + <fieldset disabled> + <legend>Fieldset désactivé</legend> + <div> + <label for="name">Nom : </label> + <input type="text" id="name" value="Chris"> + </div> + <div> + <label for="pwd">Archétype : </label> + <input type="password" id="pwd" value="Wookie"> + </div> + </fieldset> +</form></pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample('fieldset_désactivé', '100%', '110') }}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_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>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_associé_aux_formulaires">contenu énuméré</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_associé_aux_formulaires">élément relatif aux formulaires</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Un éventuel élément {{HTMLElement("legend")}} suivi par du contenu de flux.</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("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLFieldSetElement")}}</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-fieldset-element', '<fieldset>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Définition de l'élément <code>fieldset</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-fieldset-element', '<fieldset>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.10', '<fieldset>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.fieldset")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les éléments HTML relatifs aux formulaires : + <ul> + <li>{{HTMLElement("form")}}</li> + <li>{{HTMLElement("legend")}}</li> + <li>{{HTMLElement("label")}}</li> + <li>{{HTMLElement("button")}}</li> + <li>{{HTMLElement("select")}}</li> + <li>{{HTMLElement("datalist")}}</li> + <li>{{HTMLElement("optgroup")}}</li> + <li>{{HTMLElement("option")}}</li> + <li>{{HTMLElement("textarea")}}</li> + <li>{{HTMLElement("keygen")}}</li> + <li>{{HTMLElement("input")}}</li> + <li>{{HTMLElement("output")}}</li> + <li>{{HTMLElement("progress")}}</li> + <li>{{HTMLElement("meter")}}</li> + </ul> + </li> +</ul> diff --git a/files/fr/web/html/element/figcaption/index.html b/files/fr/web/html/element/figcaption/index.html new file mode 100644 index 0000000000..4269caaa03 --- /dev/null +++ b/files/fr/web/html/element/figcaption/index.html @@ -0,0 +1,108 @@ +--- +title: '<figcaption> : l''élément de légende d''une figure' +slug: Web/HTML/Element/figcaption +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/figcaption +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><figcaption></code></strong> (pour <em>figure caption</em> en anglais) permet d'indiquer un sous-titre, une légende, associé à une figure ou à une illustration (cette dernière étant représentée par l'élément {{HTMLElement("figure")}} qui est le parent direct de la légende). L'élément <code><figcaption></code> est optionnel ; s'il n'est pas présent, la figure n'aura pas de légende.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/figcaption.html","tabbed-shorter")}}</div> + +<div 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> !</div> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément prend uniquement en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><!-- Une image avec une légende : figcaption --> +<figure> + <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="Une superbe photo"> + + <figcaption>Une légende pour cette photo</figcaption> +</figure> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","100%","120")}}</p> + +<div class="note"> +<p><strong>Note :</strong> Voir la page sur l'élément {{HTMLElement("figure") }} pour d'autres exemples portant sur <code><figcaption></code>.</p> +</div> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu" title="HTML/Content_categories">Catégories de contenu</a></th> + <td>Aucune.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" title="HTML/Content categories#Flow content">Contenu de flux</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Un élément {{HTMLElement("figure")}}, l'élément <code><figcaption></code> doit être le premier ou le dernier élément fils pour cet élément <code><figure></code>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</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', 'semantics.html#the-figcaption-element', '<figcaption>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figcaption-element', '<figcaption>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("html.elements.figcaption")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("figure")}}.</li> +</ul> diff --git a/files/fr/web/html/element/figure/index.html b/files/fr/web/html/element/figure/index.html new file mode 100644 index 0000000000..faeea41797 --- /dev/null +++ b/files/fr/web/html/element/figure/index.html @@ -0,0 +1,188 @@ +--- +title: '<figure> : l''élément de figure' +slug: Web/HTML/Element/figure +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/figure +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><figure></code></strong> représente une figure (un schéma), qui peut être accompagné d'une légende grâce à l'élément {{HTMLElement("figcaption")}}. Il est normalement référencé de manière unique. C'est souvent une image, une illustration, un diagramme, un fragment de code ou un schéma auquel il est fait référence dans le texte principal mais qui peut être utilisé sur une autre page ou dans une annexe sans que cela affecte le contenu principal.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/figure.html","tabbed-shorter")}}</div> + +<div 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> !</div> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément prend uniquement en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Notes_d'utilisation"><strong>Notes d'utilisation</strong></h2> + +<ul> + <li>Bien que cet élément soit en lien avec le contenu principal, sa position est indépendante du contenu principal du document.</li> + <li><code><figure></code> est <a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement">une racine de sectionnement</a>, son contenu est donc exclu du plan général du document.</li> + <li>Une légende peut être associée avec l'élément <code><figure></code> en insérant un élément {{HTMLElement("figcaption")}} à l'intérieur (en premier ou dernier élément enfant). C'est le premier élément <code><figcaption></code> qui sera trouvé dans la figure qui sera affiché comme légende.</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Premier_exemple">Premier exemple</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><!-- Une simple image --> +<figure> + <img + src="https://developer.mozilla.org/static/img/favicon144.png" + alt="Le logo de MDN."> +</figure> + +<!-- Une image avec une légende --> +<figure> + <img + src="https://developer.mozilla.org/static/img/favicon144.png" + alt="Le logo de MDN."> + <figcaption>Logo MDN</figcaption> +</figure> +</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Premier_exemple","100%","375")}}</p> + +<h3 id="Extrait_de_code">Extrait de code</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><figure> + <figcaption>Obtenir les détails du navigateur</figcaption> + <pre> + function NavigatorExample(){ + var txt; + txt = "Nom de code: " + navigator.appCodeName; + txt += "Nom du navigateur : " + navigator.appName; + txt += "Version : " + navigator.appVersion ; + txt += "Cookies activés : " + navigator.cookieEnabled; + txt += "Plate-forme: " + navigator.platform; + txt += "En-tête d'agent utilisateur : " + navigator.userAgent; + console.log("NavigatorExample", txt); + } + </pre> +</figure> +</pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("Extrait_de_code","100%","300")}}</p> + +<h3 id="Citation">Citation</h3> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><figure> + <figcaption> + <cite>Edsger Dijkstra : </cite> + </figcaption> + <p>« Si le débogage correspond au retrait de bogues, alors la programmation correspond à l'ajout de bogues. »</p> +</figure></pre> + +<h4 id="Résultat_3">Résultat</h4> + +<p>{{EmbedLiveSample("Citation","100%","150")}}</p> + +<h3 id="Poème">Poème</h3> + +<h4 id="HTML_4">HTML</h4> + +<pre class="brush: html"><figure> + <p> + Bid me discourse, I will enchant thine ear, + Or like a fairy trip upon the green, + Or, like a nymph, with long dishevell'd hair, + Dance on the sands, and yet no footing seen: + Love is a spirit all compact of fire, + Not gross to sink, but light, and will aspire. + </p> + <figcaption><cite>Venus and Adonis</cite>. + By: William Shakespeare</figcaption> +</figure></pre> + +<h4 id="Résultat_4">Résultat</h4> + +<p>{{EmbedLiveSample("Poème","100%","150")}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu" title="HTML/Content_categories">Catégories de contenu</a></th> + <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" title="HTML/Content categories#Flow content">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement" title="Sections and Outlines of an HTML5 document#Sectioning root">racine de sectionnement</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Un élément {{HTMLElement("figcaption")}} suivi d'un <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" title="HTML/Content categories#Flow content">contenu de flux</a> ou du contenu de flux suivi d'un élément {{HTMLElement("figcaption")}} ou du contenu de flux.</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" title="HTML/Content categories#Flow content">contenu de flux</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</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', 'semantics.html#the-figure-element', '<figure>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.2', 'grouping-content.html#the-figure-element', '<figure>')}}</td> + <td>{{Spec2('HTML5.2')}}</td> + <td>Aucune modification depuis HTML 5.0.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '<figure>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("html.elements.figure")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("figcaption")}}</li> +</ul> diff --git a/files/fr/web/html/element/font/index.html b/files/fr/web/html/element/font/index.html new file mode 100644 index 0000000000..cb7cab147f --- /dev/null +++ b/files/fr/web/html/element/font/index.html @@ -0,0 +1,46 @@ +--- +title: <font> +slug: Web/HTML/Element/font +tags: + - Element + - HTML + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/font +--- +<div>{{obsolete_header}}{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><font></code></strong> définit la taille du texte, sa couleur et la police utilisée.</p> + +<div class="warning"> +<p><em><strong>Attention !</strong> </em><br> + <strong>Cet élément ne doit pas être utilisé ! </strong>Bien que cet élément ait été normalisé avec HTML 3.2, il a été déprécié avec HTML 4.01, au même moment que tous les éléments dont le rôle se limitaient à la présentation. Il a été rendu obsolète avec HTML5.</p> + +<p>À partir de HTML4, HTML ne doit plus définir les informations liées à la mise en forme (en dehors de l'élément {{HTMLElement("style")}} ou de l'attribut <strong><code>style</code></strong> de chaque élément). Pour tout nouveau développement web, le style (la forme) doit uniquement être décrit seulement par le <a href="/fr/docs/Web/CSS">CSS</a>.</p> + +<p>Le comportement de l'élément {{HTMLElement("font")}} peut être obtenu, et même bien mieux contrôlé, en utilisant les propriétés CSS.</p> +</div> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme tous les autres éléments HTML, cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("color")}}</dt> + <dd>Cet attribut définit la couleur du texte en utilisant soit une couleur nommée, soit une couleur indiquée par le format hexadécimal #RRGGBB.</dd> + <dt>{{htmlattrdef("face")}}</dt> + <dd>Cet attribut contient une liste d'une ou plusieurs police, séparées par des virgules. Le texte est affiché avec la première police que le navigateur supporte. Si aucune des polices listées n'est installée sur le système, le navigateur prend habituellement la police proportionnelle, ou à taille fixe par défaut, du système.</dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd>Cet attribut indique la taille du texte par une valeur numérique ou relative. Les valeurs numériques vont de <code>1</code> à <code>7</code>, <code>1</code> étant la plus petite taille et <code>3</code> la taille par défaut. Il peut être défini en utilisant une valeur relative, comme <code>+2</code> ou <code>-3</code>, qui est relative par rapport à la valeur de l'attribut {{htmlattrxref("size", "basefont")}} de l'élément {{HTMLElement("basefont")}}, ou relatif à <code>3</code>, la valeur par défaut, si aucune existe.</dd> +</dl> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Cet élément implément l'interface {{domxref('HTMLFontElement')}}.</p> + +<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.font")}}</p> diff --git a/files/fr/web/html/element/footer/index.html b/files/fr/web/html/element/footer/index.html new file mode 100644 index 0000000000..66a20de631 --- /dev/null +++ b/files/fr/web/html/element/footer/index.html @@ -0,0 +1,130 @@ +--- +title: <footer> +slug: Web/HTML/Element/footer +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/footer +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><footer></code></strong> représente le pied de page de la section ou de la <a href="/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement">racine de sectionnement</a> la plus proche. Un pied de page ou de section contient habituellement des informations sur l'auteur de la section, les données relatives au droit d'auteur (<em>copyright</em>) ou les liens vers d'autres documents en relation.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/footer.html", "tabbed-standard")}}</div> + +<div 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> !</div> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme tous les éléments HTML, cet élément accepte <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Notes_d'utilisation"><strong>Notes d'utilisation</strong></h2> + +<ul> + <li>Les informations sur l'auteur doivent être placées dans un élément {{HTMLElement("address")}} et incluses dans l'élément <code><footer></code>.</li> + <li>L'élément <code><footer></code> n'a pas de contenu sectionnant et ne peut donc pas introduire une nouvelle section dans le <a href="/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document">plan</a>.</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><footer> + Quelques informations de copyright ou bien quelques informations sur l'auteur de l'article. +</footer> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","100%","120")}}</p> + +<h2 id="Accessibilité">Accessibilité</h2> + +<p>Le lecteur d'écran <a href="https://help.apple.com/voiceover/info/guide/">VoiceOver</a> rencontre un problème qui fait que <a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics#SignpostsLandmarks">le balisage de rôle (landmark role)</a> n'est pas annoncé. Pour corriger ce point, on ajoutera <code>role="contentinfo"</code> à l'élément <code>footer</code>.</p> + +<ul> + <li><a href="https://bugs.webkit.org/show_bug.cgi?id=146930">Bug 146930 pour WebKit</a></li> +</ul> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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/Catégorie_de_contenu#Contenu_tangible">contenu tangible</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> sans élément descendant qui soit <code><footer></code> ou {{HTMLElement("header")}}.</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>. Un élément <code><footer></code> ne doit pas descendre d'un élément {{HTMLElement("address")}}, {{HTMLElement("header")}} ou d'un autre élément <code><footer></code>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</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', 'semantics#the-footer-element', '<footer>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-footer-element.html#the-footer-element', '<footer>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("html.elements.footer")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments HTML en lien avec les sections : + <ul> + <li>{{HTMLElement("body")}}</li> + <li>{{HTMLElement("nav")}}</li> + <li>{{HTMLElement("article")}}</li> + <li>{{HTMLElement("aside")}}</li> + <li>{{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}</li> + <li>{{HTMLElement("hgroup")}}</li> + <li>{{HTMLElement("header")}}</li> + <li>{{HTMLElement("section")}}</li> + <li>{{HTMLElement("address")}}</li> + </ul> + </li> + <li class="last"><a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">Plan et section d'un document HTML5</a></li> + <li class="last"><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">ARIA : le rôle <code>contentinfo</code></a></li> +</ul> diff --git a/files/fr/web/html/element/form/index.html b/files/fr/web/html/element/form/index.html new file mode 100644 index 0000000000..71dc418533 --- /dev/null +++ b/files/fr/web/html/element/form/index.html @@ -0,0 +1,216 @@ +--- +title: <form> +slug: Web/HTML/Element/Form +tags: + - Element + - Formulaires + - Formulaires HTML + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/form +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><form></code> </strong>représente une section d'un document qui contient des contrôles interactifs permettant à un utilisateur d'envoyer des données à un serveur web.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/form.html", "tabbed-standard")}}</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> + +<p>Il est possible d'utiliser les pseudo-classes CSS {{cssxref(':valid')}} et {{cssxref(':invalid')}} pour mettre en forme un élément <code><form></code>.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("accept")}} {{HTMLVersionInline(4)}} {{obsolete_inline}}</dt> + <dd>Cet attribut indique quels types de contenus sont acceptés par le serveur. Il peut y en avoir plusieurs, séparés par des virgules. + <div class="note"><strong>Note d'utilisation : </strong>Cet attribut a été retiré dans HTML5 et ne doit plus être utilisé. À la place, il faut utiliser l'attribut {{htmlattrxref("accept", "input")}} de l'élément {{HTMLElement("input")}}.</div> + </dd> + <dt>{{htmlattrdef("accept-charset")}}</dt> + <dd>Une liste des ensembles de caractères que le serveur accepte. Cette liste est délimitée par des espaces ou des virgules. Le navigateur les utilise dans l'ordre dans lequel ils ont été définis. La valeur par défaut est la chaîne de caractères réservée "UNKNOWN" ; dans ce cas, l'ensemble de caractères utilisé correspond à celui du document contenant l'élément {{HTMLElement("form")}}.<br> + Dans les versions précédentes de HTML, les différents ensembles de caractères pouvaient être délimités par des espaces ou des virgules. Ce n'est plus le cas en HTML5 où seuls les espaces sont autorisés.</dd> + <dt>{{htmlattrdef("action")}}</dt> + <dd>L'URI du programme qui traitera les informations soumises par le formulaire. Cette valeur peut être surchargée par un attribut {{htmlattrxref("formaction", "button")}} sur un élément {{HTMLElement("button")}} ou {{HTMLElement("input")}}.</dd> + <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt> + <dd>Cet attribut est un attribut non-standard utilisé sur iOS par Safari Mobile qui contrôle la façon dont la valeur du texte est automatiquement transcrite en majuscules lors de la saisie par l'utilisateur. Si l'attribut <code>autocapitalize</code> est défini sur un des descendants du formulaire, il surchargera la valeur de <code>autocapitalize</code> utilisée pour le formulaire. Les valeurs non-dépréciées sont disponibles pour iOS 5 et supérieurs. La valeur par défaut est <code>sentences</code>. Les valeurs possibles sont: + <ul> + <li><code>none</code> : La mise en majuscules est totalement désactivée</li> + <li><code>sentences</code> : Les premières lettres des phrases sont automatiquement passées en majuscules.</li> + <li><code>words</code> : La première lettre de chaque mot est automatiquement passée en majuscule.</li> + <li><code>characters</code> : Tous les caractères sont automatiquement passés en majuscules.</li> + <li><code>on</code> : {{deprecated_inline}} Déprécié depuis iOS 5.</li> + <li><code>off</code> : {{deprecated_inline}} Déprécié depuis iOS 5.</li> + </ul> + </dd> + <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline(5)}}</dt> + <dd>Cet attribut énuméré est utilisé pour définir le comportement du navigateur quant à l'autocomplétion des champs. Cet attribut peut être surchargé par chacun des éléments du formulaire. Il peut prendre deux valeurs : + <ul> + <li><code>on</code> : Le navigateur peut remplir automatiquement les valeurs d'après les précédentes informations qu'a entrées l'utilisateur lors d'usages antérieurs du formulaire.</li> + <li><code>off</code> : L'utilisateur doit remplir lui-même la valeur de chaque champ, à chaque utilisation du formulaire, ou le formulaire utilise son propre système d'auto-complétion ; le navigateur ne doit pas remplir automatiquement les valeurs.</li> + </ul> + + <p>En son absence, sa valeur par défaut est <code>on</code>. Les éléments du formulaire peuvent bien sûr outrepasser cette valeur via leur propre attribut <code><strong>autocomplete</strong></code>.</p> + + <div class="note"><strong>Note :</strong> Si autocomplete vaut <code>off</code> dans un formulaire parce que le document fournit son propre système d'auto-complétion, il faut aussi définir <code>autocomplete</code> à <code>off</code> pour chaque élément {{HTMLElement("input")}} du formulaire. Pour plus d'informations, voir <a href="#compatChartle">le tableau de compatibilité</a>.</div> + </dd> + <dt>{{htmlattrdef("enctype")}}</dt> + <dd>Lorsque la valeur de l'attribut <code>method</code> est <code>post</code>, cet attribut définit le <a href="https://fr.wikipedia.org/wiki/Type_MIME">type MIME</a> qui sera utilisé pour encoder les données envoyées au serveur. C'est un attribut énuméré qui peut prendre les valeurs suivantes : + <ul> + <li><code>application/x-www-form-urlencoded</code> : la valeur par défaut si l'attribut n'est pas défini</li> + <li><code>multipart/form-data</code> : la valeur utilisée par un élément {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut "file".</li> + <li><code>text/plain</code> {{HTMLVersionInline(5)}}, correspondant au <a class="external" href="https://fr.wikipedia.org/wiki/Type_MIME">type MIME</a> éponyme.</li> + </ul> + Cette valeur peut être surchargée par l'attribut {{htmlattrxref("formenctype", "button")}} des éléments {{HTMLElement("button")}} ou {{HTMLElement("input")}}.</dd> + <dt>{{htmlattrdef("method")}}</dt> + <dd>Cet attribut définit la méthode <a href="/fr/docs/Web/HTTP">HTTP</a> qui sera utilisée pour envoyer les données au serveur. C'est un attribut énuméré qui peut prendre les valeurs suivantes : + <ul> + <li><code>get</code> : correspondant à la <a href="/fr/docs/Web/HTTP/Methods/GET">méthode GET</a> du protocole HTTP. Les données du formulaires sont ajoutées à l'URI de l'attribut <code>action</code> avec '?' comme séparateur. L'URI ainsi composée est ensuite enovyée vers le serveur. On utilisera cette méthode lorsque le formulaire n'a pas d'effet de bord et qu'il ne contient que des caractères ASCII.</li> + <li><code>post</code> : correspondant à la <a href="/fr/docs/Web/HTTP/Methods/POST">méthode POST</a> du protocole HTTP, les données du formulaires sont incluses dans le corps du formulaire et envoyées vers le server.</li> + <li><code>dialog</code> : à utiliser lorsque le formulaire est placé dans un élément {{HTMLElement("dialog")}} afin de fermer la boîte de dialogue à l'envoi du formulaire.</li> + </ul> + + <p>Si cet attribut n'est pas défini, la valeur par défaut utilisée est <code>get</code>. Cette valeur peut-être surchargée par l'attribut {{htmlattrxref("formmethod", "button")}} des éléments {{HTMLElement("button")}} ou {{HTMLElement("input")}}.</p> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>Le nom du formulaire. Dans HTML 4, cet attribut est déprécié. (<code>id</code> doit être utilisé à la place). Il doit être unique parmi tous les formulaires d'un document, et ne doit pas être une chaîne de caractères vide en HTML5.</dd> + <dt>{{htmlattrdef("novalidate")}} {{HTMLVersionInline(5)}}</dt> + <dd>Cet attribut booléen indique si le formulaire doit être validé au moment de sa soumission. S'il n'est pas défini, le formulaire sera validé lors de sa soumission. Il peut être surchargé par l'attribut {{htmlattrxref("formnovalidate", "button")}} des éléments {{HTMLElement("button")}} ou {{HTMLElement("input")}} appartenant au formulaire.</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd>Un nom ou un mot-clé indiquant où afficher la réponse après avoir envoyé le formulaire. Dans HTML 4, c'est le nom, ou le mot-clé, d'une frame. Dans HTML5, c'est le nom, ou le mot-clé, d'un <em>contexte de navigation</em> (onglet, fenêtre, frame). Les mots-clés suivants ont un sens particulier : + <ul> + <li><code>_self</code> : charge la réponse dans la même frame HTML 4 (ou le même contexte de navigation HTML5) que l'actuelle. Il s'agit de la valeur par défaut quand cet attribut n'est pas défini ;</li> + <li><code>_parent</code> : charge la réponse dans le frameset parent HTML 4 de la frame actuelle, ou dans le contexte de navigation parent HTML5 de l'actuelle ;</li> + <li><code>_top</code> : HTML 4 : charge la réponse dans la fenêtre complête originale, annulant toutes les autres frames. HTML5 : charge la réponse dans le contexte de navigation le plus haut (c'est-à-dire le contexte de navigation qui est l'ancêtre de l'actuel, et qui n'a aucun parent). S'il n'y a pas de parent, l'option se comporte comme <code>_self</code> ;</li> + <li><code>_blank</code> : charge la réponse dans une fenêtre HTML 4 non nommée ou dans un contexte de navigation HTML5.</li> + </ul> + + <p>HTML5 : Cette valeur peut être surchargée par l'attribut {{htmlattrxref("formtarget", "button")}} des éléments {{HTMLElement("button")}} ou {{HTMLElement("input")}}.</p> + </dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><!-- Formulaire simple qui enverra une requête GET --> +<form action="" method="get"> + <label for="GET-name">Nom :</label> + <input id="GET-name" type="text" name="name"> + <input type="submit" value="Enregistrer"> +</form> + +<!-- Formulaire simple qui enverra une requête POST --> +<form action="" method="post"> + <label for="POST-name">Nom :</label> + <input id="POST-name" type="text" name="name"> + <input type="submit" value="Enregistrer"> +</form> + +<!-- Formulaire avec un fieldset, un legend, et un label --> +<form action="" method="post"> + <fieldset> + <legend>Titre</legend> + <input type="radio" name="radio" id="radio"> <label for="radio">Cliquez moi</label> + </fieldset> +</form> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","100%",110)}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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>, contenu tangible.</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> qui ne contient pas d'élément <code><form></code>.</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("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLFormElement")}}</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-form-element', '<form>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-form-element', '<form>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.3', '<form>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs"><a id="compatChart">Compatibilité des navigateurs</a></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.form")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Le guide sur les formulaires HTML</a></li> + <li>Les autres éléments utilisés pour les formulaires + <ul> + <li>{{HTMLElement("button")}}</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> + <li>La méthode du DOM {{domxref("HTMLFormElement.elements")}} qui permet de récupérer une liste des éléments du formulaire.</li> + <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Form_Role">ARIA : le rôle <code>form</code></a></li> + <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Search_Role">ARIA : le rôle <code>search</code></a></li> +</ul> diff --git a/files/fr/web/html/element/frame/index.html b/files/fr/web/html/element/frame/index.html new file mode 100644 index 0000000000..753d4dc517 --- /dev/null +++ b/files/fr/web/html/element/frame/index.html @@ -0,0 +1,68 @@ +--- +title: <frame> +slug: Web/HTML/Element/frame +tags: + - Déprécié + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/frame +--- +<div>{{HTMLRef}}{{Deprecated_header}}</div> + +<p><strong><code><frame></code></strong> est un élément HTML qui définit une zone particulière dans laquelle un autre document HTML est affiché. Une <code><frame></code> doit être utilisée dans un élément {{HTMLElement("frameset")}}.</p> + +<div class="note"> +<p><strong>Note :</strong> On privilégiera l'utilisation de {{HTMLElement("iframe")}}.</p> +</div> + +<p>Utiliser l'élément <code><frame></code> est déconseillé en raison de certains inconvénients tels que des problèmes de performance, et un manque d'accessibilité pour les utilisateurs de lecteurs d'écran.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme tous les autres éléments HTML, cet élément prend en charge les <a href="/fr/docs/Web/HTML/Attributs_globaux">attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("src")}}</dt> + <dd>Cet attribut indique le document qui doit être affiché dans la frame.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>Cet attribut sert à nommer les frames. Sans nommage, tous les liens seront ouverts dans la frame où ils se trouvent. Voir {{htmlattrxref("target","a")}} pour plus d'informations.</dd> + <dt>{{htmlattrdef("noresize")}}</dt> + <dd>Cet attribut empêche aux utilisateurs de redimensionner les frames.</dd> + <dt>{{htmlattrdef("scrolling")}}</dt> + <dd>Cet attribut définit l'existence des barres de défilement. Si cet attribut n'est pas utilisé, le navigateur mettre une barre de défilement si nécessaire. Il y a deux options : <code>yes</code> pour afficher les barres de défilement même quand ce n'est pas nécessaire, et <code>no</code> pour ne pas afficher les barres de défilement même quand c'est nécessaire.</dd> + <dt>{{htmlattrdef("marginheight")}}</dt> + <dd>Cet attribut définit la hauteur des marges entre les frames.</dd> + <dt>{{htmlattrdef("marginwidth")}}</dt> + <dd>Cet attribut définit la largeur des marges entre les frames.</dd> + <dt>{{htmlattrdef("frameborder")}}</dt> + <dd>Cet attribut permet de mettre des bordures à la frame.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><frameset cols="50%,50%"> + <frame src="https://developer.mozilla.org/fr/docs/Web/HTML/Element/iframe" /> + <frame src="https://developer.mozilla.org/fr/docs/Web/HTML/Element/frame" /> +</frameset> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","100%","200")}}</p> + +<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.frame")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("frameset")}}</li> + <li>{{HTMLElement("iframe")}}</li> +</ul> diff --git a/files/fr/web/html/element/frameset/index.html b/files/fr/web/html/element/frameset/index.html new file mode 100644 index 0000000000..cf4aed3aa3 --- /dev/null +++ b/files/fr/web/html/element/frameset/index.html @@ -0,0 +1,53 @@ +--- +title: <frameset> +slug: Web/HTML/Element/frameset +tags: + - Déprécié + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/frameset +--- +<div>{{Deprecated_header}}{{HTMLRef}}</div> + +<p><strong><code><frameset></code></strong> est un élément HTML utilisé pour contenir les éléments {{HTMLElement("frame")}}.</p> + +<div class="note"><strong>Note :</strong> Les frames est maintenant découragé en faveur de {{HTMLElement("iframe")}}.</div> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme tous les autres éléments HTML, cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("cols")}}</dt> + <dd>Cet attribut définit le nombre et la taille des espaces horizontaux dans un <code><frameset></code>.</dd> + <dt>{{htmlattrdef("rows")}}</dt> + <dd>Cet attribut définit le nombre et la taille des espaces verticaux dans un <code><frameset></code>.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html"><frameset cols="50%,50%"> + <frame src="https://developer.mozilla.org/fr/docs/Web/HTML/Element/frameset" /> + <frame src="https://developer.mozilla.org/fr/docs/Web/HTML/Element/frame" /> +</frameset></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","100%",200)}}</p> + +<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.frameset")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("frame")}}</li> + <li>{{HTMLElement("iframe")}}</li> +</ul> diff --git a/files/fr/web/html/element/head/index.html b/files/fr/web/html/element/head/index.html new file mode 100644 index 0000000000..3446965fdd --- /dev/null +++ b/files/fr/web/html/element/head/index.html @@ -0,0 +1,125 @@ +--- +title: '<head> : l''élément de métadonnées (en-tête) du document' +slug: Web/HTML/Element/head +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/head +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><head></strong> fournit des informations générales (métadonnées) sur le document, incluant son titre et des liens ou des définitions vers des scripts et feuilles de style.</p> + +<div class="blockIndicator note"> +<p><strong>Note :</strong> L'élément <code><head></code> contient principalement des données destinées au traitement automatisé et pas nécessairement lisibles par des humains. Pour afficher des informations lisibles pour les utilisateurs dans des en-têtes ou titre, voir l'élément {{HTMLElement("header")}}.</p> +</div> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme tous les éléments HTML, cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("profile")}}{{obsolete_inline}}</dt> + <dd>L'URI d'un ou plusieurs profils de métadonnées, séparés par un espace.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: html"><html> + <head> + <title>Titre du document</title> + </head> +</html> +</pre> + +<h2 id="Notes">Notes</h2> + +<p>La plupart des navigateurs conformes à HTML5 construisent automatiquement l'élément <code><head></code> si les balises sont omises dans le balisage. <a href="https://www.stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/">Cependant, ce comportement n'est pas garanti pour les navigateurs antérieurs</a>.</p> + +<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>Aucune</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Si le document est un document source ({{htmlattrxref("srcdoc", "iframe")}}) d'une {{HTMLElement("iframe")}} ou si l'information pour le titre est disponible via un protocole de plus haut niveau zéro ou plusieurs éléments de méta-données.<br> + Sinon un ou plusieurs éléments de méta-données dont un (et un seul) est un élément {{HTMLElement("title")}}.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>La balise de début peut être absente si le premier contenu est un élément.<br> + La balise de fermeture peut être absente si le premier objet suivant l'élément <code><head></code> n'est pas un caractère blanc ou un commentaire.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Cet élément doit être le premier enfant de l'élément {{HTMLElement("html")}}.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLHeadElement")}}</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', 'semantics.html#the-head-element', '<head>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Aucune modification depuis la dernière dérivation.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-head-element', '<head>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>L'attribut <code>profile</code> est désormais obsolète.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'global.html#h-7.4.1', '<head>')}}</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> + +<p>{{Compat("html.elements.head")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les éléments qui peuvent être utilisés à l'intérieur de l'élément <code><head></code> : + + <ul> + <li>{{HTMLElement("title")}}</li> + <li>{{HTMLElement("base")}}</li> + <li>{{HTMLElement("link")}}</li> + <li>{{HTMLElement("style")}}</li> + <li>{{HTMLElement("meta")}}</li> + <li>{{HTMLElement("script")}}</li> + <li>{{HTMLElement("noscript")}}</li> + <li>{{HTMLElement("template")}}</li> + </ul> + </li> +</ul> diff --git a/files/fr/web/html/element/header/index.html b/files/fr/web/html/element/header/index.html new file mode 100644 index 0000000000..f43b010498 --- /dev/null +++ b/files/fr/web/html/element/header/index.html @@ -0,0 +1,128 @@ +--- +title: <header> +slug: Web/HTML/Element/header +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/header +--- +<div>{{HTMLRef}}</div> + +<p>L'<strong>élément HTML <code><header></code></strong> représente un groupe de contenu introductif ou de contenu aidant à la navigation. Il peut contenir des éléments de titre, mais aussi d'autres éléments tels qu'un logo, un formulaire de recherche, etc.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/header.html", "tabbed-standard")}}</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"><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_tangible">contenu tangible</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> mais sans élément descendant qui soit {{HTMLElement("footer")}} ou <code><header></code></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 acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>. Il est à noter qu'un élément <code><header></code> ne doit pas descendre d'un élément {{HTMLElement("address")}}, {{HTMLElement("footer")}} ou d'un autre élément <code><header></code>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Notes_dutilisation">Notes d'utilisation</h2> + +<p>L'élément <code><header></code> n'est pas une section de contenu et n'introduit donc pas de nouvelle section dans ls <a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">structure</a>. Cela dit, un élément <code><header></code> est généralement destiné à contenir l'en-tête de la section environnante (un élément <code>h1</code>-<code>h6</code>), mais ce <strong>n'est pas</strong> obligatoire.</p> + +<h3 id="Usage_historique">Usage historique</h3> + +<p>Bien que l'élément <code><header></code> ne fasse pas partie de la spécification HTML avant {{glossary("HTML5")}} , il existait de façon implicite depuis les premières versions. <a href="http://info.cern.ch/">En consultant le premier site web</a>, il était originellement utilisé comme l'élément <code><head></code>. À un moment donné, il a été décidé d'utiliser un nom différent. Cela a permis à <code><header></code> d'être libre de remplir un rôle différent par la suite.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme tous les éléments HTML, cet élément possède les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="En-tête_de_page">En-tête de page</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><header> + <h1>Titre principal</h1> + <img src="mdn-logo-sm.png" alt="MDN logo"> +</header></pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("En-tête_de_page","100%","200")}}</p> + +<h3 id="En-tête_pour_un_article">En-tête pour un article</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><article> + <header> + <h2>La planète Terre</h2> + <p>Publié le <time datetime="2017-10-04">4 octobre 2017</time> par Jeanne Smith</p> + </header> + <p>Nous vivons sur une planète bleue et verte</p> + <p><a href="https://example.com/the-planet-earth/">Poursuivre la lecture…</a></p> +</article> +</pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("En-tête_pour_un_article","100%","200")}}</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', 'semantics.html#the-header-element', '<header>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-header-element', '<header>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em> pull request</em>.</div> + +<p>{{Compat("html.elements.header")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Autres éléments liés à la section d'un document : {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}}</li> + <li><a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">Plan et sections d'un document HTML5</a></li> +</ul> diff --git a/files/fr/web/html/element/heading_elements/index.html b/files/fr/web/html/element/heading_elements/index.html new file mode 100644 index 0000000000..764d5a89be --- /dev/null +++ b/files/fr/web/html/element/heading_elements/index.html @@ -0,0 +1,252 @@ +--- +title: '<h1>-<h6> : les éléments de titre de section' +slug: Web/HTML/Element/Heading_Elements +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/Heading_Elements +--- +<div>{{HTMLRef}}</div> + +<p>Les éléments <strong><code><h1></code></strong> à <strong><code><h6></code></strong> représentent six niveaux de titres dans un document, <code><h1></code> est le plus important et <code><h6></code> est le moins important. Un élément de titre décrit brièvement le sujet de la section qu'il introduit.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/h1-h6.html", "tabbed-standard")}}</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> + +<h2 id="Attributs">Attributs</h2> + +<p>Ces éléments acceptent uniquement les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a> (communs à l'ensemble des éléments).</p> + +<div class="note"> +<p><strong>Note :</strong> L'attribut <code><strong>align</strong></code> est obsolète et ne doit pas être utilisé.</p> +</div> + +<h2 id="Notes_dutilisation">Notes d'utilisation</h2> + +<ul> + <li>L'information d'un titre peut être utilisée par les agents utilisateurs, par exemple, pour construire automatiquement une table des matières d'un document.</li> + <li>Les titres ne doivent pas être utilisé afin de réduire ou d'augmenter la taille de la police d'un texte : il faut pour cela utiliser la propriété CSS {{cssxref('font-size')}} à la place.</li> + <li>On évitera de sauter des niveaux de titre : on commence toujours par <code><h1></code> puis <code><h2></code> et ainsi de suite. On essaye également d'avoir un seul titre de niveau 1 sur une page.</li> + <li>Jusqu'à HTML5, il fallait éviter d'utiliser plus d'un élément <code><h1></code> sur une même page. En HTML5, il est possible d'utiliser les balises sémantiques pour créer une hiérarchie valide avec plusieurs <code><h1></code>. Voir {{SectionOnPage("/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document","Définir_des_sections_en_HTML5")}} pour plus d'informations.</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Tous_les_titres">Tous les titres</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><h1>Titre de niveau 1</h1> +<h2>Titre de niveau 2</h2> +<h3>Titre de niveau 3</h3> +<h4>Titre de niveau 4</h4> +<h5>Titre de niveau 5</h5> +<h6>Titre de niveau 6</h6> +</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Tous_les_titres","280","300")}}</p> + +<h3 id="Exemple_de_page">Exemple de page</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><h1>Élément de titre</h1> +<h2>Présentation</h2> +<p>Du texte...</p> + +<h2>Exemples</h2> +<h3>Exemple 1</h3> +<p>Du texte...</p> + +<h3>Exemple 2</h3> +<p>Du texte...</p> + +<h2>Voir également</h2> +<p>Du texte...</p> +</pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("Exemple_de_page","280","480")}}</p> + +<h2 id="Accessibilité">Accessibilité</h2> + +<h3 id="Navigation">Navigation</h3> + +<p>Les personnes utilisant des lecteurs d'écran utilisent fréquemment les niveaux de titre en passant de l'un à l'autre afin de déterminer rapidement le contenu de la page. Pour cette raison, il est important de ne pas sauter un niveau de titre. En effet, l'absence d'un titre intermédiaire pourrait amener le lecteur à se demander où le titre a été placé.</p> + +<h4 id="Mauvaises_pratiques">Mauvaises pratiques</h4> + +<pre class="brush: html example-bad notranslate"><h1>Heading level 1</h1> +<h3>Heading level 3</h3> +<h4>Heading level 4</h4> +</pre> + +<h4 id="Bonnes_pratiques">Bonnes pratiques</h4> + +<pre class="brush: html example-good notranslate"><h1>Heading level 1</h1> +<h2>Heading level 2</h2> +<h3>Heading level 3</h3> +</pre> + +<h4 id="Imbrication">Imbrication</h4> + +<p>Les niveaux de titres peuvent être imbriqués afin de créer des sous-sections qui reflètent l'organisation de la page. La plupart des lecteurs d'écran peuvent également générer une liste ordonnée des titres de la page afin d'aider les visiteurs à connaître la hiérarchie du contenu :</p> + +<ol> + <li><code>h1</code> Les abeilles + + <ol> + <li><code>h2</code> Étymologie</li> + <li><code>h2</code> Répartition</li> + <li><code>h2</code> Évolution + <ol> + <li><code>h3</code> Paléozoïque ancien</li> + <li><code>h3</code> Jurassique</li> + <li><code>h3</code> Crétacée</li> + </ol> + </li> + <li><code>h2</code> Morphologie externe + <ol> + <li><code>h3</code>Tête + <ol> + <li><code>h4</code> Mandibules</li> + </ol> + </li> + <li><code>h3</code> Thorax + <ol> + <li><code>h4</code> Prothorax</li> + <li><code>h4</code> Ptérothorax</li> + </ol> + </li> + <li><code>h3</code> Pattes</li> + <li><code>h3</code> Ailes</li> + <li><code>h3</code> Abdomen</li> + </ol> + </li> + </ol> + </li> +</ol> + +<p>Lorsque les niveaux sont imbriqués, il est possible de sauter un niveau lorsqu'on <strong>ferme</strong> une sous-section</p> + +<ul> + <li><a href="https://www.w3.org/WAI/tutorials/page-structure/headings/">Les titres et la structure d'une page - Tutoriels WAI pour l'accessibilité web (en anglais)</a></li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_—_Create_content_that_can_be_presented_in_different_ways">Comprendre les règles WCAG 1.3</a></li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are"> Comprendre les règles WCAG 2.4</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html"><em>Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html"><em>Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html"><em>Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-headings.html"><em>Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li> +</ul> + +<h3 id="Libeller_une_section">Libeller une section</h3> + +<p>Les outils comme les lecteurs d'écran peuvent également générer une liste du <a href="/en-US/docs/Web/HTML/Element#Content_sectioning">contenu sectionnant</a> afin de déterminer le plan de la page.</p> + +<p>Le contenu sectionnant peut être libellé en combinant les attributs <code><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> et {{htmlattrxref("id")}}. Dans ce cas, le libellé décrit, de façon concise, le but de la section. Cette technique s'avère utile lorsqu'on a une page qui possède plusieurs éléments sectionnants.</p> + +<h4 id="Exemple">Exemple</h4> + +<pre class="brush: html notranslate"><header> + <nav aria-labelledby="primary-navigation"> + <h2 id="primary-navigation">Outils de navigation</h2> + <!-- éléments relatifs à la navigation --> + </nav> +</header> + +<!-- contenu de la page --> + +<footer> + <nav aria-labelledby="footer-navigation"> + <h2 id="footer-navigation">Navigation dans le pied de page</h2> + <!-- éléments relatifs à la navigation --> + </nav> +</footer> +</pre> + +<p>Dans l'exemple qui précède, un lecteur d'écran annoncerait deux section {{HTMLElement("nav")}}, l'une étant appelée "Outils de navigation" et l'autre "Navigation dans le pied de page". Si les libellés n'avaient pas été fournis, la personne utilisant un lecteur d'écran aurait été obligée d'étudier les contenus de chaque élément <code>nav</code> afin d'en déterminer l'objectif.</p> + +<ul> + <li><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Utiliser l'attribut <code>aria-labelledby</code></a></li> + <li><a href="https://www.w3.org/WAI/tutorials/page-structure/labels/#using-aria-labelledby"><em>Libeller des régions - Structure d'une page - Tutoriels W3C WAI pour l'accessibilité web</em> (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>, contenu de titre, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Omission de balise</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Tout élément qui accepte le <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a> ; n'utilisez pas de titre comme enfant d'un élément {{HTMLElement("hgroup")}}, c'est à présent obsolète.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLHeadingElement")}}</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', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("html.elements.h1")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("p")}}</li> + <li>{{HTMLElement("div")}}</li> + <li>{{HTMLElement("section")}}</li> +</ul> diff --git a/files/fr/web/html/element/hgroup/index.html b/files/fr/web/html/element/hgroup/index.html new file mode 100644 index 0000000000..7726916452 --- /dev/null +++ b/files/fr/web/html/element/hgroup/index.html @@ -0,0 +1,146 @@ +--- +title: <hgroup> +slug: Web/HTML/Element/hgroup +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/hgroup +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><hgroup></code></strong> représente un titre de plusieurs niveaux pour une section d'un document. Il regroupe un ensemble d'éléments <code><a href="/fr/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6></a></code>.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/hgroup.html", "tabbed-standard")}}</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> + + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> + +<div class="note"> +<p><strong>Note :</strong> l'élement <code><hgroup></code> a été retiré de la spécification HTML5 (W3C) mais est toujours inscrit dans la version WHATWG de HTML. Il est partiellement implémenté dans la plupart des navigateurs et à ce titre, il est peu probable qu'il disparaisse.<br> + Cependant, le but d'un élément <code><hgroup></code> est d'affecter la façon dont les titres sont affichés <a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#The_HTML5_outline_algorithm">par l'algorithme de mise en plan défini dans la spécification HTML</a>. <strong>Cet algorithme n'est pas implémenté dans la plupart des navigateurs </strong>et la sémantique de l'élément <code><hgroup></code> est donc uniquement théorique.<br> + La spécification HTML5 (W3C) fournit quelques indications pour baliser <a href="https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements">les sous-titres et les titres alternatifs</a> sans requérir à <code><hgroup></code>.</p> +</div> + +<p>L'élément <code><hgroup></code> permet de regrouper le titre principal d'une section avec son (ou ses) sous-titre(s) afin d'obtenir un titre sur plusieurs niveaux sémantiques.</p> + +<p>Autrement dit, l'élément <code><hgroup></code> évite que l'utilisation d'éléments <code><a href="/fr/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6></a></code> secondaires crée différentes sections dans le plan (ce qui est le résultat obtenu normalement lorsque <code><a href="/fr/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6></a></code> sont utilisés hors d'un <code><hgroup></code>).</p> + +<p>Dans le plan d'un document, obtenu par <a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#The_HTML5_outline_algorithm">l'algorithme défini dans la spécification HTML</a>, l'élément <code><hgroup></code> forme une seule entité logique contenant l'ensemble des éléments-fils <code><a href="/fr/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6></a></code> du <code><hgroup></code> et qui fait donc apparaître une seule section pour ce groupe de titres dans le plan.</p> + +<p>Pour afficher le contenu d'un tel titre, l'agent utilisateur doit choisir comment représenter l'élément <code><hgroup></code> afin d'exprimer notamment les différents niveaux. Voici quelques exemples des approches qui seraient possibles :</p> + +<ul> + <li>Un élément <code><hgroup></code> peut afficher un titre où les deux points (:) sont utilisés comme séparateur entre le titre principal et le premier titre secondaire</li> + <li>Un élément <code><hgroup></code> peut afficher le titre principal, suivi du/des titre(s) secondaires entre parenthèses</li> +</ul> + +<p>Prenons ce document HTML par exemple :</p> + +<pre class="brush: html"><!DOCTYPE html> +<title>HTML Standard</title> +<body> + <hgroup id="document-title"> + <h1>HTML</h1> + <h2>Living Standard — Last Updated 12 August 2016</h2> + </hgroup> + <p>Some intro to the document.</p> + <h2>Table of contents</h2> + <ol id=toc>...</ol> + <h2>First section</h2> + <p>Some intro to the first section.</p> +</body></pre> + +<p>Le rendu de ce document pourrait être :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14599/outline-colon.png" style="height: 99px; width: 450px;"></p> + +<p>Où on voit que le titre principal est suivi de deux points puis d'un espace avant le titre secondaire, <em>Living Standard — Last Updated 12 August 2016</em>.</p> + +<p>On pourrait également avoir cet affichage :</p> + +<p><img alt="Rendered outline that includes an <hgroup> element, with parens around the secondary heading" src="https://mdn.mozillademos.org/files/14601/outline-paren.png" style="height: 106px; width: 450px;"></p> + +<p>Ici, le titre secondaire est placé entre parenthèses après le titre principal.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><hgroup id="document-title"> + <h1>HTML</h1> + <h2>Living Standard — dernière mise à jour le 12 août 2016</h2> +</hgroup> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> +<h2 id="Résumé_technique">Résumé technique</h2> + +<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/Cat%C3%A9gorie_de_contenu#Contenu_de_titre">contenu de titre</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Un ou plusieurs éléments {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}.</td> + </tr> + <tr> + <th scope="row">Omission de balise</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("tab")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</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', 'semantics.html#the-hgroup-element', '<hgroup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("html.elements.hgroup")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments HTML relatifs aux sections du document : {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li> + <li><a class="deki-ns current" href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Les sections et le plan d'un document HTML5</a></li> +</ul> diff --git a/files/fr/web/html/element/hr/index.html b/files/fr/web/html/element/hr/index.html new file mode 100644 index 0000000000..0633eb6c4b --- /dev/null +++ b/files/fr/web/html/element/hr/index.html @@ -0,0 +1,138 @@ +--- +title: '<hr> : l''élément de rupture thématique (règle horizontale)' +slug: Web/HTML/Element/hr +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/hr +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><hr></code></strong> représente un changement thématique entre des éléments de paragraphe (par exemple, un changement de décor dans un récit, un changement de sujet au sein d'une section).</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/hr.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> + +<p>Dans les versions précédentes d'HTML, il représente une ligne horizontale. Bien qu'il puisse toujours être représenté ainsi par les navigateurs graphiques, il possède désormais une signification sémantique et ne représente plus un élément de mise en forme.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h3 id="Attributs_dépréciés_obsolètes_ou_non-standard">Attributs dépréciés, obsolètes ou non-standard</h3> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecated_inline}}</dt> + <dd>Définit l'alignement de la ligne horizontale sur la page. Si aucune valeur n'est renseignée, la valeur prise par défaut est <code>left</code>.</dd> + <dt>{{htmlattrdef("color")}} {{Non-standard_inline}}</dt> + <dd>Définit la couleur à utiliser pour la ligne horizontale, grâce à un nom de couleur SVG ou à un code hexadécimal (précédé d'un #).</dd> + <dt>{{htmlattrdef("noshade")}} {{deprecated_inline}}</dt> + <dd>Avec cet attribut, la ligne horizontale n'aura pas d'ombre.</dd> + <dt>{{htmlattrdef("size")}} {{deprecated_inline}}</dt> + <dd>Définit la hauteur de la ligne, exprimée en pixels.</dd> + <dt>{{htmlattrdef("width")}} {{deprecated_inline}}</dt> + <dd>Définit la longueur de la ligne, exprimée par une valeur en pixels ou en pourcents.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p> + Ceci est le premier paragraphe du texte. + Les pandas roux sont géniaux. + C'est mignon et c'est tout doux. +</p> + +<hr> + +<p> + Ceci est le deuxième paragraphe du texte. + Les poneys ne sont pas pareils. + Ils sont plus grands et moins exotiques. +</p> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","100%","200")}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu" title="HTML/Content_categories">Catégories de contenu</a></th> + <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" title="HTML/Content categories#Flow content">Contenu de flux</a></td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Aucun, c'est un élément vide.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>Cet élément doit avoir une balise ouvrante mais ne doit pas avoir de balise fermante.</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" title="HTML/Content categories#Flow content">contenu de flux</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>{{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLHRElement")}}</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', 'semantics.html#the-hr-element', '<hr>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Définition de l'élément <code>hr</code></td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'rendering.html#the-hr-element-0')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Suggestion de rendu par défaut de l'élément <code>hr</code></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-hr-element', '<hr>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.3', '<hr>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Les attributs <code>align</code>, <code>noshade</code>, <code>size</code>, <code>width</code> sont désormais dépréciés.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("html.elements.hr")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("p")}} qui permet de constituer des paragraphes.</li> +</ul> diff --git a/files/fr/web/html/element/html/index.html b/files/fr/web/html/element/html/index.html new file mode 100644 index 0000000000..7173c8eae9 --- /dev/null +++ b/files/fr/web/html/element/html/index.html @@ -0,0 +1,126 @@ +--- +title: '<html> : l''élément de racine du document HTML' +slug: Web/HTML/Element/html +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/html +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><html></code></strong> représente la racine d'un document HTML ou XHTML. Tout autre élément du document doit être un descendant de cet élément.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("manifest")}}{{obsolete_inline}}</dt> + <dd>Définit l'URI d'un manifeste de ressources signifiant que les ressources devraient être mises en cache localement. Voir <a href="/fr/docs/Utiliser_Application_Cache" title="en/Offline_resources_in_Firefox">Ressources hors-ligne dans Firefox</a> pour plus de détails.</dd> + <dt>{{htmlattrdef("version")}}{{obsolete_inline}}</dt> + <dd>Définit la version du document HTML <em>Document Type Definition</em> qui s'applique pour le document courant. Cet attribut n'est pas nécessaire car il est redondant avec l'information de version se trouvant dans la déclaration de type du document (<em>doctype</em>).</dd> + <dt>{{htmlattrdef("xmlns")}}</dt> + <dd>Définit l'espace de noms XML du document. La valeur par défaut est "http://www.w3.org/1999/xhtml". Cet attribut est obligatoire dans un document XML et optionnel dans un document de type text/html.</dd> +</dl> + +<h2 id="Exemple">Exemple</h2> + +<p>Le DOCTYPE utilisé dans l'exemple suivant indique que le document est un document HTML5.</p> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="fr"> + <head>...</head> + <body>...</body> +</html> +</pre> + +<h2 id="Notes">Notes</h2> + +<p>Puisque l'élément <code><html></code> est le premier élément dans un document, autre que les commentaires, il est désigné comme l'élément racine du document. Bien que cette balise soit implicite, ou non requise dans un document <a href="/fr/docs/Web/HTML">HTML</a>, il est requis dans un document <a href="/fr/docs/XHTML">XHTML</a> (à la fois pour la balise ouvrante et pour la balise fermante).</p> + +<h2 id="Accessibilité">Accessibilité</h2> + +<p>L'utilisation d'un attribut {{htmlattrxref("lang")}} <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">valide (au sens de l'IETF)</a> pour l'élément HTML permettra aux lecteurs d'écran de déterminer la langue à utiliser pour l'énonciation. La balise de langage utilisée doit correspondre à celle utilisée pour la majorité du contenu de la page. Sans cet attribut, les lecteurs d'écran utiliseront la lange paramétrée par le système d'exploitation, ce qui pourra entraîner des défauts de prononciations.</p> + +<p>Ajouter un attribut <code>lang</code> valide au sein de l'élément HTML permet également de s'assurer que les métadonnées importantes contenue dans l'élément {{HTMLElement("head")}}, telle que le titre de la page (cf. {{HTMLElement("title")}}) sont énoncées correctement.</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.1_%E2%80%94_Readable_Make_text_content_readable_and_understandable">Comprendre les règles WCAG 3.1</a></li> + <li><em><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/meaning-doc-lang-id.html">Understanding Success Criterion 3.1.1 - W3C Understanding WCAG 2.0</a></em></li> +</ul> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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>Aucune</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Un élément {{HTMLElement("head")}} suivi par un élément {{HTMLElement("body")}}.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>La balise de début peut être absente si le premier objet appartenant à l'élément <code><html></code> n'est pas un commentaire.<br> + La balise de fin peut être absente si l'élément <code><html></code> n'est pas directement suivi par un commentaire et qu'il contient un élément {{HTMLElement("body")}} qui n'est ni vide ou dont la balise de début est présente.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Aucun élément, c'est la racine du document.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLHtmlElement")}}</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', 'semantics.html#the-html-element', '<html>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics.html#the-html-element', '<html>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Ajout de l'attribut <code>manifest</code>. L'attribut <code>version</code> est désormais obsolète.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.3', '<html>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>L'attribut <code>version</code> est désormais déprécié.</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.html")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'élément MathML de plus haut niveau : {{MathMLElement("math")}}</li> + <li>L'élément SVG de plus haut niveau : {{SVGElement("svg")}}</li> +</ul> diff --git a/files/fr/web/html/element/i/index.html b/files/fr/web/html/element/i/index.html new file mode 100644 index 0000000000..7ba5f14692 --- /dev/null +++ b/files/fr/web/html/element/i/index.html @@ -0,0 +1,126 @@ +--- +title: <i> +slug: Web/HTML/Element/i +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/i +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><i></code></strong> représente un morceau de texte qui se différencie du texte principal. Cela peut par exemple être le cas pour des termes techniques, des phrases dans une langue étrangère ou encore l'expression des pensées d'un personnage. Le contenu de cet élément est généralement affiché en italique.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/i.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> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément possède uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p> + La phrase latine + <i class="latin"> + Veni, vidi, vici + </i> + est souvent employée en littérature. +</p> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","100%","200")}}</p> + +<h2 id="Notes">Notes</h2> + +<p>Dans certaines versions antérieures de HTML, la balise <code><i></code> ne jouait qu'un rôle de mise en forme, utilisé pour afficher le texte en italique (de la même façon que la balise <b> était utilisée pour afficher le texte en gras). Désormais, ces balises ont un rôle strictement sémantique et l'élément <i> représente une portion de texte dont la sémantique est différente, la représentation choisie pour cela par le navigateur étant la plupart du temps une mise en italique. Cela signifie que le navigateur affiche généralement le contenu en italique comme c'était le cas auparavant mais que ce traitement de mise en forme n'est plus du tout obligatoire.</p> + +<p>Cet élément ne doit être utilisé seulement si aucun autre ne permet d'exprimer la sémantique du contenu de façon plus appropriée. Ainsi :</p> + +<ul> + <li>{{HTMLElement("em")}} doit être utilisé pour insister, mettre l'accent sur le contenu</li> + <li>{{HTMLElement("strong")}} doit être utilisé pour exprimer l'importance du contenu</li> + <li>{{HTMLElement("mark")}} doit être utilisé pour exprimer la pertinence du contenu</li> + <li>{{HTMLElement("cite")}} doit être utilisé pour marquer le nom d'une œuvre telle qu'un livre, une pièce ou une chanson.</li> + <li>{{HTMLElement("dfn")}} doit être utilisé pour souligner l'occurence d'un mot utilisée pour sa définition</li> +</ul> + +<p>C'est une bonne pratique que d'utiliser l'attribut <code><strong>class</strong></code> pour identifier les raisons qui poussent à utiliser cet élément. Cela permet par exemple de maintenir la mise en forme du document plus efficacement grâce aux feuilles de style CSS.</p> + +<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_tangible">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</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 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>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><dfn>Interface DOM </dfn> {{domxref("HTMLElement")}}. </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', 'text-level-semantics.html#the-i-element', '<i>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-i-element', '<i>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}</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> + +<p>{{Compat("html.elements.i")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("em")}} qui permet d'indiquer une emphase et qui ne doit pas être confondu avec l'élément <code><i></code></li> +</ul> diff --git a/files/fr/web/html/element/iframe/index.html b/files/fr/web/html/element/iframe/index.html new file mode 100644 index 0000000000..1ce4ef0446 --- /dev/null +++ b/files/fr/web/html/element/iframe/index.html @@ -0,0 +1,274 @@ +--- +title: <iframe> +slug: Web/HTML/Element/iframe +tags: + - Contenu + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/iframe +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><iframe></code></strong> représente un contexte de navigation imbriqué qui permet en fait d'obtenir une page HTML intégrée dans la page courante. Le contexte de navigation qui contient le contenu intégré est appelé « contexte de navigation parent ». Le contexte de navigation le plus élevé (qui n'a pas de contexte parent) correspond généralement à la fenêtre du navigateur (cf. {{domxref("Window")}}).</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/iframe.html", "tabbed-standard")}}</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> + +<p>Chaque contexte de navigation possède son propre historique et son propre document actif.</p> + +<p>Chaque contexte de navigation créé par un élément <code><iframe></code> représente un document à part entière et cela peut donc augmenter les ressources nécessaires à l'utilisation de la page. Aussi bien qu'en théorie on puisse ajouter autant d'<em>iframes</em> que possible sur autant de niveaux d'imbrication que voulus, on gardera à l'esprit que cela peut nuire aux performances.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément prend en charge <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("allow")}}</dt> + <dd>L'attribut <code>allow</code> permet de définir une <a href="/fr/docs/Web/HTTP/Feature_Policy">politique de fonctionnalité</a> pour l'<em>iframe</em>.</dd> + <dt>{{htmlattrdef("allowfullscreen")}}</dt> + <dd>Cet attribut, lorsqu'il vaut <code>true</code><em>(vrai)</em> indique que l'<em>iframe</em> intégré peut être passé en plein écran via la méthode{{domxref("Element.requestFullscreen()")}}. + <p class="note">Cet attribut est considéré comme historique et a été redéfini avec <code>allow="fullscreen"</code>.</p> + </dd> + <dt>{{htmlattrdef("allowpaymentrequest")}}</dt> + <dd>Cet attribut, lorsqu'il vaut <code>true</code>, permet à l'<em>iframe</em> intégré d'appeler l'API <a href="https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API">Payment Request</a>. + <p class="note">Cet attribut est considéré comme historique et a été redéfini avec <code>allow="payment"</code>.</p> + </dd> + <dt>{{htmlattrdef("csp")}}{{experimental_inline}}</dt> + <dd>L'attribut <code>csp</code> définit <a href="/fr/docs/Web/HTTP/CSP">la politique de sécurité du contenu</a> que le document intégré doit respecter.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>Cet attribut définit la hauteur du cadre en pixels CSS ({{HTMLVersionInline(5)}}). En {{HTMLVersionInline(4.01)}}, elle peut être exprimée en pixels ou en pourcentages.</dd> + <dt>{{htmlattrdef("importance")}} {{experimental_inline}}</dt> + <dd>Cet attribut indique l'importance de la ressource. La priorité est indiquée au navigateur à l'aide d'une des valeurs suivantes : + <dl> + <dt><code>auto</code></dt> + <dd>Cette valeur indique l'absence de préférence. Le navigateur pourra utiliser sa propre heuristique afin de décider de la priorité de la ressource. C'est la valeur par défaut.</dd> + <dt><code>high</code></dt> + <dd>Cette valeur indique au navigateur que la ressource a une priorité haute.</dd> + <dt><code>low</code></dt> + <dd>Cette valeur indique au navigateur que la ressource a une priorité basse.</dd> + </dl> + </dd> + <dt id="name-attribute">{{htmlattrdef("name")}}</dt> + <dd>Un nom pour le contexte de navigation (ou la <em>frame</em>). Ce nom peut être utilisé comme la valeur de l'attribut <code><strong>target</strong></code> <em>(cible)</em> d'un élément {{HTMLElement("a")}} ou {{HTMLElement("form")}} <em>(formulaire)</em> ou comme valeur de l'attribut <strong><code>formtarget</code></strong> d'un élément {{HTMLElement("input")}} <em>(entrée)</em> ou {{HTMLElement("button")}} <em>(bouton)</em>. Il peut également être utilisé comme valeur pour le paramètre <code>windowName</code> de la méthode {{domxref("Window.open()","window.open()")}}.</dd> + <dt id="attr-referrer">{{htmlattrdef("referrerpolicy")}}</dt> + <dd>Une chaîne de caractères qui indique le référent (<em>referrer</em>) à utiliser lors de la récupération de la ressource : + <ul> + <li><code>no-referrer</code> signifie que l'en-tête {{HTTPHeader("Referer")}} ne sera pas envoyé.</li> + <li><code>no-referrer-when-downgrade</code> signifie qu'aucune en-tête <code>Referrer</code> ne sera envoyé lorsqu'on navigue vers une origine qui n'utilise pas TLS (HTTPS). C'est le comportement par défaut de l'agent utilisateur.</li> + <li><code>origin</code> signifie que le référent sera l'origine de la page (c'est-à-dire son schéma, son hôte et le port utilisé).</li> + <li><code>origin-when-cross-origin</code> signifie que les navigations vers d'autres origines seront limitées aux schémas, hôtes et ports. Les navigations sur la même origine inclueront le chemin explicite du référent.</li> + <li><code>same-origin</code> un référent sera envoyé pour <a href="/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript">les origines du même site</a> mais les requêtes multi-origines ne contiendront pas d'informations de référent.</li> + <li><code>strict-origin</code> seule l'origine du document est envoyée comme référent lorsque le protocole de sécurité est le même (HTTPS→HTTPS). L'origine n'est pas envoyée lorsque la destination est moins sécurisée (HTTPS→HTTP).</li> + <li><code>strict-origin-when-cross-origin</code> : l'URL complète est envoyée pour les requêtes de même origine, seule l'origine est envoyée lorsque le protocole de sécurité est le même (HTTPS→HTTPS) et aucun en-tête n'est envoyé pour une destination moins sécurisée (HTTPS→HTTP).</li> + <li><code>unsafe-url</code> signifie que le référent incluera l'origine et le chemin (mais pas le fragment, le mot de passe ou le nom utilisateur). Cette valeur n'est pas sûre car elle peut entraîner des fuites d'origine ou de chemin provenant de ressources sécurisées avec TLS vers des origines insécures.</li> + </ul> + </dd> + <dt>{{htmlattrdef("sandbox")}}</dt> + <dd>Cet attribut permet d'appliquer des restrictions sur le contenu qui peut apparaître dans l'<em>iframe</em>. Si cet attribut vaut la chaîne de caractères vide, toutes les restrictions sont appliquées, sinon, on peut utiliser une liste de mots-clés séparés par des espaces pour définir des restrictions précises. Les mots-clés qui peuvent être utilisés sont : + <ul> + <li><code>allow-downloads-without-user-activation</code> {{experimental_inline}} : permet aux téléchargements d'avoir lieu sans un signe de l'utilisateur.</li> + <li><code>allow-forms</code> : le contexte de navigation intégré peut envoyer des formulaires. Si ce mot-clé n'est pas utilisé, cette opération n'est pas autorisée.</li> + <li><code>allow-modals</code> : le contexte de navigation peut ouvrir des fenêtres modales.</li> + <li><code>allow-orientation-lock</code> : le contexte de navigation peut désactiver le verrouillage de l'orientation de l'écran.</li> + <li><code>allow-pointer-lock</code> : le contexte de navigation peut utliser <a href="/fr/docs/WebAPI/Pointer_Lock">l'API Pointer Lock</a>.</li> + <li><code>allow-popups</code> : le contexte de navigation peut déclencher des fenêtres contextuelles (par exemple avec <code>window.open</code>, <code>target="_blank"</code>, <code>showModalDialog</code>). Si ce mot-clé n'est pas utilisé, la fonctionnalité échouera sans message d'erreur.</li> + <li><code>allow-popups-to-escape-sandbox</code> : ce mot-clé permet à un document isolé dans un bac à sable (<em>sandboxed</em>) d'ouvrir de nouvelles fenêtres sans avoir à forcer la mise en bac à sable pour ces fenêtres. Cela permettra par exemple à une publicité tierce d'être correctement mise dans un bac à sable sans appliquer les mêmes restrictions sur la page initiale.</li> + <li><code>allow-presentation</code> : ce mot-clé permet à un <em>iframe</em> de démarrer <a href="/fr/docs/Web/API/PresentationRequest">une session de présentation</a>.</li> + <li><code>allow-same-origin</code> : ce mot-clé permet au document isolé de supporter les tests de {{Glossary("same-origin policy")}} en désactivant le remplacement de l'origine de l'<em>iframe</em> par une origine unique.</li> + <li><code>allow-scripts</code> : le contexte de navigation peut exécuter des scripts (mais ne peut pas créer de fenêtres contextuelles). Si ce mot-clé n'est pas utilisé, cette opération n'est pas autorisée.</li> + <li><code>allow-storage-access-by-user-activation</code> {{experimental_inline}} : ce mot-clé permet au contexte de navigation embarqué de demander l'accès aux fonctionnalités de stockage du document parent (ex. ses cookies, <a href="/fr/docs/Web/API/Web_Storage_API">le stockage web</a>) grâce à l'<a href="/fr/docs/Web/API/Storage_Access_API">API Storage Access</a>.</li> + <li><code>allow-top-navigation</code> : le contexte de navigation peut charger du contenu depuis le contexte de navigation de plus haut niveau. Si ce mot-clé est absent, cette opération n'est pas autorisée.</li> + <li><code>allow-top-navigation-by-user-activation</code> : le contexte de navigation peut charger du contenu depuis le contexte de plus haut niveau uniquement si l'action provient de l'utilisateur. Si ce mot-clé est absent, cette opération n'est pas autorisée.</li> + </ul> + + <div class="note"> + <p><strong>Notes :</strong></p> + + <ul> + <li>Lorsque le document intégré possède la même origine que la page principale, il est fortement déconseillé d'employer <code>allow-scripts</code> et <code>allow-same-origin</code> simultanément car cela permet de retirer l'attribut <code>sandbox</code>par programme. Bien que ce soit accepté, ce cas de figure n'est pas plus sûr que de ne pas utiliser l'attribut <code>sandbox</code>.</li> + <li>La mise en bac à sable (<em>sandboxing</em>) est d'une aide minime si un attaquant peut faire en sorte qu'un contenu potentiellement hostile soit affiché dans le navigateur de l'utilisateur en dehors d'un <em>iframe</em> sous sandbox. Aussi, il est recommandé de diffuser le contenu depuis un domaine dédié séparé, afin de limiter les éventuels dommages.</li> + <li>L'attribut <code>sandbox</code> n'est pas pris en charge par Internet Explorer 9 et les versions antérieures.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>L'URL de la page qu'on souhaite intégrer. On pourra utiliser <code>about:blank</code> pour les pages vides afin de respecter les règles de même origine (<em>Same-Origin Policy</em>). On notera également que retirer l'attribut <code>src</code> d'un élément <code><iframe></code> à l'aide d'un script (par exemple avec {{domxref("Element.removeAttribute()")}}) provoquera le chargement de <code>about:blank</code> dans la <em>frame</em> pour Firefox à partir de la version 65, pour les navigateurs basés sur Chromium ainsi que pour Safari.</dd> + <dt>{{htmlattrdef("srcdoc")}}</dt> + <dd>Le contenu de la page qu'on souhaite intégrer dans le contexte de navigation. Cet attribut est généralement utilisé avec l'attribut <code>sandbox</code>. Si le navigateur prend en charge l'attribut <code>srcdoc</code>, ce dernier surchargera le contenu éventuellement défini via l'attribut <code>src</code>. Si un navigateur ne prend pas en charge l'attribut <code>srcdoc</code>, c'est le contenu lié via <code>src</code> qui sera affiché. On notera que si le contenu de l'attribut contient une balise ouvrante <code><script></code>, il est nécessaire d'avoir une balise fermante afin que le script soit exécuté, même s'il n'y a aucun contenu après le script.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>Cet attribut indique la largeur de l'<em>iframe</em> en pixels CSS. Par défaut, cet attribut vaut <code>300</code>.</dd> +</dl> + +<h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>Cet attribut obsolète permettait de définir l'alignement de l'<em>iframe</em> par rapport à son contexte englobant.</dd> + <dt>{{htmlattrdef("frameborder")}} {{obsolete_inline("html5")}}</dt> + <dd>Lorsqu'il vaut 1 (la valeur par défaut), cet attribut indique au navigateur de définir une bordure entre ce cadre et tout autre cadre. Lorsqu'il vaut 0, aucune bordure n'est dessinée.</dd> + <dt>{{htmlattrdef("longdesc")}} {{obsolete_inline("html5")}}</dt> + <dd>Un URI vers une description détaillée du cadre. En raison d'un mauvais usage, cet attribut n'est pas utile pour les navigateurs non-visuels.</dd> + <dt>{{htmlattrdef("marginheight")}} {{obsolete_inline("html5")}}</dt> + <dd>L'espace, exprimé en pixels, entre le contenu du cadre et ses marges haute et basse.</dd> + <dt>{{htmlattrdef("marginwidth")}} {{obsolete_inline("html5")}}</dt> + <dd>L'espace, exprimé en pixels, entre le contenu du cadre et ses marges gauche et droite.</dd> + <dt>{{htmlattrdef("scrolling")}} {{HTMLVersionInline(4)}} uniquement</dt> + <dd>Un attribut à valeur contrainte qui indique si le navigateur doit afficher une barre de défilement (ou tout autre moyen de défilement) pour<em> </em>le cadre : + <ul> + <li><code>auto</code> : la barre de défilement est uniquement affichée lorsque c'est nécessaire.</li> + <li><code>yes</code> : la barre de défilement est toujours affichée.</li> + <li><code>no</code> : aucune barre de défilement n'est affichée.</li> + </ul> + </dd> +</dl> + +<h3 id="Attributs_non-standard_non-standard_inline">Attributs non-standard {{non-standard_inline}}</h3> + +<dl> + <dt>{{htmlattrdef("mozbrowser")}} {{non-standard_inline}}</dt> + <dd>Cet attribut est uniquement disponible pour les <a href="/fr/docs/MDN/Doc_status/Addons/WebExtensions">WebExtensions</a>. L'<em>iframe</em> se comporte comme une fenêtre de navigateur de plus haut niveau. Voir {{bug(1318532)}} quant à l'exposition de cet attribut dans Firefox.</dd> +</dl> + +<h2 id="iframe_et_scripts">iframe et scripts</h2> + +<p>Les <code>iframes</code>, tels que les {{HTMLElement("frame")}}, font partie du pseudo-tableau {{domxref("window.frames")}}.</p> + +<p>En utilisant l'élément <code>iframe</code> du DOM, les scripts peuvent accéder à l'objet {{domxref("window")}} de la page HTML incluse par la propriété <code>contentWindow</code>. La propriété <code>contentDocument</code> fait référence au document contenu dans l'<code>iframe</code> (l'équivalent de <code>contentWindow.document</code>) mais n'est pas prise en charge par Internet Explorer avant IE8.</p> + +<p>Depuis l'<em>iframe</em>, un script peut obtenir une référence à la fenêtre parente via la propriété {{domxref("window.parent")}}.</p> + +<p>Les scripts qui tentent d'accéder au contenu de l'<em>iframe</em> doivent respecter <a href="/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">les règles de même origine</a> et ne peuvent pas accéder à la plupart des propriétés d'une autre fenêtre s'ils ont été chargés depuis un domaine différent. Cela s'applique également aux scripts d'un <em>iframe</em> qui souhaitent accéder au contexte englobant. On peut toutefois communiquer entre différents domaines grâce à la méthode {{domxref("Window.postMessage()")}}.</p> + +<h2 id="Positionnement_et_redimensionnement">Positionnement et redimensionnement</h2> + +<p>En tant qu'élément remplacé, la position, l'alignement et le redimensionnement du document embarqué via <code><iframe></code> peuvent être ajustés via les propriétés {{cssxref("object-position")}} et {{cssxref("object-fit")}}.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Un_<iframe>_simple">Un <code><iframe></code> simple</h3> + +<p>Voici un exemple simple où, lorsque l'utilisateur clique sur le bouton, le titre est affiché dans une fenêtre contextuelle.</p> + +<h4 id="HTML">HTML</h4> + +<div id="htmlOutputWrapper"> +<pre class="brush: html notranslate"><iframe title="exemple 1 avec iframe" src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" width="400" height="300"> +</iframe></pre> +</div> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample('Une_<iframe>_simple', 640, 400)}}</p> + +<h3 id="Ouvrir_un_lien_dans_un_<iframe>_dans_un_autre_onglet">Ouvrir un lien dans un <code><iframe></code> dans un autre onglet</h3> + +<p>Dans cet exemple, une carte Google est affichée dans un cadre.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><base target="_blank"> +<iframe id="Example2" + title="Example2" + width="400" height="300" + style="border: none" + src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=es-419&amp;geocode=&amp;q=buenos+aires&amp;sll=37.0625,-95.677068&amp;sspn=38.638819,80.859375&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Buenos+Aires,+Argentina&amp;z=11&amp;ll=-34.603723,-58.381593&amp;output=embed"> +</iframe> +</pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("Ouvrir_un_lien_d'une_<iframe>_dans_un_onglet", 640, 400)}}</p> + +<p><a href="https://jsfiddle.net/pablofiumara/mCfAe/">Exemple réel</a></p> + +<h2 id="Accessibilité">Accessibilité</h2> + +<p>Les personnes qui utilisent des outils d'assistance tels que des lecteurs d'écran peut utiliser l'attribut {{HTMLattrxref("title")}} pour obtenir la description du contenu embarqué par l'<code>iframe</code>. La valeur du titre doit décrire, de façon claire et concise, le contenu embarqué.</p> + +<pre class="brush: html notranslate"><iframe title="La page Wikipédia consacrée à Robert Louis Stevenson" src="https://fr.wikipedia.org/wiki/Robert_Louis_Stevenson"></iframe></pre> + +<p>Sans cette description, les utilisateurs peuvent devoir naviguer à l'intérieur de l'<code>iframe</code> et parcourir le contenu afin de comprendre de quoi il s'agit. Le changement de contexte peut être source de confusion et demander un temps de réflexion, notamment pour les pages qui contiennent plusieurs <code>iframe</code> et/ou du contenu interactif tel que des vidéos ou de la musique.</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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%C3%A9gorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_int%C3%A9gr%C3%A9">contenu intégré</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_interactif">contenu interactif</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Le contenu alternatif, qui sera affiché par les navigateurs qui ne prennent pas en charge cet élément.</td> + </tr> + <tr> + <th scope="row">Omission de balise</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Tout élément qui accepte du contenu intégré.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("img")}}</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLIFrameElement")}}</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('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerpolicy attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Ajout de l'attribut <code>referrerpolicy</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'iframe-embed-object.html#the-iframe-element', '<iframe>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-iframe-element', '<iframe>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/frames.html#h-16.5', '<iframe>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('Screen Orientation')}}</td> + <td>{{Spec2('Screen Orientation')}}</td> + <td>Ajout du mot-clé <code>allow-orientation-lock</code> pour l'attribut <code>sandbox</code>.</td> + </tr> + <tr> + <td>{{SpecName('Presentation','#sandboxing-and-the-allow-presentation-keyword','allow-presentation')}}</td> + <td>{{Spec2('Presentation')}}</td> + <td>Ajout du mot-clé <code>allow-presentation</code> pour l'attribut <code>sandbox</code>.</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.iframe",3)}}</p> diff --git a/files/fr/web/html/element/image/index.html b/files/fr/web/html/element/image/index.html new file mode 100644 index 0000000000..909d5f05e0 --- /dev/null +++ b/files/fr/web/html/element/image/index.html @@ -0,0 +1,39 @@ +--- +title: <image> +slug: Web/HTML/Element/image +tags: + - Element + - HTML + - Non-standard + - Obsolete + - Reference +translation_of: Web/HTML/Element/image +--- +<div>{{HTMLRef}}{{obsolete_header}}{{non-standard_header}}</div> + +<p>L'élément HTML <strong><code><image></code></strong> est un élément obsolète, remplacé depuis longtemps par l'élément standard {{HTMLElement("img")}}.</p> + +<div class="warning"> +<p><strong>Attention !</strong> Si vous souhaitez afficher des images, c'est l'élément {{HTMLElement("img")}} qui doit être utilisé.</p> +</div> + +<p>Bien que les navigateurs essaient de convertir cet élément {{HTMLElement("img")}}, cela peut avoir des résultats incertains voire inattendus.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<p>Cet élément ne fait partie d'aucune spécification.</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>La plupart du temps, les navigateurs essaieront de convertir cet élément en un élément <code><img></code> si l'attribut {{htmlattrxref("src", "img")}} est utilisé. Créer un élément <code><image></code> sans attribut entraînera la création d'un objet <code>HTMLElement</code> avec le nom "image". Si l'élément est créé avec un attribut <code>src</code>, ce sera un objet <code>HTMLImageElement</code> qui sera créé et son nom sera "img".</p> + +<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.image")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'élément {{HTMLElement("img")}} qui doit être utilisé afin d'afficher une image dans un document.</li> + <li>L'élément {{HTMLElement("picture")}} qui permet de sélectionner parmi plusieurs images en fonction de requête média afin d'avoir des images <em>responsive</em>.</li> +</ul> diff --git a/files/fr/web/html/element/img/index.html b/files/fr/web/html/element/img/index.html new file mode 100644 index 0000000000..5f992aa816 --- /dev/null +++ b/files/fr/web/html/element/img/index.html @@ -0,0 +1,379 @@ +--- +title: '<img> : l''élément d''image embarquée' +slug: Web/HTML/Element/Img +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/img +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><img></code></strong> permet de représenter une image dans un document. Cet élément est un <a href="/fr/docs/Web/CSS/%C3%89l%C3%A9ment_remplac%C3%A9">élément remplacé</a>.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/img.html", "tabbed-standard")}}</div> + +<div 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> !</div> + +<p>Dans l'exemple qui précède, on utilise l'élément <code><img></code> simplement. L'attribut <code>src</code> est obligatoire et contient le chemin de l'image qu'on souhaite afficher. L'attribut <code>alt</code> n'est pas obligatoire mais recommandé et contient une description textuelle de l'image ; il est recommandé pour des raisons d'accessibilité et sera utilisé par les lecteurs d'écran ou sera affiché si l'image ne peut pas être chargée.</p> + +<p>Il existe d'autres attributs qui peuvent être utilisés dans différents cas. Ces attributs sont détaillés ci-après. Entre autres, on pourra utiliser :</p> + +<ul> + <li>Les attributs <code>crossorigin</code> et <code>referrerpolicy</code> pour le contrôle sur le référent et la politique <a href="/fr/docs/Web/HTTP/CORS">CORS</a></li> + <li>Les attributs <code>width</code> et <code>height</code> afin d'indiquer les dimensions intrinsèques de l'image pour s'assurer qu'elle occupe un espace stable, y compris lors du chargement</li> + <li>Les attributs <code>sizes</code> et <code>srcset</code> qui permettent de gérer des images <em>responsives</em> (à ce sujet, voir également l'élément {{HTMLElement("picture")}} et <a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web">notre tutoriel sur les images <em>responsives</em></a>).</li> +</ul> + +<h2 id="Attributs">Attributs</h2> + +<p>À l'instar de tous les autres éléments, l'élément <code><img></code> prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("alt")}}</dt> + <dd>Cet attribut définit le texte alternatif utilisé lorsqu'il est impossible d'afficher l'image (par exemple si l'URL est incorecte ou si l'image n'est pas encore téléchargée). + <div class="note"> + <p><strong>Note :</strong> Les navigateurs peuvent ne pas toujours afficher l'image référencée par l'élément. C'est notamment le cas des navigateurs non-graphiques (utilisés par les personnes visuellement handicapées), lorsque l'utilisateur choisit de ne pas afficher les images ou lorsque le navigateur ne peut pas afficher l'image car elle est invalide ou que son format n'est pas pris en charge. Dans ces cas de figure, le navigateur pourra remplacer l'image avec le texte utilisé pour l'attribut <code>alt</code> de l'élément <code>img</code>. Pour toutes ces raisons, il est fortement conseillé de fournir une valeur pertinente pour <code>alt</code> lorsque c'est possible.</p> + + <p><strong>Note : </strong>Si cet attribut est absent, cela indique que l'image joue un rôle important dans le contenu mais qu'aucun équivalent textuel n'est disponible. Si cet attribut contient une chaîne de caractères vide (<code>alt=""</code>), cela indique que l'image ne joue pas de rôle important dans la compréhension du contenu ce qui permet aux navigateurs non-graphiques de ne pas traiter l'image en question.</p> + </div> + </dd> + <dt>{{htmlattrdef("crossorigin")}} {{HTMLVersionInline(5)}}</dt> + <dd>Cet attribut à valeur contrainte indique si la récupération de l'image peut être effectuée via d'autres origines (<em>CORS</em>). Les images pour lesquelles le <a href="/fr/docs/Web/HTML/Images_avec_le_contrôle_d_accès_HTTP">CORS a été activé</a> peuvent être réutilisées dans un élément {{HTMLElement("canvas")}} sans le <a href="/fr/docs/Web/HTML/Images_avec_le_contrôle_d_accès_HTTP#Qu'est-ce_qu'un_canevas_«_corrompu_»">corrompre</a>. Les valeurs autorisées pour cet attribut sont :</dd> + <dd> + <dl> + <dt><code>anonymous</code></dt> + <dd>Une requête entre deux origines est effectuée (avec l'en-tête {{httpheader("Origin")}}) mais aucune information d'authentification n'est transmise (aucun cookie, aucun certificat X.5090, aucune authentification simple par HTTP). Si le serveur ne fournit pas d'informations d'authentification pour le site d'origine (en n'utilisant pas l'en-tête HTTP {{httpheader("Access-Control-Allow-Origin")}}), l'image sera corrompue et son utilisation sera restreinte.</dd> + <dt><code>use-credentials</code></dt> + <dd>Une requête entre deux origines est effectuée (avec l'en-tête {{httpheader("Origin")}}) avec des informations d'authentification qui sont envoyées (par exemple un cookie, un certificat et une authentification HTTP). Si le serveur ne fournit pas d'informations d'authentification au site d'origine (via l'en-tête HTTP {{httpheader("Access-Control-Allow-Origin")}}), l'image sera corrompue et son utilisation sera restreinte.</dd> + </dl> + Lorsque cet attribut est absent, la ressource est récupérée sans requête <em>CORS</em> (c'est-à-dire sans envoyer l'en-tête HTTP {{httpheader("origin")}}) ce qui empêche de l'utiliser dans un {{HTMLElement('canvas')}} sans qu'elle soit considérée comme corrompue. Si la valeur de l'attribut est invalide, elle sera considérée comme <code><strong>anonymous</strong></code>. Voir la page <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS">réglage des attributs CORS</a> pour plus d'informations.</dd> + <dt>{{htmlattrdef("decoding")}}</dt> + <dd> + <p>Cet attribut fournit une indication à l'agent utilisateur pour le décodage de l'information. Les valeurs possibles sont :</p> + </dd> + <dd> + <dl> + <dt><code>sync</code></dt> + <dd>L'image est décodée de façon synchrone afin d'être présentée de façon atomique avec le reste du contenu.</dd> + <dt><code>async</code></dt> + <dd>L'image est décodée de façon asynchrone afin de réduire le temps nécessaire à la présentation du reste du contenu.</dd> + <dt><code>auto</code></dt> + <dd>Le mode par défaut qui indique l'absence de préférence pour le mode de décodage. Dans ce cas, l'agent utilisateur décide de la meilleure stratégie.</dd> + </dl> + </dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>La hauteur intrinsèque de l'image exprimée en pixels (en {{HTMLVersionInline(4)}}, cette valeur pouvait être exprimée en pourcentages).</dd> + <dt id="name-attribute">{{htmlattrdef("importance")}} {{experimental_inline}}</dt> + <dd>Cet attribut indique l'importance relative de la ressource. Les indicateurs de priorité sont exprimés avec les valeurs suivantes :</dd> + <dd> + <p><code>auto</code> : aucune préférence particulière, le navigateur peut utiliser sa propre heuristique afin de décider la priorité de l'image.</p> + + <p><code>high</code> : cette valeur indique au navigateur que l'image a une priorité élevée.</p> + + <p><code>low</code> : cette valeur indique au navigateur que l'image a une priorité faible.</p> + </dd> + <dt>{{htmlattrdef("intrinsicsize")}} {{experimental_inline}}</dt> + <dd>Cet attribut indique au navigateur d'ignorer la taille intrinsèque réelle de l'image et d'utiliser la taille fournie par les attributs. La matrice contenant l'image aurait donc ces dimensions et calculer <code>naturalWidth</code>/<code>naturalHeight</code> sur de telles images renverrait les valeurs de cet attribut.. <a href="https://github.com/ojanvafai/intrinsicsize-attribute">Explications</a>, <a href="https://googlechrome.github.io/samples/intrinsic-size/index.html">exemples</a>.</dd> + <dt>{{htmlattrdef("ismap")}}</dt> + <dd>Un attribut booléen dont la valeur indique si l'image fait partie d'une carte cliquable. Si c'est le cas, les coordonnées du clic seront envoyées au serveur. + <div class="note"> + <p><strong>Note : </strong>Cet attribut est uniquement autorisé si l'élément <code><img></code> descend d'un élément {{htmlelement("a")}} dont l'attribut {{htmlattrxref("href","a")}} est valide.</p> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("loading")}}</dt> + <dd> + <p>Indique comment le navigateur doit charger l'image :</p> + + <ul> + <li><code>eager</code> : Charge l'image immédiatement, que l'image se trouve ou non dans le viewport visible (c'est la valeur par défaut).</li> + <li><code>lazy</code> : Diffère le chargement de l'image au moment où elle atteint une certaine distance de la fenêtre de visualisation, telle que définie par le navigateur. Le but est d'éviter que le réseau et la zone de stockage nécessaires à la manipulation de l'image ne soient utilisés tant qu'il n'est pas relativement sûr que celle-ci sera nécessaire. Cela permet généralement d'améliorer les performances du contenu dans la plupart des cas d'utilisation typiques.</li> + </ul> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> + <dd>Une chaîne de caractères indiquant le référent à utiliser lors de la récupération de la ressource : + <ul> + <li><code>no-referrer</code> : l'en-tête HTTP {{httpheader("Referer")}} ne sera pas envoyé.</li> + <li><code>no-referrer-when-downgrade</code> : aucun en-tête HTTP {{httpheader("Referer")}} n'est envoyé lorsqu'on navigue vers une origine sans TLS (HTTPS). Cette valeur est le comportement par défaut de l'agent utilisateur si aucune valeur n'est fournie.</li> + <li><code>origin</code> : l'en-tête HTTP {{httpheader("Referer")}} contiendra le schém, l'hôte et le port de la page d'origine.</li> + <li><code>origin-when-cross-origin</code> : lorsque la navigation se fait vers d'autres origines, les données du référent se limiteront au schéma, à l'hôte et au part. Si on navigue sur la même origine, le chemin complet de la ressource sera indiquée.</li> + <li><code>unsafe-url</code> : l'en-tête HTTP {{httpheader("Referer")}} incluera l'origine et le chemin mais aucun fragment, mot de passe ou nom d'utilisateur. Ce cas de figure n'est pas sécurisé car il peut laisser fuire des origines et des chemins de ressources protégées par TLS vers des origines non-sécurisées.</li> + </ul> + </dd> + <dt>{{htmlattrdef("sizes")}}{{HTMLVersionInline(5)}}</dt> + <dd>Une liste de une ou plusieurs chaînes de caractères séparées par des virgules qui indique chacune une condition de taille. Chaque condition de taille (<em>source size</em>) se compose : + <ol> + <li>D'une condition sur le média (qui doit être absente pour le dernier élément de la liste).</li> + <li>D'une valeur</li> + </ol> + + <p>Les valeurs des conditions de taille définissent la taille voulue pour l'affichage de l'image. Les agents utilisateurs utilisent la taille courante afin de choisir une des images sources parmi l'attribut <code>srcset</code> lorsque ces sources sont décrites avec un descripteur de largeur ('<code>w</code>'). La condition de taille choisie a un impact sur la taille intrinsèque de l'image (c'est-à-dire la taille de l'image affichée si aucune mise en forme CSS n'est appliquée). Si l'attribut <code>srcset</code> est absent ou ne contient aucune valeur qui soit un descripteur de largeur, l'attribut <code>sizes</code> n'aura aucun effet.</p> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>L'URL de l'image. Cet attribut est obligatoire pour l'élément <code><img></code>. Pour les navigateurs qui prennent en charge <code>srcset</code>, <code>src</code> est considéré comme une image candidate dont la densité de pixel vaut <code>1x</code> si aucune autre image avec cette densité n'est définie via <code>srcset</code> ou si <code>srcset</code> contient des descripteurs '<code>w</code>'.</dd> + <dt>{{htmlattrdef("srcset")}}{{HTMLVersionInline(5)}}</dt> + <dd>Une liste de une ou plusieurs chaînes de caractères, séparées par des virgules, qui indiquent un ensemble d'images sources parmi lequel l'agent utilisateur pourra choisir la meilleure image à afficher. Chaque chaîne de caractères se compose : + <ol> + <li>D'une URL vers une image,</li> + <li>Éventuellement d'un espace suivi : + <ul> + <li>D'un descripteur de largeur ou un entier positif directement suivi par '<code>w</code>'. Le descripteur de largeur est divisé par la taille de la condition de taille définie dans l'attribut <code>sizes</code> afin de calculer la densité de pixel réelle.</li> + <li>D'un descripteur de densité de pixel qui est un nombre décimal directement suivi par '<code>x</code>'.</li> + </ul> + </li> + </ol> + + <p>Si aucun descripteur n'est utilisé, la source aura un descripteur par défaut qui vaut <code>1x</code>.</p> + + <p>Au sein d'un même attribut <code>srcset</code>, on ne peut pas mélanger des descripteurs exprimés en densité de pixels et des descripteurs exprimés en largeur. Il est également invalide d'avoir deux sources pour lesquelles le descripteur est le même (par exemple, deux sources décrites par '<code>2x</code>').</p> + + <p>L'agent utilisateur sélectionne au choix une des images parmi celles disponibles. Cette liberté lui permet éventuellement de prendre en compte le débit de la connexion ou les choix de l'utilisateur lors du téléchargement des images.</p> + </dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>La largeur intrinsèque de l'image, exprimée en pixels. En {{HTMLVersionInline(4)}}, la valeur pouvait être exprimée en pourcentages ou en pixels. Avec {{HTMLVersionInline(5)}}, seules les valeurs exprimées en pixels sont acceptées.</dd> + <dt>{{htmlattrdef("usemap")}}</dt> + <dd>Le fragment d'URL (commençant avec #) d'une <a href="/fr/docs/Web/HTML/Element/map">carte d'images</a> associée à cet élément. + <div class="note"> + <p><strong>Note :</strong> Cet attribut ne peut pas être utilisé si l'élément <code><img></code> est un descendant d'un élément {{htmlelement("a")}} ou d'un élément {{HTMLElement("button")}}.</p> + </div> + </dd> +</dl> + +<h3 id="Attributs_obsolètes">Attributs obsolètes</h3> + +<dl> + <dt>{{htmlattrdef("align")}}</dt> + <dd>L'alignement de l'image selon le contexte qui l'entoure. En HTML5, on privilégiera les propriétés CSS {{cssxref('float')}} et/ou {{cssxref('vertical-align')}} voire la propriété {{cssxref("object-position")}} qui permet de positionner l'image au sein de la boîte de l'élément. Les valeurs autorisées sont :</dd> + <dd> + <dl> + <dt><code>top</code></dt> + <dd>Équivalent à <code style="white-space: nowrap;">vertical-align: top;</code> ou à <code style="white-space: nowrap;">vertical-align: text-top;</code></dd> + <dt><code>middle</code></dt> + <dd>Équivalent à <code style="white-space: nowrap;">vertical-align: -moz-middle-with-baseline;</code></dd> + <dt><code>bottom</code></dt> + <dd>La valeur utilisée par défaut. Équivalent à <code style="white-space: nowrap;">vertical-align: unset;</code> ou à <code style="white-space: nowrap;">vertical-align: initial;</code></dd> + <dt><code>left</code></dt> + <dd>Équivalent à <code style="white-space: nowrap;">float: left;</code></dd> + <dt><code>right</code></dt> + <dd>Équivalent à <code style="white-space: nowrap;">float: right;</code></dd> + </dl> + </dd> + <dt>{{htmlattrdef("border")}}</dt> + <dd>La largeur de la bordure qui entoure l'image. En HTML5, on privilégiera la propriété CSS {{cssxref('border')}}.</dd> + <dt>{{htmlattrdef("hspace")}}</dt> + <dd>Le nombre de pixels blancs à insérer à droite et à gauche de l'image. En HTML5, on privilégiera la propriété CSS {{cssxref('margin')}}.</dd> + <dt>{{htmlattrdef("longdesc")}}</dt> + <dd>Un lien vers une description plus détaillée de l'image. Les valeurs possibles sont une URL ou un identifiant ({{htmlattrxref("id")}}) d'un élément. + <div class="note"> + <p><strong>Note :</strong> Cet attribut est obsolète depuis <a href="https://www.w3.org/TR/html50/obsolete.html#dom-img-longdesc">HTML 5.0</a>. Il est également mentionné dans les dernières versions W3C <a href="https://www.w3.org/TR/html52/obsolete.html#element-attrdef-img-longdesc">HTML 5.2</a> mais a été retiré du <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">standard WHATWG</a>.</p> + + <p>Les auteurs ne devraient plus utiliser cet attribut mais employer des alternatives WAI-ARIA comme <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby"><code>aria-describedby</code></a> ou <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-details"><code>aria-details</code></a>.</p> + </div> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>Un nom à donner à cet élément. Cet attribut est pris en charge en {{HTMLVersionInline(4)}} uniquement à des fins de rétrocompatibilité. Il faut utiliser l'attribut <code>id</code> à la place.</dd> + <dt>{{htmlattrdef("vspace")}}</dt> + <dd>Le nombre de pixels blancs à insérer en dessous et au dessus de l'image. En HTML5, on privilégiera la propriété CSS {{cssxref('margin')}}.</dd> +</dl> + +<h2 id="Formats_dimage_pris_en_charge">Formats d'image pris en charge</h2> + +<p>The HTML standard doesn't give a list of image formats that must be supported, so each {{glossary("user agent")}} supports a different set of formats.</p> + +<p>Le standard HTML ne fournit pas de liste exhaustive des formats que doit prendre en charge un agent utilisateur et chaque agent utilisateur couvre différents formats. Un <a href="/fr/docs/Web/Media/Formats/Types_des_images">guide à propos des formats d'image pris en charge par les navigateurs web</a> est disponible.</p> + +<p>{{page("/fr/docs/Web/Media/Formats/Types_des_images", "table-of-image-file-types")}}</p> + +<h2 id="Interactions_avec_CSS">Interactions avec CSS</h2> + +<p>Pour CSS, <code><img></code> est <a href="/fr/docs/Web/CSS/Élément_remplacé">un élément remplacé</a>. Il n'a pas de ligne de base ; aussi, lorsque les images sont utilisées dans un contexte en ligne avec {{cssxref("vertical-align")}}<code>: baseline</code>, c'est le bas de l'image qui est placé sur la ligne de base du conteneur.</p> + +<p>On peut utiliser la propriété {{cssxref("object-position")}} afin de positionner l'image dans la boîte de l'élément et la propriété {{cssxref("object-fit")}} afin d'ajuster les dimensions de l'image dans la boîte (on choisit par exemple si l'image doit s'inscrire entièrement dans la boîte ou s'il est préférable de la rogner).</p> + +<p>Selon son type, une image peut avoir une largeur et une hauteur intrinsèques. Pour d'autres types de fichier cependant, ces dimensions intrinsèques ne sont pas nécessaires (les images SVG, par exemple, ne possèdent pas de dimensions intrinsèques).</p> + +<h2 id="Erreurs">Erreurs</h2> + +<p>Si une erreur se produit lors du chargement ou de l'affichage de l'image et qu'un gestionnaire d'événement {{htmlattrxref("onerror")}} a été paramétré afin d'écouter l'événement {{event("error")}}, le gestionnaire d'événement sera invoqué. Cela peut se produire lorsque :</p> + +<ul> + <li>L'attribut {{htmlattrxref("src", "img")}} est vide ou vaut <code>null</code>.</li> + <li>L'URL indiquée dans l'attribut <code>src</code> est la même URL que celle de la page sur laquelle se trouve l'utilisateur.</li> + <li>L'image indiquée est corrompue et ne peut pas être chargée.</li> + <li>Les métadonnées de l'images sont corrompues et il est impossible de récupérer ses dimensions et aucune dimension n'est indiquée dans les attributs de l'élément <code><img></code>.</li> + <li>Le format de l'image n'est pas pris en charge par l'agent utilisateur.</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Définir_un_texte_alternatif">Définir un texte alternatif</h3> + +<pre class="brush: html"><img src="https://developer.mozilla.org/static/img/favicon144.png" + alt="Le logo de MDN avec une silhouette de tête de dinosaure."> +</pre> + +<p>{{ EmbedLiveSample('Définir_un_texte_alternatif', '100%', '160') }}</p> + +<h3 id="Créer_un_lien_avec_une_image">Créer un lien avec une image</h3> + +<pre class="brush: html"><a href="https://developer.mozilla.org/"> + <img src="https://developer.mozilla.org/static/img/favicon144.png" + alt="Visiter le site MDN"> +</a></pre> + +<p>{{ EmbedLiveSample('Créer_un_lien_avec_une_image', '100%', '160') }}</p> + +<h3 id="Utiliser_les_attributs_srcset_et_sizes">Utiliser les attributs <code>srcset</code> et <code>sizes</code></h3> + +<p>L'attribut <code>src</code> est ignoré lorsque l'agent utilisateur prend en charge <code>srcset</code> et que ce dernier contient des descripteurs avec '<code>w</code>'. Dans cet exemple, lorsque la condition <code>(min-width: 600px)</code> est vérifiée pour le média utilisé, la largeur de l'image sera 200px, sinon, elle occupera <code>50vw</code> (ce qui correspond à 50% de la largeur de la zone d'affichage (<em>viewport</em>)).</p> + +<pre class="brush: html"> <img src="/files/16796/clock-demo-thumb-200px.png" + alt="Clock" + srcset="/files/16796/clock-demo-thumb-200px.png 200w, + /files/16796/clock-demo-thumb-400px.png 400w" + sizes="(min-width: 600px) 200px, 50vw"></pre> + +<p>{{EmbedLiveSample("Utiliser_les_attributs_srcset_et_sizes", "100%", 350)}}</p> + +<div class="blockIndicator note"> +<p><strong>Note :</strong> Pour observer l'effet du redimensionnement, vous devrez consulter <a href="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/img$samples/Using_the_srcset_and_sizes_attributes">l'exemple sur une page séparée</a> afin de pouvoir modifier la taille de la zone.</p> +</div> + +<h2 id="Sécurité_et_vie_privée">Sécurité et vie privée</h2> + +<p>Bien que les éléments <code><img></code> soient la plupart du temps utilisés respectueusement, ils peuvent permettre de récupérer des informations précises, parfois utilisées pour pister les utilisateurs. Voir la page <a href="/fr/docs/Web/Security/Referer_header:_privacy_and_security_concerns">sur l'en-tête referer</a> pour plus d'informations et des façons de résoudre ces problèmes.</p> + +<h2 id="Accessibilité">Accessibilité</h2> + +<h3 id="Rédiger_des_descriptions">Rédiger des descriptions</h3> + +<p>L'attribut <code>alt</code> doit décrire le contenu de l'image de façon claire et concise. L'attribut ne doit pas décrire la présence même de l'image ou le nom du fichier. Si l'attribut <code>alt</code> n'est pas utilisé car l'image ne possède pas d'équivalent textuel, il faudra utiliser d'autres méthodes alternative pour présenter le contenu que l'image doit véhiculer.</p> + +<h4 id="Invalides">Invalides</h4> + +<pre class="brush: html example-bad"><img alt="image" src="manchot.jpg"> +</pre> + +<h4 id="Valides">Valides</h4> + +<pre class="brush: html example-good"><img alt="Un manchot Rockhopper se tenant sur une plage." src="manchot.jpg"> +</pre> + +<p>Lorsque l'attribut <code>alt</code> n'est pas présent, certains lecteurs d'écran peuvent énoncer le nom du fichier. Cela peut être source de confusion car le nom du fichier n'est pas représentatif du contenu de l'image.</p> + +<ul> + <li><em><a href="https://www.w3.org/WAI/tutorials/images/decision-tree/">An alt Decision Tree • Images • WAI Web Accessibility Tutorials</a></em><a href="https://www.w3.org/WAI/tutorials/images/decision-tree/"> (en anglais)</a></li> + <li><em><a href="https://axesslab.com/alt-texts/">Alt-texts: The Ultimate Guide - Axess Lab</a></em><a href="https://axesslab.com/alt-texts/"> (en anglais)</a></li> + <li><em><a href="https://www.deque.com/blog/great-alt-text-introduction/">How to Design Great Alt Text: An Introduction - Deque</a></em><a href="https://www.deque.com/blog/great-alt-text-introduction/"> (en anglais)</a></li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">Comprendre les règles WCAG 1.1</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html"><em>Understanding Success Criterion 1.1.1 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li> +</ul> + +<h3 id="Lattribut_title">L'attribut <code>title</code></h3> + +<p>L'attribut {{HTMLattrxref("title")}} n'a pas vocation à remplacer l'attribut <code>alt</code>. De plus, on évitera d'utiliser la même valeur pour <code>alt</code> et <code>title</code> car certains lecteurs d'écran répèteraient deux fois la description, entraînant une certaine confusion.</p> + +<p>L'attribut <code>title</code> ne doit pas non plus être utilisé comme une source d'information complémentaire à la description fourni par <code>alt</code>. Si l'image nécessite une légende, on utilisera plutôt les éléments {{HTMLElement("figure")}} et {{HTMLElement("figcaption")}}.</p> + +<p>La valeur de l'attribut <code>title</code> est généralement présentée sous la forme d'une bulle d'information lorsqu'on immobilise le curseur au dessus de l'image. Bien que cette méthode puisse être utilisée pour fournir des informations supplémentaires, on ne doit pas partir du principe que ce contenu sera nécessairement vu. Si les informations présentées par <code>title</code> sont importantes, il faudra les présenter d'une autre façon (cf. ci-avant) pour que les utilisateurs puissent réellement en bénéficier.</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/"><em>Utiliser l'attribut HTML <code>title</code> - The Paciello Group</em> (en anglais)</a></li> +</ul> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Catégorie_de_contenu">Catégories de contenu</a></th> + <td><a href="/fr/docs/Web/Guide/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Catégorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Catégorie_de_contenu#Contenu_int%C3%A9gr%C3%A9">contenu intégré</a>, <a href="/fr/docs/Web/Guide/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>. Si l'élément possède un attribut {{htmlattrxref("usemap", "img")}}, c'est également un <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Aucun, cet élément est un élément vide.</td> + </tr> + <tr> + <th scope="row">Omission de balise</th> + <td>Cet élément doit avoir une balise de début et ne doit pas avoir de balise de fin.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Tout élément qui accepte du contenu intégré.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLImageElement")}}</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('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Ajout de l'attribut <code>referrerpolicy</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-img-element', '<img>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-img-element', '<img>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.2', '<img>')}}</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> + +<p>{{Compat("html.elements.img")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML">Les images en HTML</a></li> + <li><a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web">Les images <em>responsive</em></a></li> + <li>{{HTMLElement("picture")}}</li> + <li>{{HTMLElement("object")}}</li> + <li>{{HTMLElement("embed")}}</li> + <li>Les propriétés CSS relatives aux images : + <ul> + <li>{{cssxref("object-fit")}},</li> + <li>{{cssxref("object-position")}},</li> + <li>{{cssxref("image-orientation")}},</li> + <li>{{cssxref("image-rendering")}},</li> + <li>{{cssxref("image-resolution")}}.</li> + </ul> + </li> +</ul> diff --git a/files/fr/web/html/element/index.html b/files/fr/web/html/element/index.html new file mode 100644 index 0000000000..554d337d1d --- /dev/null +++ b/files/fr/web/html/element/index.html @@ -0,0 +1,117 @@ +--- +title: Référence des éléments HTML +slug: Web/HTML/Element +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element +--- +<div>{{HTMLSidebar("Elements")}}</div> + +<p>Cette page énumère tous les éléments HTML, regroupés ici selon leurs fonctions. Sur la barre latérale présentée à gauche, vous pourrez trouver une liste suivant l'ordre alphabétique.</p> + +<h2 id="Éléments_de_base">Éléments de base</h2> + +<p>Les éléments de base constituent la colonne vertébrale de tout document HTML. Ils se trouvent sur toutes les pages web après la déclaration du <code>doctype</code> qui définit la version de (X)HTML utilisée par la page. Les éléments décrivant le contenu d'une page web se trouvent entre la balise ouvrante {{HTMLElement("html")}} et la balise fermante <code></html></code>. L'élément {{HTMLElement("html")}} est parfois appelé l'élément « racine ». Certains documents complexes peuvent avoir des racines spéciales appelées <em><a href="/fr/docs/Web/API/ShadowRoot">shadow-roots</a></em>.</p> + +<div class="note"> +<p><strong>Note :</strong> On pourra également consulter <a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_HTML">l'article introductif du guide HTML</a>.</p> +</div> + +<h3 id="Attributs">Attributs</h3> + +<p>La plupart des éléments peuvent, ou doivent, utiliser des informations supplémentaires afin de définir la façon dont ils fonctionnent. Ces détails sont fournis via des paires <code>nom="valeur"</code> qu'on appelle des <em>attributs</em> et qui sont inclus dans la balise ouvrante de l'élément. Chaque élément possède un ensemble d'attributs autorisés qui peuvent être utilisés (on se référera aux pages des différents éléments pour avoir le détail). En outre, il existe <a href="/fr/docs/Web/HTML/Attributs_universels">des attributs universels</a> qui peuvent être employés sur tous les éléments (dans certains cas, l'attribut n'aura pas d'impact sur l'élément). Les valeurs des attributs doivent être entourées de doubles quotes. On peut également définir <a href="/fr/docs/Web/HTML/Attributs_universels/data-*">des attributs de données</a> qui permettent de modéliser des données propriétaires, hors du cadre des spécifications HTML.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><nomDeBalise attribut1="valeur" ... attributN="valeur">contenu de l'élément</nomDeBalise></pre> + +<h2 id="Racine_principale">Racine principale</h2> + +<p>{{HTMLRefTable("HTML Root Element")}}</p> + +<h2 id="Métadonnées_du_document">Métadonnées du document</h2> + +<p>Les métadonnées contiennent des informations à propos de la page. On y retrouve les informations à propos des styles, des scripts et des données destinées à aider les moteurs de recherche et les navigateur. Les métadonnées relatives à la mise en forme ou aux scripts peuvent être définies à même la page ou sous la forme d'un lien vers un autre fichier.</p> + +<p>{{HTMLRefTable("HTML Document Metadata")}}</p> + +<h2 id="Racine_de_sectionnement">Racine de sectionnement</h2> + +<p>{{HTMLRefTable("Sectioning Root Element")}}</p> + +<h2 id="Sectionnement_du_contenu">Sectionnement du contenu</h2> + +<p>Organiser le contenu d'une page en différentes sections permet d'avoir une structure logique au sein d'un document. Grâce à ces éléments, on peut créer un plan pour la page, ajouter des titres pour identifier les sections et également gérer un en-tête et un bas de page.</p> + +<p>{{HTMLRefTable("HTML Sections")}}</p> + +<h2 id="Contenu_textuel">Contenu textuel</h2> + +<p>Le contenu HTML textuel permet d'organiser des blocs ou des sections de contenu entre la balise ouvrante {{HTMLElement("body")}} et la balise fermante <code></body></code>. Ces éléments sont cruciaux pour l'accessibilité et le référencement car ils permettent d'identifier le sens du contenu.</p> + +<p>{{HTMLRefTable("HTML Grouping Content")}}</p> + +<h2 id="Sémantique_du_texte_en_ligne">Sémantique du texte en ligne</h2> + +<p>Les éléments pour le texte en ligne peuvent être utilisés pour définir la signification, la structure ou la mise en forme d'un terme, d'une ligne ou d'un fragment de texte.</p> + +<p>{{HTMLRefTable("HTML Text-Level Semantics")}}</p> + +<h2 id="Images_et_médias">Images et médias</h2> + +<p>HTML prend en charge différents fichiers multimédias pour les images, les fichiers audio et vidéo.</p> + +<p>{{HTMLRefTable("multimedia")}}</p> + +<h2 id="Contenu_embarqué">Contenu embarqué</h2> + +<p>En plus du contenu multimédia, un document HTML peut embarquer d'autres contenus (bien que les interactions soient plutôt limitées).</p> + +<p>{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p> + +<h2 id="Scripts">Scripts</h2> + +<p>Afin de créer du contenu dynamique et des applications web, des langages de script peuvent être utilisés pour manipuler le document HTML. Certains éléments HTML permettent de gérer les liens entre les scripts et le document.</p> + +<p>{{HTMLRefTable("HTML Scripting")}}</p> + +<h2 id="Gestion_de_l'édition">Gestion de l'édition</h2> + +<p>Ces éléments permettent d'indiquer si des portions du texte ont été modifiées.</p> + +<p>{{HTMLRefTable("HTML Edits")}}</p> + +<h2 id="Contenu_tabulaire">Contenu tabulaire</h2> + +<p>Les éléments listés ici permettent de créer et de gérer des données tabulaires.</p> + +<p>{{HTMLRefTable("HTML tabular data")}}</p> + +<h2 id="Formulaires">Formulaires</h2> + +<p>HTML fournit différents éléments qui permettent de créer des formulaires pouvant être remplis par les utilisateurs du site ou de l'application web.</p> + +<p>{{HTMLRefTable({"include": ["HTML forms"], "exclude":["Deprecated"]})}}</p> + +<h2 id="Éléments_interactifs">Éléments interactifs</h2> + +<p>HTML fournit différents éléments qui permettent de créer des interfaces utilisateur interactives.</p> + +<p>{{HTMLRefTable("HTML interactive elements")}}</p> + +<h2 id="Web_Components"><em>Web Components</em></h2> + +<p>Les composants web (ou « <em>Web Components</em> ») permettent de créer et d'utiliser des éléments personnalisés comme s'ils étaient des éléments HTML classiques. Cela permet également de créer ses propres versions des éléments standards HTML.</p> + +<p>{{HTMLRefTable({"include":["Web Components"],"elements":["shadow"]})}}</p> + +<h2 id="Éléments_obsolètes_ou_dépréciés">Éléments obsolètes ou dépréciés</h2> + +<div class="warning"> +<p><strong>Attention :</strong> Ces éléments sont d'anciens éléments HTML qui sont désormais dépréciés et qui ne devraient plus être utilisés. <strong>Ces éléments ne doivent pas être utilisés dans de nouveaux projets et doivent être remplacés dans les anciens projets dès que possible.</strong> Ces éléments uniquement sont listés ici à des fins d'information.</p> +</div> + +<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p> diff --git a/files/fr/web/html/element/input/button/index.html b/files/fr/web/html/element/input/button/index.html new file mode 100644 index 0000000000..da1c6786e2 --- /dev/null +++ b/files/fr/web/html/element/input/button/index.html @@ -0,0 +1,348 @@ +--- +title: <input type ="button"> +slug: Web/HTML/Element/Input/button +tags: + - Element + - HTML + - Input + - Reference + - Web +translation_of: Web/HTML/Element/input/button +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} de type <strong><code>button</code></strong> sont affichés comme des boutons poussoirs qui peuvent être programmés afin de contrôler des fonctionnalités de la page via un gestionnaire d'évènement (la plupart du temps pour l'évènement {{event("click")}}).</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-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> + +<div class="note"> +<p><strong>Note </strong>: Bien que les éléments <code><input></code> de type <code>"button"</code> représentent toujours des éléments HTML valides, l'élément {{HTMLElement("button")}}, plus récent, est la meilleure méthode pour créer des boutons hors d'un formulaire. Il est aussi possible d'insérer des éléments HTML dans l'étiquette du bouton, ce qui permet notamment d'avoir des images.</p> +</div> + +<h2 id="Valeur">Valeur</h2> + +<p>L'attribut {{htmlattrxref("value", "input")}} d'un t'el élément contient une chaîne de caractères qui est utilisée comme étiquette pour le bouton (autrement dit, comme texte affiché sur le bouton).</p> + +<div id="summary-example3"> +<pre class="brush: html"><input type="button" value="Bouton cliquer"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p> + +<p>Si on n'indique aucune valeur, le bouton sera vide :</p> + +<div id="summary-example1"> +<pre class="brush: html"><input type="button"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p> + +<h2 id="Utiliser_les_boutons_<input>">Utiliser les boutons <code><input></code></h2> + +<p>Les éléments <code><input type="button"></code> ne possèdent pas de comportement particulier (leurs analogues <code><a href="/fr/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> et <code><a href="/fr/docs/Web/HTML/Element/input/reset"><input type="reset"></a></code> permettent respectivement d'envoyer et de réinitialiser des formulaires). Pour qu'un bouton <code><input type="button"></code> puisse avoir un effet, il est nécessaire d'écrire quelques lignes JavaScript.</p> + +<h3 id="Un_bouton_simple">Un bouton simple</h3> + +<p>Dans cet exemple, commençons par créer un bouton simple avec un gestionnaire d'évènement permettant de déclencher une action au clic afin de démarrer cette machine (enfin, pour être plus précis : on échangera la valeur de l'attribut <code>value</code> du bouton et le texte situé dans le paragraphe qui suit) :</p> + +<pre class="brush: html"><form> + <input type="button" value="Démarrer la machine"> +</form> +<p>La machine est arrêtée.</p></pre> + +<pre class="brush: js">var btn = document.querySelector('input'); +var txt = document.querySelector('p'); + +btn.addEventListener('click', updateBtn); + +function updateBtn() { + if (btn.value === 'Démarrer la machine') { + btn.value = 'Arrêter la machine'; + txt.textContent = 'La machine est démarrée !'; + } else { + btn.value = 'Démarrer la machine'; + txt.textContent = 'La machine est arrêtée.'; + } +}</pre> + +<p>Dans ce script, on récupère une référence à l'objet {{domxref("HTMLInputElement")}} qui représente l'élément <code><input></code> du DOM et on stocke cette référence dans la variable <code>btn</code>. {{domxref("EventTarget.addEventListener", "addEventListener()")}} pour ensuite lui rattacher une fonction qui sera utilisée lorsque l'évènement {{event("click")}} se produira sur le bouton.</p> + +<p>{{EmbedLiveSample("Un_bouton_simple", 650, 100)}}</p> + +<h3 id="Ajouter_des_raccourcis_clavier">Ajouter des raccourcis clavier</h3> + +<p>Les raccourcis clavier permettent à un utilisateur de déclencher une action grâce à une touche ou grâce à une combinaison de touches du clavier. Pour ajouter un raccourci clavier déclenchant le bouton, on pourra ajouter l'attribut universel <code><a href="/fr/docs/Web/HTML/Attributs_universels/accesskey">accesskey</a></code> (qu'on peut d'ailleurs utiliser pour les autres éléments {{HTMLElement("input")}}).</p> + +<p>Dans l'exemple qui suit, on définit <kbd>s</kbd> comme raccourci (autrement dit, il faudra appuyer sur la touche <kbd>s</kbd> avec une ou plusieurs touches supplémentaires qui dépendent du navigateur et du système d'exploitation, cf. <code><a href="/fr/docs/Web/HTML/Attributs_universels/accesskey">accesskey</a></code> pour la liste de ces touches).</p> + +<div id="accesskey-example1"> +<pre class="brush: html"><form> + <input type="button" value="Démarrer la machine" accesskey="s"> +</form> +<p>La machine est arrêtée.</p> +</pre> +</div> + +<div class="hidden"> +<pre class="brush: js">var btn = document.querySelector('input'); +var txt = document.querySelector('p'); + +btn.addEventListener('click', updateBtn); + +function updateBtn() { + if (btn.value === 'Démarrer la machine') { + btn.value = 'Arrêter la machine'; + txt.textContent = 'La machine est démarrée !'; + } else { + btn.value = 'Démarrer la machine'; + txt.textContent = 'La machine est arrêtée.'; + } +}</pre> +</div> + +<p>{{EmbedLiveSample("Ajouter_des_raccourcis_clavier", 650, 100)}}</p> + +<div class="note"> +<p><strong>Note </strong>: Un problème de cet exemple est que l'utilisateur ne saura pas quelle touche utiliser comme raccourci. Dans un cas concret, cette information serait affichée ou fournie via un lien simple d'accès qui décrirait les raccourcis disponibles.</p> +</div> + +<h3 id="Désactiver_et_activer_un_bouton">Désactiver et activer un bouton</h3> + +<p>Pour désactiver un bouton, il suffit d'ajouter l'attribut universel {{htmlattrxref("disabled")}} :</p> + +<div id="disable-example1"> +<pre class="brush: html"><input type="button" value="Je suis désactivé" disabled></pre> +</div> + +<p>Il est possible d'activer ou de désactiver des boutons lors de de l'utilisation de la page en modifiant l'attribut <code>disabled</code> de l'élément dans le DOM. Dans l'exemple qui suit, le bouton est initialement activé et si on appuie dessus : il devient désactivé (c'est ce que fait la ligne de code <code>btn.disabled = true</code>). La fonction {{domxref("WindowTimers.setTimeout","setTimeout()")}} est ensuite utilisée afin de réinitialiser le bouton après deux secondes.</p> + +<div class="hidden"> +<h6 id="Hidden_code_1">Hidden code 1</h6> + +<pre class="brush: html"><input type="button" value="Activé"></pre> + +<pre class="brush: js">var btn = document.querySelector('input'); + +btn.addEventListener('click', disableBtn); + +function disableBtn() { + btn.disabled = true; + btn.value = 'Désactivé'; + window.setTimeout(function() { + btn.disabled = false; + btn.value = 'Activé'; + }, 2000); +}</pre> +</div> + +<p>{{EmbedLiveSample("Hidden_code_1", 650, 60)}}</p> + +<p>Si l'attribut <code>disabled</code> n'est pas fourni, il est hérité depuis l'élément parent. De cette façon, on peut activer/désactiver des groupes d'éléments en les plaçant dans un conteneur (par exemple un élément {{HTMLElement("fieldset")}}) et en indiquant <code>disabled</code> sur le conteneur.</p> + +<p>C'est ce qu'illustre l'exemple suivant. Il est semblable à l'exemple précédent mais l'attribut <code>disabled</code> est activé sur l'élément <code><fieldset></code> lorsqu'on appuie sur le premier bouton. Les trois autres boutons sont donc désactivés pendant deux secondes.</p> + +<div class="hidden"> +<h6 id="Hidden_code_2">Hidden code 2</h6> + +<pre class="brush: html"><fieldset> + <legend>Groupe de boutons </legend> + <input type="button" value="Bouton 1"> + <input type="button" value="Bouton 2"> + <input type="button" value="Bouton 3"> +</fieldset></pre> + +<pre class="brush: js">var btn = document.querySelector('input'); +var fieldset = document.querySelector('fieldset'); + +btn.addEventListener('click', disableBtn); + +function disableBtn() { + fieldset.disabled = true; + window.setTimeout(function() { + fieldset.disabled = false; + }, 2000); +}</pre> +</div> + +<p>{{EmbedLiveSample("Hidden_code_2", 650, 60)}}</p> + +<div class="note"> +<p><strong>Note </strong>: À 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 conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée</a>. L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité.</p> +</div> + +<h2 id="Validation">Validation</h2> + +<p>Les éléments <code><input</code><code> type="button"</code><code>></code> n'ont pas de contrainte de validation.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Dans l'exemple qui suit, on montre une application de dessin très simple qui utilise un élément {{htmlelement("canvas")}}, une courte feuille de style CSS (masquée) et du code JavaScript. Les deux contrôles situés en haut permettent de choisir la couleur et la taille de la pointe du crayon. Le bouton quant à lui permet de réinitialiser le canevas.</p> + +<pre class="brush: html"><div class="toolbar"> + <input type="color" aria-label="Sélectionner la couleur du crayon"> + <input type="range" min="2" max="50" value="30" aria-label="Sélectionner la taille de la pointe du crayon"><span class="output">30</span> + <input type="button" value="Réinitialiser le canevas"> +</div> + +<canvas class="myCanvas"> + <p>Votre navigateur ne semble pas prendre en charge cette fonctionnalité.</p> +</canvas></pre> + +<div class="hidden"> +<pre class="brush: css">body { + margin: 0; + overflow: hidden; + background: #ccc; +} + +.toolbar { + width: 150px; + height: 75px; + background: #ccc; + padding: 5px; +} + +input[type="color"], input[type="button"] { + width: 90%; + margin: 0 auto; + display: block; +} + +input[type="range"] { + width: 70%; +} + + span { + position: relative; + bottom: 5px; + }</pre> +</div> + +<pre class="brush: js">var canvas = document.querySelector('.myCanvas'); +var width = canvas.width = window.innerWidth; +var height = canvas.height = window.innerHeight-85; +var ctx = canvas.getContext('2d'); + +ctx.fillStyle = 'rgb(0,0,0)'; +ctx.fillRect(0,0,width,height); + +var colorPicker = document.querySelector('input[type="color"]'); +var sizePicker = document.querySelector('input[type="range"]'); +var output = document.querySelector('.output'); +var clearBtn = document.querySelector('input[type="button"]'); + +// On convertit des degrés en radians +function degToRad(degrees) { + return degrees * Math.PI / 180; +}; + +// On met à jour la valeur pour le sélecteur +// de taille +sizePicker.oninput = function() { + output.textContent = sizePicker.value; +} + +// On enregistre les coordonnées du pointeur de la souris +// emouse pointer coordinates, and whether the button is pressed +var curX; +var curY; +var pressed = false; + +// On met à jour les coordonnées du pointeur +document.onmousemove = function(e) { + curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); + curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); +} + +canvas.onmousedown = function() { + pressed = true; +}; + +canvas.onmouseup = function() { + pressed = false; +} + +clearBtn.onclick = function() { + ctx.fillStyle = 'rgb(0,0,0)'; + ctx.fillRect(0,0,width,height); +} + +function draw() { + if(pressed) { + ctx.fillStyle = colorPicker.value; + ctx.beginPath(); + ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false); + ctx.fill(); + } + + requestAnimationFrame(draw); +} + +draw();</pre> + +<p>{{EmbedLiveSample("Exemples", '100%', 600)}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>A {{domxref("DOMString")}} used as the button's label</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{event("click")}}</td> + </tr> + <tr> + <td><strong>Attributs pris en Supported common attributes</strong></td> + <td>{{htmlattrxref("type", "input")}}, and {{htmlattrxref("value", "input")}}</td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td>Aucune</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#button-state-(type=button)', '<input type="button">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#button-state-(type=button)', '<input type="button">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-button")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'élément {{HTMLElement("input")}}</li> + <li>L'interface DOM {{domxref("HTMLInputElement")}} implémentée par l'élément</li> + <li>L'élément {{HTMLElement("button")}}, plus moderne</li> +</ul> diff --git a/files/fr/web/html/element/input/checkbox/index.html b/files/fr/web/html/element/input/checkbox/index.html new file mode 100644 index 0000000000..7d6b99e4fb --- /dev/null +++ b/files/fr/web/html/element/input/checkbox/index.html @@ -0,0 +1,344 @@ +--- +title: <input type="checkbox"> +slug: Web/HTML/Element/Input/checkbox +tags: + - Element + - HTML + - Input + - Reference + - Web +translation_of: Web/HTML/Element/input/checkbox +--- +<div>{{HTMLRef}}</div> + +<p>Les éléments {{htmlelement("input")}} de type <strong><code>checkbox</code></strong> sont affichés sous la forme de boîtes à cocher qui sont cochées lorsqu'elles sont activées. Elles permettent de sélectionner une ou plusieurs valeurs dans un formulaire.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-checkbox.html", "tabbed-standard")}}</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> + +<div class="note"> +<p><strong>Note </strong>: <a href="/fr/docs/Web/HTML/Element/input/radio">Les boutons radio</a> sont semblables aux cases à cocher mais il existe une différence importante : les boutons radio permettent de sélectionner une seule valeur parmi plusieurs alors que les cases à cocher permettent de cocher/décocher plusieurs valeurs d'un groupe.</p> +</div> + +<h2 id="Valeur">Valeur</h2> + +<p>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de la case à cocher. Cette chaîne de caractères n'est pas affichée côté client mais est envoyée au serveur comme valeur associée à la donnée envoyée avec le nom de la case à cocher. Par exemple :</p> + +<pre class="brush: html notranslate"><form> + <div> + <input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter"> + <label for="subscribeNews">Souhaitez-vous vous abonner à la newsletter ?</label> + </div> + <div> + <button type="submit">S'abonner</button> + </div> +</form></pre> + +<p>{{EmbedLiveSample('Valeur', 600, 60)}}</p> + +<p>Dans cet exemple, on a le nom (l'attribut <code>name</code>) <code>subscribe</code> utilisé pour la case à cocher avec une valeur (l'attribut <code>value</code>) qui est <code>newsletter</code>. Lorsque le formulaire est envoyé, les données seront transmises sous la forme <code>subscribe=newsletter</code>.</p> + +<p>Si l'attribut <code>value</code> n'était pas renseigné, la valeur par défaut sera <code>on</code> (dans l'exemple, les données envoyées au serveur auraient la forme <code>subscribe=on</code>).</p> + +<div class="note"> +<p><strong>Note</strong> : Si la case à cocher n'est pas cochée lorsque le formulaire est envoyé, aucune valeur n'est envoyée au serveur pour indiquer cet état (autrement dit, le client n'envoie pas quelque chose comme <code>value=unchecked</code>) ; la valeur n'est pas transmise au serveur du tout.</p> +</div> + +<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> + +<p>En plus des attributs qui sont partagés par l'ensemble des éléments {{HTMLElement("input")}}, les champs de type <code>"checkbox"</code> prennent aussi en charge les attributs suivants :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribut</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("checked")}}</code></td> + <td>Un attribut booléen. Si celui-ci est présent, la case à cocher sera cochée.</td> + </tr> + <tr> + <td><code>{{anch("value")}}</code></td> + <td>La chaîne de caractères qui sera utilisée pour représenter la valeur lorsque celle-ci sera envoyée au serveur si la case est cochée.</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefchecked">{{htmlattrdef("checked")}}</h3> + +<p>Un attribut booléen qui indique si la case est cochée. Cet attribut n'indique pas si la case est actuellement cochée : si l'état a été modifié, l'attribut dans le document ne reflètera pas cette modification (seul l'attribut IDL <code>checked</code>de l'objet {{domxref("HTMLInputElement")}} est mis à jour).</p> + +<div class="note"> +<p><strong>Note :</strong> À la différence des autres champs, les valeurs des cases à cocher ne sont envoyées au serveur que lorsqu'elles sont cochées. Lorsque c'est le cas, c'est la valeur de l'attribut <code>value</code> qui est envoyé.</p> +</div> + +<p>À la différence des autres navigateurs, Firefox <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">conserve l'état coché placé dynamiquement</a> d'un champ <code><input></code> après les rechargements de la page. L'attribut {{htmlattrxref("autocomplete","input")}} peut être utilisé afin de contrôler cette fonctionnalité.</p> + +<h3 id="htmlattrdefvalue">{{htmlattrdef("value")}}</h3> + +<p>L'attribut <code>value</code> est partagé par l'ensemble des éléments <code><input></code> mais il a un rôle spécifique pour les champs de type <code>checkbox</code> : lorsqu'un formulaire est envoyé, seules les cases à cocher qui sont cochées sont envoyées au serveur et c'est la valeur de l'attribut <code>value</code> qui est envoyée. Si l'attribut <code>value</code> n'est pas renseigné, ce sera la chaîne de caractères <code>"on"</code> qui sera envoyée par défaut.</p> + +<h2 id="Utiliser_les_cases_à_cocher">Utiliser les cases à cocher</h2> + +<h3 id="Gérer_plusieurs_cases_à_cocher">Gérer plusieurs cases à cocher</h3> + +<p>Dans l'exemple précédent, il n'y a qu'une seule case à cocher. Dans un scénario réaliste, on aura vraisemblablement plusieurs cases à cocher. Si celles-ci n'ont pas de rapport entre elles, il est possible de les gérer de façon séparée avec des cases à cocher « unitaires » comme illustré précédemment. Toutefois, si les valeurs sont liées entre elles, il est alors nécessaire d'indiquer ce lien.</p> + +<p>Dans l'exemple qui suit, on affiche différentes cases à cocher pour représenter les intérets d'un utilisateur (voir l'exemple complet dans la section {{anch("Exemples")}}).</p> + +<pre class="brush: html notranslate"><fieldset> + <legend>Veuillez sélectionner vos intérêts :</legend> + <div> + <input type="checkbox" id="coding" name="interest" value="coding"> + <label for="coding">Développement</label> + </div> + <div> + <input type="checkbox" id="music" name="interest" value="music"> + <label for="music">Musique</label> + </div> +</fieldset></pre> + +<p>{{EmbedLiveSample('Gérer_plusieurs_cases_à_cocher', 600, 100)}}</p> + +<p>Dans cet exemple on voit que chaque case à cocher utilise le même attribut <code>name</code>. Si les deux cases sont cochées lorsque le formulaire est envoyé, la chaîne des paires nom/valeur qui sera envoyée au serveur sera : <code>interest=coding&interest=music</code>. Lorsque les données parviennent au serveur, on peut ainsi récupérer un tableau des valeurs sélctionnées (voir <a class="question-hyperlink" href="https://stackoverflow.com/questions/18745456/handle-multiple-checkboxes-with-a-single-serverside-variable">Gérer plusieurs cases à cocher avec une seule variable côté serveur</a> par exemple).</p> + +<h3 id="Cocher_certaines_cases_par_défaut">Cocher certaines cases par défaut</h3> + +<p>Afin qu'une case à cocher soit sélectionnée par défaut, il suffit de placer l'attribut booléen <code>checked</code>. Voir l'exemple qui suit :</p> + +<pre class="brush: html notranslate"><fieldset> + <legend>Veuillez sélectionner vos intérêts</legend> + <div> + <input type="checkbox" id="coding" name="interest" value="coding" checked> + <label for="coding">Développement</label> + </div> + <div> + <input type="checkbox" id="music" name="interest" value="music"> + <label for="music">Musique</label> + </div> +</fieldset></pre> + +<p>{{EmbedLiveSample('Cocher_certaines_cases_par_défaut', 600, 100)}}</p> + +<h3 id="Fournir_une_zone_cliquable_plus_grande">Fournir une zone cliquable plus grande</h3> + +<p>Dans les exemples précédents, vous avez peut-être remarqué qu'il était possible de cocher une case en cliquant sur l'élément {{htmlelement("label")}} associé. Il s'agit d'une fonctionnalité particulièrement utile des étiquettes de formulaire HTML : il y a ainsi plus d'espace qui peut être utilisé pour sélectionner les options voulues (notamment sur les petits écrans).</p> + +<p>En plus des raisons liées à l'accessibilité, il s'agit d'une bonne raison pour indiquer correctement des éléments <code><label></code> dans vos formulaires.</p> + +<h3 id="Gérer_un_état_indéterminé">Gérer un état indéterminé</h3> + +<p>Il existe un état indéterminé pour les cases à cocher qui indique que la case n'est ni cochée, ni décochée mais indéterminéee. Cet état peut être obtenu via la propriété <code>indeterminate</code> d'un élément {{domxref("HTMLInputElement")}} en JavaScript (il est impossible d'obtenir cet état en utilisant uniquement du HTML) :</p> + +<pre class="brush: js notranslate">inputInstance.indeterminate = true;</pre> + +<p>Dans la plupart des navigateurs, une case à cocher dans un état indéterminé est représentée avec une ligne horizontale en travers de la case.</p> + +<p>Voici un exemple d'utilisation de cet état (tiré de <a href="https://css-tricks.com/indeterminate-checkboxes/">CSS Tricks</a>) où on tient le compte des ingrédients qu'on possède pour une recette. Lorsqu'on coche ou décoche une case d'un ingrédient, une fonction JavaScript vérifie le nombre d'ingrédients possédés (c'est-à-dire cochés) :</p> + +<ul> + <li>Si aucun n'est coché, la case associée à la recette est décochée.</li> + <li>Si un ou deux éléments sont cochés, la case associée à la recette est dans un état indéterminé.</li> + <li>Si les trois ingrédients sont cochés, la case associée à la recette est cochée.</li> +</ul> + +<p>Dans cet exemple, l'état <code>indeterminate</code> est utilisé afin d'indiquer qu'on possède certains ingrédients mais pas suffisamment pour une recette.</p> + +<pre class="brush: js notranslate" id="line1"><span> var overall = document.querySelector('input[id="EnchTbl"]'); + var ingredients = document.querySelectorAll('ul input'); + + overall.addEventListener('click', function(e) { + e.preventDefault(); + }); + + for(var i = 0; i </span><span>< </span><span>ingredients.length; i++) { + ingredients[i].addEventListener('click', updateDisplay); + } + + function updateDisplay() { + var checkedCount = 1; + for(var i = 0; i </span><span>< </span><span>ingredients.length; i++) { + if(ingredients[i].checked) { + checkedCount++; + } + } + if(checkedCount === 0) { + overall.checked = false; + overall.indeterminate = false; + } else if(checkedCount </span><span>===</span><span> ingredients.length) { + overall.checked = true; + overall.indeterminate = false; + } else { + overall.checked = false; + overall.indeterminate = true; + } + }</span></pre> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/indeterminate-example/index.html", '100%', 200)}}</p> + +<div class="note"> +<p><strong>Note</strong> : Si vous envoyez un formulaire avec une case à cocher dans un état indéterminé, le résultat obtenu est le même que si la case avait été décochée : aucune donnée n'est envoyée au serveur.</p> +</div> + +<h2 id="Validation">Validation</h2> + +<p>Il n'y a pas de mécanisme de validation natif pour la valeur d'une case à cocher.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Dans l'exemple suivant, on développe l'exemple vu précédemment avec les groupes de cases à cocher : il y a cette fois plus d'options et un champ texte libre qui permet de saisir une autre valeur. Pour cela on utilise un bloc de code JavaScript et quelques règles CSS pour la mise en forme.</p> + +<pre class="brush: html notranslate"><form> + <fieldset> + <legend>Veuillez sélectionner vos intérêts</legend> + <div> + <input type="checkbox" id="coding" name="interest" value="coding"> + <label for="coding">Développement</label> + </div> + <div> + <input type="checkbox" id="music" name="interest" value="music"> + <label for="music">Musique</label> + </div> + <div> + <input type="checkbox" id="art" name="interest" value="art"> + <label for="art">Art</label> + </div> + <div> + <input type="checkbox" id="sports" name="interest" value="sports"> + <label for="sports">Sports</label> + </div> + <div> + <input type="checkbox" id="cooking" name="interest" value="cooking"> + <label for="cooking">Cuisine</label> + </div> + <div> + <input type="checkbox" id="other" name="interest" value="other"> + <label for="other">Autre</label> + <input type="text" id="otherValue" name="other"> + </div> + <div> + <button type="submit">Envoyer le formulaire</button> + </div> + </fieldset> +</form></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +form { + width: 600px; + margin: 0 auto; +} + +div { + margin-bottom: 10px; +} + +fieldset { + background: cyan; + border: 5px solid blue; +} + +legend { + padding: 10px; + background: blue; + color: cyan; +} + +#otherValue +{ + display: none; +} + +#other:checked ~ #otherValue +{ + display: inline-block; +} +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">var otherCheckbox = document.querySelector('input[value="other"]'); +var otherText = document.querySelector('input[id="otherValue"]'); +otherText.style.visibility = 'hidden'; + +otherCheckbox.onchange = function() { + if(otherCheckbox.checked) { + otherText.style.visibility = 'visible'; + otherText.value = ''; + } else { + otherText.style.visibility = 'hidden'; + } +};</pre> + +<p>{{EmbedLiveSample('Exemples', '100%', 300)}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de la case à cocher.</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{event("change")}} et {{event("input")}}</td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td><code>checked</code></td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>checked</code> et <code>value</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}</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#checkbox-state-(type=checkbox)', '<input type="checkbox">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#checkbox-state-(type=checkbox)', '<input type="checkbox">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-checkbox")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'élément {{HTMLElement("input")}} et l'interface DOM qu'il implémente : {{domxref("HTMLInputElement")}}.</li> + <li>{{cssxref(":checked")}}</li> + <li>{{cssxref("indeterminate")}}</li> +</ul> diff --git a/files/fr/web/html/element/input/color/index.html b/files/fr/web/html/element/input/color/index.html new file mode 100644 index 0000000000..5db15d6272 --- /dev/null +++ b/files/fr/web/html/element/input/color/index.html @@ -0,0 +1,215 @@ +--- +title: <input type="color"> +slug: Web/HTML/Element/Input/color +tags: + - Element + - HTML + - Input + - Reference + - Web +translation_of: Web/HTML/Element/input/color +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} de type <code><strong>"color"</strong></code> permettent de sélectionner une couleur via une interface (un sélecteur de couleur) ou en saisissant le code hexadécimal de la couleur au format <code>"#rrggbb"</code>. Ce format de valeur peut être utilisé en CSS.</span></p> + +<p>L'apparence du contrôle de sélection des couleurs peut grandement varier d'un navigateur à un autre et d'un système d'exploitation à un autre. Pour certains navigateurs, seul un champ textuel sera affiché afin de saisir le code de la couleur (avec des mécanismes de validation vérifiant le format), pour d'autres, ce sera le sélecteur de couleur du système d'exploitation qui sera utilisé et pour d'autres encore, ce sera un sélecteur de couleur spécifique.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-color.html", "tabbed-standard")}}</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> + +<h2 id="Valeur">Valeur</h2> + +<p>L'attribut {{htmlattrxref("value", "input")}} d'un élément <code><input type="color"></code> est une chaîne de caractères sur 7 caractères qui correspond au code de la couleur en représentation hexadécimale RGB. Autrement dit, le premier caractère est un croisillon (#) , les deux suivants indiquent la composante rouge (R) de la couleur, les deux suivants indiquent la couleur verte (G pour <em>Green</em> en anglais) et les deux suivants indiquent la composante bleue (B) de la couleur. La valeur respecte nécessairement ce format et n'est jamais vide.</p> + +<div class="note"> +<p><strong>Note :</strong> Si la valeur saisie n'est pas un code hexadécimal RGB d'une couleur opaque valide, c'est la valeur <code>"#000000"</code> (c'est-à-dire la couleur noire) qui sera utilisée. Il est notamment impossible d'utiliser les noms de couleurs CSS ou des fonctions CSS afin de définir cette valeur. Il faut garder à l'esprit que HTML et CSS sont deux langages séparés, définis par des spécifications distinctes. De plus, les couleurs avec un canal alpha ne sont pas prises en charges, utiliser un code avec une notation sur 9 caractères entraînera également l'utilisation de <code>"#000000"</code>.</p> +</div> + +<h2 id="Utiliser_les_contrôles_de_saisie_des_couleurs">Utiliser les contrôles de saisie des couleurs</h2> + +<p>Les éléments <code><input type="color"></code> sont simples à utiliser (notamment en raison du faible nombre d'attributs qu'ils gèrent).</p> + +<h3 id="Fournir_une_couleur_par_défaut">Fournir une couleur par défaut</h3> + +<p>Il est possible de créer un sélecteur de couleur qui emploie une valeur par défaut :</p> + +<pre class="brush: html notranslate"><input type="color" value="#ff0000"></pre> + +<p>{{EmbedLiveSample("Fournir_une_couleur_par_défaut", 700, 30)}}</p> + +<p>Si aucune valeur n'est indiquée, c'est <code>"#000000"</code> qui sera utilisée par défaut (la couleur noire). Comme indiqué dans la note ci-avant, la valeur de cet attribut doit être de la forme <code>"#rrggbb"</code>. Pour les couleurs dans un autre format (couleurs nommées CSS ou couleurs calculées à l'aide des fonctions <code>rgb()</code> ou <code>rgba()</code>), il faudra les convertir au format hexadécimal avant de les utiliser pour <code>value</code>.</p> + +<h3 id="Détecter_le_changement_de_couleur">Détecter le changement de couleur</h3> + +<p>Comme pour les différents éléments {{HTMLElement("input")}}, deux évènements peuvent être utilisés afin de détecter une modification de la couleur : {{event("input")}} et {{event("change")}}. <code>input</code> est déclenché sur l'élément <code><input></code> à chaque fois que la couleur change. L'évènement <code>change</code> est déclenché lorsque l'utilisateur ferme le sélecteur de couleur. Dans tous les cas, il est possible de déterminer la nouvelle valeur de l'élément grâce à {{domxref("HTMLInputElement.value", "value")}}.</p> + +<pre class="brush: js notranslate">colorPicker.addEventListener("input", updateFirst, false); +colorPicker.addEventListener("change", watchColorPicker, false); + +function watchColorPicker(event) { + document.querySelectorAll("p").forEach(function(p) { + p.style.color = event.target.value; + }); +} +</pre> + +<h3 id="Sélectionner_la_valeur">Sélectionner la valeur</h3> + +<p>Si l'implémentation du navigateur n'affiche pas de sélecteur de couleur mais un champ texte, il est possible de sélectionner la valeur du texte avec la méthode {{domxref("HTMLInputElement.select", "select()")}}. Si le navigateur affiche un sélecteur de couleur, <code>select()</code> ne fera rien.</p> + +<pre class="brush: js notranslate">colorWell.select();</pre> + +<h3 id="Différences_daspect">Différences d'aspect</h3> + +<p>Comme mentionné précédemment, lorsqu'un navigateur ne prend pas en charge l'affichage d'un sélecteur de couleur, c'est un champ texte qui sera affiché. Par exemple, sous Safari 10.1, on peut voir le résultat suivant :</p> + +<p><img alt="Screenshot of the example taken in Safari." src="https://mdn.mozillademos.org/files/14899/input-color-safari.png" style="border-style: solid; border-width: 1px; height: 160px; width: 598px;"></p> + +<p>Avec Firefox Firefox 55, on aura cet affichage :</p> + +<p><img alt="Screenshot of the example taken in Firefox 55 for macOS" src="https://mdn.mozillademos.org/files/14901/input-color-firefox.png" style="border-style: solid; border-width: 1px; height: 160px; width: 598px;"></p> + +<p>Pour ce deuxième cas, en cliquant sur le carré coloré, cela ouvrira le sélecteur de couleur natif du système d'exploitation :</p> + +<p><img alt="Screenshot of the element with the color picker open in Firefox Mac." src="https://mdn.mozillademos.org/files/14903/input-with-picker-firefox-mac.png" style="border-style: solid; border-width: 1px; height: 405px; width: 682px;"></p> + +<h2 id="Validation">Validation</h2> + +<p>La valeur d'un tel champ est considérée invalide si l'interface utilisateur ne parvient pas à convertir la saisie de l'utilisateur en une notation hexadécimale sur sept caractères et en minuscules. Si c'est le cas, la pseudo-classe CSS {{cssxref(":invalid")}} sera appliquée à l'élément.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Créons un exemple qui utilise un sélecteur de couleur et les évènements {{event("change")}} et {{event("input")}} afin de choisir une nouvelle couleur et de l'appliquer sur chaque élément {{HTMLElement("p")}} du document.</p> + +<h3 id="HTML">HTML</h3> + +<p>Le fragment de code HTML utilisé est relativement simple. On utilise quelques paragraphes descriptifs ainsi qu'un élément {{HTMLElement("input")}} de type <code>"color"</code> dont l'identifiant est <code>"colorWell"</code> (c'est la valeur de cette couleur qu'on utilisera pour changer la couleur du texte des paragraphes).</p> + +<pre class="brush: html notranslate"><p>Un exemple qui illustre l'utilisation de <code>&lt;input type="color"&gt;</code>.</p> + +<label for="colorWell">Couleur :</label> +<input type="color" value="#ff0000" id="colorWell"> + +<p>Vous pouvez ici voir que la couleur du premier paragraphe changer + lorsqu'on ajuste la valeur dans le sélecteur. Pour cela, on + utilise l'évènement <code>input</code>. Lorsqu'on ferme le + sélecteur, l'évènement <code>change</code> est déclenché et on + applique la modification est appliquée à l'ensemble des paragraphes.</p></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<p>Tout d'abord, on établit certains variables : une pour la couleur du sélecteur et une autre couleur pour la couleur par défaut. On ajoute un gestionnaire {{event("load")}} afin de lancer les actions de démarrage lorsque la page est chargée.</p> + +<pre class="brush: js notranslate">var colorWell +var defaultColor = "#0000ff"; + +window.addEventListener("load", startup, false); +</pre> + +<h4 id="Initialisation">Initialisation</h4> + +<p>Lorsque la page est chargée, l'évènement <code>"load"</code> est déclenché et la fonction <code>startup()</code> est donc appelée :</p> + +<pre class="brush: js notranslate">function startup() { + colorWell = document.querySelector("#colorWell"); + colorWell.value = defaultColor; + colorWell.addEventListener("input", updateFirst, false); + colorWell.addEventListener("change", updateAll, false); + colorWell.select(); +} +</pre> + +<p>Dans cette fonction, on utilise la variable <code>colorWell</code> déclarée plus haut et on remplit sa valeur avec la valeur par défaut (la valeur de <code>defaultColor</code>). Ensuite, on indique les gestionnaires d'évènements : {{event("input")}} appellera <code>updateFirst()</code> et {{event("change")}} appellera <code>updateAll()</code> qui seront détaillés ensuite.</p> + +<p>Enfin, on appelle {{domxref("HTMLInputElement.select", "select()")}} afin de sélectionner le texte du champ si le contrôle est un champ texte.</p> + +<h4 id="Réagir_suite_aux_modifications_de_couleurs">Réagir suite aux modifications de couleurs</h4> + +<p>On dispose de deux fonctions qui gèrent les modifications de couleurs. La fonction <code>updateFirst()</code> permet de répondre à l'évènement <code>input</code> et modifie la couleur du premier paragraphe dans le document en utilisant la nouvelle valeur saisie. Étant donné que les évènements <code>input</code> ont lieu à chaque fois qu'un ajustement est fait, cette fonction sera appelée sans cesse lorsque le sélecteur de couleur est utilisé.</p> + +<pre class="brush: js notranslate">function updateFirst(event) { + var p = document.querySelector("p"); + + if (p) { + p.style.color = event.target.value; + } +}</pre> + +<p>Lorsque le sélecteur est fermé, cela signifie que la valeur ne sera plus modifié avant une prochaine ouverture du sélecteur. Un évènement <code>change</code> est alors envoyé et cela déclenche alors l'appel de la fonction <code>updateAll()</code> :</p> + +<pre class="brush: js notranslate">function updateAll(event) { + document.querySelectorAll("p").forEach(function(p) { + p.style.color = event.target.value; + }); +} +</pre> + +<p>Cela permet de modifier la couleur de chaque bloc {{HTMLElement("p")}} du document afin que la couleur (cf. {{cssxref("color")}}) soit celle sélectionnée dans le contrôle. Pour récupérer cette valeur, on utilise l'objet {{domxref("Event.target", "event.target")}}.</p> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples", 700, 200)}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères sur sept caractères qui indique la couleur (cf. {{cssxref("<color>")}}) en notation hexadécimale (en minuscule).</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{event("change")}} et {{event("input")}}.</td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}} et {{htmlattrxref("list", "input")}}.</td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>list</code> et <code>value</code>.</td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}</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', '#color-state-(type=color)')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-color")}}</p> diff --git a/files/fr/web/html/element/input/date/index.html b/files/fr/web/html/element/input/date/index.html new file mode 100644 index 0000000000..29f8409818 --- /dev/null +++ b/files/fr/web/html/element/input/date/index.html @@ -0,0 +1,516 @@ +--- +title: <input type="date"> +slug: Web/HTML/Element/Input/date +tags: + - Element + - HTML + - Input + - Reference + - Web +translation_of: Web/HTML/Element/input/date +--- +<div>{{HTMLRef}}</div> + +<p>Les éléments {{htmlelement("input")}} dont l'attribut <code>type</code> vaut <strong><code>date</code></strong> permettent de créer des champs permettant de saisir des dates (composées d'une année, d'un mois et d'un jour mais pas d'une heure , cf. <code><a href="/fr/docs/Web/HTML/Element/input/time">time</a></code>).</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-date.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> + +<p>L'apparence du contrôle affiché dépend du navigateur utilisé et la prise en charge de cette fonctionnalité est hétérogène (cf. la section {{anch("Compatibilité des navigateurs")}} pour plus de détails). Pour les navigateurs qui ne prennent pas en charge ce type d'élément <code><input></code>, c'est un simple <code><a href="/fr/docs/Web/HTML/Element/input/text"><input type="text"></a></code> qui sera affiché.</p> + +<p>Si votre navigateur actuel prend en charge cette fonctionnalité, voici ce à quoi ressemble le contrôle sous Chrome/Opera :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14909/date-picker-chrome.png" style="display: block; height: 220px; margin: 0px auto; width: 275px;"></p> + +<p>et pour Edge :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14911/date-picker-edge.png" style="display: block; margin: 0 auto;"></p> + +<p>Le contrôle de sélection de date pour Firefox ressemble à :</p> + +<p><img alt="Interface utilisateur du sélecteur de date dans Firefox" src="https://mdn.mozillademos.org/files/15644/firefox_datepicker.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Valeur">Valeur</h2> + +<p>Une chaîne de caractères qui représente la valeur de la date saisie dans le contrôle. Le format à respecter est décrit dans dans <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates">cette section de l'article sur les formats</a>. Il est possible de fournir une valeur par défaut en renseignant l'attribut {{htmlattrxref("value", "input")}} :</p> + +<pre class="brush: html"><input id="date" type="date" value="2017-06-01"></pre> + +<p>{{EmbedLiveSample('Valeur', 600, 40) }}</p> + +<p>On notera que le format d'affichage est différent de la valeur réelle de l'attribut <code>value</code> — le format de la date affichée sera déterminé en fonction de la langue utilisée par le navigateur alors que la valeur de l'attribut <code>value</code> aura toujours la forme <code>yyyy-mm-dd</code> (c'est-à-dire les quatres chiffres de l'année, suivi d'un tiret, suivi des deux chiffres pour le mois, suivi d'un tiret puis des deux chiffres pour le jour).</p> + +<p>On peut également récupérer la valeur de la date en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}} :</p> + +<pre class="brush: js">var dateControl = document.querySelector('input[type="date"]'); +dateControl.value = '2017-06-01';</pre> + +<h2 id="Utiliser_les_contrôles_de_saisie_de_date">Utiliser les contrôles de saisie de date</h2> + +<p>Les contrôles de date semblent pratiques : ils fournissent une interface utilisateur simple afin de sélectionner des dates et normalisent la donnée saisie dans un format unique pour l'envoyer au serveur, quelle que soit la locale de l'utilisateur. Malheureusement, il y a certains problèmes de prise en charge par les navigateurs pour <code><input type="date"></code>.</p> + +<p>Nous verrons ici différents cas d'utilisation de <code><input type="date"></code>, simples et complexes. Puis nous verrons comment parer aux problèmes de support des navigateurs.</p> + +<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> + +<p>En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de type <code>"date"</code> gèrent les attributs suivants :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribut</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("max")}}</code></td> + <td>La date la plus avancée qui peut être saisie.</td> + </tr> + <tr> + <td><code>{{anch("min")}}</code></td> + <td>La date la plus reculée qui peut être saisie.</td> + </tr> + <tr> + <td><code>{{anch("step")}}</code></td> + <td>Le pas à utiliser pour l'incrément quand on utilise les boutons d'augmentation/diminution. Cet incrément est également utilisé pour la validation.</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3> + +<p>La date la plus avancée qui peut être saisie dans le contrôle. Si la valeur de {{htmlattrxref("value", "input")}} est supérieure à la date indiquée par cet attribut, l'élément ne respectera pas <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">les contraintes de validation</a>. Si la valeur de l'attribut <code>max</code> n'est pas une chaîne de caractères qui suit le format <code>yyyy-MM-dd</code>, il n'y aura pas de valeur maximale.</p> + +<p>La valeur de cet attribut doit être une date supérieure ou égale à celle indiquée par l'attribut <code>min</code>.</p> + +<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3> + +<p>La date minimale qui peut être saisie dans le contrôle. Toute date saisie antérieure à celle-ci ne respectera pas <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">les contraintes de validation</a>. Si la valeur de l'attribut <code>min</code> n'est pas une chaîne de caractères qui suit le format <code>yyyy-MM-dd</code>, il n'y aura pas de valeur minimale.</p> + +<p>La valeur de cet attribut doit être une date antérieure ou égale à celle indiquée par l'attribut <code>max</code>.</p> + +<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}</p> + +<p>Pour les champs <code>date</code>, la valeur de <code>step</code> est exprimée en jours avec un facteur de multiplication de 86 400 000 (soit le nombre de millisecondes en une journée). La valeur par défaut de <code>step</code> est 1.</p> + +<div class="blockIndicator note"> +<p><strong>Note :</strong> Utiliser <code>any</code> comme valeur pour <code>step</code> produira le même effet que la valeur <code>1</code> pour les champs <code>date</code>.</p> +</div> + +<h2 id="Utilisation_des_contrôles_de_saisie_des_dates">Utilisation des contrôles de saisie des dates</h2> + +<p>Les champs date paraissent pratiques de prime abord : ils fournissent une interface utilisateur simple qui permet de sélectionner des dates et normalisent le format des données envoyées au serveur quelle que soit la locale de l'utilisateur. Toutefois, il existe certains problèmes avec <code><input type="date"></code> en raison de la prise en charge limitée des navigateurs.</p> + +<p>Dans les exemples qui suivent, nous verrons comment utiliser <code><input type="date"></code> dans des cas simples et complexes en ajoutant des conseils quant à la prise en charge des navigateurs (en espérant que celle-ci s'améliore au fur et à mesure).</p> + +<h3 id="Utilisation_simple">Utilisation simple</h3> + +<p>Dans son expression la plus simple <code><input type="date"></code> s'utilise avec un élément <code><input></code> et un élément {{htmlelement("label")}} :</p> + +<pre class="brush: html"><form> + <div> + <label for="bday">Veuillez saisir votre date de naissance :</label> + <input type="date" id="bday" name="bday"> + </div> +</form></pre> + +<p>{{EmbedLiveSample('Utilisation_simple', 600, 40)}}</p> + +<h3 id="Paramétrer_une_date_maximale_et_une_date_minimale">Paramétrer une date maximale et une date minimale</h3> + +<p>On peut utiliser les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} afin de restreindre les dates qui peuvent être saisies par l'utilisateur. Dans l'exemple suivant, on indique un date minimum au premier avril 2017 (<code>2017-04-01</code>) et une date maximale au 30 avril 2017 (<code>2017-04-30</code>) :</p> + +<pre class="brush: html"><form> + <div> + <label for="party">Veuillez choisir la meilleure date pour la soirée :</label> + <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-30"> + </div> +</form></pre> + +<p>{{EmbedLiveSample('Paramétrer_une_date_maximale_et_une_date_minimale', 600, 40)}}</p> + +<p>On ne peut donc ici que sélectionner une date en avril 2017. Seule la partie du contrôle consacrée aux jours sera éditable et on ne pourra pas sélectionner d'autres mois ou années..</p> + +<div class="note"> +<p><strong>Note </strong>: On devrait également pouvoir utiliser l'attribut {{htmlattrxref("step", "input")}} afin de faire varier le nombre de jours pour l'incrément de la date (par exemple afin de ne pouvoir sélectionner que les samedis). Cependant, cette fonctionnalité ne semble être présente dans aucune implémentation au moment où nous écrivons ces lignes.</p> +</div> + +<h3 id="Contrôler_la_taille_du_champ_de_saisie">Contrôler la taille du champ de saisie</h3> + +<p><code><input type="date"></code> ne permet pas d'utiliser des attributs de dimensionnement tels que {{htmlattrxref("size", "input")}}. Il est nécessaire d'utiliser <a href="/fr/docs/Web/CSS">CSS</a> pour adresser ces aspects de mise en forme.</p> + +<h2 id="Validation">Validation</h2> + +<p>Par défaut <code><input type="date"></code> n'applique pas de validation particulière aux valeurs saisies. Les interfaces utilisateur ne permettent généralement pas de saisir une valeur qui n'est pas une date ou qui est une date invalide (par exemple un 32 avril 2017).</p> + +<p>Si on utilise les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} afin de restreindre les dates possibles, les navigateurs qui prennent en charge cette fonctionnalité afficheront une erreur si la valeur saisie est en dehors de cet intervalle.</p> + +<p>De plus, si l'attribut {{htmlattrxref("required", "input")}} est actif, il sera obligatoire de saisir ce champ. Une erreur sera affichée si on essaie d'envoyer le formulaire avec un tel champ vide.</p> + +<p>Prenons un exemple où la date est contrainte entre deux dates et que le champ est obligatoire :</p> + +<pre class="brush: html"><form> + <div> + <label for="party">Sélectionner la meilleure date (entre le premier et le 20 avril) :</label> + <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-20" required> + <span class="validity"></span> + </div> + <div> + <input type="submit"> + </div> +</form></pre> + +<p>Si on essaie de soumettre le formulaire avec une date incomplète (ou en dehors de l'intervalle indiqué), le message affichera une erreur. Vous pouvez essayer ici :</p> + +<p>{{EmbedLiveSample('Validation', 600, 100)}}</p> + +<p>Voici une capture d'écran illustrant ce qui se produit dans un navigateur qui implémente cette fonctionnalité :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14913/date-picker-chrome-error-message.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>Voici la feuille de style utilisée pour l'exemple. On utilise les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme un indicateur selon que la valeur est valide ou non. On place cet indicateur dans un élément {{htmlelement("span")}} séparé car pour Chrome, le contenu généré dans les pseudo-classes est intégré dans le contrôle du formulaire et ne peut être mis en forme ou affiché correctement.</p> + +<pre class="brush: css">div { + margin-bottom: 10px; + display: flex; + align-items: center; +} + +label { + display: inline-block; + width: 300px; +} + +input:invalid+span:after { + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + content: '✓'; + padding-left: 5px; +}</pre> + +<div class="warning"> +<p><strong>Attention !</strong> La validation des valeurs du formulaire HTML par le client ne remplace pas la validation côté serveur afin de vérifier que le format est bien celui attendu. Il est tout à fait possible de modifier le code HTML afin d'outrepasser ces mécanismes de validation ou d'envoyer directement des données au serveur. Il est donc nécessaire de valider les données lorsque celles-ci parviennent au serveur afin d'éviter les effets indésirables entraînés par l'injection de données mal formatées ou malveillantes.</p> +</div> + +<h2 id="Gérer_la_prise_en_charge_des_navigateurs">Gérer la prise en charge des navigateurs</h2> + +<p>Comme indiqué ci-avant, le principal problème qu'on rencontre avec ces contrôles est l'hétérogénéité de la prise en charge par les différents navigateurs. Par exemple, le sélecteur de date implémenté dans Firefox pour Android ressemblera à :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14915/date-picker-fxa.png" style="display: block; margin: 0 auto;"></p> + +<p>Les navigateurs qui ne prennent pas en charge ces contrôles utiliseront à la place des champs texte. Toutefois, cette solution de contournement entraîne deux problèmes : le premier concerne l'homogénéité de l'interface utilisateur (le contrôle affiché ne sera pas le même) et le second concerne la gestion des données.</p> + +<p>C'est sur ce second point qu'il y a le plus de risques. Comme nous l'avons mentionné avant, un champ date est toujours normalisé sous la forme <code>yyyy-mm-dd</code> (les chiffres de l'année, un tiret, les chiffres du mois, un tiret, les chiffres du jour). Toutefois, pour un champ texte, les navigateurs ne reconnaissant pas le format dans lequel la date doit être écrite. Or, selon les langues, régions, pays, les personnes écrivent les dates de différentes façons. On pourrait ainsi avoir des dates écrites comme :</p> + +<ul> + <li><code>ddmmyyyy</code></li> + <li><code>dd/mm/yyyy</code></li> + <li><code>mm/dd/yyyy</code></li> + <li><code>dd-mm-yyyy</code></li> + <li><code>mm-dd-yyyy</code></li> +</ul> + +<p>Une méthode permettant de parer à cette éventualité est d'utiliser l'attribut {{htmlattrxref("pattern", "input")}}. Bien que celui-ci ne soit pas utilisé pour les contrôles de saisie des dates, il peut être utilisé pour le champ texte. Voici un exemple que vous pouvez consulter dans un navigateur qui ne prend pas en charge cette fonctionnalité :</p> + +<pre class="brush: html"><form> + <div> + <label for="bday">Veuillez saisir votre date de naissance :</label> + <input type="date" id="bday" name="bday" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"> + <span class="validity"></span> + </div> + <div> + <input type="submit"> + </div> +</form></pre> + +<p>{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}}</p> + +<p>Si vous tentez d'envoyer ce formulaire, vous pourrez voir que le navigateur affiche un message d'erreur et met en évidence la valeur invalide si la valeur saisie ne correspond pas au motif <code>nnnn-nn-nn</code> (avec <code>n</code> un chiffre entre 0 et 9). Bien entendu, cela n'empêche pas de saisir des dates invalides ou mal formatées (par exemple avec le motif <code>yyyy-dd-mm</code> alors qu'on souhaiterait avoir <code>yyyy-mm-dd</code>). Il reste donc un problème.</p> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; +} + +input:invalid + span { + position: relative; +} + +input:invalid + span:after { + content: '✖'; + position: absolute; + right: -18px; +} + +input:valid + span { + position: relative; +} + +input:valid + span:after { + content: '✓'; + position: absolute; + right: -18px; +}</pre> +</div> + +<p>C'est pour cela que la meilleure solution consiste à avoir trois champs de saisie distincts à destination de l'utilisateur : un pour saisir les jours, le deuxième pour les mois et un troisième pour l'année (chacun avec un élément ({{htmlelement("select")}}). On peut également opter pour l'utilisation d'un bibliothèque JavaScript telle que <a href="https://jqueryui.com/datepicker/">le sélecteur de date jQuery (jQuery date picker)</a>.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Dans l'exemple qui suit, on crée deux éléments d'interface utilisateur afin de choisir une date : le premier qui utilise un sélecteur natif <code><input type="date"></code> et un second qui utilise trois éléments {{htmlelement("select")}} qui permettra de choisir une date pour les anciens navigateurs qui ne prendraient pas en charge le contrôle natif.</p> + +<p>{{EmbedLiveSample('Exemples', 600, 100)}}</p> + +<p>Voici le code HTML utilisé :</p> + +<pre class="brush: html"><form> + <div class="nativeDatePicker"> + <label for="bday">Veuillez saisir votre date de naissance :</label> + <input type="date" id="bday" name="bday"> + <span class="validity"></span> + </div> + <p class="fallbackLabel">Veuillez saisir votre date de naissance :</p> + <div class="fallbackDatePicker"> + <span> + <label for="day">Jour :</label> + <select id="day" name="day"> + </select> + </span> + <span> + <label for="month">Mois :</label> + <select id="month" name="month"> + <option selected>Janvier</option> + <option>Février</option> + <option>Mars</option> + <option>Avril</option> + <option>Mai</option> + <option>Juin</option> + <option>Juillet</option> + <option>Août</option> + <option>Septembre</option> + <option>Octobre</option> + <option>Novembre</option> + <option>Décembre</option> + </select> + </span> + <span> + <label for="year">Année :</label> + <select id="year" name="year"> + </select> + </span> + </div> +</form></pre> + +<p>Les mois sont écrits « en dur » (ce sont toujours les mêmes) alors que les valeurs pour les jours et les années sont générées dynamiquement en fonction du mois et de l'année sélectionnées (voir les commentaires ci-après qui expliquent le détail des fonctions).</p> + +<div class="hidden"> +<pre class="brush: css">input:invalid+span:after { + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<p>Une autre partie intéressante est celle où on détecte si le navigateur prend charge la fonctionnalité native <code><input type="date"></code>. Pour cela, on crée un nouvelle élément {{htmlelement("input")}} et on change son type en <code>date</code> puis ensuite, on vérifie immédiatement la valeur de son type : pour les navigateurs qui ne prennent pas en charge l'élément natif, ils renverront la valeur <code>text</code> car l'élément natif aura été « converti ». Dans ce cas, on masque le sélecteur natif et on affiche le sélecteur alternatif (celui qui contient les éléments {{htmlelement("select")}}).</p> + +<pre class="brush: js">// On définit les différentes variables +var nativePicker = document.querySelector('.nativeDatePicker'); +var fallbackPicker = document.querySelector('.fallbackDatePicker'); +var fallbackLabel = document.querySelector('.fallbackLabel'); + +var yearSelect = document.querySelector('#year'); +var monthSelect = document.querySelector('#month'); +var daySelect = document.querySelector('#day'); + +// Initialement, on masque le sélecteur non-natif +fallbackPicker.style.display = 'none'; +fallbackLabel.style.display = 'none'; + +// On teste si l'élément <input type="date"> +// se transforme en <input type="text"> +var test = document.createElement('input'); +test.type = 'date'; +// Si c'est le cas, cela signifie que l'élément +// n'est pas pris en charge et +if(test.type === 'text') { + // On masque le sélecteur natif et on affiche + // le sélecteur avec les <select> + nativePicker.style.display = 'none'; + fallbackPicker.style.display = 'block'; + fallbackLabel.style.display = 'block'; + + // On affiche les jours et les années + // de façon dynamique + populateDays(monthSelect.value); + populateYears(); +} + +function populateDays(month) { + // On supprime les éléments <option> pour l'élément + // <select> des jours afin de pouvoir ajouter les prochains + while(daySelect.firstChild){ + daySelect.removeChild(daySelect.firstChild); + } + + // On crée une variable afin de contenir le nombre + // de jours à afficher + var dayNum; + + // 31 ou 30 jours ? + if(month === 'Janvier' || month === 'Mars' || month === 'Mai' || month === 'Juillet' || month === 'Août' || month === 'Octobre' || month === 'Décembre') { + dayNum = 31; + } else if(month === 'Avril' || month === 'Juin' || month === 'Septembre' || month === 'Novembre') { + dayNum = 30; + } else { + // Si le mois est février, on calcule si l'année est bissextile + var year = yearSelect.value; + var leap = new Date(year, 1, 29).getMonth() == 1; + dayNum = leap ? 29 : 28; + } + + // on ajoute le bon nombre de jours dans autant + // d'éléments <option> pour l'élément <select> + // pour la journée + for(i = 1; i <= dayNum; i++) { + var option = document.createElement('option'); + option.textContent = i; + daySelect.appendChild(option); + } + + // Si le jour précédent a déjà été défini on utilise + // la valeur de ce jour pour daySelect afin d'éviter de + // réinitialiser le jour lorsqu'on change l'année + if(previousDay) { + daySelect.value = previousDay; + + // Si le jour précédent correspond au dernier jour d'un mois + // et que le mois sélectionné possède moins de jours (par + // exemple en février) + if(daySelect.value === "") { + daySelect.value = previousDay - 1; + } + + if(daySelect.value === "") { + daySelect.value = previousDay - 2; + } + + if(daySelect.value === "") { + daySelect.value = previousDay - 3; + } + } +} + +function populateYears() { + // On obtient l'année courante + var date = new Date(); + var year = date.getFullYear(); + + // On affiche l'année courante et les 100 années + // précédentes pour l'élément <select> destiné à + // stocker l'année + for(var i = 0; i <= 100; i++) { + var option = document.createElement('option'); + option.textContent = year-i; + yearSelect.appendChild(option); + } +} + +// Lorsque la valeur du mois ou de l'année est modifiée +// on relance populateDays() +yearSelect.onchange = function() { + populateDays(monthSelect.value); +} + +monthSelect.onchange = function() { + populateDays(monthSelect.value); +} + +// On conserve le jour sélectionné +var previousDay; + +// On met à jour la journée utilisé précédemment +// (voir la fin de populateDays() pour voir où +// est utilisée cette valeur) +daySelect.onchange = function() { + previousDay = daySelect.value; +}</pre> + +<div class="note"> +<p><strong>Note :</strong> Attention, certaines années peuvent contenir 53 semaines ! (cf. <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">cet article Wikipédia</a>) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles.</p> +</div> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente une date ou qui est vide.</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{event("change")}} et {{event("input")}}</td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} et {{htmlattrxref("step", "input")}}</td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>list</code>, <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>.</td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</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#date-state-(type=date)', '<input type="date">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#date-state-(type=date)', '<input type="date">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-date")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'élément générique {{HTMLElement("input")}} et l'interface DOM qu'il implémente : {{domxref("HTMLInputElement")}}</li> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#date">Un tutoriel sur les sélecteurs de date et d'heure</a></li> + <li><a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">Les formats de date et d'heure utilisés en HTML</a></li> +</ul> diff --git a/files/fr/web/html/element/input/datetime-local/index.html b/files/fr/web/html/element/input/datetime-local/index.html new file mode 100644 index 0000000000..6ac8c983c7 --- /dev/null +++ b/files/fr/web/html/element/input/datetime-local/index.html @@ -0,0 +1,613 @@ +--- +title: <input type="datetime-local"> +slug: Web/HTML/Element/Input/datetime-local +tags: + - Date + - Element + - Formulaires + - HTML + - Input + - Reference +translation_of: Web/HTML/Element/input/datetime-local +--- +<div>{{HTMLRef}}</div> + +<p>Les éléments {{htmlelement("input")}} dont l'attribut <code>type</code> vaut <strong><code>"datetime-local"</code></strong> permettent de créer des champs destinés à saisir simplement une date (définie par une année, un mois, et un jour) et une heure (définie par une heure et une minute). Il n'y a pas de secondes dans ce contrôle.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-datetime-local.html", "tabbed-shorter")}}</div> + +<div 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> !</div> + +<p>L'interface utilisateur du contrôle varie selon les navigateurs. La prise en charge de cette fonctionnalité est hétérogène : Chrome/Opera et Edge l'implémentent pour les navigateurs de bureau et la plupart des navigateurs mobiles l'implémentent. Pour les navigateurs qui n'implémentent pas cette fonctionnalité, le contrôle utilisé est celui de <code><a href="/fr/docs/Web/HTML/Element/input/text"><input type="text"></a></code>.</p> + +<p>Les secondes ne sont pas prises en charge.</p> + +<p>Le contrôle est spécifié afin de pouvoir représenter une heure et une date locales et <em>pas nécessairement la date et l'heure locale de l'utilisateur</em>. Autrement dit, une implémentation devrait autoriser toute combinaison valide (d'année / mois / jour / heure / minutes) même si cette combinaison n'est pas valide pour le fuseau horaire de l'utilisateur (par exemple pour les fuseaux horaires qui ne gèrent pas les heures d'été). Certains navigateurs mobiles (sur iOS par exemple) n'implémentent pas cette règle correctement.</p> + +<p>En raison du faible support pour <code>datetime-local</code> et des variations dans ses implémentations, mieux vaudra peut-être encore (juillet 2019) utiliser un <em>framework</em> ou une bibliothèque pour une telle saisie. Une autre option consiste à séparer les champs pour la date (<code>type="date"</code>) et pour l'heure (<code>type="heure"</code>) qui sont mieux pris en charge.</p> + +<p>Certains navigateurs pourront utiliser un contrôle avec un texte simple et vérifier que la valeur date/heure est correcte avant de l'envoyer au serveur. Toutefois, ce contrôle ayant lieu côté client, vous devrez nécessairement vérifier le bon format de la donnée côté serveur.</p> + +<p>Voici, ci-après, un aperçu du contrôle obtenu dans un navigateur fonctionnel. En cliquant sur la flèche vers le bas, cela fait apparaître un sélecteur de date et il faut ensuite saisir l'heure manuellement. Pour Chrome / Opera :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14949/datetime-local-chrome.png" style="display: block; height: 224px; margin: 0px auto; width: 280px;"></p> + +<p>Pour Edge, le contrôle associé à <code>datetime-local</code> se décompose en deux sélecteurs : un pour la date et un pour l'heure qui apparaissent quand on clique sur les éléments respectifs du champ :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14953/datetime-local-picker-edge1.png" style="display: block; height: 398px; margin: 0px auto; width: 320px;"></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14955/datetime-local-picker-edge2.png" style="display: block; height: 394px; margin: 0px auto; width: 264px;"></p> + +<h2 id="Valeur">Valeur</h2> + +<p>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de la date saisie dans le contrôle. Le format utilisable est décrit dans <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates_et_heures_locales">cette section de l'article sur les formats</a>. Il est possible d'indiquer une date par défaut grâce à l'attribut {{htmlattrxref("value", "input")}} :</p> + +<pre class="brush: html notranslate"><label for="party">Veuillez saisir une date et une heure pour la fête :</label> +<input id="party" type="datetime-local" name="partydate" value="2017-06-01T08:30"></pre> + +<p>{{EmbedLiveSample('Valeur', 600, 60)}}</p> + +<p>On notera ici que le format de la date affichée n'est pas celui utilisé pour écrire la valeur de l'attribut <code>value</code>. Le format d'affichage de la date sera choisi en fonction de la locale du système d'exploitation de l'utilisateur. En revanche, l'attribut <code>value</code> sera toujours formaté de la façon suivante : <code>yyyy-MM-ddThh:mm</code>. Lorsque la valeur est envoyée au serveur, elle aura donc ce format : <code>partydate=2017-06-01T08:30</code>.</p> + +<div class="note"> +<p><strong>Note </strong>: Attention si les données sont envoyées avec la méthode HTTP <code><a href="/fr/docs/HTTP/Méthode/GET">GET</a></code>, les deux points (:) devront être échappés pour être intégrés dans les paramètres de l'URL. Avec l'exemple précédent, cela signifie qu'on enverra <code>partydate=2017-06-01T08%3A30</code>. Si on souhaite échapper une chaîne de caractères de la même façon en JavaScript, on pourra utiliser {{jsxref("Objets_globaux/encodeURI", "encodeURI()")}}.</p> +</div> + +<p>En JavaScript, Il est également possible de définir la valeur de la date utilisée dans le contrôle via la propriété {{domxref("HTMLInputElement.value")}}. Par exemple :</p> + +<pre class="brush: js notranslate">var dateControl = document.querySelector('input[type="datetime-local"]'); +date.value = '2017-06-01T08:30';</pre> + +<p>Plusieurs méthodes, fournies par JavaScript (cf. {{jsxref("Date")}}), peuvent être utilisée afin de convertir des informations numériques en une telle chaîne de caractères (par exemple la méthode {{jsxref("Date.toISOString()")}}).</p> + +<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> + +<p>En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de type <code>"date"</code> gèrent les attributs suivants :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribut</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("max")}}</code></td> + <td>La date la plus avancée qui peut être saisie.</td> + </tr> + <tr> + <td><code>{{anch("min")}}</code></td> + <td>La date la plus reculée qui peut être saisie.</td> + </tr> + <tr> + <td><code>{{anch("step")}}</code></td> + <td>Le pas à utiliser pour l'incrément quand on utilise les boutons d'augmentation/diminution. Cet incrément est également utilisé pour la validation.</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3> + +<p>La date/heure la plus avancée qui peut être saisie dans le contrôle. Si la valeur de {{htmlattrxref("value", "input")}} est supérieure à la date indiquée par cet attribut, l'élément ne respectera pas <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">les contraintes de validation</a>. Si la valeur de l'attribut <code>max</code> n'est pas une chaîne de caractères qui suit le format <code>"yyyy-MM-ddThh:mm"</code>, il n'y aura pas de valeur maximale.</p> + +<p>La valeur de cet attribut doit être une date supérieure ou égale à celle indiquée par l'attribut <code>min</code>.</p> + +<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3> + +<p>La date/heure minimale qui peut être saisie dans le contrôle. Toute date/heure saisie antérieure à celle-ci ne respectera pas <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">les contraintes de validation</a>. Si la valeur de l'attribut <code>min</code> n'est pas une chaîne de caractères qui suit le format <code>"yyyy-MM-ddThh:mm"</code>, il n'y aura pas de valeur minimale.</p> + +<p>La valeur de cet attribut doit être une date antérieure ou égale à celle indiquée par l'attribut <code>max</code>.</p> + +<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}</p> + +<p>Pour les champs <code>datetime-local</code>, la valeur de l'attribut <code>step</code> est exprimée en secondes avec un facteur d'amplification de 1000 (pour passer des millisecondes aux secondes). La valeur par défaut de <code>step</code> est 60 (soit 1 minute ou 60 000 millisecondes).</p> + +<p><em>À l'heure où ces lignes sont écrites, la signification de la valeur <code>any</code> pour l'attribut <code>step</code> pour les champs <code>datetime-local</code> n'est pas certaine. Cette information sera mise à jour dès que possible.</em></p> + +<h2 id="Utiliser_les_contrôles_datetime-local">Utiliser les contrôles <code>datetime-local</code></h2> + +<p>Ces contrôles sont pratiques : ils permettent d'utiliser une interface simple pour sélectionner une date et une heure et en plus, ils normalisent la valeur saisie avant de l'envoyer au sereveur, quelle que soit la locale de l'utilisateur. Toutefois, il existe actuellement des problèmes liés à la prise en charge partielle de <code><input type="datetime-local"></code> dans les différents navigateurs.</p> + +<p>Dans les exemples suivants, nous verrons certains cas d'utilisation plus complexes puis nous traiterons de l'adaptation nécessaire en fonction de la prise en charge des navigateurs.</p> + +<h3 id="Utilisation_simple_de_datetime-local">Utilisation simple de <code>datetime-local</code></h3> + +<p>Dans sa forme la plus simple, <code><input type="datetime-local"></code> peut s'utilisere avec un élément <code><input></code> et un élément {{htmlelement("label")}} comme ceci :</p> + +<pre class="brush: html notranslate"><form> + <label for="party">Veuillez choisir une date et une heure pour la fête :</label> + <input id="party" type="datetime-local" name="partydate"> +</form></pre> + +<p>{{EmbedLiveSample('Utilisation_simple_de_datetime-local', 600, 40)}}</p> + +<h3 id="Paramétrer_des_dates_et_heures_minimalesmaximales">Paramétrer des dates et heures minimales/maximales</h3> + +<p>Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de restreindre la fenêtre de dates qu'il est possible de choisir. Dans l'exemple qui suit, on indique une date/heure minimale au <code>2017-06-01T08:30</code> et une date maximale au <code>2017-06-30T16:30</code>:</p> + +<pre class="brush: html notranslate"> <form> + <label for="party">Veuillez choisir une date et une heure pour la fête :</label> + <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30"> + </form></pre> + +<p>{{EmbedLiveSample('Paramétrer_des_dates_et_heures_minimales/maximales', 600, 40)}}</p> + +<p>Par conséquent :</p> + +<ul> + <li>Seuls les jours de juin 2017 peuvent être sélectionnés et seules les heures entre 08h30 et 16h30 pourront être sélectionnées..</li> + <li>Selon le navigateur utilisé, il est possible ou non de sélectionner des heures invalides (cf. {{anch("Validation")}}).</li> +</ul> + +<div class="note"> +<p><strong>Note</strong> : L'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être utilisé afin de faire varier l'incrément, en jours, pour sélectionner la date (par exemple afin de ne pouvoir sélectionner que les samedi). En revanche, à l'heure où nous rédigeons cet article, aucune implémentation ne semble proposer cette fonctionnalité.</p> +</div> + +<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3> + +<p><code><input type="datetime-local"></code> ne prend pas en charge des attributs tels que {{htmlattrxref("size", "input")}}. Il est nécessaire d'utiliser <a href="/fr/docs/Web/CSS">CSS</a> pour les problèmes relatifs au dimensionnement.</p> + +<h3 id="Paramétrer_le_fuseau_horaire">Paramétrer le fuseau horaire</h3> + +<p>Les champs <code>datetime-local</code> ne permettent pas d'indiquer le fuseau horaire de la date/heure utilisée. Cette caractéristique était disponible pour les champs de type <code><a href="/fr/docs/Web/HTML/Element/input/datetime">datetime</a></code> qui est désormais obsolète (retiré de la spécification). Ce type de champ a été retiré en raison d'un manque d'implémentation de la part des navigateurs et des problèmes relatifs à l'ergonomie. Il est plus simple d'avoir un contrôle séparé pour indiquer le fuseau horaire.</p> + +<p>Ainsi, si vous créez un système où l'utilisateur est déjà connecté et que le fuseau horaire est déjà connu, celui-ci peut être fourni via un champ de type <code><a href="/fr/docs/Web/HTML/Element/input/hidden">hidden</a></code>. Par exemple :</p> + +<pre class="brush: html notranslate"><input type="hidden" id="timezone" name="timezone" value="-08:00"></pre> + +<p>Sinon, on peut proposer la sélection d'un fuseau horaire grâce à un élément {{htmlelement("select")}} :</p> + +<pre class="brush: html notranslate"><select name="timezone_offset" id="timezone-offset" class="span5"> + <option value="-12:00">(GMT -12:00) Eniwetok, Kwajalein</option> + <option value="-11:00">(GMT -11:00) Midway Island, Samoa</option> + <option value="-10:00">(GMT -10:00) Hawaii</option> + <option value="-09:50">(GMT -9:30) Taiohae</option> + <option value="-09:00">(GMT -9:00) Alaska</option> + <option value="-08:00">(GMT -8:00) Pacific Time (US &amp; Canada)</option> + + ... + +</select></pre> + +<p>Dans ces deux situations, le fuseau horaire et la date sont transmis au serveur séparément (c'est côté serveur que le choix de la représentation pour le stockage est effectué).</p> + +<div class="note"> +<p><strong>Note</strong> : Le fragment de code précédent est tiré de <a href="https://gist.github.com/nodesocket/3919205">Tous les fuseaux horaires du monde dans un élément <code><select></code></a>.</p> +</div> + +<h2 id="Validation">Validation</h2> + +<p>Par défaut, <code><input type="datetime-local"></code> n'applique pas de validation aux valeurs saisies. C'est l'interface utilisateur du contrôle qui ne permet pas de saisir autre chose qu'une date et une heure (ce qui est utile) mais il est toujours possible de ne saisir aucune valeur ou de saisir une valeur invalide (le 32 avril par exemple).</p> + +<p>Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de restreindre les dates disponibles et {{htmlattrxref("required", "input")}} rend la date obligatoire. Dans ces cas, les navigateurs afficheront un message d'erreur si on essaie d'envoyer une date en dehors de l'intervalle ou une date vide.</p> + +<p>Prenons un exemple avec des dates mini/maxi et le champ obligatoire :</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="party">Veuillez choisir une date et une heure pour la fête (obligatoire, entre le 1er juin, 8h30 et le 30 juin, 16h30) :</label> + <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30" required> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="Réserver !"> + </div> +</form></pre> + +<p>Si vous essayez d'envoyer le formulaire avec une date incomplète ou en dehors de l'intervalle indiqué, le navigateur affichera une erreur. Voici le résultat :</p> + +<p>{{EmbedLiveSample('Validation', 600, 120)}}</p> + +<p>Voici une capture d'écran illustrant un message d'erreur dans un navigateur qui prend en charge cette fonctionnalité :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14957/datetime-local-error.png" style="display: block; height: 100px; margin: 0px auto; width: 558px;"></p> + +<p>Vous trouverez ensuite la feuille de style CSS utilisée pour l'exemple. On utilise les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que sa valeur est valide ou non. Les icônes indicatives sont placées dans un élément {{htmlelement("span")}} séparé car, sous Chrome, le contenu généré automatiquement est placé à l'intériur du contrôle et ne peut pas être affiché/mis en forme efficacement.</p> + +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + display: flex; + align-items: center; +} + +label { + display: inline-block; + width: 300px; +} + +input:invalid+span:after { + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + content: '✓'; + padding-left: 5px; +}</pre> + +<div class="warning"> +<p><strong>Important </strong>: La validation des données du formulaire HTML par le navigateur ne doit pas remplacer la validation des données reçues sur le serveur ! En effet, il est tout à fait possible pour quelqu'un de modifier le document HTML afin d'outrepasser ces contraintes (voire d'envoyer directement des données au serveur sans passer par le formulaire HTML). Si les mécanismes, côté serveur, échouent à valider les données, cela pourrait avoir des conséquences néfastes sur le stockage ou la sécurité de l'application.</p> +</div> + +<h2 id="Gérer_la_prise_en_charge_des_navigateurs">Gérer la prise en charge des navigateurs</h2> + +<p>Comme indiqué ci-avant, le principal problème qu'on rencontre avec ces contrôles est la prise en charge hétérogène des différents navigateurs : seuls Opera et Chrome implémentent cette fonctionnalité parmi les navigateurs de bureau et la plupart des navigateurs mobiles la prennent en charge. Voici, par exemple, l'interface utilisateur du sélecteur <code>datetime-local</code> de Firefox pour Android :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14951/datetime-local-fxa.png" style="display: block; height: 640px; margin: 0px auto; width: 360px;"></p> + +<p>Les navigateurs qui n'implémentent pas cette fonctionnalité afficheront un contrôle de saisie textuelle. Toutefois, cela entraîne des problème de cohérence d'interface graphique d'une part et de représentation des données d'autre part.</p> + +<p>C'est ce second problème qui est le plus important. Comme nous l'avons mentionné avant, la valeur d'un contrôle <code>datetime-local</code> est toujours normalisée sous la forme <code>yyyy-mm-ddThh:mm</code>. En revanche, avec un champ texte, le navigateur n'utilise pas de formatage particulier et il existe différentes façon d'écrire des dates et heures selon les langues et les régions. On peut par exemple avoir les formats suivants :</p> + +<ul> + <li><code>ddmmyyyy</code></li> + <li><code>dd/mm/yyyy</code></li> + <li><code>mm/dd/yyyy</code></li> + <li><code>dd-mm-yyyy</code></li> + <li><code>mm-dd-yyyy</code></li> + <li><code>mm-dd-yyyy hh:mm</code> (heure exprimée sur 12 heures)</li> + <li><code>mm-dd-yyyy HH:mm</code> (heure exprimée sur 24 heures)</li> + <li>etc.</li> +</ul> + +<p>Une façon de contourner ce problème est de placer un attribut {{htmlattrxref("pattern", "input")}} dans l'élément <code><input type="</code><code>datetime-local"></code>. Bien que cet élément n'utilise pas cet attribut, s'il est converti en <code><input type="text"></code> par le navigateur, le motif sera alors utilisé. Vous pouvez par exemple essayer le code suivant dans un navigateur qui ne prend pas en charge <code><input type="datetime-local"></code> :</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="party">Veuillez choisir une date et une heure pour la fête (obligatoire, entre le 1er juin, 8h30 et le 30 juin, 16h30) :</label> + <input id="party" type="datetime-local" name="partydate" + min="2017-06-01T08:30" max="2017-06-30T16:30" + pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" required> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="Réserver !"> + </div> + <input type="hidden" id="timezone" name="timezone" value="-08:00"> +</form></pre> + +<p>{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}}</p> + +<p>Si vous essayer de soumettre ce formulaire, vous pourrez voir que le navigateur affiche un message d'erreur et met en avant le champ invalide si la valeur saisie ne respecte pas la forme <code>nnnn-nn-nnTnn:nn</code> avec <code>n</code> qui est un chiffre entre 0 et 9. Bien entendu, cela n'empêche pas de saisir des dates/heures invalides ou mal formatées.</p> + +<p>De plus, comment l'utilisateur doit-il comprendre la règle de format qui lui est imposée pour saisir une date et une heure ?</p> + +<p>Bref, il y a toujours un problème.</p> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; +} + +input:invalid + span { + position: relative; +} + +input:invalid + span:after { + content: '✖'; + position: absolute; + right: -18px; +} + +input:valid + span { + position: relative; +} + +input:valid + span:after { + content: '✓'; + position: absolute; + right: -18px; +}</pre> +</div> + +<p>Actuellement, la meilleure façon de gérer les dates/heures d'une façon homogène pour les différents navigateurs est d'utiliser différents contrôles (via des éléments {{htmlelement("select")}}) pour sélectionner l'année, le jour, le mois, la date et l'heure. Il existe également des bibliothèques JavaScript telles que <a href="https://jqueryui.com/datepicker/">le sélecteur de date jQuery</a> et <a href="https://timepicker.co/">le sélecteur d'heure jQuery</a>.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Dans cet exemple, on crée deux ensembles d'éléments pour sélectionner une date et une heure : un sélecteur natif <code><input type="datetime-local"></code> d'une part et un ensemble de cinq éléments {{htmlelement("select")}} d'autre part pour les navigateurs qui ne prennent pas en charge le contrôle natif.</p> + +<p>{{EmbedLiveSample('Exemples', 600, 140)}}</p> + +<p>Voici le fragment de code HTML utilisé :</p> + +<pre class="brush: html notranslate"><form> + <div class="nativeDateTimePicker"> + <label for="party">Veuillez sélectionner une date et une heure pour la fête :</label> + <input type="datetime-local" id="party" name="bday"> + <span class="validity"></span> + </div> + <p class="fallbackLabel">Veuillez sélectionner une date et une heure pour la fête :</p> + <div class="fallbackDateTimePicker"> + <div> + <span> + <label for="day">Jour :</label> + <select id="day" name="day"> + </select> + </span> + <span> + <label for="month">Mois :</label> + <select id="month" name="month"> + <option selected>Janvier</option> + <option>Février</option> + <option>Mars</option> + <option>Avril</option> + <option>Mai</option> + <option>Juin</option> + <option>Juillet</option> + <option>Août</option> + <option>Septembre</option> + <option>Octobre</option> + <option>Novembre</option> + <option>Décembre</option> + </select> + </span> + <span> + <label for="year">Année :</label> + <select id="year" name="year"> + </select> + </span> + </div> + <div> + <span> + <label for="hour">Heure :</label> + <select id="hour" name="hour"> + </select> + </span> + <span> + <label for="minute">Minute :</label> + <select id="minute" name="minute"> + </select> + </span> + </div> + </div> +</form></pre> + +<p>Les mois disponibles sont codés de façon statique (ce sont toujours les mêmes). En revanche, les valeurs pour les jours et les années sont générées dynamiquement selon le mois et l'année courante (voir les commentaires du script ci-après). Les heures et les minutes sont également générées dynamiquement.</p> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<p>Une partie intéressante du code est celle où on détecte la prise en charge de la fonctionnalité. Pour cela, dans le script, on crée un nouvel élément {{htmlelement("input")}} auquel on attribut le type <code>datetime-local</code> puis on vérifie son type juste après. Pour les navigateurs qui ne prennent pas en charge ce type de contrôle, le type aura changé et sera <code>text</code>. Si c'est le cas, on masque le contrôle natif et on utilise l'interface utilisateur alternative (composée avec les éléments ({{htmlelement("select")}})).</p> + +<pre class="brush: js notranslate">// On définit les différentes variables +var nativePicker = document.querySelector('.nativeDateTimePicker'); +var fallbackPicker = document.querySelector('.fallbackDateTimePicker'); +var fallbackLabel = document.querySelector('.fallbackLabel'); + +var yearSelect = document.querySelector('#year'); +var monthSelect = document.querySelector('#month'); +var daySelect = document.querySelector('#day'); +var hourSelect = document.querySelector('#hour'); +var minuteSelect = document.querySelector('#minute'); + +// Initialement, on masque le sélecteur non-natif +fallbackPicker.style.display = 'none'; +fallbackLabel.style.display = 'none'; + +// On teste si l'élément <input type="date"> +// se transforme en <input type="text"> +var test = document.createElement('input'); +test.type = 'date'; +// Si c'est le cas, cela signifie que l'élément +// n'est pas pris en charge et +if(test.type === 'text') { + // On masque le sélecteur natif et on affiche + // le sélecteur avec les <select> + nativePicker.style.display = 'none'; + fallbackPicker.style.display = 'block'; + fallbackLabel.style.display = 'block'; + + // On affiche les jours, années, heures + // et minutes de façon dynamique + populateDays(monthSelect.value); + populateYears(); + populateHours(); + populateMinutes(); +} + +function populateDays(month) { + // On supprime les éléments <option> pour l'élément + // <select> des jours afin de pouvoir ajouter les prochains + while(daySelect.firstChild){ + daySelect.removeChild(daySelect.firstChild); + } + + // On crée une variable afin de contenir le nombre + // de jours à afficher + var dayNum; + + // 31 ou 30 jours ? + if(month === 'Janvier' || month === 'Mars' || month === 'Mai' || month === 'Juillet' || month === 'Août' || month === 'Octobre' || month === 'Décembre') { + dayNum = 31; + } else if(month === 'Avril' || month === 'Juin' || month === 'Septembre' || month === 'Novembre') { + dayNum = 30; + } else { + // Si le mois est février, on calcule si l'année est bissextile + var year = yearSelect.value; + var leap = new Date(year, 1, 29).getMonth() == 1; + leap ? dayNum = 29 : dayNum = 28; + } + + // on ajoute le bon nombre de jours dans autant + // d'éléments <option> pour l'élément <select> + // pour la journée + for(i = 1; i <= dayNum; i++) { + var option = document.createElement('option'); + option.textContent = i; + daySelect.appendChild(option); + } + + // Si le jour précédent a déjà été défini on utilise + // la valeur de ce jour pour daySelect afin d'éviter de + // réinitialiser le jour lorsqu'on change l'année + if(previousDay) { + daySelect.value = previousDay; + + // Si le jour précédent correspond au dernier jour d'un mois + // et que le mois sélectionné possède moins de jours (par + // exemple en février) + if(daySelect.value === "") { + daySelect.value = previousDay - 1; + } + + if(daySelect.value === "") { + daySelect.value = previousDay - 2; + } + + if(daySelect.value === "") { + daySelect.value = previousDay - 3; + } + } +} + +function populateYears() { + // On obtient l'année courante + var date = new Date(); + var year = date.getFullYear(); + + // On affiche l'année courante et les 100 années + // précédentes pour l'élément <select> destiné à + // stocker l'année + for(var i = 0; i <= 100; i++) { + var option = document.createElement('option'); + option.textContent = year-i; + yearSelect.appendChild(option); + } +} + +function populateHours() { + // on crée 24 valeurs pour l'élément <select> + // associé aux heures + for(var i = 0; i <= 23; i++) { + var option = document.createElement('option'); + option.textContent = (i < 10) ? ("0" + i) : i; + hourSelect.appendChild(option); + } +} + +function populateMinutes() { + // On crée 60 valeurs pour l'élément <select> + // associé aux minutes + for(var i = 0; i <= 59; i++) { + var option = document.createElement('option'); + option.textContent = (i < 10) ? ("0" + i) : i; + minuteSelect.appendChild(option); + } +} + +// Lorsque la valeur du mois ou de l'année est modifiée +// on relance populateDays() +yearSelect.onchange = function() { + populateDays(monthSelect.value); +} + +monthSelect.onchange = function() { + populateDays(monthSelect.value); +} + +// On conserve le jour sélectionné +var previousDay; + +// On met à jour la journée utilisé précédemment +// (voir la fin de populateDays() pour voir où +// est utilisée cette valeur) +daySelect.onchange = function() { + previousDay = daySelect.value; +}</pre> + +<div class="note"> +<p><strong>Note :</strong> Attention, certaines années peuvent contenir 53 semaines ! (cf. <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">cet article Wikipédia</a>) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles.</p> +</div> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente une date et une heure (selon le fuseau horaire local) ou bien une chaîne de caractères vide.</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}</td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} et {{htmlattrxref("step", "input")}}.</td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code>.</td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.</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#local-date-and-time-state-(type=datetime-local)', '<input type="datetime-local">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html##local-date-and-time-state-(type=datetime-local)', '<input type="datetime-local">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-datetime-local")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'élément générique {{HTMLElement("input")}} ainsi que l'interface DOM qu'il implémente : {{domxref("HTMLInputElement")}}</li> + <li><code><a href="/fr/docs/Web/HTML/Element/input/date"><input type="date"></a></code> and <code><a href="/fr/docs/Web/HTML/Element/input/time"><input type="time"></a></code></li> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#Sélection_de_date_et_d'horaire">Un tutoriel sur les sélecteurs de date et d'heure</a></li> + <li><a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">Les formats de date et d'heure utilisés en HTML</a></li> +</ul> diff --git a/files/fr/web/html/element/input/datetime/index.html b/files/fr/web/html/element/input/datetime/index.html new file mode 100644 index 0000000000..e3ddf4012c --- /dev/null +++ b/files/fr/web/html/element/input/datetime/index.html @@ -0,0 +1,24 @@ +--- +title: <input type="datetime"> +slug: Web/HTML/Element/Input/datetime +tags: + - Element + - HTML + - Input + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/input/datetime +--- +<div>{{HTMLRef}}{{obsolete_header}}</div> + +<p>L'élément HTML <code><input type="datetime"></code> représentait un contrôle permettant de saisir une date, une heure (avec heures, minutes, secondes et fractions de seconde) ainsi qu'un fuseau horaire. <strong>Cette fonctionnalité a été <a href="https://github.com/whatwg/html/issues/336">retirée de la spécification HTML WHATWG</a></strong> et n'est plus prise en charge par les navigateurs.</p> + +<p>Afin de remplacer cette fonctionnalité, les navigateurs implémentent (ou développent) l'élément <code><input></code> de type <code><a href="/fr/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code> qui doit être utilisé à la place. Le format utilisé pour ces champs est décrit dans <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates_et_heures_universelles">cette section de l'article sur les formats</a>.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("input")}} element</li> + <li><a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">Les formats de date et d'heure utilisés en HTML</a></li> +</ul> diff --git a/files/fr/web/html/element/input/email/index.html b/files/fr/web/html/element/input/email/index.html new file mode 100644 index 0000000000..d250ab460a --- /dev/null +++ b/files/fr/web/html/element/input/email/index.html @@ -0,0 +1,437 @@ +--- +title: <input type="email"> +slug: Web/HTML/Element/Input/email +tags: + - HTML + - Input + - Reference +translation_of: Web/HTML/Element/input/email +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"email"</strong></code> permettent à un utilisateur de saisir et d'éditer une adresse mail ou, si l'attribut {{htmlattrxref("multiple", "input")}} est indiqué, une liste d'adresses mail. La valeur saisie est automatiquement validée afin de vérifier que le champ est vide ou que l'adresse (ou la liste d'adresses) est correcte.</span> Les pseudo-classes CSS {{cssxref(":valid")}} et {{cssxref(":invalid")}} sont appliquées automatiquement selon le cas.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-email.html", "tabbed-shorter")}}</div> + +<div 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> !</div> + +<div class="note"> +<p><strong>Note :</strong> Les navigateurs qui ne prennent pas en charge le type <code>"email"</code> emploieront un élément <code><input></code> <code><a href="/fr/docs/Web/HTML/Element/input/text">"text"</a></code> à la place.</p> +</div> + +<h2 id="Valeur">Valeur</h2> + +<p>La valeur d'un tel élément {{HTMLElement("input")}}, contenue dans l'attribut s {{htmlattrxref("value", "input")}}, contient une chaîne de caractères qui est automatiquement validée afin de vérifier que c'est une adresse électronique valide. Pour être plus précis, trois formes sont considérées valides :</p> + +<ol> + <li>Une chaîne de caractères vide ("") qui indique que l'utilisateur n'a saisi aucune valeur ou que la valeur a été retirée.</li> + <li>Une adresse électronique bien-formée. Cela ne signifie pas que l'adresse en question existe mais qu'elle est correctement formatée. Autrement dit, elle respecte une structure <code>"nom@domaine.tld"</code>. Cette règle est un peu plus complexe (cf. {{anch("Validation")}} pour l'algorithme exact).</li> + <li>Si et seulement si l'attribut {{htmlattrxref("multiple", "input")}} est indiqué, la valeur peut être une liste d'adresses électroniques correctes, séparées par des virgules. Chaque blanc situé avant et après chaque adresse sera retiré.</li> +</ol> + +<p>Pour plus de détails, se référer à la section {{anch("Validation")}} sur la façon dont les adresses mails sont validées.</p> + +<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> + +<p>En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de type <code>email</code> prennent en charge les attributs suivants :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribut</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("maxlength")}}</code></td> + <td>Le nombre de caractères maximal qui peut être écrit dans ce champ.</td> + </tr> + <tr> + <td><code>{{anch("minlength")}}</code></td> + <td>Le nombre de caractères minimal qui peut être écrit dans ce champ pour qu'il soit considéré comme valide.</td> + </tr> + <tr> + <td><code>{{anch("multiple")}}</code></td> + <td>Un attribut booléen qui indique si plusieurs adresses électroniques peuvent être saisies et séparées par des virgules.</td> + </tr> + <tr> + <td><code>{{anch("pattern")}}</code></td> + <td>Une expression rationnelle à laquelle doit correspondre le texte saisi pour être valide.</td> + </tr> + <tr> + <td><code>{{anch("placeholder")}}</code></td> + <td>Une valeur d'exemple qui sera affichée lorsqu'aucune valeur n'est saisie.</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>Un attribut booléen qui indique si le contenu du champ est en lecture seule.</td> + </tr> + <tr> + <td><code>{{anch("size")}}</code></td> + <td>Un nombre qui indique le nombre de caractères affichés par le champ.</td> + </tr> + <tr> + <td><code>{{anch("spellcheck")}}</code></td> + <td>Cet attribut contrôle l'activation de la vérification orthographique sur le champ ou si la vérification orthographique par défaut doit être appliquée.</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdef(maxlength)">{{htmlattrdef("maxlength")}}</h3> + + + +<p>Le nombre maximum de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>maxlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à <code>minlength</code>.</p> + +<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du texte dépasse <code>maxlength</code> en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p> + + + +<h3 id="htmlattrdef(minlength)">{{htmlattrdef("minlength")}}</h3> + + + +<p>Le nombre minimal de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>minlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieur à <code>maxlength</code>.</p> + +<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du texte est inférieure à <code>minlength</code> en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p> + + + +<h3 id="htmlattrdef(multiple)">{{htmlattrdef("multiple")}}</h3> + +<p>A Boolean attribute which, if present, indicates that the user can enter a list of multiple e-mail addresses, separated by commas and, optionally, whitespace characters. See {{anch("Allowing multiple e-mail addresses")}} for details.</p> + +<div class="note"> +<p><strong>Note:</strong> Normally, if you specify the {{htmlattrxref("required", "input")}} attribute, the user must enter a valid e-mail address for the field to be considered valid. However, if you add the <code>multiple</code> attribute, a list of zero e-mail addresses (an empty string, or one which is entirely whitespace) is a valid value. In other words, the user does not have to enter even one e-mail address when <code>multiple</code> is specified, regardless of the value of <code>required</code>.</p> +</div> + +<h3 id="htmlattrdef(pattern)">{{htmlattrdef("pattern")}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}</p> + +<p>Voir la section sur la validation d'un motif ci-après pour plus de détails.</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "spellcheck", 0, 1, 2)}}</p> + +<h2 id="Attributs_non-standard">Attributs non-standard</h2> + +<p>Les attributs non-standard suivant sont disponibles pour les champs d'email dans certains navigateurs mais devraient ne pas être utilisés.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("autocorrect")}}</code></td> + <td>Une chaîne de caractères qui indique si la correction automatique doit être appliquée à ce champ texte. <strong>Uniquement pris en charge par Safari.</strong></td> + </tr> + <tr> + <td><code>{{anch("mozactionhint")}}</code></td> + <td>Une chaîne de caractères qui indique le type d'action qui sera effectuée lorsque l'utilisateur appuiera sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition du champ. La valeur de cet attribut est utilisée comme libellé pour la touche adéquate du clavier virtuel. <strong>Uniquement pris en charge par Firefox pour Android.</strong></td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdef(autocorrect)_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p> + +<h3 id="htmlattrdef(mozactionhint)_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p> + +<h2 id="Utiliser_les_champs_de_saisie_d'adresses_électroniques">Utiliser les champs de saisie d'adresses électroniques</h2> + +<p>Les adresses mails font partie des informations les plus fréquentes dans les formulaires web : elles sont utilisées pour se connecter, demander des informations, confirmer une commande, envoyer un email, etc. Le type <code>"email"</code> permet de simplifier le travail de construction de l'interface utilisateur et la logique associée pour les adresses électroniques. Lorsqu'on crée un champ dont l'attribut <code>type</code> vaut <code>"email"</code>, le navigateur valide ou non le texte saisi afin de vérifier qu'il s'agit d'une adresse correcte. Cela permet d'éviter les cas où l'utilisateur a fait une faute de saisie ou lorsqu'il a fourni une adresse invalide.</p> + +<p>On notera toutefois que le navigateur ne vérifie pas si l'adresse saisie existe réellement ou correspond à un utilisateur existant du site ou si elle respecte quelque autre critère. Autrement dit, le navigateur vérifie uniquement que l'adresse fournie est bien formée.</p> + +<div class="note"> +<p><strong>Note :</strong> Il est également important de rappeler qu'un utilisateur peut modifier le HTML de la page grâce aux outils de développement. Votre site <em>ne doit pas</em> reposer sur les mécanismes de validation du navigateur. Il est crucial de vérifier l'adresse électronique <em>côté serveur</em> dès que le texte fournit est impliqué, d'une façon ou d'une autre, dans une fonctionnalité sensible (par exemple la connexion à un site, un achat, etc.).</p> +</div> + +<h3 id="Un_champ_email_simple">Un champ email simple</h3> + +<p>À l'heure actuelle, l'ensemble des navigateurs qui implémentent cet élément le gèrent comme un champ texte standard auquel certaines fonctionnalités de validation sont ajoutées. La spécification laisse toutefois une marge de manœuvre pour cette validation (l'élément pourrait par exemple consulter le répertoire de l'appareil pour choisir une adresse parmi cette liste). Dans sa forme la plus simple, un champ email peut être écrit de cette façon :</p> + +<pre class="brush: html"><input id="emailAddress" type="email"></pre> + +<p>{{EmbedLiveSample('Un_champ_email_simple', 600, 40)}}</p> + +<p>Un tel champ est considéré comme valide lorsqu'il est vide ou lorsqu'une adresse électronique bien formée est saisie. Dans les autres cas,, la valeur est considérée comme invalide. Si on ajoute l'attribut {{htmlattrxref("required", "input")}}, seuls les adresses électroniques bien formées sont autorisées, il n'est plus possible de laisser la valeur vide.</p> + +<h3 id="Gérer_plusieurs_adresses_mail">Gérer plusieurs adresses mail</h3> + +<p>Grâce à l'attribut {{htmlattrxref("multiple", "input")}}, on peut configurer le champ afin de saisir plusieurs adresses mail.</p> + +<pre class="brush: html"><input id="emailAddress" type="email" multiple></pre> + +<p>{{EmbedLiveSample('Gérer_plusieurs_adresses_mail', 600, 40)}}</p> + +<p>Avec cet attribut, la valeur saisie est valide quand on saisit zéro, une ou plusieurs adresses électroniques bien formées, séparées par des virgules et éventuellement entourées de blancs.</p> + +<p>Voici certains exemples de chaînes de caractères valides lorsque <code>"multiple"</code> est utilisé :</p> + +<ul> + <li><code>""</code></li> + <li><code>"me@example"</code></li> + <li><code>"me@example.org"</code></li> + <li><code>"me@example.org,you@example.org"</code></li> + <li><code>"me@example.org, you@example.org"</code></li> + <li><code>"me@example.org,you@example.org, us@example.org"</code></li> +</ul> + +<p>En revanche, les exemples suivants sont considérés invalides :</p> + +<ul> + <li><code>","</code></li> + <li><code>"me"</code></li> + <li><code>"me@example.org you@example.org"</code></li> +</ul> + +<h3 id="Textes_indicatifs_(placeholders)">Textes indicatifs (<em>placeholders</em>)</h3> + +<p>Il est parfois utile de fournir une indication contextuelle quant à la valeur qui doit être saisie. C'est notamment pertinent quand la disposition de la page ne permet pas d'utiliser des étiquettes suffisamment descriptives (ou longues) pour chaque élément {{HTMLElement("input")}}. Pour fournir une telle indication, on peut fournir un <em>placeholder</em> qui sera affiché dans le champ lorsque la valeur est vide et qui disparaît dès que des données sont saisies.</p> + +<p>Dans l'exemple qui suit, on utilise un élément <code><input></code> de type <code>"email"</code> avec le texte indicatif <code>"sophie@example.com"</code>. Vous pouvez manipuler l'exemple afin de voir comment ce texte disparaît/réapparaît lorsqu'on édite la valeur du champ.</p> + +<pre class="brush: html"><input type="email" placeholder="sophie@example.com"></pre> + +<p>{{EmbedLiveSample('Textes_indicatifs_(placeholders)', 600, 40)}}</p> + +<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3> + +<p>Il est possible de contrôler la taille physique de la boîte de saisie et également la longueur minimale/maximale de la valeur qu'il est possible de saisir.</p> + +<h4 id="Contrôler_la_taille_physique">Contrôler la taille physique</h4> + +<p>La taille physique de la boîte de saisie peut être paramétrée grâce à l'attribut {{htmlattrxref("size", "input")}}. Grâce à cet attribut, on peut indiquer le nombre de caractères que le champ peut afficher. Dans l'exemple qui suit, la boîte d'édition pourra contenir jusqu'à 15 caractères :</p> + +<pre class="brush: html"><input type="email" size="15"></pre> + +<p>{{ EmbedLiveSample('Contrôler_la_taille_physique', 600, 40)}}</p> + +<h4 id="Contrôler_la_taille_de_la_valeur">Contrôler la taille de la valeur</h4> + +<p>L'attribut <code>size</code> ne contraint pas la longueur de l'adresse qu'on pourra saisir. On peut donc avoir de petits champs qui permettent de saisir de longues adresses. Pour borner la taille de l'adresse mail à saisir, on pourra utiliser l'attribut {{htmlattrxref("minlength", "input")}} pour indiquer le nombre minimal de caractères et l'attribut {{htmlattrxref("maxlength", "input")}} pour indiquer le nombre maximal de caractères contenus dans l'adresse électronique.</p> + +<p>Dans l'exemple qui suit, on affiche une boîte de saisie qui mesure 32 caractères de large et dans laquelle on ne peut saisir des adresses qui ont au moins 3 caractères et au plus 64 caractères.</p> + +<pre class="brush: html"><input type="email" size="32" minlength="3" maxlength="64"></pre> + +<p>{{EmbedLiveSample("Contrôler_la_taille_de_la_valeur", 600, 40)}}</p> + +<h3 id="Fournir_une_option_par_défaut">Fournir une option par défaut</h3> + +<p>On peut également fournir une valeur par défaut en remplissant l'attribut {{htmlattrxref("value", "input")}} de l'élément :</p> + +<div id="Default_value"> +<pre class="brush: html"><input type="email" value="default@example.com"></pre> +</div> + +<p>{{EmbedLiveSample("Fournir_une_option_par_défaut", 600, 40)}}</p> + +<h4 id="Proposer_des_suggestions">Proposer des suggestions</h4> + +<p>Pour améliorer encore l'ergonomie, on peut fournir une liste d'options par défaut parmi laquelle l'utilisateur peut choisir. Cela fonctionne en utilisant l'attribut {{htmlattrxref("list", "input")}} dont la valeur est un identifiant d'un élément {{HTMLElement("datalist")}} qui contient différents éléments {{HTMLElement("option")}} dont les valeurs des attributs <code>value</code> fournissent les adresses suggérées. L'utilisateur n'est pas contraint à saisir une valeur parmi celles-ci, elles sont uniquement fournies à titre indicatif.</p> + +<pre class="brush: html"><input type="email" size="40" list="defaultEmails"> + +<datalist id="defaultEmails"> + <option value="jbond007@mi6.defence.gov.uk"> + <option value="jbourne@unknown.net"> + <option value="nfury@shield.org"> + <option value="tony@starkindustries.com"> + <option value="hulk@grrrrrrrr.arg"> +</datalist></pre> + +<p>{{EmbedLiveSample("Proposer_des_suggestions", 600, 40)}}</p> + +<p>Lorsqu'on utilise l'élément {{HTMLElement("datalist")}} et l'élément {{HTMLElement("option")}}, le navigateur affichera les adresses suggérées lors de la saisie, généralement sous la forme d'une liste déroulante ou d'une popup. Bien que les détails d'interface puissent dépendre de chaque navigateur, cliquer sur le champ d'édition affichera généralement la liste sous forme d'un volet déroulant. Ensuite, la liste est restreinte au fur et à mesure des caractères saisis.</p> + +<p><img alt="Animation: Using keyboard entry to filter the list of suggested email addresses" src="https://mdn.mozillademos.org/files/14831/html-input-email1.gif" style="border-style: solid; border-width: 1px; height: 168px; width: 352px;"></p> + +<h2 id="Validation">Validation</h2> + +<p>Il existe deux niveaux de validation pour les champs de saisie de type <code>"email"</code>. Tout d'abord, on a le niveau standard qui permet de vérifier automatiquement si l'adresse électronique est bien formatée. Ensuite, il est possible d'ajouter un filtre spécifique si besoin de répondre à des contraintes plus spécifiques.</p> + +<div class="warning"> +<p><strong>Attention !</strong> La validation du formulaire HTML par l'agent utilisateur ne saurait remplacer la vérification des données saisies côté serveur. En effet, il est relativement simple de modifier le document HTML avec son navigateur pour outrepasser les contraintes exprimées ici (quitte à les transmettre directement au serveur). Si les données ne sont pas vérifiées côté serveur, cela pourra entraîner des erreurs (valeurs trop grande, au mauvais format) voire des failles de sécurité.</p> +</div> + +<h3 id="Validation_simple">Validation simple</h3> + +<p>Les navigateurs qui implémentent le type <code>"email"</code> fournissent une validation automatique afin de vérifier que la valeur saisie respecte le format d'une adresse électronique valide. Les navigateurs utilisent <a href="https://dxr.mozilla.org/mozilla-central/source/dom/html/input/SingleLineTextInputTypes.cpp?q=%2Bfunction%3A%22EmailInputType%3A%3AIsValidEmailAddressList%28const+nsAString+%26%29%22&redirect_type=single#184">un algorithme</a> pour respecter <a href="https://w3c.github.io/html/sec-forms.html#email-state-typeemail">la spécification</a>.</p> + +<p>Les pseudo-classes CSS {{cssxref(":valid")}} et {{cssxref(":invalid")}} peuvent être utilisées afin de mettre en forme la valeur selon qu'elle est valide ou non.</p> + +<div class="note"> +<p><strong>Note :</strong> La spécification comporte certains problèmes relatifs aux noms de domaines internationaux et à la validation des adresses électroniques en HTML. Pour plus d'informations, lire <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15489">le bug n°15489 du W3C</a>.</p> +</div> + +<h3 id="Validation_grâce_à_une_expression_rationnelle">Validation grâce à une expression rationnelle</h3> + +<p>S'il est nécessaire que l'adresse saisie respecte plus de critères, il est possible d'utiliser l'attribut {{htmlattrxref("pattern", "input")}} afin d'indiquer <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">une expression rationnelle</a> contre laquelle la valeur sera vérifiée. Si l'attribut {{htmlattrxref("multiple", "input")}} est actif, chaque élément de la liste devra respecter cette expression rationnelle.</p> + +<p>Prenons comme exemple l'intranet d'une entreprise avec un site web qui permet de contacter le département du support technique en cas de besoin. Un formulaire simplifier permet de saisir une adresse électronique et un message. Dans ce cas, on souhaite vérifier que l'adresse électronique est saisie mais également que c'est une adresse respectant le format de celles utilisées dans l'entreprise.</p> + +<p>Le navigateur vérifie d'une part que l'adresse électronique est une adresse correctement formatée <em>et</em> que celle-ci respecte l'expression rationnelle indiquée avec {{htmlattrxref("pattern", "input")}}. Voici un exemple d'application :</p> + +<div class="hidden"> +<pre class="brush: css">body { + font: 16px sans-serif; +} + +.emailBox { + padding-bottom: 20px; +} + +.messageBox { + padding-bottom: 20px; +} + +label { + line-height: 22px; +} + +label::after { + content: ":"; +}</pre> +</div> + +<pre class="brush: html"><form> + <div class="emailBox"> + <label for="emailAddress">Votre adresse email</label><br> + <input id="emailAddress" type="email" size="64" maxLength="64" required + placeholder="nomutilisateur@beststartupever.com" pattern=".+@beststartupever.com" + title="Merci de fournir uniquement une adresse Best Startup Ever"> + </div> + + <div class="messageBox"> + <label for="message">Requête</label><br> + <textarea id="message" cols="80" rows="8" required + placeholder="Mes chaussures sont trop petites."></textarea> + </div> + <input type="submit" value="Envoyer la requête"> +</form> +</pre> + +<p>{{EmbedLiveSample("Validation_grâce_à_une_expression_rationnelle", 700, 275)}}</p> + +<p>Le formulaire ({{HTMLElement("form")}}) contient un élément {{HTMLElement("input")}} de type <code>"email"</code> pour saisir l'adresse de l'utilisateur, un élément {{HTMLElement("textarea")}} permettant de saisir le message et un élément <code><input></code> de type <code><a href="/fr/docs/Web/HTML/Element/input/submit">"submit"</a></code> qui formera un bouton permettant d'envoyer le formulaire. Chaque champ possède un élément {{HTMLElement("label")}} associé qui permet d'indiquer ce qui est attendu.</p> + +<p>Si on regarde le champ de saisie pour l'adresse électronique, on voit que les deux attributs {{htmlattrxref("size", "input")}} et {{htmlattrxref("maxlength", "input")}} ont la valeur 64 (on affiche une boîte de saisie large de 64 caractères et on ne peut saisir une adresse électronique d'au plus 64 caractères). L'attribut {{htmlattrxref("required", "input")}} est présent et l'adresse électronique est donc obligatoire pour l'envoi du formulaire.</p> + +<p>L'attribut {{htmlattrxref("placeholder", "input")}} indique qu'une valeur semblable à <code>"nomutilisateur@beststartupever.com"</code> est attendue. L'intérêt de cette valeur est double : on indique qu'il faut saisir une adresse mail et on suggère que cette adresse provient d'un compte beststartupever.com. Le type <code>"email"</code> permet de valider le texte saisi afin de vérifier qu'il s'agit d'une adresse électronique valide. Si la valeur saisie n'est pas une adresse valide, un message d'erreur sera affiché :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14855/enter-valid-email-address.png" style="height: 125px; width: 530px;"></p> + +<p>Si on utilise uniquement les attributs qu'on vient de décrire, on restreint les valeurs saisissables aux adresses électroniques valides de 64 caractères. Or, on veut également valider le fait que l'adresse respecte le format "<em>nomutilisateur</em>@beststartupever.com". C'est pourquoi on utilise l'attribut {{htmlattrxref("pattern", "input")}} avec la valeur <code>".+@beststartupever.com"</code>. Cette valeur est une expression rationnelle qui permet de vérifier que la chaîne de caractère contient un ou plusieurs caractères quelconques, ensuite suivi d'une arobase (@) puis du nom de domaine "beststartupever.com".</p> + +<p>On notera que cette expression rationnelle ne permet pas de vérifier que l'adresse électronique est valide (on pourra par exemple avoir " @beststartupever.com" (avec un espace en début de chaîne) ou encore "@@beststartupever.com" qui ne sont pas valides). En fait, le navigateur vérifie que l'adresse respecte l'expression rationnelle fournie <strong>et</strong> que l'adresse est valide. Autrement dit, avec le type <code>"email"</code> et cette valeur pour l'attribut <code>pattern</code>, on s'assure que l'adresse est une adresse électronique valide et que c'est une bien une adresse avec le nom de domaine "beststartupever.com".</p> + +<p>Lorsqu'on utilise l'attribut <code>pattern</code> Il est conseillé d'utilisé l'attribut {{htmlattrxref("title")}} afin de décrire le motif de l'expression ratioennelle. Autrement dit, dans ce cas, l'attribut <code>title</code> doit décrire le format souhaité plutôt que contenir une autre information. En effet, cet attribut sera affiché ou prononcé en cas d'erreur. Par exemple, le navigateur pourrait afficher le message "Le texte saisi ne correspond pas au motif requis." suivi du texte indiqué dans la valeur de <code>title</code>. Par exemple si l'attribut <code>title</code> vaut "Adresse email", le message affiché serait "Le texte saisi ne correspond pas au motif requis. Adresse email" ce qui n'est pas correct.</p> + +<p>C'est pour cela qu'on indique la chaîne de caractères "Merci de fournir uniquement une adresse Best Startup Ever". Le message complet obtenu sera donc : "Le texte saisi ne correspond pas au motif requis. Merci de fournir uniquement une adresse Best Startup Ever."</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14853/email-pattern-match-bad.png" style="height: 140px; width: 536px;"></p> + +<div class="note"> +<p><strong>Note :</strong> Si vous rencontrez des problèmes à propos de l'expression rationnelle, n'hésitez pas à ouvrir la console du navigateur. Cette dernière peut contenir des messages d'erreur aidant à diagnostiquer et résoudre le problème.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<p>Dans l'exemple qui suit, on peut saisir une adresse électronique qui contient au plus 256 caractères. La boîte de saisie affichera au plus 64 caractères et contiendra le texte <code>"user@example.gov"</code> comme indication lorsque le champ est vide. On trouve également l'attribut {{htmlattrxref("multiple", "input")}} qui permet de saisir zéro ou plusieurs adresses séparées par des virgules (cf. ci-avant). Enfin, l'attribut {{htmlattrxref("list", "input")}} utilisé indique un identifiant d'un élément {{HTMLElement("datalist")}} dont les éléments {{HTMLElement("option")}} déterminent les valeurs suggérées qui peuvent être sélectionnées par l'utilisateur.</p> + +<p>L'élément {{HTMLElement("label")}} qui précède l'élément <code><input></code> permettra d'afficher un libellé avant la boîte de saisie. Le lien entre les deux est fait grâce à l'attribut <code>for</code> qui contient <code>"emailAddress"</code> qui est l'identifiant de l'élément {{HTMLElement("input")}}. Grâce à cette association, cliquer sur l'étiquette permettra de placer le focus sur le champ de saisie.</p> + +<pre class="brush: html"><label for="emailAddress">Email</label><br/> +<input id="emailAddress" type="email" placeholder="user@example.gov" + list="defaultEmails" size="64" maxlength="256" multiple> + +<datalist id="defaultEmails"> + <option value="jbond007@mi6.defence.gov.uk"> + <option value="jbourne@unknown.net"> + <option value="nfury@shield.org"> + <option value="tony@starkindustries.com"> + <option value="hulk@grrrrrrrr.arg"> +</datalist></pre> + +<p>{{EmbedLiveSample('Exemples', 600, 50)}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères ({{domxref("DOMString")}}) représentant une adresse électronique ou une chaîne vide.</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}</td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("multiple", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} et {{htmlattrxref("size", "input")}}</td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>list</code> et <code>value</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}</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#e-mail-state-(type=email)', '<input type="email">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#email-state-typeemail', '<input type="email">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-email")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Le guide relatif aux formulaires HTML</a></li> + <li>{{HTMLElement("input")}}</li> + <li><code><a href="/fr/docs/Web/HTML/Element/input"><input type="tel"></a></code></li> +</ul> diff --git a/files/fr/web/html/element/input/file/index.html b/files/fr/web/html/element/input/file/index.html new file mode 100644 index 0000000000..6c64a3e012 --- /dev/null +++ b/files/fr/web/html/element/input/file/index.html @@ -0,0 +1,502 @@ +--- +title: <input type="file"> +slug: Web/HTML/Element/Input/file +tags: + - HTML + - Input + - Reference +translation_of: Web/HTML/Element/input/file +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <strong><code>"file"</code></strong> permettent à un utilisateur de sélectionner un ou plusieurs fichiers depuis leur appareil et de les <em>uploader</em> vers un serveur via <a href="/fr/docs/Web/Guide/HTML/Formulaires">un formulaire</a> ou grâce à du code JavaScript <a href="/fr/docs/Using_files_from_web_applications">via l'API <em>File</em></a>.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-file.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> + +<h2 id="Valeur">Valeur</h2> + +<p>L'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères ({{domxref("DOMString")}}) qui représente le chemin du/des fichier(s) sélectionné(s). Les autres fichiers peuvent être identifiés grâce à la propriété <code>HTMLInputElement.files</code>.</p> + +<div class="note"><strong>Note :</strong> + +<ol> + <li>Si plusieurs fichiers sont sélectionnés, la chaîne de caractères représente le chemin du premier fichier sélectionné. Il est possible d'accéder aux autres fichiers en JavaScript <a href="/en-US/docs/Using_files_from_web_applications#Getting_information_about_selected_file(s)">grâce à la propriété <code>FileList</code></a>.</li> + <li>Si aucun fichier n'est sélectionné, la chaîne de caractères sera vide (<code>""</code>).</li> + <li>La chaîne de caractères <a href="https://html.spec.whatwg.org/multipage/input.html#fakepath-srsly">est préfixée avec <code>C:\fakepath\</code></a> afin d'éviter la fuite d'informations sensibles concernant la structure des fichiers de l'utilisateur.</li> +</ol> +</div> + +<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> + +<p>En complément des attributs partagés par l'ensemble des éléments {{HTMLElement("input")}}, les champs de type <code>file</code> peuvent également utiliser les attributs suivants :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribut</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("accept")}}</code></td> + <td>Un ou plusieurs identifiants de type de fichier décrivants les types de fichier autorisés.</td> + </tr> + <tr> + <td><code>{{anch("capture")}}</code></td> + <td>La source à utiliser pour capturer des images ou des vidéos.</td> + </tr> + <tr> + <td><code>{{anch("files")}}</code></td> + <td>Un objet {{domxref("FileList")}} qui liste les fichiers choisis</td> + </tr> + <tr> + <td><code>{{anch("multiple")}}</code></td> + <td>Un attribut booléen qui, lorsqu'il est présent, indique que plusieurs fichiers peuvent être sélectionnés.</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefaccept">{{htmlattrdef("accept")}}</h3> + +<p>Une chaîne de caractères qui définit les types de fichier qui devraient être acceptés. Cette chaîne est une liste d'identifiants de type de fichier (cf. ci-après) séparés par des virgules. Un fichier pouvant avoir un format selon différentes extensions et types MIME, il est souvent utile de cibler plusieurs identifiants pour la bonne sélection du fichier.</p> + +<p>Les fichiers Microsoft Word, par exemple, peuvent être identifiés de différentes façons et, dans un site avec un champ qui accepte les fichiers Word, on pourra écrire :</p> + +<pre class="brush: html"><input type="file" id="docpicker" + accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"></pre> + +<h3 id="htmlattrdefcapture">{{htmlattrdef("capture")}}</h3> + +<p>Une chaîne de caractères qui indique la caméra à utiliser pour capturer des photos et des vidéos si l'attribut <code>accept</code> indique que le fichier est de ce type. Lorsque <code>capture</code> vaut <code>"user"</code>, cela indique que la caméra qui fait face à l'utilisateur devrait être utilisée. Si l'attribut vaut <code>"environment"</code>, c'est la caméra qui est tournée vers l'extérieur devrait être utilisée. Si l'attribut est absent, l'agent utilisateur pourra décider de laquelle utiliser. Si la caméra souhaitée par l'attribut n'est pas disponible, l'agent utilisateur pourra utiliser une autre caméra de l'appareil.</p> + +<div class="note"><strong>Note :</strong> <code>capture</code> était auparavant un attribut booléen qui, lorsqu'il était présent, indiquait que les capteurs de l'appareil (caméra/micro) devaient être utilisés plutôt qu'un fichier.</div> + +<h3 id="htmlattrdeffiles">{{htmlattrdef("files")}}</h3> + +<p>Un objet {{domxref("FileList")}} qui liste chaque fichier sélectionné. Cette liste n'a qu'un seul élément, sauf si {{htmlattrxref("multiple", "input/file")}} est indiqué.</p> + +<h3 id="htmlattrdefmultiple">{{htmlattrdef("multiple")}}</h3> + +<p>Lorsque cet attribut booléen est indiqué, le champ peut être utilisé afin de sélectionner plus d'un fichier.</p> + +<h2 id="Attribut_non-standard">Attribut non-standard</h2> + +<p>En complément des attributs précédents, les éléments <code><input type="file"></code> peuvent utiliser les attributs spécifiques suivants. Ces attributs ne sont pas standard et ne devraient donc pas être utilisés.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribut</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("webkitdirectory")}}</code></td> + <td>Un attribut booléen qui indique si l'utilisateur peut choisir un répertoire (ou plusieurs si <code>{{anch("multiple")}}</code> est présent).</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefwebkitdirectory_non-standard_inline">{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}</h3> + +<p>L'attribut booléen <code>webkitdirectory</code>, lorsqu'il est présent, indique que le contrôle permet de sélectionner un/des répertoires plutôt qu'un/des fichiers. Voir {{domxref("HTMLInputElement.webkitdirectory")}} pour plus de détails et d'exemples.</p> + +<div class="note"> +<p><strong>Note :</strong> Bien que cet attribut ait initialement été implémenté pour les navigateurs WebKit, <code>webkitdirectory</code> est utilisable avec Microsoft Edge et pour Firefox 50 et supérieurs. Toutefois, bien que la prise en charge soit assez vaste, cet attribut reste non-standard et ne doit pas être utilisé.</p> +</div> + +<h2 id="Identifiants_de_type_de_fichier">Identifiants de type de fichier</h2> + +<p>Un identifiant de type de fichier est une chaîne de caractères qui décrit le type de fichier qui peut être sélectionné par un utilisateur via un élément {{HTMLElement("input")}} de type <code>file</code>. Chaque identifiant peut prendre une des formes suivantes :</p> + +<ul> + <li>Une extension de fichier valide, sensible à la casse et qui commence par un point (« . »). Par exemple : <code>.jpg</code>, <code>.pdf</code> ou <code>.doc</code>.</li> + <li>Un type MIME valide, sans extension.</li> + <li>La chaîne de caractères <code>audio/*</code> qui indique « n'importe quel fichier audio »</li> + <li>La chaîne de caractères <code>video/*</code> qui indique « n'importe quel fichier vidéo »</li> + <li>La chaîne de caractères <code>image/*</code> qui indique « n'importe quel fichier image ».</li> +</ul> + +<p>L'attribut <code>accept</code> prend comme valeur une chaîne de caractères composée d'un ou plusieurs identifiants de type, séparés par des virgules. Ainsi, si un sélecteur de fichier doit permettre de sélectionner des images ou des documents PDF, on pourra écrire :</p> + +<pre class="brush: html"><input type="file" accept="image/*,.pdf"></pre> + +<h2 id="Utiliser_<input_typefile>">Utiliser <code><input type="file"></code></h2> + +<h3 id="Un_exemple_simple">Un exemple simple</h3> + +<pre class="brush: html"><form method="post" enctype="multipart/form-data"> + <div> + <label for="file">Sélectionner le fichier à envoyer</label> + <input type="file" id="file" name="file" multiple> + </div> + <div> + <button>Envoyer</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; +}</pre> +</div> + +<p>Ce fragment de code HTML produira le résultat suivant :</p> + +<p>{{EmbedLiveSample('Un_exemple_simple', 650, 60)}}</p> + +<div class="note"> +<p><strong>Note</strong> : Vous pouvez également trouver cet exemple sur GitHub — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html">avec le code source</a> et <a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html">la démonstration</a>.</p> +</div> + +<p>Quel que soit l'appareil ou le système d'exploitation de l'utilisateur, l'élément <code><input type="file"></code> fournit un bouton qui ouvre un sélecteur de fichier permettant de choisir un fichier.</p> + +<p>Lorsque l'attribut {{htmlattrxref("multiple", "input")}} est utilisé (comme dans l'exemple précédent), cela signifie que plusieurs fichiers peuvent être sélectionnés de façon simultanée. L'utilisateur doit alors pouvoir choisir plusieurs fichiers depuis le sélecteur de fichier (par exemple en maintenant la touche <kbd>Shift</kbd> ou <kbd>Control</kbd> puis en cliquant). Si on souhaite qu'un seul fichier puisse être envoyé, il suffit de ne pas utiliser l'attribut <code>multiple</code>.</p> + +<p>Lorsqu'on envoie le formulaire de l'exemple, le nom de chaque fichier sera ajouté aux paramètres de l'URL de la façon suivante : <code>?file=fichier1.txt&file=fichier2.txt</code></p> + +<h3 id="Obtenir_des_informations_sur_les_fichiers_sélectionnés">Obtenir des informations sur les fichiers sélectionnés</h3> + +<p>Les fichiers sélectionnés peuvent être obtenus sous la forme d'un objet {{domxref("FileList")}} renvoyé par la propriété <code>HTMLInputElement.files</code> de l'élement du DOM. Cet objet est une liste d'objets {{domxref("File")}}. Un objet <code>FileList</code> se comporte comme un tableau et on peut donc consulter sa longueur (la propriété <code>length</code>) afin de connaître le nombre de fichiers sélectionnés.</p> + +<p>Chaque objet <code>File</code> contient les informations suivantes :</p> + +<ul> + <li><code>name</code> : le nom du fichier.</li> + <li><code>lastModified</code> : un nombre représentant la date à laquelle le fichier a été modifié pour la dernière fois (sous la forme d'un horodatage UNIX).</li> + <li><code>lastModifiedDate</code> : un objet {{domxref("Date")}} qui représente la date et l'heure à laquelle le fichier a été modifié pour la dernière fois.</li> + <li><code>size</code> : un nombre qui représente la taille du fichier en octets.</li> + <li><code>type</code> : une chaîne de caractères ({{domxref("DOMString")}}) qui représente <a href="/fr/docs/Glossaire/Type_MIME">le type MIME</a> du fichier.</li> + <li><code>webkitRelativePath</code>{{non-standard_inline}} : une chaîne de caractères qui indique l'emplacement relatif du fichier par rapport au dossier de base indiqué par l'attribut {{htmlattrxref("webkitdirectory", "input")}}. <em>Attention, cette fonctionnalité est non-standard et doit être utilisée avec précaution.</em></li> +</ul> + +<div class="note"> +<p><strong>Note :</strong> Dans la plupart des navigateurs récents, il est possible de récupérer et de modifier l'attribut IDL <code>HTMLInputElement.files</code>. Pour Firefox, cela a été ajouté avec la version 57 (cf. {{bug(1384030)}}).</p> +</div> + +<h3 id="Restreindre_les_types_de_fichiers_acceptés">Restreindre les types de fichiers acceptés</h3> + +<p>Il arrive souvent qu'on souhaite sélectionner certains types de fichiers. Par exemple, si on souhaite fournir une image de profil, on restreindra probablemnt les formats à ceux des formats d'image compatibles pour le Web comme <a href="/fr/docs/Glossaire/jpeg">JPEG</a> ou <a href="/fr/docs/Glossaire/PNG">PNG</a>.</p> + +<p>Pour cela, on peut utiliser l'attribut {{htmlattrxref("accept","input")}} afin d'indiquer les formats de fichier acceptés (sous la forme d'une liste d'extensions de fichier ou de types MIME séparés par des virgules). Par exemple :</p> + +<ul> + <li><code>accept="image/png"</code> ou <code>accept=".png"</code> permettra de n'accepter que les fichiers PNG.</li> + <li><code>accept="image/png, image/jpeg"</code> ou <code>accept=".png, .jpg, .jpeg"</code> permettra de n'accepter que les fichiers PNG ou JPEG.</li> + <li><code>accept="image/*"</code> permettra d'accepter n'importe quel fichier dont le type MIME est <code>image/*</code> (pour de nombreux appareils mobiles, cette valeur permet d'utiliser l'appareil photo de l'appareil afin de prendre une photo qui sera utilisée comme fichier à envoyer).</li> + <li><code>accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"</code> permettra d'accepter un fichier ressemblant à un document Word.</li> +</ul> + +<p>Prenons un exemple :</p> + +<pre class="brush: html"><form method="post" enctype="multipart/form-data"> + <div> + <label for="profile_pic">Sélectionnez le fichier à utiliser</label> + <input type="file" id="profile_pic" name="profile_pic" + accept=".jpg, .jpeg, .png"> + </div> + <div> + <button>Envoyer</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; +}</pre> +</div> + +<p>Voici le résultat produit :</p> + +<p>{{EmbedLiveSample('Restreindre_les_types_de_fichiers_acceptés', 650, 60)}}</p> + +<div class="note"> +<p><strong>Note</strong> : Vous pouvez également consulter cet exemple sur GitHub — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-with-accept.html">voir le code source</a> et <a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-with-accept.html">la démonstration <em>live</em></a>.</p> +</div> + +<p>Le résultat peut sembler similaire à l'exemple précédent mais lorsque vous essayer de sélectionner un fichier, vous verrez que le sélecteur ne permet de sélectionner que les fichiers du/des type(s) indiqué(s) (il peut y avoir certaines différences selons les navigateurs et les systèmes d'exploitation).</p> + +<p><img alt="Screenshot of a macOS file picker dialog. Files other than JPEG are grayed-out and unselectable." src="https://mdn.mozillademos.org/files/15183/file-chooser.png" style="margin: 0 auto;"></p> + +<p>L'attribut <code>accept</code> ne permet pas de valider/contrôler le type réel du/des fichier(s) sélectionné(s). Il fournit simplement une indication au navigateur pour aider l'utilisateur à sélectionner les bons fichiers. Toutefois, dans la plupart des cas, l'utilisateur peut toujours choisir une option dans le sélecteur afin de pouvoir choisir un fichier d'un autre type.</p> + +<p>Dans tous les cas (et comme pour les autres éléments envoyés au serveur), il est nécessaire de contrôler les données reçues par un mécanisme de validation côté serveur.</p> + +<h3 id="Notes">Notes</h3> + +<ol> + <li>À partir de {{Gecko("2.0")}}, appeler la méthode <code>click()</code> sur un élément de type <code>file</code> ouvre le sélecteur de fichier et permet à un utilisateur de sélectionner les fichiers sur son système d'opération. Pour plus d'exemples, voir Utiliser des fichiers avec des applications web.</li> + <li> + <p>Il n'est pas possible de définir la valeur du sélecteur de fichier via un script. Le code suivant n'aura aucun effet :</p> + + <pre class="brush: js">const input = document.querySelector("input[type=file]"); +input.value = "toto"; +</pre> + </li> + <li>Lorsqu'on choisit un fichier via <code><input type="file"></code>, le chemin réel du fichier source n'est pas transmis dans la valeur de l'attribut <code>value</code> pour des raisons de sécurité. À la place, on a le nom du fichier précédé du chemin <code>C:\fakepath\</code>. Cela provient de raisons historiques, est pris en charge par la plupart des navigateurs modernes. Cela a même été <a href="https://html.spec.whatwg.org/multipage/forms.html#fakepath-srsly">inscrit dans la spécification</a>.</li> +</ol> + +<h2 id="Exemples">Exemples</h2> + +<p>Dans l'exemple qui suit, on présente sélecteur de fichiers plus avancé, qui tire parti des informations disponibles grâce à la propriété <code>HTMLInputElement.files</code>. On montre aussi quelques astuces.</p> + +<div class="note"> +<p><strong>Note </strong>: Le code source complet de cet exemple est disponible sur GitHub — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html">file-example.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html">voir la démonstration <em>live</em> associée</a>). Nous n'expliquerons pas ici la feuille de style CSS mais plutôt le code JavaScript qui contient la logique.</p> +</div> + +<p>Tout d'abord, voici le fragment de code HTML utilisé :</p> + +<pre class="brush: html"><form method="post" enctype="multipart/form-data"> + <div> + <label for="image_uploads">Sélectionner des images à uploader (PNG, JPG)</label> + <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple> + </div> + <div class="preview"> + <p>Aucun fichier sélectionné pour le moment</p> + </div> + <div> + <button>Envoyer</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css">html { + font-family: sans-serif; +} + +form { + width: 600px; + background: #ccc; + margin: 0 auto; + padding: 20px; + border: 1px solid black; +} + +form ol { + padding-left: 0; +} + +form li, div > p { + background: #eee; + display: flex; + justify-content: space-between; + margin-bottom: 10px; + list-style-type: none; + border: 1px solid black; +} + +form img { + height: 64px; + order: 1; +} + +form p { + line-height: 32px; + padding-left: 10px; +} + +form label, form button { + background-color: #7F9CCB; + padding: 5px 10px; + border-radius: 5px; + border: 1px ridge black; + font-size: 0.8rem; + height: auto; +} + +form label:hover, form button:hover { + background-color: #2D5BA3; + color: white; +} + +form label:active, form button:active { + background-color: #0D3F8F; + color: white; +}</pre> +</div> + +<p>Pour l'instant, le fragment HTML ressemble à ce que nous avons déjà vu avant, rien de spécial.</p> + +<p>Voyons maintenant le code JavaScript utilisé :</p> + +<p>Pour les premières lignes du script, on récupère des références au formulaire et à l'élément {{htmlelement("div")}} qui possède la classe <code>.preview</code>. Ensuite, on masque l'élément {{htmlelement("input")}} car leur apparence peut être incohérente entre les navigateurs et qu'il est difficile de les mettre en forme. Cliquer sur l'élément {{htmlelement("label")}} suffit à ouvrir le sélecteur et nous mettons donc en forme cet élément à la façon d'un bouton. Ainsi, l'utilisateur saura comment interagir avec le document pour <em>uploader</em> des fichiers.</p> + +<pre class="brush: js">var input = document.querySelector('input'); +var preview = document.querySelector('.preview'); + +input.style.opacity = 0;</pre> + +<div class="note"> +<p><strong>Note : </strong>La propriété <a href="/fr/docs/Web/CSS/opacity"><code>opacity</code></a> est utilisée pour masquer l'élément <code><input></code> plutôt que <a href="/fr/docs/Web/CSS/visibility"><code>visibility: hidden</code></a> ou <a href="/fr/docs/Web/CSS/display"><code>display: none</code></a>. En effet, avec ces derniers les technologies d'assistance (lecteurs d'écran par exemple) comprendraient que l'élément n'est pas interactif et ne peut pas être utilisé.</p> +</div> + +<p>Ensuite, on ajoute <a href="/fr/docs/Web/API/EventTarget/addEventListener">un gestionnaire d'évènement</a> à l'élément <code><input></code> afin de réaliser certaines actions lorsque sa valeur (c'est-à-dire les fichiers sélectionnés) change. Ici, le gestionnaire d'évènement appelle la fonction <code>updateImageDisplay()</code> que nous décrirons juste après.</p> + +<pre class="brush: js">input.addEventListener('change', updateImageDisplay);</pre> + +<p>À chaque fois que la fonction <code>updateImageDisplay()</code> est appelée :</p> + +<ul> + <li>On lance une boucle <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a></code> afin de vider le contenu qui pourrait être dans l'élément <code><div></code> servant à la prévisualisation.</li> + <li>On récupère l'objet {{domxref("FileList")}} qui contient les informations sur les fichiers sélectionnés et on le stocke dans une variable intitulée <code>curFiles</code>.</li> + <li>On vérifie si aucun fichier n'a été sélectionné (ce qui se traduit par vérifier si <code>curFiles.length</code> vaut 0). Si c'est le cas, on place un message dans le <code><div></code> de prévisualisation pour indiquer qu'aucun fichier n'a été sélectionné.</li> + <li>Si des fichiers ont été sélectionnés, on les parcourt afin d'afficher des informations sur ces fichiers dans l'élément <code><div></code>. Quelques notes : + <ul> + <li>On utilise une fonction <code>validFileType()</code> afin de vérifier si le fichier est bien du bon type (c'est-à-dire qu'il respecte les extensions d'image indiquées dans l'attribut <code>accept</code>). + <ul> + <li>Si c'est le cas : + <ul> + <li>On affiche le nom et la taille du fichier dans une liste à l'intérieur du <code><div></code> (obtenus à partir de <code>curFiles[i].name</code> et <code>curFiles[i].size</code>). La fonction <code>returnFileSize()</code> est utilisée ici afin d'afficher la taille de façon lisible (en octets, kilo-octets ou mega-octets plutôt que toujours en octets).</li> + <li>On génère un aperçu de l'image en appelant la méthode <code>window.<a href="/fr/docs/Web/API/URL/createObjectURL">URL.createObjectURL</a>(curFiles[i])</code> et en réduisant l'image grâce à du CSS puis on insère cette image dans la liste.</li> + </ul> + </li> + <li>Si le type de fichier est invalide, on affiche un message dans la liste afin d'indiquer à l'utilisateur qu'il est nécessaire de sélectionner un autre type de fichier.</li> + </ul> + </li> + </ul> + </li> +</ul> + +<pre class="brush: js">function updateImageDisplay() { + while(preview.firstChild) { + preview.removeChild(preview.firstChild); + } + + var curFiles = input.files; + if(curFiles.length === 0) { + var para = document.createElement('p'); + para.textContent = 'No files currently selected for upload'; + preview.appendChild(para); + } else { + var list = document.createElement('ol'); + preview.appendChild(list); + for(var i = 0; i < curFiles.length; i++) { + var listItem = document.createElement('li'); + var para = document.createElement('p'); + if(validFileType(curFiles[i])) { + para.textContent = 'File name ' + curFiles[i].name + ', file size ' + returnFileSize(curFiles[i].size) + '.'; + var image = document.createElement('img'); + image.src = window.URL.createObjectURL(curFiles[i]); + + listItem.appendChild(image); + listItem.appendChild(para); + + } else { + para.textContent = 'File name ' + curFiles[i].name + ': Not a valid file type. Update your selection.'; + listItem.appendChild(para); + } + + list.appendChild(listItem); + } + } +}</pre> + +<p>La fonction <code>validFileType()</code> prend un objet {{domxref("File")}} en entrée puis parcourt la liste des types de fichier autorisés pour les comparer à la propriété <code>type</code> du fichier. Si on trouve une correspondance (ce qui signifie que le type est bien autorisé), la fonction renvoie <code>true</code>, sinon, elle renvoie <code>false</code>.</p> + +<pre class="brush: js">var fileTypes = [ + 'image/jpeg', + 'image/pjpeg', + 'image/png' +] + +function validFileType(file) { + for(var i = 0; i < fileTypes.length; i++) { + if(file.type === fileTypes[i]) { + return true; + } + } + + return false; +}</pre> + +<p>La fonction <code>returnFileSize()</code> prend en entrée un nombre d'octets (dans notre exemple, celui-ci provient de la propriété <code>size</code> du fichier) et le transforme en une chaîne de caractères plus compréhensible avec une taille en octets/Ko/Mo.</p> + +<pre class="brush: js">function returnFileSize(number) { + if(number < 1024) { + return number + ' octets'; + } else if(number >= 1024 && number < 1048576) { + return (number/1024).toFixed(1) + ' Ko'; + } else if(number >= 1048576) { + return (number/1048576).toFixed(1) + ' Mo'; + } +}</pre> + +<p>Et voici le résultat :</p> + +<p>{{EmbedLiveSample('Exemples', '100%', 200)}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente le chemin du fichier sélectionné.</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}</td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td>{{htmlattrxref("accept", "input/file")}}, {{htmlattrxref("capture", "input/file")}}, {{htmlattrxref("files", "input/file")}}, {{htmlattrxref("multiple", "input/file")}}</td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>files</code> et <code>value</code></td> + </tr> + <tr> + <td><strong>Interface DOM</strong></td> + <td>{{domxref("HTMLInputElement")}}</td> + </tr> + <tr> + <td><strong>Propriétés</strong></td> + <td><a href="/fr/docs/Web/API/HTMLInputElement#Properties_file">Propriétés pour les éléments <code>HTMLInputElement</code> de type <code>file</code></a></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}</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', 'input.html#file-upload-state-(type=file)', '<input type="file">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#file-upload-state-typefile', '<input type="file">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-file")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Using_files_from_web_applications">Manipuler des fichiers à partir d'applications web</a> contient différents exemples d'applications relatifs à <code><input type="file"></code></li> + <li><a href="/fr/docs/Web/API/File">L'API <em>File</em></a>.</li> +</ul> diff --git a/files/fr/web/html/element/input/hidden/index.html b/files/fr/web/html/element/input/hidden/index.html new file mode 100644 index 0000000000..f58ba589fd --- /dev/null +++ b/files/fr/web/html/element/input/hidden/index.html @@ -0,0 +1,232 @@ +--- +title: <input type="hidden"> +slug: Web/HTML/Element/Input/hidden +tags: + - Element + - Input + - Reference +translation_of: Web/HTML/Element/input/hidden +--- +<div>{{HTMLRef}}</div> + +<p>Les éléments {{HTMLElement("input")}} de type <code><strong>"hidden"</strong></code> permettent aux développeurs web d'inclure des données qui ne peuvent pas être vues ou modifiées lorsque le formulaire est envoyé. Cela permet par exemple d'envoyer l'identifiant d'une commande ou un jeton de sécurité unique. Les champs de ce type sont invisibles sur la page.</p> + +<div class="note"> +<p><strong>Note </strong>: La ligne de code suivante est suivie du rendu associé... si l'exemple fonctionne correctement, vous ne devriez rien voir :)</p> +</div> + +<div id="Basic_example"> +<pre class="brush: html"><input id="prodId" name="prodId" type="hidden" value="xm234jq"></pre> + +<p>{{EmbedLiveSample('Basic_example', 600, 40)}}</p> + +<div class="blockIndicator note"> +<p><strong>Note :</strong> Attention, les évènements DOM <code><a href="/fr/docs/Web/API/HTMLElement/input_event">input</a></code> et <code><a href="/fr/docs/Web/API/HTMLElement/change_event">change</a></code> ne s'appliquent pas à ce type de contrôle. Les champs masqués ne peuvent pas recevoir le focus, y compris en JavaScript avec <code>hiddenInput.focus()</code>).</p> +</div> +</div> + +<h2 id="Valeur">Valeur</h2> + +<p>L'attribut {{htmlattrxref("value", "input")}} de l'élément contient une chaîne de caractères masquée qui est envoyée au serveur avec le formulaire. Cette valeur ne peut pas directement être éditée par l'utilisateur sur la page (mais elle est toujours accessible et modifiable via les outils de développement intégrés au navigateur).</p> + +<div class="warning"> +<p><strong>Attention !</strong> Bien que la valeur ne soit pas affichée sur la page, elle est visible et modifiable par l'utilisateur si ce dernier utilise les outils de développements intégrés aux navigateurs (par exemple "Afficher la source"). Le type <code>hidden</code> ne doit donc pas être utilisé comme mécanisme de sécurité.</p> +</div> + +<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> + +<p>En complément des attributs communs à l'ensemble des éléments <code><input></code>, les champs masqués peuvent utiliser les attributs suivants :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribut</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("name")}}</code></td> + <td>À l'instar de l'ensemble des champs de saisie, ce sera le nom auquel associer la donnée lors de l'envoi du formulaire. Si la valeur spéciale <code>"_charset_"</code> est utilisée pour cet attribut, la valeur du champ sera l'encodage utilisé pour l'envoi du formulaire.</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdef(name)">{{htmlattrdef("name")}}</h3> + +<p>Cet attribut fait partie des attributs communs à l'ensemble des éléments <code><input></code> mais il possède un comportement particulier pour les champs masqués. En effet, si cet attribut utilise la valeur spéciale <code>"_charset_"</code>, la valeur du champ envoyée avec le formulaire sera l'encodage utilisé pour l'envoi du formulaire.</p> + +<h2 id="Utiliser_les_valeurs_masquées_dans_les_formulaires">Utiliser les valeurs masquées dans les formulaires</h2> + +<p>Comme évoqué ci-avant, les éléments <code><input type="hidden"</code>> peuvent être utilisés lorsque le formulaire sert à transmettre des données avec lesquelles l'utilisateur n'est pas censé intéragir.</p> + +<h3 id="Suivre_les_modifications_apportées_au_contenu">Suivre les modifications apportées au contenu</h3> + +<p>Un usage fréquent de ces éléments est de garder un registre des données qui doivent être mises à jour dans une base de données lorsque le formulaire est envoyé. Le processus est généralement le suivant :</p> + +<ol> + <li>L'utilisateur édite du contenu (un billet de blog, une fiche d'un produit) en commençant par cliquer sur le bouton Éditer.</li> + <li>Le contenu à modifier est extrait de la base de données et est chargé dans le formulaire HTML afin que l'utilisateur puis appliquer les modifications voulues.</li> + <li>Après avoir éditer, l'utilisateur envoie le formulaire et les données mises à jour sont envoyées au serveur qui se charge d'appliquer cette mise à jour en base de données.</li> +</ol> + +<p>Ici, lors de la deuxième étape, on peut récupérer l'identifiant de l'enregistrement et le placer dans un champ caché du formulaire. Lorsque le formulaire est envoyé à l'étape 3, l'identifiant est automatiquement envoyé au serveur avec le contenu. L'identifiant permet alors au serveur de connaître l'enregistrement de la base de données qui doit être mis à jour.</p> + +<p>Pour un exemple complet, voir la section {{anch("Exemples")}} ci-après.</p> + +<h3 id="Contribuer_à_la_sécurité_d'un_site_web">Contribuer à la sécurité d'un site web</h3> + +<p>Les champs masqués sont également employés afin de stocker des jetons de sécurité (aussi appelés « secrets ») afin d'améliorer la sécurité d'un site. Pour un formulaire sensible (par exemple le transfert d'argent d'un compte à un autre sur un site bancaire), le secret est généré par le serveur et intégré sur la page afin de prouver l'identité de l'utilisateur et que c'est bien le bon formulaire qui est utilisé pour effectuer le transfert.</p> + +<p>Cela permet d'éviter le cas où quelqu'un crée un faux site et un faux formulaire pour transférer de l'argent sur le mauvais compte (c'est ce qu'on appelle <a href="https://fr.wikipedia.org/wiki/Cross-Site_Request_Forgery">Cross Site Request Forgery (CSRF)</a>).</p> + +<div class="note"> +<p><strong>Note :</strong> Comme indiqué précédemment, placer le secret dans un champ masqué ne le rend pas plus sécurisé. La composition, l'encodage de la clé et la vérification par le serveur sont autant d'étapes cruciales pour garantir la qualité du secret utilisé. Le champ masqué n'est finalement qu'un outil qui simplifie l'envoi de cette information au serveur lorsque l'utilisateur envoie le formulaire.</p> +</div> + +<h2 id="Validation">Validation</h2> + +<p>Aucune contrainte de validation n'est appliquée sur ces valeurs.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Voyons comment implémenter une version simple du formulaire d'édition décrit précédemment : on utilise un champ masqué pour mémoriser l'identifiant de la donnée qui est modifiée.</p> + +<h3 id="HTML">HTML</h3> + +<p>Voici le fragment HTML pour le formulaire :</p> + +<pre class="brush: html"><form> + <div> + <label for="title">Titre du billet :</label> + <input type="text" id="title" name="title" value="Mon meilleur billet"> + </div> + <div> + <label for="content">Contenu :</label> + <textarea id="content" name="content" cols="60" rows="5"> +Voici le contenu de mon meilleur billet, j'espère que ça vous plaît ! + </textarea> + </div> + <div> + <button type="submit">Mettre à jour le billet</button> + </div> + <input type="hidden" id="postId" name="postId" value="34657"> +</form></pre> + +<h3 id="CSS">CSS</h3> + +<p>Ajoutons quelques éléments de mise en forme :</p> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +form { + width: 500px; +} + +div { + display: flex; + margin-bottom: 10px; +} + +label { + flex: 2; + line-height: 2; + text-align: right; + padding-right: 20px; +} + +input, textarea { + flex: 7; + font-family: sans-serif; + font-size: 1.1rem; + padding: 5px; +} + +textarea { + height: 60px; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<p>Le serveur génèrera la page HTML avec l'identifiant <code>"postID"</code> qui contient l'identifiant du billet de la base de données. Lorsque l'utilisateur termine l'édition, c'est le navigateur qui envoie cette donnée au serveur ainsi que les autres données du formulaire. Aucun code JavaScript n'est nécessaire pour gérer cela.</p> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample('Exemples', '100%', 200)}}</p> + +<div class="note"> +<p><strong>Note </strong>: Vous pouvez consulter l'exemple sur GitHub (cf. <a href="https://github.com/mdn/learning-area/blob/master/html/forms/hidden-input-example/index.html">le code source</a> et <a href="https://mdn.github.io/learning-area/html/forms/hidden-input-example/index.html">la démonstration <em>live</em></a>).</p> +</div> + +<p>Lorsque le formulaire est envoyé, les données envoyées au serveur ressembleront à :</p> + +<p><code>title=Mon+meilleur+billet&content=Le+contenu+de+mon+meilleur+article.+J'espère+qu'il+vous+plaît!&postId=34657</code></p> + +<p>Bien que le champ masqué soit invisible sur la page, il fait toujours partie des données envoyées.</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de la donnée masquée qu'on souhaite envoyer au serveur.</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>Aucun.</td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}</td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td>Aucune.</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#hidden-state-(type=hidden)', '<input type="hidden">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.2', 'sec-forms.html#hidden-state-typehidden', '<input type="hidden">')}}</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">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-hidden")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Guide sur les formulaires HTML</a></li> + <li>{{HTMLElement("input")}}</li> + <li>L'interface DOM {{domxref("HTMLInputElement")}}</li> +</ul> diff --git a/files/fr/web/html/element/input/image/index.html b/files/fr/web/html/element/input/image/index.html new file mode 100644 index 0000000000..41560c72d2 --- /dev/null +++ b/files/fr/web/html/element/input/image/index.html @@ -0,0 +1,399 @@ +--- +title: <input type="image"> +slug: Web/HTML/Element/Input/image +tags: + - Element + - HTML + - Input + - Reference + - Web +translation_of: Web/HTML/Element/input/image +--- +<div>{{HTMLRef}}</div> + +<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>image</strong></code> sont utilisés afin de créer des boutons graphiques pour l'envoi de formulaire. Autrement dit, le bouton d'envoi aura la forme d'une image plutôt que de contenir un texte.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-image.html", "tabbed-standard")}}</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> + +<h2 id="Valeur">Valeur</h2> + +<p>Les éléments <code><input type="image"></code> n'acceptent pas de valeur pour l'attribut <code>value</code>. Le chemin vers l'image à afficher est indiqué grâce à l'attribut <code>src</code>.</p> + +<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> + +<p>En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les boutons <code>image</code> permettent d'utiliser les attributs suivants :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("alt")}}</code></td> + <td>Texte de remplacement lorsque l'image ne peut pas être affichée</td> + </tr> + <tr> + <td><code>{{anch("formaction")}}</code></td> + <td>L'URL à laquelle envoyer les données du formulaire. Cette valeur prend le pas sur l'attribut {{htmlattrxref("action", "form")}} du formulaire s'il est défini.</td> + </tr> + <tr> + <td><code>{{anch("formenctype")}}</code></td> + <td>Une chaîne de caractères qui indique le type d'encodage à utiliser pour les données du formulaire.</td> + </tr> + <tr> + <td><code>{{anch("formmethod")}}</code></td> + <td>La méthode HTTP à utiliser pour envoyer le formulaire.</td> + </tr> + <tr> + <td><code>{{anch("formnovalidate")}}</code></td> + <td>Un booléen qui, lorsqu'il est présent, indique que les champs du formulaire ne sont pas soumis <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">aux contraintes de validation</a> avant l'envoi des données au serveur.</td> + </tr> + <tr> + <td><code>{{anch("formtarget")}}</code></td> + <td>Le contexte de navigation dans lequel charger la réponse du serveur reçue après l'envoi du formulaire.</td> + </tr> + <tr> + <td><code>{{anch("height")}}</code></td> + <td>La hauteur, en pixels CSS, à laquelle dessiner l'image</td> + </tr> + <tr> + <td><code>{{anch("src")}}</code></td> + <td>L'URL à partir de laquelle charger l'image</td> + </tr> + <tr> + <td><code>{{anch("width")}}</code></td> + <td>La largeur, en pixels CSS, à laquelle dessiner l'image</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefalt">{{htmlattrdef("alt")}}</h3> + +<p>L'attribut <code>alt</code> fournit un texte alternatif à utiliser comme libellé pour le bouton lorsque l'image ne peut être chargée ou affichée (que ce soit en raison d'une erreur ou de la configuration de l'agent utilisateur). Si cet attribut est fourni, ce doit être une chaîne de caractères non vide et qui décrit clairement le rôle du bouton.</p> + +<p>Ainsi, si on a un bouton graphique avec une image et/ou une incône avec le texte <em>Se connecter</em>. Le texte alternatif porté par <code>alt</code> devrait être proche de <code>"Se connecter"</code>.</p> + +<div class="note"> +<p><strong>Note :</strong> Bien que, d'un point de vue technique, l'attribut <code>alt</code> soit optionnel. Il faut toujours en inclure un afin d'améliorer l'accessibilité et l'utilisabilité du bouton.</p> +</div> + +<p>D'un point de vue fonctionnel, l'attribut <code>alt</code> pour <code><input type="image"></code> fonctionne de la même façon que l'attribut {{htmlattrdef("alt", "img")}} associé aux éléments {{HTMLElement("img")}}.</p> + +<h3 id="htmlattrdefformaction">{{htmlattrdef("formaction")}}</h3> + +<p>Une chaîne de caractères représentant l'URL à laquelle envoyer les données du formulaire. Cette valeur prend le pas sur l'attribut {{htmlattrxref("action", "form")}} du formulaire ({{HTMLElement("form")}}) propriétaire du champ <code><input></code>.</p> + +<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> et {{HTMLElement("button")}}.</p> + +<h3 id="htmlattrdefformenctype">{{htmlattrdef("formenctype")}}</h3> + +<p>Une chaîne de caractères qui identifie la méthode d'encodage à utiliser pour l'envoi des données du formulaire au serveur. Trois valeurs sont autorisées :</p> + +<dl> + <dt><code>application/x-www-form-urlencoded</code></dt> + <dd>Les informations sont envoyées sous la forme d'une chaîne de caractères ajoutée à l'URL en utilisant l'algorithme de {{jsxref("encodeURI", "encodeURI()")}}. <strong>Cette valeur est la valeur par défaut.</strong></dd> + <dt><code>multipart/form-data</code></dt> + <dd>Cette valeur utilise l'API {{domxref("FormData")}} pour gérer les données et permet d'<em>uploader</em>des fichiers. Cet encodage <em>doit</em> être utilisé s'il y a des éléments {{HTMLElement("input")}} de {{htmlattrxref("type", "input")}} <code>"file"</code> (<code><a href="/fr/docs/Web/HTML/Element/input/file"><input type="file"></a></code>).</dd> + <dt><code>text/plain</code></dt> + <dd>Les données sont envoyées comme texte simple. Cette valeur est généralement utile pour déboguer car elle permet de voir facilement les données envoyées.</dd> +</dl> + +<p>Si cet attribut est défini, sa valeur prend la priorité sur l'attribut {{htmlattrxref("action", "form")}} du formulaire.</p> + +<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> et {{HTMLElement("button")}}.</p> + +<h3 id="htmlattrdefformmethod">{{htmlattrdef("formmethod")}}</h3> + +<p>Une chaîne de caractères qui indique la méthode HTTP à utiliser lors de l'envoi des données du formulaire. Cette valeur prend la priorité sur l'attribut {{htmlattrxref("method", "form")}} du formulaire. Les valeurs autorisées sont :</p> + +<dl> + <dt><code>get</code></dt> + <dd>Une URL est construite en commençant avec l'URL fournie par l'attribut <code>formaction</code> ou {{htmlattrxref("action", "form")}}, suivie d'un point d'interrogation puis des données du formulaire, encodées comme indiqué avec <code>formenctype</code> ou {{htmlattrxref("enctype", "form")}}. Cette URL est ensuite envoyée au serveur avec une requête HTTP {{HTTPMethod("get")}}. Cette méthode fonctionne correctement pour les formulaires simples, contenant des données ASCII et sans effet de bord. <strong>C'est la valeur par défaut.</strong></dd> + <dt><code>post</code></dt> + <dd>Les données du formulaire sont incluses dans le corps de la requête envoyée à l'URL fournie par l'attribut <code>formaction</code> ou {{htmlattrxref("action", "form")}} en utilisant une requête {{HTTPMethod("push")}}. Cette méthode prend en charge les données plus complexes (que celles pour <code>get</code>) et les pièces jointes sous forme de fichiers.</dd> + <dt><code>dialog</code></dt> + <dd>Cette méthode est utilisée pour indique que le bouton permet simplement de fermer la boîte de dialogue associée au champ. Aucune donnée n'est transmise.</dd> +</dl> + +<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> et {{HTMLElement("button")}}.</p> + +<h3 id="htmlattrdefformnovalidate">{{htmlattrdef("formnovalidate")}}</h3> + +<p>Un attribut booléen qui, lorsqu'il est présent, indique que le formulaire ne devrait pas être validé avant d'être envoyé au serveur. Cet attribut prend la priorité sur l'attribut {{htmlattrxref("novalidate", "form")}} du formulaire parent.</p> + +<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> et {{HTMLElement("button")}}.</p> + +<h3 id="htmlattrdefformtarget">{{htmlattrdef("formtarget")}}</h3> + +<p>Une chaîne de caractères qui indique un nom ou un mot-clé qui définit où afficher la réponse reçue depuis le serveur après l'envoi du formulaire. La chaîne de caractères doit correspondre au nom <strong>d'un contexte de navigation</strong> (un onglet, une fenêtre ou une {{HTMLElement("iframe")}}). La valeur de cet attribut prendra la priorité sur celle fournie par l'attribut {{htmlattrxref("target", "form")}} du formulaire ({{HTMLElement("form")}}) parent.</p> + +<p>En complément des noms des onglets, fenêtres, <em>iframes</em>, quelques mots-clés spéciaux peuvent être utilisés :</p> + +<dl> + <dt><code>_self</code></dt> + <dd>La réponse est chargée dans le même contexte de navigation que celui contenant le formulaire. Cela remplacera le document courant avec les données reçues. <strong>Cette valeur est la valeur par défaut.</strong></dd> + <dt><code>_blank</code></dt> + <dd>La réponse est chargé dans un contexte de navigation vierge. Ce sera généralement un nouvel onglet dans la même fenêtre mais cela peut varier selon la configuration de l'agent utilisateur.</dd> + <dt><code>_parent</code></dt> + <dd>La réponse est chargée dans le contexte de navigation parent du contexte courant. S'il n'y a pas de contexte parent, cette valeur est synonyme de <code>_self</code>.</dd> + <dt><code>_top</code></dt> + <dd>La réponse est chargée dans le contexte de navigation de plus haut niveau, c'est-à-dire le contexte de navigation qui est l'ancêtre, sans parent, du contexte courant. Si le contexte courant est déjà le contexte de navigation le plus haut, cette valeur est synonyme de <code>_self</code>.</dd> +</dl> + +<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> et {{HTMLElement("button")}}.</p> + +<h3 id="htmlattrdefheight">{{htmlattrdef("height")}}</h3> + +<p>Une valeur numérique qui indique la hauteur, exprimée en pixels CSS, pour dessiner l'image fournie par l'attribut <code>src</code>.</p> + +<h3 id="htmlattrdefsrc">{{htmlattrdef("src")}}</h3> + +<p>Une chaîne de caractères qui définit l'URL du fichier image à afficher pour le bouton. Lorsque l'utilisateur interagit avec l'image, le champ est géré comme tout autre bouton <code><input></code>.</p> + +<h3 id="htmlattrdefwidth">{{htmlattrdef("width")}}</h3> + +<p>Une valeur numérique qui indique la largeur, exprimée en pixels CSS, pour dessiner l'image fournie par l'attribut <code>src</code>.</p> + +<h2 id="Attributs_obsolètes">Attributs obsolètes</h2> + +<p>L'attribut suivant a été défini en HTML4 pour les champs de type <code>image</code> mais n'a pas été implémenté par l'ensemble des navigateurs et a été déprécié depuis :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("usemap")}}</code></td> + <td>Le nom d'une carte d'images cliquables ({{HTMLElement("map")}}) à utiliser pour l'image. Cet élément est obsolète et c'est l'élément {{HTMLElement("img")}} qui devrait être utilisé pour créer des cartes à la place.</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefusemap">{{htmlattrdef("usemap")}}</h3> + +<p>Lorsque l'attribut <code>usemap</code> est utilisé, sa valeur doit être le nom d'un élément {{HTMLElement("map")}} qui définit l'image avec des régions cliquables à utiliser. Cette utilisation est obsolète et l'élément {{HTMLElement("img")}} devrait être utilisé pour les images avec des zones cliquables.</p> + +<h2 id="Utiliser_les_contrôles_<input_typeimage>">Utiliser les contrôles <code><input type="image"></code></h2> + +<p>Un élément <code><input type="image"></code> est <a href="/fr/docs/Web/CSS/Élément_remplacé">un élément remplacé</a> (c'est-à-dire un élément dont le contenu n'est pas généré ou géré par le CSS) et se comporte comme un élément {{htmlelement("img")}} tout en permettant <a href="/fr/docs/Web/HTML/Element/Input/submit">d'envoyer un formulaire (comme un élément <code><input type="submit"></code>)</a>.</p> + +<h3 id="Les_fonctionnalités_essentielles">Les fonctionnalités essentielles</h3> + +<p>Prenons un exemple simple qui utilise les attributs strictement nécessaires (qui fonctionnent de la même façon que pour un élément <code><img></code>) :</p> + +<pre class="brush: html notranslate"><input id="image" type="image" width="100" height="30" alt="Login" + src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"></pre> + +<p>{{EmbedLiveSample('Les_fonctionnalités_essentielles', 600, 50)}}</p> + +<ul> + <li>L'attribut {{htmlattrxref("src", "input")}} indique le chemin de l'image qu'on souhaite afficher sur le bouton.</li> + <li>L'attribut {{htmlattrxref("alt", "input")}} fournit un texte alternatif à l'image qui peut notamment être utilisé par un lecteur d'écran pour indiquer ce à quoi correspond l'image. Ce texte sera également affiché si l'image ne peut pas être affichée (par exemple si le chemin est incorrect). Si possible, il est préférable d'utiliser le texte que vous auriez utilisé si vous aviez mis en place un élément <input type="<code>submit"></code>.</li> + <li>Les attributs {{htmlattrxref("width", "input")}} et {{htmlattrxref("height", "input")}} sont utilisés afin d'indiquer la largeur et la hauteur, exprimées en pixels, avec lesquelles représenter l'image. Le bouton aura la même taille que l'image. S'il est nécessaire que le bouton soit plus gros que l'image, on pourra utiliser des règles CSS (par exemple avec la propriété {{cssxref("padding")}}). Si un seul des deux attributs est fourni, la seconde dimension sera automatiquement ajustée afin que l'image conserve ses proportions originelles.</li> +</ul> + +<h3 id="Surcharger_le_comportement_par_défaut">Surcharger le comportement par défaut</h3> + +<p>Les éléments <code><input type="image"></code> — comme les boutons <a href="/fr/docs/Web/HTML/Element/input/submit"><code><input type="submit"></code></a> — prennent en charge différents attributs qui permettent d'adapter le compotement du formulaire :</p> + +<dl> + <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}}</dt> + <dd>Cet attribut indique l'URI d'un programme qui traite les informations envoyées par l'élément <code><input></code>. Cet attribut surcharge l'attribut {{htmlattrxref("action","form")}} du formulaire associé.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}}</dt> + <dd>Cet attribut définit le type de contenu utilisé pour envoyer le formulaire au serveur. Les valeurs possibles sont : + <ul> + <li><code>application/x-www-form-urlencoded</code> : la valur par défaut si l'attribut n'est pas utilisé.</li> + <li><code>text/plain</code>.</li> + </ul> + + <p>Si cet attribut est utilisé, il surcharge l'attribut {{htmlattrxref("enctype","form")}} du formulaire associé.</p> + </dd> + <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}}</dt> + <dd>Cet attribut indique la méthode HTTP utilisée par le navigateur afin d'envoyer le formulaire. Les valeurs possibles sont : + <ul> + <li><code>post</code> : les données du formulaire sont incluses dans le corps du formulaire puis envoyées au serveur.</li> + <li><code>get</code> : les données du formulaire sont ajoutées après l'URI de l'attribut <code><strong>form</strong></code> avec un point d'interrogation (« ? ») comme séparateur. L'URI alors obtenue est envoyée au serveur. Cette méthode doit uniquement être utilisée lorsque le formulaire n'entraîne aucun effet de bord et que les données ne contiennent que des caractères ASCII.</li> + </ul> + + <p>Si cet attribut est utilisé, il surcharge l'attribut {{htmlattrxref("method","form")}} du formulaire associé.</p> + </dd> + <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}}</dt> + <dd>Un attribut booléen qui indique si le formulaire ne doit pas être validé avant d'être envoyé. Si cet attribut est utilisé, il surcharge l'attribut {{htmlattrxref("novalidate","form")}} du formulaire associé.</dd> + <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}}</dt> + <dd>Un nom ou un mot-clé qui indique où la réponse doit être affichée après que le formulaire a été envoyé. Cette valeur est le nom ou un mot-clé qui désigne un contexte de navigation (par exemple un onglet, une fenêtre ou une <em>iframe</em>). Si cet attribut est indiqué, il surcharge l'attribut {{htmlattrxref("target", "form")}} du formulaire associé. Les mots-clés suivants ont des significations particulières : + <ul> + <li>_<code>self</code> : la réponse est chargée dans le même contexte de navigation que le contexte courant. C'est la valeur par défaut si l'attribut n'est pas utilisé.</li> + <li><code>_blank</code> : la réponse est chargée dans un nouveau contexte de navigation anonyme.</li> + <li><code>_parent</code> : la réponse est chargée dans le contexte navigation qui est le parent du contexte courant. S'il n'y a aucun contexte parent, cette valeur se comportera comme la valeur <code>_self</code>.</li> + <li><code>_top</code> : la réponse est chargée dans le contexte de navigation de plus haut niveau (c'est-à-dire le contexte qui est un ancêtre du contexte courant et qui n'a pas de contexte parent). Si le contexte courant n'a pas de parent, cette valeur se comportera comme <code>_self</code>.</li> + </ul> + </dd> +</dl> + +<h3 id="Utiliser_les_coordonnées_x_et_y">Utiliser les coordonnées <code>x</code> et <code>y</code></h3> + +<p>Lorsqu'on envoie un formulaire avec un bouton <code><input type="image"></code>, les coordonnées (<code>x</code> et <code>y</code>) du clic sur l'image sont également envoyées au serveur (<a href="https://mdn.github.io/learning-area/html/forms/image-type-example/xy-coordinates-example.html">voir cet exemple</a>).</p> + +<p>Lorsqu'on clique sur l'image pour envoyer le formulaire, vous pourrez voir que l'URL contient deux autres paramètres (par exemple <code>"?x=52&y=55"</code>). Si le contrôle possède un attribut {{htmlattrxref("name", "input")}}, ce nom sera utilisé comme préfixe. Ainsi, si <code>name</code> vaut <code>"position"</code>, les coordonnées du clic seront envoyées dans l'URL avec le format suivant : <code>"?position.x=52&position.y=55"</code>. Ce préfixe est également appliqué aux autres attributs.</p> + +<p>Les coordonnées X et Y sont calculées en pixels à partir du coin en haut à gauche de l'image ete peuvent être utilisées lorsque l'emplacement du clic possède une quelconque importance (par exemple une carte). Ces coordonnées peuvent donc être utilisées côté serveur afin de renvoyer des informations pertinentes (par exemple des informations quant aux lieux alentour).</p> + +<h3 id="Ajuster_la_position_et_léchelle_de_limage">Ajuster la position et l'échelle de l'image</h3> + +<p>Il est possible d'utiliser la propriété CSS {{cssxref("object-position")}} afin d'ajuster la position de l'image au sein de la boîte fournie par l'élément <code><input></code>. La propriété CSS {{cssxref("object-fit")}} peut être utilisée afin de contrôler la façon dont l'image est redimensionnée pour tenir dans la boîte. On peut donc ajuster le cadre grâce aux attributs <code>width</code> et <code>height</code> afin de créer un espace fixe sur le document puis ajuster la façon dont l'image occupe cet espace.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Un_formulaire_de_connexion">Un formulaire de connexion</h3> + +<p>Dans l'exemple suivant, on insère le bouton vu précedemment dans un formulaire de connexion.</p> + +<p>{{EmbedLiveSample('Un_formulaire_de_connexion', 600, 170)}}</p> + +<p>Voici le fragment de code HTML utilisé :</p> + +<pre class="brush: html notranslate"><form> + <p>Connectez-vous</p> + <div> + <label for="userId">Identifiant</label> + <input type="text" id="userId" name="userId"> + </div> + <div> + <label for="pwd">Mot de passe</label> + <input type="password" id="pwd" name="pwd"> + </div> + <div> + <input id="image" type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" alt="Login" width="100"> + </div> +</form></pre> + +<p>Ensuite, on ajoute un feuille de style CSS pour mettre en forme les éléments :</p> + +<pre class="brush: css notranslate">div { + margin-bottom: 10px; +} + +label { + display: inline-block; + width: 70px; + text-align: right; + padding-right: 10px; +}</pre> + +<h3 id="Ajuster_la_position_et_l’échelle_de_l’image">Ajuster la position et l’échelle de l’image</h3> + +<p>Dans l'exemple qui suit, on adapte l'exemple précédent afin de disposer de plus d'espace pour l'image et on ajuste la taille et la position de l'image grâce à {{cssxref("object-fit")}} et {{cssxref("object-position")}}.</p> + +<p>{{EmbedLiveSample("Ajuster_la_position_et_l’échelle_de_l’image", 600, 300)}}</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><form> + <p>Connectez-vous</p> + <div> + <label for="userId">Identifiant</label> + <input type="text" id="userId" name="userId"> + </div> + <div> + <label for="pwd">Mot de passe</label> + <input type="password" id="pwd" name="pwd"> + </div> + <div> + <input id="image" type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" alt="Login" width="100"> + </div> +</form></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">div { + margin-bottom: 10px; +} + +label { + display: inline-block; + width: 70px; + text-align: right; + padding-right: 10px; +} + +#image { + object-position: right top; + object-fit: contain; + background-color: #ddd; +} +</pre> + +<p>On voit ici <code>object-position</code> qui permet de dessiner l'image à paritr du coin supérieur droit de l'élément et <code>object-fit</code> qui vaut <code>contain</code> : l'image est ainsi dessinée avec la taille la plus grande possible tout en respectant ses proportions et en ne dépassant pas de la boîte. L'arrière-plan de l'image sera visible s'il y a des zones non-couvertes.</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Aucune, l'attribut <code>value</code> ne devrait pas être utilisé.</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>Aucun.</td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td>{{htmlattrxref("alt", "input")}}, {{htmlattrxref("src", "input")}}, {{htmlattrxref("width", "input")}}, {{htmlattrxref("height", "input")}}, {{htmlattrxref("formaction", "input")}}, {{htmlattrxref("formenctype", "input")}}, {{htmlattrxref("formmethod", "input")}}, {{htmlattrxref("formnovalidate", "input")}}, {{htmlattrxref("formtarget", "input")}}</td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td>Aucun.</td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td>Aucune.</td> + </tr> + </tbody> +</table> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#image-button-state-(type=image)', '<input type="image">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#image-button-state-%28type=image%29', '<input type="image">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-image")}}</p> + +<h2 id="Voir_ausi">Voir ausi</h2> + +<ul> + <li>L'élément {{HTMLElement("input")}} et l'interface DOM {{domxref("HTMLInputElement")}} qu'il implémente.</li> +</ul> diff --git a/files/fr/web/html/element/input/index.html b/files/fr/web/html/element/input/index.html new file mode 100644 index 0000000000..5503eb8024 --- /dev/null +++ b/files/fr/web/html/element/input/index.html @@ -0,0 +1,465 @@ +--- +title: <input> +slug: Web/HTML/Element/Input +tags: + - Element + - Formulaires + - HTML + - Input + - Reference + - Web +translation_of: Web/HTML/Element/input +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><input></code></strong> est utilisé pour créer un contrôle interactif dans un formulaire web qui permet à l'utilisateur de saisir des données. Les saisies possibles et le comportement de l'élément <code><input></code> dépend fortement de la valeur indiquée dans son attribut <code>type</code>.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-text.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> + +<h2 id="Les_différents_types_de_champs_<input>"><a id="types" name="types">Les différents types de champs <code><input></code></a></h2> + +<p>La façon dont un élément <code><input></code> fonctionne dépend grandement de la valeur de son attribut <code>type</code>. Aussi, pour chacun de ces types, on aura une page de référence dédiée. Par défaut, lorsque l'attribut <code>type</code> n'est pas présent, il aura la valeur implicite <code>text</code>.</p> + +<p>Les types de champs disponibles sont :</p> + +<ul> + <li><code>{{HTMLElement("input/button", "button")}}</code> : un bouton sans comportement défini.</li> + <li><code>{{HTMLElement("input/checkbox", "checkbox")}}</code> : une case à cocher qui permet de sélectionner/déselectionner une valeur</li> + <li><code>{{HTMLElement("input/color", "color")}}</code> : {{HTMLVersionInline("5")}} un contrôle qui permet de définir une couleur.</li> + <li><code>{{HTMLElement("input/date", "date")}}</code> : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir une date (composé d'un jour, d'un mois et d'une année).</li> + <li><code>{{HTMLElement("input/datetime-local", "datetime-local")}}</code> : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir une date et une heure (sans fuseau horaire).</li> + <li><code>{{HTMLElement("input/email", "email")}}</code> : {{HTMLVersionInline("5")}} un champ qui permet de saisir une adresse éléctronique.</li> + <li><code>{{HTMLElement("input/file", "file")}}</code> : un contrôle qui permet de sélectionner un fichier. L'attribut <code><strong>accept</strong></code> définit les types de fichiers qui peuvent être sélectionnés.</li> + <li><code>{{HTMLElement("input/hidden", "hidden")}}</code> : un contrôle qui n'est pas affiché mais dont la valeur est envoyée au serveur.</li> + <li><code>{{HTMLElement("input/image", "image")}}</code> : un bouton graphique d'envoi du formulaire. L'attribut <code>src</code> doit être défini avec la source de l'image et l'attribut <code>alt</code> doit être défini avec le texte alternatif. Les attributs <code>height</code> et <code>width</code> permettent de définir la taille de l'image en pixels.</li> + <li><code>{{HTMLElement("input/month", "month")}}</code> : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir un mois et une année (sans fuseau horaire).</li> + <li><code>{{HTMLElement("input/number", "number")}}</code> : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir un nombre.</li> + <li><code>{{HTMLElement("input/password", "password")}}</code> : un champ texte sur une seule ligne dont la valeur est masquée. Les attributs <code>maxlength</code> et <code>minlength</code> définissent la taille maximale et minimale de la valeur à saisir dans le champ. + <div class="note"><strong>Note :</strong> Tout formulaire comportant des données sensibles doit être servi via HTTPS. Les navigateurs alertent les utilisateurs lorsque les formulaires avec de telles données sont uniquement disponibles via HTTP.</div> + </li> + <li><code>{{HTMLElement("input/radio", "radio")}}</code> : un bouton radio qui permet de sélectionner une seule valeur parmi un groupe de différentes valeurs.</li> + <li><code>{{HTMLElement("input/range", "range")}}</code> : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir un nombre dont la valeur exacte n'est pas importante.</li> + <li><code>{{HTMLElement("input/reset", "reset")}}</code> : un bouton qui réinitialise le contenu du formulaire avec les valeurs par défaut.</li> + <li><code>{{HTMLElement("input/search", "search")}}</code> : {{HTMLVersionInline("5")}} un champ texte sur une ligne pour des termes de recherche. Les sauts de ligne sont automatiquement retirés.</li> + <li><code>{{HTMLElement("input/submit", "submit")}}</code> : un bouton qui envoie le formulaire.</li> + <li><code>{{HTMLElement("input/tel", "tel")}}</code> : {{HTMLVersionInline("5")}} un contrôle pour saisir un numéro de téléphone.</li> + <li><code>{{HTMLElement("input/text", "text")}}</code> : un champ texte sur une seule ligne. Les sauts de ligne sont automatiquement retirés.</li> + <li><code>{{HTMLElement("input/time", "time")}}</code> : {{HTMLVersionInline("5")}} A control for entering a time value with no time zone.</li> + <li><code>{{HTMLElement("input/url", "url")}}</code> : {{HTMLVersionInline("5")}} un champ permettant de saisir une URL.</li> + <li><code>{{HTMLElement("input/week", "week")}}</code> : {{HTMLVersionInline("5")}} un contrôle permettant de saisir une date représentée par un numéro de semaine et une année (sans indication de fuseau horaire).</li> +</ul> + +<p>Certains types sont désormais obsolètes :</p> + +<ul> + <li><code>{{HTMLElement("input/datetime", "datetime")}}</code> : {{HTMLVersionInline("5")}} {{deprecated_inline}} {{obsolete_inline}} un contrôle pour saisir une date et une heure selon un fuseau horaire UTC. <strong>Cette fonctionnalité a été <a href="https://github.com/whatwg/html/issues/336">retirée du standard WHATWG HTML.</a></strong></li> +</ul> + +<h2 id="Attributs">Attributs</h2> + +<p>L'élément <code><input></code> est l'un des éléments HTML les plus complexes et puissants et il peut utiliser de nombreux types et attributs. Chaque élément <code><input></code> étant basé sur l'interface DOM {{domxref("HTMLInputElement")}}, ils partagent tous, techniquement, les mêmes attributs. Toutefois, certains attributs ne fonctionnent que pour certains types de champs et certains attributs fonctionnent spécifiquement selon le type de champ.</p> + +<p>Sur cette page, vous trouverez des informations sur les attributs communs à l'ensemble des types d'éléments <code><input></code> ainsi que la description de quelques attributs notables.</p> + +<h3 id="Attributs_communs_à_l'ensemble_des_types">Attributs communs à l'ensemble des types</h3> + +<p>This section lists the attributes which are used by all form <code><input></code> types. Attributes that are unique to particular input types—or attributes which are common to all input types but have special behaviors when used on a given input type—are instead documented on those types' pages.</p> + +<div class="note"> +<p><strong>Note :</strong> Les éléments <code><input></code> peuvent bien entendu utiliser les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>.</p> +</div> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribut</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("autocomplete")}}</code></td> + <td>Une chaîne de caractères qui indique le type d'autocomplétion à utiliser.</td> + </tr> + <tr> + <td><code>{{anch("autofocus")}}</code></td> + <td>Un attribut booléen qui passe le focus sur le champ lorsque le formulaire est affiché.</td> + </tr> + <tr> + <td><code>{{anch("disabled")}}</code></td> + <td>Un attribut booléen qui indique si le champ doit être désactivé.</td> + </tr> + <tr> + <td><code>{{anch("form")}}</code></td> + <td>L'identifiant du formulaire (la valeur de l'attribut <code>id</code> de l'élément {{HTMLElement("form")}}) auquel le champ est rattaché. Si cet attribut est absent, le champ sera rattaché au formulaire le plus proche qui le contient s'il existe.</td> + </tr> + <tr> + <td><code>{{anch("list")}}</code></td> + <td>L'identifiant (valeur de l'attribut <code>id</code>) d'un élément {{HTMLElement("datalist")}} qui fournit une liste de suggestions.</td> + </tr> + <tr> + <td><code>{{anch("name")}}</code></td> + <td>Le nom du champ qui sera rattaché à la donnée envoyée via le formulaire.</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>Un attribut booléen qui indique si le champ peut être édité ou non.</td> + </tr> + <tr> + <td><code>{{anch("required")}}</code></td> + <td>Un attribut booléen qui indique que le champ doit être renseigné avant de pouvoir envoyer le formulaire.</td> + </tr> + <tr> + <td><code>{{anch("tabindex")}}</code></td> + <td>Une valeur numérique qui indique à l'agent utilisateur l'ordre selon lequel naviguer au clavier grâce à la touche <kbd>Tab</kbd>.</td> + </tr> + <tr> + <td><code>{{anch("type")}}</code></td> + <td>Une chaîne de caractère qui indique l<a href="#types">e type de champ représenté par l'élément <code><input></code></a>.</td> + </tr> + <tr> + <td><code>{{anch("value")}}</code></td> + <td>La valeur du champ.</td> + </tr> + </tbody> +</table> + +<h4 id="htmlattrdef(autocomplete)">{{htmlattrdef("autocomplete")}}</h4> + +<p>Une chaîne de caractères qui décrit si le champ doit fournir des fonctionnalités d'autocomplétion. Cette autocomplétion peut notamment provenir des valeurs précédemment saisies dans le champ. D'autres méthodes plus complexes peuvent être utilisées : un navigateur pourra par exemple interagir avec la liste des contacts de l'appareil afin de proposer l'autocomplétion pour les adresses électroniques. Voir {{SectionOnPage("/fr/docs/Web/HTML/Attributs/autocomplete", "Valeurs")}} pour les valeurs qui peuvent être utilisées avec cet attribut.</p> + +<p>Cet attribut n'aura aucun effet sur les champs qui ne renvoient pas de valeurs numériques ou de textes (les champs <code>checkbox</code> ou <code>image</code> par exemple).</p> + +<p>Pour plus d'informations, voir <a href="/fr/docs/Web/HTML/Attributs/autocomplete">la page de documentation sur l'attribut HTML <code>autocomplete</code></a>.</p> + +<h4 id="htmlattrdef(autofocus)">{{htmlattrdef("autofocus")}}</h4> + +<p>Un attribut booléen qui, lorsqu'il est présent, indique que le champ doit recevoir le focus lorsque le chargement de la page est terminé (ou que la boîte de dialogue ({{HTMLElement("dialog")}}) contenant l'élément est affichée).</p> + +<div class="note"> +<p><strong>Note :</strong> Un élément ayant l'attribut <code>autofocus</code> peut avoir le focus avant que l'évènement {{domxref("DOMContentLoaded")}} soit déclenché.</p> +</div> + +<p>Seul un élément du document peut avoir l'attribut <code>autofocus</code>. Il n'est pas possible d'utiliser l'attribut <code>autofocus</code> sur les champs de type <code>hidden</code> car ces derniers, masqués, ne peuvent pas avoir le focus.</p> + +<div class="warning"> +<p><strong>Attention !</strong> Le focus automatique sur un champ de formulaire peut être source de confusion, notamment pour les personnes qui utilisent des lecteurs d'écran. En effet, lorsque <code>autofocus</code> est utilisé, les lecteurs d'écran « téléportent » l'utilisateur sur le contrôle du champ, sans aucun avertissement.</p> +</div> + +<h4 id="htmlattrdef(disabled)">{{htmlattrdef("disabled")}}</h4> + +<p>Un attribut booléen qui, lorsqu'il est présent, indique que l'utilisateur ne devrait pas pouvoir interagir avec le champ. Les champs désactivés sont généralement affichés avec une couleur plus pale et/ou avec d'autres indications.</p> + +<p>Les champs désactivés avec cet attribut ne reçoivent pas l'évènement {{event("click")}} et ne sont pas envoyés avec le formulaire.</p> + +<div class="note"> +<p><strong>Note :</strong> Bien que ce ne soit pas indiqué dans la spécification, Firefox conserver l'état désactivé des champs, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">y compris si cet état a été obtenu dynamiquement</a>, lors des rechargements de la page. L'attribut {{htmlattrxref("autocomplete","input")}} pourra être utilisé afin de contrôler cette fonctionnalité.</p> +</div> + +<h4 id="htmlattrdef(form)">{{htmlattrdef("form")}}</h4> + +<p>Une chaîne de caractères qui indique l'élément {{HTMLElement("form")}} auquel le champ est associé (on parle de « formulaire propriétaire »). La valeur de cette chaîne de caractères doit correspondre à la valeur de l'attribut {{htmlattrxref("id")}} d'un élément <code><form></code> du document. Si cet attribut n'est pas utilisé, l'élément <code><input></code> est rattaché au formulaire le plus proche qui le contient (si un tel formulaire existe).</p> + +<p>Grâce à cet attribut, on peut placer un champ n'importe où dans le document et avoir un lien entre le champ et un formulaire situé ailleurs.</p> + +<div class="note"> +<p><strong>Note :</strong> Un champ ne peut être associé qu'à un seul formulaire.</p> +</div> + +<h4 id="htmlattrdef(list)">{{htmlattrdef("list")}}</h4> + +<p>Cet attribut est une chaîne de caractères qui correspond à l'identifiant ({{domxref("Element.id", "id")}}) d'un élément {{HTMLElement("datalist")}} du document et qui fournit une liste de valeurs à suggérer à l'utilisateur pour ce champ. Les valeurs de cette liste qui ne sont pas compatibles avec ce type de champ ne seront pas incluses dans les suggestions.</p> + +<p>L'attribut <code>list</code> n'est pas pris en charge pour les types <code>hidden</code>, <code>password</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code> ou pour les boutons.</p> + +<h4 id="htmlattrdef(name)">{{htmlattrdef("name")}}</h4> + +<p>Une chaîne de caractères qui définit le nom associé au champ. Ce nom sera envoyé avec la valeur lors de l'envoi du formulaire.</p> + +<p>Lorsqu'un champ a un nom, cette valeur devient une propriété de {{domxref("HTMLFormElement.elements")}} qu'on pourra utiliser en JavaScript (ex. si on a un attribut <code>name</code> qui vaut <code>hat-size</code> :</p> + +<pre class="brush: js">let form = document.querySelector("form"); +let guestName = form.elements.guest; +let hatSize = form.elements["hat-size"]; +</pre> + +<p>Avec ce code, la variable <code>guestName</code> correspondra à l'élément {{domxref("HTMLInputElement")}} du champ <code>guest</code> et <code>hatSize</code> à l'objet pour le champ <code>hat-size</code>.</p> + +<div class="warning"> +<p><strong>Attention !</strong> Il est préférable de ne pas utiliser de valeurs pour <code>name</code> qui correspondent à une propriété native de l'objet du DOM car cela surchargerait la propriété préexistante avec une référence au champ concerné.</p> +</div> + +<p>Le nom <code>_charset_</code> possède une signification spéciale. Si cette valeur est utilisée comme nom pour un élément <code><input></code> de type <code><a href="/fr/docs/Web/HTML/Element/Input/hidden">hidden</a></code>, la valeur du champ (l'attribut <code>value</code>) sera automatiquememnt renseignée par l'agent utilisateur et correspondra à l'encodage utilisé pour envoyer le formulaire.</p> + +<p>Si l'attribut <code>name</code> n'est pas présent ou qu'il est vide, la valeur du champ ne sera pas envoyée avec le formulaire.</p> + +<div class="note"> +<p><strong>Note :</strong> Pour certaines raisons historiques, le nom <code>isindex</code> n'est pas autorisé. Pour en savoir plus, voir la section <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-name">Nommage des contrôles de formulaire : l'attribut <code>name</code></a> de la spécification HTML.</p> +</div> + +<h4 id="htmlattrdef(readonly)">{{htmlattrdef("readonly")}}</h4> + +<p>Un attribut booléen qui, lorsqu'il est présent, indique que l'utilisateur ne devrait pas pouvoir éditer la valeur du champ.</p> + +<p><code>disabled</code> et <code>readonly</code> sont bien différents : <code>readonly</code> permet d'avoir un contrôle fonctionnel mais non éditable alors que les champs <code>disabled</code> ne fonctionnent pas comme des contrôles.</p> + +<div class="blockIndicator note"> +<p><strong>Notes :</strong></p> + +<p>L'attribut <code>required</code> n'est pas autorisé sur les éléments <code><input></code> avec l'attribut <code>readonly</code>.</p> + +<p>Seuls les champs textuels peuvent être mis en lecture seule. En effet, pour les autres contrôles (ex. les case à cocher et les boutons radio), il n'y a pas de réelle différence entre l'application de <code>readonly</code> ou de <code>disabled</code>.</p> +</div> + +<h4 id="htmlattrdef(required)">{{htmlattrdef("required")}}</h4> + +<p>Un attribut booléen qui, lorsqu'il est présent, indique que l'utilisateur doit fournir une valeur pour ce champ avant de pouvoir envoyer le formulaire. L'attribut <code>required</code> est pris en charge pour tous les types d'éléments <code><input></code> exceptés :</p> + +<div class="threecolumns"> +<ul> + <li><code><a href="/fr/docs/Web/HTML/Element/input/color">color</a></code></li> + <li><code><a href="/fr/docs/Web/HTML/Element/input/hidden">hidden</a></code></li> + <li><code><a href="/fr/docs/Web/HTML/Element/input/range">range</a></code></li> + <li><code><a href="/fr/docs/Web/HTML/Element/input/submit">submit</a></code></li> + <li><code><a href="/fr/docs/Web/HTML/Element/input/image">image</a></code></li> + <li><code><a href="/fr/docs/Web/HTML/Element/input/reset">reset</a></code></li> + <li><code><a href="/fr/docs/Web/HTML/Element/input/button">button</a></code></li> +</ul> +</div> + +<p>Lorsqu'un champ contient l'attribut, la pseudo-classe CSS {{cssxref(":required")}} lui est appliqué. À l'inverse, les champs qui n'ont pas d'attribut <code>required</code> auront la pseudo-classe {{cssxref(":optional")}} appliquée (cela ne s'applique pas aux types de champ qui ne prennent pas en charge <code>require</code>).</p> + +<div class="note"> +<p><strong>Note :</strong> Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut <code>required</code> n'aura pas d'effet sur les champs ayant également l'attribut {{htmlattrxref("readonly", "input/text")}}.</p> +</div> + +<h4 id="htmlattrdef(tabindex)">{{htmlattrdef("tabindex")}}</h4> + +<p>Une valeur nnumérique qui définit si le champ peut recevoir le focus via la navigation au clavier (en navigant avec la touche <kbd>Tab</kbd>) et la façon dont l'élément s'inscrit dans l'ordre de la navigation au clavier.</p> + +<p>Les valeurs de <code>tabindex</code> auront un sens différents selon leur signe :</p> + +<ul> + <li>Lorsque <code>tabindex</code> est une valeur négative, cela indique que l'élément peut recevoir le focus de la part de l'utilisateur mais sans utiliser la navigation séquentielle au clavier. Il est recommandé de toujours utiliser une valeur de <code>-1</code> dans ce cas.</li> + <li>Lorsque <code>tabindex</code> est nul, cela indique que l'élément peut recevoir le focus et peut être accessible via la navigation au clavier mais que l'ordre de navigation est laissé à la discrétion de l'agent utilisateur. C'est généralement la meilleure valeur à utiliser.</li> + <li>Lorsque <code>tabindex</code> est une valeur positive, cette dernière définit l'ordre de l'élément dans la navigation au clavier. Chaque fois que l'utilisateur appuie sur la touche <kbd>Tab</kbd>, le focus passe à un élément qui possède un attribut <code>tabindex</code> plus élevé. La plupart des plateformes disposent également d'une fonctionnalité pour « reculer » dans la navigation au clavier, généralement via la combinaison de touches <kbd>Shift</kbd> + <kbd>Tab</kbd>.</li> +</ul> + +<p>Si cet attribut est absent ou n'est pas un entier valide, ce sera à l'agent utilisateur de respecter les conventions de la plateforme sous-jacente pour la navigation au clavier et la gestion du focus.</p> + +<h4 id="htmlattrdef(type)">{{htmlattrdef("type")}}</h4> + +<p>Une chaîne de caractères qui indique le type de contrôle à afficher. On pourra par exemple avoir une case à cocher en utilisant la valeur <code>checkbox</code>. Lorsque cet attribut est absent ou qu'une valeur inconnue est utilisée, la valeur par défaut sera <code>text</code> et le contrôle créé permettra de saisir un texte.</p> + +<p>Les valeurs autorisées pour cet attribut sont <a href="#types">présentées plus haut</a>.</p> + +<h4 id="htmlattrdef(value)">{{htmlattrdef("value")}}</h4> + +<p>La valeur du champ. Lorsque cet attribut est indiqué en HTML, il correspond à la valeur initiale du champ qui peut ensuite être modifié par l'utilisateur. Cette valeur peut également être récupérée et modifiée en JavaScript grâce à la propriété <code>value</code> de l'objet {{domxref("HTMLInputElement")}}. Cet attribut est toujours optionnel.</p> + +<div class="note"> +<p><strong>Note :</strong> À la différence des autres contrôles, les cases à cocher et les boutons radio sont uniquemnet envoyés via le formulaire lorsque l'attribut <code>checked</code> est vrai. Dans ce cas, l'attribut <code>value</code> sera la valeur associée au champ.</p> + +<p>Aussi, si on a une case à cocher dont l'attribut <code>name</code> vaut <code>status</code>, que l'attribut <code>value</code> vaut <code>active</code> et que la case est cochée, les données envoyées au formulaire contiendront <code>status=active</code>. Si la case à cocher n'est pas cochée, ses données ne seront pas envoyées avec le formulaire. Pour les cases à cocher et les boutons radio, la valeur par défaut de l'attribut <code>value</code> est <code>on</code>.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_simple">Exemple simple</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>Un élément de saisie simple </p> +<input type="text" value="Saisir un texte ici"> +</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample('Exemple_simple', '', '100')}}</p> + +<h3 id="Un_scénario_fréquent">Un scénario fréquent</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p>Un formulaire avec différents types de champs</p> +<form action="getform.php" method="get"> + <label>Prénom : <input type="text"></label><br> + <label>Nom : <input type="text"></label><br> + <label>Adresse email : <input type="email"></label><br> + <input type="submit" value="Envoyer"> +</form> +</pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample('Un_scénario_fréquent', '', '200')}}</p> + +<h2 id="Localisation">Localisation</h2> + +<p>Pour certains types d'éléments <code><input></code>, les valeurs saisies autorisées dépendent de la locale utilisée. Ainsi, dans certaines locales, 1,000.00 est un nombre valide alors que dans d'autres, il faudra avoir saisi 1.000,00 pour exprimer le même nombre.</p> + +<p>Firefox utilise la méthode heuristique suivante afin de déterminer la locale pour laquelle valider la saisie de l'utilisateur (au moins dans le cas de <code>type="number"</code>):</p> + +<ul> + <li>Utiliser la langue définie par l'attribut <code>lang</code>/<code>xml:lang</code> de l'élément ou par celui de ses parents.</li> + <li>Sinon utiliser la langue définie dans l'en-tête HTTP {{httpheader("Content-Language")}}</li> + <li>Sinon, utiliser la locale du navigateur</li> +</ul> + +<h2 id="Accessibilité">Accessibilité</h2> + +<h3 id="Utilisation_de_libellés">Utilisation de libellés</h3> + +<p>Lorsqu'on utilise des champs de formulaire, il est recommandé d'ajouter des libellés pour chacun de ces champs. Ainsi, les personnes qui utilisent des outils d'assistance pourront connaître la signification du champ.</p> + +<p>Dans l'exemple suivant, on illustre comment associer un élément <code><label></code> avec un élément <code><input></code>. Pour ce faire, on ajoutera un identifiant (un attribut <code>id</code>) à l'élément <code><input></code> et on référencera cet identifiant via l'attribut <code>for</code> de l'élément <code><label></code>.</p> + +<pre><label for="ptipois">Aimez-vous les petits-pois ?</label> +<input type="checkbox" name="petitspois" id="ptipois"> +</pre> + +<h3 id="Dimensionnement_-_taille">Dimensionnement - taille</h3> + +<p>Les éléments interactifs tels que les champs de formulaire 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> + +<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> +</ul> + +<h2 id="Notes">Notes</h2> + +<h3 id="Messages_personnalisés_pour_les_erreurs">Messages personnalisés pour les erreurs</h3> + +<p>Si on souhaite afficher un message d'erreur personnalisé lors de l'échec de la validation d'un champs, il faudra utiliser <a href="/en-US/docs/Web/API/Constraint_validation#Constraint_validation_interfaces">les fonctionnalités de contraintes de validation</a> qui sont disponibles sur les éléments <code><input></code>. Par exemple :</p> + +<pre class="brush: html"><form> + <label for="name">Saisir un nom d'utilisateur (lettres minuscules et majuscules) : </label> + <input type="text" name="name" id="name" required pattern="[A-Za-z]+"> + <button>Envoyer</button> +</form></pre> + +<p>Les fonctionnalités de validation HTML déclencheront un message d'erreur par défaut si on souhaite envoyer le formulaire avec une valeur invalide (qui ne respecte pas <code>pattern</code>) ou sans valeur.</p> + +<p>Si on souhaite plutôt afficher un message d'erreur personnalisé, on pourra utiliser un fragment de code JavaScript comme celui-ci :</p> + +<pre class="brush: js">const nameInput = document.querySelector('input'); +const form = document.querySelector('form'); + +nameInput.addEventListener('input', () => { + nameInput.setCustomValidity(''); + nameInput.checkValidity(); +}); + +nameInput.addEventListener('invalid', () => { + if(nameInput.value === '') { + nameInput.setCustomValidity("Veuillez saisir votre nom d'utilisateur !"); + } else { + nameInput.setCustomValidity("Un nom d'utilisateur ne peut contenir que des lettres minuscules et majuscules, veuillez réessayer"); + } +});</pre> + +<p>Voici le résultat qui pourra être obtenu :</p> + +<p>{{EmbedLiveSample("Messages_personnalisés_pour_les_erreurs")}}</p> + +<p>Voici un récapitulatif de la logique de cet exemple :</p> + +<ul> + <li>On vérifie la validité du champ chaque fois que sa valeur est modifiée en exécutant la méthode <code><a href="/fr/docs/Web/API/HTMLSelectElement/checkValidity">checkValidity()</a></code> grâce au gestionnaire d'évènement attaché à <code>input</code>.</li> + <li>Si la valeur est invalide, on génère un évènement <code>invalid</code> et le gestionnaire d'évènement associé est exécuté. Dans cette fonction, on analyse avec un bloc <code>if()</code> si la valeur est invalide parce qu'elle est vide ou parce qu'elle ne correspond pas au motif désiré. Selon le cas de figure, on utilise le message d'erreur correspondant.</li> + <li>Ainsi, si le champ saisi est invalide, lorsque le bouton Envoyer est utilisé, un des messages d'erreur sera affiché.</li> + <li>Si la valeur est valide, elle sera envoyée normalement. Pour cela, il faudra annuler la vérification spécifique en appelant <code><a href="/fr/docs/Web/API/HTMLSelectElement/setCustomValidity">setCustomValidity()</a></code> avec une chaîne de caractères vide. On effectue cela à chaque évènement <code>input</code>. Sans cette étape, avec une validation spécifique, le champ saisi serait considéré comme invalide même si sa valeur respectait les contraintes exprimées dans le HTML.</li> +</ul> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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>, contenu de formulaire (listé, envoyable, réinitialisable), <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>. Si l'attribut {{htmlattrxref("type", "input")}} ne vaut pas <code>hidden</code>, c'est un élément étiquetable et <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Aucun, cet élément est un élément vide.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>Cet élément doit avoir une balise de début et ne pas avoir de balise de fin.</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_phrasé">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td> + <ul> + <li><code>type=button</code> : {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}</li> + <li><code>type=checkbox</code> : {{ARIARole("button")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("option")}}, {{ARIARole("switch")}}</li> + <li><code>type=image</code> : {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}</li> + <li><code>type=radio</code> : {{ARIARole("menuitemradio")}}</li> + <li><code>type=color|date|email|file|hidden</code> : aucun</li> + <li><code>type=month|number|password|range|reset</code> : aucun</li> + <li><code>type=search|submit|tel|text|url|week</code> : aucun</li> + </ul> + </td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLInputElement")}}</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-input-element', '<input>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML Media Capture', '#the-capture-attribute','<input capture>')}}</td> + <td>{{Spec2('HTML Media Capture')}}</td> + <td>Ajout de l'élément <code>capture</code></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '<form>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments relatifs aux formulaires HTML : {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.</li> + <li>Dans certains cas, l'élément <code><input></code> est un <a href="/fr/docs/Web/CSS/%C3%89l%C3%A9ment_remplac%C3%A9">élément remplacé</a>, sa position et sa taille dans le cadre de l'élément peuvent être ajustées grâce aux propriétés CSS {{cssxref("object-position")}} et {{cssxref("object-fit")}}.</li> + <li>L'objet DOM correspondant : {{domxref("HTMLInputElement")}}</li> +</ul> diff --git a/files/fr/web/html/element/input/month/index.html b/files/fr/web/html/element/input/month/index.html new file mode 100644 index 0000000000..f32b084bff --- /dev/null +++ b/files/fr/web/html/element/input/month/index.html @@ -0,0 +1,465 @@ +--- +title: <input type="month"> +slug: Web/HTML/Element/Input/month +tags: + - Element + - Input + - Reference +translation_of: Web/HTML/Element/input/month +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Les éléments {{htmlelement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"month"</strong></code> permettent de créer des contrôles où l'utilisateur peut saisir un mois et année. La valeur associée à un tel élément suit le format <code>"YYYY-MM"</code>, où <code>YYYY</code> représente l'année sur quatre chiffre et <code>MM</code> le mois sur deux chiffres.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-month.html", "tabbed-shorter")}}</div> + +<div 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> !</div> + +<p>L'interface utilisateur associée à ce contrôle varie d'un navigateur à l'autre et la prise en charge de cette fonctionnalité reste encore hétérogène : seuls Chrome, Opéra et Edge implémentent cette fonctionnalité sur ordinateur et la plupart des navigateurs mobiles possèdent une implémentation. Pour les navigateurs qui ne prennent pas en charge cette fonctionnalité, l'élément sera transformé en un simple <code><a href="/fr/docs/Web/HTML/Element/input/text"><input type="text"></a></code>.</p> + +<p>Si votre navigateur ne prend pas en charge ce type d'élément, voici ensuite une capture d'écran de Chrome : cliquer sur la flèche vers le bas permettra de faire apparaître un sélecteur de date qui permettra de choisir le mois et l'année.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15391/month-control-chrome.png" style="display: block; height: 216px; margin: 0px auto; width: 273px;"></p> + +<p>Voici un aperçu du contrôle sous Edge :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15393/month-control-edge.png" style="display: block; height: 389px; margin: 0px auto; width: 227px;"></p> + +<h2 id="Valeur">Valeur</h2> + +<p>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur du mois et de l'année saisies via le contrôle, au format YYYY-MM (c'est-à-dire une année sur 4 chiffres suivi d'un tiret (<code>"-"</code>) suivi du mois sur deux chiffres. Le format détaillé est <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_mois">décrit dans l'article sur les formats des dates/heures</a>.</p> + +<p>Il est possible de définir une valeur par défaut pour le contrôle en utilisant l'attribut {{htmlattrxref("value", "input")}} de la façon suivante :</p> + +<div id="value-example-1"> +<pre class="brush: html"><label for="bday-month">Quel est le mois de votre naissance ?</label> +<input id="bday-month" type="month" name="bday-month" value="2017-06"></pre> + +<p>{{EmbedLiveSample('value-example-1', 600, 60)}}</p> +</div> + +<p>On notera que la façon dont la date est affichée peut varier selon la locale de l'utilisateur et être présentée sous un format différent. En revanche, d'un point de vue technique, la valeur de l'attribut <code>value</code> suivra toujours le format <code>YYYY-MM</code>.</p> + +<p>Par exemple, lorsque le formulaire précédent sera envoyé vers le serveur, l'information sera transmise de cette façon : <code>bday-month=1978-06</code>.</p> + +<p>Il est également possible de manipuler la date en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}}. Par exemple :</p> + +<div id="value-example-2"> +<div class="hidden"> +<pre class="brush: html"><label for="bday-month">Quel est le mois de votre naissance ?</label> +<input id="bday-month" type="month" name="bday-month" value="2017-06"></pre> +</div> + +<pre class="brush: js">var monthControl = document.querySelector('input[type="month"]'); +monthControl.value = '1978-06';</pre> + +<p>{{EmbedLiveSample("value-example-2", 600, 60)}}</p> +</div> + +<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> + +<p>En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les champs pour les mois gèrent les attributs suivants :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribut</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("max")}}</code></td> + <td>Le mois (et l'année) le plus tardif qui est considéré comme valide.</td> + </tr> + <tr> + <td><code>{{anch("min")}}</code></td> + <td>Le mois (et l'année) le plus tôt qui est considéré comme valide.</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>Un booléen qui indique si l'utilisateur peut modifier la valeur du champ.</td> + </tr> + <tr> + <td><code>{{anch("step")}}</code></td> + <td>Le pas qui est utilisé pour incrémenter la valeur du champ. Cet incrément est utilisé par l'interface utilisateur et également pour vérifier la valeur.</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3> + +<p>Le mois le plus tardif, indiqué avec l'année, sous la forme d'une chaîne de caractères au format <code>"yyyy-MM"</code>. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est supérieure à cette date, <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">la validation échouera</a>. Si la valeur fournie n'est pas une chaîne de caractères au format correct, aucun maximum ne sera fixé pour la valeur du contrôle.</p> + +<p>Cette valeur doit être supérieure ou égale à celle indiquée par l'attribut <code>min</code>.</p> + +<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3> + +<p>Le mois le plus tôt, indiqué avec l'année, sous la forme d'une chaîne de caractères au format <code>"yyyy-MM"</code>. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est antérieure à cette date, <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">la validation échouera</a>. Si la valeur fournie pour cet attribut n'est pas une chaîne de caractères au format correct, aucun minimum ne sera fixé pour la valeur du contrôle.</p> + +<p>Cette valeur doit être inférieure ou égale à celle indiquée par l'attribut <code>max</code>.</p> + +<h3 id="htmlattrdef(readonly)">{{htmlattrdef("readonly")}}</h3> + +<p>Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisateur. La valeur de l'attribut <code>value</code> peut toutefois être modifiée grâce à du code JavaScript qui changerait la propriété {{domxref("HTMLInputElement.value")}}.</p> + +<div class="note"> +<p><strong>Note :</strong> Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut <code>required</code> n'aura aucun effet si l'attribut <code>readonly</code> est défini.</p> +</div> + +<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}</p> + +<p>Pour les champs <code>month</code>, la valeur de l'attribut <code>step</code> est exprimée en mois et le facteur d'amplification est égal à 1 (la valeur sous-jacente est également exprimée en mois). La valeur par défaut pour cet attribut est 1.</p> + +<h2 id="Utiliser_<input_typemonth>">Utiliser <code><input type="month"></code></h2> + +<p>Un élément <code><input></code> de type <code>month</code> permet d'avoir une interface utilisateur simple d'utilisation pour choisir un mois et également de respecter un même format, quelle que soit la locale de l'utilisateur. Toutefois, <code><input type="month"></code> n'est pas pris en charge par l'ensemble des navigateurs ce qui peut poser problème.</p> + +<p>Nous verrons ici quelques cas d'utilisation, simples puis complexes et nous aborderons ensuite comment gérer l'absence de prise en charge.</p> + +<h3 id="Utilisation_simple">Utilisation simple</h3> + +<p>Dans son expression la plus simple, il suffit d'employer un élément <code><input></code> ainsi qu'un élément {{htmlelement("label")}} :</p> + +<pre class="brush: html"><form> + <label for="bday-month">Quel est le mois de votre naissance ?</label> + <input id="bday-month" type="month" name="bday-month"> +</form></pre> + +<p>{{EmbedLiveSample('Utilisation_simple', 600, 40)}}</p> + +<h3 id="Indiquer_une_date_maximale_et_une_date_minimale">Indiquer une date maximale et une date minimale</h3> + +<p>On peut utiliser les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} afin de restreindre la période pendant laquelle l'utilisateur peut choisir un mois. Dans l'exemple qui suit, on définit une date au plus tôt avec <code>1900-01</code> et une date au plus tard avec <code>2017-08</code>:</p> + +<pre class="brush: html"><form> + <label for="bday-month">Quel est le mois de votre naissance ?</label> + <input id="bday-month" type="month" name="bday-month" + min="1900-01" max="2017-08"> +</form></pre> + +<p>{{EmbedLiveSample('Indiquer_une_date_maximale_et_une_date_minimale', 600, 40)}}</p> + +<p>Grâce ce fragment de code :</p> + +<ul> + <li>Seuls les mois entre janvier 1900 et août 2017 peuvent être sélectionnés (le contrôle ne doit pas permettre de sélectionner un mois en dehors de cette période)</li> + <li>Selon le navigateur, les mois en dehors de la période ne peuvent pas être sélectionnés (Edge) ou sont invalides mais toujours disponibles (Chrome).</li> +</ul> + +<div class="note"> +<p><strong>Note</strong> : L'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être utilisé afin d'ajuster le pas d'incrémentation (par exemple si on ne veut pouvoir sélectionner que les mois de début de trimestre). Toutefois, à l'heure où nous écrivons ces lignes, aucun navigateur ne semble prendre correctement en charge cette fonctionnalité.</p> +</div> + +<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3> + +<p><code><input type="month"></code> ne peut pas être dimensionné grâce à {{htmlattrxref("size", "input")}}, il vous faudra utiliser <a href="/fr/docs/Web/CSS">CSS</a> si besoin.</p> + +<h2 id="Validation">Validation</h2> + +<p>Par défaut, <code><input type="month"></code> n'applique pas de validation particulière sur la valeur saisie. C'est l'interface utilisateur qui ne permet pas de choisir autre chose qu'un mois.</p> + +<p>Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de limiter la période valide et l'attribut {{htmlattrxref("required", "input")}} rend le champ obligatoire. Avec ces attributs, les navigateurs afficheront un message d'erreur si la date choisie est hors de la période ou si la valeur est vide.</p> + +<p>Prenons un exemple avec une période délimitée et un champ obligatoire :</p> + +<pre class="brush: html"><form> + <div> + <label for="month">À quel mois souhaitez-vous venir cet été ?</label> + <input id="month" type="month" name="month" + min="2017-06" max="2017-09" required> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="Envoyer le formulaire"> + </div> +</form></pre> + +<p>Si vous tentez d'envoyer le formulaire avec une date incomplète ou en dehors de cette période, le navigateur doit afficher un message d'erreur. Voici le résultat <em>live</em> :</p> + +<p>{{EmbedLiveSample('Validation', 600, 120)}}</p> + +<p>Voici une capture d'écran qui illustre le résultat obtenu avec un navigateur prenant en charge cette fonctionnalité :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15395/month-required.png" style="display: block; margin: 0 auto;"></p> + +<p>Voici ensuite la feuille de style CSS utilisée dans l'exemple précédent. On utilise {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que la valeur saisie est invalide. Les icônes ajoutées sont placées dans un élément {{htmlelement("span")}} à part car Chrome ne permet pas de gérer du contenu généré à même le contrôle ni de mettre en forme ce contenu généré.</p> + +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> + +<div class="warning"> +<p><strong>Attention !</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</p> +</div> + +<h2 id="Gérer_la_prise_en_charge_des_navigateurs">Gérer la prise en charge des navigateurs</h2> + +<p>Comme évoqué plus haut, le problème principal relatif à ces contrôles est l'absence partielle de prise en charge des navigateurs. Seuls Chrome, Opera et Edge supportent ce type de contrôle sur ordinateurs et la plupart des navigateurs mobiles le prennent en charge. À titre d'exemple, voici une capture d'écran du contrôle sous Chrome pour Android :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15397/month-android.png" style="display: block; margin: 0 auto;"></p> + +<p>Les navigateurs qui ne prennent pas en charge cette fonctionnalité basculent sur un contrôle textuel classique mais cela pose problème à la fois en termes de cohérence de l'interface utilisateur et aussi par rapport à la gestion des données.</p> + +<p>C'est ce deuxième aspect qui est le plus problématique. Comme nous l'avons mentionné, la valeur d'une date saisie dans un contrôle <code><input type="month"></code> est toujours normalisée au format <code>"YYYY-MM"</code>. En revanche, avec un champ textuel, le navigateur ne convertit pas la valeur saisie et les personnes peuvent très bien écrire un mois sous plusieurs formes :</p> + +<ul> + <li><code>MMYYYY</code></li> + <li><code>MM/YYYY</code></li> + <li><code>MM-YYYY</code></li> + <li><code>YYYY-MM</code></li> + <li>etc.</li> +</ul> + +<p>Une façon de contourner ce problème consiste à utiliser l'attribut {{htmlattrxref("pattern", "input")}} sur l'élément <code><input type="month"></code>. Bien que le contrôle de type <code>month</code> ne gère pas cet attribut, ce dernier sera pris en charge par le champ texte. Vous pouvez essayer l'exemple suivant dans un navigateur qui ne prend pas en charge le contrôle de saisie des mois :</p> + +<pre class="brush: html"><form> + <div> + <label for="month">À quel mois souhaitez-vous venir cet été ? (utilisez le format yyyy-mm)</label> + <input id="month" type="month" name="month" + min="2017-06" max="2017-09" required + pattern="[0-9]{4}-[0-9]{2}"> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="Envoyer le formulaire"> + </div> +</form></pre> + +<p>{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}}</p> + +<p>Si vous tentez d'envoyer ce formulaire, vous verrez un message d'erreur si la valeur saisie ne respecte pas le format <code>nnnn-nn</code>, où <code>n</code> est un chiffre entre 0 et 9. Bien entendu, cela n'empêche pas de saisir des dates inexistantes ou au mauvais format.</p> + +<p>De plus, cela présage que l'utilisateur comprenne le format dans lequel il faut saisir la valeur. Bref, le problème subsiste.</p> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<p>La meilleure façon de gérer la saisie de mois pour l'ensemble des navigateurs consiste actuellement à saisir le mois et l'année dans deux contrôles séparés, représentés chacun par un élément {{htmlelement("select")}}. On peut également utiliser certaines bibliothèques JavaScript telles que <a href="https://jqueryui.com/datepicker/">jQuery date picker</a> ou le plugin <a href="http://timepicker.co/">jQuery timepicker</a>.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Dans l'exemple qui suit, on crée deux ensembles d'éléments pour choisir un mois : un sélecteur natif <code><input type="month"></code> d'une part et un ensemble de deux éléments {{htmlelement("select")}} pour choisir le mois et l'année d'autre part (ce sont ces deux éléments qui seront utilisés lorsque le navigateur ne prend pas en charge le contrôle natif).</p> + +<p>{{EmbedLiveSample('Exemples', 600, 140)}}</p> + +<p>Voici le fragment de code HTML utilisé :</p> + +<pre class="brush: html"><form> + <div class="nativeDatePicker"> + <label for="month-visit">À quel mois souhaitez-vous venir cet été ?</label> + <input type="month" id="month-visit" name="month-visit"> + <span class="validity"></span> + </div> + <p class="fallbackLabel">À quel mois souhaitez-vous venir cet été ?</p> + <div class="fallbackDatePicker"> + <div> + <span> + <label for="month">Mois :</label> + <select id="month" name="month"> + <option selected>Janvier</option> + <option>Février</option> + <option>Mars</option> + <option>Avril</option> + <option>Mai</option> + <option>Juin</option> + <option>Juillet</option> + <option>Août</option> + <option>Septembre</option> + <option>Octobre</option> + <option>Novembre</option> + <option>Décembre</option> + </select> + </span> + <span> + <label for="year">Année :</label> + <select id="year" name="year"> + </select> + </span> + </div> + </div> +</form></pre> + +<p>Les mois sont représentés statiquement (ce sont toujours les mêmes) et les valeurs pour les années sont générées dynamiquement à partir de l'année courante (voir les commentaires dans le code suivant).</p> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<p>Une partie intéressante du code est celle qui permet de détecter la prise en charge de fonctionnalité. Pour détecter si le navigateur prend en charge ce contrôle, on crée un nouvel élément {{htmlelement("input")}} dont on modifie le type afin qu'il vaille <code>month</code> puis on vérifie immédiatement la valeur associée au type : les navigateurs qui ne prennent pas en charge la fonctionnalité renverront <code>text</code> car le champ <code>month</code> a automatiquement transformé en <code>text</code>. Si c'est le cas, on masque le sélecteur natif et on affiche le sélecteur alternatif (celui construit avec les éléments {{htmlelement("select")}}).</p> + +<pre class="brush: js">// On définit des variables +var nativePicker = document.querySelector('.nativeDatePicker'); +var fallbackPicker = document.querySelector('.fallbackDatePicker'); +var fallbackLabel = document.querySelector('.fallbackLabel'); + +var yearSelect = document.querySelector('#year'); +var monthSelect = document.querySelector('#month'); + +// Par défaut on masque le sélecteur alternatif +fallbackPicker.style.display = 'none'; +fallbackLabel.style.display = 'none'; + +// On teste si un nouveau contrôle est automatiquement +// converti en un champ texte +var test = document.createElement('input'); +test.type = 'month'; +// Si c'est le cas, on exécute le code dans ce bloc if +if(test.type === 'text') { + // on masque le sélecteur natif et on masque le sélecteur alternatif + nativePicker.style.display = 'none'; + fallbackPicker.style.display = 'block'; + fallbackLabel.style.display = 'block'; + + // on génère les valeurs pour les années + populateYears(); +} + +function populateYears() { + // On récupère l'année courante + var date = new Date(); + var year = date.getFullYear(); + + // On ajoute l'année courante et les 100 années à venir + // dans l'élément <select> pour l'année + for(var i = 0; i <= 100; i++) { + var option = document.createElement('option'); + option.textContent = year-i; + yearSelect.appendChild(option); + } +}</pre> + +<div class="note"> +<p><strong>Note :</strong> Attention, certaines années peuvent contenir 53 semaines ! (cf. <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">cet article Wikipédia</a>) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles.</p> +</div> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente un mois et une année ou bien la chaîne vide.</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}.</td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} et {{htmlattrxref("step", "input")}}.</td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications">Specifications</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#month-state-(type=month)', '<input type="month">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-month")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'élément générique {{HTMLElement("input")}} et l'interface DOM qui permet de le manipuler : {{domxref("HTMLInputElement")}}</li> + <li><a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">Les formats de date et d'heure utilisés en HTML</a></li> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#Sélection_de_date_et_d'horaire">Un tutoriel à propos des sélecteurs de dates et d'heures</a></li> + <li><code><a href="/fr/docs/Web/HTML/Element/input/datetime-local"><input type="datetime-local"></a></code>, <code><a href="/fr/docs/Web/HTML/Element/input/date"><input type="date"></a></code>, <code><a href="/fr/docs/Web/HTML/Element/input/time"><input type="time"></a></code>, and <code><a href="/fr/docs/Web/HTML/Element/input/week"><input type="week"></a></code></li> +</ul> diff --git a/files/fr/web/html/element/input/number/index.html b/files/fr/web/html/element/input/number/index.html new file mode 100644 index 0000000000..e134aa2a77 --- /dev/null +++ b/files/fr/web/html/element/input/number/index.html @@ -0,0 +1,432 @@ +--- +title: <input type="number"> +slug: Web/HTML/Element/Input/number +tags: + - Element + - HTML + - Input + - Reference +translation_of: Web/HTML/Element/input/number +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>number</strong></code> permettent à un utilisateur de saisir des nombres dans un formulaires. De tels contrôles incluent des mécanismes de validation natifs afin de rejeter les valeurs non-numériques.</span> Le navigateur peut agrémenter le contrôle avec des flèches afin d'incrémenter/décrémenter la valeur grâce à la souris ou avec le doigt.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-number.html", "tabbed-shorter")}}</div> + +<div 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> !</div> + +<div class="note"> +<p><strong>Note </strong>: Si un navigateur ne prend pas en charge le type <code>number</code>, le contrôle affiché sera le contrôle standard pour la saisie d'un texte (cf. <code><a href="/fr/docs/Web/HTML/Element/input/text">text</a></code>).</p> +</div> + +<h2 id="Valeur">Valeur</h2> + +<p>Un nombre (cf. {{jsxref("Number")}}) qui représente la valeur saisie dans le contrôle. Il est possible d'indiquer une valeur par défaut en utilisant l'attribut {{htmlattrxref("value", "input")}} :</p> + +<pre class="brush: html"><input id="number" type="number" value="42"></pre> + +<p>{{EmbedLiveSample('Valeur', 600, 40)}}</p> + +<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> + +<p>En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les champs de type <code>"number"</code> peuvent utiliser les attributs suivants :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribut</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("max")}}</code></td> + <td>La valeur maximale qui peut être acceptée.</td> + </tr> + <tr> + <td><code>{{anch("min")}}</code></td> + <td>La valeur minimale qui peut être acceptée.</td> + </tr> + <tr> + <td><code>{{anch("placeholder")}}</code></td> + <td>Une valeur fournie comme exemple affiché lorsque le champ est vide.</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>Un attribut booléen qui contrôle si le champ est en lecture seule.</td> + </tr> + <tr> + <td><code>{{anch("step")}}</code></td> + <td>Le pas à utiliser pour incrémenter la valeur à l'aide du contrôle fourni par l'agent utilisateur. Cet incrément est également utilisé pour la validation de la valeur.</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3> + +<p>La valeur maximale qui peut être acceptée pour ce champ. Si la valeur du champ (portée par l'attribut {{htmlattrxref("value", "input")}}) dépasse ce seuil, l'élément <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne pourra être validé</a>. Si la valeur de l'attribut <code>max</code> n'est pas un nombre, l'élément n'aura pas de maximum.</p> + +<p>Cette valeur doit être supérieure ou égale à l'attribut <code>min</code>.</p> + +<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3> + +<p>La valeur minimale qui peut être acceptée pour ce champ. Si la valeur du champ (portée par l'attribut {{htmlattrxref("value", "input")}}) est inférieure à ce seuil, l'élément <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne pourra être validé</a>. Si la valeur de l'attribut <code>min</code> n'est pas un nombre, l'élément n'aura pas de minimum.</p> + +<p>Cette valeur doit être inférieure ou égale à l'attribut <code>max</code>.</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3> + +<div id="step-include"> +<p>L'attribut <code>step</code> est un nombre qui définit la granularité de la valeur ou le mot-clé <code>any</code>. Seule les valeurs qui sont des multiples de cet attribut depuis le seuil <code>{{anch("min")}}</code> sont valides.</p> + +<p>Lorsque la chaîne de caractères <code>any</code> est utilisée, cela indique qu'aucun incrément spécifique n'est défini et que toute valeur (comprise entre <code>{{anch("min")}}</code> et <code>{{anch("max")}}</code>) est valide.</p> + +<div class="note"> +<p><strong>Note :</strong> Lorsque les données saisies par l'utilisateur ne correspondent pas à l'incrément indiqué, l'agent utilisateur pourra arrondir à la valeur valide la plus proche (en choisissant les nombres les plus grands lorsque deux sont équidistants.</p> +</div> +</div> + +<p>Pour les champs <code>number</code>, l'incrément par défaut est 1 et ne permet donc que de saisir des entiers si la valeur de base est entière. Ainsi, si on a <code>min</code> qui vaut -10 et <code>value</code> qui vaut 1.5, si on a <code>step</code> qui vaut 1, seules les valeurs 1.5, 2.5, 3.5,... -0.5, -1.5, -2.5,... seront valides.</p> + +<h2 id="Utiliser_les_contrôles_de_saisie_numérique">Utiliser les contrôles de saisie numérique</h2> + +<p>Les éléments <code><input type="number"></code> simplifient la saisie de valeurs numériques dans un formulaire. Lorsqu'on crée un tel contrôle, des mécanismes de validation automatiques sont appliqués afin de vérifier que le texte saisi est bien un nombre. Généralement un contrôle de saisie numérique incluera des boutons avec des curseurs pour augmenter/réduire la valeur.</p> + +<div class="warning"> +<p><strong>Attention !</strong> On notera qu'un utilisateur peut toujours saisir des valeurs qui ne sont pas numériques dans de tels champs (par exemple avec un navigateur de bureau). Toutefois, ce comportement semble différer selon les navigateurs (voir {{bug(1398528)}}). Les valeurs non-numériques seront considérées comme invalide (cf. {{anch("Validation")}} ci-après).</p> +</div> + +<div class="note"> +<p><strong>Note </strong>: Il est important de rappeler qu'un utilisateur peut tout à fait modifier le code HTML qui est utilisé. Le site ne doit donc pas se reposer sur les mécanismes de validation qui existent côté client pour considérer qu'une valeur est saine. Pour des raisons de contrôle et de sécurité, les valeurs envoyées via un formulaire doivent être vérifiées côté serveur.</p> +</div> + +<p>De plus, les navigateurs mobiles peuvent adapter leur ergonomie en affichant un clavier adapté à la saisie de valeur numérique lorsque l'utilisateur appuie sur un tel contrôle. Voici le résultat qu'on obtient par exemple avec Firefox pour Android :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14963/number-keyboard-fxa.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<h3 id="Un_contrôle_simple">Un contrôle simple</h3> + +<p>Dans sa forme la plus simple, on peut implémenter un contrôle de saisie numérique avec le fragment HTML suivant :</p> + +<pre class="brush: html"><label for="ticketNum">Nombre de tickets à acheter :</label> +<input id="ticketNum" type="number" name="ticketNum" value="0"></pre> + +<p>{{EmbedLiveSample('Un_contrôle_simple', 600, 40)}}</p> + +<p>Un contrôle de saisie numérique considère que la valeur est valide si elle est vide ou quand un nombre est saisi. Dans les autres cas, la valeur est considérée invalide. Si l'attribut {{htmlattrxref("required", "input")}} est utilisé, la valeur vide n'est plus considérée valide.</p> + +<div class="note"> +<p><strong>Note </strong>: N'importe quel nombre est valide tant que c'est un nombre qui peut être représenté <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number">comme un nombre à virgule flottante</a> (autrement dit, un nombre qui n'est pas {{jsxref("NaN")}} ou {{jsxref("Infinity")}}).</p> +</div> + +<h3 id="Indicateurs_de_saisie_-_placeholders">Indicateurs de saisie - <em>placeholders</em></h3> + +<p>Il est parfois utile de fournir une indication quant à la valeur qui devrait être saisie. C'est notamment le cas lorsque la disposition de la page ne permet pas d'avoir d'étiquettes suffisamment descriptives pour chaque {{HTMLElement("input")}}. Dans ces cas, on peut utiliser l'attribut <code>placeholder</code> afin de fournir une indication et qui sera le texte affiché dans le contrôle avant toute saisie ou quand la valeur est vide.</p> + +<p>Dans l'exemples qui suit, on utilise un élément <code><input</code><code>></code> de type <code>"number"</code> avec le texte indicatif <code>"Multiple de 10"</code>. Vous pouvez noter la façon dont le texte disparaît/réapparaît à selon la présence ou l'absence de valeur dans le champ.</p> + +<pre class="brush: html"><input type="number" placeholder="Multiple de 10"></pre> + +<p>{{ EmbedLiveSample('Indicateurs_de_saisie_-_placeholders', 600, 40) }}</p> + +<h3 id="Paramétrer_la_taille_de_l’incrément">Paramétrer la taille de l’incrément</h3> + +<p>Par défaut, les curseurs fournis pour incrémenter/décrémenter la valeur utilisent un pas de 1. Ce comportement par défaut peut être changé en utilisant l'attribut {{htmlattrxref("step", "input")}} dont la valeur représente le pas d'incrémentation. Dans l'exemple qui suit et parce que le texte informatif indique "Multiple de 10", on utilise un pas de 10 grâce à l'attribut <code>step</code> :</p> + +<pre class="brush: html"><input type="number" placeholder="Multiple de 10" step="10"></pre> + +<p>{{EmbedLiveSample("Paramétrer_la_taille_de_l’incrément", 600, 40)}}</p> + +<p>Dans cet exemple, on peut voir que les curseurs permettent d'augmenter ou de réduire la valeur de 10 (et non de 1). Il est toujours possible de saisir manuellement un nombre qui n'est pas un multiple de 10 mais la valeur sera alors considérée invalide.</p> + +<h3 id="Indiquer_un_minimum_et_un_maximum">Indiquer un minimum et un maximum</h3> + +<p>Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} peuvent être employés afin d'indiquer les bornes de l'intervalle dans lequel doit se situer la valeur. Par exemple, avec le fragment HTML suivant, on indique que le minimum vaut 0 et que le maximum vaut 100 :</p> + +<pre class="brush: html"><input type="number" placeholder="Multiple de 10" step="10" min="0" max="100"></pre> + +<p>{{EmbedLiveSample('Indiquer_un_minimum_et_un_maximum', 600, 40)}}</p> + +<p>Dans cet exemple, les curseurs ne permettent pas de dépasser 100 ou de saisir une valeur inférieure à 0. Il est toujours possible de saisir manuellement un nombre en dehors de ces bornes mais la valeur sera alors considérée invalide.</p> + +<h3 id="Autoriser_les_valeurs_décimales">Autoriser les valeurs décimales</h3> + +<p>Par défaut, l'incrément d'un tel contrôle vaut 1 et si on saisit la valeur <code>1.0</code>, elle sera considérée invalide. Si on souhaite pouvoir saisir une valeur qui contient une partie décimale, on pourra utiliser l'attribut <code>step</code> (par exemple, on pourra utiliser <code>step="0.01"</code> pour autoriser des nombres avec deux chiffres après la virgules) :</p> + +<pre class="brush: html"><input type="number" placeholder="1.0" step="0.01" min="0" max="10"></pre> + +<p>{{EmbedLiveSample("Autoriser_les_valeurs_décimales", 600, 40)}}</p> + +<p>Dans cet exemple, on peut saisir des valeurs comprises entre 0 et 10 et qui ont au plus deux chiffres après la virgule, "9.52" sera considérée comme valide mais pas "9.521".</p> + +<h3 id="Paramétrer_la_taille_du_contrôle">Paramétrer la taille du contrôle</h3> + +<p>Les éléments {{HTMLElement("input")}} de type <code>"number"</code> ne prennent pas en charge l'attribut {{htmlattrxref("size", "input")}} et il est donc nécessaire d'utiliser CSS afin de modifier la taille des contrôles.</p> + +<p>Par exemple, si on souhaite réduire la largeur du contrôle car il ne permet que de saisir un nombre à trois chiffres, on ajoute un identifiant sur l'élément et on réduit le texte indicatif afin qu'il ne soit pas tronqué :</p> + +<pre class="brush: html"><input type="number" placeholder="x10" step="10" min="0" max="100" id="number"></pre> + +<p>On ajoute ensuite une déclaration CSS dans la feuille de style pour l'élément avec un identifiant <code>"number"</code> :</p> + +<pre class="brush: css">#number { + width: 3em; +}</pre> + +<p>Le résultat ressemblera à :</p> + +<p>{{EmbedLiveSample('Paramétrer_la_taille_du_contrôle', 600, 40)}}</p> + +<h3 id="Ajouter_des_valeurs_suggérées">Ajouter des valeurs suggérées</h3> + +<p>Il est possible de fournir une liste d'options par défaut parmi lesquelles l'utilisateur pourra choisir. Pour cela, on renseignera l'attribut {{htmlattrxref("list", "input")}} dont la valeur est l'identifiant (attribut <code>id</code>) d'un élément {{HTMLElement("datalist")}} contenant autant d'éléments {{HTMLElement("option")}} que de valeurs suggéréees. La valeur de l'attribut <code>value</code> de chaque élément <code><option></code> sera utilisée comme suggestion pour la saisie dans le contrôle.</p> + +<pre class="brush: html"><input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers"> +<span class="validity"></span> + +<datalist id="defaultNumbers"> + <option value="10045678"> + <option value="103421"> + <option value="11111111"> + <option value="12345678"> + <option value="12999922"> +</datalist></pre> + +<p>{{EmbedLiveSample("Ajouter_des_valeurs_suggérées", 600, 40)}}</p> + +<div class="note"> +<p><strong>Note :</strong> L'attribut {{htmlattrxref("list", "input")}} pour les éléments <code><input></code> de type <code>"number"</code> n'est pas pris en charge pour tous les navigateurs (cela fonctionne pour Chrome et Opera mais pas pour Firefox par exemple).</p> +</div> + +<h2 id="Validation">Validation</h2> + +<p>Plusieurs mécanismes de validation sont mis en place par le navigateur pour les contrôles de saisie numérique :</p> + +<ul> + <li>Toute valeur qui n'est pas un nombre est considérée comme invalide (la valeur vide est uniquement considérée comme valide si l'attribut <code>required</code> est absent).</li> + <li>Toute valeur qui n'est pas un multiple de {{htmlattrxref("step", "input")}} est considérée comme invalide.</li> + <li>Toute valeur qui est inférieure à {{htmlattrxref("min", "input")}} ou supérieure à {{htmlattrxref("max", "input")}} est considérée comme invalide.</li> +</ul> + +<p>L'exemple suivant illustre l'ensemble de ces fonctionnalités et quelques règles CSS ont été ajoutées afin d'afficher des icônes pour indiquer si la valeur saisie est valide ou invalide :</p> + +<pre class="brush: html"><form> + <div> + <label for="balloons">Quantité de ballons à commander (par 10) :</label> + <input id="balloons" type="number" name="balloons" step="10" min="0" max="100" required> + <span class="validity"></span> + </div> + <div> + <input type="submit"> + </div> +</form></pre> + +<p>{{EmbedLiveSample("Validation", 600, 80)}}</p> + +<p>Vous pouvez essayer d'envoyer des données invalides (pas de valeur, une valeur inférieure à 0 ou supérieure à 100 ou une valeur qui n'est pas un multiple de 10) afin de voir les messages d'erreur fournis par le navigateur.</p> + +<p>Voici les règles CSS appliquées :</p> + +<pre class="brush: css">div { + margin-bottom: 10px; +} + +input:invalid+span:after { + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + content: '✓'; + padding-left: 5px; +}</pre> + +<p>Ici, on a utilisé les pseudo-classes {{cssxref(":invalid")}} et {{cssxref(":valid")}} afin d'afficher une icône selon le cas, à côté de l'élément {{htmlelement("span")}} ajdacent. On utilise un élément <code><span></code> séparé pour plus de flexibilité : certains navigateurs n'affichent pas le contenu généré par les pseudo-classes pour certains types de contrôle (cf. <a href="/fr/docs/Web/HTML/Element/input/date#Validation"><code><input type="date"></code></a>).</p> + +<div class="warning"> +<p><strong>Important </strong>: la validation des données des formulaires par le navigateur (côté client) doit toujours être complétée d'une validation des données côté serveur (l'utilisateur peut toujours modifier le HTML et envoyer les données au serveur).</p> +</div> + +<h3 id="Utilisation_d'un_motif_de_validation">Utilisation d'un motif de validation</h3> + +<p>Les éléments <code><input type="number"></code> ne prennent pas en charge l'attribut {{htmlattrxref("pattern", "input")}} qui permet de restreindre les valeurs selon une expression rationnelle. En effet, les contrôles de saisie numérique sont destinés à contenir des nombres plutôt que des chaînes de caractères et les autres attributs permettent de paramétrer les valeurs recevables (cf. ci-avant).</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Dans l'exemple suivant, on crée un formulaire qui permet de saisir la taille d'un personne, par défaut exprimée en mètres et pour laquelle un bouton permet de la saisir en pieds (<em>feet</em>/<em>inches</em>).</p> + +<p>{{EmbedLiveSample("Exemples", 600, 100)}}</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><form> + <div class="metersInputGroup"> + <label for="meters">Saisir votre taille — en mètres :</label> + <input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="e.g. 1.78" required> + <span class="validity"></span> + </div> + <div class="feetInputGroup" style="display: none;"> + <span>Saisir votre taille — </span> + <label for="feet">feet :</label> + <input id="feet" type="number" name="feet" min="0" step="1"> + <span class="validity"></span> + <label for="inches">inches :</label> + <input id="inches" type="number" name="inches" min="0" max="11" step="1"> + <span class="validity"></span> + </div> + <div> + <input type="button" class="meters" value="Saisir la taille en feet/inches"> + </div> + <div> + <input type="submit" value="Envoyer"> + </div> +</form></pre> + +<p>Ici on utilise l'attribut <code>step</code> avec la valeur <code>0.01</code> afin d'accepter une taille en centimètres. On fournit également un texte indicatif via <code>placeholder</code>.</p> + +<p>Par défaut on masque la saisie en pieds avec <code>style="display: none;"</code>.</p> + +<h3 id="CSS">CSS</h3> + +<p>La feuille CSS ressemble de près à celle vue précédemment :</p> + +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<p>Enfin, voici le code JavaScript utilisé :</p> + +<pre class="brush: js">var metersInputGroup = document.querySelector('.metersInputGroup'); +var feetInputGroup = document.querySelector('.feetInputGroup'); +var metersInput = document.querySelector('#meters'); +var feetInput = document.querySelector('#feet'); +var inchesInput = document.querySelector('#inches'); +var switchBtn = document.querySelector('input[type="button"]'); + +switchBtn.addEventListener('click', function() { + if(switchBtn.getAttribute('class') === 'meters') { + switchBtn.setAttribute('class', 'feet'); + switchBtn.value = 'Saisir la taille en mètres'; + + metersInputGroup.style.display = 'none'; + feetInputGroup.style.display = 'block'; + + feetInput.setAttribute('required', ''); + inchesInput.setAttribute('required', ''); + metersInput.removeAttribute('required'); + + metersInput.value = ''; + } else { + switchBtn.setAttribute('class', 'meters'); + switchBtn.value = 'Saisir la taille en pieds'; + + metersInputGroup.style.display = 'block'; + feetInputGroup.style.display = 'none'; + + feetInput.removeAttribute('required'); + inchesInput.removeAttribute('required'); + metersInput.setAttribute('required', ''); + + feetInput.value = ''; + inchesInput.value = ''; + } +});</pre> + +<p>Après avoir déclaré quelques variables, on ajoute un gestionnaire d'évènements au bouton afin de gérer le changement d'unités. Lors de ce changement, on modifiera la classe du bouton et l'étiquette associée et on mettr à jour les valeurs affichées lorsque l'utilisateur appuie sur le bouton. On notera qu'il n'y a pas de mécanisme de conversion entre les mètres et les pieds (ce qui serait vraisemblablement implémenté dans une application réelle).</p> + +<div class="note"> +<p><strong>Note :</strong> Lorsqu'on clique sur le bouton, on retire l'attribut <code>required</code> du champ de saisie masqué et on vide l'attribut <code>value</code> afin de pouvoir envoyer le formulaire si un des deux champs n'est pas renseigné.</p> +</div> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Un nombre ou une valeur vide.</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}</td> + </tr> + <tr> + <td><strong>Attributs pris en charges</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}</td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}</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#number-state-(type=number)', '<input type="number">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#number-state-typenumber', '<input type="number">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-number")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Guide sur les formulaires HTML</a></li> + <li>{{HTMLElement("input")}}</li> + <li><code><a href="/fr/docs/Web/HTML/Element/input/tel"><input type="tel"></a></code></li> +</ul> diff --git a/files/fr/web/html/element/input/password/index.html b/files/fr/web/html/element/input/password/index.html new file mode 100644 index 0000000000..e9262a6d46 --- /dev/null +++ b/files/fr/web/html/element/input/password/index.html @@ -0,0 +1,289 @@ +--- +title: <input type="password"> +slug: Web/HTML/Element/Input/password +tags: + - Formulaires + - HTML + - Input + - Reference + - Web +translation_of: Web/HTML/Element/input/password +--- +<div>{{HTMLRef}}</div> + +<p>Les éléments {{HTMLElement("input")}} de type <strong><code>"password"</code></strong> permettent à utilisateur de saisir un mot de passe sans que celui-ci ne soit lisible à l'écran. Un tel élément se présente comme un contrôle de saisie de texte sur une ligne et dans lequel chaque caractère est remplacé par un symbole (un astérisque ("*") ou un point ("•")) afin que le texte saisi ne puisse être lu. Le caractère utilisé pour obfusquer dépend de l'agent utilisateur (du navigateur) et du système d'exploitation utilisé.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-password.html", "tabbed-standard")}}</div> + +<div 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> !</div> + +<p>La façon dont le texte saisi est traité dépend du navigateur utilisé. Sur les appareils mobiles, par exemple, le caractère tapé est souvent laissé affiché un court instant afin que l'utilisateur puisse contrôler que c'est bien le bon caractère. Ainsi, même si le clavier est petit et viruel, on peut éviter de faire trop d'erreurs.</p> + +<div class="note"> +<p><strong>Note :</strong> les différents formulaires qui permettent d'envoyer des données sensibles (tels que des mots de passe) doivent être servis sur HTTPS. Firefox, Chrome et les autres navigateurs implémentent désormais différents mécanismes afin d'avertir l'utilisateur lorsqu'il saisit un mot de passe sur une connexion HTTP (cf. l'article <a href="/fr/docs/Web/Security/Insecure_passwords">mots de passe non sécurisés</a> pour Firefox).</p> +</div> + +<h2 id="Valeur">Valeur</h2> + +<p>La valeur de l'attribut {{htmlattrxref("value", "input")}} d'un tel élément contient une chaîne de caractères ({{domxref("DOMString")}}) dont la valeur est le texte qui est en cours de saisie dans le contrôle. Si l'utilisateur n'a pas encore saisi d'information, la valeur est une chaîne vide. Si l'attribut booléen {{htmlattrxref("required")}} est utilisé, le mot de passe doit contenir une valeur non vide afin que le formulaire puisse être envoyé.</p> + +<p>Si l'attribut {{htmlattrxref("pattern", "input")}} est indiqué, le contenu du contrôle doit respecter l'expression rationnelle indiquée par l'attribut. Pour plus d'informations, voir la section {{anch("Validation")}} ci-après.</p> + +<div class="note"> +<p>Note : Il n'est pas possible d'utiliser les caractères de fin de ligne (<em>Line Feed</em>) (code U+000A) et de retour chariot (<em>Carriage Return</em>) (code U+000D) dans la valeur d'un champ <code>"password"</code>. Lorsqu'on saisit la valeur, ces caractères sont retirés si besoin.</p> +</div> + +<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> + +<p>En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs pour les mots de passe prennent en charge les attributs suivants :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribut</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("maxlength")}}</code></td> + <td>Le nombre de caractères maximal qui peut être écrit dans ce champ.</td> + </tr> + <tr> + <td><code>{{anch("minlength")}}</code></td> + <td>Le nombre de caractères minimal qui peut être écrit dans ce champ pour qu'il soit considéré comme valide.</td> + </tr> + <tr> + <td><code>{{anch("pattern")}}</code></td> + <td>Une expression rationnelle à laquelle doit correspondre le texte saisi pour être valide.</td> + </tr> + <tr> + <td><code>{{anch("placeholder")}}</code></td> + <td>Une valeur d'exemple qui sera affichée lorsqu'aucune valeur n'est saisie.</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>Un attribut booléen qui indique si le contenu du champ est en lecture seule.</td> + </tr> + <tr> + <td><code>{{anch("size")}}</code></td> + <td>Un nombre qui indique le nombre de caractères affichés par le champ.</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdef(maxlength)">{{htmlattrdef("maxlength")}}</h3> + +<p>Le nombre maximum de caractères (exprimé en nombre d'unité de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>maxlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à <code>minlength</code>.</p> + +<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du texte dépasse <code>maxlength</code> en nombre d'unité de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p> + +<h3 id="htmlattrdef(minlength)">{{htmlattrdef("minlength")}}</h3> + +<p>Le nombre minimal de caractères (exprimé en nombre d'unité de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>minlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieur à <code>maxlength</code>.</p> + +<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du texte est inférieure à <code>minlength</code> en nombre d'unité de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p> + +<h3 id="htmlattrdef(pattern)">{{htmlattrdef("pattern")}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}</p> + +<p>L'utilisation d'un motif pour les mots de passe est fortement recommandée. Elle permet de s'assurer que les mots de passe saisis respectent des critères de complexité suffisants pour être robustes. Voir la section {{anch("Validation")}} ci-après pour plus de détails et d'exemples.</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> + +<h3 id="htmlattrdef(readonly)">{{htmlattrdef("readonly")}}</h3> + +<p>Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisateur. Toutefois, la valeur de l'attribut <code>value</code> peut toujours être modifiée via du code JavaScript qui définirait la propriété {{domxref("HTMLInputElement.value")}}.</p> + +<div class="note"> +<p><strong>Note :</strong> Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut <code>required</code> n'aura pas d'effet si l'attribut <code>readonly</code> est également présent.</p> +</div> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p> + +<h2 id="Utiliser_les_contrôles_de_saisie_de_mot_de_passe">Utiliser les contrôles de saisie de mot de passe</h2> + +<p>Les champs destinés à la saisie des mots de passe fonctionnent comme les champs texte mais masquent le texte saisi pour que celui-ci ne puisse pas être lu sur l'écran.</p> + +<h3 id="Un_contrôle_basique">Un contrôle basique</h3> + +<p>Voici un exemple simple illustrant un contrôle de saisie d'un mot de passe qui utilise un élément {{HTMLElement("label")}} afin d'indiquer le rôle du champ.</p> + +<pre class="brush: html"><label for="userPassword">Mot de passe :</label> +<input id="userPassword" type="password"></pre> + +<p>{{EmbedLiveSample("Un_contrôle_basique", 600, 40)}}</p> + +<h3 id="Paramétrer_l’autocomplétion">Paramétrer l’autocomplétion</h3> + +<p>Afin de permettre au gestionnaire de mots de passe de saisir automatiquement le mot de passe, on pourra utiliser l'attribut {{htmlattrxref("autocomplete", "input")}}. Pour les mots de passe, celui-ci aura l'une des valeurs suivantes :</p> + +<dl> + <dt><code>on</code></dt> + <dd>Cette valeur permet au navigateur ou à un gestionnaire de mot de passe de remplir automatiquement le champ. Cette valeur n'est pas aussi informatique que <code>"current-password"</code> or <code>"new-password"</code>.</dd> + <dt><code>off</code></dt> + <dd>Cette valeur n'autorise pas le navigateur ou le gestionnaire de mot de passe à remplir le champ automatiquement.</dd> + <dt><code>current-password</code></dt> + <dd>Cette valeur indique au navigateur ou au gestionnaire de mots de passe qu'il faut utiliser le mot de passe actuel pour le site. Cette valeur est plus précise que la valeur <code>"on"</code> car elle indique qu'il faut utiliser le mot de passe courant plutôt qu'un nouveau mot de passe.</dd> + <dt><code>new-password</code></dt> + <dd>Cette valeur indique au navigateur ou au gestionnaire de mots de passe qu'il faut générer un nouveau mot de passe et utiliser ce dernier pour remplir le champ. La génération automatique du mot de passe peut alors utiliser les autres attributs de l'élément. Cette valeur peut également être indiquée pour que le navigateur indique cette information d'un façon ou d'une autre.</dd> +</dl> + +<div id="Autocomplete_sample1"> +<pre class="brush: html"><label for="userPassword">Mot de passe :</label> +<input id="userPassword" type="password" autocomplete="current-password"></pre> +</div> + +<p>{{EmbedLiveSample("Paramétrer_l’autocomplétion", 600, 40)}}</p> + +<h3 id="Rendre_le_champ_obligatoire">Rendre le champ obligatoire</h3> + +<p>Pour indiquer à l'utilisateur que le mot de passe est obligatoire, on pourra utiliser l'attribut {{htmlattrxref("required", "input")}}.</p> + +<pre class="brush: html"><label for="userPassword">Mot de passe :</label> +<input id="userPassword" type="password" required></pre> + +<p>{{EmbedLiveSample("Rendre_le_champ_obligatoire", 600, 40)}}</p> + +<h3 id="Définir_un_mode_de_saisie">Définir un mode de saisie</h3> + +<p>Si votre application utilise un autre mode de saisie que le mode par défaut, l'attribut {{htmlattrxref("inputmode", "input")}} peut être employé pour indiquer le mode à utiliser. Le cas le plus fréquent est celui où on utilise une valeur numérique pour un mot de passe (par exemple pour un code PIN). Si ce code ne doit être utilisé qu'une seule fois, on pourra paramétrer l'attribut {{htmlattrxref("autocomplete", "input")}} avec la valeur <code>off</code>. Les appareils mobiles pourront tirer parti de la valeur de cet attribut et afficher un autre clavier pour faciliter la saisie.</p> + +<pre class="brush: html"><label for="pin">PIN :</label> +<input id="pin" type="password" inputmode="numeric"></pre> + +<p>{{EmbedLiveSample("Définir_un_mode_de_saisie", 600, 40)}}</p> + +<h3 id="Indiquer_des_critères_de_longueur">Indiquer des critères de longueur</h3> + +<p>Les attributs {{htmlattrxref("minlength", "input")}} et {{htmlattrxref("maxlength", "input")}} peuvent être utilisés afin d'indiquer les tailles minimale et maximale du mot de passe qui doit être saisi. Dans l'exemple qui suit, on repart de l'exemple précédent et on indique que le code PIN doit contenir au moins 4 caractères et au plus 8 caractères. L'attribut {{htmlattrxref("size", "input")}} est utilisé afin que le contrôle permette bien d'afficher 8 caractères.</p> + +<pre class="brush: html"><label for="pin">PIN :</label> +<input id="pin" type="password" inputmode="numeric" minlength="4" + maxlength="8" size="8"></pre> + +<p>{{EmbedLiveSample("Indiquer_des_critères_de_longueur", 600, 40)}}</p> + +<h3 id="Sélectionner_le_texte_saisi">Sélectionner le texte saisi</h3> + +<p>Il est possible d'utiliser la méthode {{domxref("HTMLInputElement.select", "select()")}} pour sélectionner le texte saisi dans le contrôle.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><label for="userPassword">Mot de passe :</label> +<input id="userPassword" type="password" size="12"> +<button id="selectAll">Sélectionner tout</button> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">document.getElementById("selectAll").onclick = function(event) { + document.getElementById("userPassword").select(); +}</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Sélectionner_le_texte_saisi", 600, 40)}}</p> + +<p>On peut également utiliser {{domxref("HTMLInputElement.selectionStart", "selectionStart")}} et {{domxref("HTMLInputElement.selectionEnd", "selectionEnd")}} afin d'obtenir (ou de régler) l'intervalle de caractères sélectionnés. {{domxref("HTMLInputElement.selectionDirection", "selectionDirection")}} permet de connaître la direction dans laquelle la sélection a été effectuée.</p> + +<h2 id="Validation">Validation</h2> + +<p>Si votre application possède des contraintes sur les caractères utilisables ou sur la structure du mot de passe, il est possible d'utiliser l'attribut {{htmlattrxref("pattern", "input")}} afin que le navigateur vérifie que la valeur saisie respecte une expression rationnelle tenant compte de ces contraintes.</p> + +<p>Dans cet exemple, il n'est possible de saisir qu'une valeur qui contient entre 4 et 8 caractères qui sont des caractères hexadécimaux.</p> + +<div id="Validation_sample1"> +<pre class="brush: html"><label for="hexId">Identifiant Hexa :</label> +<input id="hexId" type="password" pattern="[0-9a-fA-F]{4,8}" + title="Veuillez saisir un identifiant avec 4 à 8 chiffres hexadécimaux." + autocomplete="nouveau-mot-de-passe"></pre> +</div> + +<p>{{EmbedLiveSample("Validation", 600, 40)}}</p> + +<h2 id="Désactiver_le_champ">Désactiver le champ</h2> + +<p>L'attribut booléen {{htmlattrdef("disabled")}} indique que le champ ne peut pas être utilisé de façon interactive. Les données des champs désactivés ne seront pas envoyées avec le formulaire.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Saisir_un_numéro_de_sécurité_sociale_américain_comme_mot_de_passe">Saisir un numéro de sécurité sociale américain comme mot de passe</h3> + +<p>Dans l'exemple qui suit, on construit un formulaire avec un mot de passe qui doit respecter le format d'un <a href="https://en.wikipedia.org/wiki/Social_Security_number#Structure">numéro de sécurité sociale américain</a>. Ces nombres ont la forme "123-45-6789" et il existe différentes règles permettant de restreindre les valeurs pour chacun des groupes.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><label for="ssn">SSN :</label> +<input type="password" id="ssn" inputmode="number" minlength="9" maxlength="12" + pattern="(?!000)([0-6]\d{2}|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d{4}" + required autocomplete="off"> +<br> +<label for="ssn">Valeur :</label> +<span id="current"></span></pre> + +<p>On n'utilise l'attribut {{htmlattrxref("pattern", "input")}} afin d'imposer certaines contraintes de saisie afin que les chaînes aient le bon format. Cette expression rationnelle ne garantit pas un numéro valide mais elle permet de s'assurer que la valeur saisie <em>peut</em> être un numéro de sécurité sociale valide. De plus, elle permet d'avoir un séparateur variable entre les trois groupes (un espace, un tiret ou rien).</p> + +<p>L'attribut {{htmlattrxref("inputmode", "input")}} vaut <code>number</code>, ce qui incite les appareils mobiles à utiliser un clavier virtuel uniquement numérique pour la saisie d'un tel champ. Les attributs {{htmlattrxref("minlength", "input")}} et {{htmlattrxref("maxlength", "input")}} valent respectivement 9 et 12 et l'attribut {{htmlattrxref("required", "input")}} indique que cette valeur est nécessaire pour envoyer le formulaire. Enfin, {{htmlattrxref("autocomplete", "input")}} vaut <code>off</code>, ce qui évite que les gestionnaires de mots de passe ou que les fonctionnalités de restoration de session remplissent automatiquement cette valeur.</p> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("Saisir_un_numéro_de_sécurité_sociale_américain_comme_mot_de_passe", 600, 60)}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères qui représente un mot de passe (la chaîne peut éventuellement être vide).</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}.</td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("inputmode", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} et {{htmlattrxref("size", "input")}}</td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>selectionStart</code>, <code>selectionEnd</code>, <code>selectionDirection</code> et <code>value</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}} et {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</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#password-state-(type=password)', '<input type="password">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#password-state-typepassword', '<input type="password">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-password")}}</p> diff --git a/files/fr/web/html/element/input/radio/index.html b/files/fr/web/html/element/input/radio/index.html new file mode 100644 index 0000000000..5370a19374 --- /dev/null +++ b/files/fr/web/html/element/input/radio/index.html @@ -0,0 +1,357 @@ +--- +title: <input type="radio"> +slug: Web/HTML/Element/Input/radio +tags: + - Formulaires + - HTML + - Input + - Reference +translation_of: Web/HTML/Element/input/radio +--- +<div>{{HTMLRef}}</div> + +<p>Les éléments <code><input></code> dont l'attribut <code>type</code> vaut <strong><code>radio</code></strong> sont généralement utilisés pour construire des groupes d'options parmi lesquelles on ne peut choisir qu'une valeur. Les « boutons radio » sont représentés par des cercles remplis lorsqu'ils sont sélectionnés.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-radio.html", "tabbed-standard")}}</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> + +<p>On les appelle boutons radios par analogie avec les boutons qui étaient utilisés sur les anciens postes de radios.</p> + +<div class="note"> +<p><strong>Note</strong> : <a href="/fr/docs/Web/HTML/Element/input/checkbox">Les cases à cocher (<em>checkboxes</em>)</a> ressemblent aux boutons radios. Toutefois, il existe une différence fondamentale : les boutons radio ne permettent de sélectionner qu'une seule option au sein d'un groupe alors que les cases à cocher permettent d'en sélectionner plusieurs.</p> +</div> + +<h2 id="Valeur">Valeur</h2> + +<p>L'attribut <code>value</code> est une chaîne de caractères (un objet {{domxref("DOMString")}} au sens du DOM) qui contient la valeur du bouton radio. Cette valeur n'est pas montrée à l'utilisateur par le navigateur ou tout autre agent utilisateur, elle permet d'identifier l'option sélectionnée.</p> + +<h3 id="Définir_un_groupe_de_boutons_radio">Définir un groupe de boutons radio</h3> + +<p>Pour définir un groupe de boutons radio, on leur donne le même nom via l'attribut {{htmlattrxref("name", "input")}}. Une fois qu'on a formé un groupe de boutons radio, on ne pourra sélectionner qu'une seule des options de ce groupes (cliquer sur une option désélectionnera automatiquement l'option précédemment choisie dans ce groupe).</p> + +<p>Il est possible d'avoir autant de groupes que nécessaire, il suffit que chaque groupe ait un nom (l'attribut <code>name</code>) unique.</p> + +<p>Ainsi, si on souhaite utiliser un formulaire afin de demander à l'utilisateur sa méthode de contact préférée, on pourra créer trois boutons radio avec l'attribut <code>name</code> qui vaut <code>contact</code> et pour lesquels l'attribut {{htmlattrxref("value", "input")}} varie : <code>email</code> pour le premier, <code>telephone</code> pour le deuxième et <code>courrier</code> pour le dernier. Cette valeur et le nom du groupe ne sont pas affichés (ce sera le rôle de l'élément {{HTMLElement("label")}} de fournir un intitulé).</p> + +<p>Voici le fragment de code HTML correspondant à cet exemple :</p> + +<pre class="brush: html"><form> + <p>Veuillez choisir la meilleure méthode pour vous contacter :</p> + <div> + <input type="radio" id="contactChoice1" + name="contact" value="email"> + <label for="contactChoice1">Email</label> + + <input type="radio" id="contactChoice2" + name="contact" value="telephone"> + <label for="contactChoice2">Téléphone</label> + + <input type="radio" id="contactChoice3" + name="contact" value="courrier"> + <label for="contactChoice3">Courrier</label> + </div> + <div> + <button type="submit">Envoyer</button> + </div> +</form></pre> + +<p>On voit ici trois boutons radio dont l'attribut <code>name</code> vaut <code>contact</code> et dont chacun possède une valeur unique pour l'attribut <code>value</code>. Ils possèdent également un identifiant unique ({{domxref("Element.id", "id")}}) qui est utilisé pour rattacher le libellé fourni par l'élément {{HTMLElement("label")}} via l'attribut {{htmlattrxref("for", "label")}}.</p> + +<p>Voici le résultat obtenu :</p> + +<p>{{EmbedLiveSample('Définir_un_groupe_de_boutons_radio', 600, 130)}}</p> + +<h3 id="La_représentation_des_données_d’un_groupe_de_boutons_radio">La représentation des données d’un groupe de boutons radio</h3> + +<p>Lorsqu'on envoie le formulaire précédent avec une option sélectionnée, les données du formulaire contiendront une valeur sous la forme <code>"contact=<em>valeur</em>"</code>. Ainsi, si l'utilisateur clique sur le bouton radio « Téléphone » et envoie le formulaire, les données du formulaire contiendront <code>"contact=telephone"</code>.</p> + +<p>Si l'attribut <code>value</code> n'est pas fourni dans le document HTML, la valeur par défaut utilisée sera <code>on</code> pour l'ensemble du groupe. Si c'était le cas avec notre exemple précédent et que l'utilisateur avait cliqué sur l'option « Téléphone » et envoyé le formulaire, les données envoyées auraient contenu <code>"contact=on"</code> ce qui ne s'avère pas très utile. Aussi, mieux vaut ne pas oublier les attributs <code>value</code> !</p> + +<div class="note"> +<p><strong>Note</strong> : Si aucun bouton radio n'est sélectionné au moment de l'envoi du formulaire, le groupe radio n'est pas inclus dans les données envoyées par le formulaire car il n'y a aucune valeur à fournir.</p> +</div> + +<p>Généralement, on souhaite qu'au moins une option soit sélectionné parmi les boutons d'un groupe et on inclue donc souvent un attribut <code>checked</code> sur l'un des boutons afin d'avoir une option sélectionnée par défaut.</p> + +<p>Ajoutant un peu de code à notre exemple pour étudier les données générées par ce formulaire. On modifie le code HTML afin d'ajouter un bloc {{HTMLElement("pre")}} qui contiendra les données produites par le formulaire :</p> + +<pre class="brush: html"><form> + <p>Veuillez choisir la meilleure méthode pour vous contacter :</p> + <div> + <input type="radio" id="contactChoice1" + name="contact" value="email"> + <label for="contactChoice1">Email</label> + + <input type="radio" id="contactChoice2" + name="contact" value="telephone"> + <label for="contactChoice2">Téléphone</label> + + <input type="radio" id="contactChoice3" + name="contact" value="courrier"> + <label for="contactChoice3">Courrier</label> + </div> + <div> + <button type="submit">Envoyer</button> + </div> +</form> +<pre id="log"> +</pre> +</pre> + +<p>Ensuite, on ajoute du code <a href="/fr/docs/Web/JavaScript">JavaScript</a> pour rattacher un gestionnaire d'évènement sur l'évènement {{event("submit")}} qui est déclenché lorsque l'utilisateur clique sur le bouton « Envoyer » :</p> + +<pre class="brush: js">var form = document.querySelector("form"); +var log = document.querySelector("#log"); + +form.addEventListener("submit", function(event) { + var data = new FormData(form); + var output = ""; + for (const entry of data) { + output = entry[0] + "=" + entry[1] + "\r"; + }; + log.innerText = output; + event.preventDefault(); +}, false);</pre> + +<p>Vous pouvez manipuler cet exemple et voir qu'il n'y a jamais plus 'un résultat pour le groupe <code>"contact"</code>.</p> + +<p>{{EmbedLiveSample("La_représentation_des_données_d’un_groupe_de_boutons_radio", 600, 130)}}</p> + +<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> + +<p>En complément des attributs partagés par l'ensemble des éléments {{HTMLElement("input")}}, les boutons radio peuvent utiliser les attributs suivants :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribut</th> + <th scope="col">Definition</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("checked")}}</code></td> + <td>Un attribut booléen qui indique si le bouton radio est l'élément sélectionné du groupe.</td> + </tr> + <tr> + <td><code>{{anch("value")}}</code></td> + <td>Une chaîne à utiliser comme valeur pour le bouton radio lors de l'envoi du formulaire si ce bouton est choisi.</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdef(checked)">{{htmlattrdef("checked")}}</h3> + +<p>Un attribut booléen qui indique si c'est ce champ radio qui est sélectionné parmi le groupe.<span><a id="cke_1832" title="Delete Rows"></a></span></p> + +<p>À la différence des autres navigateurs, Firefox conservera <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">l'état coché dynamique</a> d'un bouton radio au fur et à mesure des chargements de la page. On pourra utiliser l'attribut {{htmlattrxref("autocomplete","input")}} afin de contrôler cette fonctionnalité.</p> + +<h3 id="htmlattrdef(value)">{{htmlattrdef("value")}}</h3> + +<p>L'attribut <code>value</code> est partagé par l'ensemble des types d'élément {{HTMLElement("input")}}. Dans le cas d'un bouton radio, il a un rôle spécifique et permet d'associer un texte qui sera envoyé avec le formulaire pour représenter la valeur sélectionnée. Si la valeur de <code>value</code> n'est pas définie, ce sera la chaîne de caractères <code>"on"</code> qui sera envoyée.</p> + +<h2 id="Utiliser_les_boutons_radio">Utiliser les boutons radio</h2> + +<p>Nous avons déjà vu certaines techniques ci-avant. Voyons désormais d'autres fonctionnalités fréquemment utilisées avec ces boutons.</p> + +<h3 id="Sélectionner_un_bouton_radio_par_défaut">Sélectionner un bouton radio par défaut</h3> + +<p>Pour qu'un bouton radio soit sélectionné par défaut, on ajoutera l'attribut booléen <code>checked</code>. Voici ce que ça donne pour l'exemple précédent, légèrement modifié :</p> + +<pre class="brush: html"><form> + <p>Veuillez choisir la meilleure méthode pour vous contacter :</p> + <div> + <input type="radio" id="contactChoice1" + name="contact" value="email" checked> + <label for="contactChoice1">Email</label> + + <input type="radio" id="contactChoice2" + name="contact" value="telephone"> + <label for="contactChoice2">Téléphone</label> + + <input type="radio" id="contactChoice3" + name="contact" value="courrier"> + <label for="contactChoice3">Courrier</label> + </div> + <div> + <button type="submit">Envoyer</button> + </div> +</form></pre> + +<p>{{EmbedLiveSample('Sélectionner_un_bouton_radio_par_défaut', 600, 130)}}</p> + +<p>Ici, c'est le premier bouton radio qui sera sélectionné par défaut.</p> + +<div class="note"> +<p><strong>Note </strong>: Si l'attribut <code>checked</code> est placé sur plus d'un bouton, c'est le dernier bouton contenant l'attribut qui sera sélectionné. C'est donc l'ordre des valeurs qui déterminera la valeur par défaut. Pour rappel, il ne peut y avoir qu'un seul bouton radio du groupe qui soit sélectionné à un instant donné.</p> +</div> + +<h3 id="Fournir_une_plus_grande_zone_de_sélection">Fournir une plus grande zone de sélection</h3> + +<p>Dans les exemples précédents, vous avez peut-être constaté qu'en cliquant sur l'élément {{htmlelement("label")}} associé au bouton radio, cela sélectionnait la valeur de ce bouton. C'est une fonctionnalité HTML très pratique qui facilite la sélection des options, notamment sur les écrans de petites tailles comme ceux des smartphones.</p> + +<p>Au-delà des raisons relatives à l'accessibilité, il s'agit d'un autre argument en faveur de la bonne utilisation des éléments <code><label></code> dans les formulaires.</p> + +<h2 id="Validation">Validation</h2> + +<p>Il n'existe pas de contrainte de validation particulière pour les boutons radio.</p> + +<h2 id="Mettre_en_forme_les_boutons_radio">Mettre en forme les boutons radio</h2> + +<p>L'exemple qui suit est une version légèrement plus détaillée de l'exemple précédent qui contient une mise en forme et une meilleure sémantique grâce aux éléments HTML utilisés :</p> + +<pre class="brush: html"><form> + <fieldset> + <legend>Veuillez choisir la meilleure méthode pour vous contacter :</legend> + <div> + <input type="radio" id="contactChoice1" + name="contact" value="email" checked> + <label for="contactChoice1">Email</label> + + <input type="radio" id="contactChoice2" + name="contact" value="telephone"> + <label for="contactChoice2">Téléphone</label> + + <input type="radio" id="contactChoice3" + name="contact" value="courrier"> + <label for="contactChoice3">Courrier</label> + </div> + <div> + <button type="submit">Envoyer</button> + </div> + </fieldset> +</form></pre> + +<p>On voit ici peu de modifications mais notamment l'ajout d'éléments {{htmlelement("fieldset")}} et {{htmlelement("legend")}} qui permettent de grouper les options (à la fois pour la mise en forme et pour la sémantique du document).</p> + +<p>La feuille de style CSS utilisée est la suivante :</p> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +div:first-of-type { + display: flex; + align-items: flex-start; + margin-bottom: 5px; +} + +label { + margin-right: 15px; + line-height: 32px; +} + +input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + + border-radius: 50%; + width: 16px; + height: 16px; + + border: 2px solid #999; + transition: 0.2s all linear; + margin-right: 5px; + + position: relative; + top: 4px; +} + +input:checked { + border: 6px solid black; +} + +button, +legend { + color: white; + background-color: black; + padding: 5px 10px; + border-radius: 0; + border: 0; + font-size: 14px; +} + +button:hover, +button:focus { + color: #999; +} + +button:active { + background-color: white; + color: black; + outline: 1px solid black; +}</pre> + +<p>La propriété utilisée la plus notable est {{cssxref("-moz-appearance")}} (utilisée avec certains préfixes navigateur). Par défaut, les boutons radios (ainsi que les cases à cocher) sont mis en forme avec l'apparence native liée au système d'exploitation sous-jacente. Avec <code>appearance: none</code>, on peut passer outre cette mise en forme native et créer ses propres styles pour ces boutons. Ici, nous avons utilisé {{cssxref("border")}} et {{cssxref("border-radius")}} avec {{cssxref("transition")}} afin de créer une animation lors de la sélection. On utilise également la pseudo-classe {{cssxref(":checked")}} pour définir l'apparence du bouton radio lorsqu'il est sélectionné.</p> + +<p>Cette méthode n'est pas exempte d'inconvénient : <code>appearance</code> fonctionne correctement pour une mise en forme simple mais peut se comporter de façons différentes selon les navigateurs et elle ne fonctionne pas du tout avec Internet Explorer. Attention donc à tester votre site dans les différents navigateurs.</p> + +<p>{{EmbedLiveSample('Mettre_en_forme_les_boutons_radio', 600, 120)}}</p> + +<p>De plus, la légende et le bouton d'envoi ont été mis en forme pour avoir un contraste marqué. Ce n'est pas peut-être pas la mise en forme idéale pour toutes les applications web mais cela illustre certaines des possibilités.</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères {{domxref("DOMString")}} qui représente la valeur du bouton radio.</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{event("change")}} et {{event("input")}}</td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td>{{htmlattrxref("checked", "input")}}</td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>checked</code> et <code>value</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Spécification</th> + <th>État</th> + <th>Commentaires</th> + </tr> + <tr> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#radio-button-state-(type=radio)', '<input type="radio">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#radio-button-state-(type=radio)', '<input type="radio">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-radio")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'élément {{HTMLElement("input")}} et l'interface {{domxref("HTMLInputElement")}} du DOM qui est implémentée par cet élément</li> + <li>L'interface {{domxref("RadioNodeList")}} qui décrit une liste de boutons radio</li> +</ul> diff --git a/files/fr/web/html/element/input/range/index.html b/files/fr/web/html/element/input/range/index.html new file mode 100644 index 0000000000..61acbc913c --- /dev/null +++ b/files/fr/web/html/element/input/range/index.html @@ -0,0 +1,382 @@ +--- +title: <input type="range"> +slug: Web/HTML/Element/Input/range +tags: + - Element + - HTML + - Input + - Reference +translation_of: Web/HTML/Element/input/range +--- +<div>{{HTMLRef}}</div> + +<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>range</strong></code> permettent à l'utilisateur d'indiquer une valeur numérique comprise entre deux bornes. La valeur précise n'est pas considérée comme importante. Ces éléments sont généralement représenté avec un curseur sur une ligne ou comme un bouton de potentiel. Ce genre de <em>widget</em> n'étant pas précis, ce type ne devrait pas être utilisé lorsque la valeur exacte fournie par l'utilisateur est importante.</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}}</p> + +<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> + +<p>Si le navigateur de l'utilisateur ne prend pas en charge le type <code>range</code>, il utilisera le type <code><a href="/fr/docs/Web/HTML/Element/input/text">text</a></code> à la place.</p> + +<h2 id="Valeur">Valeur</h2> + +<p>L'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères {{domxref("DOMString")}} qui correspond à la représentation textuelle du nombre sélectionnée. La valeur n'est jamais une chaîne vide (<code>""</code>). La valeur par défaut est celle médiane entre le minimum et le maximum (sauf si la valeur maximale indiquée est inférieure à la valeur minimale, auquel cas la valeur par défaut est celle de l'attribut <code>min</code>). Voici un fragment de code illustrant cet algorithme pour le choix de la valeur par défaut :</p> + +<pre class="brush: js">defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min + : rangeElem.min + (rangeElem.max - rangeElem.min)/2;</pre> + +<p>Si on essaie d'obtenir une valeur inférieure au minimum, alors la valeur sera ramenée au minimum (de même si on essaye de dépasser le maximum).</p> + +<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> + +<p>En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs pour les intervalles peuvent utiliser les attributs suivants :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribut</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("max")}}</code></td> + <td>La valeur maximale autorisée.</td> + </tr> + <tr> + <td><code>{{anch("min")}}</code></td> + <td>La valeur minimale autorisée.</td> + </tr> + <tr> + <td><code>{{anch("step")}}</code></td> + <td>Le pas utilisé pour incrémenter la valeur du champ. Cette valeur est utilisée pour l'interface utilisateur du contrôle et pour la validation de la valeur.</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3> + +<p>La plus grande valeur autorisée sur l'intervalle. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) dépasse ce seuil, <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">la validation échouera</a>. Si la valeur fournie n'est pas un nombre, aucun maximum ne sera fixé pour la valeur du contrôle.</p> + +<p>Cette valeur doit être supérieure ou égale à celle indiquée par l'attribut <code>min</code>.</p> + +<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3> + +<p>La plus petite valeur autorisée sur l'intervalle. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est inférieure à ce seuil, <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">la validation échouera</a>. Si la valeur fournie n'est pas un nombre, aucun minimum ne sera fixé pour la valeur du contrôle.</p> + +<p>Cette valeur doit être inférieure ou égale à celle indiquée par l'attribut <code>max</code>.</p> + +<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}</p> + +<p>Par défaut, l'incrément utilisé pour les champs de type <code>number</code> vaut 1 et on ne peut alors saisir que des entiers à momins que la valeur de base ne soit pas entière. Ainsi, si on définit <code>min</code> avec -10 et <code>value</code> avec 1.5, un attribut <code>step</code> qui vaut 1 permettra de saisir les valeurs positives 1.5, 2.5, 3.5, etc. et les valeurs négatives -0.5, -1.5, -2.5, etc.</p> + +<h2 id="Utiliser_les_intervalles">Utiliser les intervalles</h2> + +<p>Bien que le type <code>"number"</code> permette à l'utilisateur de saisir un nombre avec certaines contraintes optionnelles (par exemple pour que la valeur soit comprise entre un minimum et un maximum), ce type nécessite de saisir une valeur spécifique. Le type <code>"range"</code> permet de saisir une valeur lorsque l'exactitude de celle-ci importe peu.</p> + +<p>Voici quelques scénarios où un intervalle de saisie est plus pertinent :</p> + +<ul> + <li>Les contrôles relatis à l'audio pour le volume, la balance ou les filtres.</li> + <li>Les contrôles relatifs à la configuration des couleurs (canaux, transparence, luminosité, etc.)</li> + <li>Les contrôles relatifs à la configuration de jeux vidéos (difficulté, distance de visibilité, taille du monde généré, etc.)</li> + <li>La longueur du mot de passe pour les mots de passe générés par un gestionnaire de mots de passe.</li> +</ul> + +<p>De façon générale, si un utilisateur est plutôt intéressé dans un pourcentage représentant la distance entre la borne minimale et la borne maximale, un intervalle de saisie sera plus pertinent (par exemple, pour le volume, on pensera plutôt « augmenter le volume jusqu'à la moitié du maximum » que « mettre le volume à 0.5 »).</p> + +<h3 id="Indiquer_le_minimum_et_le_maximum">Indiquer le minimum et le maximum</h3> + +<p>Par défaut, le minimum vaut 0 et le maximum vaut 100. Si ces bornes ne conviennent pass, on peut facilement les changer via les attributs {{htmlattrxref("min", "input")}} et/ou {{htmlattrxref("max", "input")}}. Ces attributs acceptent des nombres décimaux.</p> + +<p>Par exemple, afin de demander à un utilisateur de choisir une valeur approximative dans l'intervalle [-10 , 10], on pourra utiliser :</p> + +<pre class="brush: html"><input type="range" min="-10" max="10"></pre> + +<p>{{EmbedLiveSample("Indiquer_le_minimum_et_le_maximum", 600, 40)}}</p> + +<h3 id="Définir_la_granularité">Définir la granularité</h3> + +<p>Par défaut, la granularité vaut 1, ce qui signifie que la valeur est toujours un entier. Cela peut être modifié grâce à l'attribut {{htmlattrxref("step")}} qui permet de contrôler la granularité. Ainsi, si on souhaite une valeur comprise entre 5 et 10 et précise avec deux chiffres après la virgule, on pourra utiliser l'attribut <code>step</code> avec la valeur 0.01 :</p> + +<div id="Granularity_sample1"> +<pre class="brush: html"><input type="range" min="5" max="10" step="0.01"></pre> + +<p>{{EmbedLiveSample("Granularity_sample1", 600, 40)}}</p> +</div> + +<p>Si on souhaite prendre en charge n'importe quelle valeur, quel que soit le nombre de décimales, on pourra utiliser la valeur <code>any</code> pour l'attribut <code>step</code> :</p> + +<div id="Granularity_sample2"> +<pre class="brush: html"><input type="range" min="0" max="3.14" step="any"></pre> + +<p>{{EmbedLiveSample("Granularity_sample2", 600, 40)}}</p> + +<p>Cet exemple permet à l'utilisateur de choisir une valeur entre 0 et 3.14 sans aucune restriction quant à la partie décimale.</p> +</div> + +<h3 id="Ajouter_des_marques_et_des_étiquettes">Ajouter des marques et des étiquettes</h3> + +<p>La spécification HTML fournit une certaine flexibilité aux navigateurs pour représenter le contrôle de saisie. La spécification indique comment ajouter des informations pour certains niveaux de l'intervalle grâce à l'attribut {{htmlattrxref("list", "input")}} et à un élément {{HTMLElement("datalist")}}. En revanche, il n'y a pas de spécifications précises quant aux marques (tirets) positionnés le long du contrôle.</p> + +<h4 id="Aperçus">Aperçus</h4> + +<p>La plupart des navigateurs prennent partiellement en charge ces fonctionnalités. Voici donc quelques aperçus du résultat qui peut être obtenu sur macOS avec un navigateur qui prend en charge chacune des fonctionnalités.</p> + +<h5 id="Un_contrôle_sans_marque">Un contrôle sans marque</h5> + +<p>Voici ce qu'on option lorsque le navigateur ne prend pas en charge cette fonctionnalité ou que l'attribut {{htmlattrxref("list", "input")}} est absent.</p> + +<table class="fullwidth standard-table"> + <tbody> + <tr> + <th>HTML</th> + <th>Aperçu</th> + </tr> + <tr> + <td> + <pre class="brush: html"> +<input type="range"></pre> + </td> + <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14989/macslider-plain.png" style="height: 28px; width: 184px;"></td> + </tr> + </tbody> +</table> + +<h5 id="Un_contrôle_avec_des_marques">Un contrôle avec des marques</h5> + +<p>Dans l'exemple qui suit, le contrôle utilise un attribut <code>list</code> qui indique l'identifiant d'un élément {{HTMLElement("datalist")}} qui définit un ensemble de marques à appliquer sur le contrôle. Il y en a ici 11 : une marque pour 0% puis une marque tous les 10%. Chaque point pour lequel on souhaite afficher une marque est représenté par un élément {{HTMLElement("option")}} dont la valeur de l'attribut {{htmlattrxref("value", "option")}} correspond à l'emplacement de la marque.</p> + +<table class="fullwidth standard-table"> + <tbody> + <tr> + <th>HTML</th> + <th>Aperçu</th> + </tr> + <tr> + <td> + <pre class="brush: html"> +<input type="range" list="tickmarks"> + +<datalist id="tickmarks"> + <option value="0"> + <option value="10"> + <option value="20"> + <option value="30"> + <option value="40"> + <option value="50"> + <option value="60"> + <option value="70"> + <option value="80"> + <option value="90"> + <option value="100"> +</datalist> +</pre> + </td> + <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14991/macslider-ticks.png" style="height: 28px; width: 184px;"></td> + </tr> + </tbody> +</table> + +<h5 id="Un_contrôle_avec_des_marques_et_des_étiquettes">Un contrôle avec des marques et des étiquettes</h5> + +<p>Il est possible d'ajouter des étiquettes grâce à l'attribut {{htmlattrxref("label", "option")}} des éléments {{HTMLElement("option")}} correspondants aux marques.</p> + +<table class="fullwidth standard-table"> + <tbody> + <tr> + <th>HTML</th> + <th>Aperçu</th> + </tr> + <tr> + <td> + <pre class="brush: html"> +<input type="range" list="tickmarks"> + +<datalist id="tickmarks"> + <option value="0" label="0%"> + <option value="10"> + <option value="20"> + <option value="30"> + <option value="40"> + <option value="50" label="50%"> + <option value="60"> + <option value="70"> + <option value="80"> + <option value="90"> + <option value="100" label="100%"> +</datalist> +</pre> + </td> + <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14993/macslider-labels.png" style="height: 44px; width: 184px;"></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note :</strong> Actuellement, aucun navigateur ne prend en charge l'ensemble de ces fonctionnalités. Firefox n'affiche aucune marque ni étiquette et Chrome affiche uniquement les marques mais pas les étiquettes. La version 66 (66.0.3359.181) de Chrome prendre en charge les étiquettes mais par défaut l'élément {{HTMLElement("datalist")}} est mis en forme avec CSS et {{cssxref("display")}}<code>: none;</code> , ce qui le masque. Il faut donc rajouter des règles de mises en forme spécifiques.</p> +</div> + +<h3 id="Modifier_l'orientation_du_curseur">Modifier l'orientation du curseur</h3> + +<div class="hidden"> +<p>Par défaut, le contrôle est affiché horizontalement dans le navigateur (le curseur se déplace de gauche à droite). Il est toutefois possible de tourner le contrôle avec CSS.</p> + +<div class="note"> +<p><strong>Note :</strong> Actuellement, cela n'est pas implémenté par les navigateurs (voir {{bug(981916)}} pour Firefox et le <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">bug 341071</a> pour Chrome).</p> +</div> + +<p>Par exemple :</p> + +<div id="Orientation_sample1"> +<pre class="brush: html"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> +</div> + +<p>{{EmbedLiveSample("Orientation_sample1", 200, 200, "https://mdn.mozillademos.org/files/14983/Orientation_sample1.png")}}</p> + +<p>Le contrôle est ici horizontal, pour le rendre vertical, on pourra utiliser un peu de CSS afin de le rendre plus haut que large :</p> + +<div id="Orientation_sample2"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">#volume { + height: 150px; + width: 50px; +}</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Orientation_sample2", 200, 200, "https://mdn.mozillademos.org/files/14985/Orientation_sample2.png")}}</p> + +<p><strong>Currently, no major browsers support creating vertical range inputs using CSS this way, even though it's the way the specification recommends they do it.</strong></p> +</div> +</div> + +<p>La spécification HTML recommande de dessiner les contrôles verticalement lorsque la hauteur de celui-ci est supérieure à la largeur. Malheureusement, aucun navigateur ne prend actuellement en charge cette fonctionnalité directement. On peut toutefois dessiner un contrôle vertical en appliquant une rotation sur un contrôle horizontal avec du code CSS et notamment {{cssxref("transform")}} pour tourner l'élément.</p> + +<div id="Orientation_sample3"> +<h4 id="HTML_2">HTML</h4> + +<p>Il est nécessaire de placer l'élément {{HTMLElement("input")}} dans un élément {{HTMLElement("div")}} afin de corriger la disposition une fois la transformation appliquée :</p> + +<pre class="brush: html"><div class="slider-wrapper"> + <input type="range" min="0" max="11" value="7" step="1"> +</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<p>Ensuite, on applique quelques règles CSS. Voici la règle CSS pour l'élément <code>div</code> qui indique le mode d'affichage et la taille qu'on souhaite avoir pour que la page soit correctement organisée..</p> + +<pre class="brush: css">.slider-wrapper { + display: inline-block; + width: 20px; + height: 150px; + padding: 0; +} +</pre> +Ensuite, on applique une transformation sur l'élément <code><input></code> au sein de l'espace réservé par le <code><div></code> : + +<pre class="brush: css">.slider-wrapper input { + width: 150px; + height: 20px; + margin: 0; + transform-origin: 75px 75px; + transform: rotate(-90deg); +}</pre> + +<p>Le contrôle mesure alors 150 pixels de long et 20 pixels de haut. Les marges sont nulles et {{cssxref("transform-origin")}} est décalé vers le milieu du contrôle. Le contrôle mesurant 150 pixels de large, décaler le centre de rotation permet d'avoir la zone de destination centrée avec 75 pixels de chaque côté.</p> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Orientation_sample3", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}</p> +</div> + +<h2 id="Validation">Validation</h2> + +<p>Il n'existe pas de motif de validation. Cependant, voici les formes de validation automatiques qui sont appliquées :</p> + +<ul> + <li>Si la valeur de l'attribut {{htmlattrxref("value", "input")}} est quelque chose qui ne peut pas être converti en nombre décimal, la validation échoue.</li> + <li>La valeur ne doit pas être inférieure à {{htmlattrxref("min", "input")}}. La valeur minimale par défaut est 0.</li> + <li>La valeur ne doit pas être supérieure à {{htmlattrxref("max", "input")}}. La valeur maximale par défaut est 0.</li> + <li>La valeur doit être un multiple de {{htmlattrxref("step", "input")}}. La valeur par défaut est 1.</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<p>Pour compléter les exemples précédents, on pourra consulter l'article suivant :</p> + +<ul> + <li><a href="/fr/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode">Contrôler plusieurs paramètres grâce à <code>ConstantSourceNode</code> (en anglais)</a></li> +</ul> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui contient la représentation textuelle de la valeur numérique sélectionnée. On utilisera la méthode {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} afin d'obtenir la valeur sous forme numérique (type {{jsxref("Number")}}).</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{event("change")}} et {{event("input")}}</td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("max", "input")}}, {{htmlattrxref("min", "input")}} et {{htmlattrxref("step", "input")}}</td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>list</code>, <code>value</code> et <code>valueAsNumber</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td>{{domxref("HTMLInputElement.stepDown", "stepDown()")}} et {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</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#range-state-(type=range)', '<input type="range">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#range-state-typerange', '<input type="range">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-range")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Les formulaires HTML</a></li> + <li>{{HTMLElement("input")}} et l'interface {{domxref("HTMLInputElement")}}</li> + <li><code><a href="/fr/docs/Web/HTML/Element/input/number"><input type="number"></a></code></li> +</ul> diff --git a/files/fr/web/html/element/input/reset/index.html b/files/fr/web/html/element/input/reset/index.html new file mode 100644 index 0000000000..d06649fce1 --- /dev/null +++ b/files/fr/web/html/element/input/reset/index.html @@ -0,0 +1,171 @@ +--- +title: <input type="reset"> +slug: Web/HTML/Element/Input/reset +tags: + - Element + - HTML + - Input + - Reference +translation_of: Web/HTML/Element/input/reset +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} de type <strong><code>"reset"</code></strong> sont affichés sous la forme de boutons permettant de réiniatiliser l'ensemble des champs du formulaire avec leurs valeurs initiales.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-reset.html", "tabbed-standard")}}</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> + +<div class="note"> +<p><strong>Note </strong>: Il est généralement peu recommandé d'inclure des boutons de réinitialisation dans les formulaires. En effet, ils sont rarement utiles et peuvent être source de frustration lorsqu'on appuie dessus involontairement.</p> +</div> + +<h2 id="Valeur">Valeur</h2> + +<p>La valeur de l'attribut <code>value</code> d'un élément <code><input type="reset"></code> contient une chaîne de caractères ({{domxref("DOMString")}}) utilisée comme texte sur le bouton.</p> + +<div id="summary-example3"> +<pre class="brush: html"><input type="reset" value="Réinitialiser le formulaire"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p> + +<p>Si aucune valeur n'est indiquée, le bouton aura le texte par défaut « Réinitialiser » :</p> + +<div id="summary-example1"> +<pre class="brush: html"><input type="reset"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p> + +<h2 id="Utiliser_les_boutons_de_réinitialisation">Utiliser les boutons de réinitialisation</h2> + +<p>Les boutons <code><input type="reset"></code> sont utilisés pour réinitialiser les formulaires. Si vous souhaitez créer un bouton personnalisé et adapter son comportement grâce à JavaScript, il est préférable d'utiliser un élément {{htmlelement("button")}} (voire un élément <code><a href="/fr/docs/Web/HTML/Element/input/button"><input type="button"></a></code>).</p> + +<h3 id="Un_bouton_simple">Un bouton simple</h3> + +<p>Commençons par créer un bouton de réinitialisation simple :</p> + +<pre class="brush: html"><form> + <div> + <label for="example">Voici un champ</label> + <input id="example" type="text"> + </div> + <div> + <input type="reset" value="Réinitialiser le formulaire"> + </div> +</form> +</pre> + +<p>Voici le résultat obtenu :</p> + +<p>{{EmbedLiveSample("Un_bouton_simple", 650, 100)}}</p> + +<p>Pour essayer, saisissez un peu de texte dans le champ puis appuyez sur le bouton de réinitialisation.</p> + +<h3 id="Ajouter_un_raccourci_au_bouton">Ajouter un raccourci au bouton</h3> + +<p>Les raccourcis claviers permettent de déclencher un bouton grâce à une touche ou à une combinaison de touches sur le clavier. Pour ajouter un raccourci clavier à un bouton de réinitialisation, il suffit d'utiliser l'attribut {{htmlattrxref("accesskey")}}.</p> + +<p>Dans cet exemple, on utilise la touche <kbd>r</kbd> (il faudra donc appuyer sur <kbd>r</kbd> et d'autres touches propres au navigateur et au système d'exploitation, se référer à {{htmlattrxref("accesskey")}} pour le détails).</p> + +<pre class="brush: html"><form> + <div> + <label for="example">Saisir un peu de texte</label> + <input id="example" type="text"> + </div> + <div> + <input type="reset" value="Réinitialiser le formulaire" + accesskey="r"> + </div> +</form></pre> + +<p>{{EmbedLiveSample("Ajouter_un_raccourci_au_bouton", 650, 100)}}</p> + +<div class="note"> +<p><strong>Note </strong>: Le problème d'un tel raccourci est que l'utilisateur ne saura pas quelle touche clavier correspond au raccourci. Dans une situation réaliste, il est nécessaire de fournir l'information via un autre biais (sans interférer avec le <em>design</em> du site), par exemple grâce à un lien qui pointe vers la liste des différents raccourcis utilisés sur le site.</p> +</div> + +<h3 id="DésactiverActiver_un_bouton">Désactiver/Activer un bouton</h3> + +<p>Pour désactiver un bouton de réinitialisation, il suffit d'appliquer l'attribut {{htmlattrxref("disabled")}} sur l'élément :</p> + +<div id="disable-example1"> +<pre class="brush: html"><input type="reset" value="Désactivé" disabled></pre> +</div> + +<p>On peut activer/désactiver le bouton lors de la navigation sur la page avec JavaScript en modifiant la valeur de l'attribut <code>disabled</code> pour la passer de <code>true</code> à <code>false</code> et <em>vice versa</em> (par exemple avec une instruction telle que <code>btn.disabled = true</code>).</p> + +<div class="note"> +<p><strong>Note </strong>: Pour plus d'exemples concernant l'activation/la désactivation de bouton, vous pouvez consulter la page <code><a href="/fr/docs/Web/HTML/Element/Input/button#Désactiver_et_activer_un_bouton"><input type="button"></a></code>.</p> +</div> + +<div class="note"> +<p><strong>Note </strong>: À 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 conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée</a>. L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité.</p> +</div> + +<h2 id="Validation">Validation</h2> + +<p>Aucune fonctionnalité de vérification native côté client n'est implémentée pour les boutons de réinitialisation.</p> +<h2 id="Résumé_technique">Résumé technique</h2> + + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères qui est utilisée comme intitulé pour le bouton.</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{event("click")}}</td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td>{{htmlattrxref("type", "input")}} et {{htmlattrxref("value", "input")}}</td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td>Aucune</td> + </tr> + </tbody> +</table> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>Spécification</td> + <td>État</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#reset-button-state-(type=reset)', '<input type="reset">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#reset-button-state-(type=reset)', '<input type="reset">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-reset")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'élément {{HTMLElement("input")}} et l'interface {{domxref("HTMLInputElement")}}.</li> + <li>L'élément {{HTMLElement("button")}}</li> + <li><a href="/fr/docs/Learn/HTML/Forms_and_buttons">Apprendre les formulaires et les boutons</a></li> + <li><a href="/fr/docs/Web/Accessibility/ARIA/forms">L'accessibilité et les formulaires</a></li> + <li><a href="/fr/docs/Learn/HTML/Forms">Les formulaires HTML</a></li> +</ul> diff --git a/files/fr/web/html/element/input/search/index.html b/files/fr/web/html/element/input/search/index.html new file mode 100644 index 0000000000..c5818deb6e --- /dev/null +++ b/files/fr/web/html/element/input/search/index.html @@ -0,0 +1,460 @@ +--- +title: <input type="search"> +slug: Web/HTML/Element/Input/search +tags: + - HTML + - Input + - Reference +translation_of: Web/HTML/Element/input/search +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>search</strong></code> permettent à un utilisateur de saisir des termes de recherche. </span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-search.html", "tabbed-standard")}}</div> + +<div 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> !</div> + +<h2 id="Valeur">Valeur</h2> + +<p>La valeur de l'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur du champ de recherche. En JavaScript, on peut récupérer cette information grâce à la propriété {{domxref("HTMLInputElement.value")}}.</p> + +<pre class="brush: js">maRecherche.value; +</pre> + +<p>Si aucune contrainte de validation n'est imposée (cf. {{anch("Validation")}} pour plus de détails), la valeur peut être un texte ou une chaîne de caractères vide.</p> + +<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> + +<p>En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de recherche prennent en charge les attributs suivants :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribut</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("maxlength")}}</code></td> + <td>Le nombre de caractères maximal qui peut être écrit dans ce champ.</td> + </tr> + <tr> + <td><code>{{anch("minlength")}}</code></td> + <td>Le nombre de caractères minimal qui peut être écrit dans ce champ pour qu'il soit considéré comme valide.</td> + </tr> + <tr> + <td><code>{{anch("pattern")}}</code></td> + <td>Une expression rationnelle à laquelle doit correspondre le texte saisi pour être valide.</td> + </tr> + <tr> + <td><code>{{anch("placeholder")}}</code></td> + <td>Une valeur d'exemple qui sera affichée lorsqu'aucune valeur n'est saisie.</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>Un attribut booléen qui indique si le contenu du champ est en lecture seule.</td> + </tr> + <tr> + <td><code>{{anch("size")}}</code></td> + <td>Un nombre qui indique le nombre de caractères affichés par le champ.</td> + </tr> + <tr> + <td><code>{{anch("spellcheck")}}</code></td> + <td>Cet attribut contrôle l'activation de la vérification orthographique sur le champ ou si la vérification orthographique par défaut doit être appliquée.</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdef(maxlength)">{{htmlattrdef("maxlength")}}</h3> + +<p>Le nombre maximum de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>maxlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à <code>minlength</code>.</p> + +<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du texte dépasse <code>maxlength</code> en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p> + +<h3 id="htmlattrdef(minlength)">{{htmlattrdef("minlength")}}</h3> + +<p>Le nombre minimal de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>minlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieur à <code>maxlength</code>.</p> + +<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du texte est inférieure à <code>minlength</code> en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p> + +<h3 id="htmlattrdef(pattern)">{{htmlattrdef("pattern")}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}</p> + +<p>Voir <a href="#format">la section sur l'utilisation de cet attribut ci-après</a> pour plus d'exemples.</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p> + +<h3 id="htmlattrdef(spellcheck)">{{htmlattrdef("spellcheck")}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "spellcheck-include")}}</p> + +<h2 id="Attributs_non-standard">Attributs non-standard</h2> + +<p>Les attributs non-standard suivants sont disponibles pour les champs de recherche. Toutefois, vu leur caractère spécifique, mieux vaut ne pas les utiliser.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribut</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("autocorrect")}}</code></td> + <td>Une chaîne de caractères qui indique si la correction automatique doit être appliquée à ce champ texte. <strong>Uniquement pris en charge par Safari.</strong></td> + </tr> + <tr> + <td><code>{{anch("incremental")}}</code></td> + <td>Cet attribut indique si des évènements {{event("search")}} doivent être envoyés afin de mettre à jour les résultats de la recherche tandis que l'utilisateur continue d'éditer la valeur du champ. <strong>Uniquement WebKit et Blink (Safari, Chrome, Opera, etc.).</strong></td> + </tr> + <tr> + <td><code>{{anch("mozactionhint")}}</code></td> + <td>Une chaîne de caractères qui indique le type d'action qui sera effectuée lorsque l'utilisateur appuiera sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition du champ. La valeur de cet attribut est utilisée comme libellé pour la touche adéquate du clavier virtuel. <strong>Uniquement pris en charge par Firefox pour Android.</strong></td> + </tr> + <tr> + <td><code>{{anch("results")}}</code></td> + <td>Le nombre maximum d'éléments qui devraient être affichés comme recherches précédentes dans la liste déroulante du champ. <strong>Uniquement pris en charge par Safari.</strong></td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdef(autocorrect)_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p> + +<h3 id="htmlattrdef(incremental)_non-standard_inline">{{htmlattrdef("incremental")}} {{non-standard_inline}}</h3> + +<p>Un attribut booléen spécifique à WebKit et Blink qui indique à l'agent utilisateur de traiter la recherche en continu. Lorsque cet attribut est présent et lorsque l'utilisateur édite la valeur du champ, l'agent utilisateur envoie des évènements {{event("search")}} sur l'objet {{domxref("HTMLInputElement")}} qui représente le champ de recherche. Ainsi, on peut gérer, avec du code, la mise à jour continue des résultats de recherche.</p> + +<p>Si l'attribut <code>incremental</code> n'est pas indiqué, l'évènement {{event("search")}} est uniquement envoyé lorsque l'tuilisateur déclenche la recherche (en appuyant sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> à l'édition du champ).</p> + +<p>La fréquence maximale à laquelle l'évènement <code>search</code> est envoyé est définie par chaque implémentation.</p> + +<h3 id="htmlattrdef(mozactionhint)_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p> + +<h3 id="htmlattrdef(results)_non-standard_inline">{{htmlattrdef("results")}} {{non-standard_inline}}</h3> + +<p>L'attribut <code>results</code>, spécifique à Safari, est une valeur numérique qui permet de surcharger la valeur maximale du nombre de recherches précédentes affichées dans la liste déroulante des suggestions.</p> + +<p>Cette valeur doit être un nombre positif. Si cet attribut n'est pas fourni, ou que sa valeur est invalide, ce sera le maximum fourni par le navigateur qui sera utilisé.</p> + +<h2 id="Utiliser_un_champ_de_recherche">Utiliser un champ de recherche</h2> + +<p>Les éléments <code><input></code> de type <code>search</code> sont semblables aux éléments <code><input></code> de type <code>text</code> mais sont spécifiquement destinés à la gestion des termes d'une recherche.</p> + +<h3 id="Exemple_simple">Exemple simple</h3> + +<pre class="brush: html"><form> + <div> + <input type="search" id="maRecherche" name="q"> + <button>Rechercher</button> + </div> +</form></pre> + +<p>Cet exemple produira le résultat suivant :</p> + +<p>{{EmbedLiveSample("Exemple_simple", 600, 40)}}</p> + +<p><code>q</code> est la valeur standard utilisé pour l'attribut <code>name</code> des champs de recherche. Lorsque le formulaire est envoyée, les données envoyées au serveur auront la forme <code>q=termederecherche</code>. Il est nécessaire de fournir un nom (c'est-à-dire un attribut <code>name</code>) à un champ, sinon aucune information ne sera envoyée lors de l'envoi du formulaire.</p> + +<div class="note"> +<p><strong>Note :</strong> Il est toujours nécessaire de fournir une valeur pour l'attribut {{htmlattrxref("name","input")}} car sinon aucune valeur ne sera envoyée.</p> +</div> + +<h3 id="Différences_entre_les_champs_de_recherche_et_les_champs_texte">Différences entre les champs de recherche et les champs texte</h3> + +<p>La différence principale est la façon dont les navigateurs gèrent cet élément. Premièrement, certains navigateurs affiche une icône de croix dans la zone de saisie qui peut être utilisée pour retirer le terme de la recherche. Voici par exemple un aperçu de la fonctionnalité sous Chrome:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15235/chrome-cross-icon.png" style="display: block; height: 31px; margin: 0px auto; width: 144px;"></p> + +<p>De plus, les navigateurs modernes proposent souvent une auto-complétion basée sur les termes de recherche déjà utilisés sur le site. Ainsi, quand on réutilise le champ, différentes suggestions peuvent être affichées et utilisées. Voici l'aperçu de cette fonctionnalité sous Firefox :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15237/firefox-auto-complete.png" style="display: block; height: 83px; margin: 0px auto; width: 171px;"></p> + +<h3 id="Ajouter_un_texte_indicatif">Ajouter un texte indicatif</h3> + +<p>Il est possible de fournir un texte indicatif dans le champ de recherche afin de fournir une indication quant aux recherches qu'il est possible de faire. Pour cela, on ajoutera un texte avec l'attribut {{htmlattrxref("placeholder","")}}. Par exemple :</p> + +<pre class="brush: html"><form> + <div> + <input type="search" id="maRecherche" name="q" + placeholder="Rechercher sur le site…"> + <button>Rechercher</button> + </div> +</form></pre> + +<p>Voici le résultat obtenu avec ce fragment HTML :</p> + +<p>{{EmbedLiveSample("Ajouter_un_texte_indicatif", 600, 40)}}</p> + +<h3 id="Les_champs_de_recherche_et_l’accessibilité">Les champs de recherche et l’accessibilité</h3> + +<p>Un des problèmes posé par les formulaires de recherche est leur accessibilité. En effet, dans la plupart des situations, il n'est pas nécessaire de fournir une étiquette indiquant le rôle de la recherche car le placement du champ rend son rôle clair (<a href="https://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">voici un exemple</a>).</p> + +<p>En revanche, pour les personnes qui utilisent des technologies assistives, cela peut être source de confusion. Une façon de résoudre ce problème sans modifier l'organisation visuelle est d'utiliser les fonctionnalités <a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> :</p> + +<ul> + <li>Utiliser un attribut <code>role</code> avec la valeur <code>search</code> sur l'élément <code><form></code> permettra aux lecteurs d'écran d'indiquer le formulaire comme étant un formulaire de recherche.</li> + <li>Si cela n'est pas suffisant, il est possible d'utiliser l'attribut <code>aria-label</code> sur l'élément <code><input></code>. Cet attribut peut contenir un texte descriptif qui sera lu à voix haute par un lecteur d'écran. Il s'agit d'un équivalent non-visuel de <code><label></code>.</li> +</ul> + +<p>Prenons un exemple :</p> + +<pre class="brush: html"><form role="search"> + <div> + <input type="search" id="maRecherche" name="q" + placeholder="Rechercher sur le site…" + aria-label="Rechercher parmi le contenu du site"> + <button>Rechercher</button> + </div> +</form></pre> + +<p>Voici le résultat obtenu grâce à ce fragment de HTML :</p> + +<p>{{EmbedLiveSample("Les_champs_de_recherche_et_l’accessibilité", 600, 40)}}</p> + +<p>Il n'y a aucune différence visuelle avec l'exemple précédent mais avec cette deuxième version, les personnes qui utilisent un lecteur d'écran disposeront de plus d'informations.</p> + +<div class="note"> +<p><strong>Note</strong> : Voir <a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics#SignpostsLandmarks">Signposts/Landmarks</a> pour plus d'informations à propos de ces fonctionnalités relatives à l'accessibilité.</p> +</div> + +<h3 id="Paramétrer_la_taille_physique">Paramétrer la taille physique</h3> + +<p>Il est possible de contrôler la taille physique du champ de saisie grâce à l'attribut {{htmlattrxref("size", "input")}}. Cet attribut permet d'indiquer le nombre de caractères qui peuvent être affichés simultanément à l'intérieur du champ. Ainsi, dans l'exemple qui suit, la zone de recherche peut contenir 20 caractères :</p> + +<pre class="brush: html"><form> + <div> + <input type="search" id="maRecherche" name="q" + placeholder="Rechercher sur le site…" size="30"> + <button>Rechercher</button> + </div> +</form></pre> + +<p>{{EmbedLiveSample('Paramétrer_la_taille_physique', 600, 40)}}</p> + +<h2 id="Validation">Validation</h2> + +<p>Les éléments <code><input></code> de type <code>search</code> possèdent les mêmes fonctionnalités de validation que les éléments <code><input type="text"></code>. Il existe peu de raison de contraindre les termes d'une recherche mais voici quelques cas.</p> + +<div class="note"> +<p><strong>Note </strong>: Attention, la validation des données d'un formulaire de recherche HTML par le client ne doit pas remplacer la vérification de ces données lorsqu'elles sont reçues sur le serveur. En effet, il est tout à fait possible pour quelqu'un de modifier le code HTML de la page pour outrepasser les mécanismes de validation. Il est également possible d'envoyer des données directement au serveur. Si le serveur ne valide pas les données reçues, des données potentiellement mal formatées pourraient causer des dommages aux bases de données et autres composants sensibles.</p> +</div> + +<h3 id="Une_note_sur_la_mise_en_forme">Une note sur la mise en forme</h3> + +<p>Les pseudo-classes CSS {{cssxref(":valid")}} et {{cssxref(":invalid")}} permettent de mettre en forme les éléments d'un formulaire en fonction de la validité de leur contenu. Dans cette section, nous utiliserons la feuille de style suivante afin de placer une coche à côté des champs valides et une croix à côté des champs invalides.</p> + +<pre class="brush: css">input:invalid ~ span:after { + content: '✖'; + padding-left: 5px; + position: absolute; +} + +input:valid ~ span:after { + content: '✓'; + padding-left: 5px; + position: absolute +}</pre> + +<p>Vous pouvez ici voir qu'on utilise un élément {{htmlelement("span")}} placé après l'élément du formulaire, c'est cet élément <code><span></code> qui contiendra les icônes. Cet élément est nécessaire car, sur certains navigateurs, les pseudo-classes dans les éléments de saisie sont mal gérées.</p> + +<h3 id="Rendre_le_champ_obligatoire">Rendre le champ obligatoire</h3> + +<p>Il est possible d'utiliser l'attribut {{htmlattrxref("required","input")}} afin d'indiquer que la valeur doit obligatoirement être saisie avant d'envoyer le formulaire :</p> + +<pre class="brush: html"><form> + <div> + <input type="search" id="maRecherche" name="q" + placeholder="Recherche sur le site…" required> + <button>Rechercher</button> + <span class="validity"></span> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css">input { + margin-right: 10px; +} + +input:invalid ~ span:after { + content: '✖'; + padding-left: 5px; + position: absolute; +} + +input:valid ~ span:after { + content: '✓'; + padding-left: 5px; + position: absolute; +}</pre> +</div> + +<p>Voici le résultat obtenu :</p> + +<p>{{EmbedLiveSample('Rendre_le_champ_obligatoire', 600, 40)}}</p> + +<p>De plus, si on essaie d'envoyer le formulaire sans aucun terme de recherche, le navigateur affichera un message. Voici par exemple, le résultat dans Firefox :</p> + +<p><img alt="form field with attached message that says Please fill out this field" src="https://mdn.mozillademos.org/files/15241/firefox-required-message.png" style="display: block; margin: 0 auto;"></p> + +<p>Différents messages peuvent être affichés selon le type d'erreur liée à la saisie.</p> + +<h3 id="Contraindre_la_taille_de_la_valeur_saisie">Contraindre la taille de la valeur saisie</h3> + +<p>Il est possible d'indiquer une taille minimale pour la longueur des termes de la recherche via l'attribut {{htmlattrxref("minlength", "input")}}. De même, on peut fixer la longueur maximale du texte qui peut être saisi pour la recherche grâce à l'attribut {{htmlattrxref("maxlength", "input")}}. Ces deux attributs sont exprimés en nombres de caractères.</p> + +<p>Dans l'exemple qui suit, la valeur saisie dans le champ de recherche doit mesurer entre 4 et 8 caractères.</p> + +<pre class="brush: html"><form> + <div> + <label for="mySearch">Rechercher un utilisateur</label> + <input type="search" id="mySearch" name="q" + placeholder="ID de 4 à 8 char." required + size="30" minlength="4" maxlength="8"> + <button>Rechercher</button> + <span class="validity"></span> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css">input { + margin-right: 10px; +} + +input:invalid ~ span:after { + content: '✖'; + padding-left: 5px; + position: absolute; +} + +input:valid ~ span:after { + content: '✓'; + padding-left: 5px; + position: absolute; +}</pre> +</div> + +<p>Voici le résultat obtenu avec ce fragment de code HTML :</p> + +<p>{{EmbedLiveSample('Contraindre_la_taille_de_la_valeur_saisie', 600, 40)}}</p> + +<p>Si vous essayez de soumettre une valeur qui est plus petite que 4 caractères, vous aurez un message d'erreur (qui peut varier selon le navigateur utilisé). De plus, le navigateur ne permettra pas de saisir un texte plus long que 8 caractères.</p> + +<h3 id="Indiquer_un_motif">Indiquer un motif</h3> + +<p>L'attribut {{htmlattrxref("pattern","input")}} permet d'indiquer une expression rationnelle que doit respecter la valeur saisie pour être considérée valide (cf. <a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire#Contraintes_de_validation_sur_les_éléments_<input>">Valider une valeur avec une expression rationnelle</a> pour une introduction).</p> + +<p>Prenons un exemple. Imaginons qu'on veuille rechercher un produit grâce à son identifiant et que les identifiants commencent par deux lettres, suivies de 4 chiffres. Dans l'exemple qui suit, le formulaire n'accepte qu'une valeur dont la taille est comprise entre 4 et 8 caractères et qui commence par deux lettres puis termine par 4 chiffres.</p> + +<pre class="brush: html"><form> + <div> + <label for="mySearch">Rechercher un produit par son code :</label> + <input type="search" id="mySearch" name="q" + placeholder="2 lettres puis 4 chiffres" required + size="30" pattern="[A-z]{2}[0-9]{4}"> + <button>Rechercher</button> + <span class="validity"></span> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css">input { + margin-right: 10px; +} + +input:invalid ~ span:after { + content: '✖'; + padding-left: 5px; + position: absolute; +} + +input:valid ~ span:after { + content: '✓'; + padding-left: 5px; + position: absolute; +}</pre> +</div> + +<p>Voici le résultat obtenu avec ce fragment HTML :</p> + +<p>{{EmbedLiveSample('Indiquer_un_motif', 600, 40)}}</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Vous pouvez consulter un exemple de formulaire de recherche dans notre exemple <a href="https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-aria-roles">website-aria-roles</a> (<a href="http://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">voir la démonstration <em>live</em></a>).</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur contenue dans le champ de recherche.</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}.</td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("required", "input")}}, {{htmlattrxref("size", "input")}}.</td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}.</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', 'input.html#text-(type=text)-state-and-search-state-(type=search)', '<input type="search">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#text-typetext-state-and-search-state-typesearch', '<input type="search">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-search")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Les formulaires HTML</a></li> + <li>{{HTMLElement("input")}} et l'interface {{domxref("HTMLInputElement")}} DOM qu'il implémente</li> + <li><code><a href="/fr/docs/Web/HTML/Element/input/text"><input type="text"></a></code></li> +</ul> diff --git a/files/fr/web/html/element/input/submit/index.html b/files/fr/web/html/element/input/submit/index.html new file mode 100644 index 0000000000..92276de492 --- /dev/null +++ b/files/fr/web/html/element/input/submit/index.html @@ -0,0 +1,275 @@ +--- +title: <input type="submit"> +slug: Web/HTML/Element/Input/submit +tags: + - Element + - Formulaire + - HTML + - Input + - Reference +translation_of: Web/HTML/Element/input/submit +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <strong><code>"submit"</code></strong> sont affichés comme des boutons permettant d'envoyer les données d'un formulaire. Cliquer sur un tel bouton déclenchera l'envoi des données du formulaire vers le serveur.</span></p> + +<div id="summary-example2"> +<pre class="brush: html"><input type="submit" value="Envoyer le formulaire"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example2", 650, 30)}}</p> + +<h2 id="Valeur">Valeur</h2> + +<p>La valeur de l'attribut {{htmlattrxref("value", "input")}} d'un élément <code><input type="submit"></code> contient une chaîne de caractères ({{domxref("DOMString")}}) qui est utilisée comme étiquette pour le bouton.</p> + +<p>Si on n'indique aucune valeur, ce sera un texte par défaut (dépendant du navigateur) qui sera utilisé ainsi que du système d'éxploitation:</p> + +<div id="summary-example1"> +<pre class="brush: html"><input type="submit"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p> + +<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> + +<p>En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les boutons <code>"submit"</code> permettent d'utiliser les attributs suivants :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribut</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("formaction")}}</code></td> + <td>L'URL à laquelle envoyer les données du formulaire. Cette valeur prend le pas sur l'attribut {{htmlattrxref("action", "form")}} du formulaire s'il est défini.</td> + </tr> + <tr> + <td><code>{{anch("formenctype")}}</code></td> + <td>Une chaîne de caractères qui indique le type d'encodage à utiliser pour les données du formulaire.</td> + </tr> + <tr> + <td><code>{{anch("formmethod")}}</code></td> + <td>La méthode HTTP ({{HTTPMethod("get")}} ou {{HTTPMethod("post")}}) à utiliser pour envoyer le formulaire.</td> + </tr> + <tr> + <td><code>{{anch("formnovalidate")}}</code></td> + <td>Un booléen qui, lorsqu'il est présent, indique que les champs du formulaire ne sont pas soumis <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">aux contraintes de validation</a> avant l'envoi des données au serveur.</td> + </tr> + <tr> + <td><code>{{anch("formtarget")}}</code></td> + <td>Le contexte de navigation dans lequel charger la réponse du serveur reçue après l'envoi du formulaire.</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdef(formaction)">{{htmlattrdef("formaction")}}</h3> + +<p>Une chaîne de caractères représentant l'URL à laquelle envoyer les données du formulaire. Cette valeur prend le pas sur l'attribut {{htmlattrxref("action", "form")}} du formulaire ({{HTMLElement("form")}}) propriétaire du champ <code><input></code>.</p> + +<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/image"><input type="image"></a></code> et {{HTMLElement("button")}}.</p> + +<h3 id="htmlattrdef(formenctype)">{{htmlattrdef("formenctype")}}</h3> + +<p>Une chaîne de caractères qui identifie la méthode d'encodage à utiliser pour l'envoi des données du formulaire au serveur. Trois valeurs sont autorisées :</p> + +<dl> + <dt><code>application/x-www-form-urlencoded</code></dt> + <dd>Les informations sont envoyées sous la forme d'une chaîne de caractères ajoutée à l'URL en utilisant l'algorithme de {{jsxref("encodeURI", "encodeURI()")}}. <strong>Cette valeur est la valeur par défaut.</strong></dd> + <dt><code>multipart/form-data</code></dt> + <dd>Cette valeur utilise l'API {{domxref("FormData")}} pour gérer les données et permet d'<em>uploader</em>des fichiers. Cet encodage <em>doit</em> être utilisé s'il y a des éléments {{HTMLElement("input")}} de {{htmlattrxref("type", "input")}} <code>"file"</code> (<code><a href="/fr/docs/Web/HTML/Element/input/file"><input type="file"></a></code>).</dd> + <dt><code>text/plain</code></dt> + <dd>Les données sont envoyées comme texte simple. Cette valeur est généralement utile pour déboguer car elle permet de voir facilement les données envoyées.</dd> +</dl> + +<p>Si cet attribut est défini, sa valeur prend la priorité sur l'attribut {{htmlattrxref("action", "form")}} du formulaire.</p> + +<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/image"><input type="image"></a></code> et {{HTMLElement("button")}}.</p> + +<h3 id="htmlattrdef(formmethod)">{{htmlattrdef("formmethod")}}</h3> + +<p>Une chaîne de caractères qui indique la méthode HTTP à utiliser lors de l'envoi des données du formulaire. Cette valeur prend la priorité sur l'attribut {{htmlattrxref("method", "form")}} du formulaire. Les valeurs autorisées sont :</p> + +<dl> + <dt><code>get</code></dt> + <dd>Une URL est construite en commençant avec l'URL fournie par l'attribut <code>formaction</code> ou {{htmlattrxref("action", "form")}}, suivie d'un point d'interrogation puis des données du formulaire, encodées comme indiqué avec <code>formenctype</code> ou {{htmlattrxref("enctype", "form")}}. Cette URL est ensuite envoyée au serveur avec une requête HTTP {{HTTPMethod("get")}}. Cette méthode fonctionne correctement pour les formulaires simples, contenant des données ASCII et sans effet de bord. <strong>C'est la valeur par défaut.</strong></dd> + <dt><code>post</code></dt> + <dd>Les données du formulaire sont incluses dans le corps de la requête envoyée à l'URL fournie par l'attribut <code>formaction</code> ou {{htmlattrxref("action", "form")}} en utilisant une requête {{HTTPMethod("push")}}. Cette méthode prend en charge les données plus complexes (que celles pour <code>get</code>) et les pièces jointes sous forme de fichiers.</dd> + <dt><code>dialog</code></dt> + <dd>Cette méthode est utilisée pour indique que le bouton permet simplement de fermer la boîte de dialogue associée au champ. Aucune donnée n'est transmise.</dd> +</dl> + +<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/image"><input type="image"></a></code> et {{HTMLElement("button")}}.</p> + +<h3 id="htmlattrdef(formnovalidate)">{{htmlattrdef("formnovalidate")}}</h3> + +<p>Un attribut booléen qui, lorsqu'il est présent, indique que le formulaire ne devrait pas être validé avant d'être envoyé au serveur. Cet attribut prend la priorité sur l'attribut {{htmlattrxref("novalidate", "form")}} du formulaire parent.</p> + +<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/image"><input type="image"></a></code> et {{HTMLElement("button")}}.</p> + +<h3 id="htmlattrdef(formtarget)">{{htmlattrdef("formtarget")}}</h3> + +<p>Une chaîne de caractères qui indique un nom ou un mot-clé qui définit où afficher la réponse reçue depuis le serveur après l'envoi du formulaire. La chaîne de caractères doit correspondre au nom <strong>d'un contexte de navigation</strong> (un onglet, une fenêtre ou une {{HTMLElement("iframe")}}). La valeur de cet attribut prendra la priorité sur celle fournie par l'attribut {{htmlattrxref("target", "form")}} du formulaire ({{HTMLElement("form")}}) parent.</p> + +<p>En complément des noms des onglets, fenêtres, <em>iframes</em>, quelques mots-clés spéciaux peuvent être utilisés :</p> + +<dl> + <dt><code>_self</code></dt> + <dd>La réponse est chargée dans le même contexte de navigation que celui contenant le formulaire. Cela remplacera le document courant avec les données reçues. <strong>Cette valeur est la valeur par défaut.</strong></dd> + <dt><code>_blank</code></dt> + <dd>La réponse est chargé dans un contexte de navigation vierge. Ce sera généralement un nouvel onglet dans la même fenêtre mais cela peut varier selon la configuration de l'agent utilisateur.</dd> + <dt><code>_parent</code></dt> + <dd>La réponse est chargée dans le contexte de navigation parent du contexte courant. S'il n'y a pas de contexte parent, cette valeur est synonyme de <code>"_self"</code>.</dd> + <dt><code>_top</code></dt> + <dd>La réponse est chargée dans le contexte de navigation de plus haut niveau, c'est-à-dire le contexte de navigation qui est l'ancêtre, sans parent, du contexte courant. Si le contexte courant est déjà le contexte de navigation le plus haut, cette valeur est synonyme de <code>"_self"</code>.</dd> +</dl> + +<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/image"><input type="image"></a></code> et {{HTMLElement("button")}}.</p> + +<h2 id="Utiliser_les_boutons_d'envoi">Utiliser les boutons d'envoi</h2> + +<p>Les boutons <code><input type="submit"></code> sont utilisés afin d'envoyer des formulaires. Si vous souhaitez créer un bouton personnalisé et adapter son comportement avec JavaScript, il sera préférable d'utiliser un élément {{HTMLElement("button")}} ou un élément <code><a href="/fr/docs/Web/HTML/Element/input/button"><input type="button"></a></code>.</p> + +<p>Attention, si un seul élément bouton est inséré dans un formulaire (par exemple <code><button>Mon bouton</button></code>), le navigateur considèrera que ce bouton doit servir comme bouton d'envoi. Il est donc nécessaire de déclarer explicitement un bouton d'envoi (<code><input type="submit"></code>) en plus d'autres boutons que vous souhaiteriez ajouter.</p> + +<h3 id="Un_bouton_pour_envoyer_simple">Un bouton pour envoyer simple</h3> + +<p>Commençons par un exemple simple :</p> + +<pre class="brush: html"><form> + <div> + <label for="example">Veuillez saisir un texte</label> + <input id="example" type="text" name="text"> + </div> + <div> + <input type="submit" value="Envoyer"> + </div> +</form> +</pre> + +<p>Voici le résultat obtenu :</p> + +<p>{{EmbedLiveSample("Un_bouton_pour_envoyer_simple", 650, 100)}}</p> + +<p>Pour tester, vous pouvez saisir un texte dans le champ puis cliquer sur le bouton.</p> + +<p>Lorsque le formulaire est envoyé, les paires formées par les noms et les valeurs seront envoyées au serveur. Dans le cas précédent, la donnée envoyée aura la forme <code>text=monTexte</code> (la deuxième partie varie selon le texte saisi). La destination et la méthode utilisées pour l'envoi des données dépend des attributs utilisés sur l'élément <code><form></code> (ainsi que d'autres détails). Pour plus d'informations, vous pouvez lire <a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoyer les données d'un formulaire</a>.</p> + +<h3 id="Ajouter_un_raccourci_clavier">Ajouter un raccourci clavier</h3> + +<p>Les raccourcis claviers permettent à l'utilisateur d'utiliser une touche du clavier ou une combinaison de touches afin de déclencher l'action d'un bouton. Pour ajouter un raccourci à un bouton d'envoi, on peut utiliser l'attribut universel {{htmlattrxref("accesskey")}}.</p> + +<p>Dans l'exemple qui suit, on définit <kbd>s</kbd> comme raccourci (autrement dit, il faudra appuyer sur la touche <kbd>s</kbd> avec une ou plusieurs touches supplémentaires qui dépendent du navigateur et du système d'exploitation, cf. {{htmlattrxref("accesskey")}} pour la liste de ces touches).</p> + +<pre class="brush: html"><form> + <div> + <label for="example">Veuillez saisir du texte</label> + <input id="example" type="text" name="text"> + </div> + <div> + <input type="submit" value="Envoyer" + accesskey="s"> + </div> +</form></pre> + +<p>{{EmbedLiveSample("Ajouter_un_raccourci_clavier", 650, 100)}}</p> + +<div class="note"> +<p><strong>Note </strong>: Un problème de cet exemple est que l'utilisateur ne saura pas quelle touche utiliser comme raccourci. Dans un cas concret, cette information serait affichée ou fournie via un lien simple d'accès qui décrirait les raccourcis disponibles.</p> +</div> + +<h3 id="Activer_et_désactiver_un_bouton_d'envoi">Activer et désactiver un bouton d'envoi</h3> + +<p>Si on souhaite désactiver un bouton, il sufft d'utiliser l'attribut booléen universel {{htmlattrxref("disabled")}} :</p> + +<div id="disable-example1"> +<pre class="brush: html"><input type="submit" value="Disabled" disabled></pre> +</div> + +<p>Pour activer / désactiver le bouton dynamiquement, on pourra manipuler l'attribut DOM <code>disabled</code> avec la valeur <code>true</code> ou <code>false</code> en JavaScript (avec une instruction similaire à <code>btn.disabled = true</code>).</p> + +<div class="note"> +<p><strong>Note </strong>: Voir la page <code><a href="/fr/docs/Web/HTML/Element/Input/button#Désactiver_et_activer_un_bouton"><input type="button"></a></code> pour plus d'exemples concernant l'activation/désactivation des boutons liés à un formulaire.</p> +</div> + +<div class="note"> +<p><strong>Note </strong>: À 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 conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée</a>. L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité.</p> +</div> + +<h2 id="Validation">Validation</h2> + +<p>Il n'existe pas de mécanisme de validation natif côté client pour les boutons d'envoi de formulaires.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Voir les exemples ci-avant.</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères ({{domxref("DOMString")}}) utilisée comme étiquette (texte) pour le bouton.</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{event("click")}}</td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td>{{htmlattrxref("type", "input")}}, and {{htmlattrxref("value", "input")}}</td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td>Aucune.</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#submit-button-state-(type=submit)', '<input type="submit">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#submit-button-state-(type=submit)', '<input type="submit">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-submit")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'élément {{HTMLElement("input")}} et l'interface DOM {{domxref("HTMLInputElement")}} qu'il implémente</li> + <li>L'élément {{HTMLElement("button")}}.</li> + <li><a href="/fr/docs/Learn/HTML/Forms_and_buttons">Apprendre les formulaires et les boutons</a></li> + <li><a href="/fr/docs/Web/Accessibility/ARIA/forms">L'accessibilité et les formulaires</a></li> + <li><a href="/fr/docs/Learn/HTML/Forms">Les formulaires HTML</a></li> +</ul> diff --git a/files/fr/web/html/element/input/tel/index.html b/files/fr/web/html/element/input/tel/index.html new file mode 100644 index 0000000000..a0cade3b39 --- /dev/null +++ b/files/fr/web/html/element/input/tel/index.html @@ -0,0 +1,513 @@ +--- +title: <input type="tel"> +slug: Web/HTML/Element/Input/tel +tags: + - Element + - Formulaires + - HTML + - Input + - Reference +translation_of: Web/HTML/Element/input/tel +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"tel"</strong></code> permettent à un utilisateur de saisir un numéro de téléphone. Contrairement aux contrôles utilisés pour <code><a href="/fr/docs/Web/HTML/Element/input/email"><input type="email"></a></code> et <code><a href="/fr/docs/Web/HTML/Element/input/url"><input type="url"></a></code> , la valeur saisie n'est pas automatiquement validée selon un format donné car les formats des numéros de téléphone varient à travers le monde.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-tel.html", "tabbed-standard")}}</div> + +<div 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> !</div> + +<div class="note"> +<p><strong>Note :</strong> Les navigateurs qui ne prennent pas en charge le type <code>"tel"</code> utiliseront à la place un contrôle de type <code><a href="/fr/docs/Web/HTML/Element/input/text">"text"</a></code>.</p> +</div> + +<h2 id="Valeur">Valeur</h2> + +<p>Une chaîne de caractères ({{domxref("DOMString")}}) qui peut prendre l'une de ces deux valeurs :</p> + +<ol> + <li>Une chaîne vide ("") qui indique que l'utilisateur n'a saisi aucune valeur ou que celle-ci a été supprimée.</li> + <li>Une chaîne de caractères représentant un numéro de téléphone.</li> +</ol> + +<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> + +<p>In addition to the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, telephone number inputs support the following attributes:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribut</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("maxlength")}}</code></td> + <td>Le nombre de caractères maximal, exprimé en points de code UTF-16, qui peut être écrit dans ce champ.</td> + </tr> + <tr> + <td><code>{{anch("minlength")}}</code></td> + <td>Le nombre de caractères minimal, exprimé en points de code UTF-16, qui peut être écrit dans ce champ pour qu'il soit considéré comme valide.</td> + </tr> + <tr> + <td><code>{{anch("pattern")}}</code></td> + <td>Une expression rationnelle à laquelle doit correspondre le numéro de téléphone saisi pour être valide.</td> + </tr> + <tr> + <td><code>{{anch("placeholder")}}</code></td> + <td>Une valeur d'exemple qui sera affichée lorsqu'aucune valeur n'est saisie.</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>Un attribut booléen qui indique si le contenu du champ est en lecture seule.</td> + </tr> + <tr> + <td><code>{{anch("size")}}</code></td> + <td>Un nombre qui indique le nombre de caractères affichés par le champ.</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3> + +<p>Le nombre maximum de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>maxlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à <code>minlength</code>.</p> + +<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du numéro de téléphone dépasse <code>maxlength</code> en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p> + +<h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3> + +<p>Le nombre minimal de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>minlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieur à <code>maxlength</code>.</p> + +<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du numéro de téléphone est inférieure à <code>minlength</code> en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p> + +<h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}</p> + +<p>Voir <a href="#format">la section format</a> ci-après pour plus détails et d'exemples.</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p> + +<h2 id="Attributs_non-standard">Attributs non-standard</h2> + +<p>Les attributs non-standard suivant sont disponibles pour les champs textuels mais devraient ne pas être utilisés.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("autocorrect")}}</code></td> + <td>Indique si la correction automatique doit être appliquée à ce champ texte. <strong>Uniquement pris en charge par Safari.</strong></td> + </tr> + <tr> + <td><code>{{anch("mozactionhint")}}</code></td> + <td>Une chaîne de caractères qui indique le type d'action qui sera effectuée lorsque l'utilisateur appuiera sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition du champ. La valeur de cet attribut est utilisée comme libellé pour la touche adéquate du clavier virtuel. <strong>Uniquement pris en charge par Firefox pour Android.</strong></td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefautocorrect_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p> + +<h3 id="htmlattrdefmozactionhint_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p> + +<h2 id="Utiliser_<input_typetel>">Utiliser <code><input type="tel"></code></h2> + +<p>Les numéros de téléphone peuvent jouer un rôle important dans certains formulaires web. Un site de commerce en ligne, par exemple, peut vouloir enregistrer le numéro de téléphone d'un utilisateur pour le contacter lors de la livraison. Toutefois, un des problèmes relatifs aux numéros de téléphone est la variété de formats qui existent à travers le monde. Il est donc difficile (voire impossible) de valider les valeurs automatiquement.</p> + +<div class="note"> +<p><strong>Note</strong> : Des mécanismes de validation particuliers peuvent être ajoutés si besoin (cf. {{anch("Validation")}} ci-après).</p> +</div> + +<h3 id="Claviers_adaptés">Claviers adaptés</h3> + +<p>L'un des avantages des contrôles de type <code>tel</code> est qu'ils permettent aux navigateurs mobiles de proposer un clavier adapté à la saisie de numéros de téléphone. Voici par exemple le clavier obtenu avec Firefox pour Android :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15441/fx-android-tel.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 360px;"></p> + +<h3 id="Un_contrôle_simple">Un contrôle simple</h3> + +<p>Dans sa forme la plus simple, on peut implémenter un tel contrôle avec ce fragment HTML :</p> + +<pre class="brush: html notranslate"><input id="telNo" name="telNo" type="tel"></pre> + +<p>{{EmbedLiveSample('Un_contrôle_simple', 600, 40)}}</p> + +<p>Rien de bien surprenant ici. Lorsque les données seront envoyées au serveur, elles auront la forme <code>telNo=0123456789</code>.</p> + +<h3 id="Textes_indicatifs_-_placeholders">Textes indicatifs - <em>placeholders</em></h3> + +<p>Il est parfois utile de fournir une indication quant au format attendu. Or, il est possible que la disposition de la page ne permette pas de fournir des étiquettes détaillées. C'est pourquoi on peut utiliser des textes indicatifs via l'attribut <code>placeholder</code>. Ces valeurs seront affichées dans le champ et disparaîtront dès que l'utilisateur saisira quelque chose (et réapparaîtront si la valeur redevient vide). Un tel texte indicatif doit servir de suggestion quant au format souhaité.</p> + +<p>Dans l'exemple suivant, on a un contrôle <code>"tel"</code> avec un attribut <code>placeholder</code> qui vaut <code>"01 23 45 67 89"</code>. Vous pouvez manipuler le résultat obtenu pour voir comment ce texte est affiché selon qu'une valeur saisie ou que le champ est vide :</p> + +<pre class="brush: html notranslate"><input id="telNo" name="telNo" type="tel" + placeholder="01 23 45 67 89"></pre> + +<p>{{EmbedLiveSample('Textes_indicatifs_-_placeholders', 600, 40)}}</p> + +<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3> + +<p>On peut contrôler la taille physique allouée au contrôle ainsi que les longueurs minimale et maximale autorisées pour le texte saisi dans le contrôle.</p> + +<h4 id="La_taille_physique">La taille physique</h4> + +<p>La taille physique de la boîte de saisie peut être contrôlée avec l'attribut {{htmlattrxref("size", "input")}}. La valeur de cet attribut indique le nombre de caractères que la boîte peut afficher simultanément. Si, par exemple, on souhaite que le contrôle mesure 20 caractères de large, on pourra utiliser le code suivant :</p> + +<pre class="brush: html notranslate"><input id="telNo" name="telNo" type="tel" + size="20"></pre> + +<p>{{EmbedLiveSample('La_taille_physique', 600, 40)}}</p> + +<h4 id="La_longueur_de_la_valeur">La longueur de la valeur</h4> + +<p>L'attribut <code>size</code> ne contraint pas la taille de la valeur qui peut être saisie dans le contrôle. Si on souhaite avoir une longueur minimale (en nombre de caractères), on pourra utiliser l'attribut {{htmlattrxref("minlength", "input")}}. De même, si on souhaite qu'un numéro de téléphone valide mesure au maximum X caractères, on pourra employer l'attribut {{htmlattrxref("maxlength", "input")}}.</p> + +<p>Dans l'exemple qui suit, on crée un contrôle qui mesure 20 caractères de large et dont le contenu doit être plus long que 9 caractères et plus court que 14 caractères.</p> + +<pre class="brush: html notranslate"><input id="telNo" name="telNo" type="tel" + size="20" minlength="9" maxlength="14"></pre> + +<p>{{EmbedLiveSample("La_longueur_de_la_valeur", 600, 40)}}</p> + +<div class="note"> +<p><strong>Note</strong> : Ces deux attributs jouent un rôle lors de la {{anch("validation", "Validation")}}. Dans l'exemple précédent, la valeur sera considérée comme invalide si elle contient moins de 9 caractères ou plus de 14. La plupart des navigateurs ne permettront pas de saisir une valeur plus longue que la taille maximale.</p> +</div> + +<h3 id="Fournir_une_valeur_par_défaut">Fournir une valeur par défaut</h3> + +<p>Il est possible de fournir une valeur par défaut en renseignant au préalable l'attribut {{htmlattrxref("value", "input")}} :</p> + +<div id="Default_value"> +<pre class="brush: html notranslate"><input id="telNo" name="telNo" type="tel" + value="01 23 45 67 89"></pre> +</div> + +<p>{{EmbedLiveSample("Fournir_une_valeur_par_défaut", 600, 40)}}</p> + +<h4 id="Afficher_des_suggestions">Afficher des suggestions</h4> + +<p>Si on souhaite aller plus loin, on peut fournir une liste de suggestions parmi lesquelles l'utilisateur pourra choisir (il pourra également saisir la valeur de son choix si celle-ci ne fait pas partie de la liste). Pour cela, on utilisera l'attribut {{htmlattrxref("list", "input")}} dont la valeur est l'identifiant d'un élément {{HTMLElement("datalist")}} qui contient autant d'éléments {{HTMLElement("option")}} que de valeurs suggérées. C'est la valeur de l'attribut <code>value</code> de chaque élément <code><option></code> qui sera utilisée comme suggestion.</p> + +<pre class="brush: html notranslate"><input id="telNo" name="telNo" type="tel" list="defaultTels"> + +<datalist id="defaultTels"> + <option value="01 23 45 67 89"> + <option value="02 45 67 89 01"> + <option value="03 45 67 89 12"> + <option value="04 56 87 98 32"> +</datalist></pre> + +<p>{{EmbedLiveSample("Afficher_des_suggestions", 600, 40)}}</p> + +<p>Avec l'élément {{HTMLElement("datalist")}} contenant ces différentes valeurs {{HTMLElement("option")}}, le navigateur affichera une liste déroulante (ou un autre élément d'interface utilisateur) afin que l'utilisateur puisse éventuellement choisir parmi les suggestions. Lorsque l'utilisateur saisit dans le contrôle, la liste des suggestions est restreinte à celles qui correspondent encore.</p> + +<h2 id="Validation">Validation</h2> + +<p>Comme évoqué ci-avant, il est difficile de fournir une solution qui convienne pour l'ensemble des formats utilisés et qui permette de valider correctement les numéros de téléphone.</p> + +<div class="warning"><strong>Attention !</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</div> + +<h3 id="Rendre_la_valeur_obligatoire">Rendre la valeur obligatoire</h3> + +<p>Il est possible de rendre la saisie obligatoire avant de pouvoir envoyer le formulaire. Pour cela, on utilisera l'attribut {{htmlattrxref("required", "input")}} :</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="telNo">Veuillez saisir un numéro de téléphone (obligatoire) : </label> + <input id="telNo" name="telNo" type="tel" required> + <span class="validity"></span> + </div> + <div> + <button>Envoyer</button> + </div> +</form></pre> + +<p>On utilisera la feuille de style suivante pour indiquer les éléments valides ou invalides du formulaire :</p> + +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; content: '✖'; + padding-left: 5px; + color: #8b0000; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; + color: #009000; +}</pre> + +<p>Voici le résultat obtenu :</p> + +<p>{{EmbedLiveSample("Rendre_la_valeur_obligatoire", 700, 70)}}</p> + +<h3 id="Utiliser_un_format_particulier"><a id="format" name="format">Utiliser un format particulier</a></h3> + +<p>Si on souhaite restreindre le format de la valeur qui peut être saisie, on peut utiliser l'attribut {{htmlattrxref("pattern","input")}} dont la valeur est une expression rationnelle que la valeur doit respecter pour être valide.</p> + +<p>Dans cet exemple, on utilisera la même feuille de style que précédemment mais le code HTML sera celui-ci :</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="telNo">Veuillez saisir un numéro de téléphone (obligatoire) : </label> + <input id="telNo" name="telNo" type="tel" required + pattern="[0-9]{2} [0-9]{2} [0-9]{2} [0-9]{2} [0-9]{2}"> + <span class="validity"></span> + </div> + <div> + <button>Envoyer</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; content: '✖'; + padding-left: 5px; + color: #8b0000; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; + color: #009000; +}</pre> +</div> + +<p>{{EmbedLiveSample("Utiliser_un_format_particulier", 700, 70)}}</p> + +<p>Vous pouvez ici voir que la valeur est considérée comme invalide si elle ne suit pas le format xx xx xx xx xx. Ce format peut peut-être être utile pour certaines régions mais attention, dans une application réelle, il faudra s'adapter à des cas plus complexes selon la locale de l'utilisateur.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Dans cet exemple, on présente une interface simple avec un élément {{htmlelement("select")}} permettant à l'utilisateur de choisir le pays dans lequel il se trouve puis un ensemble d'éléments <code><input type="tel"></code> permettant de saisir ses différents numéros de téléphone.</p> + +<p>Chaque boîte de saisie possède un attribut {{htmlattrxref("placeholder","input")}} qui indique le format pressenti. On utilise également l'attribut {{htmlattrxref("pattern","input")}} afin d'indiquer le nombre de caractères ainsi qu'un attribut <code>aria-label</code> qui pourra être lu par un lecteur d'écran ete qui décrit quoi saisir dans le contrôle.</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="country">Veuillez choisir votre pays :</label> + <select id="country" name="country"> + <option>Royaume-Uni</option> + <option selected>États-Unis</option> + <option>Allemagne</option> + </select> + </div> + <div> + <p>Veuillez saisir vos numéros de téléphone : </p> + <span class="areaDiv"> + <input id="areaNo" name="areaNo" type="tel" required + placeholder="Code régional" pattern="[0-9]{3}" + aria-label="Code régional"> + <span class="validity"></span> + </span> + <span class="number1Div"> + <input id="number1" name="number1" type="tel" required + placeholder="Premier fragment" pattern="[0-9]{3}" + aria-label="Premier fragment du numéro"> + <span class="validity"></span> + </span> + <span class="number2Div"> + <input id="number2" name="number2" type="tel" required + placeholder="Second fragment" pattern="[0-9]{4}" + aria-label="Second fragment du numéro"> + <span class="validity"></span> + </span> + </div> + <div> + <button>Envoyer</button> + </div> +</form></pre> + +<p>Le code JavaScript associé est relativement simple, il contient un gestionnaire d'évènements {{domxref("GlobalEventHandlers.onchange", "onchange")}} qui est déclenché lorsque la valeur du <code><select></code> est modifiée. Il met alors à jour les attributs <code>pattern</code>, <code>placeholder</code>, <code>aria-label</code> du contrôle pour adapter le format attendu au pays choisi.</p> + +<pre class="brush: js notranslate">var selectElem = document.querySelector("select"); +var inputElems = document.querySelectorAll("input"); + +selectElem.onchange = function() { + for(var i = 0; i < inputElems.length; i++) { + inputElems[i].value = ""; + } + + if(selectElem.value === "États-Unis") { + inputElems[2].parentNode.style.display = "inline"; + + inputElems[0].placeholder = "Code régional"; + inputElems[0].pattern = "[0-9]{3}"; + + inputElems[1].placeholder = "Première partie"; + inputElems[1].pattern = "[0-9]{3}"; + inputElems[1].setAttribute("aria-label","Première partie du numéro"); + + inputElems[2].placeholder = "Seconde partie"; + inputElems[2].pattern = "[0-9]{4}"; + inputElems[2].setAttribute("aria-label","Seconde partie du numéro"); + } else if(selectElem.value === "Royaume-Uni") { + inputElems[2].parentNode.style.display = "none"; + + inputElems[0].placeholder = "Code régional"; + inputElems[0].pattern = "[0-9]{3,6}"; + + inputElems[1].placeholder = "Numéro local"; + inputElems[1].pattern = "[0-9]{4,8}"; + inputElems[1].setAttribute("aria-label","Numéro local"); + } else if(selectElem.value === "Allemagne") { + inputElems[2].parentNode.style.display = "inline"; + + inputElems[0].placeholder = "Code régional"; + inputElems[0].pattern = "[0-9]{3,5}"; + + inputElems[1].placeholder = "Première partie"; + inputElems[1].pattern = "[0-9]{2,4}"; + inputElems[1].setAttribute("aria-label","Première partie du numéro"); + + inputElems[2].placeholder = "Seconde partie"; + inputElems[2].pattern = "[0-9]{4}"; + inputElems[2].setAttribute("aria-label","Seconde partie du numéro"); + } +}</pre> + +<p>Voici le résultat obtenu :</p> + +<p>{{EmbedLiveSample('Exemples', 600, 140)}}</p> + +<p>Attention, cet exemple n'est qu'une illustration du problème associé à la gestion internationale des numéros de téléphone. Il serait prétentieux d'affirmer qu'étendre ce mécanisme à chaque pays suffirait à garantir la bonne saisie d'un numéro de téléphone.</p> + +<p>Bien entendu, si cette complexité est trop importante, on peut également faire le choix de contrôler la valeur côté serveur avant de faire un retour à l'utilisateur.</p> + +<div class="hidden"> +<pre class="brush: css notranslate">div { +margin-bottom: 10px; +position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente un numéro de téléphone ou qui est vide.</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}.</td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}} et {{htmlattrxref("size", "input")}}</td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>list,selectionStart</code>, <code>selectionEnd</code>, <code>selectionDirection</code> et <code>value</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</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#tel-state-(type=tel)', '<input type="tel">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#tel-state-typetel', '<input type="tel">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-tel")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Le guide sur les formulaires HTML</a></li> + <li>{{HTMLElement("input")}}</li> + <li><a href="/fr/docs/Accessibilité/ARIA/formulaires">Les formulaires et l'accessibilité</a></li> + <li>{{HTMLElement("input")}} + <ul> + <li><code><a href="/fr/docs/Web/HTML/Element/input/text"><input type="text"></a></code></li> + <li><code><a href="/fr/docs/Web/HTML/Element/input/email"><input type="email"></a></code></li> + </ul> + </li> +</ul> diff --git a/files/fr/web/html/element/input/text/index.html b/files/fr/web/html/element/input/text/index.html new file mode 100644 index 0000000000..cfba3809e2 --- /dev/null +++ b/files/fr/web/html/element/input/text/index.html @@ -0,0 +1,458 @@ +--- +title: <input type="text"> +slug: Web/HTML/Element/Input/text +tags: + - Formulaires + - HTML + - Input + - Reference +translation_of: Web/HTML/Element/input/text +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"text"</strong></code> permettent de créer des champs de saisie avec du texte sur une seule ligne.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-standard")}}</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> + +<h2 id="Valeur">Valeur</h2> + +<p>L'attribut {{htmlattrxref("value", "input")}} d'un tel élément contient une chaîne de caractères ({{domxref("DOMString")}}) qui correspond à la valeur contenue dans le champ texte. En JavaScript, cette valeur peut être récupérée avec la propriété JavaScript {{domxref("HTMLInputElement.value","value")}}.</p> + +<pre class="brush: js">monTextInput.value; +</pre> + +<p>Si aucune contrainte de validation n'est ajoutée (cf. {{anch("Validation")}} pour plus d'informations), la valeur peut être n'importe quelle chaîne de caractères voire la chaîne vide ("").</p> + +<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> + +<p>En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs textuels prennent en charge les attributs suivants :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribut</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("maxlength")}}</code></td> + <td>Le nombre de caractères maximal qui peut être écrit dans ce champ.</td> + </tr> + <tr> + <td><code>{{anch("minlength")}}</code></td> + <td>Le nombre de caractères minimal qui peut être écrit dans ce champ pour qu'il soit considéré comme valide.</td> + </tr> + <tr> + <td><code>{{anch("pattern")}}</code></td> + <td>Une expression rationnelle à laquelle doit correspondre le texte saisi pour être valide.</td> + </tr> + <tr> + <td><code>{{anch("placeholder")}}</code></td> + <td>Une valeur d'exemple qui sera affichée lorsqu'aucune valeur n'est saisie.</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>Un attribut booléen qui indique si le contenu du champ est en lecture seule.</td> + </tr> + <tr> + <td><code>{{anch("size")}}</code></td> + <td>Un nombre qui indique le nombre de caractères affichés par le champ.</td> + </tr> + <tr> + <td><code>{{anch("spellcheck")}}</code></td> + <td>Cet attribut contrôle l'activation de la vérification orthographique sur le champ ou si la vérification orthographique par défaut doit être appliquée.</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdef(maxlength)">{{htmlattrdef("maxlength")}}</h3> + +<p>Le nombre maximum de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>maxlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à <code>minlength</code>.</p> + +<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du texte dépasse <code>maxlength</code> en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p> + +<h3 id="htmlattrdef(minlength)">{{htmlattrdef("minlength")}}</h3> + +<p>Le nombre minimal de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>minlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieur à <code>maxlength</code>.</p> + +<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du texte est inférieure à <code>minlength</code> en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p> + +<h3 id="htmlattrdef(pattern)">{{htmlattrdef("pattern")}}</h3> + +<div id="pattern-include"> +<p>L'attribut <code>pattern</code> est une expression rationnelle que doit respecter la valeur ({{htmlattrxref("value")}}) du champ afin d'être <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">valide</a>. Cette expression rationnelle doit être une expression rationnelle valide pour JavaScript (telle qu'utilisée par {{jsxref("RegExp")}} et telle que documentée dans <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">ce guide</a>). Le marqueur <code>'u'</code> est fourni par le navigateur lors de la compilation de l'expression rationnelle afin que le motif soit traité comme une séquence de points de code Unicode plutôt que comme des caractères ASCII. Aucune barre oblique (/) ne devrait être utilisée autour du motif.</p> + +<p>Si l'expression rationnelle est invalide ou que cet attribut n'est pas défini, l'attribut est ignoré.</p> + +<div class="note"> +<p><strong>Note :</strong> L'attribut {{htmlattrxref("title", "input")}} pourra être utilisé afin d'afficher une bulle d'informations qui explique les conditions à respecter. Il est également conseillé d'inclure un texte explicatif à proximité du champ.</p> +</div> +</div> + +<p>Voir <a href="#format">la section sur l'utilisation de cet attribut ci-après</a> pour plus d'exemples.</p> + +<h3 id="htmlattrdef(placeholder)">{{htmlattrdef("placeholder")}}</h3> + +<p>L'attribut <code>placeholder</code> est une chaîne de caractères fournissant une courte indication à l'utilisateur quant à l'information attendue dans le champ. Cet attribut devrait être un mot ou une phrase courte qui illustre le type de donnée attendu plutôt qu'un message explicatif. Le texte ne doit pas contenir de saut à la ligne.</p> + +<p>Si le contenu du contrôle respecte une directionnalité donnée ({{Glossary("LTR")}} ou {{Glossary("RTL")}}) et que le texte indicatif doit être présenté dans l'autre sens, il est possible d'utiliser l'algorithme de formatage bidirectionnel Unicode (cf. {{SectionOnPage("/en-US/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm", "Overriding BiDi using Unicode control characters")}}).</p> + +<div class="note"> +<p><strong>Note :</strong> On évitera, tant que faire se peut, d'utiliser l'attribut <code>placeholder</code> car il n'est pas sémantiquement très utile pour expliquer le formulaire et car il peut causer certains problèmes avec le contenu. Voir {{SectionOnPage("/fr/docs/Web/HTML/Element/input", "Libellés et textes indicatifs")}} pour plus d'informations.</p> +</div> + +<h3 id="htmlattrdef(readonly)">{{htmlattrdef("readonly")}}</h3> + +<p>Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisateur. Toutefois, la valeur de l'attribut <code>value</code> peut toujours être modifiée via du code JavaScript qui définirait la propriété {{domxref("HTMLInputElement.value")}}.</p> + +<div class="note"> +<p><strong>Note :</strong> Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut <code>required</code> n'aura pas d'effet si l'attribut <code>readonly</code> est également présent.</p> +</div> + +<h3 id="htmlattrdef(size)">{{htmlattrdef("size")}}</h3> + +<p>L'attribut <code>size</code> est un nombre positif qui indique le nombre de caractères affichés à l'écran et qui définit donc la largeur du champ. La valeur par défaut de cet attribut est 20. Étant donné que la largeur des caractères peut varier cet attribut ne permet de définir une largeur exacte mais approximative.</p> + +<p>Cet attribut ne définit pas la limite du nombre de caractères saisissables dans le champ mais uniquement, et approximativement, le nombre de caractères qui peuvent être affichés à l'écran simultanément. Pour fixer une taille maximale sur la valeur du champ, on utilisera plutôt l'attribut <code>{{anch("maxlength")}}</code>.</p> + +<h3 id="htmlattrdef(spellcheck)">{{htmlattrdef("spellcheck")}}</h3> + +<div id="spellcheck-include"> +<p><code>spellcheck</code> est un attribut universel qui est utilisé afin d'indiquer si la vérification orthographique doit être utilisée pour un élément. Il peut être utilisé pour n'importe quel contenu éditable mais possède certaines spécificités pour les éléments {{HTMLElement("input")}}. Les valeurs autorisées pour cet attribut sont :</p> + +<dl> + <dt><code>false</code></dt> + <dd>La vérification orthographique est désactivée pour cet élément.</dd> + <dt><code>true</code></dt> + <dd>La vérification orthographique est activée pour cet élément.</dd> + <dt><code>""</code> (chaîne de caractères vide) ou aucune valeur</dt> + <dd>La configuration par défaut de l'élément par rapport à la vérification orthographique sera respectée. Cette configuration par défaut peut provenir de la valeur de <code>spellcheck</code> pour les éléments parents ou d'autres facteurs.</dd> +</dl> + +<p>Un champ de saisie peut avoir la vérification orthographique activée s'il ne possède pas l'attribut {{anch("readonly")}} et qu'il n'est pas désactivé.</p> + +<p>La valeur renvoyée par l'attribut <code>spellcheck</code> peut ne pas refléter l'état réel de la vérification ortographique si certaines préférences de l'agent utilisateur surchargent le paramétrage par défaut.</p> +</div> + +<h2 id="Attributs_non-standard">Attributs non-standard</h2> + +<p>Les attributs non-standard suivant sont disponibles pour les champs textuels mais devraient ne pas être utilisés.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribut</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("autocorrect")}}</code></td> + <td>Une chaîne de caractères qui indique si la correction automatique doit être appliquée à ce champ texte. <strong>Uniquement pris en charge par Safari.</strong></td> + </tr> + <tr> + <td><code>{{anch("mozactionhint")}}</code></td> + <td>Une chaîne de caractères qui indique le type d'action qui sera effectuée lorsque l'utilisateur appuiera sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition du champ. La valeur de cet attribut est utilisée comme libellé pour la touche adéquate du clavier virtuel. <strong>Uniquement pris en charge par Firefox pour Android.</strong></td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdef(autocorrect)_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3> + +<div id="autocorrect-include"> +<p>Un attribut spécifique à Safari, sous la forme d'une chaîne de caractères, qui indique si la correction automatique doit être appliquée lors de l'édition du champ. Les valeurs autorisées pour cet attribut sont :</p> + +<dl> + <dt><code>on</code></dt> + <dd>La correction automatique et les remplacements de texte sont appliqués.</dd> + <dt><code>off</code></dt> + <dd>Toute correction automatique et tout remplacement de texte est désactivé.</dd> +</dl> +</div> + +<h3 id="htmlattrdef(mozactionhint)_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3> + +<div id="mozactionhint-include"> +<p>Un attribut spécifique à Mozilla (et plus particulièrement Firefox pour Android) qui fournit une indication quant au type d'action effectuée lorsque l'utilisateur appuie sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition. Cette information pourra être utilisée afin de choisir le libellé à afficher sur la touche <kbd>Entrée</kbd> du clavier virtuel.</p> + +<div class="note"> +<p><strong>Note :</strong> Cet attribut <a href="https://html.spec.whatwg.org/#input-modalities:-the-enterkeyhint-attribute">a été standardisé</a> sous l'attribut universel {{htmlattrxref("enterkeyhint")}} mais ce dernier n'est pas encore largement implémenté. Pour connaître le statut du changement d'implémentation pour Firefox, voir {{bug(1490661)}}.</p> +</div> + +<p>Les valeurs autorisées pour cet attribut sont : <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code> et <code>send</code>. Le navigateur décide alors, selon la valeur, quel libellé utiliser pour la touche Entrée.</p> +</div> + +<h2 id="Utiliser_<input_typetext>">Utiliser <code><input type="text"></code></h2> + +<p>Les éléments <code><input></code> de type <code>text</code> sont utilisés pour créer des champs texte sur une seule ligne. Ils doivent être utilisés lorsqu'on souhaite saisir du texte sur une ligne et qu'il n'existe pas de meilleur contrôle disponible pour la valeur (ainsi, s'il s'agit d'une <a href="/fr/docs/Web/HTML/Element/input/datetime-local">date</a>, <a href="/fr/docs/Web/HTML/Element/input/url">d'une URL</a>, <a href="/fr/docs/Web/HTML/Element/input/email">d'une adresse électronique</a> ou <a href="/fr/docs/Web/HTML/Element/input/search">d'une recherch</a>, on pourra par exemple utiliser des éléments plus pertinents).</p> + +<h3 id="Exemple_simple">Exemple simple</h3> + +<pre class="brush: html"><form> + <div> + <label for="uname">Veuillez choisir un nom d'utilisateur :</label> + <input type="text" id="uname" name="name"> + </div> + <div> + <button>Envoyer</button> + </div> +</form></pre> + +<p>Voici ce qui sera obtenu :</p> + +<p>{{EmbedLiveSample("Exemple_simple", 600, 50)}}</p> + +<p>Lorsque le formulaire est envoyé, la paire nom/valeur est envoyée au serveur sous la forme <code>uname=Chris</code> (si "Chris" était le texte qui avait été saisi avant d'envoyer le formulaire). Il faut veiller à bien avoir un attribut <code>name</code> pour l'élément <code><input></code> car sinon, rien ne sera envoyé.</p> + +<h3 id="Utiliser_des_textes_indicatifs_-_placeholders">Utiliser des textes indicatifs <em>- placeholders</em></h3> + +<p>Il est possible de fournir un texte indicatif qui sera affiché dans le champ lorsqu'aucune valeur n'a été saisi. Pour cela, on utilise l'attribut {{htmlattrxref("placeholder","input")}}. Par exemple :</p> + +<pre class="brush: html"><form> + <div> + <label for="uname">Veuillez choisir un nom d'utilisateur :</label> + <input type="text" id="uname" name="name" + placeholder="Un seul mot, en minuscules"> + </div> + <div> + <button>Envoyer</button> + </div> +</form></pre> + +<p>Voici le résultat qui sera obtenu :</p> + +<p>{{EmbedLiveSample("Utiliser_des_textes_indicatifs_-_placeholders", 600, 50)}}</p> + +<p>Le texte indicatif est généralement affiché dans une couleur plus claire que le texte qui sera saisi par l'utilisateur.</p> + +<h3 id="Contrôler_la_taille_physique_du_champ">Contrôler la taille physique du champ</h3> + +<p>La taille physique du champ de saisie peut être adaptée grâce à l'attribut {{htmlattrxref("size", "input")}}. Sa valeur correspond au nombre de caractères qui seront affichés simultanément. Voici par exemple, un fragment de code HTML où la contrôle de saisie affichera au plus 30 caractères en même temps (on pourra saisir un texte plus long mais toutes les lettres ne seront pas affichées) :</p> + +<pre class="brush: html"><form> + <div> + <label for="uname">Veuillez choisir un nom d'utilisateur : </label> + <input type="text" id="uname" name="name" + placeholder="Un seul mot, en minuscules" + size="30"> + </div> + <div> + <button>Envoyer</button> + </div> +</form></pre> + +<p>{{EmbedLiveSample("Contrôler_la_taille_physique_du_champ", 600, 50)}}</p> + +<h2 id="Validation">Validation</h2> + +<p>Les éléments <code><input></code> de type <code>text</code> ne possède pas de mécanisme de validation automatique. En revanche, il est possible d'ajouter certaines contraintes qui seront vérifiées côté client et que nous allons voir ici.</p> + +<div class="warning"> +<p><strong>Attention !</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</p> +</div> + +<h3 id="Un_aparté_sur_la_mise_en_forme">Un aparté sur la mise en forme</h3> + +<p>Les pseudo-classes CSS {{cssxref(":valid")}} et {{cssxref(":invalid")}} sont utiles pour mettre en forme les éléments qui ne respectent pas les contraintes de validation. Dans la suite de cette section, nous utiliserons cette feuille de style afin d'afficher une coche ou une croix après les valeurs valides ou invalides.</p> + +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> + +<p>Comme le montrent les sélecteurs utilisés, cette technique s'appuie sur la présence d'un élément {{htmlelement("span")}} placé après le formulaire et qui joue le rôle de réceptacle pour les icônes. Cette méthode de contournement est nécessaire car certains navigateurs n'affichent pas les icônes placées directement sur les éléments de formulaire.</p> + +<h3 id="Rendre_la_valeur_obligatoire">Rendre la valeur obligatoire</h3> + +<p>On peut utiliser l'attribut {{htmlattrxref("required","input")}} afin d'indiquer que la valeur doit être remplie avant de pouvoir envoyer le formulaire :</p> + +<pre class="brush: html"><form> + <div> + <label for="uname">Veuillez choisir un nom d'utilisateur : </label> + <input type="text" id="uname" name="name" required> + <span class="validity"></span> + </div> + <div> + <button>Envoyer</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre> +</div> + +<p>Ce qui produira ce résultat :</p> + +<p>{{EmbedLiveSample('Rendre_la_valeur_obligatoire', 600, 70)}}</p> + +<p>Si vous tentez d'envoyer le formulaire sans avoir saisi de valeur dans le champ texte, le navigateur affichera un message d'erreur.</p> + +<h3 id="Contraindre_la_longueur_du_texte_saisi">Contraindre la longueur du texte saisi</h3> + +<p>Il est possible d'indiquer la longueur minimale du texte grâce à l'attribut {{htmlattrxref("minlength", "input")}}. De même, on peut utiliser l'attribut {{htmlattrxref("maxlength", "input")}} pour indiquer le nombre maximal de caractères attendus.</p> + +<p>Dans l'exemple suivant, pour que le texte soit valide, il faut qu'il soit plus long que 4 caractères et moins long que 8 caractères.</p> + +<pre class="brush: html"><form> + <div> + <label for="uname">Choisir un nom d'utilisateur : </label> + <input type="text" id="uname" name="name" required size="45" + placeholder="Le nom d'utilisateur doit mesurer entre 4 et 8 caractères" + minlength="4" maxlength="8"> + <span class="validity"></span> + </div> + <div> + <button>Envoyer</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre> +</div> + +<p>Voici le résultat qui est alors obtenu :</p> + +<p>{{EmbedLiveSample('Contraindre_la_longueur_du_texte_saisi', 600, 70)}}</p> + +<p>Si vous essayez d'envoyer le formulaire avec un nom d'utilisateur plus court (que 4 caractères), le navigateur affichera un message d'erreur. De plus le navigateur empêchera de saisir une valeur plus longue que 8 caractères.</p> + +<div class="note"> +<p><strong>Note :</strong> Si on indique <code>minlength</code> mais pas <code>required</code>, la valeur saisie est considérée comme valide car l'utilisateur peut ne pas saisir de valeur.</p> +</div> + +<h3 id="Contraindre_un_format_spécifique_-_expression_rationnelle"><a id="format" name="format">Contraindre un format spécifique - expression rationnelle</a></h3> + +<p>L'attribut {{htmlattrxref("pattern","input")}} permet d'indiquer une expression rationnelle que devra respecter la valeur saisie afin d'être valide (cf. <a href="/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression">Valider un champ par rapport à une expression rationnelle</a> pour une introduction).</p> + +<p>Dans l'exemple qui suit, on restreint le format du texte afin que ce soit un texte en minuscules (pour lequel seules les lettres de "a" à "z" sont autorisées) et qui mesure entre 4 et 8 caractères.</p> + +<pre class="brush: html"><form> + <div> + <label for="uname">Veuillez choisir un nom d'utilisateur : </label> + <input type="text" id="uname" name="name" required size="45" + pattern="[a-z]{4,8}"> + <span class="validity"></span> + <p>Un nom d'utilisateur doit être en minuscules sur 4 à 8 caractères.</p> + </div> + <div> + <button>Envoyer</button> + </div> +</form></pre> + +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +p { + font-size: 80%; + color: #999; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> + +<p>Voici le résultat qui sera obtenu :</p> + +<p>{{EmbedLiveSample("Contraindre_un_format_spécifique_-_expression_rationnelle", 600, 110)}}</p> + +<h2 id="Exemples">Exemples</h2> + +<p>En plus des exemples précédents, vous pouvez consulter les articles <a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Un premier formulaire en HTML</a> et <a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment organiser un formulaire HTML</a>.</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur contenue dans le champ texte.</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{event("change")}} et {{event("input")}}</td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("required", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("size", "input")}}.</td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}.</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', 'input.html#text-(type=text)-state-and-search-state-(type=search)', '<input type="text">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#text-typetext-state-and-search-state-typesearch', '<input type="text">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-text")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Les formulaires HTML</a></li> + <li>{{HTMLElement("input")}} ainsi que l'interface DOM {{domxref("HTMLInputElement")}} qui est implémentée par cet élément.</li> + <li><code><a href="/fr/docs/Web/HTML/Element/input/search"><input type="search"></a></code></li> + <li>{{HTMLElement("textarea")}} : un élément qui permet de saisir du texte sur plusieurs lignes</li> +</ul> diff --git a/files/fr/web/html/element/input/time/index.html b/files/fr/web/html/element/input/time/index.html new file mode 100644 index 0000000000..af266f8fc7 --- /dev/null +++ b/files/fr/web/html/element/input/time/index.html @@ -0,0 +1,517 @@ +--- +title: <input type="time"> +slug: Web/HTML/Element/Input/time +tags: + - Formulaires + - HTML + - Input + - Reference +translation_of: Web/HTML/Element/input/time +--- +<div>{{HTMLRef}}</div> + +<p>Les éléments {{htmlelement("input")}} dont l'attribut <code>type</code> vaut <strong><code>time</code></strong> permettent de créer des contrôles où l'utilisateur peut saisir une heure (avec des minutes et éventuellement des secondes).</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-time.html", "tabbed-standard")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à 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> + +<p>L'interface utilisateur affichée pour le contrôle peut varier d'un navigateur à l'autre. À l'heure où nous écrivons ces lignes, seul Safari ne prend pas en charge ce type de contrôle. Pour ce dernier, l'élément sera transformé en simple <code><a href="/fr/docs/Web/HTML/Element/Input/text"><input type="text"></a></code>.</p> + +<h2 id="Apparence">Apparence</h2> + +<h3 id="ChromeOpera">Chrome/Opera</h3> + +<p>Pour Chrome/Opera, le contrôle <code>time</code> possède deux cases permettant de saisir les heures d'une part et les minutes d'autre part (sur 12 ou 24 heures selon la locale de l'ordinateur), deux flèches pour augmenter ou réduire la valeur et une croix permettant de supprimer la valeur.</p> + +<p><img alt="Contrôle Chrome pour une saisie avec une locale sur 24h" src="https://mdn.mozillademos.org/files/15399/chrome-time.png" style="display: block; height: 31px; margin: 0px auto; width: 82px;"><img alt="Contrôle de Chrome pour une saisie avec une locale sur 12h" src="https://mdn.mozillademos.org/files/16417/chrome_time.PNG" style="display: block; height: 31px; margin: 0px auto; width: 82px;"></p> + +<h3 id="Firefox">Firefox</h3> + +<p>Pour Firefox, l'aspect du contrôle est similaire mais il ne possède pas les flèches d'incrément. L'horloge peut également s'utiliser sur un format 12 heures ou 24 heures (selon la locale du système). Un bouton rond avec une croix permet de réinitialiser la valeur du contrôle.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15403/firefox-time.png" style="display: block; height: 29px; margin: 0px auto; width: 106px;"></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16461/firefox-time-24.png" style="display: block; height: 29px; margin: 0px auto; width: 106px;"></p> + +<h3 id="Edge">Edge</h3> + +<p>Pour Edge, le contrôle affiché est un plus élaboré : il affiche un sélecteur avec deux bandes déroulantes pour choisir l'heure et les minutes (sur 12 ou 24 heures selon la locale) :</p> + +<p><img alt="Contrôle Edge pour la saisie sur 24h" src="https://mdn.mozillademos.org/files/15401/edge-time.png" style="display: block; margin: 0 auto;"></p> + +<p><img alt="Contrôle Edge pour la saisie sur 12 heures" src="https://mdn.mozillademos.org/files/16418/edge_time.PNG" style="display: block; height: 360px; margin: 0px auto; width: 233px;"></p> + +<h2 id="Valeur">Valeur</h2> + +<p>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de l'heure saisie dans le contrôle. Il est possible de définir une valeur par défaut en indiquant une heure dans l'attribut {{htmlattrxref("value", "input")}} :</p> + +<pre class="brush: html"><label for="appt-time">Veuillez choisir une heure de rendez-vous :</label> +<input id="appt-time" type="time" name="appt-time" value="13:30"></pre> + +<p>{{EmbedLiveSample('Valeur', 600, 60)}}</p> + +<p>Il est également possible d'obtenir et de fixer l'heure en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}}. Par exemple :</p> + +<pre class="brush: js">var timeControl = document.querySelector('input[type="time"]'); +timeControl.value = '15:30';</pre> + +<h3 id="Représentation_de_la_valeur">Représentation de la valeur</h3> + +<p>Attention, le format d'affichage peut être différent de la valeur exacte contenue dans l'attribut <code>value</code>. Le format d'affichage sera choisi en fonction de la locale du système d'exploitation de l'utilisateur alors que la valeur de <code>value</code> suivra toujours le format <code>hh:mm</code> (où <code>hh</code> représente les deux chiffres de l'heure sur 24 heures et où <code>mm</code> représente les deux chiffres pour les minutes). Ainsi, <code>13:30</code>, pourra être affiché sous la forme <code>1.30 PM</code> dans le contrôle mais la valeur envoyée avec le formulaire sera toujours <code>appt-time=13%3A30</code>. Pour en savoir plus, vous pouvez vous référer à <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">l'article sur les formats utilisés pour les représentations des dates et heures</a>.</p> + +<p>Prenons un autre exemple qui permet de voir simultanément la valeur dans le contrôle et celle stockée dans l'attribut :</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><form> + <label for="startTime">Début : </label> + <input type="time" id="startTime"> + <p> + Valeur stockée dans <code>&lt;input time&gt;</code> :<code> + "<span id="value">n/a</span>"</code>. + </p> +</form></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<p>On utilise quelques lignes de JavaScript afin de récupérer la valeur stockée et on l'insère dans l'élément <code><span></code> du fragment HTML précédent en surveillant l'évènement {{domxref("HTMLElement/input_event", "input")}} :</p> + +<pre class="brush: js">var startTime = document.getElementById("startTime"); +var valueSpan = document.getElementById("value"); + +startTime.addEventListener("input", function() { + valueSpan.innerText = startTime.value; +}, false);</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Représentation_de_la_valeur", 600, 80)}}</p> + +<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> + +<p>En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de type <code>"time"</code> gèrent les attributs suivants :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribut</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("max")}}</code></td> + <td>L'heure la plus tardive qui est accepté, au format <code>"hh:mm"</code>.</td> + </tr> + <tr> + <td><code>{{anch("min")}}</code></td> + <td>L'heure la plus tôt qui est acceptée au format <code>"hh:mm"</code>.</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>Un attribut booléen qui, lorsqu'il est présent, indique que le contenu du champ ne peut pas être édité par l'utilisateur.</td> + </tr> + <tr> + <td><code>{{anch("step")}}</code></td> + <td>Le pas à utiliser pour l'incrément quand on utilise les boutons d'augmentation/diminution. Cet incrément est également utilisé pour la validation.</td> + </tr> + </tbody> +</table> + +<div class="note"><strong>Note :</strong> À la différence d'autres types de donnée, les valeurs pour les heures sont sur un domaine <strong>périodique</strong>. Cela signifie qu'une fois la valeur maximale dépassée, on revient à la valeur minimale (autrement dit, on fait le tour de l'horloge). Ainsi, si on indique <code>min</code> avec la valeur <code>"14:00"</code> et <code>max</code> avec la valeur <code>"2:00"</code>, cela signifie que les valeurs autorisées sont comprises entre 2 heures de l'après-midi et jusqu'à 2 heures du matin le jour suivant.</div> + +<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3> + +<p>Une chaîne de caractères, au format <code>"hh:mm"</code>, qui indique l'heure la plus tardive qui est considérée comme valide. Si la chaîne fournie n'est pas valide, aucun maximum n'est défini.</p> + +<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3> + +<p>Une chaîne de caractères, au format <code>"hh:mm"</code>, qui indique l'heure la plus tôt qui est considérée comme valide. Si la chaîne fournie n'est pas valide, aucun minimum n'est défini.</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}</p> + +<p>Pour les champs de type <code>time</code>, la valeur de l'attribut <code>step</code> est exprimée en secondes (avec un facteur de multiplication de 1000). Par défaut, la valeur de l'incrément est 60, ce qui correspond à 1 minute.</p> + +<p><em>À l'heure où ces lignes sont écrites, la signification de la valeur <code>"any"</code> pour l'attribut <code>step</code> pour les champs <code>time</code> n'est pas certaine. Cette information sera mise à jour dès que possible.</em></p> + +<h2 id="Utiliser_<input_typetime>">Utiliser <code><input type="time"></code></h2> + +<p>Ces champs de saisie peuvent sembler pratiques : ils fournissent simplement une interface utilisateur pour sélectionner ds heures et normalisent les données dans un format (indépendant de la locale de l'utilisateur) avant de l'envoyer au serveur. Toutefois, quelques écueils peuvent apparaître en raison de la prise en charge hétérogène des différents navigateurs.</p> + +<p>Dans la suite de cet article, nous verrons des cas d'utilisation simples puis complexes autour de <code><input type="time"></code> puis nous verrons comment gérer l'absence de prise en charge des navigateur avec un exemple plus développé.</p> + +<h3 id="Utilisation_simple">Utilisation simple</h3> + +<p>Dans sa forme la plus simple, <code><input type="time"></code> n'est accompagné que d'un élément {{htmlelement("label")}} :</p> + +<pre class="brush: html"><form> + <label for="appt-time">Veuillez choisir une heure de rendez-vous : </label> + <input id="appt-time" type="time" name="appt-time"> +</form></pre> + +<p>{{EmbedLiveSample('Utilisation_simple', 600, 40)}}</p> + +<h3 id="Ajuster_la_taille_du_contrôle">Ajuster la taille du contrôle</h3> + +<p><code><input type="time"></code> ne prend pas en charge d'attribut qui permette de le dimensionner (à la façon de {{htmlattrxref("size", "input")}}). Il faut donc utiliser <a href="/fr/docs/Web/CSS">CSS</a> si besoin.</p> + +<h3 id="Utiliser_step">Utiliser <code>step</code></h3> + +<p>L'attribut {{htmlattrxref("step", "input")}} peut être utilisé afin de faire varier l'incrément de temps lorsqu'on passe d'une valeur à la suivante ou à la précédente. Attention toutefois, cela n'est pas pris en charge ou homogène parmi les différents navigateurs.</p> + +<p>La valeur de cet attribut est un entier exprimant le nombre de secondes à incrémenter. Si on choisit une valeur inférieure à 60 secondes (c'est-à-dire 1 minute), le contrôle <code>time</code> affichera alors une troisième section pour les secondes après les heures et les minutes:</p> + +<pre class="brush: html"><form> + <label for="appt-time">Veuillez choisir une heure de rendez-vous : </label> + <input id="appt-time" type="time" name="appt-time" step="2"> +</form></pre> + +<p>{{EmbedLiveSample("Utiliser_step", 600, 40)}}</p> + +<p>Cependant, cela ne semble avoir un effet prévisible que pour Chrome/Opera qui sont les deux navigateurs à posséder des flèches d'incrément. Avant l'exemple précédent, cliquer sur le flèche augmentera/réduira l'heure de deux secondes (si on souhaite manipuler des minutes, il faudra multiplier par 60 et de même pour les heures : un incrément de 120 correspondra à 2 minutes et un incrément de 7200 correspondra à 2 heures).</p> + +<p>Cet attribut semble n'avoir aucun impact pour Firefox ou Edge voire empêche la validation de fonctionner (voir la prochaine section).</p> + +<h2 id="Validation">Validation</h2> + +<p>Par défaut <code><input type="time"></code> ne valide pas les valeurs saisies. En effet, l'interface utilisateur ne permet de choisir une valeur exotique (par exemple 36:87).</p> + +<h3 id="Indiquer_une_heure_maximale_et_minimale">Indiquer une heure maximale et minimale</h3> + +<p>Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de réduire la plage horaire valide pendant laquelle l'utilisateur peut sélectionner une heure. Dans l'exemple suivant, l'utilisateur peut saisir une heure minimum de <code>12:00</code> et une heure maximum de <code>18:00</code>:</p> + +<pre class="brush: html"><form> + <label for="appt-time">Veuillez choisir une heure de rendez-vous (heures d'ouverture 12:00 à 18:00) : </label> + <input id="appt-time" type="time" name="appt-time" + min="12:00" max="18:00"> + <span class="validity"></span> +</form></pre> + +<p>{{EmbedLiveSample('Indiquer_une_heure_maximale_et_minimale', 600, 40)}}</p> + +<p>Voici la feuille de style CSS utilisée dans l'exemple précédent. On utilise les pseudos-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que la valeur saisie est valide ou non. Les icônes qui indiquent cette validité ont été placées dans un élément {{htmlelement("span")}} à part car Chrome ne permet pas de placer du contenu généré dans le contrôle.</p> + +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> + +<p>Avec ce fragment de code HTML :</p> + +<ul> + <li>Seules les heures comprises entre 12:00 et 18:00 sont affichées comme étant valides (les heures avant et après seront invalides).</li> + <li>Selon le navigateur utilisé, il peut même être impossible de sélectionner une heure en dehors de la plage restreinte (avec Edge notamment).</li> +</ul> + +<h3 id="Rendre_la_saisie_obligatoire">Rendre la saisie obligatoire</h3> + +<p>On peut également utiliseer l'attribut {{htmlattrxref("required", "input")}} afin que la saisie du champ soit obligatoire. Lorsque c'est le cas, les navigateurs afficheront un message d'erreur si l'utilisateur tente d'envoyer le formulaire sans avoir saisi de valeur (ou si celle-ci est en dehors de la plage indiquée).</p> + +<p>Prenons l'exemple suivant qui restreint la plage horaire sélectionnable et qui rend le champ obligatoire :</p> + +<pre class="brush: html"><form> + <div> + <label for="appt-time">Veuillez choisir une heure de rendez-vous (horaires d'ouverture entre 12:00 et 18:00) : </label> + <input id="appt-time" type="time" name="appt-time" + min="12:00" max="18:00" required> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="Envoyer le formulaire"> + </div> +</form></pre> + +<p>Si vous essayez de soumettre le formulaire sans avoir saisi de valeur (ou avec une heure en dehors des heures d'ouverture indiquées), le navigateur affichera une erreur. Vous pouvez manipuler le résultat obtenu :</p> + +<p>{{EmbedLiveSample('Rendre_la_saisie_obligatoire', 600, 120)}}</p> + +<p>Voici une capture d'écran (en anglais) si votre navigateur ne prend pas en charge cete fonctionnalité :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15405/firefox-validation-message.png" style="display: block; margin: 0 auto;"></p> + +<div class="warning"> +<p><strong>Attention !</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</p> +</div> + +<h2 id="Gérer_la_prise_en_charge_des_navigateurs">Gérer la prise en charge des navigateurs</h2> + +<p>Comme mentionné avant, un problème peut être l'hétérogénéité de la prise en charge des navigateurs : Safari ne prend pas en charge cette fonctionnalité sur les ordinateurs de bureau et les anciennes versions d'Internet Explorer n'implémentent pas cet élément.</p> + +<p>Pour les plateformes mobiles (Android et iOS par exemple), les systèmes d'exploitation fournissent des interfaces particulièrement adaptées aux environnements tactiles. Voici par exemple le sélecteur d'heure pour Chrome sur Android :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15407/chrome-android-time.png" style="display: block; margin: 0 auto;"></p> + +<p>Lorsqu'un navigateur ne prend pas en charge ce type d'élément, il utilise un champ texte (<code><input type="text"></code>) à la place. Mais cela crée des problèmes, tant au niveau de l'interface utilisateur que de la cohérence des données et du format.</p> + +<p>C'est ce problème de format qui est le plus important. Comme nous l'avons expliqués plus haut, un champ<code>time</code> permet d'obtenir un valeur normalisée, respectant le format <code>hh:mm</code>. Avec un champ texte, le navigateur ne reconnaît pas de format particulier pour l'heure et les utilisateurs peuvent employer différentes formes pour décrire l'heure voulue :</p> + +<ul> + <li><code>3.00 pm</code></li> + <li><code>3:00pm</code></li> + <li><code>15:00</code></li> + <li><code>3h de l'après-midi</code></li> + <li>etc.</li> +</ul> + +<p>Une façon de contourner ce problème consiste à utiliser l'attribut {{htmlattrxref("pattern", "input")}} sur le champ <code>time</code>. Bien quqe le champ <code>time</code> n'utilise pas cet attribut, le champ texte pourra l'utiliser. Vous pouvez par exemple tester ce fragment de code dans un navigateur qui ne prend pas en charge <code><input type="time"></code> :</p> + +<pre class="brush: html"><form> + <div> + <label for="appt-time">Veuillez choisir une heure de rendez-vous (heures d'ouverture entre 12:00 et 18:00) : </label> + <input id="appt-time" type="time" name="appt-time" + min="12:00" max="18:00" required + pattern="[0-9]{2}:[0-9]{2}"> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="Envoyer"> + </div> +</form></pre> + +<p>{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}}</p> + +<p>Si on essaie d'envoyer une valeur qui ne respecte pas le bon format, le navigateur affichera un message d'erreur et mettra en évidence le champ si celui-ci ne suit pas la forme <code>nn:nn</code> avec <code>n</code> un nombre entre 0 et 9. Bien entendu, cela n'empêche pas de saisir des heures invalides mais qui respectent ce format.</p> + +<p>De plus, comment communiquer à l'utilisateur le format dans lequel saisir l'heure ?</p> + +<p>Il reste donc un problème.</p> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<p>Actuellement, la meilleure façon de gérer ce type de saisie pour les différents navigateurs consiste à utiliser deux contrôles (le premier pour la saisie des heures et le second pour la saisie des minutes) avec deux éléments {{htmlelement("select")}} (cf. ci-après) ou d'utiliser certaines bibliothèques JavaScript telles que <a href="https://jqueryui.com/datepicker/">jQuery date picker</a> ou encore <a href="http://timepicker.co/">jQuery timepicker plugin</a>.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Dans l'exemple qui suit, on crée deux ensembles d'éléments : un sélecteur natif avec <code><input type="time"></code> et un ensemble de deux éléments {{htmlelement("select")}} qui permettent de choisir des heures et des minutes dans les navigateurs qui ne prennent pas en charge le contrôle natif.</p> + +<p>{{EmbedLiveSample('Exemples', 600, 140)}}</p> + +<p>Voici le fragment HTML utilisé :</p> + +<pre class="brush: html"><form> + <div class="nativeTimePicker"> + <label for="appt-time">Veuillez choisir une heure de rendez-vous (heures d'ouverture 12:00 à 18:00) : </label> + <input id="appt-time" type="time" name="appt-time" + min="12:00" max="18:00" required> + <span class="validity"></span> + </div> + <p class="fallbackLabel">Veuillez choisir une heure de rendez-vous (heures d'ouverture 12:00 à 18:00) : </p> + <div class="fallbackTimePicker"> + <div> + <span> + <label for="hour">Heures :</label> + <select id="hour" name="hour"> + </select> + </span> + <span> + <label for="minute">Minutes :</label> + <select id="minute" name="minute"> + </select> + </span> + </div> + </div> +</form></pre> + +<p>Les valeurs pour les heures et les minutes seront générées dynamiquement en JavaScript.</p> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<p>La partie la plus intéressante du code est celle qui permet de détecter si le contrôle natif est pris en charge. Pour cela, on crée un nouvel élément {{htmlelement("input")}} et on modifie son attribut <code>type</code> afin qu'il vaille <code>time</code>, immédiatement après, on vérifie la valeur du type. Si le navigateur ne prend pas en charge l'élément, il renverra <code>text</code> car l'élément a été transformé en <code><input type="text"></code>, dans ce cas, on masque le sélecteur natif et on affiche l'interface alternative avec les deux éléments {{htmlelement("select")}}.</p> + +<pre class="brush: js">// On définit quelques variables +var nativePicker = document.querySelector('.nativeTimePicker'); +var fallbackPicker = document.querySelector('.fallbackTimePicker'); +var fallbackLabel = document.querySelector('.fallbackLabel'); + +var hourSelect = document.querySelector('#hour'); +var minuteSelect = document.querySelector('#minute'); + +// On cache le sélecteur alternatif +fallbackPicker.style.display = 'none'; +fallbackLabel.style.display = 'none'; + +// On teste si un nouveau contrôle time +// est transformé en text +var test = document.createElement('input'); +test.type = 'time'; +// Si c'est le cas… +if(test.type === 'text') { + // On masque le sélecteur natif et + // on affiche le sélecteur alternatif + nativePicker.style.display = 'none'; + fallbackPicker.style.display = 'block'; + fallbackLabel.style.display = 'block'; + + // On génère les valeurs dynamiquement + // pour les heures et les minutes + populateHours(); + populateMinutes(); +} + +function populateHours() { + // On ajoute les heures dans + // l'élément <select> avec les 6 + // heures ouvertes + for(var i = 12; i <= 18; i++) { + var option = document.createElement('option'); + option.textContent = i; + hourSelect.appendChild(option); + } +} + +function populateMinutes() { + // On génère 60 options pour 60 minutes + for(var i = 0; i <= 59; i++) { + var option = document.createElement('option'); + option.textContent = (i < 10) ? ("0" + i) : i; + minuteSelect.appendChild(option); + } +} + +// avec la fonction suivante, si l'heure vaut 18 +// on s'assure que les minutes vaillent 00 +// afin de ne pas pouvoir choisir d'heure passé 18:00 + function setMinutesToZero() { + if(hourSelect.value === '18') { + minuteSelect.value = '00'; + } + } + + hourSelect.onchange = setMinutesToZero; + minuteSelect.onchange = setMinutesToZero;</pre> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente un heure (avec des minutes) ou bien une chaîne de caractères vide.</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}</td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} et {{htmlattrxref("step", "input")}}.</td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>, <code>list</code>.</td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.</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#time-state-(type=time)', '<input type="time">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-time")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'élément générique {{HTMLElement("input")}} ainsi que l'interface DOM {{domxref("HTMLInputElement")}} qui peut être utilisée pour manipuler l'élément</li> + <li><a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">Les formats de date et d'heure utilisés en HTML</a></li> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#Sélection_de_date_et_d'horaire">Un tutoriel pour les sélecteurs de date et d'heure</a></li> + <li><code><a href="/fr/docs/Web/HTML/Element/input/datetime-local"><input type="datetime-local"></a></code>, <code><a href="/fr/docs/Web/HTML/Element/input/date"><input type="date"></a></code>, <code><a href="/fr/docs/Web/HTML/Element/input/week"><input type="week"></a></code>, and <code><a href="/fr/docs/Web/HTML/Element/input/month"><input type="month"></a></code></li> +</ul> diff --git a/files/fr/web/html/element/input/url/index.html b/files/fr/web/html/element/input/url/index.html new file mode 100644 index 0000000000..37cdcb0804 --- /dev/null +++ b/files/fr/web/html/element/input/url/index.html @@ -0,0 +1,397 @@ +--- +title: <input type="url"> +slug: Web/HTML/Element/Input/url +tags: + - Formulaire + - HTML + - Input + - Reference +translation_of: Web/HTML/Element/input/url +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"url"</strong></code> sont employées afin de permettre à un utilisateur de saisir ou d'éditer une URL.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-url.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> + +<p>La valeur saisie est automatiquement validée par le navigateur qui vérifie qu'elle est vide ou formatée correctement avant que le formulaire puisse être envoyé. Les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} sont appliquées auomatiquement selon le cas de figure.</p> + +<div class="note"> +<p><strong>Note :</strong> Les navigateurs qui ne prennent pas en charge le type<code>"url"</code> utiliseront à la place un élément {{HTMLElement("input/text", "text")}}.</p> +</div> + +<h2 id="Valeur">Valeur</h2> + +<p>La valeur de l'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères ({{domxref("DOMString")}}) dont la valeur est automatiquement vérifiée afin de s'assurer que sa syntaxe est bien celle d'une URL. De façon plus précise, seuls deux formats sont autorisés :</p> + +<ol> + <li>Une chaîne de caractères vide ("") qui indique que l'utilisateur n'a pas saisi de valeur ou que la valeur a été retirée.</li> + <li>Une seule URL bien formée. Cela ne signifie pas nécessairement que l'adresse existe mais qu'elle est formatée correctement. Autrement dit, la chaîne de caractères respecte la forme <code>"schema://restedelurl"</code>.</li> +</ol> + +<p>Voir {{anch("Validation")}} pour plus de détails sur le format des URL et leur validation.</p> + +<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> + +<p>En complément des attributs qui fonctionnent pour tous les types d'éléments {{HTMLElement("input")}}, les champs de saisie d'URL prennent en charge les attributs suivants :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribut</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("maxlength")}}</code></td> + <td>La longueur maximale de l'URL, exprimée en nombre de caractères UTF-16, afin qu'elle soit considérée comme valide.</td> + </tr> + <tr> + <td><code>{{anch("minlength")}}</code></td> + <td>La longueur minimale de l'URL, exprimée en nombre de caractères UTF-16, afin qu'elle soit considérée comme valide.</td> + </tr> + <tr> + <td><code>{{anch("pattern")}}</code></td> + <td>Une expression rationnelle que doit respecter la valeur afin d'être considérée comme valide.</td> + </tr> + <tr> + <td><code>{{anch("placeholder")}}</code></td> + <td>Une valeur d'exemple à afficher lorsqu'aucune valeur n'est saisie dans le champ.</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>Un attribut booléen qui indique si le champ est en lecture seule et ne peut être édité par l'utilisateur.</td> + </tr> + <tr> + <td><code>{{anch("size")}}</code></td> + <td>Le nombre de caractères qui doivent être visibles à l'écran.</td> + </tr> + <tr> + <td><code>{{anch("spellcheck")}}</code></td> + <td>Une chaîne de caractères qui contrôle si la vérification orthographique doit être activée.</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdef(maxlength)">{{htmlattrdef("maxlength")}}</h3> + +<p>Le nombre maximal de caractères (en nombre de points de code UTF-16) qui peuvent être saisis dans le champ de l'URL. Cette valeur doit être un entier positif ou nul. Si aucune valeur n'est fournie pour <code>maxlength</code> ou qu'une valeur invalide est fournie, le champ n'aura pas de longueur maximale. La valeur de cet attribut doit être supérieure ou égale à celle de l'attribut <code>minlength</code>.</p> + +<p>La valeur <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne respectera pas la validation</a> si la longueur du texte saisi est supérieure à cet attribut.</p> + +<h3 id="htmlattrdef(minlength)">{{htmlattrdef("minlength")}}</h3> + +<p>Le nombre minimal de caractères (en nombre de points de code UTF-16) qui doivent être saisis dans le champ de l'URL. Cette valeur doit être un entier positif ou nul. Si aucune valeur n'est fournie pour <code>minlength</code> ou qu'une valeur invalide est fournie, le champ n'aura pas de longueur minimale. La valeur de cet attribut doit être inférieure ou égale à celle de l'attribut <code>maxlength</code>.</p> + +<p>La valeur <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne respectera pas la validation</a> si la longueur du texte saisi est inférieure à cet attribut.</p> + +<h3 id="htmlattrdef(pattern)">{{htmlattrdef("pattern")}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}</p> + +<p>Voir <a href="#format">la section ci-après sur le format</a> pour plus de détails et d'exemples.</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "spellcheck", 0, 1, 2)}}</p> + +<h2 id="Attributs_non-standard">Attributs non-standard</h2> + +<p>Il est possible (mais déconseillé) d'utiliser ces attributs non-standard sur les champs de saisie d'URL.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribut</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("autocorrect")}}</code></td> + <td>Autorise ou non la correction automatique lors de l'édition de ce champ. <strong>Uniquement pris en charge par Safari.</strong></td> + </tr> + <tr> + <td><code>{{anch("mozactionhint")}}</code></td> + <td>Une chaîne de caractères qui indique le type d'action qui sera effectuée lorsque l'utilisateur appuiera sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition du champ. Cet attribut est destiné à fournir un libellé équivoque pour la touche du clavier virtuel présenté à l'utilisateur.<strong> Uniquement pris en charge par Firefox pour Android.</strong></td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdef(autocorrect)_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p> + +<h3 id="htmlattrdef(mozactionhint)_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p> + +<h2 id="Utiliser_des_champs_de_saisie_d'URL">Utiliser des champs de saisie d'URL</h2> + +<p>Lorsqu'on crée un champ avec un attribut <code>type</code> qui vaut <code>"url"</code>, on obtient une validation automatique qui vérifie que le format de la valeur respecte bien celui d'une URL. Cela permet par exemple d'éviter des cas où des utilisateurs laissent une coquille dans la saisie d'une adresse d'un site web.</p> + +<p>Toutefois, ce mécanisme ne vérifie pas que l'URL saisie existe bien ou correspond à l'utilisateur. Seule une vérification de format est effectuée.</p> + +<div class="warning"> +<p><strong>Attention !</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</p> +</div> + +<h3 id="Un_simple_champ">Un simple champ</h3> + +<p>Actuellement, l'ensemble des navigateurs implémentent ce type de champ comme un champ texte qui dispose de fonctionnalités de validation basiques. Dans sa forme la plus simple, un champ de saisie d'URL ressemblera à :</p> + +<pre class="brush: html"><input id="monURL" name="monURL" type="url"></pre> + +<p>{{EmbedLiveSample('Un_simple_champ', 600, 40)}}</p> + +<p>La valeur du champ est considérée valide lorsqu'elle est vide ou qu'il s'agit d'une URL correctement formatée, autrement elle est invalide. Si on ajoute l'attribut {{htmlattrxref("required", "input")}}, la valeur vide n'est plus valide, il est nécessaire de saisir une valeur.</p> + +<p>Ainsi, si l'utilisateur saisit l'URL <code>http://www.example.com</code>, voici ce qui sera envoyé vers le serveur : <code>monURL=http%3A%2F%2Fwww.example.com</code> (on notera la façon dont certains caractères sont échappés).</p> + +<h3 id="Textes_indicatifs_-_placeholders">Textes indicatifs <em>- placeholders</em></h3> + +<p>Il est parfois utile de fournir une indication sur le type de donnée attendu. Sur les pages pour lesquelles la place est restreinte, on ne peut pas se servir de l'étiqutte du champ. On peut alors utiliser un texte indicatif qui apparaît lorsque la valeur du champ est vide et qui est retiré dès que l'utilisateur saisit quelqu chose. Pour cela, on utilise l'attribut <code>placeholder</code>.</p> + +<p>Dans l'exemple qui suit, le contrôle contient le texte indicatif <code>"http://www.example.com"</code>. Dans le résultat, vous pouvez voir comment ce texte disparaît/réapparaît lorsqu'on saisit une valeur dans le contrôle.</p> + +<pre class="brush: html"><input id="monURL" name="monURL" type="url" + placeholder="http://www.example.com"></pre> + +<p>{{EmbedLiveSample('Textes_indicatifs_-_placeholders', 600, 40)}}</p> + +<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3> + +<p>Il est possible de contrôler la taille physique de la boîte utilisée pour le contrôle. On peut également contraindre la taille de la valeur saisie dans le champ (entre X et Y caractères par exemple).</p> + +<h4 id="La_taille_physique">La taille physique</h4> + +<p>C'est l'attribut {{htmlattrxref("size", "input")}} qui permet de contrôler la taille de la boîte utilisée. La valeur de cet attribut correspond au nombre de caractères qui seront affichés en même temps dans la boîte. Dans l'exemple suivant, on souhaite que la boîte de saisie mesure 30 caractères de large :</p> + +<pre class="brush: html"><input id="monURL" name="monURL" type="url" + size="30"></pre> + +<p>{{EmbedLiveSample('La_taille_physique', 600, 40)}}</p> + +<h4 id="La_longueur_de_la_valeur">La longueur de la valeur</h4> + +<p>L'attribut <code>size</code> ne limite pas la valeur qui peut être saisie mais uniquement l'affichage de celle-ci. Pour indiquer une longueur (exprimée en nombre de caractères) minimale d'URL à saisir, on pourra utiliser l'attribut {{htmlattrxref("minlength", "input")}}. De même, l'attribut {{htmlattrxref("maxlength", "input")}} indique la longueur maximale d'une URL qui peut être saisie dans le contrôle.</p> + +<p>Dans l'exemple qui suit, on affiche une boîte de saisie qui mesure 30 caractères de large et on souhaite que l'URL soit plus longue que 10 caractères et moins longue que 80.</p> + +<pre class="brush: html"><input id="monURL" name="monURL" type="url" + size="30" minlength="10" maxlength="80"> +</pre> + +<p>{{EmbedLiveSample("La_longueur_de_la_valeur", 600, 40)}}</p> + +<div class="note"> +<p><strong>Note</strong> : Ces attributs jouent un rôle lors de la validation. Si la valeur saisie est plus courte que la longueur minimale indiquée ou plus grande que la longueur maximale indiquée, alors elle seera considérée comme invalide. De plus, la plupart des navigateurs ne permettent pas de saisir une valeur plus grande que la longueur maximale indiquée avec <code>maxlength</code>.</p> +</div> + +<h3 id="Fournir_des_valeurs_par_défaut">Fournir des valeurs par défaut</h3> + +<p>On peut fournir une valeur par défaut grâce à l'attribut {{htmlattrxref("value", "input")}} :</p> + +<div id="Default_value"> +<pre class="brush: html"><input id="monURL" name="monURL" type="url" + value="http://www.example.com"></pre> +</div> + +<p>{{EmbedLiveSample("Fournir_des_valeurs_par_défaut", 600, 40)}}</p> + +<h4 id="Fournir_des_suggestions">Fournir des suggestions</h4> + +<p>On peut également fournir une liste d'options parmi lesquelles l'utilisateur peut choisir via l'attribut {{htmlattrxref("list", "input")}}. Cette liste ne limite pas l'utilisateur à ces choix mais permet de choisir certaines URL fréquemment utilisées plus facilement. Cette liste peut également être utilisée par l'attribut {{htmlattrxref("autocomplete", "input")}}. La valeur de l'attribut <code>list</code> est un identifiant d'un élément {{HTMLElement("datalist")}} qui contient autant d'éléments {{HTMLElement("option")}} que de valeurs suggérées. La valeur de l'attribut <code>value</code> de chacun de ces éléments <code><option></code> correspondra à la valeur qui sera suggérée dans le champ de saisie.</p> + +<pre class="brush: html"><input id="monURL" name="monURL" type="url" + list="defaultURLs"> + +<datalist id="defaultURLs"> + <option value="http://www.example.com"> + <option value="https://www.example.com"> + <option value="http://www.example.org"> + <option value="https://www.example.org"> +</datalist></pre> + +<p>{{EmbedLiveSample("Fournir_des_suggestions", 600, 40)}}</p> + +<p>Avec cet élément {{HTMLElement("datalist")}} et les éléments {{HTMLElement("option")}} associés, le navigateur affichera les valeurs proposées sous la forme d'une liste déroulante (voire sous un autre format). Au fur et à mesure que l'utilisateur saisit dans le champ, la liste se réduit pour ne contenir que les valeurs correspondantes (et ce jusqu'à ce que l'utilisateur saisisse une autre valeur ou sélectionne une valeur parmi la liste).</p> + +<h2 id="Validation">Validation</h2> + +<p>Il existe deux niveaux de validation pour les contrôles de type <code>"url"</code>. Tout d'abord, le contrôle natif, toujours présent qui s'asssure que la valeur correspond à une URL bien formée. Ensuite, on peut ajouter des options supplémentaires pour personnaliser le format de l'URL attendue.</p> + +<div class="warning"> +<p><strong>Attention !</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</p> +</div> + +<h3 id="Validation_simple">Validation simple</h3> + +<p>Les navigateurs qui prennent en charge le type <code>"url"</code> fournissent automatiquement un mécanisme de validation pour s'assurer que la valeur saisie correspond à une URL bien formée.</p> + +<h3 id="Rendre_le_champ_URL_obligatoire">Rendre le champ URL obligatoire</h3> + +<p>Comme vu ci-avant, on peut rendre la saisie de l'URL obligatoire avec l'attribut {{htmlattrxref("required", "input")}} :</p> + +<div id="Default_value"> +<pre class="brush: html"><form> + <input id="monURL" name="monURL" type="url" required> + <button>Envoyer</button> +</form></pre> +</div> + +<p>{{EmbedLiveSample("Rendre_le_champ_URL_obligatoire", 600, 40)}}</p> + +<p>Vous pouvez essayer d'envoyer le formulaire précédent sans valeur saisie et voir le résultat obtenu.</p> + +<h3 id="Utiliser_un_format_particulier"><a id="format" name="format">Utiliser un format particulier</a></h3> + +<p>S'il faut restreindre l'URL plus fortement, on peut utiliser l'attribut {{htmlattrxref("pattern", "input")}} afin d'indiquer une <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">expression rationnelle</a> que la valeur saisie doit respecter afin d'être valide.</p> + +<p>Prenons comme exemple la construction d'un formulaire de support pour les employés de MaBoîte Inc. Ce formulaire permet d'indiquer à un service une des pages du site interne qui pose problème. Dans l'exemple simplifié, l'utilisateur indique l'URL de la page problématique ainsi qu'un message descriptif. Ici, on souhaite que l'URL saisit ne soit valide que si elle correspond au domaine <code>maboite</code>.</p> + +<p>Les contrôles de type <code>"url"</code> utilisant la validation native pour vérifier que c'est une URL bien formée et une validation spécifique via l'attribut {{htmlattrxref("pattern", "input")}}, on peut implémenter cette contrainte facilement :</p> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; + } + + input[type="number"] { + width: 100px; + } + + input + span { + padding-right: 30px; + } + + input:invalid+span:after { + position: absolute; content: '✖'; + padding-left: 5px; + } + + input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; + }</pre> +</div> + +<pre class="brush: html"><form> + <div> + <label for="myURL">Veuillez saisir l'adresse de la page problématique:</label> + <input id="myURL" name="myURL" type="url" + required pattern=".*\.maboite\..*" + title="L'URL doit être sur le domaine maboite."> + <span class="validity"></span> + </div> + <div> + <label for="myComment">Quel est le problème ?</label> + <input id="myComment" name="myComment" type="text" + required> + <span class="validity"></span> + </div> + <div> + <button>Envoyer</button> + </div> +</form> +</pre> + +<p>{{EmbedLiveSample("Utiliser_un_format_particulier", 700, 150)}}</p> + +<p>Si on étudie le contrôle, on peut voir qu'on commence par utiliser l'attribut {{htmlattrxref("required", "input")}} afin de rendre le champ obligatoire.</p> + +<p>Ensuite, on utilise l'attribut <code>pattern</code> avec l'expression rationnelle <code>".*\.maboite\..*"</code>. Cet expression rationnelle indique que la chaîne de caractères saisie doit contenir des caractères quelconques suivis d'un point, suivi de "maboite", suivi d'un point, suivi de n'importe quels caractères.</p> + +<p>Cette expression rationnelle est loin d'être parfaite mais suffit pour les besoins de cet exemple.</p> + +<p>Il est conseillé d'utiliser l'attribut {{htmlattrxref("title")}} quand on utilise l'attribut <code>pattern</code>. Dans ce cas, l'attribut <code>title</code> doit alors décrire l'expression rationnelle (et l'explication de la contrainte) plutôt que le rôle du champ. En effet, la valeur contenue dans <code>title</code> pourrait alors être affichée ou vocalisée comme message d'erreur. Un navigateur pourra ainsi affiche un message : "Le texte saisi ne respecte pas la format souhaité." suivi du texte contenu dans <code>title</code>. Si la valeur de <code>title</code> est simplement "URL", le message complet obtenu serait "Le texte saisi ne respecte pas la format souhaité. URL" (ce qui n'est pas très parlant).</p> + +<p>C'est pourquoi nous avons écrit "L'URL doit être sur le domaine maboite" qui est plus détaillé.</p> + +<div class="note"> +<p><strong>Note </strong>: Si vous rencontrez des problèmes avec ces expressions rationnelles et qu'elles ne semblent pas fonctionner correctement, vérifiez la console de votre navigateur. Il est possible que des messages d'erreur y soient affichés et puissent vous aider à diagnostiquer le problème.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<p>En plus des exemples précédents, vous pouvez consulter <a href="https://github.com/mdn/learning-area/blob/master/html/forms/url-example/index.html">l'exemple de validation de format sur GitHub</a> (et voir <a href="https://mdn.github.io/learning-area/html/forms/url-example/">le résultat <em>live</em></a>).</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente une URL ou une chaîne de caractères vide.</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{event("change")}} et {{event("input")}}</td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} et {{htmlattrxref("size", "input")}}</td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>list</code>, <code>value</code>, <code>selectionEnd</code>, <code>selectionDirection</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</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#url-state-(type=url)', '<input type="url">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#url-state-typeurl', '<input type="url">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName("URL", "#urls", "URL syntax")}}</td> + <td>{{Spec2("URL")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-url")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Guide sur les formulaires HTML</a></li> + <li>{{HTMLElement("input")}}</li> + <li><code><a href="/fr/docs/Web/HTML/Element/input/tel"><input type="tel"></a></code></li> + <li><code><a href="/fr/docs/Web/HTML/Element/input/email"><input type="email"></a></code></li> +</ul> diff --git a/files/fr/web/html/element/input/week/index.html b/files/fr/web/html/element/input/week/index.html new file mode 100644 index 0000000000..64749c5ad3 --- /dev/null +++ b/files/fr/web/html/element/input/week/index.html @@ -0,0 +1,389 @@ +--- +title: <input type="week"> +slug: Web/HTML/Element/Input/week +tags: + - Element + - Formulaires + - HTML + - Input + - Reference +translation_of: Web/HTML/Element/input/week +--- +<div>{{HTMLRef}}</div> + +<p>Les éléments {{htmlelement("input")}} dont l'attribut <code>type</code> vaut <code><strong>week</strong></code> permettent de créer des champs de saisie où l'on peut saisir une année et le numéro de la semaine pendant cette année (allant de 1 à 52 ou 53, suivant la norme <a href="https://fr.wikipedia.org/wiki/ISO_8601#Num%C3%A9ro_de_semaine">ISO 8601</a>).</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-week.html", "tabbed-shorter")}}</div> + +<div 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> !</div> + +<p>L'interface utilisateur offerte par un tel contrôle varie en fonction des navigateurs. Au moment où nous écrivons ces lignes, seuls Chrome/Opera et Edge prennent en charge cette fonctionnalité. Pour les navigateurs qui ne l'implémentent pas, l'élément est interprété comme un élément <code><a href="/fr/docs/Web/HTML/Element/input/text"><input type="text"></a></code>.</p> + +<p>Sous Chrome/Opera, le contrôle <code>week</code> fournit des emplacements pour les deux valeurs. Un calendrier est affiché afin de sélectionner plus faiclement la semaine et l'année. Un bouton avec une croix permet de supprimer la valeur saisie dans le contrôle.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15409/week-control-chrome.png" style="display: block; height: 235px; margin: 0px auto; width: 320px;"></p> + +<p>Pour Edge, le contrôle associé à <code>month</code> est plus élaboré et se compose de deux listes qu'on peut faire défiler séparement pour la semaine d'une part et l'année d'autre part.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15411/week-control-edge.png" style="display: block; height: 391px; margin: 0px auto; width: 227px;"></p> + +<h2 id="Valeur">Valeur</h2> + +<p>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de la semaine et de l'année saisies dans le champ. Le format précis de représentation d'une semaine donnée est décrit dans <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_semaines">l'article sur les formats des dates et heures en HTML</a>.</p> + +<p>Il est possible de définir une valeur par défaut grâce à l'attribut {{htmlattrxref("value", "input")}} de la façon suivante :</p> + +<pre class="brush: html"><label for="week">À quelle semaine souhaiteriez-vous démarrer ?</label> +<input id="week" type="week" name="week" value="2017-W01"></pre> + +<p>{{EmbedLiveSample('Valeur', 600, 60)}}</p> + +<p>On notera que le format affiché peut être différent de la valeur réellement utilisée pour l'attribut <code>value</code>. Cette dernière respecte toujours le format <code>yyyy-Www</code> (soit les quatre chiffres de l'année, suivi d'un tiret, suivi d'un W majuscule suivi des deux chiffres pour la semaine). Dans l'exemple précédent par exemple, l'interface utilisateur pourra afficher <code>Semaine 01 de l'année 2017</code> mais la valeur envoyée via le formulaire aura toujours la structure <code>week=2017-W01</code>.</p> + +<p>Il est également possible d'accéder à la valeur ou de la définir en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}}. Par exemple :</p> + +<pre class="brush: js">var weekControl = document.querySelector('input[type="week"]'); +weekControl.value = '2017-W45';</pre> + +<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> + +<p>En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les champs de semaine gèrent les attributs suivants :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribut</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("max")}}</code></td> + <td>La semaine (avec l'année) la plus tardive qui est considérée comme valide.</td> + </tr> + <tr> + <td><code>{{anch("min")}}</code></td> + <td>La semaine (avec l'année) la plus tôt qui est considérée comme valide.</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>Un booléen qui indique si l'utilisateur peut modifier la valeur du champ.</td> + </tr> + <tr> + <td><code>{{anch("step")}}</code></td> + <td>Le pas qui est utilisé pour incrémenter la valeur du champ. Cet incrément est utilisé par l'interface utilisateur et également pour vérifier la valeur.</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3> + +<p>La semaine la plus tardive, indiquée avec l'année, sous la forme d'une chaîne de caractères au format <code>"yyyy-Www"</code>. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est supérieure à cette date, <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">la validation échouera</a>. Si la valeur fournie n'est pas une chaîne de caractères au format correct, aucun maximum ne sera fixé pour la valeur du contrôle.</p> + +<p>Cette valeur doit être supérieure ou égale à celle indiquée par l'attribut <code>min</code>.</p> + +<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3> + +<p>La semaine la plus tôt, indiquée avec l'année, sous la forme d'une chaîne de caractères au format <code>"yyyy-Www"</code>. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est antérieure à cette date, <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">la validation échouera</a>. Si la valeur fournie pour cet attribut n'est pas une chaîne de caractères au format correct, aucun minimum ne sera fixé pour la valeur du contrôle.</p> + +<p>Cette valeur doit être inférieure ou égale à celle indiquée par l'attribut <code>max</code>.</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}</p> + +<p>Pour les champs de type <code>week</code>, la valeur de l'attribut <code>step</code> est indiquée en nombre de semaine et le facteur de multiplication est 604 800 000 (qui correspond au nombre de millisecondes dans une semaine). Par défaut, la valeur de <code>step</code> est 1. La base à partir de laquelle incrémenter par défaut est -259 200 000 qui correspond à la première semaine de 1970 (<code>"1970-W01"</code>).</p> + +<p><em>À l'heure où ces lignes sont écrites, la signification de la valeur <code>"any"</code> pour l'attribut <code>step</code> pour les champs <code>week</code> n'est pas certaine. Cette information sera mise à jour dès que possible.</em></p> + +<h2 id="Utiliser_les_contrôles_de_type_week">Utiliser les contrôles de type <code>week</code></h2> + +<p>Ces contrôles peuvent être pratiques selon certains aspects : ils permettent de sélectionner une semaine de façon simple, les données envoyées au serveur sont normalisées quelle que soit la langue ou le navigateur de l'utilisateur. Toutefois, en raison de la prise en charge des navigateurs actuellement limitée, <code><input type="week"></code> pose quelques défis.</p> + +<p>Nous verrons par la suite quelques cas d'utilisation simples puis complexes avant de voir comment gérer l'hétérogénéité des différents navigateurs (cf. {{anch("Gérer la prise en charge des navigateurs")}}).</p> + +<h3 id="Utilisation_simple">Utilisation simple</h3> + +<p>La forme la plus simple de <code><input type="week"></code> se compose d'un élément <code><input></code> et d'un élément {{htmlelement("label")}} :</p> + +<pre class="brush: html"><form> + <label for="week">À quelle semaine souhaiteriez-vous commencer ?</label> + <input id="week" type="week" name="week"> +</form></pre> + +<p>{{EmbedLiveSample('Utilisation_simple', 600, 40)}}</p> + +<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3> + +<p><code><input type="week"></code> ne prend pas en charge des attributs de dimensionnement (tel que {{htmlattrxref("size", "input")}}). Il sera nécessaire d'utiliser <a href="/fr/docs/Web/CSS">CSS</a> si on a besoin de modifier la taille du contrôle.</p> + +<h3 id="Utiliser_l'attribut_step">Utiliser l'attribut <code>step</code></h3> + +<p>En théorie, l'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être employé pour définir l'incrément minimal entre chaque semaine sélectionnable. Toutefois, il ne semble avoir encore aucun effet pour les navigateurs qui prennent en charge ce contrôle.</p> + +<h2 id="Validation">Validation</h2> + +<p>Par défaut, <code><input type="week"></code> n'applique aucune validation aux valeurs saisies. Les interfaces utilisateurs affichées ne permettent pas de saisir autre chose qu'un couple semaine / année. Toutefois, il est toujours possible de ne sélectionner aucune valeur, on peut également vouloir restreindre la plage de semaines qui peuvent être sélectionnées.</p> + +<h3 id="Paramétrer_des_semaines_minimum_et_maximum">Paramétrer des semaines minimum et maximum</h3> + +<p>Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} peuvent être utilisés afin de restreindre les semaines qui peuvent être sélectionnées par l'utilisateur. Dans l'exemple qui suit, on indique une valeur minimale correspondant à la première semaine de 2017 et une valeur maximale correspondant à la dernière semaine de 2017 :</p> + +<pre class="brush: html"><form> + <label for="week">À quelle semaine souhaiteriez-vous commencer ?</label> + <input id="week" type="week" name="week" + min="2017-W01" max="2017-W52"> + <span class="validity"></span> +</form></pre> + +<p>{{EmbedLiveSample('Paramétrer_des_semaines_minimum_et_maximum', 600, 40)}}</p> + +<p>Voici la feuille de style utilisée dans l'exemple précédent. Vous pourrez noter qu'on utilise les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que la valeur saisie est valide ou non. Les icônes associées sont placées dans un élément {{htmlelement("span")}} situé à côté du champ et non sur le champ même car, pour Chrome, le contenu généré dynamiquement avec les pseudo-éléments serait placé dans le contrôle du formulaire et ne pourrait être mis en forme efficacement.</p> + +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> + +<p>Pour les navigateurs qui prennent en charge ce contrôle et ces fonctionnalités, on ne pourra sélectionner que les semaines de l'année 2017.</p> + +<h3 id="Rendre_la_valeur_obligatoire">Rendre la valeur obligatoire</h3> + +<p>On peut aussi utiliser l'attribut {{htmlattrxref("required", "input")}} afin que la saisie de la valeur soit obligatoire. Pour les navigateurs qui prennent en charge cette fonctionnalité, une erreur sera affichée lorsqu'on tentera d'envoyer un formulaire avec un champ vide pour une semaine.</p> + +<p>Prenons un autre exemple (où la période a été restreinte comme précédemment) et où le champ est obligatoire :</p> + +<pre class="brush: html"><form> + <div> + <label for="week">À quelle semaine souhaiteriez-vous commencer ?</label> + <input id="week" type="week" name="week" + min="2017-W01" max="2017-W52" required> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="Envoyer le formulaire"> + </div> +</form></pre> + +<p>Si vous essayez de soumettre le formulaire sans aucune valeur, le navigateur affichera une erreur. Vous pouvez tester avec l'exemple qui suit :</p> + +<p>{{EmbedLiveSample('Rendre_la_valeur_obligatoire', 600, 120)}}</p> + +<p>Voici une capture d'écran du résultat obtenu si votre navigateur ne prend pas en charge cette fonctionnalité :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15415/week-validation-chrome.png" style="display: block; height: 85px; margin: 0px auto; width: 473px;"></p> + +<div class="warning"> +<p><strong>Important </strong>: la validation des données du formulaire HTML par le navigateur ne se substitue pas à la validation des données reçues côté serveur. En effet, il est tout à fait possible pour un utilisateur de modifier le HTML côté client et de passer outre les contraintes normalement appliquées. Il est également possible d'envoyer des données au serveur sans passer par le formulaire. Ne pas vérifier les données reçues côté serveur expose à des risques d'erreur voire d'attaques.</p> +</div> + +<h2 id="Gérer_la_prise_en_charge_des_navigateurs">Gérer la prise en charge des navigateurs</h2> + +<p>Comme évoqué plus haut, le principal problème associé à ce type de contrôle est l'absence de prise en charge par Safari, Firefox (hors mobile) et les anciennes versions d'Internet Explorer (pré-Edge).</p> + +<p>Les plateformes mobiles comme Android et iOS fournissent un contrôle natif à l'ergonomie tactile adaptée. Voici par exemple le sélecteur <code>week</code> sur Chrome pour Android :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15413/week-chrome-android.png" style="display: block; margin: 0 auto;"></p> + +<p>Les navigateurs qui ne prennent pas en charge ce type de contrôle l'interprètent comme un champ texte mais cela crée des problèmes de cohérence tant au niveau de l'ergonomie qu'au niveau de la représentation des données.</p> + +<p>C'est ce deuxième aspect qui peut poser le plus de problème. Comme nous l'avons mentionné avant, un contrôle <code>week</code> verra sa valeur normalisée pour respecter le format <code>yyyy-Www</code>. En revanche, pour un champ texte non reconnu par le navigateur, les utilisateurs pourraient saisir des semaines selon une variété de formats :</p> + +<ul> + <li><code>Première semaine de 2017</code></li> + <li><code>Du 2 au 8 janvier 2017</code></li> + <li><code>2017-W01</code></li> + <li>etc.</li> +</ul> + +<p>Si on souhaite gérer cette saisie de façon compatible entre les différents navigateurs, on utilisera alors deux contrôles distincts (représentés par des éléments {{htmlelement("select")}}) qui représenteront respectivement le numéro de la semaine et l'année.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Dans l'exemple qui suit, on construit deux ensembles d'éléments pour sélectionner une semaine : un sélecteur natif avec <code><input type="week"></code> et un second composé de deux éléments {{htmlelement("select")}} qui permettent de choisir la semaine et l'année sur les navigateurs qui ne prennent pas en charge le contrôle natif.</p> + +<p>{{EmbedLiveSample('Exemples', 600, 140)}}</p> + +<p>Voici le code HTML utilisé :</p> + +<pre class="brush: html"><form> + <div class="nativeWeekPicker"> + <label for="week">À quelle semaine souhaiteriez-vous commencer ?</label> + <input id="week" type="week" name="week" + min="2017-W01" max="2018-W52" required> + <span class="validity"></span> + </div> + <p class="fallbackLabel">À quelle semaine souhaiteriez-vous commencer ?</p> + <div class="fallbackWeekPicker"> + <div> + <span> + <label for="week">Semaine :</label> + <select id="fallbackWeek" name="week"> + </select> + </span> + <span> + <label for="year">Année :</label> + <select id="year" name="year"> + <option value="2017" selected>2017</option> + <option value="2018">2018</option> + </select> + </span> + </div> + </div> +</form></pre> + +<p>On génère les valeurs des semaines dynamiquement.</p> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<p>Dans le fragment de code JavaScript qui suit, on montre comment détecter si la fonctionnalité est prise en charge ou non. Pour cela, on crée un nouvel élément {{htmlelement("input")}} et on règle son <code>type</code> sur <code>week</code> puis on vérifie immédiatement la valeur de son type. Les navigateurs qui ne prennent pas en charge la fonctionnalité renverront <code>text</code>. Si c'est le cas, on masque le sélecteur natif et on affiche le sélecteur alternatif composé des deux éléments {{htmlelement("select")}}.</p> + +<pre class="brush: js">// On définit certaines variables +var nativePicker = document.querySelector('.nativeWeekPicker'); +var fallbackPicker = document.querySelector('.fallbackWeekPicker'); +var fallbackLabel = document.querySelector('.fallbackLabel'); + +var yearSelect = document.querySelector('#year'); +var weekSelect = document.querySelector('#fallbackWeek'); + +// À l'état initial, on masque le sélecteur alternatif +fallbackPicker.style.display = 'none'; +fallbackLabel.style.display = 'none'; + +// On teste si le sélecteur natif se transforme en +// contrôle de saisie de texte ou non +var test = document.createElement('input'); +test.type = 'week'; +// Si c'est le cas, on exécute le code dans le bloc +// conditionnel if() {} +if(test.type === 'text') { + // On masque alors le sélecteur natif et + // on affiche le sélecteur alternatif + nativePicker.style.display = 'none'; + fallbackPicker.style.display = 'block'; + fallbackLabel.style.display = 'block'; + + // On ajoute les semaines dynamiquement + populateWeeks(); +} + +function populateWeeks() { + // On ajoute 52 semaines grâce à une boucle + for(var i = 1; i <= 52; i++) { + var option = document.createElement('option'); + option.textContent = (i < 10) ? ("0" + i) : i; + weekSelect.appendChild(option); + } +}</pre> + +<div class="note"> +<p><strong>Note :</strong> Attention, certaines années peuvent contenir 53 semaines ! (cf. <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">cet article Wikipédia</a>) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles.</p> +</div> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente une semaine et une année ou la chaîne vide.</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}.</td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} et {{htmlattrxref("step", "input")}}.</td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>, <code>list</code>.</td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.</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#week-state-(type=week)', '<input type="week">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-week")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'élément générique {{HTMLElement("input")}}</li> + <li>L'interface du DOM qui permet de le manipuler {{domxref("HTMLInputElement")}}</li> + <li><a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">Les formats de date et d'heure utilisés en HTML</a></li> + <li><code><a href="/fr/docs/Web/HTML/Element/input/datetime-local"><input type="datetime-local"></a></code>, <code><a href="/fr/docs/Web/HTML/Element/input/date"><input type="date"></a></code>, <code><a href="/fr/docs/Web/HTML/Element/input/time"><input type="time"></a></code>, and <code><a href="/fr/docs/Web/HTML/Element/input/month"><input type="month"></a></code></li> +</ul> diff --git a/files/fr/web/html/element/ins/index.html b/files/fr/web/html/element/ins/index.html new file mode 100644 index 0000000000..ceadaa98df --- /dev/null +++ b/files/fr/web/html/element/ins/index.html @@ -0,0 +1,145 @@ +--- +title: <ins> +slug: Web/HTML/Element/ins +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/ins +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><ins></code></strong> représente un fragment de texte qui a été ajouté dans un document.</p> + +<div class="blockIndicator note"> +<p><strong>Note :</strong> À l'inverse, on pourra utiliser l'élément {{HTMLElement("del")}} afin de représenter un fragment de texte supprimé.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/tabbed/ins.html", "tabbed-standard")}}</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> + +<h2 id="Attributs">Attributs</h2> + +<p>On peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> pour cet élément.</p> + +<dl> + <dt>{{htmlattrdef("cite")}}</dt> + <dd>Cet attribut définit l'URI d'une ressource qui explique la modification (par exemple, un compte-rendu de réunion ou un lien vers un rapport).</dd> + <dt>{{htmlattrdef("datetime")}}</dt> + <dd>Cet attribut indique la date et l'heure de la modification. La valeur de cet attribut doit être <a href="https://www.w3.org/TR/2011/WD-html5-20110525/common-microsyntaxes.html#valid-date-string-with-optional-time">une date valide avec une chaîne de caractères optionnelle pour l'heure</a>. Si la valeur ne peut pas être analysée comme une date, l'indication temporelle sera absente de l'élément. Voir <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">l'article sur les formats</a> pour la représentation d'<a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates">une date seule</a> ou d'<a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates_et_heures_locales">une date avec une heure</a>.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Le texte <ins>Ce texte a été ajouté</ins> original.</p></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p> + +<h2 id="Accessibilité">Accessibilité</h2> + +<p>Par défaut, la plupart des outils d'assistance n'annoncent pas la présence de l'élément <code>ins</code>. On peut le rendre annonçable via la propriété CSS {{cssxref("content")}} et grâce aux pseudo-éléments {{cssxref("::before")}} et {{cssxref("::after")}}.</p> + +<pre>ins::before, +ins::after { + clip-path: inset(100%); + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +ins::before { + content: " [Début de l'insertion]"; +} + +ins::after { + content: " [Fin de l'insertion] "; +} +</pre> + +<p>Certaines personnes qui utilisent des lecteurs d'écran désactivent sciemment ces annonces pour éviter une verbosité trop importante. Il est donc important de ne pas abuser de cette technique et de ne l'appliquer qu'à des situations où il est nécessaire de comprendre que du contenu a été inséré.</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/"><em>Short note on making your mark (more accessible) | The Paciello Group</em> (en anglais)</a></li> + <li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html"><em>Tweaking Text Level Styles | Adrian Roselli</em> (en anglais)</a></li> +</ul> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">Contenu phrasé</a> ou <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Mod%C3%A8le_de_contenu_transparent">Contenu transparent</a>.</td> + </tr> + <tr> + <th scope="row">Omission de balise</th> + <td>Aucune, la balise ouvrante et la balise fermante doivent être présentes.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLModElement")}}</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', 'edits.html#the-ins-element', '<ins>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'edits.html#the-ins-element', '<ins>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.4', '<ins>')}}</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> + +<p>{{Compat("html.elements.ins")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("del")}} qui permet d'indiquer la suppression d'un fragment dans un document.</li> +</ul> diff --git a/files/fr/web/html/element/isindex/index.html b/files/fr/web/html/element/isindex/index.html new file mode 100644 index 0000000000..fc1cfc8f62 --- /dev/null +++ b/files/fr/web/html/element/isindex/index.html @@ -0,0 +1,70 @@ +--- +title: <isindex> +slug: Web/HTML/Element/isindex +tags: + - Déprécié + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/isindex +--- +<div>{{Obsolete_header}}{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><isindex></code></strong> est un élément obsolète qui permet de placer un champ sur une page afin d'effectuer des recherches dans le document. <code><isindex></code> devait permettre de saisir une ligne de texte pour une requête, à la suite de cette saisie, le serveur renvoyait une liste de pages qui correspondait à la requête. La prise en charge de cet élément dépendait du navigateur et du serveur.</p> + +<p><code><isindex></code> est un élément déprécié depuis HTML 4.01 car on peut obtenir le même comportement grâce à un formulaire HTML (cf. {{HTMLElement("form")}}). Tous les navigateurs ont désormais retiré <code><isindex></code> comme élément (<a href="https://html.spec.whatwg.org/#non-conforming-features">ce dernier est classé comme une fonctionnalité non-conforme dans le standard WHATWG</a>).</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme les autres éléments HTML, cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("prompt")}}</dt> + <dd>La valeur de cet attribut sera le texte affiché dans le champ de saisie avant que l'utilisateur y saisisse un texte.</dd> + <dt>{{htmlattrdef("action")}}</dt> + <dd>Cet atttribut peut être utilisé afin d'envoyer la requête vers une URL différente. Cet attribut n'est pas défini par le W3C.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><isindex prompt="Rechercher…" /></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<h2 id="Historique">Historique</h2> + +<p>En juin 1992, Dan Connolly indiquant <a class="external text" href="https://web.archive.org/web/20160306083612/http://1997.webhistory.org/www.lists/www-talk.1992/0080.html" rel="nofollow">sa préférence</a> pour un autre type d'ancre par rapport à <code>isindex</code>.</p> + +<p>En novembre 1992, <a class="external text" href="https://lists.w3.org/Archives/Public/www-talk/1992NovDec/thread.html#31" rel="nofollow">les index sont plus considérés comme des liens que comme des documents</a>. Pour cette raison, différentes solutions sont proposées et l'ergonomie des formulaires est <a class="external text" href="https://lists.w3.org/Archives/Public/www-talk/1992NovDec/0039.html" rel="nofollow">mentionnée</a> en référence au navigateur Dynatext : « le navigateur affiche des boutons, les champs textuels, l'utilisateur remplit les champs puis clique sur OK et les résultats de la requête sont récupérés sous la forme d'un tableau de contenu ».</p> + +<p>Lors <a class="external text" href="https://lists.w3.org/Archives/Public/www-talk/1992NovDec/thread.html#42" rel="nofollow">d'une discussion en novembre 1992</a>, Kevin Hoadley <a class="external text" href="https://lists.w3.org/Archives/Public/www-talk/1992NovDec/0042.html" rel="nofollow">remet en cause</a> le besoin d'un élément <code>isindex</code> et propose de l'abandonné. Il propose d'utiliser un élément {{HTMLElement("input")}} (une idée également poussée par Steve Putz). Tim Berners-Lee <a class="external text" href="https://lists.w3.org/Archives/Public/www-talk/1992NovDec/0044.html" rel="nofollow">explique </a>alors que le but de <code>isindex</code> est de pouvoir agréger les résultats d'une recherche. Kevin <a class="external text" href="https://lists.w3.org/Archives/Public/www-talk/1992NovDec/0048.html" rel="nofollow">répond</a> alors qu'il n'apprécie pas le côté booléen de <code>isindex</code> et qu'il serait préférable d'avoir un système où tout puisse être recherché, il propose d'étendre le cadre du WWW avec une configuration httpd spécifique et de définir une correspondance entre les URI et les requêtes de recherche.</p> + +<p>En 2016, <a href="https://github.com/w3c/html/issues/240">le retrait de <code>isindex</code> de la spécification</a> est proposé.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<ul> + <li><a class="external text" href="https://www.w3.org/TR/html5" rel="nofollow">La spécification HTML5</a> indique que cet élément est <a class="external text" href="https://www.w3.org/TR/html5/obsolete.html#obsolete" rel="nofollow">non-conforme</a>.</li> + <li><code><a class="external text" href="https://www.w3.org/TR/html401/interact/forms.html#h-17.8" rel="nofollow">isindex</a></code> est un élément déprécié dans la spécification <a class="external text" href="https://www.w3.org/TR/html401/" rel="nofollow">HTML 4.01</a></li> + <li><code><a class="external text" href="https://www.w3.org/TR/REC-html32#isindex" rel="nofollow">isindex</a></code> dans la spécification <a class="external text" href="https://www.w3.org/TR/REC-html32" rel="nofollow">HTML 3.2</a></li> + <li><code><a class="external text" href="https://www.w3.org/MarkUp/html-spec/html-spec_5.html#SEC5.2.3" rel="nofollow">isindex</a></code> dans la spécification <a class="external text" href="https://www.w3.org/MarkUp/html-spec/html-spec_5.html" rel="nofollow">HTML 2.0</a> ainsi que la description du comportement <a class="external text" href="https://www.w3.org/MarkUp/html-spec/html-spec_7.html#SEC7.5" rel="nofollow">des requêtes et index</a> (HTML 2.0)</li> + <li><code><a class="external text" href="https://www.w3.org/MarkUp/HTMLPlus/htmlplus_51.html" rel="nofollow">isindex</a></code> dans la spécification <a class="external text" href="https://www.w3.org/MarkUp/HTMLPlus/htmlplus_1.html" rel="nofollow">HTML+</a></li> +</ul> + +<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.isindex")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("input")}}</li> + <li>{{HTMLElement("form")}}</li> +</ul> diff --git a/files/fr/web/html/element/kbd/index.html b/files/fr/web/html/element/kbd/index.html new file mode 100644 index 0000000000..4c24aebbf3 --- /dev/null +++ b/files/fr/web/html/element/kbd/index.html @@ -0,0 +1,221 @@ +--- +title: '<kbd> : l''élément de saisie clavier' +slug: Web/HTML/Element/kbd +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/kbd +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">L'élément HTML <code><strong><kbd></strong></code> représente une plage de texte en ligne indiquant la saisie de texte par l'utilisateur à partir d'un clavier, d'une saisie vocale ou de tout autre dispositif de saisie de texte. Par convention, le </span>{{Glossary("user agent")}}<span class="seoSummary"> rend par défaut le contenu d'un élément <code><kbd></code> en utilisant sa police monospace, bien que cela ne soit pas requis par le standard HTML.</span></p> + +<p><code><kbd></code> peut être imbriqué dans diverses combinaisons avec {{HTMLElement("samp")}} (Sample Output) pour représenter diverses formes d'entrée ou d'entrée basées sur des repères visuels.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/kbd.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> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément ne contient que <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> + +<p>D'autres éléments peuvent être utilisés en association avec <code><kbd></code> afin de représenter certains scénarios plus spécifiques :</p> + +<ul> + <li>Imbriquer un élément <code><kbd></code> dans un autre élément <code><kbd></code> représente une touche ou une unité de saisie au sein d'une saisie plus grande. Cf. {{anch("Représenter les frappes de touches dans une saisie")}} ci-après.</li> + <li>Imbriquer un élément <code><kbd></code> dans un élément {{HTMLElement("samp")}} permet d'indiquer que la saisie a été restituée (<em>echo</em>) à l'utilisateur. Cf. {{anch("Saisie restituée")}}, ci-après.</li> + <li>Imbriquer un élément <code><samp></code> dans un élément <code><kbd></code> permet de représenter des saisies basées sur le texte présenté par le système (cela peut être le nom de menus, d'éléments de menu ou le nom de bouttons affichés à l'écran). Cf. {{anch("Représenter les options de saisies à l'écran")}} ci-après..</li> +</ul> + +<div class="note"> +<p><strong>Note :</strong> Il est possible de définir un style pour surcharger la mise en forme par défaut du navigateur pour l'élément <code><kbd></code>. À ce titre, on gardera à l'esprit que les préférences et feuilles de style de l'utilisateur peuvent surcharger la mise en forme du site.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_simple">Exemple simple</h3> + +<pre class="brush: html"><p>Utilisez la commande <kbd>help macommande</kbd> afin de consulter + la documentation pour la commande "macommande".</p> +</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample('Exemple_simple', 350, 80)}}</p> + +<h3 id="Représenter_les_frappes_de_touches_dans_une_saisie">Représenter les frappes de touches dans une saisie</h3> + +<p>Afin de décrire une saisie constituée de plusieurs touches, on imbriquera plusieurs élément <code><kbd></code> dans un élément <code><kbd></code> englobant qui représente la saisie dans son ensemble. Chaque frappe clavier qui le constitue sera représentée par son propre élément <code><kbd></code>.</p> + +<h4 id="Sans_mise_en_forme">Sans mise en forme</h4> + +<p>Commençons par analyser le code HTML.</p> + +<h5 id="HTML">HTML</h5> + +<pre class="brush: html"><p> + Vous pouvez également créer un nouveau document + en utilisant le raccourci clavier + <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd>. +</p></pre> + +<p>On voit ici que l'ensemble de la combinaison de touches est contenue dans un élément <code><kbd></code> et que chaque touche possèe son propre élément.</p> + +<h5 id="Résultat_2">Résultat</h5> + +<p>Sans mise en forme particulière, voici le résultat obtenu :</p> + +<p>{{EmbedLiveSample("Sans_mise_en_forme", 650, 80)}}</p> + +<h4 id="Avec_style">Avec style</h4> + +<p>On peut alors ajouter un peu de CSS :</p> + +<h5 id="CSS">CSS</h5> + +<p>On ajoute un règle pour les les éléments <code><kbd></code> avec la classe <code>"key"</code> afin de représenter les touches d'un clavier :</p> + +<pre class="brush: css">kbd.key { + border-radius: 3px; + padding: 1px 2px 0; + border: 1px solid black; +}</pre> + +<h5 id="HTML_2">HTML</h5> + +<p>On met à jour le code HTML afin d'utiliser cette classe :</p> + +<pre class="brush: html"><p> + Vous pouvez également créer un nouveau document + en utilisant le raccourci clavier + <kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">N</kbd></kbd>. +</p></pre> + + + +<h5 id="Résultat_3">Résultat</h5> + +<p>{{EmbedLiveSample("Avec_style", 650, 80)}}</p> + +<h3 id="Saisie_restituée">Saisie restituée</h3> + +<p>En imbriquant un élément <code><kbd></code> dans un élément {{HTMLElement("samp")}}, on peut représenter une saisie qui est restituée à l'utilisateur (à la façon d'un écho).</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><p> + S'il se produit une erreur de syntaxe, cet outil affichera + la commande initialement saisie pour que vous la revoyez : +</p> +<blockquote> + <samp><kbd>custom-git ad mon-nouveau-fichier.cpp</kbd></samp> +</blockquote></pre> + +<h4 id="Résultat_4">Résultat</h4> + +<p>{{EmbedLiveSample("Saisie_restituée", 650, 100)}}</p> + +<h3 id="Représenter_les_options_de_saisies_à_l’écran">Représenter les options de saisies à l’écran</h3> + +<p>Imbriquer un élément <code><samp></code> dans un élément <code><kbd></code> représente une saisie basée sur du texte affiché par le système (par exemple des noms de menu, d'éléments de menu, des noms de boutons affichés à l'écran, etc.).</p> + +<h4 id="HTML_4">HTML</h4> + +<p>Ainsi, si on souhaite expliquer comment choisir l'option "Nouveau document" dans le menu "Fichier" avec un document HTML, on pourra écrire :</p> + +<pre class="brush: html"><p> + Pour créer un nouveau fichier, sélectionner l'option + <kbd><kbd><samp>Fichier</samp></kbd>⇒<kbd><samp>Nouveau + document</samp></kbd></kbd> dans le menu. +</p> + +<p> + N'oubliez pas de cliquer sur le bouton + <kbd><samp>OK</samp></kbd> afin de confirmer + que vous avez saisi le nom du nouveau fichier. +</p></pre> + +<p>On voit ici différentes imbrications. La description de l'option du menu est incluse dans un élément <code><kbd></code> qui contient le menu et le nom de l'élément du menu dans des éléments <code><kbd></code> et <code><samp></code>, indiquant que la saisie se fera par l'intermédiaire de quelque chose présenté à l'écran.</p> + +<h4 id="Résultat_5">Résultat</h4> + +<p>{{EmbedLiveSample("Représenter_les_options_de_saisies_à_l’écran", 650, 120)}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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%C3%A9gorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">Contenu phrasé</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%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}<br> + Jusqu'à Gecko 1.9.2 (Firefox 4), Firefox implémentait l'interface {{domxref("HTMLSpanElement")}} pour cet élément.</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', 'semantics.html#the-kbd-element', '<kbd>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-kbd-element', '<kbd>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Extension de l'élément afin d'inclure tout type de saisie de l'utilisateur (vocale, tactile, clavier).</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<kbd>')}}</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> + +<p>{{Compat("html.elements.kbd")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{htmlelement("code")}}</li> + <li>{{htmlelement("samp")}}</li> +</ul> diff --git a/files/fr/web/html/element/keygen/index.html b/files/fr/web/html/element/keygen/index.html new file mode 100644 index 0000000000..3884143745 --- /dev/null +++ b/files/fr/web/html/element/keygen/index.html @@ -0,0 +1,120 @@ +--- +title: <keygen> +slug: Web/HTML/Element/Keygen +tags: + - Déprécié + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/keygen +--- +<div>{{deprecated_header}}{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><keygen></code></strong> existe afin de faciliter la génération de clés et l'envoi d'une clé publique via un formulaire HTML. Le mécanisme utilisé est conçu pour être utilisé avec les systèmes de gestion de certificats électroniques. L'élément <code>keygen</code> est prévu pour être utilisé dans un formulaire HTML avec d'autres informations permettant de construire une requête de certificat, le résultat du processus étant un certificat signé.</p> + + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("autofocus")}}</dt> + <dd>Cet attribut booléen permet de spécifier si le contrôle doit être sélectionné lorsque la page est chargée, à moins que l'utilisateur n'outrepasse ce comportement en remplissant un autre champ. Un seul élément par document peut avoir l'attribut <code><strong>autofocus</strong></code>.</dd> + <dt>{{htmlattrdef("challenge")}}</dt> + <dd>Une chaîne de caractères correspondant à une requête/réponse qui est envoyée avec la clé publique. La valeur par défaut est une chaîne de caractères vide.</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>Cet attribut booléen indique qu'il est impossible d'interagir avec le contrôle.</dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd>L'élément form auquel cet élément est rattaché (son formulaire propriétaire). La valeur de cet attribut doit être l'identifiant (ou <code><strong>id</strong></code>) d'un élément {{HTMLElement("form")}} du même document. Si cet attribut n'est pas renseigné, l'élément doit être un descendant d'un élément {{HTMLElement("form")}}. Cet attribut permet de placer des éléments <code><keygen></code> au sein du document sans qu'ils soient présentés dans un formulaire.</dd> + <dt>{{htmlattrdef("keytype")}}</dt> + <dd>Le type de clé générée, la valeur par défaut est <code>RSA</code>.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>Le nom du contrôle qui en envoyé avec les données du formulaire.</dd> +</dl> + +<p>L'élément se présente de cette façon :</p> + +<pre class="brush: html"><keygen name="<var>nom</var>" challenge="<var>chaîne de challenge</var>" + keytype="<var>type</var>" keyparams="<var>pqg-params</var>"></pre> + +<p>Le paramètre <code>keytype</code> est utilisé pour spécifier le type de clé à générer. Les valeurs autorisées sont <code>RSA</code> (qui est la valeur par défaut), <code>DSA</code> et <code>EC</code>. Les attributs <code>name</code> et <code>challenge</code> sont obligatoires. L'attribut <code>keytype</code> est facultatif pour une génération de clé RSA mais obligatoire pour une génération de clé DSA et EC. L'attribut <code>keyparams</code> est requis pour la génération de clés DSA et EC et est ignoré pour la génération de clé RSA. <code>PQG</code> est un synonyme de <code>keyparams</code>. Les variantes suivantes sont donc équivalentes : <code>keyparams="pqg-params"</code> ou <code>pqg="pqg-params"</code>.</p> + +<p>Pour les clés RSA, le paramètre <code>keyparams</code> n'est pas utilisé (ignoré s'il est présent). L'utilisateur peut avoir le choix pour la force des clés RSA à générer. Actuellement, l'utilisateur peut choisir entre « <code>high</code> » (élevé) pour 2048 bits et « <code>medium</code> » (moyen) pour 1024 bits.</p> + +<p>Pour les clés DSA, le paramètre <code>keyparams</code> définit les paramètres DSA PQG à utiliser pendant le processus de génération de la clé. La valeur du paramètre <code>pqg</code> est encodée en DER en suivant la structure Dss-Parms comme énoncé dans le <a class="link-ftp" href="ftp://ftp.rfc-editor.org/in-notes/rfc3279.txt">RFC 3279</a>. L'utilisateur peut avoir le choix des tailles de clés DSA, permettant à l'utilisateur de choisir parmi les tailles de clés définies dans le standard DSA.</p> + +<p>Pour les clés EC, le paramètre <code>keyparams</code> définit le nom de la courbe elliptique sur laquelle sera générée la clé. Normalement, c'est une chaîne de caractères du tableau <a class="external" href="https://mxr.mozilla.org/mozilla-central/source/security/manager/ssl/src/nsKeygenHandler.cpp?mark=179-185,187-206,208-227,229-256#177">nsKeygenHandler.cpp</a>. (Il faut noter que seulement un sous-ensemble des courbes peut être supporté par n'importe quel navigateur.) Si le paramètre <code>keyparams</code> n'est pas reconnu comme une chaîne de caractères correspondant à une courbe, une courbe est choisie selon la force de la clé choisie par l'utilisateur (faible, moyenne, élevée). La courbe <code>secp384r1</code> est utilisée pour une force élevée, la courbe <code>secp256r1</code> est utilisée pour des clés moyennes.</p> + +<div class="note"> +<p><strong>Note :</strong> Les détails concernant le nombre de degrés de force, les valeurs par défaut de chaque degré et les interfaces utilisateurs à utiliser pour offrir ce choix sortent du cadre de ce document.</p> +</div> + +<p>L'élément <code>keygen</code> n'est valide que s'il appartient à un formulaire HTML. Il entraînera l'affichage d'une interface pour choisir la taille de clé à utiliser. L'interface peut être un menu, des boutons radio ou autre . Le navigateur offrant différents niveaux de forces pour les clés. Actuellement, deux forces sont proposées : élevée et moyenne (<code>high</code> et <code>medium</code>). Si le navigateur est configuré afin de supporter du matériel cryptographique (par exemple les « smart cards »), l'utilisateur peut avoir le choix du support sur lequel générer la clé : sur la carte ou par un logiciel puis stockée sur le disque.</p> + +<p>Quand le bouton d'envoi du formulaire est activé, une paire de clés de la taille choisie est générée. La clé privée est chiffrée est stockée dans la base de clés locale.</p> + +<pre class="brush: bash">PublicKeyAndChallenge ::= SEQUENCE { + spki SubjectPublicKeyInfo, + challenge IA5STRING +} +SignedPublicKeyAndChallenge ::= SEQUENCE { + publicKeyAndChallenge PublicKeyAndChallenge, + signatureAlgorithm AlgorithmIdentifier, + signature BIT STRING +}</pre> + +<p>La clé publique et la requête/réponse sont encodées en DER en tant que PublicKeyAndChallenge, puis signées avec la clé privée pour produire un SignedPublicKeyAndChallenge. Le SignedPublicKeyAndChallenge est encodé en base64 et les données ASCII sont finalement envoyées au serveur sous forme d'une paire nom-valeur du formulaire. Le nom étant la valeur définie par l'attribut <code>name</code> de l'élément <code>keygen</code>. Si aucune chaîne de requête/réponse n'est fournie, cela sera encodé comme une IA5STRING de longueur nulle.</p> + +<p>Voici un exemple d'un envoi de formulaire, tel qu'envoyé au programme CGI par le serveur HTTP :</p> + +<pre class="brush: bash"> commonname=John+Doe&email=doe@foo.com&org=Foobar+Computing+Corp.& + orgunit=Bureau+of+Bureaucracy&locality=Anytown&state=California&country=US& + key=MIHFMHEwXDANBgkqhkiG9w0BAQEFAANLADBIAkEAnX0TILJrOMUue%2BPtwBRE6XfV%0AWtKQbsshxk5ZhcUwcwyvcnIq9b82QhJdoACdD34rqfCAIND46fXKQUnb0mvKzQID%0AAQABFhFNb3ppbGxhSXNNeUZyaWVuZDANBgkqhkiG9w0BAQQFAANBAAKv2Eex2n%2FS%0Ar%2F7iJNroWlSzSMtTiQTEB%2BADWHGj9u1xrUrOilq%2Fo2cuQxIfZcNZkYAkWP4DubqW%0Ai0%2F%2FrgBvmco%3D</pre> +<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%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_associ.C3.A9_aux_formulaires">contenu associé aux formulaires</a> (listed, submittable, resettable), contenu interactif, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Aucun, c'est un élément vide</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>Doit avoir une balise de début mais pas de balise de fin.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLKeygenElement")}}</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.keygen")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les discussions autour de la dépréciation/obsolescence de l'élément <code><keygen></code> : + + <ul> + <li><a href="https://github.com/w3c/html/issues/43">L'<em>issue</em> GitHub</a></li> + <li><a href="https://lists.w3.org/Archives/Public/public-html/2016May/0021.html">La discussion sur la liste de diffusion public-html</a></li> + </ul> + </li> +</ul> diff --git a/files/fr/web/html/element/label/index.html b/files/fr/web/html/element/label/index.html new file mode 100644 index 0000000000..f9fab055c0 --- /dev/null +++ b/files/fr/web/html/element/label/index.html @@ -0,0 +1,209 @@ +--- +title: <label> +slug: Web/HTML/Element/Label +tags: + - Element + - Formulaires + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/label +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><label></code></strong> représente une légende pour un objet d'une interface utilisateur. Il peut être associé à un contrôle en utilisant l'attribut <code>for</code> ou en plaçant l'élément du contrôle à l'intérieur de l'élément <code><label></code>. Un tel contrôle est appelé <em>contrôle étiqueté</em> par l'élément <code><label></code>.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/label.html", "tabbed-shorter")}}</div> + +<div 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> !</div> + +<p>Rattacher un libellé à un élément de saisie ({{HTMLElement("input")}}) offre différents avantages :</p> + +<ul> + <li>Le texte du libellé n'est pas seulement associé visuellement au champ, il est <em>techniquement</em> associé avec le champ. Ainsi, lorsque l'utilisateur a le focus sur le champ, un lecteur d'écran pourra énoncer le contenu du libellé et permettre à l'utilisateur de disposer d'un meilleur contexte.</li> + <li>Vous pouvez cliquer sur le libellé pour passer le focus voire activer le champ. De cette façon, on dispose d'une meilleure ergonomie car la surface d'utilisation du champ est agrandie, ce qui s'avère utile sur les petits appareils comme les téléphones portables.</li> +</ul> + +<p>Pour associer un élément <code><label></code> avec un élément <code><input></code>, il faut fournir un identifiant à l'élément <code><input></code> sous la forme d'un attribut <code>id</code>. Ensuite, on peut renseigner l'attribut <code>for</code> de l'élément <code><label></code> avec la valeur de cet identifiant.</p> + +<p>On peut également créer un lien implicite en imbriquant l'élément <code><input></code> directement au sein d'un élément <code><label></code> . Dans ce cas, les attributs <code>for</code> et <code>id</code> ne sont plus nécessaires.</p> + +<pre class="brush: html"><label>Aimez-vous les petits pois ? + <input type="checkbox" name="petits_pois"> +</label> +</pre> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("for")}}</dt> + <dd>L'identifiant (la valeur de l'attribut {{htmlattrxref("id")}}) de l'élément de formulaire associé, appartenant au même document que l'élément label. Le premier élément du document dont l'identifiant correspond est alors le contrôle étiqueté par l'élément. + <div class="note"><strong>Note :</strong> Un élément label peut simultanément avoir un attribut <code>for</code> et contenir un élément de contrôle tant que l'attribut <code>for</code> pointe vers l'élément contenu.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("form")}}</dt> + <dd>L'élément de formulaire auquel l'élément label est associé (son formulaire propriétaire). La valeur de cet attribut doit être l'identifiant d'un élément {{HTMLElement("form")}} contenu au sein du même document. Si l'attribut n'est pas renseigné, cet élément <label> doit être le descendant d'un élément {{HTMLElement("form")}}. Cet attribut permet de placer des éléments label dans le document sans qu'ils soient nécessairement imbriqués dans un formulaire. + <div class="note"><strong>Note : </strong>La spécification HTML a été mise à jour le 28 avril 2016 afin de déprécier l'attribut {{htmlattrxref("form")}}. Celui-ci est toujours disponible dans les scripts mais sa définition a changé, il renvoie désormais le contrôle associé au formulaire ou <code>null</code> s'il n'y a pas de contrôle associé (autrement dit si {{domxref("HTMLLabelElement.control")}} vaut <code>null</code>).</div> + </dd> +</dl> + +<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> + +<ul> + <li>Un élément <code><label></code> peut être associé à un contrôle en plaçant l'élément du contrôle dans l'élément <code><label></code> ou en utilisant l'attribut {{htmlattrxref("for")}}. Un tel contrôle sera appelé le contrôle <em>étiqueté</em> par l'élément <code><label></code>. Un contrôle peut être associé à plusieurs <code><label></code>.</li> + <li>Les étiquettes ne sont pas directement associées aux formulaires. Elles le sont indirectement via le contrôle auquel elles sont rattachées.</li> + <li>Lorsqu'on clique ou touche un élément <code><label></code> et que celui-ci est associé à un contrôle d'un formulaire, l'évènement <code>click</code> est également déclenché pour le contrôle.</li> +</ul> + +<h2 id="Mise_en_forme_avec_CSS">Mise en forme avec CSS</h2> + +<p>Il n'existe pas de spécificité relative à la mise en forme des éléments <code><label></code>. Par défaut, ce sont des éléments <em>inline</em> et ils peuvent être mis en forme de la même façon que {{HTMLElement("span")}} et {{HTMLElement("a")}}.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_simple">Exemple simple</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><label>Cliquez ici<input type="text" id="Utilisateur" name="Nom" /></label></pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample('Exemple_simple', '200', '50', '')}}</p> + +<h3 id="Utiliser_l’attribut_for">Utiliser l’attribut <code>for</code></h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><label for="Utilisateur">Cliquez ici</label> +<input type="text" id="Utilisateur" name="Nom" /></pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("Utiliser_l’attribut_for", '200', '50', '')}}</p> + +<h2 id="Accessibilité">Accessibilité</h2> + +<h3 id="Contenu_interactif">Contenu interactif</h3> + +<p>Il ne faut pas placer d'éléments interactifs (tels que les ancres ({{HTMLElement("a")}}) ou les boutons ({{HTMLElement("button")}})) dans un élément <code>label</code> sinon il sera difficile d'activer le contrôle associé à ce libellé.</p> + +<h4 id="Mauvaise_pratique">Mauvaise pratique</h4> + +<pre class="brush: html example-bad"><label for="tac"> + <input id="tac" type="checkbox" name="terms-and-conditions"> + J'accepte <a href="terms-and-conditions.html">les conditions d'utilisation</a> +</label> +</pre> + +<h4 id="Bonne_pratique">Bonne pratique</h4> + +<pre class="brush: html example-good"><label for="tac"> + <input id="tac" type="checkbox" name="terms-and-conditions"> + J'accepte les conditions d'utilisation +</label> +<p> + <a href="terms-and-conditions.html">Lire les conditions d'utilisation</a> +</p> +</pre> + +<h3 id="Titres">Titres</h3> + +<p>Placer des <a href="/fr/docs/Web/HTML/Element/Heading_Elements">éléments de titres</a> à l'intérieur d'un élément <code>label</code> causera des interférences avec de nombreux outils d'assistance car les titres sont généralement utilisés comme <a href="/en-US/docs/Web/HTML/Element/Heading_Elements#Navigation">une aide à la navigation</a>. Si le texte du libellé doit être ajusté visuellement, on utilisera une mise en forme via CSS.</p> + +<p>S'il faut associer un titre à un formulaire ou à une section d'un formulaire, on utilisera l'élément {{HTMLElement("legend")}} au sein d'un élément {{HTMLElement("fieldset")}}.</p> + +<h4 id="Mauvaise_pratique_2">Mauvaise pratique</h4> + +<pre class="brush: html example-bad"><label for="votre-nom"> + <h3>Votre nom</h3> + <input id="votre-nom" name="votre-nom" type="text"> +</label> +</pre> + +<h4 id="Bonne_pratique_2">Bonne pratique</h4> + +<pre class="brush: html example-good"><label class="label-grand" for="votre-nom"> + Votre nom + <input id="votre-nom" name="votre-nom" type="text"> +</label> </pre> + +<h3 id="Boutons">Boutons</h3> + +<p>Un élément {{HTMLElement("input")}} avec <code>type="button"</code> et un attribut <code>value</code> valide ne nécessite pas l'ajout d'un libellé. Rajouter un libellé inutile pourra créer des interférences avec les outils d'assistance. Il en va de même pour l'élément {{HTMLElement("button")}}.</p> + +<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%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_associ.C3.A9_aux_formulaires">contenu associé aux formulaires</a> (listed, submittable, resettable), <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>, contenu interactif.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a> sans éléments <code>label</code> descendants. À l'exception du contrôle lié à la légende, pas d'autres éléments pouvant contenir un élément <code>label</code>.</td> + </tr> + <tr> + <th scope="row">Omission de balise</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLLabelElement")}}</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-label-element', '<label>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-label-element', '<label>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.9.1', '<label>')}}</td> + <td>{{Spec2('HTML4.01')}}</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.label")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.</li> +</ul> diff --git a/files/fr/web/html/element/legend/index.html b/files/fr/web/html/element/legend/index.html new file mode 100644 index 0000000000..15cbc6297d --- /dev/null +++ b/files/fr/web/html/element/legend/index.html @@ -0,0 +1,114 @@ +--- +title: <legend> +slug: Web/HTML/Element/Legend +tags: + - Element + - Formulaires + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/legend +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><legend> </strong>représente une légende pour le contenu de son élément parent {{HTMLElement("fieldset")}}.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/legend.html", "tabbed-standard")}}</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> + + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément contient uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><form action="" method="post"> + <fieldset> + <legend>Un champ pour le choix de la radio</legend> + <input type="radio" name="radio" id="radio"> + <label for="radio">Cliquez ici</label> + </fieldset> +</form></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p> + +<div class="note"> +<p><strong>Note :</strong> Voir la page sur {{HTMLElement("form")}} pour d'autres exemples qui utilisent <code><legend></code>.</p> +</div> +<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>Aucune.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>Aucune, la balise ouvrante et la balise fermante doivent être présentes.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Un élément {{HTMLElement("fieldset")}} dont le premier élément fils est cet élément <code><legend></code>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLLegendElement")}}</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-legend-element", "<legend>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Définition de l'élément <code>legend</code>.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "forms.html#the-legend-element", "<legend>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "interact/forms.html#h-17.10", "<legend>")}}</td> + <td>{{Spec2("HTML4.01")}}</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.legend")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("option")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.</li> + <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Form_Role">ARIA : le rôle <code>form</code></a></li> +</ul> diff --git a/files/fr/web/html/element/li/index.html b/files/fr/web/html/element/li/index.html new file mode 100644 index 0000000000..913757a881 --- /dev/null +++ b/files/fr/web/html/element/li/index.html @@ -0,0 +1,173 @@ +--- +title: <li> +slug: Web/HTML/Element/li +tags: + - Contenu de groupage HTML + - Element + - HTML + - Reference +translation_of: Web/HTML/Element/li +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><li></code></strong> est utilisé pour représenter un élément dans une liste. Il doit être contenu dans un élément parent : une liste ordonnée ({{HTMLElement("ol")}}), une liste non ordonnée ({{HTMLElement("ul")}}) ou un menu ({{HTMLElement("menu")}}). Dans les menus et les listes non ordonnées, les éléments de liste sont habituellement affichés en utilisant des puces. Dans les listes ordonnées, ils sont habituellement affichés avec compteur croissant à gauche, tel qu'un nombre ou une lettre.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/li.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> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("value")}}</dt> + <dd>Cette valeur entière indique la valeur ordinale en cours de l'élément de liste tel que défini par l'élément {{HTMLElement("ol")}}. La seule valeur autorisée pour cet attribut est un nombre, même si la liste est affichée avec des chiffres romains ou des lettres. Les éléments de la liste qui suivent celui-ci continueront la numérotation à partir de la valeur indiquée. L'attribut <strong>value</strong> n'a pas de signification pour les listes non ordonnées ({{HTMLElement("ul")}}) ou pour les menus ({{HTMLElement("menu")}}). + <div class="note"><strong>Note</strong> : Cet attribut a été déprécié en HTML4 mais a été réintroduit en HTML5.</div> + + <div class="note">Note : Avant {{Gecko("9.0")}}, des valeurs négatives étaient incorrectement converties en 0. A partir de {{Gecko("9.0")}}, toutes les valeurs entières ont été correctement analysées.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("type")}} {{Deprecated_inline}}</dt> + <dd>Cet attribut de caractère indique le type de numérotation utilisé pour la liste : + <ul> + <li><code>a</code> : lettres minuscules</li> + <li><code>A</code> : lettres majuscules</li> + <li><code>i</code> : chiffres romains en minuscules</li> + <li><code>I</code> : chiffres romains en majuscules</li> + <li><code>1</code> : nombres</li> + </ul> + Ce type surcharge celui utilisé par son élément parent {{HTMLElement("ol")}} si présent. + + <div class="note"><strong>Note d'utilisation :</strong> Cet attribut a été déprécié : utilisez la propriété CSS {{cssxref("list-style-type")}} à la place.</div> + </dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Liste_ordonnée">Liste ordonnée</h3> + +<h4 id="HTML">HTML</h4> + +<pre><code><ol> + <li>premier article</li> + <li>second article</li> + <li>troisième article</li> +</ol></code></pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Liste_ordonnée")}}</p> + +<h3 id="Liste_ordonnée_démarrant_avec_un_indice_donné">Liste ordonnée démarrant avec un indice donné</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre><code><ol type="I"> + <li value="3">troisième article</li> + <li>quatrième article</li> + <li>cinquième article</li> +</ol></code></pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("Liste_ordonnée_démarrant_avec_un_indice_donné")}}</p> + +<h3 id="Liste_non_ordonnée">Liste non ordonnée</h3> + +<h4 id="HTML_3">HTML</h4> + +<pre><code><ul> + <li>premier article</li> + <li>second article</li> + <li>troisième article</li> +</ul></code></pre> + +<h4 id="Résultat_3">Résultat</h4> + +<p>{{EmbedLiveSample("Liste_non_ordonnée")}}</p> + +<div class="blockIndicator note"> +<p><strong>Note :</strong> Pour d'autres exemples plus détaillés, voir les pages {{HTMLElement("ol")}} et {{HTMLElement("ul")}}.</p> +</div> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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>Aucune.</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>La balise de fin peut être absente si l'élément est immédiatement suivi par un autre élément {{HTMLElement("li")}} ou s'il n'y a plus d'autre contenu dans son élément parent.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Un élément {{HTMLElement("ul")}}, {{HTMLElement("ol")}} ou {{HTMLElement("menu")}}. Bien que ce ne soit pas un usage conforme, l'élément obsolète {{HTMLElement("dir")}} peut également être un parent.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>{{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("presentation")}}, {{ARIARole("radio")}}, {{ARIARole("separator")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLLIElement")}}</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">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-li-element', '<li>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-li-element', '<li>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '<li>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>L'attribut <code>type</code> a été déprécié.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, voyez <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div> + +<p>{{Compat("html.elements.li")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments liés aux listes : {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("menu")}} et {{HTMLElement("dir")}} (obsolète) ;</li> + <li>Les propriétés CSS qui peuvent être particulièrement utiles pour mettre en forme l'élément <code><li></code> : + <ul> + <li>la propriété {{cssxref("list-style")}}, pour choisir la manière d'afficher l'ordinal,</li> + <li>les <a href="/fr/docs/Web/CSS/Compteurs_CSS">compteurs CSS</a>, pour gérer des listes imbriquées complexes,</li> + <li>la propriété {{cssxref("margin")}}, pour contrôler l'indentation de l'élément de liste.</li> + </ul> + </li> +</ul> diff --git a/files/fr/web/html/element/link/index.html b/files/fr/web/html/element/link/index.html new file mode 100644 index 0000000000..dc048179b8 --- /dev/null +++ b/files/fr/web/html/element/link/index.html @@ -0,0 +1,306 @@ +--- +title: '<link> : l''élément de lien vers des ressources externes' +slug: Web/HTML/Element/link +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/link +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML<strong> <code><link></code></strong> définit la relation entre le document courant et une ressource externe. Cet élément peut être utilisé pour définir un lien vers <a href="/fr/docs/Glossaire/CSS">une feuille de style</a>, vers les icônes utilisées en barre de titre ou comme icône d'application sur les appareils mobiles.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/link.html")}}</div> + + + +<p>Pour lier une feuille de style externe, on inclut un élément <code><link></code> de la forme suivante à l'intérieur de l'élément {{htmlelement("head")}} :</p> + +<pre class="brush: html notranslate"><link href="main.css" rel="stylesheet"></pre> + +<p>Dans cet exemple, on indique le chemin vers la feuille de style grâce à l'attribut <code>href</code>, l'attribut <code>rel</code> possède une valeur <code>stylesheet</code> qui indique que c'est une feuille de style. <code>rel</code> signifie <em>relationship</em> qui correspond donc à la relation entre la ressource et le document courant. Il existe de <a href="/fr/docs/Web/HTML/Types_de_lien">nombreux types de liens possibles</a>.</p> + +<p>Certains types sont assez fréquents. Ainsi, pour l'icône présentant le site dans l'onglet, on trouvera :</p> + +<pre class="brush: html notranslate"><link rel="icon" href="favicon.ico"></pre> + +<p>Il existe différents types de relations pour préciser les icônes et qui permettent notamment de cibler certaines plateformes mobiles :</p> + +<pre class="brush: html notranslate"><link rel="apple-touch-icon-precomposed" sizes="114x114" + href="apple-icon-114.png" type="image/png"></pre> + +<p>L'attribut <code>sizes</code> indique la taille de l'icône tandis que l'attribut <code>type</code> contient le type MIME de la ressource qui est liée. Ces attributs permettent alors au navigateur de sélectionner la ressource la plus adéquate.</p> + +<p>On peut également fournir l'attribut <code>media</code> afin d'utiliser telle ou telle ressource lorsqu'une requête média est vérifiée. Ainsi, on pourra utiliser ce qui suit afin d'avoir une feuille de style utilisée à l'impression et une autre dédiée au mobile :</p> + +<pre class="brush: html notranslate"><link href="print.css" rel="stylesheet" media="print"> +<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"></pre> + +<p>Certaines fonctionnalités relatives à la sécurité sont également disponibles avec certains attributs de <code><link></code>. Dans cet exemple :</p> + +<pre class="brush: html notranslate"><link rel="preload" href="myFont.woff2" as="font" + type="font/woff2" crossorigin="anonymous"></pre> + +<p>L'attribut <code>rel</code> vaut <code>preload</code> et indique que le navigateur doit précharger la ressource (voir <a href="/fr/docs/Web/HTML/Précharger_du_contenu">Le préchargement du contenu avec <code>rel="preload"</code></a> pour plus de détails), l'attribut <code>as</code> indique la classe de contenu qui est récupéré et l'attribut <code>crossorigin</code> indique si la ressource doit être récupérée avec une requête CORS.</p> + +<p>Quelques notes d'utilisation :</p> + +<ul> + <li>Un élément <code><link></code> element peut être placé dans un élément {{HTMLElement("head")}} ou {{htmlelement("body")}} selon la valeur de la relation. C'est cependant une bonne pratique que de placer l'ensemble des éléments <code><link></code> dans l'élément <code><head></code>.</li> + <li>Lorsque <code><link></code> est utilisé pour la <em>favicon</em> d'un site et que celui-ci utilise les règles CSP afin d'améliorer la sécurité, les règles s'appliquent également aux icônes. Aussi, si la <em>favicon</em> ne charge pas, veuillez vérifier que la directive <a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"><code>img-src</code></a> de l'en-tête {{HTTPHeader("Content-Security-Policy")}} ne bloque pas le chargement de l'image.</li> + <li>Les spécifications HTML et XHTML définissent des gestionnaires d'évènements pour l'élément <code><link></code> mais leur utilisation reste incertaine.</li> + <li>Pour XHTML 1.0, les éléments vides tels que <code><link></code> devaient utiliser une barre oblique de fin : <code><link /></code>.</li> + <li>WebTV prend en charge la valeur <code>next</code> pour l'attribut <code>rel</code> afin de précharger la page suivante pour une série de documents.</li> +</ul> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("as")}}</dt> + <dd>Cet attribut est uniquement utilisé lorsque <code>rel="preload"</code> ou <code>rel="prefetch"</code> est utilisé pour l'élément <code><link></code>. L'attribut indique le type de contenu chargé par l'élément <code><link></code> et permet au navigateur de déterminer la priorité du contenu, d'identifier les utilisations de la ressource plus bas dans le document, d'appliquer <a href="/fr/docs/HTTP/CSP">la bonne politique de sécurité des contenus</a> et de définir le bon en-tête de requête {{httpheader("Accept")}}.</dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>Cet attribut à valeur contrainte indique si le CORS doit être utilisé lorsque la ressource liée est récupérée. <a href="/fr/docs/Web/HTML/Images_avec_le_contrôle_d_accès_HTTP">Les images avec CORS activé</a> peuvent être réutilisée dans un élément {{HTMLElement("canvas")}} sans qu'il soit corrompu. Les valeurs autorisées sont : + <ul> + <li><code>"anonymous"</code> : une requête <em>cross-origine</em> est effectuée (avec l'en-tête HTTP <code>Origin</code>). Mais aucune information d'identification n'est envoyée (aucun cookie, aucun certificat X.509, aucune authentification simple via HTTP). Si le serveur ne fournit pas d'informations au site d'origine (c'est-à-dire sans utiliser l'en-tête HTTP {{httpheader("Access-Control-Allow-Origin")}}, l'image sera <em>corrompue</em> et son utilisation sera restreinte.</li> + <li><code>"use-credentials"</code> : une requête <em>cross-origine</em> est effectuée (avec l'en-tête HTTP <code>Origin</code>) avec des informations d'authentification qui sont envoyées (un cookie, un certification et une authentification HTTP simple sont envoyés). Si le serveur ne fournit pas d'information d'authentification au site d'origine via l'en-tête {{httpheader("Access-Control-Allow-Credentials")}}, l'image sera corrompue et son utilisation sera restreinte.</li> + </ul> + Lorsque l'attribut est absent, la ressource est récupérée sans requête CORS (c'est-à-dire sans envoyer l'en-tête {{httpheader("Origin")}}) ce qui empêche de l'utiliser dans les éléments qui ne doivent pas être corrompus tels que {{HTMLElement('canvas')}}. Si la valeur est invalide, elle est synonyme de <code>anonymous</code>. Pour plus d'informations, consulter <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS">l'article sur le contrôle d'origine HTTP (CORS)</a>.</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p>Cet attribut est uniquement utilisable avec les liens avec <code>rel="stylesheet"</code>. L'attribut booléen <code>disabled</code> indique si la feuille de style référencée devrait être chargée et appliquée au document. Si l'attribut <code>disabled</code> est indiqué dans le document HTML lors de son chargement, la feuille de style ne sera pas chargé au chargement de la page. La feuille de style sera uniquement chargée à la demande si (et lorsque) l'attribut <code>disabled</code> est retiré ou passé à <code>false</code>via un script.</p> + + <p>Toutefois, une fois que la feuille de style a été chargée, toute modification à l'attribut <code>disabled</code> n'aura aucun impact, sa valeur ne sera pas liée à la propriété {{domxref("StyleSheet.disabled")}}. Modifier cet attribut ne fait qu'activer/désactiver la capacité de charger et d'appliquer la feuille de style au document.</p> + + <p>Cette propriété est à distinguer de la propriété <code>disabled</code> de l'interface {{domxref("StyleSheet")}} : lorsqu'on utilise celle-ci, la feuille de style est retirée de {{domxref("document.styleSheets")}} et elle n'est pas rechargée automatiquement lorsqu'on la repasse à <code>false</code>.</p> + </dd> + <dt>{{htmlattrdef("href")}}</dt> + <dd>Cet attribut définit l'URL de la ressource liée. L'URL utilisée peut être absolue ou relative.</dd> + <dt>{{htmlattrdef("hreflang")}}</dt> + <dd>Cet attribut, purement indicatif, définit la langue de la ressource liée. La valeur doit être une balise de langue <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a> valide. Cet attribut doit uniquement être utilisé si l'attribut <code>href</code> est présent.</dd> + <dt>{{htmlattrdef("importance")}} {{experimental_inline}}</dt> + <dd>Cet attribut indique l'importance relative de la ressource. Les indications de priorité utilisent ces valeurs : + <dl> + <dt><code>auto</code></dt> + <dd>Aucune préférence n'est indiquée. Le navigateur peut utiliser une heuristique qui lui est propre afin de décider de la priorité de la ressource.</dd> + <dt><code>high</code></dt> + <dd>Cette valeur indique au navigateur que la ressource a une priorité élevée.</dd> + <dt><code>low</code></dt> + <dd>Cette valeur indique au navigateur que la ressource a une priorité basse.</dd> + </dl> + + <p>Note : L'attribut <code>importance</code> peut uniquement être utilisé sur l'élément <code>link</code> si <code>rel</code> vaut <code>"preload"</code> ou <code>"prefetch"</code>.</p> + </dd> + <dt>{{htmlattrdef("integrity")}} {{experimental_inline}}</dt> + <dd>Cet attribut contient des métadonnées en ligne qui correspondent à l'empreinte cryptographique de la ressource qu'on souhaite récupérer. Cela permet à l'agent utilisateur de contrôler que la ressource récupérée n'a pas été manipulée. Pour plus d'informations, consulter <a href="/fr/docs/Web/Security/Subresource_Integrity">l'article sur le contrôle des sous-ressources</a>.</dd> + <dt>{{htmlattrdef("media")}}</dt> + <dd>Cet attribut indique le média auquel s'applique la ressource liée. Sa valeur doit être <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">une requête média</a>. Cet attribut est principalement utilisé pour permettre à l'agent utilisateur de sélectionner la meilleure feuille de style en fonction de l'appareil de l'utilisateur. + <div class="note"><strong>Note d'utilisation :</strong> + <ul> + <li>En HTML4, la valeur de cet attribut était une liste de descripteurs de médias (<a href="/fr/docs/Web/CSS/@media">des types ou des groupes de média</a>) séparés par des espaces, par exemple <code>print</code> <code>screen</code> <code>aural</code> <code>braille</code>. HTML5 étend cet attribut à l'ensemble <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">des requêtes média</a> qui forment un surensemble des valeurs autorisées en HTML 4.</li> + <li>Les navigateurs qui ne prennent pas en charge <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">les requêtes média CSS3</a> ne reconnaîtront pas nécessairement les liens adéquats et il faut donc toujours fournir des liens de recours.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> + <dd>Une chaîne de caractères qui indique le référent à utiliser lors de la récupération de la ressource : + <ul> + <li><code>'no-referrer'</code> : l'en-tête {{HTTPHeader("Referer")}} n'est pas envoyé</li> + <li><code>'no-referrer-when-downgrade'</code> signifie qu'aucun en-tête {{HTTPHeader("Referer")}} ne sera envoyé lors de la navigation vers une origine non protégée par TLS (HTTPS). C'est le comportement par défaut de l'agent utilisateur si aucune autre règle n'est indiquée.</li> + <li><code>'origin'</code> indique que le référent sera l'origine de la page (ce qui correspond approximativement au schéma, à l'hôte et au port).</li> + <li><code>'origin-when-cross-origin'</code> indique que lorsqu'on navigue vers d'autres origines, le référent se limitera au schéma, à l'hôte et au port et que lorsqu'on navigue sur la même origine, il incluera le chemin.</li> + <li><code>'unsafe-url'</code> : le référent incluera l'origine et le chemin (mais ni le fragment, ni le mot de passe ou le nom d'utilisateur). Ce comportement n'est pas sécurisé car il peut laisser fuiter des origines et des chemins de ressources TLS vers des origines non-sécurisées.</li> + </ul> + </dd> + <dt>{{htmlattrdef("rel")}}</dt> + <dd>Cet attribut indique la relation qui existe entre le document et la ressource liée. Cet attribut doit être une liste de <a href="/fr/docs/Web/HTML/Types_de_lien">types de lien</a>, séparés par des espaces. La plupart du temps, cet attribut est utilisé pour caractériser un lien vers une feuille de style et il vaut alors <code>stylesheet</code> quand l'attribut <code>href</code> reçoit l'URL de la feuille de style à charger. WebTV supporte également la valeur <code>next</code> qui permet de précharger la page suivante d'une série de pages.</dd> + <dt>{{htmlattrdef("sizes")}}</dt> + <dd>Cet attribut définit les dimensions des icônes pour le média contenu dans la ressource. Cet attribut doit uniquement être présent lorsque {{htmlattrxref("rel","link")}} contient le type de lien <code>icon</code>. Il peut prendre l'une des valeurs suivantes : + <ul> + <li><code>any</code> : l'icône peut être redimensionnée à volonté car elle utilise un format vectoriel (par exemple <code>image/svg+xml</code>).</li> + <li>une liste de tailles, séparées par des espaces, dont chacune est de la forme <code><em><largeur en pixels></em>x<em><hauteur en pixels></em></code> ou <code><em><largeur en pixels></em>X<em><hauteur en pixels></em></code>. Pour chacune de ces dimensions, il doit exister une image correspondante dans la ressource.</li> + </ul> + + <div class="note"><strong>Note d'utilisation :</strong> + + <ul> + <li>La plupart des format d'icône permettent simplement de stocker une seule icône, c'est pour cela que, la plupart du temps, {{htmlattrxref("sizes")}} ne contient qu'un seul élément.</li> + <li>Safari sur iOS ne prend pas en charge cet attribut mais utilise des types de lien non-standards pour définir l'icône utilisé dans la barre du site ou pour le lancer : <code>apple-touch-icon</code> et <code>apple-touch-startup-icon</code>.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("title")}}</dt> + <dd>L'attribut <code>title</code> possède un sens spécifique pour l'élément <code><link></code>. Utilisé pour un lien <code><link rel="stylesheet"></code>, l'attribut <code>title</code> définit <a href="/fr/docs/Web/CSS/Feuilles_de_style_alternatives">une feuille de style alternative ou une feuille de style préférée</a>. S'il est mal utilisé, <a href="/fr/docs/Utiliser_des_titres_corrects_avec_des_feuilles_de_styles_externes">la feuille de style pourra être ignorée</a>.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>Cet attribut est utilisé pour définir le type de contenu auquel le lien fait référence. La valeur de cet attribut doit être un type MIME tel que <code>text/html</code> ou <code>text/css</code>, etc. Le plus souvent, cet attribut est utilsé pour définir le type de feuille de style utilisé et la valeur la plus fréquente est <code>text/css</code> qui indique le format d'une feuille de style en cascade (<em>Cascading Style Sheet</em> pour CSS). Cet attribut est également utilisé pour les liens avec <code>rel="preload"</code> afin de vérifier la prise en charge du format de fichier (si le navigateur ne prend pas en charge ce fichier, il n'est pas téléchargé).</dd> +</dl> + +<h3 id="Attributs_dépréciés_obsolètes_ou_non-standard">Attributs dépréciés, obsolètes ou non-standard</h3> + +<dl> + <dt>{{htmlattrdef("charset")}}{{obsolete_inline}}</dt> + <dd>Cet attribut définit l'encodage de la ressource lié. La valeur de cet attribut est une liste de jeux de caractères (tels que définis dans la RFC {{rfc(2045)}}) séparés par des espaces ou des virgules. La valeur par défaut de cet attribut est <code>iso-8859-1</code>. + <div class="note"><strong>Note d'utilisation :</strong> cet attribut est obsolète <strong>et ne doit pas être utilisé</strong>. Pour obtenir l'effet escompté, on utilisera l'en-tête HTTP {{httpheader("Content-Type")}} pour la ressource liée.</div> + </dd> + <dt>{{htmlattrdef("methods")}} {{Non-standard_inline}}</dt> + <dd>La valeur de cet attribut fournit des informations quant aux fonctions qui peuvent être utilisées sur l'objet lié. Les valeurs sont généralement des méthodes HTTP mais elles peuvent également inclure des informations en avance sur le lien (le navigateur pourrait par exemple choisir un affichage différent pour un lien selon la méthode utilisée). Cet attribut n'est pas pris en charge de façon correcte, y compris par le navigateur qui le définit, Internet Explorer 4. Voir <a href="https://msdn.microsoft.com/en-us/library/ms534168%28VS.85%29.aspx" rel="external nofollow">la page MSDN sur la propriété <code>methods</code></a>.</dd> + <dt>{{htmlattrdef("prefetch")}} {{Non-standard_inline}} {{secureContext_inline}}</dt> + <dd>Cet attribut permet d'identifier une ressource qui sera nécessaire dans la suite de la navigation et que l'agent utilisateur devrait télécharger. Cela permet à l'agent utilisateur d'avoir un meilleur temps de réponse lorsque la ressource sera nécessaire.</dd> + <dt>{{htmlattrdef("rev")}}{{obsolete_inline}}</dt> + <dd>La valeur de cet attribut décrit le lien entre le document courant et la ressource liée (définie par l'attribut {{htmlattrxref("href", "link")}}). Cet attribut définit donc la relation réciproque à la relation décrite par l'attribut <code>rel</code>. <a href="/fr/docs/Web/HTML/Types_de_lien">Les types de lien</a> utilisés pour cet attribut sont semblables aux valeurs autorisés par {{htmlattrxref("rel", "link")}}. + <div class="note"><strong>Note d'utilisation :</strong> cet attribut est obsolète en HTML5 <strong>et ne doit pas être utilisé</strong>. Pour obtenir le même effet, on utilisera l'attribut {{htmlattrxref("rel", "link")}} avec la valeur réciproque <a href="/fr/docs/Web/HTML/Types_de_lien">pour le type de lien</a>, (<code>made</code> devrait par exemple être remplacé par <code>author</code>). Cet attribut ne signifie pas « révision » et ne doit pas être utilisé comme un numéro de version.</div> + + <div class="note"> + <p><strong>Note </strong><strong>:</strong> La spécification actuelle de HTML 5.2 du W3C n'indique plus l'attribut <code>rev</code> comme obsolète. En revanche, la spécification du WHATWG le considère toujours comme obsolète. Tant que cette incohérence n'est pas résolue, mieux vaut considérer cet attribut comme obsolète.</p> + </div> + </dd> + <dt>{{htmlattrdef("target")}}{{Non-standard_inline}}</dt> + <dd>Cet attribut définit le nom de la <em>frame</em> ou de la fenêtre qui contient la ressource liée ou qui affichera la ressource liée.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Associer_une_feuille_de_style">Associer une feuille de style</h3> + +<p>Pour associer une feuille de style à la page courante, on utilisera la syntaxe suivante :</p> + +<pre class="brush: html notranslate"><link href="style.css" rel="stylesheet"> +</pre> + +<h3 id="Fournir_des_feuilles_de_style_alternatives">Fournir des feuilles de style alternatives</h3> + +<p>Pour un document, on peut indiquer <a href="/fr/docs/Web/CSS/Feuilles_de_style_alternatives">plusieurs feuilles de style alternatives</a>.</p> + +<p>L'utilisateur pourra choisir parmi ces feuilles de style via le menu « Affichage > Style de la page ». Ainsi, un utilisateur pourra voir différentes versions d'une même page.</p> + +<pre class="brush: html notranslate"><link href="default.css" rel="stylesheet" title="Mise en forme par défaut"> +<link href="joli.css" rel="alternate stylesheet" title="Joli"> +<link href="simple.css" rel="alternate stylesheet" title="Simple"> +</pre> + +<h3 id="Évènements_déclenchés_au_chargement_dune_feuille_de_style">Évènements déclenchés au chargement d'une feuille de style</h3> + +<p>Il est possible de déterminer si une feuille de style a été chargée en écoutant l'évènement <code>load</code>. De la même façon, un évènement <code>error</code> indiquera qu'une erreur a eu lieu lors du traitement de la feuille de style:</p> + +<pre class="brush: html notranslate"><script> + function sheetLoaded() { + // faire quelque chose, sachant + // que la feuille a été chargéee + } + + function sheetError() { + console.log("Erreur lors du chargement de la feuille de style !"); + } +</script> + +<link rel="stylesheet" href="mafeuilledestyle.css" + onload="sheetLoaded()" + onerror="sheetError()"> +</pre> + +<div class="note"><strong>Note :</strong> L'évènement <code>load</code> est déclenché une fois que la feuille de style et que le contenu associé ont été chargés et analysés et immédiatement avant que la mise en forme soit appliquée au contenu.</div> + +<h3 id="Exemples_avec_preload">Exemples avec <code>preload</code></h3> + +<p>De nombreux exemples avec <code><link rel="preload"></code> peuvent être lus sur <a href="/fr/docs/Web/HTML/Précharger_du_contenu">Précharger des ressources grâce à <code>rel="preload"</code></a>.</p> + +<h2 id="Notes">Notes</h2> + +<ul> + <li>Un élément <code><link></code> peut être utilisé à l'intérieur d'un élément {{HTMLElement("head")}} ou bien dans le corps du document ({{HTMLElement("body")}}) si <a href="https://html.spec.whatwg.org/multipage/links.html#body-ok">le type de lien le permet (<em>body-ok</em>)</a>. On peut par exemple utiliser <code><link rel="stylesheet"></code> car ce type de lien est autorisé au sein de l'élément <code><body></code>.</li> + <li>HTML 3.2 définit uniquement les attributs <code>href</code>, <code>rel</code>, <code>rev</code> et <code>title</code> pour l'élément <code><link></code>.</li> + <li>HTML 2 définit les attributs <code>href</code>, <code>methods</code>, <code>rel</code>, <code>rev</code>, <code>title</code> et <code>urn</code> pour l'élément <code><link></code>. Les attributs <code>methods</code> et <code>urn</code> ont ensuite été retirés des spécifications.</li> + <li>Les spécifications HTML et XHTML définissent toutes deux des gestionnaires d'évènements pour l'élément <code><link></code>.</li> + <li>En XHTML 1.0, il est nécessaire qu'un élément <code><link></code> ait une barre oblique avant le chevron fermant.</li> +</ul> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th> + <td>Contenu de métadonnées. Si {{htmlattrxref("itemprop")}} est présent : <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a> et <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td> + </tr> + <tr> + <th>Contenu autorisé</th> + <td>Aucun, cet élément est un élément vide.</td> + </tr> + <tr> + <th>Omission de balise</th> + <td>La balise de début doit être présente et la balise de fin ne doit pas être présente.</td> + </tr> + <tr> + <th>Parents autorisés</th> + <td>Tout élément qui accepte des éléments de métadonnées. Si l'attribut {{htmlattrxref("itemprop")}} est présent, tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucune.</td> + </tr> + <tr> + <th>Interface DOM</th> + <td>{{domxref("HTMLLinkElement")}}</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("Subresource Integrity", "#HTMLLinkElement", "lt;link>")}}</td> + <td>{{Spec2('Subresource Integrity')}}</td> + <td>Ajout de l'attribut <code>integrity</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-link-element', '<link>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Aucune modification depuis la dernière dérivation.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-link-element', '<link>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Ajout des attributs <code>crossorigin</code> et <code>sizes</code>. Les valeurs de <code>media</code> sont étendues à l'ensemble des requêtes médias, ajout de nombreuses autres valeurs pour <code>rel</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.3', '<link>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("Preload")}}</td> + <td>{{Spec2("Preload")}}</td> + <td>Définition de <code><link rel="preload"></code> et de l'attribut <code>as</code>.</td> + </tr> + <tr> + <td>{{SpecName('Resource Hints','#prefetch','prefetch')}}</td> + <td>{{Spec2('Resource Hints')}}</td> + <td>Ajout des valeurs <code>dns-prefetch</code>, <code>preconnect</code>, <code>prefetch</code> et <code>prerender</code>.</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.link",3)}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'en-tête HTTP {{HTTPHeader("Link")}}</li> + <li><a href="https://pie.gd/test/script-link-events/">Le tableau de compatibilité de Ryan Grove à propos de <code><script></code> et <code><link></code></a></li> +</ul> diff --git a/files/fr/web/html/element/listing/index.html b/files/fr/web/html/element/listing/index.html new file mode 100644 index 0000000000..8ecf9a1d69 --- /dev/null +++ b/files/fr/web/html/element/listing/index.html @@ -0,0 +1,48 @@ +--- +title: <listing> +slug: Web/HTML/Element/listing +tags: + - Element + - HTML + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/listing +--- +<div>{{Obsolete_header}}{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><listing></code></strong> affiche le texte compris entre les balises d'ouverture et de fermeture sans interpréter le HTML contenu, et en utilisant une police à chasse fixe. Le standard HTML 2 recommande de ne pas casser les lignes si elles ne sont pas plus grandes que 132 caractères.</p> + +<div class="note"><strong>Note : N'utilisez pas cet élément</strong> + +<ul> + <li>Il est déprécié depuis HTML 3.2 et n'a jamais été implémenté d'une manière cohérente par tous les navigateurs. De plus, il est obsolète dans HTML5 et peut être rendu par les agents-utilisateurs conformes comme l'élément {{HTMLElement("pre")}}, qui interprète l'HTML contenu !</li> + <li>Utilisez plutôt l'élément {{HTMLElement("pre")}} ou si sémantiquement approprié, l'élément {{HTMLElement("code")}} en échappant '<code><</code>' et '<code>></code>' pour qu'ils ne soient pas interprétés.</li> + <li>Une police à espacement fixe peut aussi être obtenue en utilisant un simple élément {{HTMLElement("div")}}, et en appliquant une règle <a href="/fr/docs/CSS">CSS</a> utilisant la valeur de police générique <code>monospace</code> dans la propriété {{cssxref("font-family")}}</li> +</ul> +</div> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément a aucun attribut spécifique en dehors <a href="/fr/docs/Web/HTML/Attributs_universels">des attributs universels</a>, communs à tous les éléments.</p> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Cet élément implémente l'interface {{domxref('HTMLElement')}}<code>.</code></p> + +<div class="note"> +<p><strong>Note d'implémentation : </strong>jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface {{domxref('HTMLSpanElement')}} pour cet élément.</p> +</div> + +<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.listing")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Utilisez plutôt les éléments {{HTMLElement("pre")}} et {{HTMLElement("code")}}.</li> + <li>Les éléments {{HTMLElement("plaintext")}} et {{HTMLElement("xmp")}} sont similaires à {{HTMLElement("listing")}} mais sont également obsolètes.</li> +</ul> diff --git a/files/fr/web/html/element/main/index.html b/files/fr/web/html/element/main/index.html new file mode 100644 index 0000000000..b7d84177a4 --- /dev/null +++ b/files/fr/web/html/element/main/index.html @@ -0,0 +1,186 @@ +--- +title: <main> +slug: Web/HTML/Element/main +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/main +--- +<div>{{HTMLRef}}</div> + +<p>L’élément HTML <strong><code><main></code></strong> représente le contenu majoritaire du {{HTMLElement("body")}} du document. Le contenu principal de la zone est constitué de contenu directement en relation, ou qui étend le sujet principal du document ou de la fonctionnalité principale d'une application.</p> + +<p>Un document ne peut pas avoir plus d'un seul élément <code><main></code> sans attribut {{htmlattrxref("hidden")}}.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/main.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> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément prend uniquement en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Notes">Notes</h2> + +<ul> + <li>Ce contenu doit être unique dans le document, excluant tout contenu qui est répété sur plusieurs documents comme des barres latérales, liens de navigation, informations relative au droit d'auteur, logo du site, et champs de recherche (sauf, bien entendu, si la fonctionnalité principale du document est un champ de recherche).</li> + <li><code><main></code> ne contribue pas au plan du document. Autrement dit, à la différence d'éléments tels que {{HTMLElement("body")}}, les niveaux de titre comme {{HTMLElement("h2")}}, etc. <code><main></code> n'affecte pas la structure même de la page, c'est un élément purement informatif.</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><!-- autre contenu --> + +<main> + <h1>Pommes</h1> + <p>La pomme est le fruit à pépin du pommier.</p> + + <article> + <h2>Pomme rouge</h2> + <p>Ce sont des pommes rouges vives très communes dans les supermarchés.<p> + <p>... </p> + <p>... </p> + </article> + + <article> + <h2>La Granny Smith</h2> + <p>Ces pommes juteuses, vertes, font une très belle garniture pour les tartes aux pommes.<p> + <p>... </p> + <p>... </p> + </article> + +</main> + +<!-- Autre contenu --></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","300","200")}}</p> + +<h2 id="Accessibilité">Accessibilité</h2> + +<h3 id="Balisage_du_document">Balisage du document</h3> + +<p>L'élément <code><main></code> a le rôle d'une <a href="/fr/docs/Web/Accessibility/ARIA/Roles/Main_role">balise <code>main</code></a>. Dans le contexte de l'accessibilité, les <a href="/fr/docs/Accessibilit%C3%A9/ARIA/Techniques_ARIA">balises</a> peuvent être utilisées par les outils d'assistance afin d'identifier et de naviguer rapidement entre les grandes sections d'un document. On privilégiera l'élément <code><main></code> à l'ajout du <code>role="main"</code>, à moins qu'il faille <a href="/fr/docs/Web/HTML/Element/main#Compatibilité_des_navigateurs">prendre en charge d'anciens navigateurs</a>.</p> + +<h3 id="Navigation_rapide">Navigation rapide</h3> + +<p>La navigation rapide (aussi appelée <em>skip navigation</em> ou <em>skipnav</em> en anglais) est une technique permettant aux outils d'assistance de passer certaines sections de contenu répétés (menu de navigation, bannières, etc.). Cela permet à l'utilisateur d'accéder plus rapidement au contenu principal de la page.</p> + +<p>Ajouter un attribut {{htmlattrxref("id")}} à l'élément <code><main></code> lui permet d'être une cible pour la navigation rapide.</p> + +<pre><span class="tag"><body</span><span class="tag">> + <a href="#main-content">Aller au contenu principal</a> + + <!-- Contenu relatif à la navigation et en-tête du document --> + + <main id="main-content"> + <!-- Contenu principal de la page --> + </main> +</body></span> +</pre> + +<ul> + <li><a href="https://webaim.org/techniques/skipnav/">WebAIM : Liens et navigation rapide (en anglais)</a></li> +</ul> + +<h3 id="Mode_lecture">Mode lecture</h3> + +<p>Les fonctionnalités « mode lecture » d'un navigateur vérifient la présence d'un élément <code><main></code> ainsi que la présence de <a href="/fr/docs/Web/HTML/Element/Heading_Elements">titres</a> et de <a href="/fr/docs/Web/HTML/Element#Sectionnement_du_contenu">sections</a> lors de la convertion du document pour le mode lecture.</p> + +<ul> + <li><a href="https://medium.com/@mandy.michael/building-websites-for-safari-reader-mode-and-other-reading-apps-1562913c86c9">Construire des sites web pour le mode lecture de Safari et pour les autres applications de lecture (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">Categories 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_tangible">contenu tangible</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"><dfn>Omission de balise</dfn></th> + <td>Aucune, les balises d'ouverture et de fermeture sont toutes les deux obligatoires.</td> + </tr> + <tr> + <th scope="row">Éléments 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>, uniquement si c'est <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#hierarchically-correct-main-element">un élément hiérarchiquement correct pour un élément <code><main></code></a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Le rôle <code>main</code> est appliqué à <code><main></code> par défaut, et le rôle <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role">presentation</a></code> est également autorisé.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</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('HTML5.1', 'grouping-content.html#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Pas de changement de {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#semantics.html#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Retrait de la restriction sur l'interdiction de l'utilisation de l'élément <code><main></code> comme descendant d'un élément {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, ou {{HTMLElement("nav")}}. Retrait de la restriction interdisant d'utiliser plusieurs fois <code><main></code> dans un document.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Définition intiale.</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.main")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<div> +<ul> + <li>Les éléments qui permettent de structurer un document HTML + <ul> + <li>{{HTMLElement("html")}}</li> + <li>{{HTMLElement("head")}}</li> + <li>{{HTMLElement("body")}}</li> + </ul> + </li> + <li>Les éléments liés au plan d'un document HTML : + <ul> + <li>{{HTMLElement("article")}}</li> + <li>{{HTMLElement("aside")}}</li> + <li>{{HTMLElement("footer")}}</li> + <li>{{HTMLElement("header")}}</li> + <li>{{HTMLElement("nav")}}</li> + </ul> + </li> +</ul> +</div> diff --git a/files/fr/web/html/element/map/index.html b/files/fr/web/html/element/map/index.html new file mode 100644 index 0000000000..8bbb1e21b7 --- /dev/null +++ b/files/fr/web/html/element/map/index.html @@ -0,0 +1,116 @@ +--- +title: <map> +slug: Web/HTML/Element/map +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/map +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML<strong> <code><map></code></strong> est utilisé avec des éléments {{HTMLElement("area")}} afin de définir une image cliquable divisée en régions.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/map.html", "tabbed-standard")}}</div> + +<div 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> !</div> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("name")}}</dt> + <dd>Cet attribut fournit un nom afin que la carte cliquable puisse être référencée. Cet attribut est obligatoire et sa valeur doit être une chaîne de caractères non-vide qui ne contient pas de blancs. La valeur de cet attribut doit être unique pour tous les éléments {{HTMLElement("map")}} du document. Si l'attribut universel <code>id</code> est utilisé, <code>name</code> devra avoir la même valeur que celui-ci.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<p>Dans cet exemple, la partie gauche est un lien vers une page et la partie droite est inactive.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><map name="exemple-map-1"> + <area shape="rect" coords="0,0 200,200" href="https://developer.mozilla.org" target="_blank" /> + <area shape="default" /> +</map> +<img usemap="#exemple-map-1" src="https://mdn.mozillademos.org/files/14546/map.png"> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","450","230")}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Tout élément dont <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Mod%C3%A8le_de_contenu_transparent">le modèle de contenu est transparent</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 <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">du contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLMapElement")}}</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', 'embedded-content.html#the-map-element', '<map>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-map-element', '<map>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '<map>')}}</td> + <td>{{Spec2('HTML4.01')}}</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.map")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("a")}}</li> + <li>{{HTMLElement("area")}}</li> +</ul> diff --git a/files/fr/web/html/element/mark/index.html b/files/fr/web/html/element/mark/index.html new file mode 100644 index 0000000000..a7bde22383 --- /dev/null +++ b/files/fr/web/html/element/mark/index.html @@ -0,0 +1,159 @@ +--- +title: '<mark> : l''élément de marquage du texte' +slug: Web/HTML/Element/mark +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/mark +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><mark></code></strong> représente un texte marqué ou surligné à cause de sa pertinence dans le contexte. Il peut par exemple être utilisé afin d'indiquer les correspondances d'un mot-clé recherché au sein d'un document.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/mark.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> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Notes_d'utilisation"><strong>Notes d'utilisation</strong></h2> + +<ul> + <li>Au sein d'une citation ({{HTMLElement("q")}}) ou dans un autre bloc ({{HTMLElement("blockquote")}}), le texte surligné marque généralement du texte référencé en dehors de la citation ou qui est indiqué pour demander une attention particulière bien que l'auteur ne considère pas ce texte comme important.</li> + <li>Au sein du texte principal, le texte surligné marque du texte d'une pertinence partiulière pour l'utilisateur (par exemple lorsqu'il recherche un terme en particulier).</li> + <li><code><mark></code> ne doit pas être utilisé pour de la coloration syntaxique, c'est l'élément {{HTMLElement("span")}} qui devra être utilisé.</li> + <li><code><mark></code> ne doit pas être confondu avec {{HTMLElement("strong")}}. L'élément {{HTMLElement("strong")}} est utilisé afin d'indiquer des fragments de texte <em>importants</em> alors que <code><mark></code> est utilisé afin d'indiquer des fragments de texte <em>pertinents</em>.</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_simple">Exemple simple</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p> + L'élément &lt;mark&gt; est utilisé pour + <mark>mettre en avant</mark> + du texte pertinent dans le contexte. +</p> +</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Exemple_simple","100%","100%")}}</p> + +<h3 id="Identifier_des_passages">Identifier des passages</h3> + +<p>Dans cet exemple, on utilise <code><mark></code> pour marquer les résultats d'une recherche dans un passage.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p>It is a dark time for the Rebellion. Although the Death +Star has been destroyed, <mark class="match">Imperial</mark> +troops have driven the Rebel forces from their hidden base and +pursued them across the galaxy.</p> + +<p>Evading the dreaded <mark class="match">Imperial</mark> +Starfleet, a group of freedom fighters led by Luke Skywalker +has established a new secret base on the remote ice world of +Hoth.</p></pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("Identifier_des_passages", 650, 130)}}</p> + +<h2 id="Accessibilité">Accessibilité</h2> + +<p>Par défaut, la plupart des outils d'assistance n'annoncent pas la présence de l'élément <code>mark</code>. On peut le rendre annonçable via la propriété CSS {{cssxref("content")}} et grâce aux pseudo-éléments {{cssxref("::before")}} et {{cssxref("::after")}}.</p> + +<pre>mark::before, +mark::after { + clip-path: inset(100%); + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +mark::before { + content: " [Début du marquage]"; +} + +mark::after { + content: " [Fin du marquage] "; +} +</pre> + +<p>Certaines personnes qui utilisent des lecteurs d'écran désactivent sciemment ces annonces pour éviter une verbosité trop importante. Il est donc important de ne pas abuser de cette technique et de ne l'appliquer qu'à des situations où il est nécessaire de comprendre que du contenu a été marqué.</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/"><em>Short note on making your mark (more accessible) | The Paciello Group</em> (en anglais)</a></li> + <li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html"><em>Tweaking Text Level Styles | Adrian Roselli</em> (en anglais)</a></li> +</ul> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">Contenu phrasé</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 <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">du contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</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', 'text-level-semantics.html#the-mark-element','<mark>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-mark-element', '<mark>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</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> + +<p>{{Compat("html.elements.mark")}}</p> diff --git a/files/fr/web/html/element/marquee/index.html b/files/fr/web/html/element/marquee/index.html new file mode 100644 index 0000000000..db5495237a --- /dev/null +++ b/files/fr/web/html/element/marquee/index.html @@ -0,0 +1,127 @@ +--- +title: '<marquee> : l''élément de fronton (obsolète)' +slug: Web/HTML/Element/marquee +tags: + - Element + - HTML + - Non-standard + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/marquee +--- +<div>{{HTMLRef}}{{non-standard_header}}{{obsolete_header}}</div> + +<p>L'élément HTML <strong><code><marquee></code></strong> est utilisé pour insérer une zone de texte défilant.</p> + +<h2 id="Attributs">Attributs</h2> + +<dl> + <dt>{{htmlattrdef("behavior")}}</dt> + <dd>Définit comment le texte defile à l'intérieur du <code><marquee></code>. Les valeurs possibles sont <code>scroll</code>, <code>slide</code> et <code>alternate</code>. Si aucune valeur n'est spécifiée, la valeur par défaut est <code>scroll</code>.</dd> + <dt>{{htmlattrdef("bgcolor")}}</dt> + <dd>Définit la couleur de fond en utilisant le nom de la couleur ou son code hexadécimal.</dd> + <dt>{{htmlattrdef("direction")}}</dt> + <dd>Définit la direction du défilement dans le <code><marquee></code>. Les valeurs possibles sont <code>left</code>, <code>right</code>, <code>up</code> et <code>down</code>. SI aucune valeur n'est spécifiée, la valeur par défaut est <code>left</code>.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>Définit la hauteur en pixels ou en pourcentage.</dd> + <dt>{{htmlattrdef("hspace")}}</dt> + <dd>Définit la marge horizontale.</dd> + <dt>{{htmlattrdef("loop")}}</dt> + <dd>Définit le nombre de fois que le marquee va faire défiler le texte. Si aucune valeur n'est spécifiée, la valeur par défaut est <code>-1</code>, ce qui signifie que le marquee va défiler indéfiniment.</dd> + <dt>{{htmlattrdef("scrollamount")}}</dt> + <dd>Définit la quantité de défilement de chaque défilement en pixels. La valeur par défaut est <code>6</code>.</dd> + <dt>{{htmlattrdef("scrolldelay")}}</dt> + <dd>Définit l'intervalle entre chaque défilement en millisecondes. La valeur par défaut est <code>85</code>. Notez que toute valeur inférieure à 60 sera ignorée et 60 sera utilisé à la place, à moins que<code> truespeed </code>ne soit spécifié.</dd> + <dt>{{htmlattrdef("truespeed")}}</dt> + <dd>Par défaut, les valeurs de <code>scrolldelay</code> inférieures à 60 sont ignorées. <code>Si truespeed </code>est présent, ces valeurs ne seront pas ignorées.</dd> + <dt>{{htmlattrdef("vspace")}}</dt> + <dd>Définit la marge verticale en pixel ou en pourcentage.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>Définit la largeur en pixel en ou pourcentage.</dd> +</dl> + +<h2 id="Gestionnaire_d’évènements">Gestionnaire d’évènements</h2> + +<dl> + <dt>{{htmlattrdef("onbounce")}}</dt> + <dd>Se déclenche quand le <code><marquee></code> arrive à la fin de son défilement. Il peut seulement se déclencher quand <code>behavior</code> est mis à <code>alternate</code>.</dd> + <dt>{{htmlattrdef("onfinish")}}</dt> + <dd>Se déclenche quand le <code><marquee></code> arrive à la fin de tous ses défilements tels que définis par l'attribut <code>loop</code>. Il peut seulement se déclencher quand le nombre de défilements est supérieur à 0.</dd> + <dt>{{htmlattrdef("onstart")}}</dt> + <dd>Se déclenche quand le <code><marquee></code> commence à défiler.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<dl> + <dt><code>start()</code></dt> + <dd>Commence à faire défiler le marquee.</dd> + <dt><code>stop()</code></dt> + <dd>Arrête de faire défiler le marquee.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><marquee>ʕノ•ᴥ•ʔノ ︵ ┻━┻</marquee> + +<marquee direction="up">Ce texte va défiler de bas en haut</marquee> + +<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"> + <marquee behavior="alternate"> + Ce texte va rebondir + </marquee> +</marquee></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples", 600, 450)}}</p> +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Interface DOM</th> + <td>{{DOMxRef("HTMLMarqueeElement")}}</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', 'obsolete.html#the-marquee-element-2', '<marquee>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Rendu obsolète afin d'être remplacé par CSS. Définition du comportement attendu à des fins de rétrocompatibilité.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'obsolete.html#the-marquee-element-0', '<marquee>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Rendu obsolète afin d'être remplacé par CSS. Définition du comportement attendu à des fins de rétrocompatibilité.</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.marquee")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{DOMxRef("HTMLMarqueeElement")}}</li> +</ul> diff --git a/files/fr/web/html/element/menu/index.html b/files/fr/web/html/element/menu/index.html new file mode 100644 index 0000000000..60c43d4196 --- /dev/null +++ b/files/fr/web/html/element/menu/index.html @@ -0,0 +1,217 @@ +--- +title: <menu> +slug: Web/HTML/Element/menu +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/menu +--- +<div>{{HTMLRef}}{{SeeCompatTable}}</div> + +<p>L'élément HTML <strong><code><menu></code></strong> représente un groupe de commandes que l'utilisateur peut utiliser ou activer. Il peut être utilisé afin de créer des menus (affichés en haut d'un écran par exemple) et des menus contextuels (qui apparaissent au clic-droit ou après avoir cliqué sur un bouton).</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme pour tous les autres éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur <code><menu></code>.</p> + +<dl> + <dt>{{htmlattrdef("label")}} {{Deprecated_inline}}</dt> + <dd>Le nom du menu qui est affiché pour l'utilisateur. Lorsque cet attribut est utilisé dans un menu imbriqué, c'est le nom affiché pour le sous-menu. Cet attribut doit uniquement être utilisé lorsque l'élément parent est un élément {{HTMLElement("menu")}}.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>Cet attribut indique le type de menu qui est déclaré. C'est un attribut à valeur contrainte qui peut prendre l'une des valeurs suivantes : + <ul> + <li><code>context</code> {{Deprecated_inline}} : Cette valeur indique que le menu est dans un état de popup et qu'il contient des commandes relatives à un autre élément. Ce menu peut être référencé via l'attribut {{htmlattrxref("menu", "button")}} d'un élément {{HTMLElement("button")}} ou via l'attribut <a href="/fr/docs/Web/HTML/Attributs_universels#attr-contextmenu"><code>contextmenu</code></a> d'un élément. Cette valeur est la valeur par défaut de l'attribut lorsque l'élément parent est également un élément <code><menu></code>.</li> + <li><code>toolbar</code> : Cette valeur indique que le menu est une barre d'outils qui contient différentes commandes disponibles. Ces commandes peuvent être construites avec plusieurs éléments {{HTMLElement("li")}} ou avec du contenu de flux qui décrit les commandes disponibles. Cette valeur est la valeur par défaut de l'attribut.</li> + </ul> + </dd> +</dl> + +<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> + +<ul> + <li>Les éléments {{HTMLElement("menu")}} et {{HTMLElement("ul")}} représentent tous les deux une liste non-ordonnées d'éléments. {{HTMLElement("ul")}} doit être utilisés pour des éléments qui doivent uniquement être affichés alors que {{HTMLElement("menu")}} est conçu pour des éléments interactifs.</li> + <li><strong>Un menu contextuel</strong> se compose d'un élément <code><menu></code> qui contient des éléments {{HTMLElement("menuitem")}} dont chacun représente une option sélectionnable dans le menu. D'autres éléments <code><menu></code> peuvent être imbriqués afin de créer des sous-menus et l'élément {{HTMLElement("hr")}} peut être utilisé afin d'ajouter des séparateurs. Les menus contextuels sont associés à un élément d'u document au travers de son attribut {{htmlattrxref("contextmenu")}}. Lorsqu'il s'agit d'un bouton de menu, c'est l'attribut {{htmlattrxref("menu", "button")}} de {{HTMLElement("button")}} qui décrit ce lien.</li> + <li><strong>Les menus de barre d'outils </strong>se composent d'un élément <code><menu></code> dont le contenu est décrit avec des éléments {{HTMLElement("li")}} qui forment une liste non-ordonnée ou avec du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a> qui décrit les commandes et les options disponibles.</li> + <li>Cet élément a été déprécié en HTML4 mais fut réintroduit dans la spécification HTML5.1 et dans le standard évolutif HTML.</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Menu_contextuelDeprecated_inline">Menu contextuel{{Deprecated_inline}}</h3> + +<p>{{Deprecated_header}}</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><!-- Un élément <div> avec un menu contextuel --> +<div contextmenu="popup-menu"> + Vous pouvez effectuer un clic-droit pour voir le menu. +</div> + +<menu type="context" id="popup-menu"> + <menuitem>Action</menuitem> + <menuitem>Une autre action</menuitem> + <hr> + <menuitem>Une action après un séparateur</menuitem> +</menu> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">div { + width: 300px; + height: 80px; + background-color: lightgreen; +} +</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample('Menu_contextuel', '100%', '80')}}</p> + +<h3 id="Bouton_de_menu">Bouton de menu</h3> + +<div class="warning"> +<p><strong>Attention :</strong> Les boutons de menu n'ont pas encore été implémentés dans les navigateurs et {{HTMLElement("menuitem")}} est désormais obsolète.</p> +</div> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><!-- Un bouton qui affiche un menu lorsqu'on clique dessus. --> +<button type="menu" menu="popup-menu"> + Dérouler +</button> + +<menu type="context" id="popup-menu"> + <menuitem>Action</menuitem> + <menuitem>Une autre action</menuitem> + <hr> + <menuitem>Une action après un séparateur</menuitem> +</menu> +</pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample('Bouton_de_menu', '100%', '50')}}</p> + +<h3 id="Barre_d’outils_experimental_inline">Barre d’outils {{experimental_inline}}</h3> + +<div class="warning"> +<p><strong>Attention : </strong>Les menus sous forme de barres d'outils n'ont pas encore été implémentés dans les navigateurs.</p> +</div> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><!-- Un menu pour un éditeur basique + avec deux boutons de menu. --> +<menu type="toolbar"> + <li> + <button type="menu" menu="file-menu">Fichier</button> + <menu type="context" id="file-menu"> + <menuitem label="Nouveau" onclick="newFile()"> + <menuitem label="Enregistrer" onclick="saveFile()"> + </menu> + </li> + <li> + <button type="menu" menu="edit-menu">Éditer</button> + <menu type="context" id="edit-menu"> + <menuitem label="Couper" onclick="cutEdit()"> + <menuitem label="Copier" onclick="copyEdit()"> + <menuitem label="Coller" onclick="pasteEdit()"> + </menu> + </li> +</menu> +</pre> + +<h4 id="Résultat_3">Résultat</h4> + +<p>{{EmbedLiveSample("Barre_d’outils", '100%', '100')}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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> et <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a> si le menu est une liste (l'état par défaut, sauf si l'élément parent est lui-même un élément <code><menu></code> auquel cas le menu est dans un état contextuel).</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Si le menu est une liste : du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a> ou zéro ou plusieurs éléments {{HTMLElement("li")}}, {{HTMLElement("script")}} et {{HTMLElement("template")}}.<br> + Si le menu est dans un menu contextuel : zéro ou plusieurs éléments {{HTMLElement("menu")}}, {{HTMLElement("menuitem")}}, {{HTMLElement("hr")}}, {{HTMLElement("script")}} et {{HTMLElement("template")}}.</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>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLMenuElement")}}</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", "grouping-content.html#the-menu-element", "<menu>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Aucune modification depuis la dernière dérivation, {{SpecName("HTML5.3")}}</td> + </tr> + <tr> + <td>{{SpecName("HTML5.3", "grouping-content.html#the-menu-element", "<menu>")}}</td> + <td>{{Spec2("HTML5.3")}}</td> + <td>Aucune modification.</td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "grouping-content.html#the-menu-element", "<menu>")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>Dérivation {{SpecName("HTML WHATWG")}}, suppression du type <code>context</code>.</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "interactive-elements.html#the-menu-element", "<menu>")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Dérivation de {{SpecName("HTML WHATWG")}}, 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.menu")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments HTML relatifs aux listes : + <ul> + <li>{{HTMLElement("ol")}}</li> + <li>{{HTMLElement("ul")}}</li> + <li>{{HTMLElement("li")}}</li> + <li>{{HTMLElement("hr")}}</li> + <li>{{HTMLElement("dir")}} {{obsolete_inline}}</li> + </ul> + </li> + <li>L'attribut universel <a href="/fr/docs/Web/HTML/Attributs_universels#attr-contextmenu"><code>contextmenu</code></a> qui peut être utilisé sur un élément et qui fait référence à l'attribut <code>id</code> d'un élément <code>menu</code> avec <code>context</code> qui vaut {{htmlattrxref("type","menu",'type="context"')}}.</li> +</ul> diff --git a/files/fr/web/html/element/menuitem/index.html b/files/fr/web/html/element/menuitem/index.html new file mode 100644 index 0000000000..da6873ec18 --- /dev/null +++ b/files/fr/web/html/element/menuitem/index.html @@ -0,0 +1,155 @@ +--- +title: <menuitem> +slug: Web/HTML/Element/menuitem +tags: + - Déprécié + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/menuitem +--- +<p>{{HTMLRef}}{{Deprecated_Header("HTML5.2")}}</p> + +<p>L'élément HTML <strong><code><menuitem></code></strong> représente une commande qu'un utilisateur peut utiliser via un menu contextuel ou un menu rattaché à un bouton.</p> + +<p>Une commande peut être définie explicitement, avec un texte et éventuellement une icône ou bien faire référence à une commande décrite dans un autre élément. Une commande peut prendre la forme d'une case à cocher ou d’un groupe de boutons radio.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut également <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> et notamment <code>title</code> qui peut être utilisé afin de décrire une commande ou pour fournir des indications quant à l'utilisation de celle-ci.</p> + +<dl> + <dt>{{htmlattrdef("checked")}}</dt> + <dd>Un attribut booléen qui indique si la commande est sélectionné. Cet attribut peut uniquement être utilisé lorsque l'attribut <code>type</code> vaut <code>checkbox</code> ou <code>radio</code>.</dd> + <dt>{{htmlattrdef("command")}}</dt> + <dd>Cet attribut définit l'identifiant d'un autre élément qui indique une commande invoquée indirectement. Cet attribut ne peut pas être utilisé si les attributs <code>checked</code>, <code>disabled</code>, <code>icon</code>, <code>label</code>, <code>radiogroup</code> ou <code>type</code> sont utilisés.</dd> + <dt>{{htmlattrdef("default")}}</dt> + <dd>Un attribut booléen qui indique la commande par défaut du menu.</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>Un attribut booléen qui indique que la commande n'est pas disponible dans l'état actuel. On notera que <code>disabled</code> est sémantiquement différent de <code>hidden</code>.</dd> + <dt>{{htmlattrdef("icon")}}</dt> + <dd>Une URL vers image qui représente la commande.</dd> + <dt>{{htmlattrdef("label")}}</dt> + <dd>Le nom de la commande affiché pour l'utilisateur. Cet attribut est obligatoire lorsque l'attribut <code>command</code> est absent.</dd> + <dt>{{htmlattrdef("radiogroup")}}</dt> + <dd>Cet attribut indique le nom d'un groupe de commandes étant des boutons radio. Cet attribut peut uniquement être utilisé lorsque <code>type</code> vaut <code>radio</code>.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>Cet attribut indique le type de commande dans le menu. C'est un attribut à valeur contrainte qui peut prendre une des valeurs suivantes : + <ul> + <li><code>command</code> : une commande associée à une action donnée. C'est la valeur par défaut de l'attribut.</li> + <li><code>checkbox</code> : une commande qui peut avoir un état parmi deux états différents.</li> + <li><code>radio</code> : une commande qui représente une sélection au sein d'un groupe de commandes qui sont des boutons radio.</li> + </ul> + </dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><!-- Un élément <div> avec un menu contextuel --> +<div contextmenu="popup-menu"> + Effectuez un clic-droit pour voir le menu contextuel +</div> + +<menu type="context" id="popup-menu"> + <menuitem type="checkbox" checked>Une case à cocher</menuitem> + <hr> + <menuitem type="command" label="Cette commande ne fait rien" icon="https://developer.cdn.mozilla.net/static/img/favicon144.png"> + Les commandes n'affichent pas leurs contenus. + </menuitem> + <menuitem type="command" label="Cette commande contient du JavAScript" onclick="alert('command clicked')"> + Les commandes n'affichent pas leurs contenus. + </menuitem> + <hr> + <menuitem type="radio" radiogroup="group1">Bouton radio 1</menuitem> + <menuitem type="radio" radiogroup="group1">Bouton radio 2</menuitem> +</menu> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + width: 300px; + height: 80px; + background-color: lightgreen; +} +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample('Exemples', '300', '80')}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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>Aucune.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Aucun, c'est un élément vide.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>Cet élément doit avoir une balise ouvrante et ne doit pas avoir de balise fermante.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Un élément {{HTMLElement("menu")}} lorsque son attribut vaut <code>type</code> ou que cet élément <code><menu></code> est lui même le fils d'un élément <code><menu</code>>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLMenuItemElement")}}</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", "obsolete.html#menuitem", "<menuitem>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Aucune modification depuis la dernière dérivation {{SpecName("HTML5.2")}}</td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "obsolete.html#elementdef-menuitem", "<menuitem>")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>Dérivation de {{SpecName("HTML WHATWG")}}, rendue obsolète.</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "interactive-elements.html#the-menuitem-element", "<menuitem>")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Dérivation de {{SpecName("HTML WHATWG")}}, 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.menuitem")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("menu")}}</li> + <li><a href="https://hacks.mozilla.org/2011/11/html5-context-menus-in-firefox-screencast-and-code/">Les menus contextuels HTML5 dans Firefox</a></li> +</ul> diff --git a/files/fr/web/html/element/meta/index.html b/files/fr/web/html/element/meta/index.html new file mode 100644 index 0000000000..cc937074ff --- /dev/null +++ b/files/fr/web/html/element/meta/index.html @@ -0,0 +1,467 @@ +--- +title: '<meta> : l''élément de métadonnées du document' +slug: Web/HTML/Element/meta +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/meta +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><meta></code></strong> représente toute information de métadonnées qui ne peut pas être représentée par un des éléments ({{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} ou {{HTMLElement("title")}})</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme tous les autres éléments, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<div class="blockIndicator note"> +<p><strong>Note : </strong>Il faut préciser que l'attribut {{htmlattrxref("name", "meta")}} possède une signification spécifique à l'élément {{HTMLElement("meta")}} et que l'attribut {{htmlattrxref("itemprop")}} ne doit pas être utilisé quand l'un de ces attributs est déjà utilisé : {{htmlattrxref("name", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} ou {{htmlattrxref("charset", "meta")}}.</p> +</div> + +<dl> + <dt>{{htmlattrdef("charset")}}</dt> + <dd>Cet attribut déclare l'encodage utilisé par la page. Il peut être outrepassé de manière locale en utilisant l'attribut <code><strong>lang</strong></code> d'un élément. La valeur de cet attribut est une chaîne de caractères et doit être l'un des <em>noms MIME préférés</em> d'un encodage comme <a href="https://www.iana.org/assignments/character-sets/character-sets.xml">spécifié par l'IANA</a>. Bien que le standard ne fixe pas d'encodage particulier, il fournit cependant quelques recommendations : + <ul> + <li>Les auteurs sont invités à utiliser UTF-8.</li> + <li>Les auteurs ne devraient pas utiliser d'encodage incompatible avec l'ASCII (c'est à dire ceux dont les codes 8-bits de 0x20 à 0x7E ne correspondent pas, de manière respective, aux codes Unicode 0x0020 à 0x007E) car ceux-ci représentent un risque de sécurité, les navigateurs ne les supportant pas pouvant traduire du contenu bénin en des éléments HTML. Ceci est le cas pour les jeux de caractères suivants : <code>JIS_C6226-1983</code>, <code>JIS_X0212-1990</code>, <code>HZ-GB-2312</code>, <code>JOHAB</code>, la famille d'encodage <code>ISO-2022</code> et la famille d'encodage <code>EBCDIC</code>.</li> + <li> + <div class="warning"> + <p>Les auteurs ne doivent pas utiliser <code>CESU-8</code>, <code>UTF-7</code>, <code>BOCU-1</code> et <code>SCSU</code>. Ceux-ci rejoignent le cas précédents et n'ont pas été conçus pour être utilisés sur le web. Certaines attaques de types XSS (<em>Cross-site scripting</em>) ont pu être recensées avec ces encodages.</p> + </div> + </li> + <li> + <div class="warning"> + <p>Les auteurs ne devraient pas utiliser <code>UTF-32</code> car certains algorithmes d'encodage HTML5 ne peuvent différiencer <code>UTF-32</code> de <code>UTF-16</code>.</p> + </div> + </li> + </ul> + + <div class="note"><strong>Notes :</strong> + + <ul> + <li>Le jeux de caractères déclaré doit correspondre à celui utilisé dans la page. Il est inutile de déclarer un jeu de caractères incorrect (cela entraînant également une mauvaise expérience utilisateur).</li> + <li>L'élément {{HTMLElement("meta")}} doit appartenir à l'élément {{HTMLElement("head")}} et doit apparaître parmi les <strong>512 premiers octets de la page</strong>. En effet, certains navigateurs ne consultent seulement ces premiers octets pour déterminer l'encodage utilisé pour la page.</li> + <li>L'élément {{HTMLElement("meta")}} ne représente qu'une partie de l'<a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html#encoding-sniffing-algorithm">algorithme déterminant le jeu de caractères</a> à appliquer sur la page par le navigateur. Ainsi, l'en-tête HTTP Content-Type et tous les éléments BOM auront une priorité supérieure à cet élément.</li> + <li>Définir le jeu de caractères utilisé grâce à cet attribut représente une bonne pratique et est fortement recommandé. Si aucun encodage n'est défini pour la page, plusieurs techniques XSS peuvent porter atteinte à l'utilisateur (voir l'exemple de la <a class="external" href="https://code.google.com/p/doctype-mirror/wiki/ArticleUtf7">technique XSS de recours à UTF-7</a>). Toujours renseigner cet élément meta protégera contre ces dangers.</li> + <li>L'élément {{HTMLElement("meta")}} est un synonyme de <code><meta http-equiv="Content-Type" content="text/html; charset=<em>IANAcharset</em>"></code> utilisé avant HTML5. Ici <em><code>IANAcharset</code> </em>correspond à la valeur de l'attribut {{htmlattrxref("charset", "meta")}} correspondant. Bien qu'elle soit obsolète et qu'elle ne soit plus recommandée, cette syntaxe est toujours autorisée.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("content")}}</dt> + <dd>Cet attribut fournit la valeur associée avec l'attribut {{htmlattrxref("http-equiv", "meta")}} ou l'attribut {{htmlattrxref("name", "meta")}} suivant le contexte utilisé.</dd> + <dt>{{htmlattrdef("http-equiv")}}</dt> + <dd>Cet attribut pouvant prendre des valeurs pré-définies représente un objet pouvant modifier le comportement des serveurs ou des agents utilisateur. Sa valeur est définie grâce à l'attribut {{htmlattrxref("content", "meta")}} et peut être l'une des suivantes : + <dl> + <dt><code>content-language</code> {{obsolete_inline}}</dt> + <dd>Définit la langue par défaut utilisée par une page + <div class="warning"><strong>Attention !</strong> Cette valeur n'est plus recommandée et ne doit donc plus être utilisée. L'attribut <code><strong>lang</strong></code> de l'élément {{HTMLElement("body")}} doit être utilisé pour remplir cette fonction.</div> + </dd> + <dt><code>Content-Security-Policy</code></dt> + <dd>Cette valeur permet aux administrateurs de sites web de définir des règles de gestion de contenu pour les ressources qui sont servies. Cela permet notamment d'indiquer les origines valides et les points d'accès aux scripts afin de protéger contre les attaques XSS.</dd> + <dt><code>content-type</code> {{obsolete_inline}}</dt> + <dd>Ce champ d'attribut définit le <a href="/fr/docs/Glossaire/Type_MIME">type MIME</a> du document et peut être suivi par son jeu de caractères. Il respecte la même syntaxe que le champ <code>content-type</code> appartenant à l'en-tête HTTP. Cet attribut faisant, lui, partie d'un élément HTML, il n'est pas possible d'utiliser la plupart des valeurs. La syntaxe correcte pour son contenu est donc la chaîne de caractère <code>'text/html</code>' éventuellement suivie par un jeu de caractères avec la syntaxe suivante : '<code>; charset=</code><em><code>IANAcharset</code></em>' où <code>IANAcharset</code> est l'appellation MIME du jeu de caractères, <a class="external" href="https://www.iana.org/assignments/character-sets">présentée par l'IANA</a> + <div class="warning"><strong>Notes d'utilisation</strong> + <ul> + <li>Ce champ n'est plus recommandé et ne donc doit pas être utilisé. L'attribut {{htmlattrxref("charset", "meta")}} de l'élément {{HTMLElement("meta")}} doit être utilisé à la place.</li> + <li>Étant donné que l'élément {{HTMLElement("meta")}} peut ne pas être utilisé pour changer le type d'un document XHTML, ou d'un document HTML5 précédé par une syntaxe XHTML, il ne faut pas utiliser ce champs pour définir un type MIME étant un type MIME XHTML. Cela serait incorrect.</li> + <li>Seuls les documents HTML peuvent utiliser ce champ, cela entraîne donc une certaine redondance. C'est pourquoi il a été rendu obsolète et remplacé par l'attribut {{htmlattrxref("charset", "meta")}}.</li> + </ul> + </div> + </dd> + <dt><code>refresh</code></dt> + <dd>Ce champ définit : + <ul> + <li>le nombre de secondes qu'il faudrait attendre avant de recharger la page si l'attribut {{htmlattrxref("content", "meta")}} contient seulement un nombre entier positif</li> + <li>le nombre de secondes qu'il faudrait attendre avant que la page soit redirigée vers une autre page, si l'attribut {{htmlattrxref("content", "meta")}} contient un nombre entier positif suivi par la chaîne de caractères '<code>;url=</code>' ainsi qu'une URL valide.</li> + </ul> + </dd> + <dt><code>set-cookie</code> {{obsolete_inline}}{{non-standard_inline}}</dt> + <dd>Ce champ définit un cookie pour la page. Son contenu doit respecter la syntaxe énoncée par la <a class="external" href="https://tools.ietf.org/html/draft-ietf-httpstate-cookie-14">IETF HTTP Cookie Specification</a>. + <div class="warning"><strong>Attention !</strong> Ce champ est désormais obsolète et ne doit donc pas être utilisé. L'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Set-Cookie">Set-Cookie</a> doit être utilisée à la place. Cette valeur a été retirée du standard et n'est plus prise en charge à partir de <a href="https://www.fxsitecompat.dev/en-CA/docs/2019/setting-cookies-with-meta-http-equiv-is-no-longer-allowed/">Firefox 68</a> et de <a href="https://www.chromestatus.com/feature/6170540112871424">Chrome 65</a>.</div> + </dd> + </dl> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>Cet attribut définit le nom d'un métadonnée au niveau du document. Il ne doit pas être utilisé si l'un des attributs {{htmlattrxref("itemprop", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} ou {{htmlattrxref("charset", "meta")}} est utilisé.<br> + Le nom de la métadonnée document est associé à une valeur contenue dans l'attribut {{htmlattrxref("content", "meta")}}. Les noms possibles et la signification de leurs valeurs (contenues dans l'attribut {{htmlattrxref("content", "meta")}}) sont : + <ul> + <li><code>application-name</code>, qui définit le nom de l'application web utilisée dans la page + <div class="note"><strong>Notes :</strong> + <ul> + <li>Les navigateurs peuvent l'utiliser pour identifier l'application. Il est à distinguer de l'élément {{HTMLElement("title")}} qui contient généralement le nom de l'application mais qui contient aussi des informations comme le nom du document ou un statut</li> + <li>Les pages web simples ne devraient pas utiliser cet attribut de métadonnée.</li> + </ul> + </div> + </li> + <li><code>author</code>, définit le nom de l'auteur du document (pas de contrainte de format)</li> + <li><code>description</code>, contient un résumé concis et pertinent du contenu de la page. Plusieurs navigateurs, dont Firefox et Opera, utilisent cette métadonnée comme description de la page lorsque celle-ci est mise dans les favoris.</li> + <li><code>generator</code>, contient l'identifiant du logiciel ayant généré la page (pas de contrainte de format)</li> + <li><code>keywords</code>, contient une liste de mots-clés séparés par des virgules. Ces mots-clés sont pertinents et relatifs au contenu de la page.</li> + <li><code>referrer</code> qui contrôle <a href="/fr/docs/Web/HTTP/Headers/Referer">l'en-tête HTTP <code>Referer</code> </a>attachée aux requêtes envoyées à partir du document : + <table class="standard-table"> + <caption>Valeurs pour l'attribut <code>content</code> de <code><meta name="referrer"></code></caption> + <tbody> + <tr> + <td><code>no-referrer</code></td> + <td>Aucun en-tête HTTP <code>Referer</code> n'est envoyé.</td> + </tr> + <tr> + <td><code>origin</code></td> + <td>Seule l'<a href="/fr/docs/Glossary/Origin">origine</a> du document est envoyée.</td> + </tr> + <tr> + <td><code>no-referrer-when-downgrade</code></td> + <td>L'<a href="/fr/docs/Glossary/Origin">origine</a> est envoyée envers les URL qui sont aussi sécurisée que la page courante (https→https). Aucun référent n'est envoyé lorsque l'URL est moins sécurisée (https→http). Cette valeur est la valeur par défaut.</td> + </tr> + <tr> + <td><code>origin-when-crossorigin</code></td> + <td>L'URL complète (sans les paramètres) est envoyée pour les requêtes provenant de la même origine. Dans les autres cas, seule l'<a href="/fr/docs/Glossary/Origin">origine</a> est envoyée.</td> + </tr> + <tr> + <td><code>same-origin</code></td> + <td>Un référent est envoyé <a href="/fr:docs/Web/Security/Same-origin_policy">pour les sites d'origine équivalente</a>, mais les requêtes entre différentes origines ne contiendra pas de référent.</td> + </tr> + <tr> + <td><code>strict-origin</code></td> + <td>Seule l'origine du document est envoyée pour les destinations <em>a priori</em> aussi sécurisées que la page courante (HTTPS->HTTPS) mais cette information n'est pas envoyée vers une destination moins sécurisée (HTTPS->HTTP).</td> + </tr> + <tr> + <td><code>strict-origin-when-cross-origin</code></td> + <td>L'URL complète est envoyée pour une requête provenant de la même origine. Seule l'origine du document est envoyée pour les destinations aussi sécurisées que la page (HTTPS->HTTPS), aucun en-tête n'est envoyé pour les destinations moins sécurisées (HTTPS->HTTP).</td> + </tr> + <tr> + <td><code>unsafe-URL</code></td> + <td>L'URL complète (sans les paramètres) est envoyée pour les requête d'origines équivalents et pour les autres requêtes (<em>cross-origin</em>).</td> + </tr> + </tbody> + </table> + + <div class="note"> + <p><strong>Notes:</strong></p> + + <ul> + <li>Certains navigateurs prennent en charge les valeurs dépréciées <code>always</code>, <code>default</code> et <code>never</code>.</li> + <li>L'insertion dynamique de <code><meta name="referrer"></code> (grâce à <a href="/fr/docs/Web/API/Document/write"><code>document.write</code></a> ou <a href="/fr/docs/Web/API/Node/appendChild"><code>appendChild</code></a>) rend le comportement imprévisible.</li> + <li>Lorsque plusieurs règles conflictuelles sont définies, c'est la règle <code>no-referrer</code> qui est appliquée.</li> + </ul> + </div> + </li> + <li><code>theme-color</code> qui indique une suggestion de couleur que l'agent utilisateur devrait prendre en compte afin de personnaliser l'affichage de la page ou l'interface utilisateur environnante. L'attribut <code>content</code> contiendra une couleur valide au sens CSS (cf. {{cssxref("<color>")}}).</li> + <li> + <dl> + <dt><code>color-scheme</code></dt> + <dd> + <p>Définit un ou plusieurs modes de couleurs avec lesquels le document est compatible. Le navigateur utilisera cette information ainsi que les réglages du navigateur ou de l'appareil pour déterminer les couleurs à utiliser (que ce soit pour l'arrière-plan, les contrôles, les barres de défilement, etc.). <code><meta name="color-scheme"></code> sert principalement à indiquer la compatibilité et la préférence pour les différents modes de couleur (sombre / clair entre autres).</p> + + <p>La valeur de {{htmlattrxref("content","meta")}} pour <code>color-scheme</code> peut être :</p> + + <dl> + <dt><code>normal</code></dt> + <dd>Le document n'est pas affecté par les modes de couleurs et devrait utiliser la palette de couleur par défaut.</dd> + <dt><code>[light</code> | <code>dark]+</code></dt> + <dd>Un ou plusieurs modes de couleurs sont pris en charge par le document. Si un nom de mode est répété, cela est équivalent à le mentionner une seule fois. Lorsque plusieurs modes sont présents, cela indique une préférence pour le premier et aussi que le second est acceptable si l'utilisateur préfère celui-ci.</dd> + <dt><code>only light</code></dt> + <dd>Indique que le document prend uniquement en charge un mode clair (avec un fond clair et du contenu sombre). La valeur <code>only dark</code> n'est pas valide selon la spécification car le mode sombre est généralement mois lisible et que les navigateurs utilisent un mode clair par défaut.</dd> + </dl> + + <p>Ainsi, si on préfére utiliser un mode sombre et laisser le mode clair utilisable, on pourra écrire :</p> + + <pre class="brush: html"><meta name="color-scheme" content="dark light"></pre> + + <p>Cela fonctionne pour l'ensemble du document. Pour cibler des éléments en particulier, on pourra utiliser la propriété CSS {{cssxref("color-scheme")}}. La mise en forme pourra tirer parti du mode utilisé par le système grâce à la caractéristique <code><a href="/fr/docs/Web/CSS/@media/prefers-color-scheme">prefers-color-scheme</a></code>.</p> + </dd> + </dl> + </li> + </ul> + + <p>Cet attribut peut également avoir une valeur définie dans une liste plus large : <a class="external" href="https://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki MetaExtensions</a>. Bien qu'aucune n'ait encore été acceptée, certaines sont parfois utilisées fréquemment :</p> + + <ul> + <li><code>creator</code>, définit le nom du créateur du document (sans contrainte de format). Cela peut être le nom d'une institution. Si plusieurs créateurs sont à recenser, plusieurs éléments {{HTMLElement("meta")}} devront être utilisés</li> + <li><code>googlebot</code>, synonyme de <code>robots</code>, est suivi par Googlebot, le robot de Google qui indexe les pages</li> + <li><code>publisher</code>, définit le nom de l'éditeur du document (sans contrainte de format). Cela peut être le nom d'une institution.</li> + <li><code>robots</code>, définit le comportement que les robots d'indexation devraient respecter. C'est une liste de valeurs séparées par des virgules. La liste qui suit définit les valeurs que l'on peut utiliser : + <table class="standard-table"> + <caption>Valeurs pour le contenu de <code><meta name="robots"></code></caption> + <thead> + <tr> + <th scope="col">Valeur</th> + <th scope="col">Description</th> + <th scope="col">Utilisé par</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>index</code></td> + <td>Permet au robot d'indexer la page</td> + <td>Tous</td> + </tr> + <tr> + <td><code>noindex</code></td> + <td>Interdit au robot d'indexer la page</td> + <td>Tous</td> + </tr> + <tr> + <td><code>follow</code></td> + <td>Permet au robot de suivre les liens contenus dans la page</td> + <td>Tous</td> + </tr> + <tr> + <td><code>nofollow</code></td> + <td>Interdit au robot de suivre les liens contenus dans la page</td> + <td>Tous</td> + </tr> + <tr> + <td><code>none</code></td> + <td>Synonyme de <code>noindex</code>, <code>nofollow</code></td> + <td><a href="https://support.google.com/webmasters/answer/79812">Google</a></td> + </tr> + <tr> + <td><code>noodp</code></td> + <td>Empêche que la description <a class="external" href="https://www.dmoz-odp.org/">Open Directory Project</a> si celle-ci est présente, soit affichée dans les résultats du moteur de recherche</td> + <td> + <p><a class="external" href="https://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=79812">Google</a>, <a href="https://help.yahoo.com/l/us/yahoo/search/indexing/indexing-11.html;_ylt=Arh3LHnisvRMPJKzQqmJ97JYqCN4">Yahoo</a>, <a href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></p> + </td> + </tr> + <tr> + <td><code>noarchive</code></td> + <td>Empêche le moteur de recherche de mettre en cache le contenu de la page</td> + <td><a class="external" href="https://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=79812">Google</a>, <a class="external" href="https://help.yahoo.com/l/us/yahoo/search/indexing/basics-10.html;_ylt=Aszma_Ly8TfhL7mn_LGWn5RYqCN4">Yahoo</a></td> + </tr> + <tr> + <td><code>nosnippet</code></td> + <td>Empêche l'affichage de la description de la page dans les résultats du moteur de recherche</td> + <td><a class="external" href="https://www.google.com/support/webmasters/bin/answer.py?answer=35304">Google</a></td> + </tr> + <tr> + <td><code>noimageindex</code></td> + <td>Empêche la page d'apparaître en tant que page de référence ayant permis l'indexation de l'image</td> + <td><a class="external" href="https://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=79812">Google</a></td> + </tr> + <tr> + <td><code>noydir</code></td> + <td>Empêche l'utilisation et l'affichage de la description Yahoo Directory parmi les résultats du moteur de recherche, si celle-ci est présente</td> + <td>Yahoo</td> + </tr> + <tr> + <td><code>nocache</code></td> + <td>Synonyme de <code>noarchive</code></td> + <td>Bing</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Notes :</strong> + + <ul> + <li>Seuls les robots « respectueux » suivront ces règles. Il ne faut pas considérer cela comme une manière efficace de blocage (robots indexeurs cherchant des adresses e-mails pour le spam notamment)</li> + <li>Le robot aura besoin d'accéder à la page pour lire la valeur de la métadonnée. Afin d'empêcher des accès intempestifs (par exemple pour réduire le débit utilisé) un fichier <em>{{Glossary("robots.txt")}}</em> doit être utilisé en priorité (ou en complément).</li> + <li>Si vous souhaitez retirer la page du contenu d'un index, la valeur <code>noindex</code> fonctionnera mais seulement à partir de la prochaine analyse. Assurez-vous de ne pas bloquer cette analyse (par exemple avec le fichier <code><a href="/fr/docs/Glossaire/Robots.txt">robots.txt</a></code>). Certains moteurs de recherches ont des outils destinés aux développeurs qui permettent de rapidement désindexer une page.</li> + <li>Certaines valeurs sont contradictoires et incompatibles : <code>index</code> et <code>noindex</code>, ou <code>follow</code> et <code>nofollow</code>. Dans le cas où ces valeurs sont utilisées simultanément, le comportement d'un robot est indéfini et peut varier selon les robots. Il est donc conseillé d'éviter de tels cas de figures.</li> + <li>Certains robots, comme ceux de Google, Yahoo Search ou Bing, supportent ces valeurs quand elles sont utilisées dans une directive HTTP <code>X-Robots-Tags</code>: . Cela permet d'utiliser cette information pour des documents non-HTML comme les images.</li> + </ul> + </div> + </li> + <li><code>slurp</code>, synonyme de <code>robots</code>, qui est suivi uniquement par Slurp, le robot d'indexation de Yahoo Search.</li> + </ul> + + <p>Enfin, quelques noms sont utilisés fréquemment mais sont pas considérés comme standards :</p> + + <ul> + <li><code>viewport</code>, qui donne une indication quant à la taille du <a href="/fr/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a> (vue virtuelle). Cette information est utilisée pour les terminaux mobiles uniquement :<br> + <br> + + <table class="fullwidth-table"> + <caption>Valeurs pour le contenu de <meta name="viewport"></caption> + <thead> + <tr> + <th scope="col">Valeur</th> + <th scope="col">Valeurs possibles</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>width</code></td> + <td>un nombre entier positif ou le mot-clé <code>device-width</code></td> + <td>Définit la largeur, en pixels, de la zone d'affichage (<em>viewport</em>) dans laquelle on veut que le site soit affiché.</td> + </tr> + <tr> + <td><code>height</code></td> + <td>un nombre entier positif ou le mot-clé <code>device-height</code></td> + <td>Définit la hauteur, en pixels, de la zone d'affichage (viewport) dans laquelle on veut que le site soit affiché.</td> + </tr> + <tr> + <td><code>initial-scale</code></td> + <td>un nombre positif entre <code>0.0</code> et <code>10.0</code></td> + <td>définit le ratio entre la taille de l'écran du terminal (<code>device-width</code> en portrait ou <code>device-height</code> en paysage) et la taille de la zone d'affichage.</td> + </tr> + <tr> + <td><code>maximum-scale</code></td> + <td>un nombre positif entre <code>0.0</code> et <code>10.0</code></td> + <td>définit la valeur maximale du zoom possible. Doit être supérieur ou égal à<code> minimum-scale</code>, sinon le comportement est indéterminé</td> + </tr> + <tr> + <td><code>minimum-scale</code></td> + <td>un nombre positif entre <code>0.0</code> et <code>10.0</code></td> + <td>définit la valeur minimale du zoom possible. Doit être inférieur ou égal à<code> maximum-scale</code>, sinon le comportement est indéterminé</td> + </tr> + <tr> + <td><code>user-scalable</code></td> + <td>un booléen (<code>yes</code> ou <code>no</code>)</td> + <td>Si la valeur est <code>no</code>, l'utilisateur ne pourra pas zoomer sur le document. Par défaut, la valeur est <code>yes</code>.</td> + </tr> + </tbody> + </table> + + <div class="warning"><strong>Attention !</strong> + + <ul> + <li>Bien qu'il ne fasse pas partie du standard, cet attribut est utilisé par plusieurs navigateurs mobiles comme Safari Mobile, Firefox pour Mobile ou Opera Mobile.</li> + <li>Les valeurs par défaut peuvent être différentes suivant les appareils et les navigateurs.</li> + <li>Pour en savoir plus sur l'utilisation faite de cet attribut par Firefox pour Mobile, vous pouvez lire <a href="/fr/docs/Mozilla/Mobile/Viewport_meta_tag">cet article</a>.</li> + </ul> + </div> + </li> + </ul> + </dd> + <dt>{{htmlattrdef("scheme")}} {{obsolete_inline}}</dt> + <dd>Cet attribut définit le schéma dans lequel la métadonnée est décrite. Un schéma, de la même manière qu'un format, est un contexte permettant d'interpréter correctement la valeur de l'attribut {{htmlattrxref("content", "meta")}}. + <div class="warning"><strong>Attention !</strong> Cet attribut a été déprécié et ne doit donc plus être utilisé. Il n'y pas d'attributs ou d'éléments remplaçant sa fonction car cet attribut n'était pas usité.</div> + </dd> +</dl> + +<h2 id="Notes">Notes</h2> + +<p>Selon les attributs qui sont renseignés, la métadonnée peut être de différentes sortes :</p> + +<ul> + <li>si {{htmlattrxref("name", "meta")}} est renseigné, c'est une <em>métadonnée de document</em> s'appliquant à la page entière,</li> + <li>si {{htmlattrxref("http-equiv", "meta")}} est renseigné, c'est une information transmise au serveur web indiquant comment la page doit être servie (<em>pragma directive</em> en anglais),</li> + <li>si {{htmlattrxref("charset", "meta")}} est renseigné, c'est une déclaration sur le jeu de caractères, autrement dit l'ensemble de caractères utilisés pour la version sérialisée de la page web,</li> + <li>si {{htmlattrxref("itemprop", "meta")}} est renseigné, c'est une métadonnée définie par l'utilisateur, gérée de manière transparente par l'agent utilisateur car la signification de cette métadonnée est spécifique à l'utilisateur. {{experimental_inline}}</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><!-- En HTML5 --> +<meta charset="utf-8"> + +<!-- Rediriger la page après 3 secondes --> +<meta http-equiv="refresh" content="3;url=http://www.mozilla.org"> + +</pre> + +<h2 id="Accessibilité">Accessibilité</h2> + +<h3 id="Rafraîchir_le_contenu">Rafraîchir le contenu</h3> + +<p>Les pages utilisant une valeur de <code>refresh</code> trop petite peuvent ne pas laisser le temps nécessaire à la compréhension aux personnes qui utilisent un lecteur d'écran. Le changement brutal de contenu peut également être source de confusion pour les personnes à faible vision.</p> + +<ul> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_—_Enough_Time_Provide_users_enough_time_to_read_and_use_content">Comprendre les règles WCAG 2.1</a></li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">Comprendre les règles WCAG 3.1</a></li> + <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html">Understanding Success Criterion 2.2.1 W3C Understanding WCAG 2.0</a></em></li> + <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html">Understanding Success Criterion 2.2.4 W3C Understanding WCAG 2.0</a></em></li> + <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-no-extreme-changes-context.html">Understanding Success Criterion 3.2.5 W3C Understanding WCAG 2.0</a></em></li> +</ul> + +<h3 id="Redimensionner_la_zone_d'affichage_(viewport)">Redimensionner la zone d'affichage (<em>viewport</em>)</h3> + +<p>Désactiver la possibilité de zoom avec <code>user-scalable: no</code> empêche les personnes à faible vision de lire et de comprendre le contenu de la page.</p> + +<ul> + <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-scale.html">Understanding Success Criterion 1.4.4 W3C Understanding WCAG 2.0</a></em></li> +</ul> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <th><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th> + <td>Contenu de métadonnées. Si l'attribut {{htmlattrxref("itemprop")}} est utilisé : du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a> ou du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td> + </tr> + <tr> + <th><dfn>Contenu autorisé</dfn></th> + <td>Aucun cet élément est un élément vide.</td> + </tr> + <tr> + <th><dfn>Omission de balises</dfn></th> + <td>Étant un élément vide, la balise de début doit être présente et la balise de fin doit être absente.</td> + </tr> + <tr> + <th><dfn>Éléments parents autorisés</dfn></th> + <td><code><meta charset></code>, <code><meta http-equiv></code> : un élément {{HTMLElement("head")}}. Si l'attribut {{htmlattrxref("http-equiv", "meta")}} n'est pas une déclaration d'encodage, l'élément peut également être au sein d'un élément {{HTMLElement("noscript")}} lui-même contenu par un élément {{HTMLElement("head")}}.<br> + <code><meta name></code> : tout élément acceptant du contenu de métadonnées.<br> + <code><meta itemprop></code> : tout élément acceptant du contenu de métadonnées ou du contenu phrasé.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th>Interface DOM</th> + <td>{{domxref("HTMLMetaElement")}}</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('Referrer Policy', '#referrer-policy-delivery-meta', '<meta name="referrer">')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Définition des valeurs et de la sémantique associée pour <code><meta name="referrer"></code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-meta-element', '<meta>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Ajout de l'attribut <code>itemprop</code></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-meta-element', '<meta>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Ajout de l'attribut <code>charset</code></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.4.2', '<meta>')}}</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> + +<p>{{Compat("html.elements.meta")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments relatifs aux métadonnées : + <ul> + <li>{{HTMLElement("base")}}</li> + <li>{{HTMLElement("head")}}</li> + <li>{{HTMLElement("link")}}</li> + <li>{{HTMLElement("style")}}</li> + <li>{{HTMLElement("title")}}</li> + </ul> + </li> +</ul> diff --git a/files/fr/web/html/element/meter/index.html b/files/fr/web/html/element/meter/index.html new file mode 100644 index 0000000000..4b8cf62da6 --- /dev/null +++ b/files/fr/web/html/element/meter/index.html @@ -0,0 +1,152 @@ +--- +title: <meter> +slug: Web/HTML/Element/Meter +tags: + - Element + - Formulaires + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/meter +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><meter></code></strong> représente une valeur scalaire dans un intervalle donné ou une valeur fractionnaire.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/meter.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> + + +<h2 id="Attributs">Attributs</h2> + +<p>Comme pour les autres éléments HTML, cet élément inclut également <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("form")}}</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, il est à l'élément {{HTMLElement("form")}} qui est son plus proche ancêtre.</dd> + <dt>{{htmlattrdef("high")}}</dt> + <dd>Cet attribut représente la valeur minimale à partir de laquelle la mesure est considérée comme haute. Si cet attribut est défini, il doit s'agir d'un nombre à virgule compris entre les valeurs des attributs <code><strong>min </strong></code>et <code><strong>max</strong></code>. Si l'attribut <code><strong>low</strong></code> est aussi défini, il doit être plus grand que celui-ci.</dd> + <dt>{{htmlattrdef("low")}}</dt> + <dd>Cet attribut représente la valeur maximale à partir de laquelle la mesure est considérée comme basse. Si cet attribut est défini, il doit s'agir d'un nombre à virgule compris entre les valeurs des attributs <code><strong>min </strong></code>et <code><strong>max</strong></code>. Si l'attribut <code><strong>high</strong></code> est aussi défini, il doit être plus petit que celui-ci.</dd> + <dt>{{htmlattrdef("max")}}</dt> + <dd>Cet attribut représente la valeur maximale que peut prendre la mesure. Il doit s'agir d'un nombre à virgule; s'il est invalide ou si l'attribut n'est pas défini, sa valeur par défaut est 1.0. Il doit être strictement plus grand que la valeur de l'attribut <code><strong>min</strong></code>.</dd> + <dt>{{htmlattrdef("min")}}</dt> + <dd>Cet attribut représente la valeur minimale que peut prendre la mesure. Il doit s'agir d'un nombre à virgule; s'il est invalide ou si l'attribut n'est pas défini, sa valeur par défaut est 0.0. Il doit être strictement plus petit que la valeur de l'attribut <code><strong>max</strong></code>.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("optimum")}}</dt> + <dd>Cet attribut représente la valeur idéale pour la mesure. Si cet attribut est défini, il doit s'agir d'un nombre à virgule compris entre les valeurs des attributs <code><strong>min </strong></code>et <code><strong>max</strong></code>. Si la valeur de <code><strong>optimum</strong></code> est inférieure à <code><strong>low</strong></code>, s'il est défini, cela signifie que les valeurs les plus petites sont meilleures; si sa valeur est supérieure à <code><strong>high</strong></code>, s'il est défini, cela signifie que les valeurs les plus grandes sont meilleures; enfin, s'il est compris entre <code><strong>low </strong></code>et <code><strong>high</strong></code>, cela signifie que les extrêmes ne sont pas les meilleures grandeurs.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("value")}}</dt> + <dd>Cette attribut représente la valeur courante de la mesure. Cet attribut est obligatoire. + <div class="note"> + <p><strong>Note d'utilisation</strong> : il est recommandé aux auteurs de dupliquer les valeurs des attributs <strong><code>min</code>, </strong><code><strong>max</strong></code> et <code><strong>value</strong></code> dans le contenu de cet élément de façon à permettre aux navigateurs ne supportant pas l'élément {{ HTMLElement("meter") }} de transmettre ces informations aux utilisateurs. Par exemple :</p> + + <pre class="brush: html">Utilisation de l'espace de stockage: +<meter value=6 max=8> + 6 blocs utilisés (sur un total de 8) +</meter></pre> + Il n'y a pas de moyen sémantique de décrire l'unité de l'attribut <code><strong>value</strong></code>, néanmoins l'attribut global <code><strong>title</strong></code> peut être utilisé pour cela.</div> + </dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_simple">Exemple simple</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>Chauffez le four à + <meter min="100" max="250" value="180">180 degrés</meter>. +</p> +</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Exemple_simple", 300, 60)}}</p> + +<h3 id="Utilisation_de_high_et_low">Utilisation de <code>high</code> et <code>low</code></h3> + +<p>On remarquera ici que l'attribut <code>min</code> est absent (ce qui est autorisé), la valeur minimale sera alors 0.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p> + Il a eu + <meter low="69" high="80" max="100" value="84">B</meter> + à son examen. +</p> +</pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("Utilisation_de_high_et_low", 300, 60)}}</p> +<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%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>, contenu étiquetable</td> + </tr> + <tr> + <th scope="row"><dfn>Contenu autorisé</dfn></th> + <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a> ne possédant pas d'élément <code><meter></code> parmi ses descendants.</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%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLMeterElement")}}</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-meter-element', '<meter>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-meter-element', '<meter>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</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.meter")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("progress")}}</li> +</ul> diff --git a/files/fr/web/html/element/multicol/index.html b/files/fr/web/html/element/multicol/index.html new file mode 100644 index 0000000000..a1bcd53f85 --- /dev/null +++ b/files/fr/web/html/element/multicol/index.html @@ -0,0 +1,37 @@ +--- +title: <multicol> +slug: Web/HTML/Element/multicol +tags: + - Experimental + - HTML + - Non-standard + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/multicol +--- +<div>{{HTMLRef}}{{non-standard_header}}{{obsolete_header}}</div> + +<p>L'élément HTML <strong><code><multicol></code></strong> était un élement expérimental conçu afin de réaliser des agencements sur plusieurs colonnes.<br> + Il n'a jamais eu une traction significative et n'est pas implémenté dans la plupart des navigateurs.</p> + +<div class="warning"> +<p><strong>N'utilisez pas cet élément ! </strong>Pour implémenter un agencement sur plusieurs colonnes, vous devez utilisez les élements HTML classiques comme {{HTMLElement("div")}} et les fonctionnalités CSS <a href="/fr/docs/Web/CSS/Colonnes_CSS/Utiliser_une_disposition_multi-colonnes">permettant d'organiser plusieurs colonnes</a>.</p> +</div> + +<h2 id="Spécifications">Spécifications</h2> + +<p>Cet élément ne fait partie d'aucune spécification.</p> + +<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.multicol")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/CSS/Colonnes_CSS">Les colonnes CSS</a> qui doivent être utilisées lorsqu'on souhaite obtenir une disposition avec plusieurs colonnes</li> + <li><a href="/fr/docs/Web/CSS/Colonnes_CSS/Utiliser_une_disposition_multi-colonnes">Le guide : Créer des dispositions avec plusieurs colonnes en CSS</a></li> +</ul> diff --git a/files/fr/web/html/element/nav/index.html b/files/fr/web/html/element/nav/index.html new file mode 100644 index 0000000000..8fc113851b --- /dev/null +++ b/files/fr/web/html/element/nav/index.html @@ -0,0 +1,114 @@ +--- +title: '<nav> : l''élément de section de navigation' +slug: Web/HTML/Element/nav +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/nav +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><nav></strong> représente une section d'une page ayant des liens vers d'autres pages ou des fragments de cette page. Autrement dit, c'est une section destinée à la navigation dans un document (avec des menus, des tables des matières, des index, etc.).</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/nav.html", "tabbed-standard")}}</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> + + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément ne possède que <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> + +<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> + +<ul> + <li>Tous les liens d'un document ne doivent pas faire partie d'un élément <code><nav></code>. Ce dernier est fait pour créer des blocs conséquents contenants des liens de navigations au sein du document. L'élément {{HTMLElement("footer")}} possède souvent différents liens, il n'a pour autant pas besoin d'être dans un élément {{HTMLElement("nav")}}.</li> + <li>Un document peut avoir plusieurs éléments {{HTMLElement("nav")}}, par exemple un pour la navigation sur le site et un autre pour la navigation au sein de la page. L'attribut <code><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby">aria-labelledby</a></code> pourra être utilisé afin d'améliorer l'accessibilité.</li> + <li>Les agents utilisateurs, tels que les lecteurs d'écrans assistant les utilisateurs handicapés, peuvent utiliser cet élément pour déterminer s'il faut omettre ou non le rendu initial du contenu relatif uniquement à la navigation.</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><nav class="menu"> + <ul> + <li><a href="#Accueil">Accueil</a></li> + <li><a href="#Apropos">À propos</a></li> + <li><a href="#Contact">Contact</a></li> + </ul> +</nav> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p> +<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%C3%A9gorie_de_contenu#Contenu_sectionnant">contenu sectionnant</a>, <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_de_flux">Contenu de flux</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_de_flux">contenu de flux</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</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', 'sections.html#the-nav-element', '<nav>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Aucune modification depuis la dernière dérivation.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-nav-element', '<nav>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("html.elements.nav")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments HTML en relation avec les sections : {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li> + <li class="last"><a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">Plan et section d'un document HTML5</a></li> + <li class="last"><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Navigation_Role">ARIA : le rôle <code>navigation</code></a></li> +</ul> diff --git a/files/fr/web/html/element/nextid/index.html b/files/fr/web/html/element/nextid/index.html new file mode 100644 index 0000000000..6b2179c76e --- /dev/null +++ b/files/fr/web/html/element/nextid/index.html @@ -0,0 +1,59 @@ +--- +title: '<nextid> : l''élément NeXT ID (Obsolète)' +slug: Web/HTML/Element/nextid +tags: + - Déprécié + - Element + - HTML + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/nextid +--- +<div>{{HTMLRef}}{{Deprecated_header}}</div> + +<p>L'élément HTML <strong><code><nextid></code></strong> est un élément obsolète qui était utilisé par l'outil de conception web NeXT afin de générer automatiquement des attributs {{htmlattrxref("name","a")}}. Cet élément fut l'un des premiers à disparaître du DTD public des versions HTML et est également l'un des premiers éléments HTML les moins compris.</p> + +<dl> + <dt>HTML "0.a" - valable jusqu'au 10 janvier 1991</dt> + <dd>Aucun exemple disponible.</dd> + <dt>HTML "0.c" - à partir du 23 janvier 1991 et jusqu'au 23 novembre 1992</dt> + <dd>Cette version d'HTML ajoute <code><NEXTID></code> en tant que formulaire, non conforme à SGML, simplement utilisé comme valeur numérique.</dd> + <dt>HTML "0.d" - à partir du 26 novembre 1992 jusqu'au 4 mai 1993</dt> + <dd>Pendant cette période, NeXT et les anciens DTD indiquent que <code><NEXTID></code> ne peut prendre qu'un nombre comme valeur pour son attribut <code>N</code>.</dd> + <dt>HTML "1.k" - Version 1 (première version officielle)</dt> + <dd>Dans le premier brouillon officiel de HTML, <code><NEXTID></code> permet d'utiliser un nom dans son attribut plutôt qu'un seul nombre.</dd> + <dt>HTML "1.m" - Version 1 (deuxième version)</dt> + <dd>Dans le brouillon HTML qui suit, <code><NEXTID></code> peut être retiré de l'affichage grâce à une commande SGML.</dd> + <dt>HTML Version 2, niveau 1</dt> + <dd>L'élément ne peut être inclus dans les éléments {{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("textarea")}}, {{HTMLElement("select")}} et {{HTMLElement("option")}}.</dd> + <dt>HTML Version 2, niveau 1 strict</dt> + <dd>Ajoute des exclusions supplémentaires pour les éléments dépréciés.</dd> + <dt>HTML Version 2, niveau 2</dt> + <dd>La version par défaut, qui permet d'utiliser et d'inclure l'ensemble des éléments et attributs d'HTML 2.</dd> + <dt>HTML Version 2, niveau 2 strict</dt> + <dd>Cette version exclut les éléments dépréciés et interdit d'utiliser certaines constructions (comme l'inclusion d'un titre (<code><h1-h6></code>) dans un lien ({{HTMLElement("a")}} ou des champs de saisie {{HTMLElement("input")}} qui ne soient pas des éléments de bloc).</dd> + <dt>HTML Version 3.2</dt> + <dd><code><NEXTID></code> disparaît du DTD.</dd> +</dl> + +<h2 id="Attributs">Attributs</h2> + +<p>À l'instar de l'ensemble des éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels/">les attribus universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("n")}}</dt> + <dd>Une référence à une ancre.</dd> +</dl> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.nextid")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("isindex")}}</li> +</ul> diff --git a/files/fr/web/html/element/nobr/index.html b/files/fr/web/html/element/nobr/index.html new file mode 100644 index 0000000000..9cf0835cee --- /dev/null +++ b/files/fr/web/html/element/nobr/index.html @@ -0,0 +1,52 @@ +--- +title: '<nobr> : l''élément de non-rupture de texte (obsolète)' +slug: Web/HTML/Element/nobr +tags: + - Element + - HTML + - Non-standard + - Obsolete + - Web +translation_of: Web/HTML/Element/nobr +--- +<div>{{HTMLRef}}{{obsolete_header}}{{non-standard_header}}</div> + +<p>L'élément HTML <strong><code><nobr></code></strong> évite qu'un texte soit coupé par un retour à la ligne automatique ; il est donc affiché sur une seule ligne. Il peut être alors nécessaire d'utiliser les barres de défilement pour lire le texte en intégralité.</p> + +<div class="blockIndicator warning"> +<p>Cet élément n'est pas standard en HTML et ne doit donc pas être utilisé. <strong>C'est la propriété CSS {{cssxref("white-space")}} doit être utilisée à la place</strong>, de cette manière :</p> +</div> + +<pre class="brush: html"><span style="white-space: nowrap">Un texte long sans retour à la ligne.</span></pre> + +<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", "obsolete.html#nobr", "<nobr>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Rendu obsolète et remplacé par {{CSSxRef("white-space")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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> + +<div>{{Compat("html.elements.nobr")}}</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{cssxref("white-space")}}</li> + <li>{{cssxref("overflow")}}</li> +</ul> diff --git a/files/fr/web/html/element/noembed/index.html b/files/fr/web/html/element/noembed/index.html new file mode 100644 index 0000000000..26b75e9764 --- /dev/null +++ b/files/fr/web/html/element/noembed/index.html @@ -0,0 +1,42 @@ +--- +title: '<noembed> : l''élément alternatif au contenu embarqué (obsolète)' +slug: Web/HTML/Element/noembed +tags: + - HTML + - Non-standard + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/noembed +--- +<div>{{HTMLRef}}{{Non-standard_header}}{{obsolete_header}}</div> + +<p>L'élément <code><strong><noembed></strong></code> est une façon obsolète et non standardisée de fournir une alternative de contenu pour les navigateurs ne supportant pas l'élément {{HTMLElement("embed")}} ou des <a href="/fr/docs/Web/HTML/Catégorie_de_contenu">catégories de contenu</a> qu'un auteur aimerait utiliser.<br> + Cet élément a été rendu obsolète à partir de la version HTML 4.01 et a été remplacé par {{HTMLElement("object")}}. Le contenu alternatif doit être inséré entre la balise d'ouverture et celle de fermeture de {{HTMLElement("object")}}</p> + +<div class="note"> +<p><strong>Note :</strong> Bien que cet élément soit toujours supporté dans plusieurs navigateurs, il a été rendu obsolète et ne devrait pas être utilisé. Utilisez plutôt {{HTMLElement("object")}}</p> +</div> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#noembed', '<noembed>')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Indication que la fonctionnalité n'est pas conforme.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.noembed")}}</p> diff --git a/files/fr/web/html/element/noframes/index.html b/files/fr/web/html/element/noframes/index.html new file mode 100644 index 0000000000..e925ea2a48 --- /dev/null +++ b/files/fr/web/html/element/noframes/index.html @@ -0,0 +1,80 @@ +--- +title: '<noframes> : l''élément alternatif aux frames (obsolete)' +slug: Web/HTML/Element/noframes +tags: + - Element + - HTML + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/noframes +--- +<div>{{HTMLRef}}{{Obsolete_header}}</div> + +<p>L'élément HTML obsolète <strong><code><noframes></code></strong> est utilisé par les navigateurs qui ne supportent pas les éléments {{HTMLElement("frame")}}, ou qui sont configurés afin de ne pas les supporter.</p> + +<p><code><noframes></code> accepte n'importe quel élément HTML valide dans un élément {{HTMLElement("body")}}, à l'exception des éléments {{HTMLElement("frameset")}} et {{HTMLElement("frame")}}.</p> + +<p>Cet élément pouvait être utilisé afin d'afficher un message explicatif, destiné à l'utilisateur. Idéalement, le contenu devait présenter des fonctionnalités analogues à la <em>frame</em> qui n'était pas prise en charge.</p> + +<div class="note"><strong>Note d'utilisation :</strong> Cet élément est aussi entièrement obsolète en HTML5, et doit être evité pour se conformer au standard.</div> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html"><frameset cols="50%,50%"> + <frame src="https://developer.mozilla.org/fr/docs/Web/HTML/Element/frameset"/> + <frame src="https://developer.mozilla.org/fr/docs/Web/HTML/Element/frame"/> + <noframes> + <p> + Il semblerait que votre navigateur ne supporte pas les frames, + ou qu'il est configuré pour ne pas les autoriser. + </p> + </noframes> +</frameset></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","100%","100%")}}</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('HTML5 W3C', '#noframes', 'noframes')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'frames.html#edef-NOFRAMES', '<noframes>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("html.elements.noframes")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("frameset")}}</li> + <li>{{HTMLElement("frame")}}</li> +</ul> diff --git a/files/fr/web/html/element/noscript/index.html b/files/fr/web/html/element/noscript/index.html new file mode 100644 index 0000000000..198c1abc87 --- /dev/null +++ b/files/fr/web/html/element/noscript/index.html @@ -0,0 +1,102 @@ +--- +title: <noscript> +slug: Web/HTML/Element/noscript +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/noscript +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><noscript></code></strong> définit un fragment HTML qui doit être affiché si les fonctionnalités de script ne sont pas prises en charge ou si elles sont désactivées.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>On peut uniquement utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur cet élément.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><noscript> + <!-- Un lien vers un site externe --> + <a href="http://www.mozilla.com/">Un autre site</a> +</noscript> +<p>Elle est où la poulette ?</p> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","300","200")}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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%C3%A9gorie_de_contenu#Contenu_de_m%C3%A9ta-donn%C3%A9es">Contenu de métadonnées</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Lorsque les fonctionnalités de script sont désactivées et que l'élément est un descendant d'un élément {{HTMLElement("head")}} : zéro ou plusieurs éléments {{HTMLElement("link")}}, {{HTMLElement("style")}},{{HTMLElement("meta")}}.<br> + Lorsque les fonctionnalités de script sont désactivées et que cet élément n'est pas un descendant d'un élément {{HTMLElement("head")}} : du <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Modèle_de_contenu_transparent">contenu transparent</a> mais sans élément <code><noscript></code> parmi les descendants.<br> + Sinon : du contenu de flux ou du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</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> + <p>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a> et qui n'a pas d'ancêtre qui soit un élément <code><noscript></code> ; ou, s'il s'agit d'un document HTML, un élément {{HTMLElement("head")}} (sans ancêtre <code><noscript></code>).</p> + </td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</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', 'scripting.html#the-noscript-element', '<noscript>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'scripting-1.html#the-noscript-element', '<noscript>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/scripts.html#h-18.3.1', '<noscript>')}}</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> + +<p>{{Compat("html.elements.noscript")}}</p> diff --git a/files/fr/web/html/element/object/index.html b/files/fr/web/html/element/object/index.html new file mode 100644 index 0000000000..54ce62d513 --- /dev/null +++ b/files/fr/web/html/element/object/index.html @@ -0,0 +1,162 @@ +--- +title: <object> +slug: Web/HTML/Element/object +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/object +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><object></code> </strong>représente une ressource externe qui peut être interprétée comme une image, un contexte de navigation imbriqué ou une ressource à traiter comme un <em>plugin</em>.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/object.html", "tabbed-standard")}}</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> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("data")}}</dt> + <dd>L'adresse de la ressource, une URL valide. Au moins un attribut <code><strong>data</strong></code> et un attribut <code><strong>type</strong></code> doivent être définis.</dd> + <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt> + <dd>L'élément de formulaire éventuel auquel l'élément est associé. La valeur de cet attribut doit être l'identifiant d'un élément {{HTMLElement("form")}} du même document.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>La hauteur de la ressource à afficher, exprimée en pixels <a href="/fr/docs/Web/CSS">CSS</a> (uniquement en valeur absolue).</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>Le nom du contexte de navigation valide (HTML5) ou du contrôle associé à l'élément (HTML 4).</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>Le type MIME de la ressource définie par <code><strong>data</strong></code>. Au moins un attribut <code><strong>data</strong></code> et un attribut <code><strong>type</strong></code> doivent être définis.</dd> + <dt>{{htmlattrdef("typemustmatch")}} {{HTMLVersionInline(5)}}</dt> + <dd>Cet attribut booléen indique si l'attribut <code>type</code> doit correspondre <a href="/fr/docs/Glossaire/Type_MIME">au type MIME</a> de la ressource afin que celle-ci puisse être utilisée.</dd> + <dt>{{htmlattrdef("usemap")}}</dt> + <dd>Une référence à l'élément {{HTMLElement("map")}}. La valeur de cet attribut doit être un '#' suivi de la valeur d'un attribut {{htmlattrxref("name", "map")}} d'un élément {{HTMLElement('map')}}.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>La largeur de la ressource à afficher, exprimée en pixels CSS (uniquement en valeur absolue).</dd> +</dl> + +<h3 id="Attributs_obsolètes">Attributs obsolètes</h3> + +<dl> + <dt>{{htmlattrdef("archive")}} {{HTMLVersionInline(4)}} seulement ; {{Obsolete_Inline("HTML5")}}</dt> + <dd>Une liste d'URIs séparés par des espaces, pointant vers des archives de resources pour l'objet.</dd> + <dt>{{htmlattrdef("border")}} {{Obsolete_Inline("HTML5")}}</dt> + <dd>La largeur de la bordure autour de l'objet, exprimée en pixels.</dd> + <dt>{{htmlattrdef("classid")}} {{HTMLVersionInline(4)}} seulement ; {{Obsolete_Inline("HTML5")}}</dt> + <dd>L'URI de l'implémentation de l'objet. Cet attribut peut être utilisé avec (ou en remplacement de) l'attribut <code><strong>data</strong></code>.</dd> + <dt>{{htmlattrdef("codebase")}} {{HTMLVersionInline(4)}} seulement ; {{Obsolete_Inline("HTML5")}}</dt> + <dd>Le chemin absolu de base servant à résoudre les URIs relatifs spécifiés par <code><strong>classid</strong></code>, <code><strong>data</strong></code>, ou <code><strong>archive</strong></code>. S'il n'est pas renseigné, l'URI de base considéré sera celui du document.</dd> + <dt>{{htmlattrdef("codetype")}} {{HTMLVersionInline(4)}} seulement ; {{Obsolete_Inline("HTML5")}}</dt> + <dd>Le type de contenu des données spécifiés par <code><strong>classid</strong></code>.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("declare")}} {{HTMLVersionInline(4)}} seulement ; {{Obsolete_Inline("HTML5")}}</dt> + <dd>Si cet attribut booléen est présent, l'élément sera seulement une déclaration. L'objet devra donc être instancié par un élément <code><object></code> dans la suite du document. En HTML5, il faut répéter l'élément <object> complètement chaque fois que la ressource est ré-utilisée.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("standby")}} {{HTMLVersionInline(4)}} seulement ; {{Obsolete_Inline("HTML5")}}</dt> + <dd>Un message que le navigateur peut afficher pendant le chargement de l'implémentation et des données liées à l'objet.</dd> + <dt>{{htmlattrdef("tabindex")}} {{HTMLVersionInline(4)}} seulement ; {{Obsolete_Inline("HTML5")}}</dt> + <dd>La position de l'élément dans la navigation par onglets au sein de l'élément courant.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><object data="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf" type="application/pdf" + width="500" height="500" typemustmatch> + <p>Vous n'avez pas de plugin PDF mais vous pouvez <a href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf">télécharger le fichier.</a></p> +</object> + +<!-- Un exemple avec Flash --> +<!-- +<object data="animation.swf" type="application/x-shockwave-flash"> + <param name="param11" value="valeurConf"> +</object> +--> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","520","520")}}</p> + +<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%C3%A9gorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_int.C3.A9gr.C3.A9">contenu intégré</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>. Si l'élément a un attribut <strong>usemap</strong> il fait aussi partie de la catégorie de <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_interactif">contenu interactif</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_associ.C3.A9_aux_formulaires">contenu listé pour les formulaires (<em>listed</em>), contenu pouvant être envoyé par un formulaire (<em>submittable</em>)</a>.</td> + </tr> + <tr> + <th scope="row"><dfn>Contenu autorisé</dfn></th> + <td>Zéro ou plusieurs éléments {{HTMLElement("param")}} suivis par du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Mod.C3.A8le_de_contenu_transparent">contenu transparent.</a></td> + </tr> + <tr> + <th scope="row"><dfn>Omission de balise</dfn></th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row"><dfn>Parents autorisés</dfn></th> + <td>Tout élément acceptant du contenu intégré.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("image")}}</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLObjectElement")}}</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', 'embedded-content.html#the-object-element', '<object>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-object-element', '<object>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.3', '<object>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.object")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("param")}}</li> + <li>{{HTMLElement("applet")}} {{Obsolete_Inline}}</li> + <li>{{HTMLElement("embed")}}</li> +</ul> diff --git a/files/fr/web/html/element/ol/index.html b/files/fr/web/html/element/ol/index.html new file mode 100644 index 0000000000..1bc58e0eba --- /dev/null +++ b/files/fr/web/html/element/ol/index.html @@ -0,0 +1,237 @@ +--- +title: '<ol> : l''élément de liste ordonnée' +slug: Web/HTML/Element/ol +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/ol +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><ol></code></strong> représente une liste ordonnée. Les éléments d'une telle liste sont généralement affichés avec un indicateur ordinal pouvant prendre la forme de nombres, de lettres, de chiffres romains ou de points. La mise en forme de la numérotation n'est pas utilisée dans la description HTML mais dans la feuille de style CSS associée grâce à la propriété {{cssxref("list-style-type")}}.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/ol.html", "tabbed-shorter")}}</div> + +<div 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> !</div> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément dispose <a href="/fr/docs/Web/HTML/Attributs_universels">des attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("reversed")}} {{HTMLVersionInline(5)}}</dt> + <dd>Cet attribut booléen précise que les objets listés par l'élément sont affichés avec un ordre inversé (l'objet le moins important apparaît en première position).</dd> + <dt>{{htmlattrdef("start")}} {{HTMLVersionInline(5)}}</dt> + <dd>La valeur de cet attribut, un nombre entier, définit l'indice à partir duquel les objets de la liste sont numérotés. Bien que les indices des éléments puissent être des nombres romains ou des lettres la valeur de cet attribut doit être un nombre. Ainsi pour commencer la numérotation des éléments avec la lettre « C », il faudra entrer :<code> <ol start="3"></code>. Cet attribut a été déprécié en HTML4 mais a été réintroduit en HTML5.</dd> +</dl> + +<h3 id="Attributs_dépréciés_et_obsolètes">Attributs dépréciés et obsolètes</h3> + +<dl> + <dt>{{htmlattrdef("compact")}} {{deprecated_inline}}</dt> + <dd> + <p>Cet attribut booléen indique si la liste doit être affichée avec un style compact. L'interprétation de cet attribut dépend de l'agent utilisateur utilisé et ne fonctionne pas avec tous les navigateurs.</p> + + <div class="warning"><strong>Attention !</strong> Cet attribut ne doit pas être utilisé car il a été déprécié : les feuilles de style CSS doivent être utilisées pour la mise en forme de l'élément {{HTMLElement("ol")}}. Afin d'obtenir un effet similaire à cet attribut, la propriété CSS {{cssxref("line-height")}} peut être utilisée avec une valeur de <code>80%</code>.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("type")}} {{deprecated_inline}}</dt> + <dd>Cet attribut définit comment les nombres ordinaux doivent être affichés. Il peut valoir les caractères suivants : + <ul> + <li><code>a</code> : lettres minuscules</li> + <li><code>A</code> : lettres majuscules</li> + <li><code>i</code> : nombres romains en minuscules</li> + <li><code>I</code> : nombres romains en majuscules</li> + <li><code>1</code> : nombres</li> + </ul> + Le type sélectionné est alors utilisé pour toute la liste à moins qu'un élément {{HTMLElement("li")}} de la liste utilise une autre valeur pour l'attribut {{htmlattrxref("type", "li")}} + + <div class="warning"><strong>Attention !</strong> Cet attribut ne doit pas être utilisé car il a été déprécié : les feuilles de style CSS doivent être utilisées pour la mise en forme de l'élément {{HTMLElement("ol")}}. La propriété CSS {{cssxref("list-style-type")}} doit être utilisé à la place de cet attribut.</div> + </dd> +</dl> + +<h2 id="Note_d'utilisation">Note d'utilisation</h2> + +<ul> + <li>Les éléments {{HTMLElement("ol")}} et {{HTMLElement("ul")}} représentent tous les deux une liste d'objets. Leur différence réside dans le fait qu'avec {{HTMLElement("ol")}} l'ordre est important. Un moyen mnémotechnique pour savoir lequel de ces deux éléments utiliser est d'essayer de changer l'ordre dans la liste : si sa signification a changé alors {{HTMLElement("ol")}} doit être utilisé, sinon {{HTMLElement("ul")}} doit être utilisé.</li> + <li>Il n'y pas de limitation concernant la profondeur ou l'éventuelle imbrication des listes définies par les éléments {{HTMLElement("ol")}} et {{HTMLElement("ul")}}.</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_simple">Exemple simple</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><ol> + <li>Premier élément</li> + <li>Deuxième élément</li> + <li>Troisième élément</li> +</ol> +</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Exemple_simple","300","150")}}</p> + +<h3 id="Exemple_avec_start">Exemple avec <code>start</code></h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><ol start="7"> + <li>Premier élément</li> + <li>Deuxième élément</li> + <li>Troisième élément</li> +</ol> +</pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("Exemple_avec_start","300","150")}}</p> + +<h3 id="Utiliser_les_chiffres_romains">Utiliser les chiffres romains</h3> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><ol type="i"> + <li>toto</li> + <li>truc</li> + <li>bidule</li> +</ol></pre> + +<h4 id="Résultat_3">Résultat</h4> + +<p>{{EmbedLiveSample("Utiliser_les_chiffres_romains","300","150")}}</p> + +<h3 id="Listes_imbriquées">Listes imbriquées</h3> + +<h4 id="HTML_4">HTML</h4> + +<pre class="brush: html"><ol> + <li>Premier élément</li> + <li>Deuxième élément <!-- La balise </li> n'est pas encore placée ! --> + <ol> + <li>Premier élément de la liste imbriquée</li> + <li>Deuxième élément de la liste imbriquée</li> + <li>Troisième élément de la liste imbriquée</li> + </ol> + </li> <!-- Voici la balise </li> ! --> + <li>Troisième élément</li> +</ol> +</pre> + +<h4 id="Résultat_4">Résultat</h4> + +<p>{{EmbedLiveSample("Listes_imbriquées","300","300")}}</p> + +<h3 id="Listes_imbriquées_avec_<ol>_et_<ul>">Listes imbriquées avec <code><ol></code> et <code><ul></code></h3> + +<h4 id="HTML_5">HTML</h4> + +<pre class="brush: html"><ol> + <li>Premier élément</li> + <li>Deuxième élément <!-- La balise </li> n'est pas placée ici ! --> + <ul> + <li>Premier élément de la liste non-ordonnée imbriquée</li> + <li>Deuxième élément de la liste non-ordonnée imbriquée</li> + <li>Troisième élément de la liste non-ordonnée imbriquée</li> + </ul> + </li> <!-- La balise </li> est ici. --> + <li>Troisième élément</li> +</ol> +</pre> + +<h4 id="Résultat_5">Résultat</h4> + +<p>{{EmbedLiveSample("Listes_imbriquées_avec_&lt;ol&gt;_et_&lt;ul&gt;","300","300")}}</p> + +<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>, et du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a> si les enfants de l'élément <code><ol></code> incluent au moins un élément {{HTMLElement("li")}}.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Zéro, un, ou plusieurs éléments {{HTMLElement("li")}} (qui peuvent imbriquer d'autres éléments {{HTMLElement("ol")}} ou {{HTMLElement("ul")}}).</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 acceptant 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("directory")}}, {{ARIARole("group")}}, {{ARIARole("listbox")}}, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}}, {{ARIARole("tree")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLOListElement")}}</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', 'semantics.html#the-ol-element', '<ol>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Aucune modification depuis la dernière dérivation W3C {{SpecName('HTML5 W3C')}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "grouping-content.html#the-ol-element", "HTMLOListElement")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Ajout des attributs <code>reversed</code> et <code>start</code>. L'attribut <code>type</code> n'est plus déprécié.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '<ol>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Dépréciation des attributs <code>compact</code> et <code>type</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("html.elements.ol")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments HTML relatifs aux listes : + <ul> + <li>{{HTMLElement("ul")}}</li> + <li>{{HTMLElement("li")}}</li> + <li>{{HTMLElement("menu")}}</li> + <li>l'élément {{HTMLElement("dir")}} qui est obsolète</li> + </ul> + </li> + <li>Les propriétés CSS pouvant servir à la mise en forme de l'élément <code><ol></code> : + <ul> + <li>{{cssxref("list-style")}} qui permet de choisir comment les nombres ordinaux sont affichés,</li> + <li><a href="/fr/docs/Web/CSS/Compteurs_CSS">Les compteurs CSS</a>, utiles pour gérer les listes imbriquées complexes,</li> + <li>{{cssxref("line-height")}} qui permet d'obtenir le même effet que l'attribut {{htmlattrxref("compact", "ol")}} qui est déprécié,</li> + <li>{{cssxref("margin")}} qui permet de contrôler l'indentation de la liste.</li> + </ul> + </li> +</ul> diff --git a/files/fr/web/html/element/optgroup/index.html b/files/fr/web/html/element/optgroup/index.html new file mode 100644 index 0000000000..34e30cad93 --- /dev/null +++ b/files/fr/web/html/element/optgroup/index.html @@ -0,0 +1,128 @@ +--- +title: <optgroup> +slug: Web/HTML/Element/Optgroup +tags: + - Element + - Formulaires + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/optgroup +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><optgroup></code></strong>, utilisé dans un formulaire, permet de créer un groupe d'options parmi lesquelles on peut choisir dans un élément {{HTMLElement("select")}}.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/optgroup.html", "tabbed-standard")}}</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> + + +<div class="note"> +<p><strong>Note :</strong> Il n'est pas possible d'imbriquer plusieurs éléments <code><optgroup></code> entre eux.</p> +</div> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>Si cet attribut booléen est défini et aucun élément du groupe d'options ne peut être sélectionné. Cet élément ne recevra pas les évènements de navigation (tels que les clics ou les changements de focus). Les navigateurs affichent ces éléments en les grisant.</dd> + <dt>{{htmlattrdef("label")}}</dt> + <dd>Le nom du groupe d'options qui peut être affiché par le navigateur. Cet attribut est obligatoire.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><select> + <optgroup label="Groupe 1"> + <option>Option 1.1</option> + </optgroup> + <optgroup label="Groupe 2"> + <option>Option 2.1</option> + <option>Option 2.2</option> + </optgroup> + <optgroup label="Groupe 3" disabled> + <option>Option 3.1</option> + <option>Option 3.2</option> + <option>Option 3.3</option> + </optgroup> +</select> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> +<h2 id="Résumé_technique">Résumé technique</h2> + +<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>Aucune.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Zéro ou plusieurs éléments {{HTMLElement("option")}}.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>La balise de début est obligatoire, la balise de fin est optionnelle si l'élément est immédiatement suivi par un autre élément <optgroup> ou si l'élément parent n'a pas d'autre contenu.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Un élément {{HTMLElement("select")}}.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLOptGroupElement")}}</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-optgroup-element', '<optgroup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-optgroup-element', '<optgroup>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<optgroup>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.optgroup")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("option")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.</li> +</ul> diff --git a/files/fr/web/html/element/option/index.html b/files/fr/web/html/element/option/index.html new file mode 100644 index 0000000000..ce46a66540 --- /dev/null +++ b/files/fr/web/html/element/option/index.html @@ -0,0 +1,120 @@ +--- +title: <option> +slug: Web/HTML/Element/Option +tags: + - Element + - Formulaires + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/option +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><option></code></strong>, utilisé dans un formulaire, permet de représenter un contrôle au sein d'un élément {{HTMLElement("select")}}, {{HTMLElement("optgroup")}} ou {{HTMLElement("datalist")}}. Cet élément peut donc représenter des éléments d'un menu dans un document HTML.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/option.html", "tabbed-standard")}}</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> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>Si cet attribut booléen est défini, l'option ne peut pas être sélectionnée. Généralement, les navigateurs affichent l'option grisée et celle-ci ne reçoit pas les évènements de navigation (liés aux clics ou au focus par exemple). Si cet attribut n'est pas défini, l'élément peut tout de même être désactivé si un de ses ancêtres est un élément {{HTMLElement("optgroup")}} désactivé.</dd> + <dt>{{htmlattrdef("label")}}</dt> + <dd>La valeur de cet attribut correspond au texte affiché pour expliquer l'option. Si cet attribut n'est pas défini, sa valeur correspondra à celle du texte contenu dans l'élément.</dd> + <dt>{{htmlattrdef("selected")}}</dt> + <dd>S'il est présent, cet attribut booléen indique que l'option est sélectionnée à l'état initial. Si l'élément <code><option></code> est un élément descendant d'un élément {{HTMLElement("select")}} dont l'attribut {{htmlattrxref("multiple", "select")}} n'est pas activé, seul une <code><option></code> de cet élément {{HTMLElement("select")}} peut être sélectionnée de cette façon.</dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>Le contenu de cet attribut représente la valeur qu'on souhaite envoyer au formulaire lorsque l'option est sélectionnée. Si cet attribut n'est pas défini, la valeur sera le contenu texuel de l'élément <code><option></code>.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><select name="select"> + Elle est où la poulette ? + <option value="value1">Avec les lapins</option> + <option value="value2" selected>Avec les canards</option> + <option value="value3">Pas là</option> +</select></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","320","50")}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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>Aucune.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Du texte qui contient éventuellement des caractères échappés (par exemple <code>&eacute;</code>).</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>La balise de début est obligatoire. La balise de fin est optionnelle si l'élément est immédiatement suivi par un autre élément <code><option></code> ou {{HTMLElement("optgroup")}} ou si l'élément parent n'a plus d'autre contenu.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Un élément {{HTMLElement("select")}}, {{HTMLElement("optgroup")}} ou {{HTMLElement("datalist")}}.</td> + </tr> + <tr> + <th scope="row">Rôles autorisés</th> + <td>Aucune</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLOptionElement")}}</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-option-element', '<option>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-option-element', '<option>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<option>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.option")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.</li> +</ul> diff --git a/files/fr/web/html/element/output/index.html b/files/fr/web/html/element/output/index.html new file mode 100644 index 0000000000..56ca6c1592 --- /dev/null +++ b/files/fr/web/html/element/output/index.html @@ -0,0 +1,115 @@ +--- +title: '<output> : l''élément de sortie' +slug: Web/HTML/Element/output +tags: + - Element + - Formulaires + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/output +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><output></code></strong> représente un conteneur dans lequel un site ou une application peut injecter le résultat d'un calcul ou d'une action utilisateur.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("for")}}</dt> + <dd>Une liste d'<a href="/fr/docs/Web/HTML/Attributs_universels/id">identifiants </a>d'autres éléments, séparés par des espaces, qui ont joué un rôle dans le calcul (en tant que valeurs d'entrée ou autrement).</dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd>L'identifiant d'un élément de formulaire ({{HTMLElement("form")}}) auquel cet élément est rattaché. La valeur de cet attribut doit être un identifiant (<code>id</code>) d'un formulaire qui fait partie du même document. Cet attribut n'est pas nécessaire si l'élément <code><output></code> est situé dans un formulaire ou si l'élément <code><output></code> n'est pas du tout associé à un formulaire. Cet attribut permet ainsi de placer l'élément <code><output></code> où on veut dans le document, pas nécessairement comme descendant d'un formulaire.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>Le nom de l'élément, utilisé pour identifier l'élément <code><output></code> lors de l'envoi du formulaire.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<p>Le formulaire qui suit fournit un curseur dont la valeur peut aller de 0 à 100 ainsi qu'un élément {{HTMLElement("input")}} dans lequel on peut saisir un deuxième nombre. Les deux nombres sont additionnés et le résultat est affiché dans l'élément <code><output></code> et est actualisé lorsqu'une des deux valeurs est modifiée.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> + <input type="range" name="b" value="50" /> + + <input type="number" name="a" value="10" /> = + <output name="result">60</output> +</form> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample('Exemples','300','200')}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_associ%C3%A9_aux_formulaires">contenu associé au formulaire (énuméré, étiquetable, réinitialisable)</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">Contenu phrasé</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_phrasé">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLOutputElement")}}</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', 'the-button-element.html#the-output-element', '<output>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-output-element', '<output>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.output")}}</p> + +<div class="blockIndicator note"> +<p><strong>Note :</strong> La plupart des navigateurs implémente cet élément comme s'il avait l'attribut <code>aria-live</code> par défaut. Les outils d'assistance annonceront donc les résultats des interactions avec l'interface utilisateur qui arrivent sur cet élément sans demander à avoir passé le focus depuis un autre contrôle. Toutefois, ce comportement n'est pas précisément décrit dans les spécifications actuelles.</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.</li> +</ul> diff --git a/files/fr/web/html/element/p/index.html b/files/fr/web/html/element/p/index.html new file mode 100644 index 0000000000..cda1cbf8d6 --- /dev/null +++ b/files/fr/web/html/element/p/index.html @@ -0,0 +1,138 @@ +--- +title: '<p> : l''élément paragraphe' +slug: Web/HTML/Element/p +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/p +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><p></code></strong> représente un paragraphe de texte. Les paragraphes sont généralement représentés comme des blocs et séparés par un espace vertical, leur première ligne est également parfois indentée. Les paragraphes sont <a href="/fr/docs/Web/HTML/Éléments_en_bloc">des éléments blocs</a>.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/p.html", "tabbed-standard")}}</div> + +<div 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> !</div> + +<p>Étant des éléments de bloc, les paragraphes se fermeront automatiquement si un autre élément de bloc est analysé avant la balise de fermeture <code></p></code> (voir Omission de balises dans le tableau qui suit).</p> + +<div class="note"> +<p><strong>Note :</strong> Pour modifier l'espacement entre les paragraphes, il faudra utiliser la propriété CSS {{cssxref("margin")}}. <em>Il ne faut pas insérer de paragraphes vides ou d'éléments {{HTMLElement("br")}} afin de créer un espace</em>.</p> +</div> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément, comme les autres éléments HTML, inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<div class="note"> +<p><strong>Note :</strong> L'attribut <code>align</code> pour les balises <code><p></code> est obsolète et ne doit plus être utilisé.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p> + Premier paragraphe du texte. + J'aime les licornes beaucoup + beaucoup beaucoup. +</p> + +<p> + Deuxième paragraphe du texte. + Et si j'en avais une apprivoisée + je serais très contente. +</p> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","300","150")}}</p> + +<h2 id="Accessibilité">Accessibilité</h2> + +<p>Répartir le contenu entre différents paragraphes permet d'améliorer l'accessibilité d'une page. Les lecteurs d'écran et autres outils d'assistance fournissent des raccourcis qui permettent aux utilisateurs d'accéder rapidement au paragraphe suivant ou précédent et ainsi de naviguer plus rapidement sur la page, comme le permettent les blancs pour la navigation visuelle des autres utilisateurs.</p> + +<p>L'utilisation de paragraphes vides (des éléments HTML <code><p></code> sans contenu) est problématique pour les personnes qui naviguent sur une page à l'aide d'outils d'assistance. Les lecteurs d'écran, par exemple, pourraient annoncer l'élément mais pas le contenu associé ce qui peut être frustrant ou source de confusion.</p> + +<p>S'il est nécessaire d'avoir un espace supplémentaire, on pourra utiliser des propriétés CSS comme {{cssxref("margin")}} pour obtenir l'effet désiré.</p> + +<pre class="brush: css">p { + margin-bottom: 2em; // on ajoute un espace après chaque paragraphe +} +</pre> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">Contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>La balise de début est obligatoire. La balise de fin peut être absente si l'élément {{HTMLElement("p")}} est immédiatement suivi d'un élément {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hr")}}, {{HTMLElement("menu")}}, {{HTMLElement("nav")}}, {{HTMLElement("ol")}}, {{HTMLElement("pre")}}, {{HTMLElement("section")}}, {{HTMLElement("table")}}, {{HTMLElement("ul")}} ou d'un autre élément {{HTMLElement("p")}} ou s'il n'y a plus de contenu dans l'élément parent et que l'élément parent n'est pas un élément {{HTMLElement("a")}}.</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>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLParagraphElement")}}</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', 'semantics.html#the-p-element', '<p>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Aucune modification depuis la dernière dérivation depuis la spécification W3C {{SpecName("HTML5 W3C")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-p-element', '<p>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Obsolescence de l'attribut <code>align</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.1', '<p>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Définition intiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("html.elements.p")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("hr")}}</li> + <li>{{HTMLElement("br")}}</li> +</ul> diff --git a/files/fr/web/html/element/param/index.html b/files/fr/web/html/element/param/index.html new file mode 100644 index 0000000000..d37ee46d9d --- /dev/null +++ b/files/fr/web/html/element/param/index.html @@ -0,0 +1,116 @@ +--- +title: '<param> : l''élément paramètre d''un objet' +slug: Web/HTML/Element/param +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/param +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><param></code></strong> définit les paramètres qui peuvent être employés dans un élément {{HTMLElement("object")}}.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("name")}}</dt> + <dd>Le nom du paramètre</dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>Cet attribut définit la valeur du paramètre.</dd> +</dl> + +<h3 id="Attributs_obsolètes">Attributs obsolètes</h3> + +<dl> + <dt>{{htmlattrdef("type")}} {{obsolete_inline}}</dt> + <dd>Cet attribut est uniquement utilisé si l'attribut <code>valuetype</code> vaut <code>"ref"</code>. Il définit le type MIME des valeurs trouvées à l'URI.</dd> + <dt>{{htmlattrdef("valuetype")}} {{obsolete_inline}}</dt> + <dd>Cet attribut définit le type de la valeur indiquée par l'attribut <code>value</code>. Les valeurs possibles sont : + <ul> + <li><code>data</code> : la valeur par défaut. La valeur est passée sous la forme d'une chaîne de caractères.</li> + <li><code>ref</code> : la valeur est une URI vers une ressource où sont stockées les valeurs de l'exécution.</li> + <li><code>object</code> : l'identifiant d'un autre élément {{HTMLElement("object")}} dans le document.</li> + </ul> + </dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: html"><object data="animation.swf" type="application/x-shockwave-flash"> + <param name="param11" value="valeurConf"> +</object> </pre> +<h2 id="Résumé_technique">Résumé technique</h2> + +<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>Aucun.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Aucun, c'est un élément vide.</td> + </tr> + <tr> + <th scope="row">Omission de balise</th> + <td>Cet élément est un élément vide, As it is a void element, the start tag must be present and the end tag must not be present.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Un élément {{HTMLElement("object")}} avant 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>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLParamElement")}}</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', 'the-iframe-element.html#the-param-element', '<param>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-param-element', '<param>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.3.2', '<param>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.param")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("object")}}</li> +</ul> diff --git a/files/fr/web/html/element/picture/index.html b/files/fr/web/html/element/picture/index.html new file mode 100644 index 0000000000..2178c4c572 --- /dev/null +++ b/files/fr/web/html/element/picture/index.html @@ -0,0 +1,126 @@ +--- +title: '<picture> : l''élément d''image adaptative' +slug: Web/HTML/Element/picture +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/picture +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><picture></code></strong> est un conteneur utilisé afin de définir zéro ou plusieurs éléments {{HTMLElement("source")}} destinés à un élément {{HTMLElement("img")}}. Le navigateur choisira la source la plus pertinente selon la disposition de la page (les contraintes qui s'appliquent à la boîte dans laquelle l'image devra être affichée), selon l'appareil utilisé (la densité de pixels de l'affichage par exemple avec les appareils hiDPI) et selon les formats pris en charge (ex. WebP pour les navigateurs Chromium ou PNG pour les autres). Si aucune correspondance n'est trouvée parmi les éléments <code><source></code>, c'est le fichier défini par l'attribut {{htmlattrxref("src", "img")}} de l'élément <code><img></code> qui sera utilisé.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/picture.html", "tabbed-standard")}}</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> + +<p>L'agent utilisateur examine chaque attribut présent dans <code><source></code> ({{htmlattrxref("srcset", "source")}}, {{htmlattrxref("media", "source")}}, and {{htmlattrxref("type", "source")}}) pour sélectionner l'URL de la meilleure ressource selon la disposition de la page, les caractéristiques de l'écran de l'appareil, etc.</p> + +<p>L'élément <code><picture></code> peut être utilisé pour :</p> + +<ul> + <li>Fournir une direction artistique : rogner, modifier des images selon différentes conditions de média</li> + <li>Fournir différents formats d'image lorsque certains formats ne sont pas pris en charge par les navigateurs</li> +</ul> + +<p>Lorsqu'on fournit des versions haute densité d'une image pour les appareils avec un DPI élevé, on utilisera plutôt {{htmlattrxref("srcset", "img")}} sur l'élément <code><img></code> à la place. Ainsi, les navigateurs pourront choisir une image à plus basse densité dans un contexte où les flux réseaux doivent être économisés. De plus, il ne sera pas nécessaire d'écrire des requêtes média explicites.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> + +<p>Il est possible d'utiliser la propriété CSS {{cssxref("object-position")}} afin d'ajuster le positionnement de l'image dans le cadre de l'élément. La propriété {{cssxref("object-fit")}} permet quant à elle de contrôler la façon dont la taille de l'image est ajustée.</p> + +<div class="blockIndicator note"> +<p><strong>Note : </strong>Ces propriétés doivent être utilisées sur les éléments <code><img></code> fils et pas sur l'élément <code><picture></code>.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utiliser_l'attribut_media">Utiliser l'attribut <code>media</code></h3> + +<p>L'attribut <code>media</code> de l'élément {{HTMLElement("source")}} permet de rédiger une requête média qui sera évaluée par l'agent utilisateur afin de sélectionner ou non la source. Si la requête média est évaluée à <code>false</code>, l'élément {{HTMLElement("source")}} est ignoré.</p> + +<pre class="brush: html"><picture> + <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> + <img src="mdn-logo-narrow.png" alt="MDN"> +</picture> +</pre> + +<h3 id="Utiliser_l'attribut_type">Utiliser l'attribut <code>type</code></h3> + +<p>L'attribut <code>type</code> d'un élément {{HTMLElement("source")}} permet d'indiquer le type MIME du fichier fourni via l'attribut <code>srcset</code>. Si l'agent utilisateur ne prend pas en charge ce type de fichier, l'élément {{HTMLElement("source")}} est ignoré.</p> + +<pre class="brush: html"><picture> + <source srcset="mdn-logo.svg" type="image/svg+xml"> + <img src="mdn-logo.png" alt="MDN"> +</picture> +</pre> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu">Catégories de contenu</a></th> + <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_int%C3%A9gr%C3%A9">contenu intégré</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Zéro ou plusieurs éléments {{HTMLElement("source")}} suivi d'un élément {{HTMLElement("img")}} avec éventuellement des éléments scriptés entre.</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 peut contenir du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_int%C3%A9gr%C3%A9">contenu intégré</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLPictureElement")}}</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', 'embedded-content.html#the-picture-element', '<picture>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</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.picture")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("img")}}</li> + <li>{{HTMLElement("source")}}</li> + <li>Les propriétés CSS aidant au positionnement et au redimensionnement : {{cssxref("object-position")}} et {{cssxref("object-fit")}}</li> +</ul> diff --git a/files/fr/web/html/element/plaintext/index.html b/files/fr/web/html/element/plaintext/index.html new file mode 100644 index 0000000000..2e2788de93 --- /dev/null +++ b/files/fr/web/html/element/plaintext/index.html @@ -0,0 +1,49 @@ +--- +title: '<plaintext> : l''élément de texte brut (déprécié)' +slug: Web/HTML/Element/plaintext +tags: + - Element + - HTML + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/plaintext +--- +<div>{{HTMLRef}}{{Obsolete_header}}</div> + +<p>L'élément HTML <strong><code><plaintext></code></strong> permet d'afficher du texte qui n'est pas interprété comme du HTML. Il ne possède pas de balise de fermeture, car tout ce qui suit n'est plus considéré comme du HTML.</p> + +<div class="note"><strong>Note : </strong>Ne pas utiliser cet élément. + +<ul> + <li>Il est déprécié depuis HTML 2, et n'a jamais été implementé par tous les navigateurs d'une manière cohérente. De plus, il est obsolète depuis HTML5, et pourra être rendu par les agents-utilisateurs qui l'acceptent comme un élément {{HTMLElement("pre")}}, qui interprètera le HTML contenu même si ce n'est pas ce qui est souhaité !</li> + <li>Si l'élément {{HTMLElement("plaintext")}} est le premier élément de la page (sauf éléments non affichés), n'utilisez pas de HTML. Configurez votre serveur pour servir la page avec le <a href="/fr/docs/Properly_Configuring_Server_MIME_Types">type MIME</a> <code>text/plain</code>.</li> + <li>Utilisez plutôt l'élément {{HTMLElement("pre")}} ou, si c'est sémantiquement approprié, l'élément {{HTMLElement("code")}}. Échappez éventuellement '<code><</code>', '<code>></code>' et <code>&</code> pour que le contenu ne soit pas interprété par inadvertance.</li> + <li>Une police à chasse fixe peut aussi être obtenue par un simple élément {{HTMLElement("div")}}, et en appliquant la police générique <code>monospace</code> comme valeur pour la propriété <a href="/fr/docs/Web/CSS">CSS</a> {{cssxref("font-family")}}.</li> +</ul> +</div> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément n'a aucun autre attribut en dehors des <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>, communs à tous les éléments.</p> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Cet élément implémente l'interface {{domxref('HTMLElement')}}.</p> + +<div class="note"> +<p><strong>Note d'implémentation : </strong>Jusqu'à Gecko 1.9.2 inclus, Firefox implémente l'interface {{domxref('HTMLSpanElement')}} pour cet élément.</p> +</div> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.plaintext")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("pre")}} et {{HTMLElement("code")}} qui doivent être utilisés à la place</li> + <li>{{HTMLElement("listing")}} et {{HTMLElement("xmp")}}, similaires mais également obsolètes</li> +</ul> diff --git a/files/fr/web/html/element/pre/index.html b/files/fr/web/html/element/pre/index.html new file mode 100644 index 0000000000..e46eaa46a1 --- /dev/null +++ b/files/fr/web/html/element/pre/index.html @@ -0,0 +1,153 @@ +--- +title: '<pre> : l''élément de texte préformaté' +slug: Web/HTML/Element/pre +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/pre +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML<strong> <code><pre></code></strong> représente du texte préformaté, généralement écrit avec une police à chasse fixe. Le texte est affiché tel quel, les espaces utilisés dans le document HTML seront retranscrits.</p> + +<div class="note"> +<p><strong>Note :</strong> Il est nécessaire d'échapper les caractères '<code><</code>' en '<code>&lt;</code>' afin de s'assurer que le code écrit entre les éléments ne soit pas interprété de façon involontaire.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/tabbed/pre.html", "tabbed-standard")}}</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> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("cols")}} {{non-standard_inline}}{{deprecated_inline}}</dt> + <dd>Cet attribut contient le nombre <em>préféré</em> de caractères qu'une ligne devrait avoir. Cet attribut était un synonyme non-standard de {{htmlattrxref("width", "pre")}}. Afin d'obtenir cet effet, il est plutôt conseillé d'utiliser la propriété {{cssxref("width")}}.</dd> + <dt>{{htmlattrdef("width")}} {{deprecated_inline}}</dt> + <dd>Cet attribut contient le nombre <em>préféré</em> de caractères qu'une ligne devrait avoir. Bien qu'implémenté, cet attribut n'a aucun effet visuel. Pour obtenir cet effet, il est plutôt conseillé d'utiliser {{cssxref("width")}}.</dd> + <dt>{{htmlattrdef("wrap")}} {{non-standard_inline}}</dt> + <dd>Cet attribut est une indication sur la façon de gérer le dépassement d'une ligne. Les navigateurs modernes ignorent cette indication et cet attribut n'engendre aucun effet visuel. Pour obtenir cet effet, il faut utiliser la propriété CSS {{cssxref("white-space")}}.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><pre> +body { + color:red; +} +</pre> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","200","120")}}</p> + +<h2 id="Accessibilité">Accessibilité</h2> + +<p>Il est important de fournir une description alternative pour toute image ou diagramme créé avec du texte préformaté. Cette description alternative devrait décrire clairement, et de façon concise, le contenu du diagramme.</p> + +<p>Les personnes souffrant de troubles de la vision et/ou naviguant à l'aide d'outils d'assistance comme des lecteurs d'écran peuvent ne pas comprendre le diagramme si celui-ci est construit avec des lettres et symboles.</p> + +<p>Pour légender un tel diagramme, on pourra utiliser une combinaison d'éléments {{HTMLElement("figure")}} et {{HTMLElement("figcaption")}} relié via un attribut {{htmlattrxref("id")}} et les attributs <a href="/fr/docs/Accessibilité/ARIA">ARIA</a> <code>role</code> et <code>aria-labelledby</code> afin que le texte soit annoncé comme une image et que l'élément <code>figcaption</code> fournisse la description alternative.</p> + +<h3 id="Exemple">Exemple</h3> + +<pre><figure role="img" aria-labelledby="legende-vache"> + <pre> + _____________ +< Oh la vache !> + ------------- + \ ^__^ + \ (oo)\_______ + (__)\ )\/\ + ||----w | + || || + </pre> + <figcaption id="legende-vache"> + Une vache qui dit « Oh la vache ! ». La vache est illustrée avec du texte à chasse fixe. + </figcaption> +</figure> +</pre> + +<ul> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">Comprendre les règles WCAG 1.1</a></li> + <li><em><a href="https://www.w3.org/TR/WCAG20-TECHS/H86.html">H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0</a></em><a href="https://www.w3.org/TR/WCAG20-TECHS/H86.html"> (en anglais)</a></li> +</ul> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</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>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLPreElement")}}</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', 'semantics.html#the-pre-element', '<pre>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Aucune modification majure depuis {{SpecName("HTML5 W3C")}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-pre-element', '<pre>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Aucune modification majeure depuis {{SpecName("HTML4.01")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.4', '<pre>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Dépréciation de l'attribut <code>cols</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("html.elements.pre")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les propriétés CSS {{cssxref('white-space')}} et {{cssxref('word-break')}}</li> +</ul> diff --git a/files/fr/web/html/element/progress/index.html b/files/fr/web/html/element/progress/index.html new file mode 100644 index 0000000000..3755c3c0e1 --- /dev/null +++ b/files/fr/web/html/element/progress/index.html @@ -0,0 +1,118 @@ +--- +title: '<progress> : l''élément d''indicateur de progression' +slug: Web/HTML/Element/Progress +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/progress +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><progress></code></strong> indique l'état de complétion d'une tâche et est généralement représenté par une barre de progression.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/progress.html", "tabbed-standard")}}</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> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("max")}}</dt> + <dd>Cet attribut indique la valeur correspondant à la complétion de la tâche. Si l'attribut <code>max</code> est présent, sa valeur doit être un nombre décimal supérieur à 0. La valeur par défaut est 1.</dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>Cet attribut indique l'état actuel de complétion de la tâche avec une valeur numérique. La valeur de l'attribut doit être un nombre décimal compris entre 0 et <code>max</code> (ou entre 0 et 1 si l'attribut <code>max</code> est absent). Si l'attribut <code>value</code> est absent, la barre de progression traduit un état indéterminé (la tâche est en cours et on ne sait pas la durée qu'elle prendra).</dd> +</dl> + +<div class="note"> +<p><strong>Note :</strong> La valeur minimale est toujours 0 et il n'existe pas d'attribut <code>min</code> pour l'élément <code>progress</code>. La propriété CSS {{cssxref("-moz-orient")}} peut être utilisée afin d'indiquer si barre de progression doit être affichée horizontalement (le comportement par défaut) ou verticalement.<br> + La pseudo-classe CSS {{cssxref(":indeterminate")}} permet quant à elle de cibler les barres de progression indéterminées. Pour qu'une barre d'avancement retrouve un état indéterminé après qu'elle ait eu une valeur, on pourra utiliser <code>element.removeAttribute("value")</code>.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><progress value="70" max="100">70 %</progress> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples", 200, 50)}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_associé_aux_formulaires">contenu de formulaire (étiquetable)</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a> sans élément <code><progress></code> parmi ses descendants.</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_phras.C3.A9">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLProgressElement")}}.</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-progress-element', '<progress>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-progress-element', '<progress>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.progress")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("meter")}}</li> + <li>{{cssxref(":indeterminate")}}</li> + <li>{{cssxref("-moz-orient")}}</li> + <li>{{cssxref("::-moz-progress-bar")}}</li> + <li>{{cssxref("::-ms-fill")}}</li> + <li>{{cssxref("::-webkit-progress-bar")}}</li> + <li>{{cssxref("::-webkit-progress-value")}}</li> + <li>{{cssxref("::-webkit-progress-inner-element")}}</li> +</ul> diff --git a/files/fr/web/html/element/q/index.html b/files/fr/web/html/element/q/index.html new file mode 100644 index 0000000000..b246324420 --- /dev/null +++ b/files/fr/web/html/element/q/index.html @@ -0,0 +1,118 @@ +--- +title: '<q> : l''élément de citation en incise' +slug: Web/HTML/Element/q +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/q +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML<strong> <code><q></code></strong> indique que le texte qu'il contient est une citation en incise. La plupart des navigateurs modernes entoure le texte de cet élément avec des marques de citation. Cet élément est destiné aux citations courtes qui ne nécessitent pas de sauts de paragraphe. Pour les plus grandes citations, on utilisera l'élément {{HTMLElement("blockquote")}}.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/q.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> + +<div class="note"> +<p><strong>Note d'utilisation :</strong> la plupart des navigateurs récents ajoutent automatiquement des guillemets autours du contenu d'un élément <code><q></code> mais il peut être nécessaire d'ajouter une règle CSS pour les ajouter dans les anciens navigateurs.</p> +</div> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("cite")}}</dt> + <dd>La valeur de cet attribut est une URL désignant la source du message ou de l'information citée. Cet attribut est prévu pour fournir des renseignements concernant le contexte ou la référence de cette citation.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Chaque fois que Kenny est tué, Stan dira + <q cite="http://fr.wikipedia.org/wiki/Kenny_McCormick#Le_dialogue_rituel"> + Oh mon Dieu, ils ont tué Kenny ! + </q>. +</p> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","300","120")}}</p> + +<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%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</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 acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLQuoteElement")}}</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', 'semantics.html#the-q-element', '<q>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-q-element', '<q>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '<q>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.q")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("blockquote")}} pour les citations longues</li> + <li>{{HTMLElement("cite")}} pour les sources des citations</li> +</ul> diff --git a/files/fr/web/html/element/rb/index.html b/files/fr/web/html/element/rb/index.html new file mode 100644 index 0000000000..27bb5d7fae --- /dev/null +++ b/files/fr/web/html/element/rb/index.html @@ -0,0 +1,148 @@ +--- +title: '<rb> : l''élément de base ruby' +slug: Web/HTML/Element/rb +tags: + - Element + - HTML + - Reference + - Ruby +translation_of: Web/HTML/Element/rb +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">L'élément de <strong>base ruby (<code><rb></code>) </strong>est utilisé afin de délimiter le composant texte de base d'une annotation {{HTMLElement("ruby")}}. Autrement dit, le texte qui est annoté.</span> Un élément <code><rb></code> devrait encadrer chaque segment atomique du texte de base.</p> + +<div class="hidden">\{{EmbedInteractiveExample("pages/tabbed/rb.html", "tabbed-standard")}}</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> + +<h2 id="Attributs">Attributs</h2> + +<p>Seuls les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a> peuvent être utilisés sur cet élément.</p> + +<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> + +<ul> + <li>Les annotations ruby sont utilisées afin d'afficher la prononciation pour les caractères d'Asie orientale tels que les caractères japonais furigana ou les caractères taïwanais bopomofo. L'élément <code><rb></code> permet de séparer chaque segment du texte de base ruby.</li> + <li>Bien que <code><rb></code> ne soit pas un élément vide, il est courant de n'inclure que la balise d'ouverture de chaque élément afin de simplifier le balisage dédié aux annotations ruby.</li> + <li>Il faut inclure un élément {{htmlelement("rt")}} pour chaque segment de base <code><rb></code> qu'on souhaite annoter.</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<p>Dans cet exemple, on fournit une annotation pour le caractère original correspondant à "Kanji" :</p> + +<pre class="brush: html"><ruby> + <rb>漢<rb>字 + <rp>(</rp><rt>kan<rt>ji<rp>)</rp> +</ruby></pre> + +<p>On voit ici que deux éléments <code><rb></code> sont inclus et permettent de délimiter les deux segments du texte de base. Pour l'annotation, chaque partie correspondante est délimitée par un élément {{htmlelement("rt")}}.</p> + +<p>On aurait également pu écrire cet exemple avec les deux parties du texte de base complètement séparées. Dans ce cas, il n'aurait pas été nécessaire d'inclure les éléments <code><rb></code> :</p> + +<pre class="brush: html"><ruby> + 漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> + 字 <rp>(</rp><rt>ji</rt><rp>)</rp> +</ruby></pre> + +<div class="hidden"> +<div id="with-ruby"> +<pre class="brush: html"><ruby> <rb>漢<rb>字 <rp>(</rp><rt>kan<rt>ji<rp>)</rp> </ruby> +</pre> + +<pre class="brush: css">body { + font-size: 22px; +}</pre> +</div> +</div> + +<p>Voici le résultat obtenu :</p> + +<p>{{EmbedLiveSample("with-ruby", "100%", 60)}}</p> + +<p>Pour un navigateur qui ne prend pas en charge les annotations ruby, voici à quoi aurait ressemblé le résultat :</p> + +<div id="without-ruby"> +<div class="hidden"> +<pre class="brush: html">漢字 (kan ji)</pre> + +<pre class="brush: css">body { + font-size: 22px; +} +</pre> +</div> +</div> + +<p>{{EmbedLiveSample("without-ruby", "100%", 60)}}</p> + +<div class="note"> +<p><strong>Note :</strong> Voir l'article sur l'élément {{HTMLElement("ruby")}} pour de plus amples exemples.</p> +</div> +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu">Catégories de contenu</a></th> + <td>Aucune.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Cet élément peut être l'élément fils d'un élément {{htmlelement("ruby")}}.</td> + </tr> + <tr> + <th scope="row">Omission de balise</th> + <td>La balise de fin peut être omise si l'élément est immédiatement suivi d'un élément {{HTMLElement("rt")}}, {{HTMLElement("rtc")}} ou {{HTMLElement("rp")}} ou encore par un autre élément <code><rb></code> ou s'il n'y a plus de contenu dans l'élément parent.</td> + </tr> + <tr> + <th scope="row">Éléments parents autorisés</th> + <td>Un élément {{HTMLElement("ruby")}}.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>N'importe quel rôle</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</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('HTML5 W3C', 'text-level-semantics.html#the-rb-element', '<rb>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.rb")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("ruby")}}</li> + <li>{{HTMLElement("rt")}}</li> + <li>{{HTMLElement("rp")}}</li> + <li> + <p>{{HTMLElement("rtc")}}</p> + </li> +</ul> diff --git a/files/fr/web/html/element/rp/index.html b/files/fr/web/html/element/rp/index.html new file mode 100644 index 0000000000..ed324ac153 --- /dev/null +++ b/files/fr/web/html/element/rp/index.html @@ -0,0 +1,134 @@ +--- +title: '<rp> : l''élément de parenthèses alternatif aux annotations Ruby' +slug: Web/HTML/Element/rp +tags: + - Element + - HTML + - Reference + - Ruby + - Web +translation_of: Web/HTML/Element/rp +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><rp></code> </strong>est utilisé pour fournir ce qui fera office de parenthèse aux navigateurs qui ne prennent pas en charge les annotations Ruby.</p> + +<p>Les annotations Ruby permettent d'afficher la prononciation des caractères d'Asie orientale, notamment lors de l'usage de caractères furigana Japonais ou bopomofo Taïwanais.</p> + +<p>Un élément <code><rp></code> devrait encadrer chaque parenthèse ouvrante et fermante englobant l'élément {{HTMLElement("rt")}} contenant les annotations.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/rp.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> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Exemples">Exemples</h2> + +<div id="with-ruby"> +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ruby> + 漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> + 字 <rp>(</rp><rt>ji</rt><rp>)</rp> +</ruby></pre> + +<div class="hidden"> +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">body { + font-size: 22px; +}</pre> +</div> +</div> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("with-ruby","300","150")}}</p> + +<p>Avec un navigateur ne prenant pas en charge les annotations Ruby, on aurait :</p> + +<div id="without-ruby"> +<div class="hidden"> +<pre class="brush: html">漢 (Kan) 字 (ji)</pre> + +<pre class="brush: css">body { + font-size: 22px; +} +</pre> +</div> +</div> + +<p>{{EmbedLiveSample("without-ruby", 600, 60)}}</p> + +<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>Aucune.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>. Texte.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>La balise de fin peut être absente si l'élément est immédiatement suivi d'un élément {{HTMLElement("rt")}} ou d'un autre élément <code><rp></code> ou s'il n'y a plus de contenu dans l'élément parent.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Un élément {{HTMLElement("ruby")}}. <code><rp></code> doit être positionné immédiatement avant ou après un élément {{HTMLElement("rt")}}.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</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', 'text-level-semantics.html#the-rp-element', '<rp>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rp-element', '<rp>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.rp")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("ruby")}}</li> + <li>{{HTMLElement("rt")}}</li> + <li>{{HTMLElement("rb")}}</li> + <li>{{HTMLElement("rtc")}}</li> +</ul> diff --git a/files/fr/web/html/element/rt/index.html b/files/fr/web/html/element/rt/index.html new file mode 100644 index 0000000000..6b561fac0b --- /dev/null +++ b/files/fr/web/html/element/rt/index.html @@ -0,0 +1,100 @@ +--- +title: '<rt> : l''élément de texte Ruby' +slug: Web/HTML/Element/rt +tags: + - Element + - HTML + - Reference + - Ruby + - Web +translation_of: Web/HTML/Element/rt +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><rt></code></strong> indique la composante texte d'une annotation Ruby, il est notamment utilisé pour la prononciation, la traduction ou la translitération des caractères d'Asie orientale. Cet élément est toujours contenu dans un élément {{HTMLElement("ruby")}}.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/rt.html", "tabbed-shorter")}}</div> + +<div 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> !</div> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Exemples">Exemples</h2> + +<div id="with-ruby"> +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ruby> + 漢 <rt>Kan</rt> + 字 <rt>ji</rt> +</ruby> +</pre> + +<div class="hidden"> +<pre class="brush: css">body { + font-size: 22px; +} +</pre> +</div> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("with-ruby","100%","130")}}</p> + +<p>Pour un navigateur sans prise en charge de Ruby, on aurait le résultat suivant :</p> + +<div id="without-ruby"> +<div class="hidden"> +<pre class="brush: html">漢 Kan 字 ji</pre> + +<pre class="brush: css">body { + font-size: 22px; +} +</pre> +</div> +</div> + +<p>{{EmbedLiveSample("without-ruby", 600, 60)}}</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', 'text-level-semantics.html#the-rt-element', '<rt>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rt-element', '<rt>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.rt")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("ruby")}}</li> + <li>{{HTMLElement("rp")}}</li> + <li>{{HTMLElement("rb")}}</li> + <li>{{HTMLElement("rtc")}}</li> + <li>{{CSSXRef("text-transform", "text-transform: full-size-kana")}}</li> +</ul> +</div> diff --git a/files/fr/web/html/element/rtc/index.html b/files/fr/web/html/element/rtc/index.html new file mode 100644 index 0000000000..9b7165abdb --- /dev/null +++ b/files/fr/web/html/element/rtc/index.html @@ -0,0 +1,126 @@ +--- +title: '<rtc> : l''élément de conteneur de texte Ruby' +slug: Web/HTML/Element/rtc +tags: + - Element + - HTML + - Reference + - Ruby + - Web +translation_of: Web/HTML/Element/rtc +--- +<div>{{HTMLRef}}</div> + +<p>L'élément<strong> <code><rtc></code> </strong>permet d'ajouter des notations Ruby sémantiques. Il est donc « proche » des éléments liées à la représentation Ruby comme {{HTMLElement("rb")}}, {{HTMLElement("ruby")}}. Les éléments {{HTMLElement("rb")}} peuvent être annotés pour la prononciation ({{HTMLElement("rt")}}) ou pour la sémantique ({{HTMLElement("rtc")}}).</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/rtc.html", "tabbed-standard")}}</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> + + + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ruby> + <rb>旧</rb> <rt>jiù</rt> + <rb>金</rb> <rt>jīn</rt> + <rb>山</rb> <rt>shān</rt> + <rtc>San Francisco</rtc> +</ruby> +</pre> + +<div class="hidden"> +<pre class="brush: css">.info { + padding-top: 10px; + font-size: 36px; +} +</pre> +</div> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemple",600,120)}}</p> +<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>Aucune.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a> ou des éléments {{HTMLElement("rt")}}.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>La balise de fin peut être omise si l'élément est immédiatement suivi par un élément {{HTMLElement("rb")}}, {{HTMLElement("rtc")}} ou {{HTMLElement("rt")}} ou s'il est immédiatement suivi par la balise de fermeture de l'élément parent.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Un élément {{HTMLElement("ruby")}}.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</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('HTML5.3', 'textlevel-semantics.html#the-rtc-element', '<rtc>')}}</td> + <td>{{Spec2('HTML5.3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.2', 'textlevel-semantics.html#the-rtc-element', '<rtc>')}}</td> + <td>{{Spec2('HTML5.2')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'textlevel-semantics.html#the-rtc-element', '<rtc>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rtc-element', '<rtc>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.rtc")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("ruby")}}</li> + <li>{{HTMLElement("rp")}}</li> + <li>{{HTMLElement("rb")}}</li> + <li>{{HTMLElement("rt")}}</li> + <li>{{HTMLElement("rtc")}}</li> +</ul> diff --git a/files/fr/web/html/element/ruby/index.html b/files/fr/web/html/element/ruby/index.html new file mode 100644 index 0000000000..a799f2c938 --- /dev/null +++ b/files/fr/web/html/element/ruby/index.html @@ -0,0 +1,121 @@ +--- +title: <ruby> +slug: Web/HTML/Element/ruby +tags: + - Element + - HTML + - Reference + - Ruby + - Web +translation_of: Web/HTML/Element/ruby +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><ruby></code></strong> représente une annotation ruby. Les annotations Ruby servent à afficher la prononciation des caractères d'Asie orientale.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/ruby.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> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut uniquement les <a href="/fr/docs/Web/HTML/Global_attributes">attributs globaux</a>.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Annoter_un_caractère">Annoter un caractère</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush:html"><ruby> + 漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> + 字 <rp>(</rp><rt>ji</rt><rp>)</rp> +</ruby></pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Annoter_un_caractère")}}</p> + +<h3 id="Annoter_un_mot">Annoter un mot</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush:html"><ruby> + 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> +</ruby></pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("Annoter_un_mot")}}</p> + +<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%C3%A9gorie_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%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu de phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu de phrasé</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%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu de phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</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', 'semantics.html#the-ruby-element', '<ruby>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-ruby-element', '<ruby>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.ruby")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("rt")}}</li> + <li>{{HTMLElement("rp")}}</li> + <li>{{HTMLElement("rb")}}</li> + <li>{{HTMLElement("rtc")}}</li> + <li>{{HTMLElement("rbc")}}</li> + <li>{{CSSXRef("text-transform", "text-transform: full-size-kana")}}</li> +</ul> diff --git a/files/fr/web/html/element/s/index.html b/files/fr/web/html/element/s/index.html new file mode 100644 index 0000000000..e57624a66d --- /dev/null +++ b/files/fr/web/html/element/s/index.html @@ -0,0 +1,135 @@ +--- +title: <s> +slug: Web/HTML/Element/s +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/s +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><s></code></strong> permet d'afficher du texte qui est barré car il n'est plus pertinent ou car il est obsolète. <code><s></code> ne doit pas être employé pour indiquer des éditions dans un document (on utilisera alors {{HTMLElement("del")}} et {{HTMLElement("ins")}}).</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/s.html", "tabbed-shorter")}}</div> + +<div 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> !</div> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p> + <s>Le plat du jour : saumon à la hollandaise</s> <em>plus disponible</em> +</p></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<h2 id="Accessibilité">Accessibilité</h2> + +<p>Par défaut, la plupart des outils d'assistance n'annoncent pas la présence de l'élément <code>s</code>. On peut le rendre annonçable via la propriété CSS {{cssxref("content")}} et grâce aux pseudo-éléments {{cssxref("::before")}} et {{cssxref("::after")}}.</p> + +<pre>s::before, +s::after { + clip-path: inset(100%); + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +s::before { + content: " [Début du texte rayé]"; +} + +s::after { + content: " [Fin du texte rayé] "; +} +</pre> + +<p>Certaines personnes qui utilisent des lecteurs d'écran désactivent sciemment ces annonces pour éviter une verbosité trop importante. Il est donc important de ne pas abuser de cette technique et de ne l'appliquer qu'à des situations où il est nécessaire de comprendre que du contenu a été rayé.</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/"><em>Short note on making your mark (more accessible) | The Paciello Group</em> (en anglais)</a></li> + <li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html"><em>Tweaking Text Level Styles | Adrian Roselli</em> (en anglais)</a></li> +</ul> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/fr/docs/Web/HTML/Attributs_universels">Catégories de contenu</a></th> + <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">Contenu phrasé</a> ou <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">Contenu phrasé</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_phrasé">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</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','semantics.html#the-s-element','s element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','text-level-semantics.html#the-s-element','s element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div class="hidden">Le tableau de compatibilité de cette page 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.s")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{obsolete_inline}} {{HTMLElement("strike")}} qui était un ancien synonyme de <code><s></code>, désormais obsolète et qui ne doit plus être utilisé sur le Web</li> + <li>{{HTMLElement("del")}} qui est utilisé afin d'indiquer des données ou des portions de texte qui ont été supprimées</li> + <li>La propriété CSS {{cssxref("text-decoration-line")}} qui permet de contrôler l'aspect de la ligne utilisée sur le contenu de l'élément {{HTMLElement("s")}}</li> +</ul> diff --git a/files/fr/web/html/element/samp/index.html b/files/fr/web/html/element/samp/index.html new file mode 100644 index 0000000000..fb4733074b --- /dev/null +++ b/files/fr/web/html/element/samp/index.html @@ -0,0 +1,167 @@ +--- +title: '<samp> : l''élément d''échantillon produit' +slug: Web/HTML/Element/samp +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/samp +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><samp></code></strong> est un élément qui permet de représenter un résultat produit par un programme informatique. Il est généralement affiché avec la police à chasse fixe du navigateur (par exemple en Courier ou en Lucida Console).</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/samp.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> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> + +<p>Il est possible d'utiliser une règle CSS afin de surcharger la police par défaut utilisée par le navigateur pour les éléments <code><samp></code>. On rappelle ici que les préférences de l'utilisateur peuvent également prendre le pas sur les feuilles de styles des documents.</p> + +<p>Voici un exemple de règle permettant de surcharger la police par défaut pour ces éléments :</p> + +<pre class="brush: css">samp { + font-family: "Courier"; +}</pre> + +<div class="note"> +<p><strong>Note :</strong> S'il vous faut un élément qui serve de conteneur pour une valeur produite par le site ou l'application, vous devriez utiliser {{HTMLElement("output")}} plutôt que <code><samp></code>.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_simple">Exemple simple</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p> + Texte normal. + <samp>Extrait de texte produit par un programme.</samp> + Texte normal. +</p> +</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<h3 id="Sortie_incluant_une_entrée_utilisateur">Sortie incluant une entrée utilisateur</h3> + +<p>Il est possible d'imbriquer un élément {{HTMLElement("kbd")}} dans un bloc <code><samp></code> afin de représenter un fragment de texte saisi par l'utilisateur. Par exemple, si on souhaite retranscrire une session d'un terminal (sous Linux ou macOS), on pourra utiliser le code suivant.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><pre> +<samp><span class="prompt">jean@internets:~$</span><kbd>md5 -s "Coucou monde"</kbd> +MD5 ("Coucou monde") = b961d9fb0ef48ff051fb67625abd0022 + +<span class="prompt">jean@internets:~$</span> <span class="cursor">█</span></samp></pre></pre> + +<p>On notera l'utilisation de {{HTMLElement("span")}} qui permet de personnaliser l'apparence de certaines portions du texte (comme l'invite ou le curseur). On notera également l'utilisation de <code><kbd></code> afin de représenter la commande saisie par l'utilisateur dans l'invite.</p> + +<h4 id="CSS">CSS</h4> + +<p>Voici la feuille de style que nous utilisons :</p> + +<pre class="brush: css">.prompt { + color: #b00; +} + +samp > kbd { + font-weight: bold; +} + +.cursor { + color: #00b; +}</pre> + +<p>Cela permet simplement de colorer légèrement l'invite et le curseur. On utilise du gras pour le texte saisi au clavier.</p> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("Sortie_incluant_une_entrée_utilisateur", 650, 120)}}</p> + +<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%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</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 acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</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', 'semantics.html#the-samp-element', '<samp>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-samp-element', '<samp>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<samp>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.samp")}}</p> + +<h2 id="Notes">Notes</h2> + +<p>On peut appliquer une règle CSS sur le sélecteur <code>samp</code> afin de remplacer la police de caractère par défaut du navigateur.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("code")}}</li> + <li>{{HTMLElement("kbd")}}</li> + <li>{{HTMLElement("pre")}}</li> + <li>{{HTMLElement("output")}}</li> +</ul> diff --git a/files/fr/web/html/element/script/index.html b/files/fr/web/html/element/script/index.html new file mode 100644 index 0000000000..a48aa5bc07 --- /dev/null +++ b/files/fr/web/html/element/script/index.html @@ -0,0 +1,206 @@ +--- +title: '<script> : l''élément de script' +slug: Web/HTML/Element/script +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/script +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><script></code></strong> est utilisé pour intégrer ou faire référence à un script exécutable. Cela fait généralement référence à du code JavaScript mais ce peut également être un autre type de script (par exemple <a href="/fr/docs/Apprendre/WebGL">WebGL</a>).</p> + +<p>Les scripts sans attribut <code>async</code> ou <code>defer</code> sont chargés et exécutés immédiatement avant que le navigateur continue l'analyse de la page.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("async")}}</dt> + <dd>Cet attribut booléen indique si le navigateur doit, dans la mesure du possible, exécuter les scripts de manière asynchrone. <strong><em>Cet attribut ne doit pas être utilisé si l'attribut <code>src</code> est absent (c'est-à-dire pour les scripts « inline » déclarés dans les éléments), dans ce cas il n'aurait aucun effet.</em></strong></dd> + <dd>Par défaut, les navigateurs prennent l'hypothèse la plus pessimiste et chargent les scripts de façon synchrone (autrement dit, le comportement par défaut est <code>async="false"</code>) lors de l'analyse du document HTML.</dd> + <dd>Les scripts insérés dynamiquement (via {{domxref("document.createElement()")}}) sont exécutés de façon asynchrone par défaut. Pour activer le mode d'exécution synchrone, il faudra explicitement indiquer <code>async="false"</code>.<br> + <br> + Se référer au tableau de compatibilité ci-après pour les informations concernant la prise en charge par les navigateurs. Voir aussi la page sur <a href="/fr/docs/Games/Techniques/Async_scripts">les scripts asynchrones avec asm.js</a>.</dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>Les balises de <code>script</code> classiques enverront un minimum d'informations à {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}} pour les scripts qui ne respectent pas les contrôles standard du <a href="/fr/docs/HTTP/Access_control_CORS">CORS</a>. Afin de disposer de plus de renseignements sur les erreurs pour les sites utilisant des domaines séparés pour des documents statiques, on pourra utiliser cet attribut. Voir <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS">la page de réglages des attributs CORS</a> pour plus d'explications quant aux valeurs valides.</dd> + <dt>{{htmlattrdef("defer")}}</dt> + <dd>Cet attribut booléen permet d'indiquer au navigateur que le script doit être exécuté après l'analyse du document et avant l'évènement {{event("DOMContentLoaded")}}. <strong><em>Cet attribut ne doit pas être utilisé si l'attribut <code>src</code> est absent (c'est-à-dire pour les scripts contenus déclarés dans les éléments), dans ce cas il n'aurait aucun effet.</em></strong> Pour obtenir un effet similaire avec les scripts insérés de façon dynamique, on utilisera explicitement <code>async=false</code>. Les scripts qui possèdent un attribut <code>defer</code> seront exécutés dans l'ordre dans lequel ils apparaissent dans le document.</dd> + <dd>Les scripts qui utilisent l'attribut <code>defer</code> empêche le déclenchement de l'évènement <code>DOMContentLoaded</code> tant que le script n'a pas été chargé et que son évaluation n'est pas terminée.</dd> + <dt>{{htmlattrdef("integrity")}}</dt> + <dd>Cet attribut contient des métadonnées que l'agent utilisateur peut vérifier afin de contrôler qu'une ressource téléchargée n'a pas été modifiée de façon frauduleuse. Pour plus d'informations, consulter <a href="/fr/docs/Web/Security/Subresource_Integrity">la page relative à l'intégrité des sous-ressources</a>.</dd> + <dt>{{htmlattrdef("nomodule")}}</dt> + <dd>Cet attribut booléen indique que le script ne doit pas être exécuté dans le navigateur si celui prend en charge <a href="https://tech.mozfr.org/post/2015/08/21/ES6-en-details-%3A-les-modules">les modules ES6</a>. En pratique, de tels scripts seront utilisés pour couvrir les cas où le navigateur ne prend pas en charge les modules JavaScript.</dd> + <dt>{{htmlattrdef("nonce")}}</dt> + <dd>Un <em>nonce</em> cryptographique utilisé pour inscrire les scripts en ligne sur une liste blanche pour la règle <code>script-src</code> de la CSP (<em>Content Security Policy</em>). Le serveur doit générer un nonce unique chaque fois qu'il transmet une règle de sécurité. Ce nonce ne doit pas pouvoir être deviné car sinon, il devient trivial d'outrepasser la règle de sécurité.</dd> + <dt id="attr-referrer">{{htmlattrdef("referrerpolicy")}}</dt> + <dd>Une chaîne de caractères qui indique le référent (<em>referrer</em>) à utiliser lors de la récupération du script : + <ul> + <li><code>no-referrer</code> signifie que l'en-tête {{HTTPHeader("Referer")}} ne sera pas envoyé.</li> + <li><code>no-referrer-when-downgrade</code> signifie qu'aucune en-tête <code>Referrer</code> ne sera envoyé lorsqu'on navigue vers une origine qui n'utilise pas TLS (HTTPS). C'est le comportement par défaut de l'agent utilisateur.</li> + <li><code>origin</code> signifie que le référent sera l'origine de la page (c'est-à-dire son schéma, son hôte et le port utilisé).</li> + <li><code>origin-when-cross-origin</code> signifie que les navigations vers d'autres origines seront limitées aux schémas, hôtes et ports. Les navigations sur la même origine inclueront le chemin explicite du référent.</li> + <li><code>same-origin</code> un référent sera envoyé pour <a href="/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript">les origines du même site</a> mais les requêtes multi-origines ne contiendront pas d'informations de référent.</li> + <li><code>strict-origin</code> seule l'origine du document est envoyée comme référent lorsque le protocole de sécurité est le même (HTTPS→HTTPS). L'origine n'est pas envoyée lorsque la destination est moins sécurisée (HTTPS→HTTP).</li> + <li><code>strict-origin-when-cross-origin</code> : l'URL complète est envoyée pour les requêtes de même origine, seule l'origine est envoyée lorsque le protocole de sécurité est le même (HTTPS→HTTPS) et aucun en-tête n'est envoyé pour une destination moins sécurisée (HTTPS→HTTP).</li> + <li><code>unsafe-url</code> signifie que le référent incluera l'origine et le chemin (mais pas le fragment, le mot de passe ou le nom utilisateur). Cette valeur n'est pas sûre car elle peut entraîner des fuites d'origine ou de chemin provenant de ressources sécurisées avec TLS vers des origines insécures.</li> + </ul> + + <p>Utiliser une chaîne vide (<code>""</code>) correspond à la valeur par défaut et à la valeur utilisée si <code>referrerpolicy</code> n'est pas pris en charge. Si cet attribut n'est pas explicitement défini sur l'élément <code><script></code>, ce dernier respectera la politique défine à un niveau supérieur (sur le document ou sur le domaine). Si une telle politique n'est pas disponible, la chaîne vide sera considérée comme équivalente à <code>no-referrer-when-downgrade</code>.</p> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>Cet attribut définit l'URI d'un script externe. Cela peut être utilisé pour insérer des scripts autrement qu'en les insérant à même le document. <strong><em>Les éléments <code>script</code> avec un attribut <code>src</code> défini ne doivent pas avoir de script compris dans leurs balises. Cela peut causer un comportement inattendu où le contenu du fichier référencé est chargé mais où le contenu de l'élément est ignoré.</em></strong></dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd> + <p>Cet attribut indique le type de script. La valeur de cet attribut peut appartenir à l'une de ces catégories :</p> + + <ul> + <li><strong>Correspondant à un type MIME JavaScript ou absent :</strong> Cela indique que le script est en JavaScript. La spécification HTML5 conseille aux auteurs d'omettre cet attribut plutôt que de fournir un type MIME redondant. Pour les navigateurs plus anciens, cela indiquait le langage de script du code embarqué. Les types MIME correspondant à JavaScript sont <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#JavaScript_types">énumérés dans la spécification</a>.</li> + <li><strong><code>module</code> :</strong> Le code sera traité comme un module JavaScript. Le traitement du script n'est pas affecté par les attributs <code>charset</code> et <code>defer</code>. Pour plus d'informations sur l'utilisation des modules, voir le guide sur <a href="/fr/docs/Web/JavaScript/Guide/Modules">les modules JavaScript</a>.</li> + <li><strong>Toute autre valeur :</strong> Le contenu embarqué est considéré comm un bloc de donnée et ne sera pas traité par le navigateur. Les développeurs doivent utiliser un type MIME valide qui n'est pas un type MIME JavaScript afin d'indiquer de tels blocs de donnée. Dans ce cas, l'attribut <code>src</code> sera ignoré.</li> + </ul> + + <div class="note"> + <p><strong>Note :</strong> Avec Firefox, on pouvait indiquer la version JavaScript d'un élément <code><script></code> en incluant un paramètre non-standard <code>version</code> à l'intérieur de <code>type</code> (ex. <code>type="text/javascript;version=1.8"</code>). Cette spécificité a été retirée avec Firefox 59 (cf. {{bug(1428745)}}).</p> + </div> + </dd> +</dl> + +<h3 id="Attributs_dépréciés">Attributs dépréciés</h3> + +<dl> + <dt>{{htmlattrdef("charset")}} {{Deprecated_inline}}</dt> + <dd>Si cet attribut est présent, sa valeur doit correspondre (quelle que soit la casse) à "<code>utf-8"</code>. Cet attribut est superflu car les documents doivent utiliser UTF-8 et car les éléments <code>script</code> héritent de l'encodage du document.</dd> + <dt>{{htmlattrdef("language")}} {{Deprecated_inline}}</dt> + <dd>Comme l'attribut <code>type</code>, cet attribut spécifie le langage de script utilisé. Cependant, contrairement à l'attribut <code>type</code> les valeurs possibles de cet attribut n'ont jamais été normalisées. Il est recommandé d'utiliser l'attribut <code>type</code> plutôt que celui-là.</dd> +</dl> + +<h2 id="Notes">Notes</h2> + +<p>Le script doit être servi avec le type MIME <code>text/javascript</code>. Cependant, les navigateurs appliquent cette règle avec une certaine flexibilité et ne bloquent que si le script est servi avec un type image (<code>image/*</code>), vidéo (<code>video/*</code>) ou audio (<code>audio/*</code>) ou CSV (<code>text/csv</code>). Si le script est bloqué, un évènement {{event("error")}} sera déclenché sur l'élément, sinon, l'évènement {{event("load")}} sera envoyé.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_simple">Exemple simple</h3> + +<pre class="brush: html"><!-- HTML4 et (x)HTML --> +<script type="text/javascript" src="javascript.js"></script> + +<!-- HTML5 --> +<script src="javascript.js"></script> +</pre> + +<h3 id="Utilisation_des_modules_et_d'une_alternative">Utilisation des modules et d'une alternative</h3> + +<p>Les navigateurs qui prennent en charge le type <code>module</code> prennent également en charge un attribut <code>nomodule</code> qui permet aux navigateurs qui ne gèrent pas les modules d'utiliser un autre script.</p> + +<pre class="brush: html"><script type="module" src="main.mjs"></script> +<script nomodule src="fallback.js"></script> +</pre> + +<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%C3%A9gorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_m.C3.A9ta-donn.C3.A9es">contenu de méta-données</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Script dynamique tel que <code>text/javascript</code>.</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 acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_m.C3.A9ta-donn.C3.A9es">contenu de méta-données</a> ou tout élément acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLScriptElement")}}</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", "scripting.html#the-script-element", "<script>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Retrait de l'attribut {{HTMLAttrxRef("charset", "script")}}.</td> + </tr> + <tr> + <td>{{SpecName("HTML5.3", "semantics-scripting.html#the-script-element", "<script>")}}</td> + <td>{{Spec2("HTML5.3")}}</td> + <td>Retrait de l'attribut {{HTMLAttrxRef("charset", "script")}}.</td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "semantics-scripting.html#the-script-element", "<script>")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>Ajout de la valeur <code>module</code> pour {{HTMLAttrxRef("type", "script")}}</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "semantics-scripting.html#the-script-element", "<script>")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "scripting-1.html#script", "<script>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "interact/scripts.html#h-18.2.1", "<script>")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("Subresource Integrity", "#htmlscriptelement", "<script>")}}</td> + <td>{{Spec2("Subresource Integrity")}}</td> + <td>Ajout de l'attribut {{HTMLAttrxRef("integrity", "script")}}.</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.script",2)}}</p> + +<h3 id="Notes_de_compatibilité">Notes de compatibilité</h3> + +<p>Pour les anciens navigateurs qui ne prennent pas en charge l'attribut <code>async</code> attribute, les scripts insérés lors de l'analyse (<em>parsing</em>) bloquent l'analyseur, les scripts insérés par d'autres scripts s'exécutent en asynchrone sous IE et WebKit et en synchrone sous Opera et sous Firefox pour les versions antérieures à Firefox 4.0.</p> + +<p>Sous Firefox 4.0, la propriété <code>async</code> du DOM vaut <code>true</code> par défaut pour les scripts créés avec <code>document.createElement("script").async</code> afin que le comportement par défaut corresponde au comportement d'IE et de WebKit. Afin que les scripts insérés par des scripts externes soient lancés dans l'ordre d'insertion, on définira <code>.async=false</code> pour les scripts dont on souhaite conserver l'ordre d'exécution.</p> + +<p><code>document.write()</code> ne doit jamais être appelé sur un script asynchrone avec <code>async</code>. Sous Gecko 1.9.2, si on appelle <code>document.write()</code>, cela aura un effet imprévisible. Pour Gecko 2.0, appeler <code>document.write()</code> depuis un script asynchrone n'aura aucun effet (en dehors d'afficher un message d'erreur dans la console).</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("document.currentScript")}}</li> + <li><a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">Les formats de date et d'heure utilisés en HTML</a></li> + <li><a href="/fr/docs/Web/JavaScript/Guide/Modules">Guide sur les modules JavaScript</a></li> + <li><a href="https://pie.gd/test/script-link-events/">Tableau de compatibilité de Ryan Grove pour les évènements liés aux éléments <code><script></code> et <code><link></code></a></li> + <li><a href="https://flaviocopes.com/javascript-async-defer/">Un article de Flavio Copes sur le chargement de ressources JavaScript et les différences entre <code>async</code> et <code>defer</code> (en anglais)</a></li> +</ul> diff --git a/files/fr/web/html/element/section/index.html b/files/fr/web/html/element/section/index.html new file mode 100644 index 0000000000..e7af5559a7 --- /dev/null +++ b/files/fr/web/html/element/section/index.html @@ -0,0 +1,123 @@ +--- +title: '<section> : l''élément de section générique' +slug: Web/HTML/Element/section +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/section +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><section></code></strong> représente une section générique d'un document, par exemple un groupe de contenu thématique. Une section commence généralement avec un titre.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/section.html", "tabbed-standard")}}</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> + +<p>Ainsi, un menu de navigation devrait être délimité par un élément {{htmlelement("nav")}} mais une liste de résultat de recherche, qui ne dispose pas d'élément spécifique pour être représentée, pourrait être englobée dans un élément <code><section></code>.</p> + +<div class="note"> +<p><strong>Note :</strong> Si le contenu de l'élément devrait être considéré comme un fragment indépendant (qui puisse être séparée du reste du contenu), l'élément {{HTMLElement("article")}} sera plus pertinent.</p> +</div> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> + +<ul> + <li>Chaque élément <code><section></code> devrait être identifié, généralement grâce à un élément de titre ({{HTMLElement('h1')}}-{{HTMLElement('h6')}}) qui est un élément fils de l'élément <code><section></code>.</li> + <li>S'il est plus pertinent que le contenu soit à part, on utilisera l'élément {{HTMLElement("article")}}.</li> + <li>L'élément <code><section></code> ne doit pas être utilisé comme un conteneur générique : c'est le rôle de {{HTMLElement("div")}}, notamment lorsque le sectionnement du contenu sert uniquement la mise en forme. Pour savoir lequel utiliser, on peut se demander si la section doit apparaître sur le plan du document : si oui, on utilisera <code><section></code>, sinon, <code><div></code>.</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><section> + <h1>Titre</h1> + <p>Du contenu sur un thème pour ce titre</p> +</section> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","100%","120")}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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/Catégorie_de_contenu#Contenu_sectionnant">contenu sectionnant</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</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>. Un élément <code><section></code> ne peut pas être le descendant d'un élément {{HTMLElement("address")}}.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>{{ARIARole("alert")}}, {{ARIARole("alertdialog")}}, {{ARIARole("application")}}, {{ARIARole("banner")}}, {{ARIARole("complementary")}}, {{ARIARole("contentinfo")}}, {{ARIARole("dialog")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("log")}}, {{ARIARole("main")}}, {{ARIARole("marquee")}}, {{ARIARole("navigation")}}, {{ARIARole("search")}}, {{ARIARole("status")}}, {{ARIARole("tabpanel")}}</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</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', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("html.elements.section")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments HTML relatifs au plan du document : {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li> + <li><a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">Structure et sections d'un document HTML5</a></li> + <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Region_role">ARIA : le rôle <code>region</code></a></li> +</ul> diff --git a/files/fr/web/html/element/select/index.html b/files/fr/web/html/element/select/index.html new file mode 100644 index 0000000000..5204079995 --- /dev/null +++ b/files/fr/web/html/element/select/index.html @@ -0,0 +1,217 @@ +--- +title: <select> +slug: Web/HTML/Element/select +tags: + - Element + - Formulaires + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/select +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><select></code></strong> représente un contrôle qui fournit une liste d'options parmi lesquelles l'utilisateur pourra choisir.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/select.html", "tabbed-standard")}}</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> + +<p>L'exemple ci-avant illustre une utilisation simple de <code><select></code> où l'attribut <code>id</code> peut être associé à un élément {{htmlelement("label")}} qui permettra d'avoir un libellé accessible pour ce champ et où un attribut <code>name</code> représente le nom de la donnée qui sera envoyée au serveur. Chaque option est définie grâce à un élément {{htmlelement("option")}} qui se situe à l'intérieur de l'élément <code><select></code>.</p> + +<p>Chaque élément <code><option></code> doit avoir un attribut <code>value</code> qui contient la valeur qui sera envoyée au serveur lorsque l'option est sélectionnée. Si aucune valeur n'est fournie, la valeur par défaut sera le texte contenu dans l'élément. Il est possible d'inclure un attribut <code>selected</code> sur un élément <code><option></code> afin que cette option soit sélectionnée par défaut au chargement de la page.</p> + +<p>L'élément <code><select></code> possède certains attributs spécifiques dont <code>multiple</code> qui permet de choisir plusieurs options simultanément et <code>size</code> qui indique le nombre d'options affichées en même temps. Cet élément accepte également divers attributs qui sont utilisés pour les champs de formulaire tels que <code>required</code>, <code>disabled</code>, <code>autofocus</code>, etc.</p> + +<p>Il est possible de regrouper plusieurs éléments <code><option></code> à l'intérieur d'éléments {{htmlelement("optgroup")}} afin de créer des groupes d'options distincts.</p> + +<p>Pour plus d'exemples, voir <a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#Contenu_déroulant">les contrôles natifs pour les formulaires</a>.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme tous les autres éléments HTML, celui-ci inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("autocomplete")}}</dt> + <dd>Une chaîne de caractères qui fournit une indication à l'agent utilisateur pour les fonctionnalités d'autocomplétion. Voir <a href="/fr/docs/Web/HTML/Attributs/autocomplete">la page sur l'attribut <code>autocomplete</code></a> pour une liste des valeurs utilisables et de leurs impacts sur l'autocomplétion.</dd> + <dt>{{htmlattrdef("autofocus")}}</dt> + <dd>Cet attribut booléen permet d'indiquer si ce contrôle du formulaire devrait recevoir le focus au chargement de la page. Pour un même document, seul un élément de formulaire peut avoir l'attribut <code>autofocus</code> activé.</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>Cet attribut booléen indique que l'utilisateur ne peut pas intéragir avec le contrôle. Si cet attribut n'est pas utilisé, le contrôle héritera de l'état paramétré selon son conteneur (par exemple, via son élément parent {{HTMLElement("fieldset")}}. Si aucun élément parent n'a l'attribut <code>disabled</code> activé, le contrôle sera actif.</dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd>Cet attribut sert de référence au formulaire auquel est associé cet élément. Si cet attribut est utilisé, sa valeur doit être l'identifiant d'un élément {{HTMLElement("form")}} du même document. Cet attribut permet de placer des éléments n'importe où dans le document et pas nécessairement comme descendants d'un formulaire.</dd> + <dt>{{htmlattrdef("multiple")}}</dt> + <dd>Cet attribut booléen indique qu'on peut sélectionner plusieurs options parmi celles offertes dans le contrôle. Par défaut, si cet attribut n'est pas utilisé, seule une option peut être sélectionnée.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>Le nom associé au contrôle.</dd> + <dt>{{htmlattrdef("required")}}</dt> + <dd>Un attribut booléen qui indique qu'une option dont la valeur est une chaîne de caractères non-vide doit être sélectionnée.</dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd>Si le contrôle est affichée comme une liste déroulante, cet attribut indique le nombre de lignes qui doivent être visibles à l'écran en même temps. On notera que les navigateurs ne sont pas obligés de présenter un élément <code><select</code><code>></code> sous la forme d'une liste déroulante. La valeur par défaut de cet attribut est 0 (cf. notes de compatibilité ci-après).</dd> +</dl> + +<h2 id="Mise_en_forme_avec_CSS">Mise en forme avec CSS</h2> + +<p>Il est communément admis que l'élément <code><select></code> est difficilement mis en forme avec CSS. Certains aspects de l'élément, <a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">son modèle de boîte</a>, <a href="/fr/docs/Web/CSS/CSS_Fonts">la police utilisée</a> ou encore l'apparence ({{cssxref("appearance")}}), peuvent être modifiés.</p> + +<p>Toutefois, ces propriétés peuvent fournir des résultats incohérents entre les différents navigateurs et il peut être difficile d'aligner différents contrôles sur une colonne.Aussi, si la structure interne de cet élément est trop complexe, on pourra créer un tel contrôle en utilisant des éléments non sémantiques, du code JavaScript et WAI-ARIA afin de décrire la sémantique du contrôle.</p> + +<p>Pour plus d'informations sur la mise en forme de <code><select></code> :</p> + +<ul> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mettre en forme les formulaires HTML</a></li> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">Mise en forme avancée des formulaires HTML</a></li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_basique">Exemple basique</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><!-- C'est la deuxième valeur --> +<!-- qui sera initialement sélectionnée --> +<select id="monselect"> + <option value="valeur1">Valeur 1</option> + <option value="valeur2" selected>Valeur 2</option> + <option value="valeur3">Valeur 3</option> +</select> +</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Exemple_basique","100%","150")}}</p> + +<h3 id="Exemple_multi-selection">Exemple multi-selection</h3> + +<p>L'exemple qui suit est légèrement plus complexe et illustre certaines fonctionnalités qui peuvent être utilisées avec un élément <code><select></code> :</p> + +<pre class="brush: html"><label>Veuillez choisir un ou plusieurs animaux : + <select name="pets" multiple size="4"> + <optgroup label="Animaux à 4-jambes"> + <option value="Chien">Chien</option> + <option value="chat">Chat</option> + <option value="hamster" disabled>Hamster</option> + </optgroup> + <optgroup label="Animaux volants"> + <option value="perroquet">Perroquet</option> + <option value="macaw">Macaw</option> + <option value="albatros">Albatros</option> + </optgroup> + </select> +</label> +</pre> + +<p id="Result_2">Cet exemple n'est pas disponible de façon interactive (le moteur de MDN supprime l'attribut <code>multiple</code> lors de l'affichage de la page) mais vous pouvez voir <a href="https://mdn.github.io/learning-area/html/forms/select-example/select-multiple.html">l'exemple sur GitHub</a>.</p> + +<p id="Notes_2">Vous pourrez voir que :</p> + +<ul> + <li>Plusieurs options peuvent être sélectionnées grâce à l'attribut <code>multiple</code>.</li> + <li>L'attribut <code>size</code> permet d'afficher uniquement 4 lignes simultanément et qu'il faut faire défiler le contenu.</li> + <li>Les éléments <code><optgroup></code> ont été utilisés pour diviser les choix en différents groupes. Cela applique un effet simplement visuel (avec le nom en gras et les options indentées).</li> + <li>Le choix "Hamster" est présent avec l'attribut <code>disabled</code> et ne peut donc pas être sélectionné.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong> : Sur un ordinateur de bureau, on pourra maintenir les touches <kbd>Ctrl</kbd>, <kbd>Command</kbd>, ou <kbd>Shift</kbd> en cliquant afin de sélectionner/déselectionner plusieurs options.</p> +</div> + +<h3 id="Sélectionner_plusieurs_options">Sélectionner plusieurs options</h3> + +<p>Sur un ordinateur de bureau, il existe différentes façons de sélectionner plusieurs options pour un élément <code><select></code> utilisant un attribut <code>multiple</code>.</p> + +<p>Pour les personnes qui utilisent la souris, il est possible de maintenir les touches <kbd>Ctrl</kbd>, <kbd>Command</kbd> ou <kbd>Shift</kbd> (selon le système d'exploitation utilisé) et de cliquer sur les différentes options afin de les sélectionner/déselectionner.</p> + +<div class="blockIndicator warning"> +<p><strong>Attention !</strong> Les moyens décrits ci-après pour sélectionner des options qui ne sont pas contigües semblent ne fonctionner qu'avec Firefox. On notera également que sur macOS, les raccourcis <kbd>Ctrl</kbd> + <kbd>Bas</kbd> et <kbd>Ctrl</kbd> + <kbd>Haut</kbd> sont utilisées par défaut par le système d'exploitation et qu'il faut les désactiver si on souhaite qu'ils fonctionnent dans le navigateurs.</p> +</div> + +<p>Les utilisateurs du clavier pourront sélectionner des options contigües de la façon suivante :</p> + +<ul> + <li>Placer le focus sur l'élément <code><select></code> (avec la touche <kbd>Tab</kbd> par exemple).</li> + <li>Sélectionner une option en haut ou en bas de l'intervalle en se déplaçant avec les touches <kbd>Haut</kbd> et <kbd>Bas</kbd>.</li> + <li>Maintenir la touche <kbd>Shift</kbd> puis utiliser les touches <kbd>Haut</kbd> et <kbd>Bas</kbd> pour augmenter ou réduire le nombre d'options sélectionnées.</li> +</ul> + +<p>Les utilisateurs du clavier pourront sélectionner des options non-contigües de la façon suivante :</p> + +<ul> + <li>Placer le focus sur l'élément <code><select></code> (avec la touche <kbd>Tab</kbd> par exemple).</li> + <li>Maintenir la touche <kbd>Ctrl</kbd> puis utiliser les touches <kbd>Haut</kbd> et <kbd>Bas</kbd> pour modifier le focus sur l'option qu'on souhaite choisir ou rejeter. L'option avec le focus sera entourée par un contour en pointillé.</li> + <li>Appuyer sur <kbd>Espace</kbd> pour sélectionner/déselectionner les options avec le focus et ainsi de suite pour les différentes options.</li> +</ul> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_interactif">contenu interactif</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_associé_aux_formulaires">contenu de formulaire</a> (listé, étiquetable, réinitialisable, qui peut être envoyé).</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Zéro ou plusieurs éléments {{HTMLElement("option")}} ou {{HTMLElement("optgroup")}}.</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_phrasé">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisé</th> + <td>{{ARIARole("menu")}}</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLSelectElement")}}</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-select-element', '<select>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-select-element', '<select>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<select>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.select")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("option")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}</li> + <li>Les évènements déclenchés par <code><select></code> : <code><a href="/fr/docs/Web/Events/input">input</a></code>, <code><a href="/fr/docs/Web/Events/change">change</a></code></li> +</ul> diff --git a/files/fr/web/html/element/shadow/index.html b/files/fr/web/html/element/shadow/index.html new file mode 100644 index 0000000000..190d28644b --- /dev/null +++ b/files/fr/web/html/element/shadow/index.html @@ -0,0 +1,116 @@ +--- +title: '<shadow> : l''élément obsolète pour la racine virtuelle' +slug: Web/HTML/Element/Shadow +tags: + - Composant web + - Déprécié + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/shadow +--- +<div>{{deprecated_header}}{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><shadow></code></strong> était utilisé comme un point d'insertion ({{glossary("insertion point")}}) du <em>shadow DOM</em>. Cet élément a été retiré de la spécification et est <a href="https://github.com/w3c/webcomponents/commit/041ba5518b9372768234d2766de503b98a03fa45">désormais obsolète</a>.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Voici un exemple simple de l'utilisation de l'élément <code><shadow></code>. Il s'agit d'un fichier HTML pourvu de tout ce qui est nécessaire.</p> + +<div class="note"> +<p><strong>Note :</strong> il s'agit d'une technologie expérimentale. Pour faire fonctionner ce code, le navigateur où vous l'affichez doit supporter les composants web (<em>web components</em>). Pour plus d'informations, voir <a href="/fr/docs/Web/Web_Components#Activer_les_Web_Components_dans_Firefox">Activer les composants web sous Firefox</a>.</p> +</div> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><html> + <head></head> + <body> + + <!-- Ce <div> accueillera les shadow roots. --> + <div> + <!-- Ce titre ne sera pas affiché --> + <h4>My Original Heading</h4> + </div> + + <script> + // Récupère le contenu du <div> ci-dessus + var origContent = document.querySelector('div'); + // Crée le premier shadow root + var shadowroot1 = origContent.createShadowRoot(); + // Crée le second shadow root + var shadowroot2 = origContent.createShadowRoot(); + + // Insère un contenu dans le plus vieux shadow root + shadowroot1.innerHTML = + '<p>Older shadow root inserted by &lt;shadow&gt;</p>'; + // Insère dans le plus jeune shadow root, y compris <shadow>. + // La balise précédente ne sera pas affichée à moins que + // l'élément <shadow> ne soit utilisé ci-dessous. + shadowroot2.innerHTML = + '<shadow></shadow> <p>Younger shadow root, displayed because it is the youngest.</p>'; + </script> + + </body> +</html> +</pre> + +<h3 id="Résultat_statique">Résultat statique</h3> + +<p><img alt="shadow example" src="https://mdn.mozillademos.org/files/10083/shadow-example.png" style="height: 343px; width: 641px;"></p> + + +<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%C3%A9gorie_de_contenu">Catégories de contenu </a></dfn></th> + <td><a href="/fr/docs/Web/HTML/Content_categories#Transparent_content_model">Contenu transparent</a>.</td> + </tr> + <tr> + <th scope="row"><dfn>Contenu autorisé </dfn></th> + <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">Contenu de flux</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 qui accepte un contenu de flux.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row"><dfn>Interface DOM</dfn></th> + <td>{{domxref("HTMLShadowElement")}}</td> + </tr> + </tbody> +</table> +<h2 id="Spécifications">Spécifications</h2> + +<p>Cet élément ne fait plus partie d'aucune spécification.</p> +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.shadow")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/Web_Components">Les composants web</a></li> + <li>{{HTMLElement("content")}}</li> + <li>{{HTMLElement("template")}}</li> + <li>{{HTMLElement("slot")}}</li> + <li>{{HTMLElement("element")}}</li> +</ul> diff --git a/files/fr/web/html/element/slot/index.html b/files/fr/web/html/element/slot/index.html new file mode 100644 index 0000000000..b2ff092601 --- /dev/null +++ b/files/fr/web/html/element/slot/index.html @@ -0,0 +1,130 @@ +--- +title: <slot> +slug: Web/HTML/Element/slot +tags: + - Composant web + - Element + - HTML + - Reference + - Web + - shadow dom +translation_of: Web/HTML/Element/slot +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><slot></code></strong> représente un emplacement d'un composant web qu'on peut remplir avec son propre balisage. On peut ainsi obtenir un document construit avec différents arbres DOM. Cet élément fait partie des outils relatifs <a href="/fr/docs/Web/Web_Components">aux composants web (Web Components)</a>.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("name")}}</dt> + <dd>Le nom de l'emplacement créé.</dd> + <dd>Un <strong><dfn>« slot » nommé</dfn></strong> est un élément <code><slot></code> avec un attribut <code>name</code>.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: html notranslate"><template id="element-details-template"> + <style> + details {font-family: "Open Sans Light", Helvetica, Arial, sans-serif } + .name {font-weight: bold; color: #217ac0; font-size: 120% } + h4 { + margin: 10px 0 -8px 0; + background: #217ac0; + color: white; + padding: 2px 6px; + border: 1px solid #cee9f9; + border-radius: 4px; + } + .attributes { margin-left: 22px; font-size: 90% } + .attributes p { margin-left: 16px; font-style: italic } + </style> + <details> + <summary> + <code class="name">&lt;<slot name="element-name">Remplacer ce nom</slot>&gt;</code> + <i class="desc"><slot name="description">Remplacer cette description</slot></i> + </summary> + <div class="attributes"> + <h4>Attributs</h4> + <slot name="attributes"><p>Aucun</p></slot> + </div> + </details> + <hr> +</template></pre> + +<div class="note"> +<p><strong>Note :</strong> Vous pouvez retrouver cet exemple sur <a href="https://github.com/mdn/web-components-examples/tree/master/element-details">ce dépôt GitHub</a> et observer <a href="https://mdn.github.io/web-components-examples/element-details/">son fonctionnement en live ici</a>. Une explication plus détaillée est également disponible avec l'article <a href="/fr/docs/Web/Web_Components/Using_templates_and_slots">Manipuler <code>template</code> et <code>slot</code></a>.</p> +</div> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Modèle_de_contenu_transparent">Contenu transparent</a>.</td> + </tr> + <tr> + <th scope="row">Évènements</th> + <td>{{event("slotchange")}}</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_phrasé"> contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLSlotElement")}}</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','scripting.html#the-slot-element','<slot>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#shadow-tree-slots','Slots')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.slot")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("template")}}</li> +</ul> diff --git a/files/fr/web/html/element/small/index.html b/files/fr/web/html/element/small/index.html new file mode 100644 index 0000000000..79fc586934 --- /dev/null +++ b/files/fr/web/html/element/small/index.html @@ -0,0 +1,114 @@ +--- +title: <small> +slug: Web/HTML/Element/small +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/small +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><small></code></strong> permet de représenter des commentaires ou des textes à écrire en petits caractères (des termes d'un contrat, des mentions relatives au droit d'auteur, etc.) quelle que soit la présentation.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/small.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> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p> + Voici une phrase avant des infos à + présenter en plus petit. + <small>© tous droits réservés</small> +</p> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","100%","120")}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Catégories de contenu</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é">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">Contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>Aucune, la balise ouvrante et la balise fermante doivent toutes les deux être présentes.</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_phrasé">contenu phrasé</a> ou 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>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</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', 'semantics.html#the-small-element', '<small>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-small-element', '<small>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#edef-SMALL', '<small>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.small")}}</p> + +<h2 id="Notes">Notes</h2> + +<p>Bien que l'élément <code><small></code> et les éléments <code><b></code> et <code><i></code> soient souvent considérés comme allant à l'encontre du découpage structure/présentation, ils sont tous valides en HTML5. Les auteurs doivent appliquer leur esprit critique afin de déterminer s'il est préférable d'employer <code><small></code> ou des règles CSS.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("b")}}</li> + <li>{{HTMLElement("font")}}</li> + <li>{{HTMLElement("style")}}</li> +</ul> diff --git a/files/fr/web/html/element/source/index.html b/files/fr/web/html/element/source/index.html new file mode 100644 index 0000000000..597e0d08b6 --- /dev/null +++ b/files/fr/web/html/element/source/index.html @@ -0,0 +1,146 @@ +--- +title: <source> +slug: Web/HTML/Element/Source +tags: + - Element + - HTML + - Media + - Reference + - Web +translation_of: Web/HTML/Element/source +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><source></code></strong> définit différentes ressources média pour un élément {{HTMLElement("picture")}}, {{HTMLElement("audio")}} ou {{HTMLElement("video")}}. C'est un élément vide : il ne possède pas de contenu et ne nécessite pas de balise fermante. Il est généralement utilisé pour distribuer le même contenu en utilisant <a href="/fr/docs/Web/HTML/formats_media_support">les différents formats pris en charge par les différents navigateurs</a>.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/source.html", "tabbed-standard")}}</div> + +<div 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> !</div> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("media")}}</dt> + <dd><a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">Une requête média</a> pour sélectionner la source du média. Cet attribut doit uniquement être utilisé pour un élément {{HTMLElement("picture")}}.</dd> + <dt>{{htmlattrdef("sizes")}}</dt> + <dd>Cet attribut est une liste de chaîne de caractères, séparées par des virgules, dont chacune décrit une condition de taille. Cette information est utilisée par le navigateur, avant la disposition de la page, pour déterminer quelle image parmi celles définies via l'attribut {{htmlattrxref("srcset", "source")}}. Cet attribut aura un effet uniquement lorsque l'élément {{HTMLElement("source")}} est un élément fils direct d'un élément {{HTMLElement("picture")}}.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>Cet attribut est obligatoire pour les éléments {{HTMLElement("audio")}} et {{HTMLElement("video")}}. Il définit l'adresse de la ressource. La valeur de cet attribut est ignorée lorsque l'élément <code><source></code> est à l'intérieur d'un élément{{HTMLElement("picture")}}.</dd> + <dt>{{htmlattrdef("srcset")}}</dt> + <dd>Une liste d'une ou plusieurs chaînes de caractères, séparées par des virgules. Cette liste indique un ensemble d'images qui peuvent être utilisées comme sources par le navigateur. Chaque chaîne de caractères se compose : + <ol> + <li>D'une URL pointant vers l'image,</li> + <li>D'un descripteur de largeur, c'est un entier positif, directement suivi par <code>'w'</code>. La valeur par défaut, si ce descripteur est absent, correspond à l'infini positif.</li> + <li>D'un descripteur de densité de pixel, c'est un nombre décimal positif, directement suivi par <code>'x'</code>. La valeur par défaut, si ce descripteur est absent, est <code>1x</code>.</li> + </ol> + + <p>Pour être valide, chaque chaîne de caractères doit comporter au moins un descripteur de largeur ou un descripteur de densité de pixel. Dans cette liste, il ne peut y avoir qu'une seule chaîne pour un même couple de descripteurs largeur/pixels. Le navigateur choisira la meilleure image parmi celles fournies dans la liste.<br> + L'attribut <code>srcset</code> n'aura un effet que lorsque l'élément {{HTMLElement("source")}} est le fils direct de l'élément {{HTMLElement("picture")}}.</p> + </dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>Le type MIME de la ressource, éventuellement complété d'un paramètre <code>codecs</code>. <a class="external" href="https://tools.ietf.org/html/rfc4281">La RFC 4281</a> indique comment indiquer des codecs. Si l'attribut <code>type</code> n'est pas défini, le type de média est récupéré depuis le serveur et le navigateur vérifie s'il peut le gérer. Si le fichier ne peut être utilisé, la source suivante est contrôlée et ainsi de suite. Si l'attribut <code>type</code> est indiqué, le navigateur le compare avec la liste des types qu'il prend en charge, si le type n'est pas reconnu, le serveur n'est pas interrogé et le navigateur analyse l'élément <code><source></code> qui suit.</dd> +</dl> + +<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> + +<p>L'élément <code><source></code> est un <em>élément vide</em> ce qui signifie qu'il n'a aucun contenu et qu'il n'y a pas de balise fermante associée. Autrement dit, on n'utilisera pas <code></source></code> dans le code d'un document HTML.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Vidéo">Vidéo</h3> + +<p>Dans cet exemple, on voit comment distribuer une vidéo au format Ogg pour les navigateurs qui prennent en charge ce format, la même vidéo au format QuickTime pour d'autres voire au format webm. Si le navigateur ne prend pas en charge <code><audio></code> ou <code><video></code>, un message sera affiché. Si le navigateur prend en charge l'élément mais aucun des formats proposé, un évènement <code>error</code> sera déclenché et le lecteur média (s'il est activé) indiquera une erreur. <a href="/fr/docs/Web/HTML/formats_media_support">Cette page indique les différents formats pris en charge par les navigateurs</a> pour les éléments <code><audio></code> et <code><video></code>.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><video controls> + <source src="toto.webm" type="video/webm"> + <source src="toto.ogg" type="video/ogg"> + <source src="toto.mov" type="video/quicktime"> + Votre navigateur ne prend pas en charge audio ou video. +</video> +</pre> + +<p>Pour plus d'exemples, se référer à <a href="/fr/docs/Web/HTML/Utilisation_d'audio_et_video_en_HTML5">Manipuler les éléments <code><audio></code> et <code><video></code> dans Firefox</a>.</p> + +<h3 id="Image">Image</h3> + +<pre class="brush: html"><picture> + <source srcset="mdn-logo-wide.png" media="(min-width: 800px)"> + <source srcset="mdn-logo-medium.png" media="(min-width: 600px)"> + <img src="mdn-logo-narrow.png" alt="MDN"> +</picture> +</pre> + +<p>Avec l'élément {{HTMLElement("picture")}}, il faut toujours inclure un élément {{HTMLElement("img")}} comme image de secours, avec un attribut <code>alt</code> qui garantit une certaine accessibilité.</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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>Aucune.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Aucun, c'est un élément vide.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>Cet élément doit avoir une balise ouvrante mais pas de balise fermante.</td> + </tr> + <tr> + <th scope="row"><dfn>Parents autorisés</dfn></th> + <td> + <div>Un élément média —{{HTMLElement("audio")}} ou {{HTMLelement("video")}}— pour lequel l'élément <code><source></code> doit être placé avant <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">tout contenu de flux</a> ou tout élément {{HTMLElement("track")}}.</div> + + <div>Un élément {{HTMLElement("picture")}}, pour lequel l'élément <code><source></code> doit être placé avant tout élément {{HTMLElement("img")}}.</div> + </td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLSourceElement")}}</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', 'embedded-content.html#the-source-element', '<source>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.source")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("picture")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("video")}}</li> + <li><a href="/fr/docs/Learn/Performance">Les performances sur le Web</a></li> +</ul> diff --git a/files/fr/web/html/element/spacer/index.html b/files/fr/web/html/element/spacer/index.html new file mode 100644 index 0000000000..28e1844bd5 --- /dev/null +++ b/files/fr/web/html/element/spacer/index.html @@ -0,0 +1,55 @@ +--- +title: <spacer> +slug: Web/HTML/Element/spacer +tags: + - Element + - HTML + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/spacer +--- +<div>{{non-standard_header}}{{obsolete_header}}{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><spacer></code></strong> était utilisé pour insérer des blancs au sein d'une page web. Il a été créé par Netscape pour obtenir le même effet que celui qui était créé avec des images GIF d'un pixel, permettant d'ajouter des espaces blancs. Cependant, <code><spacer></code> n'est pas pris en charge par les principaux navigateurs principaux et il faut utiliser les règles CSS pour obtenir ces effets d'alignement. Firefox ne prend plus en charge cet élément depuis la version 4.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme tous les autres éléments HTML, cet élément supporte <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("type")}}</dt> + <dd>Cet attribut détermine le type de <code><spacer></code>. Les valeurs possibles sont <code>horizontal</code>, <code>vertical</code> et <code>block</code>.</dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd>Cet attribut peut être utilisé pour définir la taille du <code><spacer></code> en pixels lorsque son type vaut <code>horizontal</code> ou <code>vertical</code>.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>Cet attribut peut être utilisé pour définir la largeur du <code><spacer></code> en pixels quand son type est <code>block</code>.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>Cet attribut peut être utilisé pour définir la hauteur du <code><spacer></code> en pixels quand son type est <code>block</code>.</dd> + <dt>{{htmlattrdef("align")}}</dt> + <dd>Cet attribut détermine l'alignement du <code><spacer></code>. Les valeurs possibles sont <code>left</code>, <code>right</code> et <code>center</code>.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html"><span>Un nœud texte</span> +<spacer type="horizontal" size="10"></spacer> +<span>Un autre nœud texte</span> +<spacer type="block" width="10" height="10"></spacer> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","100%","170")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<p>Cet élément ne fait partie d'aucune spécification.</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.spacer")}}</p> diff --git a/files/fr/web/html/element/span/index.html b/files/fr/web/html/element/span/index.html new file mode 100644 index 0000000000..6052cc8b12 --- /dev/null +++ b/files/fr/web/html/element/span/index.html @@ -0,0 +1,109 @@ +--- +title: <span> +slug: Web/HTML/Element/span +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/span +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><span></code></strong> est un conteneur générique en ligne (<em>inline</em>) pour les contenus phrasés. Il ne représente rien de particulier. Il peut être utilisé pour grouper des éléments afin de les mettre en forme (grâce aux attributs {{htmlattrxref("class")}} ou {{htmlattrxref("id")}} et aux règles <a href="/fr/docs/Web/CSS">CSS</a>) ou parce qu'ils partagent certaines valeurs d'attribut comme {{htmlattrxref("lang")}}. Il doit uniquement être utilisé lorsqu'aucun autre élément sémantique n'est approprié. <code><span></code> est très proche de l'élément {{HTMLElement("div")}}, mais l'élément <code><div></code> est <a href="/fr/docs/Web/HTML/Éléments_en_bloc">un élément de bloc</a>, alors que <code><span></code> est <a href="/fr/docs/Web/HTML/Éléments_en_ligne">un élément en ligne</a>.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/span.html", "tabbed-shorter")}}</div> + +<div 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> !</div> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html;gutter:false"><p><span>Un peu de texte</span></p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">p span { + background: green; +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","100%","100")}}</p> + +<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%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row"><dfn>Contenu autorisé</dfn></th> + <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</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%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, ou tout élément acceptant 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>Any</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLSpanElement")}} (avant HTML 5, l'interface était {{domxref("HTMLElement")}})</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', 'text-level-semantics.html#the-span-element', '<span>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-span-element', '<span>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>L'interface DOM est désormais {{domxref("HTMLSpanElement")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#edef-SPAN', '<span>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.span")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("div")}}</li> +</ul> diff --git a/files/fr/web/html/element/strike/index.html b/files/fr/web/html/element/strike/index.html new file mode 100644 index 0000000000..fc65ffe642 --- /dev/null +++ b/files/fr/web/html/element/strike/index.html @@ -0,0 +1,82 @@ +--- +title: <strike> +slug: Web/HTML/Element/strike +tags: + - Element + - HTML + - Obsolete + - Reference +translation_of: Web/HTML/Element/strike +--- +<div>{{Obsolete_header}}{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><strike></code></strong> permet de représenter du texte barré ou avec une ligne le traversant.</p> + +<div class="note"><strong>Note d'utilisation :</strong> Comme tous les éléments se limitant à la présentation, {{HTMLElement("strike")}} a été déprécié en HTML 4 et XHTML 1, et rendu obsolète dans HTML5. Si on souhaite représente du contenu <em>supprimé</em>, on utilisera l'élément {{HTMLElement("del")}} ; dans les autres cas, on utilisera un élément {{HTMLElement("s")}}.</div> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément n'a aucun autre attribut en dehors <a href="/fr/docs/Web/HTML/Attributs_universels">des attributs universels</a>, communs à tous les éléments.</p> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Cet élément implémente l'interface {{domxref("HTMLElement")}}.</p> + +<div class="note"> +<p><strong>Note d'implémentation : </strong>Jusqu'à Gecko 1.9.2 inclus, Firefox implémente l'interface {{domxref("HTMLSpanElement")}} pour cet élément.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: html"><strike> + Plat du jour : Saumon +</strike> +ÉPUISÉ +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","100%","140")}}</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", "obsolete.html#strike", "<strike>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Rendu obsolète et remplacé par {{HTMLElement("del")}} et {{HTMLElement("s")}}.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "obsolete.html#strike", "<strike>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>Rendu obsolète et remplacé par {{HTMLElement("del")}} et {{HTMLElement("s")}}.</td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "/present/graphics.html#edef-STRIKE", "<strike>")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td>Rendu déprécié pour être remplacé par {{HTMLElement("del")}} et {{HTMLElement("s")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.strike")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'élément {{HTMLElement("s")}}, proche de {{HTMLElement("strike")}}, également obsolète</li> + <li>L'élément {{HTMLElement("del")}} qui doit être utilisé lorsque le contenu a été <em>supprimé</em></li> + <li>La propriété CSS {{cssxref("text-decoration")}} qui permet d'obtenir le même effet visuel que l'élément {{HTMLElement("strike")}}</li> +</ul> diff --git a/files/fr/web/html/element/strong/index.html b/files/fr/web/html/element/strong/index.html new file mode 100644 index 0000000000..878f88c44f --- /dev/null +++ b/files/fr/web/html/element/strong/index.html @@ -0,0 +1,130 @@ +--- +title: '<strong> : l''élément de haute importance' +slug: Web/HTML/Element/strong +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/strong +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><strong></code></strong> indique que le texte a une importance particulière ou un certain sérieux voire un caractère urgent. Cela se traduit généralement par un affichage en gras.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/strong.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> + + + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> + +<p>L'élément <code><strong></code> indique un contenu de haute importance, y compris lorsqu'il s'agit de choses graves ou urgentes (telles que des messages d'avertissement par exemple). Il peut s'agir d'une certaine phrase au sein d'une page ou bien de quelques mots d'une importance particulière par rapport au contenu environnant.</p> + +<p>Cet élément se traduit généralement par l'affichage du texte en gras. Toutefois, il ne doit pas être utilisé à des fins stylistiques. Pour cela, on pourra utiliser la propriété CSS {{cssxref("font-weight")}}. De plus, on pourra utiliser l'élément {{HTMLElement("b")}} afin d'attirer l'attention sur une portion de texte qui ne possède pas un niveau d'importance particulier ou l'élément {{HTMLElement("em")}} si on souhaite marquer un texte avec de l'emphase.</p> + +<p>Il est également possible d'utiliser <code><strong></code> pour les en-têtes de paragraphes qui représentent des notes ou des avertissements au sein d'une page.</p> + +<h3 id="<b>_ou_<strong>"><code><b></code> ou <code><strong></code> ?</h3> + +<p>Les développeurs qui débutent se demandent souvent pourquoi il y a autant de manières pour s'exprimer alors que cela aura le même rendu final. Les éléments bold (<code><b></code>) et <code><strong></code> sont peut-être les plus difficiles à distinguer. Il est vrai que taper <code><b> </b></code> est beaucoup plus rapide et permet d'arriver exactement au même résultat…</p> + +<p>Sauf que ce n'est pas le même résultat ! <code><strong></code> représente une logique (apporte une différence sémantique), alors que <code><bold></code> ne représente qu'une mise en forme (l'apparence). Séparer la forme de la sémantique est important et permet éventuellement de représenter cette même sémantique d'une certaine manière, que ce soit en gras, en rouge, souligné ou encore avec une autre taille de police. Changer le style (la présentation) de <code><strong></code> est pertinent, contrairement à <code><b></code>. <code><b></code> représente un élément de présentation et représente du texte en gras, changer son style pour que le texte apparaisse en autre chose qu'en gras serait illogique et source de confusions.</p> + +<p>Il est important de savoir que <code><b></b></code> ne doit pas être utilisé, à part dans le cas où l'on souhaite attirer l'attention du lecteur sans pour autant augmenter l'importance du texte.</p> + +<h3 id="<em>_ou_<strong>"><code><em></code> ou <code><strong></code> ?</h3> + +<p>En HTML 4, <code><strong></code> indiquait simplement une emphase plus forte. En HTML5, l'élément représente une « importance forte » de son contenu. Il est important de faire la différence. L'emphase (<code><em></code> étant l'élément HTML équivalent) permet de changer le sens d'une phrase : par exemple : « J'<em>adore</em> les licornes » et « J'adore les <em>licornes</em> ». <code><strong></code> est utilisé pour augmenter l'importance de certaines portions de phrases : «<strong> Attention !</strong> C'est <strong>très dangereux</strong> ». <code><strong></code> et <code><em></code> peuvent être imbriqués pour augmenter relativement l'importance ou l'emphase d'un texte.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p> + Avant de faire le truc X il est + <strong>nécessaire</strong> de + faire le truc Y avant. +</p> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","100%","150")}}</p> +<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%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>Aucune, cet élément doit avoir une balise ouvrante et une balise fermante.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a> ou tout élément acceptant 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>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}. Auparavant et jusqu'à Gecko 1.9.2 (Firefox 4) inclus, Firefox implémente l'interface {{domxref("HTMLSpanElement")}} pour cet élément</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', 'semantics.html#the-strong-element', '<strong>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-strong-element', '<strong>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#edef-STRONG', '<strong>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.strong")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("b")}}</li> + <li>{{HTMLElement("em")}}</li> + <li>La propriété {{cssxref("font-weight")}}</li> +</ul> diff --git a/files/fr/web/html/element/style/index.html b/files/fr/web/html/element/style/index.html new file mode 100644 index 0000000000..04cd93935d --- /dev/null +++ b/files/fr/web/html/element/style/index.html @@ -0,0 +1,205 @@ +--- +title: '<style> : l''élément d''information de style' +slug: Web/HTML/Element/style +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/style +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><style></code></strong> contient des informations de mise en forme pour un document ou une partie d'un document. Par défaut, les instructions de mise en forme écrites dans cet élément sont écrites en <a href="/fr/docs/Web/CSS">CSS</a>.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/style.html", "tabbed-standard")}}</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> + +<p>L'élément <code><style></code> peut être inclus dans l'élément {{htmlelement("head")}} ou dans l'élément {{htmlelement("body")}} du document et les styles seront appliqués. Toutefois, il est recommandé de placer les styles dans l'élément<code> <head></code> afin de clairement séparer la présentation du contenu autant que possible. La méthode idéale en ce sens consiste à utiliser des feuilles de style dans des fichiers externes et de les appliquer au document grâce à des éléments {{htmlelement("link")}}.</p> + +<p>Si plusieurs éléments <code><style></code> et <code><link></code> sont appliqués au document, ils seront appliqués dans l'ordre dans lequel ils sont inclus dans le document. Aussi, vérifiez l'ordre afin d'éviter tout problème de cascade.</p> + +<p>À l'instar des éléments <code><link></code>, les éléments <code><style></code> peuvent inclure des attributs <code>media</code> qui décrivent des <a href="/fr/docs/Web/CSS/Requêtes_média">requêtes média</a> qui permettent d'appliquer des feuilles de styles selon certains critères provenant du média utilisé (la largeur de l'écran par exemple).</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("media")}}</dt> + <dd>Cet attribut est <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">une requête média</a> qui indique le média auquel la mise en forme doit s'appliquer. Cet attribut est optionnel, la valeur par défaut est <code>all</code>.</dd> + <dt>{{htmlattrdef("nonce")}}</dt> + <dd>Un <em>nonce</em> cryptographique utilisé pour inscrire les styles en ligne sur une liste blanche pour la règle <code><a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy/style-src">style-src</a></code> de la CSP (<em>Content Security Policy</em>). Le serveur doit générer un nonce unique chaque fois qu'il transmet une règle de sécurité. Ce nonce ne doit pas pouvoir être deviné car sinon, il devient trivial d'outrepasser la règle de sécurité.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>Cet attribut définit le langage de la feuille de style sous la forme d'un type MIME (le jeu de caractères ne doit pas être indiqué). Cet attribut est optionnel, la valeur par défaut est <code>text/css</code>.</dd> + <dt>{{htmlattrdef("title")}}</dt> + <dd>Cet attribut indique un ensemble <a href="/fr/docs/Web/CSS/Feuilles_de_style_alternatives">de feuilles de style alternatif</a>.</dd> +</dl> + +<h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3> + +<dl> + <dt>{{htmlattrdef("scoped")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Cet attribut indique que les règles de mises en forme ne s'appliquent qu'aux éléments ayant le même élément parent que l'élément courant.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Une_feuille_de_style_simple">Une feuille de style simple</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush:html"><!doctype html> +<html> +<head> + <style> + p { + color: red; + } + </style> +</head> +<body> + <p>Voici un paragraphe.</p> +</body> +</html></pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample('Une_feuille_de_style_simple', '100%', '60')}}</p> + +<h3 id="Utiliser_plusieurs_éléments_<style>">Utiliser plusieurs éléments <code><style></code></h3> + +<p>Dans cet exemple, on utilise deux éléments <code><style></code>, on peut voir comment les déclarations en conflit sont gérées : c'est le deuxième élément qui a la priorité si les <a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage#Spécificité">spécificités</a> sont égales car les feuilles sont appliquées dans l'ordre.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush:html"><!doctype html> +<html> +<head> + <style> + p { + color: white; + background-color: blue; + padding: 5px; + border: 1px solid black; + } + </style> + <style> + p { + color: blue; + background-color: yellow; + } + </style> +</head> +<body> + <p>Voici un paragraphe.</p> +</body> +</html></pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample('Utiliser_plusieurs_éléments_<style>', '100%', '60')}}</p> + +<h3 id="Utiliser_une_requête_média">Utiliser une requête média</h3> + +<p>Dans cet exemple (basé sur le précédent), on ajoute un attribut <code>media</code> sur le deuxième élément <code><style></code> afin que les règles correspondantes ne soient appliquées que si la largeur de la zone d'affichage (<em>viewport</em>) est inférieure à 500 pixels.</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush:html"><!doctype html> +<html> +<head> + <style> + p { + color: white; + background-color: blue; + padding: 5px; + border: 1px solid black; + } + </style> + <style media="all and (max-width: 500px)"> + p { + color: blue; + background-color: yellow; + } + </style> +</head> +<body> + <p>Voici un paragraphe.</p> +</body> +</html></pre> + +<h4 id="Résultat_3">Résultat</h4> + +<p>{{EmbedLiveSample('Utiliser_une_requête_média', '100%', '60')}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <th><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_méta-données">Contenu de métadonnées</a>.</td> + </tr> + <tr> + <th>Contenu autorisé</th> + <td>Du contenu textuel correspondant à l'attribut <code>type</code> (c'est-à-dire <code>text/css</code>).</td> + </tr> + <tr> + <th>Omission de balises</th> + <td>Les deux balises doivent être présentes.</td> + </tr> + <tr> + <th>Parents autorisés</th> + <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_méta-données">contenu de métadonnées</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun</td> + </tr> + <tr> + <th>Interface DOM</th> + <td>{{domxref("HTMLStyleElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-style-element', 'style')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Ajout de l'attribut <code>nonce</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'style')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>L'attribut <code>type</code> devient optionnel.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style')}}</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> + +<p>{{Compat("html.elements.style")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'élément {{HTMLElement("link")}} qui permet d'utiliser des feuilles de style externes.</li> +</ul> diff --git a/files/fr/web/html/element/sub/index.html b/files/fr/web/html/element/sub/index.html new file mode 100644 index 0000000000..36034b1ba3 --- /dev/null +++ b/files/fr/web/html/element/sub/index.html @@ -0,0 +1,136 @@ +--- +title: '<sub> : l''élément de souscription' +slug: Web/HTML/Element/sub +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/sub +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><sub></code></strong> est utilisé, pour des raisons typographiques, afin d'afficher du texte souscrit (ou en indice) (plus bas et généralement plus petit) par rapport au bloc de texte environnant.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/sub.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> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Notes_d'utilisation"><strong>Notes d'utilisation</strong></h2> + +<p>L'élément <code><sub></code> devrait uniquement être utilisé à des fins typographiques (afin de modifier la position du texte en raison des conventions typographiques) et non pour obtenir des effets de mise en forme. Ainsi, on n'utilisera pas <code><sub></code> pour restituer l'effet visuel d'un logo mais plutôt la propriété CSS {{cssxref("vertical-align")}} avec la valeur <code>sub</code>).</p> + +<p>Voici certains cas d'utilisation (non exhaustifs) pour <code><sub></code> :</p> + +<ul> + <li>L'écriture de certains éléments d'une formule mathématique + <ul> + <li>Dans le cadre de formules complexes, <a href="/fr/docs/Web/MathML">MathML</a> peut s'avérer plus pertinent que l'enchaînement d'éléments {{HTMLElement("sup")}} et <code><sub></code>.</li> + </ul> + </li> + <li>L'indication de renvois en bas de page</li> + <li>L'écriture du nombre d'atomes dans un formule chimique (ex. C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>).</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Renvoi_vers_une_note_de_bas_de_page">Renvoi vers une note de bas de page</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p> + Selon les calculs effectués par Nakamura, Johnson et + Mason<sub>1</sub>, cela causera l'annulation complète + des deux particules. +</p></pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Renvoi_vers_une_note_de_bas_de_page", 650, 80)}}</p> + +<h3 id="Formule_chimique">Formule chimique</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p> + La molécule d'eau est symbolisée + par H<sub>2</sub>O. +</p> +</pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("Formule_chimique","100%","120")}}</p> + +<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%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</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 acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</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', 'semantics.html#the-sub-and-sup-elements', '<sub> and <sup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-sub-and-sup-elements', '<sub> and <sup>;')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.sub")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'élément HTML {{HTMLElement("sub")}} permet un effet de mise en exposant. Il est à noter que l'élément <code><sub></code> et l'élément <code><sup></code> ne peuvent pas être utilisés simultanément. Pour afficher le symbole chimique d'un élément, il faudra utiliser <a href="/fr/docs/Web/MathML">MathML</a> pour représenter à la fois le numéro atomique et le nombre de masse.</li> + <li>Les éléments MathML {{MathMLElement("msub")}}, {{MathMLElement("msup")}} et {{MathMLElement("msubsup")}}.</li> + <li>La propriété CSS {{cssxref("vertical-align")}}</li> +</ul> diff --git a/files/fr/web/html/element/summary/index.html b/files/fr/web/html/element/summary/index.html new file mode 100644 index 0000000000..a120b67403 --- /dev/null +++ b/files/fr/web/html/element/summary/index.html @@ -0,0 +1,154 @@ +--- +title: '<summary> : l''élément de révélation d''un résumé' +slug: Web/HTML/Element/summary +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/summary +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><summary></code></strong> représente une boîte permettant de révéler le contenu d'un résumé ou d'une légende pour le contenu d'un élément {{HTMLElement("details")}}. En cliquant sur l'élément <code><summary></code>, on passe de l'état affiché à l'état masqué (et vice versa) de l'élément <code><details></code> parent.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/summary.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> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Notes_dutilisation">Notes d'utilisation</h2> + +<p>Un élément <code><summary></code> peut contenir des éléments de titre, du texte simple ou tout contenu HTML pouvant être placé au sein d'un paragraphe.</p> + +<p>Un élément <code><summary></code> peut uniquement être utilisé comme le premier élément fils d'un élément <code><details></code>. Lorsque l'utilisateur clique sur le résumé, l'élément <code><details></code> parent change d'état (affiché ou masqué) et un évènement {{event("toggle")}} est envoyé à l'élément <code><details></code> (ce qui permet de détecter un changement d'état via un script).</p> + +<h3 id="Libellé_par_défaut">Libellé par défaut</h3> + +<p>Si l'élément <code><summary></code> est absent au sein d'un élément <code><details></code>, c'est le titre contenu dans l'élément {{HTMLElement("details")}} qui sera utilisé.</p> + +<h3 id="Mise_en_forme_par_défaut">Mise en forme par défaut</h3> + +<p>La mise en forme par défaut pour <code><summary></code> est <code>display: list-item</code>, tel qu'indiqué dans <a href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements">le standard HTML</a>. Cela permet de modifier ou de retirer l'icône affiché pour le contrôle d'affichage/masquage. Par défaut, cette icône est généralement un triangle.</p> + +<p>Si la mise en forme est surchargée avec <code>display: block</code>, l'icône triangulaire qui révèle le contenu sera masquée.</p> + +<p>Voir la section ci-après sur la compatibilité des navigateurs à ce sujet car certains navigateurs ne prennent pas en charge tout ces aspects.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_simple">Exemple simple</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><details open> + <summary>Détails produit</summary> + <p>Ce produit a été fabriqué par + ACME et respecte les pandas.</p> +</details></pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Exemple_simple","100%","160")}}</p> + +<h3 id="Utilisation_de_titres">Utilisation de titres</h3> + +<p>Il est possible d'utiliser des titres au sein d'un résumé.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><details open> + <summary><h4>Détails produit</h4></summary> + <ol> + <li>Date de fabrication : 01 janvier 2018</li> + <li>Numéro de lot : LMA2542501</li> + <li>Date limite de consommation : 31 août 2018</li> + </ol> +</details></pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("Utilisation_de_titres", 650, 120)}}</p> + +<h3 id="Utiliser_avec_divers_éléments_HTML">Utiliser avec divers éléments HTML</h3> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><details open> + <summary><strong>Détails</strong></summary> + <ol> + <li>Date de fabrication : 01 janvier 2018</li> + <li>Numéro de lot : LMA2542501</li> + <li>Date limite de consommation : 31 août 2018</li> + </ol> +</details></pre> + +<h4 id="Résultat_3">Résultat</h4> + +<p>{{EmbedLiveSample("Utiliser_avec_divers_éléments_HTML", 650, 120)}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a> ou un élément décrivant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_titre">contenu de titre</a>.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>Aucune, la balise ouvrante et la balise fermante sont obligatoires.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Un élément {{HTMLElement("details")}}.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>{{ARIARole("button")}}</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</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', 'interactive-elements.html#the-summary-element', '<summary>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-summary-element', '<summary>')}}</td> + <td>{{Spec2('HTML5.1')}}</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.summary")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("details")}}</li> +</ul> diff --git a/files/fr/web/html/element/sup/index.html b/files/fr/web/html/element/sup/index.html new file mode 100644 index 0000000000..0b0942d6d6 --- /dev/null +++ b/files/fr/web/html/element/sup/index.html @@ -0,0 +1,156 @@ +--- +title: '<sup> : l''élément de mise en exposant' +slug: Web/HTML/Element/sup +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/sup +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><sup></code></strong> est utilisé, pour des raisons typographiques, afin d'afficher du texte en exposant (plus haut et généralement plus petit) par rapport au bloc de texte environnant.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/sup.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> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Notes_d'utilisation"><strong>Notes d'utilisation</strong></h2> + +<p>Cet élément devrait uniquement être utilisé pour des raisons typographiques lorsque la position du texte est liée à la signification de ce texte (par exemple pour une formule mathématiques) ou aux règles typographiques (par exemple en français pour M<sup>lle</sup>, M<sup>me</sup> ou C<sup>ie</sup>).</p> + +<p>Ainsi, on n'utilisera pas <code><sup></code> afin d'obtenir un effet visuel d'un logo par exemple. Pour un simple effet de mise en forme (hors typographie), on utilisera plutôt la propriété {{cssxref("vertical-align")}}, utilisée avec la valeur <code>super</code> (voire avec une valeur numérique si on souhaite être plus précis).</p> + +<p>Voici quelques cas d'utilisation (non exhaustifs) pour <code><sup></code> :</p> + +<ul> + <li>L'utilisation d'exposants dans une formule mathématique : x<sup>2</sup>. + + <ul> + <li>Dans le cadre de formules complexes, <a href="/fr/docs/Web/MathML">MathML</a> peut s'avérer plus pertinent que l'enchaînement d'éléments {{HTMLElement("sub")}} et <code><sup></code>.</li> + </ul> + </li> + <li>L'affichage de lettres supérieures pour respecter certaines conventions typographiques (ex. M<sup>lle</sup>).</li> + <li>La représentation de nombres ordinaux : 7<sup>e</sup> art.</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Puissance_mathématique">Puissance mathématique</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p> + Voici la fonction exponentielle : + e<sup>x</sup>. +</p> +</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Puissance_mathématique","100%","120")}}</p> + +<h3 id="Lettres_supérieures">Lettres supérieures</h3> + +<p>Bien que, techniquement, le lettrage supérieur ne corresponde pas à la mise en exposant, on voit souvent <code><sup></code> utilisé pour certaines abréviations.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p> + Robert a présenté son rapport à M<sup>lle</sup> Bernard. +</p></pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("Lettres_supérieures","650","80")}}</p> + +<h3 id="Nombres_ordinaux">Nombres ordinaux</h3> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><p> + Voici comment le nombre ordinal cinquième est écrit dans + différentes langues +</p> +<ul> + <li>en français : 5<sup>e</sup></li> + <li>en anglais : 5<sup>th</sup></li> +</ul></pre> + +<h4 id="Résultat_3">Résultat</h4> + +<p>{{EmbedLiveSample("Nombres_ordinaux", 650, 160)}}</p> + +<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%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</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 acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</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', 'semantics.html#the-sub-and-sup-elements', '<sub> and <sup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-sub-and-sup-elements', '<sub> and <sup>;')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.sup")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'élément HTML {{HTMLElement("sub")}} permet un effet de mise en indice. Il est à noter que l'élément <code><sub></code> et l'élément <code><sup></code> ne peuvent pas être utilisés simultanément. Pour afficher le symbole chimique d'un élément, il faudra utiliser <a href="/fr/docs/Web/MathML">MathML</a> pour représenter à la fois le numéro atomique et le nombre de masse.</li> + <li>Les éléments MathML {{MathMLElement("msub")}}, {{MathMLElement("msup")}} et {{MathMLElement("msubsup")}}.</li> + <li>La propriété CSS {{cssxref("vertical-align")}}.</li> +</ul> diff --git a/files/fr/web/html/element/table/index.html b/files/fr/web/html/element/table/index.html new file mode 100644 index 0000000000..75c3f2206c --- /dev/null +++ b/files/fr/web/html/element/table/index.html @@ -0,0 +1,456 @@ +--- +title: '<table> : l''élément de tableau' +slug: Web/HTML/Element/table +tags: + - Element + - HTML + - Reference + - Tableaux + - Web +translation_of: Web/HTML/Element/table +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><table></code></strong> permet de représenter un tableau de données, c'est-à-dire des informations exprimées sur un tableau en deux dimensions.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/table.html","tabbed-standard")}}</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> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>. Les attributs listés ci-après sont désormais tous dépréciés.</p> + +<h3 id="Attributs_dépréciés">Attributs dépréciés</h3> + +<dl> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline}}</dt> + <dd>Cet attribut énumérée indique la manière dont la table doit être aligné en regard du document qui la contient. Ile peut prendre les valeurs suivantes : + <ul> + <li><code>left</code>, signifiant que la table doit être affichée à la gauche du document ;</li> + <li><code>center</code>, signifiant que la table doit être affichée centrée dans le document ;</li> + <li><code>right</code>, signifiant que la table doit être affichée à droite du document.<br> + </li> + </ul> + + <div class="note"><strong>Note : </strong> + + <ul> + <li><strong>Cet attribut ne doit pas être utilisé</strong> car il a été déprécié : l'élément {{HTMLElement("table")}} devrait être stylisé en utilisant <a href="/fr/docs/CSS">CSS</a>. Pour obtenir un effet similaire à celui réalisé par l'attribut align, les propriétés <a href="/fr/docs/CSS">CSS</a> {{cssxref("text-align")}} et {{cssxref("vertical-align")}} devraient être utilisées.</li> + <li>Avant Firefox 4, Firefox supportait également, en mode quirks uniquement, les valeurs <code>middle</code>, <code>absmiddle</code>, et <code>abscenter</code> comme synonymes de <code>center</code><em>. </em></li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt> + <dd>Cet attribut définit la couleur d'arrière-plan de toutes les cellules. C'est un code à 6 chiffres hexadécimaux comme défini par le <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé. + <table style="width: 80%;"> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>black</code> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>green</code> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>silver</code> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>lime</code> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>gray</code> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>olive</code> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>white</code> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>yellow</code> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>maroon</code> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>navy</code> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>red</code> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>blue</code> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>purple</code> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>teal</code> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>fuchsia</code> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>aqua</code> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Note d'utilisation : </strong>Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci a été déprécié. La mise en forme d'un tableau doit se faire en utilisant CSS. Il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} pour cet effet.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("border")}} {{Deprecated_inline}}</dt> + <dd>Cet attribut entier définit, en pixels, la taille de la bordure entourant le tableau. S'il vaut 0, cela implique que l'attribut {{htmlattrxref("frame", "table")}} est vide. + <div class="note"><strong>Note d'utilisation : </strong>Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Les propriétés CSS {{cssxref("border")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}} et {{cssxref("border-style")}} devraient être utilisées à la place.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("cellpadding")}} {{Deprecated_inline}}</dt> + <dd>Cet attribut définit la taille de l'espace entre le contenu d'une cellule et sa bordure, qu'lle soit affichée ou non. Si cet attribut est exprimé en pixels, le décalage sera appliqué sur les quatre côtés. S'il est exprimé en pourcents, le contenu sera centré verticalement et la somme des espaces en haut et en bas représentera le pourcentage, il en va de même pour l'espace horizontal (droite et gauche). + <div class="note"><strong>Note d'utilisation : </strong>Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Pour réaliser un effet similaire, la propriété {{cssxref("border-collapse")}} avec la valeur collapse doit être utilisée sur l'élément {{HTMLElement("table")}} et la propriété {{cssxref("padding")}} sur l'élément {{HTMLElement("td")}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("cellspacing")}} {{Deprecated_inline}}</dt> + <dd>Cet attribut définit la taille (en pourcents ou pixels) de l'espace (vertical et horizontal) entre deux cellules, entre la haut du tableau et les cellules de la première ligne, la gauche du tableau et les cellules de la première colonne, puis de la même manière pour le bas et le côté droit du tableau. + <div class="note"><strong>Note d'utilisation : </strong>Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Pour réaliser un effet similaire, la propriété {{cssxref("border-collapse")}} avec la valeur collapse doit être utilisée sur l'élément {{HTMLElement("table")}} et la propriété {{cssxref("margin")}} sur l'élément {{HTMLElement("td")}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("frame")}} {{Deprecated_inline}}</dt> + <dd>Cet attribut à valeurs multiples définit les côtés du tableau sur lesquels dessiner une bordure. Il peut prendre les valeurs suivantes : <code>above, hsides, lhs, border, void, below, vsides, rhs, box</code>. + <div class="note"><strong>N</strong><strong>ote d'utilisation : </strong>Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Pour réaliser un effet similaire, les propriétés {{cssxref("border-style")}} et {{cssxref("border-width")}} doivent être utilisées.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("rules")}} {{Deprecated_inline}}</dt> + <dd>Cet attribut à valeurs multiples définit la manière dont les traits doivent apparaître au sein du tableau. Il peut avoir les valeurs suivantes : + <ul> + <li><code>none</code>, les traits ne doivent pas être affichés, c'est la valeur par défaut</li> + <li><code>groups</code>, les traits sont uniquement affichés entre les groupes de lignes du tableau (définis par les éléments {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} et {{HTMLElement("tfoot")}}) et entre les groupes de colonnes (définis par les éléments {{HTMLElement("col")}} et {{HTMLElement("colgroup")}})</li> + <li><code>rows</code>, les traits seront affichées entre les lignes du tableau</li> + <li><code>columns</code>, les lignes seront affichées entre les colonnes du tableau</li> + <li><code>all</code>, tous les traits seront affichés (entre les lignes et entre les colonnes).</li> + </ul> + + <div class="note"><strong>Note :</strong> + + <ul> + <li>L'apparence de ces traits dépend du navigateur utilisé et ne peut être modifiée.</li> + <li>Cet attribut ayant été déprécié, il ne doit pas être utilisé. La propriété CSS {{cssxref("border")}} doit être appliquée sur les éléments {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("col")}} ou {{HTMLElement("colgroup")}} adéquats.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("summary")}} {{Deprecated_inline}}</dt> + <dd>Cet attribut définit un texte alternatif à utiliser afin de décrire le tableau. Un tel texte peut être utilisé par un agent utilisateur qui ne pourrait pas afficher le tableau. Il est généralement utilisé pour les personnes souffrant d'une déficience visuelle, comme par exemple les aveugles qui navigueront sur des pages web en utilisant un écran Braille. Si l'information contenue dans cet attribut serait également utile aux autres utilisateurs, il faudra plutôt utiliser l'élément {{HTMLElement("caption")}}. L'attribut <code><strong>summary</strong></code> n'est pas obligatoire et peut être omis lorsqu'un élément {{HTMLElement("caption")}} remplit ce rôle. + <div class="note"><strong>Note d'utilisation : </strong>Cet attribut ayant été déprécié, il ne doit pas être utilisé. Les façons suivantes peuvent être envisagées pour cette expression : + <ul> + <li>Grâce à un texte entourant le tableau, cette manière est la plus faible du point de vue de la sémantique</li> + <li>Grâce à l'élément {{HTMLElement("caption")}}</li> + <li>Dans un élément {{HTMLElement("details")}} inclus dans l'élément {{HTMLElement("caption")}} du tableau.</li> + <li>En insérant l'élément {{HTMLElement("table")}} dans un élément {{HTMLElement("figure")}} et en ajoutant la description textuelle à côté du tableau.</li> + <li>En insérant l'élément {{HTMLElement("table")}} dans un élément {{HTMLElement("figure")}} et en ajoutant la description textuelle dans un élément {{HTMLElement("figcaption")}}.</li> + <li>En modifiant le tableau afin qu'aucune description supplémentaire ne soit nécessaire : par exemple en utilisant des éléments {{HTMLElement("th")}} et {{HTMLElement("thead")}}.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("width")}} {{Deprecated_inline}}</dt> + <dd>Cet attribut définit la largeur du tableau. Elle peut être exprimée en pixels ou en pourcent (représentant alors la fraction du conteneur que le tableau peut occuper). + <div class="note"><strong>Note d'utilisation : </strong>Cet attribut ayant été déprécié, il ne doit pas être utilisé. La propriété CSS {{cssxref("width")}} doit être utilisée à la place.</div> + </dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<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> + +<div>{{EmbedInteractiveExample("pages/tabbed/table.html")}}</div> + +<h3 id="Tableau_simple">Tableau simple</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html" style="font-size: 12px;"><table> + <tr> + <td>Jean</td> + <td>Biche</td> + </tr> + <tr> + <td>Jeanne</td> + <td>Biche</td> + </tr> +</table></pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Tableau_simple","100%","140")}}</p> + +<h3 id="Autres_exemples">Autres exemples</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><!-- Tableau simple avec en-tête --> +<table> + <tr> + <th>Prénom</th> + <th>Nom</th> + </tr> + <tr> + <td>Jean</td> + <td>Dupont</td> + </tr> + <tr> + <td>Marion</td> + <td>Duval</td> + </tr> +</table> + +<!-- Tableau utilisant thead, tfoot, et tbody --> +<table> + <thead> + <tr> + <th>Contenu d'en-tête 1</th> + <th>Contenu d'en-tête 2</th> + </tr> + </thead> + <tbody> + <tr> + <td>Contenu interne 1</td> + <td>Contenu interne 2</td> + </tr> + </tbody> + <tfoot> + <tr> + <td>Pied de tableau 1</td> + <td>Pied de tableau 2</td> + </tr> + </tfoot> +</table> + +<!-- Tableau utilisant colgroup --> +<table> + <colgroup span="4" class="columns"></colgroup> + <tr> + <th>Pays</th> + <th>Capitales</th> + <th>Population</th> + <th>Langue</th> + </tr> + <tr> + <td>USA</td> + <td>Washington D.C.</td> + <td>309 millions</td> + <td>Anglais</td> + </tr> + <tr> + <td>Suède</td> + <td>Stockholm</td> + <td>9 millions</td> + <td>Suédois</td> + </tr> +</table> + +<!-- Tableau utilisant colgroup et col --> +<table> + <colgroup> + <col class="column1"> + <col class="columns2plus3" span="2"> + </colgroup> + <tr> + <th>Citron vert</th> + <th>Citron</th> + <th>Orange</th> + </tr> + <tr> + <td>Vert</td> + <td>Jaune</td> + <td>Orange</td> + </tr> +</table> + +<!-- Tableau simple avec une légende --> +<table> + <caption>Super légende</caption> + <tr> + <td>Données géniales</td> + </tr> +</table> +</pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("Autres_exemples","100%","230")}}</p> + +<h2 id="Accessibilité">Accessibilité</h2> + +<h3 id="Légendes">Légendes</h3> + +<p>Fournir un élément {{HTMLElement("caption")}} pour légender le tableau avec une description claire et concise permet aux utilisateurs de décider s'ils doivent lire le contenu du tableau ou le passer.</p> + +<p>Une telle légende fournit une aide pour les personnes qui naviguent avec des outils d'assistance comme des lecteurs d'écran.</p> + +<ul> + <li><a href="/fr/Apprendre/HTML/Tableaux/Advanced">Ajouter une légende à un tableau grâce à <code><caption></code></a></li> + <li><a href="https://www.w3.org/WAI/tutorials/tables/caption-summary/">Légendes et résumés • Tableaux • Tutoriels d'accessibilité du W3C WAI (en anglais)</a></li> +</ul> + +<h3 id="Portées_des_lignes_et_des_colonnes">Portées des lignes et des colonnes</h3> + +<p>L'attribut {{htmlattrxref("scope","th")}} peut être redondant dans certains contextes où la portée peut être déterminée avec les autres éléments. Toutefois de nombreux lecteurs d'écran utilisent cet attribut pour répliquer l'organisation générale du tableau. Dans les tableaux plus complexes, <code>scope</code> pourra être utilisé afin de fournir les informations nécessaires à l'organisation (tant au moteur HTML qu'aux outils d'assistance).</p> + +<h4 id="Exemple">Exemple</h4> + +<pre class="brush: html"><table> + <caption>Noms et valeurs des couleurs</caption> + <tbody> + <tr> + <th scope="col">Nom</th> + <th scope="col">Hexadécimal</th> + <th scope="col">HSLa</th> + <th scope="col">RGBa</th> + </tr> + <tr> + <th scope="row">Turquoise</th> + <td><code>#51F6F6</code></td> + <td><code>hsla(180, 90%, 64%, 1)</code></td> + <td><code>rgba(81, 246, 246, 1)</code></td> + </tr> + <tr> + <th scope="row">Ocre</th> + <td><code>#F6BC57</code></td> + <td><code>hsla(38, 90%, 65%, 1)</code></td> + <td><code>rgba(246, 188, 87, 1)</code></td> + </tr> + </tbody> +</table> +</pre> + +<p>Ajouter <code>scope="col"</code> sur un élément {{HTMLElement("th")}} permettra d'aider à décrire le fait que la cellule est en haut de la colonne. Indiquer <code>scope="row"</code> sur un élément {{HTMLElement("td")}} permettra d'indiquer que la cellule est la première de la ligne.</p> + +<ul> + <li><a href="/fr/Apprendre/HTML/Tableaux/Advanced#Tableaux_pour_des_utisateurs_malvoyants">Utiliser les tableaux HTML pour les personnes souffrant de troubles de la vision</a></li> + <li><a href="https://www.w3.org/WAI/tutorials/tables/two-headers/">Les tableaux avec deux en-têtes • Tutoriels d'accessibilité web W3C WAI (en anglais)</a></li> + <li><a href="https://www.w3.org/WAI/tutorials/tables/irregular/">Les tableaux avec des en-têtes hétérogènes • Tutoriels d'accessibilité web W3C WAI (en anglais)</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H63.html">H63 : Utiliser l'attribut <code>scope</code> afin d'associer les cellules de l'en-tête et celles des données dans les tableaux de données | Techniques W3C pour WCAG 2.0 (en anglais)</a></li> +</ul> + +<h3 id="Tableaux_complexes">Tableaux complexes</h3> + +<p>Les technologies d'assistance telles que les lecteurs d'écran peuvent rencontrer des difficultés lors de l'analyse de tableaux complexes où les cellules d'en-tête ne sont pas associées aux données de façon clairement verticale ou horizontale. Généralement, cela se traduit par la présence des attributs {{htmlattrxref("colspan","td")}} et {{htmlattrxref("rowspan","td")}}.</p> + +<p>Si possible, on présentera le tableau différemment, en le divisant en plusieurs tableaux simples qui ne nécessitent pas l'utilisation des atttributs <code>colspan</code> et <code>rowspan</code>. En plus d'aider à la compréhension pour les personnes qui utilisent des outils d'assistance, cela pourra bénéficier aux personnes souffrant de troubles cognitifs.</p> + +<p>Si le tableau ne peut pas être subdivisé, on pourra utiliser les attributs {{htmlattrxref("id")}} et {{htmlattrxref("headers","td")}} afin d'associer « informatiquement » les cellules du tableaux avec les en-têtes correspondantes.</p> + +<ul> + <li><a href="/fr/Apprendre/HTML/Tableaux/Advanced#Tableaux_pour_des_utisateurs_malvoyants">Utiliser les tableaux HTML pour les personnes souffrant de troubles de la vision</a></li> + <li><a href="https://www.w3.org/WAI/tutorials/tables/multi-level/">Les tableaux avec des en-têtes sur plusieurs niveaux • Tutoriels d'accesibilité web W3C WAI (en anglais)</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H43.html">H43 : Utiliser les attributs <code>id</code> et <code>headers</code> afin d'associer les cellules de données et les cellules d'en-tête dans les tableaux | Techniques W3C pour WCAG 2.0 (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></td> + </tr> + <tr> + <th scope="row"><dfn>Contenu autorisé</dfn></th> + <td> + <div class="content-models"> + <div id="table-mdls"> + <p>Dans cet ordre :</p> + + <ul> + <li>Un élément facultatif {{HTMLElement("caption")}}</li> + <li>Zéro ou plusieurs éléments {{HTMLElement("colgroup")}}</li> + <li>Un élément {{HTMLElement("thead")}} facultatif</li> + <li>L'un ou l'autre de ces deux cas de figure : + <ul> + <li>zéro ou plusieurs éléments {{HTMLElement("tbody")}}</li> + <li>un ou plusieurs éléments {{HTMLElement("tr")}}</li> + </ul> + </li> + <li>un élément {{HTMLElement("tfoot")}} optionnel</li> + </ul> + </div> + </div> + </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 contenu de flux.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLTableElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','tables.html#the-table-element','table element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-table-element','table element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("html.elements.table")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments HTML relatifs aux tableaux : {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}</li> + <li>Les propriétés CSS qui peuvent être utilisées pour mettre en forme l'élément <code><table></code> : + <ul> + <li>{{cssxref("width")}} qui permet de contrôler la largeur du tableau ;</li> + <li>{{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-collapse")}}, {{cssxref("border-spacing")}} qui permettent de contrôler l'aspect des bordures pour les cellules et le contour du tableau ;</li> + <li>{{cssxref("margin")}} et {{cssxref("padding")}} qui s'appliquent sur le contenu d'une cellule individuelle ;</li> + <li>{{cssxref("text-align")}} et {{cssxref("vertical-align")}} qui permettent de définir l'alignement du texte et du contenu de la cellule.</li> + </ul> + </li> +</ul> diff --git a/files/fr/web/html/element/tbody/index.html b/files/fr/web/html/element/tbody/index.html new file mode 100644 index 0000000000..91c7935b7b --- /dev/null +++ b/files/fr/web/html/element/tbody/index.html @@ -0,0 +1,251 @@ +--- +title: '<tbody> : l''élément de corps d''un tableau' +slug: Web/HTML/Element/tbody +tags: + - Element + - HTML + - Reference + - Tableaux + - Web +translation_of: Web/HTML/Element/tbody +--- +<div>{{HTMLRef}}</div> + +<p>L’élément HTML <strong><code><tbody></code></strong> permet de regrouper un ou plusieurs éléments {{HTMLElement("tr")}} afin de former le corps d'un tableau HTML ({{HTMLElement("table")}}).</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/tbody.html","tabbed-taller")}}</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> + +<p>L'élément <code><tbody></code>, ainsi que les éléments {{HTMLElement("thead")}} et {{HTMLElement("tfoot")}}, fournit des informations sémantiques qui sont utilisées pour l'affichage à l'écran, l'impression et l'accessibilité.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3> + +<dl> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline}} en {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} en {{HTMLVersionInline(5)}}</dt> + <dd>Cet attribut à valeurs définit l’alignement horizontal pour le contenu de chaque cellule de la colonne. Les valeurs possibles sont : + <ul> + <li><code>left</code> : le contenu de la cellule est alligné à gauche de la cellule ;</li> + <li><code>center</code> : le contenu de la cellule est centré horizontalement ;</li> + <li><code>right</code> : le contenu de la cellule est aligné à droite de la cellule ;</li> + <li><code>justify</code> : ajuste la largeur des espaces du contenu texte afin que le contenu de la cellule soit justifié ;</li> + <li><code>char</code> : aligne le contenu texte de la cellule selon un caractère spécial avec un décalage minimum défini par les attributs {{htmlattrxref("char", "tbody")}} et {{htmlattrxref("charoff", "tbody")}} {{unimplemented_inline(2212)}}.</li> + </ul> + + <p>Si cet attribut n’est pas renseigné, la valeur <code>left</code> est prise par défaut.</p> + + <div class="note"><strong>Notes :</strong>cet attribut est devenu obsolète dans le dernier standard. + + <ul> + <li>Pour réaliser le même effet qu’avec les valeurs <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code>, utilisez la propriété CSS {{cssxref("text-align")}} sur cet élément.</li> + <li>Pour réaliser le même effet qu’avec <code>char</code>, vous pouvez, en CSS3, utiliser la valeur de {{htmlattrxref("char", "tbody")}} comme valeur pour la propriété {{cssxref("text-align")}} {{unimplemented_inline}}.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd>Cet attribut définit la couleur d’arrière-plan de toutes les cellules. C’est un code hexadécimal à 6 chiffres comme défini par le <a class="external" href="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d’un <code>#</code>. Un de ces seize mots-clés peut également être utilisé. + <table> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>black</code> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>green</code> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>silver</code> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>lime</code> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>gray</code> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>olive</code> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>white</code> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>yellow</code> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>maroon</code> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>navy</code> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>red</code> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>blue</code> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>purple</code> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>teal</code> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>fuchsia</code> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>aqua</code> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Note d’utilisation :</strong> il est fortement conseillé de ne pas utiliser cet attribut car il n’est pas standard et n’a été implémenté que sous certaines versions d’Internet Explorer. L’élément {{HTMLElement("tbody")}} doit être mis en forme grâce aux propriétés <a href="/fr/docs/CSS">CSS</a>. Pour fournir un effet semblable à celui produit par l’attribut <strong><code>bgcolor</code></strong>, il est possible d’utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités.</div> + </dd> + <dt>{{htmlattrdef("char")}} {{Deprecated_inline}} en {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} en {{HTMLVersionInline(5)}}</dt> + <dd>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d’une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l’attribut {{htmlattrxref("align", "tbody")}} ne vaut pas <code>char</code>, l’attribut est ignoré.</dd> + <dd> + <div class="note"><strong>Note d’utilisation :</strong> cet attribut est obsolète et son utilisation est donc fortement déconseillé. De fait, il n’est pas pris en charge par la dernière recommandation. Pour réaliser le même effet qu’avec {{htmlattrxref("char", "tbody")}}, en utilisant CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline}} en {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} en {{HTMLVersionInline(5)}}</dt> + <dd>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l’attribut<strong> char</strong> à appliquer au contenu des cellules. + <div class="note"><strong>Note d’utilisation: </strong>Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n’est plus supporté dans le dernier standard.</div> + </dd> + <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} en {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} en {{HTMLVersionInline(5)}}</dt> + <dd>Cet attribut définit l’alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont : + <ul> + <li><code>baseline</code> qui alignera le texte sur la ligne la plus basse possible en utilisant la <a class="external" href="http://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29">ligne de base</a> des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur <code>bottom</code> ;</li> + <li><code>bottom</code> qui placera le texte au plus bas de la cellule ;</li> + <li><code>middle</code> qui centrera verticalement le texte dans la cellule ;</li> + <li><code>top</code> qui placera le texte au plus haut de la cellule.</li> + </ul> + + <div class="note"><strong>Note d’utilisation :</strong> cet attribut étant maintenant obsolète (et n’étant plus pris en charge), il est fortement déconseillé de l’utiliser. La propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.</div> + </dd> +</dl> + +<h2 id="Notes_d'utilisation"><strong>Notes d'utilisation</strong></h2> + +<ul> + <li>Lorsque le tableau contient un élément {{HTMLElement("thead")}} (qui identifie les lignes d'en-tête), l'élément <code><tbody></code> doit apparaître après.</li> + <li>Si on utilise <code><tbody></code>, il faudra alors que celui-ci contienne toutes les lignes qui ne sont pas des lignes d'en-tête ou de pied de tableau. Autrement dit, il n'est pas possible d'avoir des éléments {{HTMLElement("tr")}} qui soient des éléments fils directs de {{HTMLElement("table")}} si on utilise <code><tbody></code>.</li> + <li>Utilisé à la suite d'un élément {{HTMLElement("thead")}} et/ou {{HTMLElement("tfoot")}}, l'élément <code><tbody></code> fournit des informations sémantiques supplémentaires pour les appareils d'affichage ou d'impression.</li> + <li>Lorsqu'il est imprimé, <code><tbody></code> représente le contenu qui, lorsqu'il est plus long qu'une page, sera différent sur chaque page. En revanche, {{HTMLElement("thead")}} et {{HTMLElement("tfoot")}} seront les mêmes ou seront semblables sur chacune des pages.</li> + <li><code><tbody></code> permet d'obtenir un défilement séparé pour les éléments {{HTMLElement("thead")}}, {{HTMLElement("tfoot")}} et {{HTMLElement("caption")}} d'un même élément {{HTMLElement("table")}}.</li> + <li>À la différence des éléments <code><thead></code>, <code><tfoot></code> et <code><caption></code>, on peut utiliser plusieurs éléments <code><tbody></code> (à la suite). Cela permet de répartir les lignes des grands tableaux en différentes sections, chacune pouvant être mise en forme distinctement.</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><table> + <thead> + <tr> + <th>Contenu d'en-tête 1</th> + <th>Contenu d'en-tête 2</th> + </tr> + </thead> + <tfoot> + <tr> + <td>Pied de tableau 1</td> + <td>Pied de tableau 2</td> + </tr> + </tfoot> + <tbody> + <tr> + <td>Contenu interne 1</td> + <td>Contenu interne 2</td> + </tr> + </tbody> +</table></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">table { + border: 2px solid #555; + border-collapse: collapse; +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","100%","150")}}</p> + +<div class="note"> +<p><strong>Note :</strong> Consulter la page {{HTMLElement("table")}} pour plus d'exemples sur <code><tbody></code>.</p> +</div> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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>Aucune.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Zéro ou plusieurs éléments {{HTMLElement("tr")}}.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>L'élément {{HTMLElement("tbody")}} n'est pas un élément fils obligatoire de {{HTMLElement("table")}}. Cependant, il ne doit pas être présent si l'élément parent {{HTMLElement("table")}} possède un élément {{HTMLElement("tr")}} comme élément fils.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>L'élément <code><tbody></code> doit être au sein d'un élément {{HTMLElement("table")}} et peut être ajouté après un élément {{HTMLElement("caption")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("thead")}} ou {{HTMLElement("tfoot")}}.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLTableSectionElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','tables.html#the-tbody-element','tbody element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-tbody-element','tbody element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("html.elements.tbody")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments HTML relatifs aux tableaux : {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}} ;</li> + <li>Les propriétés et pseudo-classes CSS qui sont particulièrement utiles pour mettre en forme l'élément <code><tbody></code> : + <ul> + <li>La pseudo-classe {{cssxref(":nth-child")}} qui permet de paramétrer l'alignement des cellules d'une colonne ;</li> + <li>La propriété {{cssxref("text-align")}} qui permet d'aligner le contenu des cellules par rapport à un même caractère (par exemple « . »).</li> + </ul> + </li> +</ul> diff --git a/files/fr/web/html/element/td/index.html b/files/fr/web/html/element/td/index.html new file mode 100644 index 0000000000..bbd34e26c9 --- /dev/null +++ b/files/fr/web/html/element/td/index.html @@ -0,0 +1,247 @@ +--- +title: '<td> : l''élément de cellule de tableau' +slug: Web/HTML/Element/td +tags: + - Element + - HTML + - Reference + - Tableaux + - Web +translation_of: Web/HTML/Element/td +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><td></code></strong> définit une cellule d'un tableau qui contient des données. Cet élément fait partie du<em> modèle de tableau</em>.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/td.html","tabbed-taller")}}</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> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("colspan")}}</dt> + <dd>Cet attribut contient un entier positif indiquant le nombre de colonnes sur lesquelles s'étend la cellule. La valeur par défaut est 1, si la valeur est 0, la cellule s'étend jusqu'à la fin du {{HTMLElement("colgroup")}} auquel appartient la cellule, même si celui-ci est défini implicitement. Des valeurs supérieures à 1000 peuvent être considérées comme incorrectes et seront interprétées comme valant la valeur par défaut (1). + <div class="note"><strong>Note : </strong>En {{HTMLVersionInline(5)}} cet attribut ne peut valoir qu'un nombre strictement positif car <a href="https://dev.w3.org/html5/spec/single-page.html#attr-tdth-colspan">il ne doit pas être utilisé pour faire chevaucher des cellules</a>. Par ailleurs, Firefox est le seul navigateur supportant la valeur 0 définie par la spécification {{HTMLVersionInline(4.01)}}.</div> + </dd> + <dt>{{htmlattrdef("headers")}}</dt> + <dd>Cet attribut est une liste de chaînes de caractères séparées par des espace. Chacune correspond à l'attribut <strong>id</strong> de l'élément {{HTMLElement("th")}} qui s'applique à la cellule courante.</dd> + <dt>{{htmlattrdef("rowspan")}}</dt> + <dd>Cet attribut contient un entier positif indiquant sur combien de lignes s'étend la cellule. La valeur par défaut est 1. Si cet attribut vaut 0, la cellule s'étend jusqu'à la fin de la section ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}} du tableau à laquelle appartient la cellule même si cette section est définie implicitement. Les valeurs supérieures à 65534 sont ramenées à 65534.</dd> +</dl> + +<h3 id="Attributs_obsolètes">Attributs obsolètes</h3> + +<dl> + <dt>{{htmlattrdef("abbr")}} {{obsolete_inline("html5")}}</dt> + <dd>Cet attribut contient une description courte et abrégée du contenu de la cellule. Certains outils utilisateurs, comme la synthèse vocale, peuvent décrire cette information avant le contenu lui-même. + <div class="note"><strong>Note : </strong>Cet attribut est obsolète dans le dernier standard et ne doit donc plus être utilisé. Il faut dans ces cas introduire la description au sein de la cellule comme un élément {{HTMLElement("abbr")}} indépendant ou utiliser l'attribut <code><strong>title</strong></code> de la cellule pour représenter le contenu et la cellule elle-même pour représenter le contenu abrégé.</div> + </dd> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>Cet attribut à valeurs définit l'alignement horizontal pour le contenu de chaque cellule de la colonne. Les valeurs possibles sont : + <ul> + <li><code>left </code>: le contenu de la cellule est alligné à gauche de la cellule</li> + <li><code>center</code> : le contenu de la cellule est centré horizontalement</li> + <li><code>right</code> : le contenu de la cellule est aligné à droite de la cellule</li> + <li><code>justify</code> : insert des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié</li> + <li><code>char</code> : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs {{htmlattrxref("char", "td")}} et {{htmlattrxref("charoff", "td")}} {{unimplemented_inline(2212)}}.</li> + </ul> + + <p>Si cet attribut n'est pas renseigné, la valeur <code>left</code> est prise par défaut.</p> + + <div class="note"><strong>Notes : </strong>Cet attribut est devenu obsolète dans le dernier standard et ne doit donc plus être utilisé. + + <ul> + <li>Pour réaliser les mêmes effets que les valeurs <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code>, il faut utiliser la propriété CSS {{cssxref("text-align")}} sur l'élément</li> + <li>Pour réaliser le même effet qu'avec la valeur <code>char</code>. Il est possible, en CSS3, d'utiliser la valeur de l'attribut {{htmlattrxref("char", "td")}} comme valeur de la propriété {{cssxref("text-align")}}. {{unimplemented_inline}}.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("axis")}} {{obsolete_inline("html5")}}</dt> + <dd>Cet attribut contient une liste de chaîne de caractères (séparées par des espaces). Chaque chaîne de caractère est l'identifiant d'un groupe de cellule auquel cet en-tête s'applique.</dd> + <dd> + <div class="note"><strong>Note : </strong>Cet attribut est obsolète dans le dernier standard et ne doit donc plus être utilisé. L'attribut {{htmlattrxref("scope", "td")}} doit être utilisé pour le remplacer.</div> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd>Cet attribut définit la couleur d'arrière-plan de toutes les cellules de la colonne. C'est un code à 6 chiffres hexadécimaux comme défini par le <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé. + <table> + <tbody> + <tr> + <td> </td> + <td><code>black</code> = "#000000"</td> + <td> </td> + <td><code>green</code> = "#008000"</td> + </tr> + <tr> + <td> </td> + <td><code>silver</code> = "#C0C0C0"</td> + <td> </td> + <td><code>lime</code> = "#00FF00"</td> + </tr> + <tr> + <td> </td> + <td><code>gray</code> = "#808080"</td> + <td> </td> + <td><code>olive</code> = "#808000"</td> + </tr> + <tr> + <td> </td> + <td><code>white</code> = "#FFFFFF"</td> + <td> </td> + <td><code>yellow</code> = "#FFFF00"</td> + </tr> + <tr> + <td> </td> + <td><code>maroon</code> = "#800000"</td> + <td> </td> + <td><code>navy</code> = "#000080"</td> + </tr> + <tr> + <td> </td> + <td><code>red</code> = "#FF0000"</td> + <td> </td> + <td><code>blue</code> = "#0000FF"</td> + </tr> + <tr> + <td> </td> + <td><code>purple</code> = "#800080"</td> + <td> </td> + <td><code>teal</code> = "#008080"</td> + </tr> + <tr> + <td> </td> + <td><code>fuchsia</code> = "#FF00FF"</td> + <td> </td> + <td> + <p><code>aqua</code> = "#00FFFF"</p> + </td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Note d'utilisation : </strong>Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("td")}} doit être mis en forme grâce au <a href="/fr/docs/CSS">CSS</a>. Pour fournir un effet semblable à celui achevé par l'attribut <code><strong>bgcolor</strong></code>, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "td")}} ne vaut pas <code>char</code>, l'attribut est ignoré.</dd> + <dd> + <div class="note"><strong>Note d'utilisation : </strong>Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "td")}}, il faut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</div> + </dd> + <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut<strong> char</strong> à appliquer au contenu des cellules. + <div class="note"><strong>Note d'utilisation : </strong>Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.</div> + </dd> + <dt>{{htmlattrdef("valign")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont : + <ul> + <li><code>baseline</code> qui alignera le texte à la ligne la plus basse possible en utilisant la <a class="external" href="https://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29">ligne de base</a> des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur <code>bottom</code>.</li> + <li><code>bottom</code> qui placera le texte au plus bas de la cellule</li> + <li><code>middle</code> qui centrera verticalement le texte dans la cellule</li> + <li><code>top</code> qui placera le texte au plus haut de la cellule.</li> + </ul> + + <div class="note"><strong>Note : </strong>Cet attribut est obsolète dans le dernier standard, la propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.</div> + </dd> + <dt>{{htmlattrdef("width")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>Cet attribut est utilisé afin de définir la largeur recommandée pour une cellule. Les propriétés <code><a href="/fr/docs/Web/API/HTMLTableElement/cellSpacing">cellspacing</a></code> et <code><a href="/fr/docs/Web/API/HTMLTableElement/cellPadding">cellpadding</a></code> peuvent être utilisées pour ajouter un espace supplémentaire et la largeur de l'élément {{HTMLElement("col")}} peut avoir un effet. En général, si la largeur d'une colonne est trop étroite pour afficher une cellule correctement, elle sera élargie lors de l'affichage. + <div class="note"><strong>Note : </strong>Cet attribut est obsolète dans le dernier standard, la propriété CSS {{cssxref("width")}} doit être utilisée à la place.</div> + </dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><table> + <tr> + <th>Prénom</th><th>Nom</th> + </tr> + <tr> + <td>Jean</td> <td>Biche</td> + </tr> + <tr> + <td>Marcel</td> <td>Patulacci</td> + </tr> +</table></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","100%","200")}}</p> + +<div class="note"> +<p><strong>Note :</strong> Pour plus d'exemples, voir la page {{HTMLElement("table")}}.</p> +</div> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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>Racine de section.</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>La balise de début est obligatoire. La balise de fin peut être absente si l'élément est immédiatement suivi par un élément {{HTMLElement("th")}} ou un élément {{HTMLElement("td")}} ou s'il n'y a plus aucune donnée dans l'élément parent.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Un élément {{HTMLElement("tr")}}.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLTableDataCellElement")}}</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','tables.html#the-td-element','td element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-td-element','td element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("html.elements.td")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments HTML relatifs aux tableaux : {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li> +</ul> diff --git a/files/fr/web/html/element/template/index.html b/files/fr/web/html/element/template/index.html new file mode 100644 index 0000000000..de61d03a3f --- /dev/null +++ b/files/fr/web/html/element/template/index.html @@ -0,0 +1,165 @@ +--- +title: <template> +slug: Web/HTML/Element/template +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/template +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><template></code></strong> (ou <em><strong>Template Content</strong></em> ou modèle de contenu) est un mécanisme utilisé pour stocker du contenu HTML (côté client) qui ne doit pas être affiché lors du chargement de la page mais qui peut être instancié et affiché par la suite grâce à un script JavaScript.</p> + +<p>Cet élément est un fragment de contenu mis de côté pour être utilisé par la suite dans le document. Lorsque le moteur traite le contenu de l'élément <code><template></code> lors du chargement de la page, il ne fait que vérifier la validité du contenu, ce dernier n'est pas affiché.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><table id="producttable"> + <thead> + <tr> + <td>UPC_Code</td> + <td>Product_Name</td> + </tr> + </thead> + <tbody> + <!-- existing data could optionally be included here --> + </tbody> +</table> + +<template id="productrow"> + <tr> + <td class="record"></td> + <td></td> + </tr> +</template> +</pre> + +<p>Au début, on a un tableau HTML pour lequel on insèrera du contenu plus tard grâce à l'aide d'un script JavaScript. Ensuite, on a le <em>template</em> qui décrit la structure du fragment HTML représentant une ligne de tableau.</p> + +<h3 id="JavaScript">JavaScript</h3> + +<p>Avec le tableau créé et le template défini, on utilise JavaScript pour insérer des lignes dans le tableau dont chacune est construite à partir du <em>template</em>.</p> + +<pre class="brush:js;">// On vérifie si le navigateur prend en charge +// l'élément HTML template en vérifiant la présence +// de l'attribut content pour l'élément template. +if ("content" in document.createElement("template")) { + + // On prépare une ligne pour le tableau + var template = document.querySelector("#productrow"); + + // On clone la ligne et on l'insère dans le tableau + var tbody = document.querySelector("tbody"); + var clone = document.importNode(template.content, true); + var td = clone.querySelectorAll("td"); + td[0].textContent = "1235646565"; + td[1].textContent = "Stuff"; + + tbody.appendChild(clone); + + // On fait de même pour une autre ligne + var clone2 = document.importNode(template.content, true); + td = clone2.querySelectorAll("td"); + td[0].textContent = "0384928528"; + td[1].textContent = "Acme Kidney Beans"; + + // Puis on insère + tbody.appendChild(clone2); + +} else { + // Une autre méthode pour ajouter les lignes + // car l'élément HTML n'est pas pris en charge. +} +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>Le résultat correspond au tableau HTML original avec deux lignes supplémentaires qui ont été ajoutées grâce au code JavaScript :</p> + +<div class="hidden"> +<pre class="brush: css">table { + background: #000; +} +table td { + background: #fff; +}</pre> +</div> + +<p>{{EmbedLiveSample("Exemples", 500, 120)}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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%C3%A9gorie_de_contenu#Contenu_de_m%C3%A9ta-donn%C3%A9es">Contenu de méta-données</a>, <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/Guide/HTML/Catégories_de_contenu#Éléments_supports_de_script">élément destiné aux scripts</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Pas de restriction.</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%C3%A9gorie_de_contenu#Contenu_de_m%C3%A9ta-donn%C3%A9es">Contenu de méta-données</a>, du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, ou <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Éléments_supports_de_script">des éléments destinés aux scripts</a>. L'élément {{HTMLElement("colgroup")}} est également autorisé s'il n'a pas l'attribut {{htmlattrxref("span", "colgroup")}}.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLTemplateElement")}}</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','scripting.html#the-template-element','template element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','/scripting-1.html#the-template-element','template element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.template")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("slot")}}</li> + <li><a href="/fr/docs/Web/Web_Components/Using_templates_and_slots">Utiliser les gabarits et les emplacements (<em>templates and slots</em>)</a></li> + <li>{{HTMLElement("shadow")}} {{obsolete_inline}}</li> +</ul> diff --git a/files/fr/web/html/element/textarea/index.html b/files/fr/web/html/element/textarea/index.html new file mode 100644 index 0000000000..8b4d48ae9a --- /dev/null +++ b/files/fr/web/html/element/textarea/index.html @@ -0,0 +1,244 @@ +--- +title: <textarea> +slug: Web/HTML/Element/Textarea +tags: + - Element + - Formulaires + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/textarea +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><textarea></code></strong> représente un contrôle qui permet d'éditer du texte sur plusieurs lignes.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/textarea.html", "tabbed-standard")}}</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> + +<p>Dans les exemples ci-avant, on peut voir plusieurs fonctionnalités de <code><textarea></code>. Le premier exemple illustre l'utilisation la plus simple avec seul un attribut <code>id</code> qui permet d'associer l'élément <code><textarea></code> avec un élément {{HTMLElement("label")}} à des fins d'accessibilité ainsi qu'un attribut <code>name</code> qui permet de nommer la donnée qui sera envoyée au serveur lors de l'envoi du formulaire.</p> + +<p>Le deuxième exemple détaille des fonctionnalités plus complexes :</p> + +<ul> + <li>Les attributs <code>rows</code> et <code>cols</code> permettent de définir la taille exacte qui doit être occupée par l'élément <code><textarea></code>. Les navigateurs pouvant être différents, c'est une bonne idée que d'utiliser ces attributs pour garantir une certaine homogénéité.</li> + <li><code>maxlength</code> définit le nombre maximal de caractères qui peuvent être saisis dans l'élément <code><textarea></code>. Il est également possible de définir une taile minimale avec l'attribut <code>minlength</code> et d'utiliser l'attribut <code>required</code> afin de bloquer l'envoi du formulaire si aucune valeur n'est saisie. Cela permet une validation basique (on ne peut pas utiliser ici d'expressions rationnelles comme le permet l'attribut <code>pattern</code> sur les éléments {{HTMLElement("input")}}).</li> + <li><code>wrap</code> indique la gestion des retours à la ligne et la façon d'afficher le texte saisi lorsque celui-ci atteint le bord de la zone du <code><textarea></code></li> + <li>Pour prévoir un contenu par défaut, il faut inscrire le texte entre les balises de l'élément. <code><textarea></code> ne prend pas en charge l'attribut <code>value</code>.</li> +</ul> + +<p>L'élément <code><textarea></code> gère plusieurs attributs utilisés par les éléments <code><input></code> : <code>autocomplete</code>, <code>autofocus</code>, <code>disabled</code>, <code>placeholder</code>, <code>readonly</code> et <code>required</code>.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>À l'instar des autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt> + <dd>Cet attribut est non standard, pris en charge par WebKit sur iOS, et contrôle la façon dont le texte saisi doit automatiquement être mis en majuscules. Les valeurs disponibles spour iOS 5 et les versions supérieures sont : + <ul> + <li><code>none</code> : la mise en majuscules est complètement désactivée</li> + <li><code>sentences</code> : la première lettre des phrases est automatiquement mise en majuscule</li> + <li><code>words</code> : la première lettre de chaque mot est automatiquement mise en majuscule</li> + <li><code>characters</code> : tous les caractères sont transformés en majuscules</li> + <li><code>on</code> : {{deprecated_inline}} valeur dépréciée depuis iOS 5 et qui permettait d'activer la mise en majuscule automatique.</li> + <li><code>off</code> : {{deprecated_inline}} valeur dépréciée depuis iOS 5 et qui permettait de désactiver la mise en majuscule automatique.</li> + </ul> + </dd> + <dt>{{htmlattrdef("autocomplete")}}</dt> + <dd>Cet attribut indique si la valeur saisie doit automatiquement être complétée par le navigateur. Cet attribut à valeur contrainte peut prendre l'une de ces deux valeurs : + <ul> + <li><code>off</code> : l'utilisateur doit explicitement saisir une valeur dans ce champ à chaque fois qu'il l'utilise ou le document fournit son propre mécanisme d'auto-complétion. Le navigateur ne complète pas le texte saisi.</li> + <li><code>on</code> : le navigateur peut compléter la saisie de l'utilisateur en fonction de ce que l'utilisateur a déjà saisi précédemment sur ce champ.</li> + </ul> + + <p>Si l'attribut <code>autocomplete</code> n'est pas indiqué à même l'élément <code><textarea></code>, alors le navigateur utilise la valeur d'<code>autocomplete</code> pour le formulaire rattaché à cet élément (c'est-à-dire son élément ancêtre <code><form></code> ou le formulaire correspond à l'identifiant fourni par l'attribut <code>form</code>). Pour plus d'informations, se référer à la documentation de l'attribut {{htmlattrxref("autocomplete", "form")}} de l'élément {{HTMLElement("form")}}.</p> + </dd> + <dt>{{htmlattrdef("autofocus")}}</dt> + <dd>Cet attribut permet d'indiquer que ce contrôle doit recevoir le focus au chargement de la page. Seul un élément de formulaire au sein d'un document peut avoir cet attribut déclaré.</dd> + <dt>{{htmlattrdef("cols")}}</dt> + <dd>La largeur visible du contrôle de saisie, exprimée en largeur moyenne de caractères. La valeur utilisée doit être un entier positif. La valeur par défaut de cet attribut est 20.</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>Cet attribut booléen indique que le contrôle est désactivé et que l'utilisateur ne peut pas interagir avec ce contrôle. Si cet attribut n'est pas utilisé, le contrôle héritera de l'état de son élément parent (par exemple de son éventuel élément parent {{HTMLElement("fieldset")}}). S'il n'existe pas d'élément englobant pour lequel l'attribut <code>disabled</code> est utilisé, le contrôle est alors actif.</dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd>L'élément de formulaire auquel l'élément <code><textarea></code> est rattaché. La valeur de cet attribut doit être l'identifiant (la valeur de l'attribut <code>id</code>) d'un élément {{HTMLElement("form")}} du même document. Si cet attribut n'est pas défini, l'élément <code><textarea></code> doit être un descendant d'un élément <code><form></code>. Cet attribut permet notamment de placer des éléments <code><textarea></code> où qu'on le veuille dans le document et pas uniquement comme des descendants des éléments de formulaire.</dd> + <dt>{{htmlattrdef("maxlength")}}</dt> + <dd>Le nombre maximum de caractères, exprimé en codets Unicode, que l'utilisateur peut saisir. Si cet attribut n'est pas utilisé, l'utilisateur peut saisir un nombre illimité de caractères..</dd> + <dt>{{htmlattrdef("minlength")}}</dt> + <dd>Le nombre minimal que l'utilisateur doit saisir dans le champ, exprimé en codets Unicode.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>Le nom associé au contrôle.</dd> + <dt>{{htmlattrdef("placeholder")}}</dt> + <dd>Une indication fournie à l'utilisateur sur la valeur qui peut être saisie dans le contrôle. Les retours à la ligne contenus dans la valeur de l'attribut doivent être interprétés comme des sauts de ligne lorsque l'indication est affichée pour l'utilisateur. Attention, les indications servent uniquement à indiquer le type de donnée qui peut être saisi dans un champ, elles n'ont pas à remplacer un élément {{HTMLElement("label")}}. (cf. {{HTMLElement("input")}} pour plus d'explications).</dd> + <dt>{{htmlattrdef("readonly")}}</dt> + <dd>Cet attribut booléen indique que l'utilisateur ne peut pas modifier la valeur du contrôle. À la différence de l'attribut <code>disabled</code>, <code>readonly</code> n'empêche pas de cliquer ou de sélectionner le contrôle. La valeur d'un contrôle en lecture seule est tout de même envoyé avec les données du formulaire.</dd> + <dt>{{htmlattrdef("required")}}</dt> + <dd>Cet attribut indique que l'utilisateur doit nécessairement saisir une valeur afin de pouvoir envoyer le formulaire.</dd> + <dt>{{htmlattrdef("rows")}}</dt> + <dd>Le nombre de lignes de texte visibles pour le contrôle.</dd> + <dt>{{htmlattrdef("spellcheck")}}</dt> + <dd>Lorsque cet attribut vaut <code>true</code>, cela indique que la vérification orthographique et grammaticale doit être activée. La valeur <code>default</code> indique que l'élément doit suivre le comportement par défaut, éventuellement basé sur la valeur de l'attribut <code>spellcheck</code> de l'élément parent. Si cet attribut vaut <code>false</code>, le texte de l'élément ne doit pas être contrôlé.</dd> + <dt>{{htmlattrdef("wrap")}}</dt> + <dd>Cet attribut à valeur contrainte indique la façon dont les retours à la ligne automatiques sont utilisés. Les valeurs possibles pour cet attribut sont : + <ul> + <li><code>hard</code> : le navigateur insère automatiquement des sauts de ligne (CR+LF) afin que chaque ligne ne soit pas plus longue que la largeur du contrôle. L'attribut <code>cols</code> doit alors être défini.</li> + <li><code>soft</code> : le navigateur s'assure que tous les sauts de lignes soient représentés par une paire CR+LF mais il n'ajoute pas de sauts de ligne supplémentaires. C'est la valeur par défaut pour cet attribut.</li> + <li><code>off</code> : {{non-standard_inline}}, proche de <code>soft</code> mais on a la règle CSS <code>white-space: pre</code> et les lignes qui dépassent <code>cols</code> ne sont pas ramenées à la ligne. Si elles dépassent, on peut faire défiler la zone d'édition horizontalement.</li> + </ul> + </dd> +</dl> + +<h2 id="Interaction_avec_CSS">Interaction avec CSS</h2> + +<p>Pour CSS, un élément <code><textarea></code> est <a href="/fr/docs/Web/CSS/Élément_remplacé">un élément remplacé</a> qui possède des dimensions intrinsèques (comme une image matricielle). La valeur initiale de la propriété {{cssxref("display")}} pour cet élément est <code>block</code>.</p> + +<p><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Le guide sur la mise en forme des formulaires HTML</a> fournit différentes indications pour mettre en forme les éléments <code><textarea></code>.</p> + +<h3 id="Incohérences_quant_à_la_ligne_de_base">Incohérences quant à la ligne de base</h3> + +<p>La spécification HTML ne définit pas l'emplacement de la ligne de base pour un élément <code><textarea></code>. Aussi, les différents navigateurs utilisent différentes positions. Pour Gecko, la ligne de base d'un élément <code><textarea></code> est définie sur la ligne de base de la première ligne du texte de <code><textarea></code>. Pour un autre navigateur, elle pourrait être définie par rapport au bas de la boîte de l'élément <code><textarea></code>. Pour ces raisons, on évitera d'utiliser {{cssxref("vertical-align")}}<code>: baseline</code> sur cet élément car le comportement serait imprévisible.</p> + +<h3 id="Contrôler_le_caractère_redimensionnable">Contrôler le caractère redimensionnable</h3> + +<p>Dans la plupart des navigateurs, il est possible de redimensionner les éléments <code><textarea></code> grâce au coin inférieur droit. Pour désactiver ce redimensionnement, on peut utiliser la propriété CSS {{cssxref("resize")}} avec la valeur <code>none</code> :</p> + +<pre class="brush: html">textarea { + resize: none; +} +</pre> + +<h3 id="Mettre_en_forme_les_valeurs_valides_et_invalides">Mettre en forme les valeurs valides et invalides</h3> + +<p>Les valeurs valides et invalides saisies dans un élément <code><textarea></code> (par exemple celles qui ne respectent pas le nombre de caractères défini par <code>minlength</code> et <code>maxlength</code> ou quand la valeur est absente alors que l'attribut <code>required</code> est présent) peuvent être mise en forme grâce aux pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}}. Ainsi, on peut définir une bordure différente selon que la valeur saisie est valide ou invalide :</p> + +<pre class="brush: css">textarea:invalid { + border: 2px dashed red; +} + +textarea:valid { + border: 2px solid lime; +}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_simple">Exemple simple</h3> + +<p>L'exemple qui suit illustre une configuration simple avec un nombre donné de lignes et de colonnes et affiche un contenu par défaut.</p> + +<pre class="brush: html"><textarea name="textarea" + rows="10" cols="50">Vous pouvez écrire ici.</textarea></pre> + +<p>{{EmbedLiveSample('Exemple_simple','600','150')}}</p> + +<h3 id="Longueur_minimale_et_longueur_maximale">Longueur minimale et longueur maximale</h3> + +<p>Cet exemple fixe un nombre de caractère minimal et maximal. Vous pouvez essayer de saisir un texte de moins de 10 caractères ou de plus de 30 caractères.</p> + +<pre class="brush: html"><textarea name="textarea" + rows="5" cols="30" + minlength="10" maxlength="30">Vous pouvez écrire ici.</textarea></pre> + +<p>{{EmbedLiveSample('Longueur_minimale_et_longueur_maximale','600','80')}}</p> + +<p>On notera que <code>minlength</code> n'empêche pas de retirer des caractères afin de réduire le texte en dessous de la longueur minimale. En revanche, cela rend la valeur <code><textarea></code> invalide. On notera aussi que, même lorsque <code>minlength</code> est défini, une valeur vide est considérée valide à moins que <code>required</code> soit présent.</p> + +<h3 id="Indication">Indication</h3> + +<p>Dans cet exemple, on utilise l'attribut <code>placeholder</code> afin d'afficher une indication qui disparaît dès qu'on saisit quelque chose dans la zone.</p> + +<pre class="brush: html"><textarea name="textarea" + rows="5" cols="30" + placeholder="Voici une indication."></textarea></pre> + +<p>{{EmbedLiveSample('Indication','600','80')}}</p> + +<div class="note"> +<p><strong>Note :</strong> Les indications ne remplacent pas les élément {{HTMLElement("label")}}.</p> +</div> + +<h3 id="Lecutre_seule_et_contrôle_désactivé">Lecutre seule et contrôle désactivé</h3> + +<p>Cet exemple affiche deux éléments <code><textarea></code> : le premier est désactivé avec <code>disabled</code> et le second est en lecture seule avec <code>readonly</code>. Vous pouvez les manipuler pour voir les différences : pour le premier, on ne peut pas sélectionné son contenu et la valeur n'est pas envoyée avec le formulaire ; pour le second, le contenu peut être sélectionné et la valeur est envoyée, il est uniquement impossible d'éditer le contenu.</p> + +<pre class="brush: html"><textarea name="textarea" + rows="5" cols="30" + disabled>Je suis désactivé</textarea> +<textarea name="textarea" + rows="5" cols="30" + readonly>Je suis en lecture seule</textarea> +</pre> + +<p>{{EmbedLiveSample('Lecture_seule_et_contrôle_désactivé','600','80')}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_associé_aux_formulaires">contenu de formulaire (énuméré, étiquetable, réinitialisable, envoyable)</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Du texte.</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_phrasé">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLTextAreaElement")}}</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-textarea-element', '<textarea>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-textarea-element', '<textarea>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.7', '<textarea>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.textarea")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.</li> +</ul> diff --git a/files/fr/web/html/element/tfoot/index.html b/files/fr/web/html/element/tfoot/index.html new file mode 100644 index 0000000000..390b470314 --- /dev/null +++ b/files/fr/web/html/element/tfoot/index.html @@ -0,0 +1,226 @@ +--- +title: <tfoot> +slug: Web/HTML/Element/tfoot +tags: + - Element + - HTML + - Reference + - Tableaux + - Web +translation_of: Web/HTML/Element/tfoot +--- +<div>{{HTMLRef}}</div> + +<p id="Summary">L'élément HTML <strong><code><tfoot></code></strong> permet de définir un ensemble de lignes qui résument les colonnes d'un tableau.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/tfoot.html","tabbed-taller")}}</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> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3> + +<dl> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt> + <dd>Cet attribut à valeurs définit l'alignement horizontal pour le contenu de chaque cellule de la colonne. Les valeurs possibles sont : + <ul> + <li><code>left </code>: le contenu de la cellule est alligné à gauche de la cellule</li> + <li><code>center</code> : le contenu de la cellule est centré horizontalement</li> + <li><code>right</code> : le contenu de la cellule est aligné à droite de la cellule</li> + <li><code>justify</code> : insert des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié</li> + <li><code>char</code> : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs {{htmlattrxref("char", "tfoot")}} et {{htmlattrxref("charoff", "tfoot")}} {{unimplemented_inline(2212)}}.</li> + </ul> + + <p>Si cet attribut n'est pas renseigné, la valeur <code>left</code> est prise par défaut.</p> + + <div class="note"><strong>Notes : </strong>Cet attribut est devenu obsolète dans le dernier standard. + + <ul> + <li>Pour réaliser le même effet qu'avec les valeurs left, center, right ou justify, utilisez la propriété CSS {{cssxref("text-align")}} sur cet élément.</li> + <li>Pour réaliser le même effet qu'avec char, vous pouvez, en CSS3, utiliser la valeur de {{htmlattrxref("char", "tfoot")}} comme valeur pour la propriété {{cssxref("text-align")}} {{unimplemented_inline}}.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd>Cet attribut définit la couleur d'arrière-plan de toutes les cellules. C'est un code à 6 chiffres hexadécimaux comme défini par le <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé. + <table> + <tbody> + <tr> + <td><code>black</code> = "#000000"</td> + <td><code>green</code> = "#008000"</td> + </tr> + <tr> + <td><code>silver</code> = "#C0C0C0"</td> + <td><code>lime</code> = "#00FF00"</td> + </tr> + <tr> + <td><code>gray</code> = "#808080"</td> + <td><code>olive</code> = "#808000"</td> + </tr> + <tr> + <td><code>white</code> = "#FFFFFF"</td> + <td><code>yellow</code> = "#FFFF00"</td> + </tr> + <tr> + <td><code>maroon</code> = "#800000"</td> + <td><code>navy</code> = "#000080"</td> + </tr> + <tr> + <td><code>red</code> = "#FF0000"</td> + <td><code>blue</code> = "#0000FF"</td> + </tr> + <tr> + <td><code>purple</code> = "#800080"</td> + <td><code>teal</code> = "#008080"</td> + </tr> + <tr> + <td><code>fuchsia</code> = "#FF00FF"</td> + <td><code>aqua</code> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Note d'utilisation : </strong>Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("tfoot")}} doit être mis en forme grâce au <a href="/fr/docs/CSS">CSS</a>. Pour fournir un effet semblable à celui achevé par l'attribut <code><strong>bgcolor</strong></code>, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt> + <dd>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "tfoot")}} ne vaut pas <code>char</code>, l'attribut est ignoré.</dd> + <dd> + <div class="note"><strong>Note d'utilisation : </strong>Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "tfoot")}}, on peut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt> + <dd>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut<strong> char</strong> à appliquer au contenu des cellules. + <div class="note"><strong>Note d'utilisation: </strong>Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt> + <dd>Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont : + <ul> + <li><code>baseline</code> qui alignera le texte à la ligne la plus basse possible en utilisant la <a class="external" href="https://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29">ligne de base</a> des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur <code>bottom</code>.</li> + <li><code>bottom</code> qui placera le texte au plus bas de la cellule</li> + <li><code>middle</code> qui centrera verticalement le texte dans la cellule</li> + <li><code>top</code> qui placera le texte au plus haut de la cellule.</li> + </ul> + + <div class="note"><strong>Note d'utilisation : </strong>Cet attribut étant maintenant obsolète (et n'étant plus supporté), il est fortement déconseillé de l'utiliser. La propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.</div> + </dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><table> + <thead> + <tr> + <th>Contenu d'en-tête 1</th> + <th>Contenu d'en-tête 2</th> + </tr> + </thead> + <tbody> + <tr> + <td>Contenu interne 1</td> + <td>Contenu interne 2</td> + </tr> + </tbody> + <tfoot> + <tr> + <td>Pied de tableau 1</td> + <td>Pied de tableau 2</td> + </tr> + </tfoot> +</table></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","100%","150")}}</p> + +<div class="note"> +<p><strong>Note :</strong> Consulter la page {{HTMLElement("table")}} pour plus d'exemples sur <code><tfoot></code>.</p> +</div> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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>Aucune.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Zéro ou plusieurs éléments {{HTMLElement("tr")}}.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>La balise de début est obligatoire. La balise de fin peut être absente si l'élément {{HTMLElement("tbody")}} est immédiatement suivi par un élément {{HTMLElement("tbody")}} (même si celui-ci est défini implicitement) ou s'il n'y a plus de contenu au sein de l'élément parent {{HTMLElement("table")}}.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Un élément {{HTMLElement("table")}}. L'élément {{HTMLElement("tfoot")}} doit apparaître après l'élément {{HTMLElement("caption")}}, l'élément {{HTMLElement("colgroup")}} ou l'élément {{HTMLElement("thead")}}. Il peut être situé avant ou après tous les éléments {{HTMLElement("tbody")}} ou {{HTMLElement("tr")}} mais il ne peut pas être intercalés entre ces éléments. En HTML4, l'élément {{HTMLElement("tfoot")}} ne peut pas être placé après un élément {{HTMLElement("tbody")}} ou {{HTMLElement("tr")}} (restriction levée en HTML5).</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLTableSectionElement")}}</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','tables.html#the-tfoot-element','tfoot element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-tfoot-element','tfoot element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("html.elements.tfoot")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments HTML relatifs aux tableaux : {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("td")}}, {{HTMLElement("tbody")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li> + <li>Les propriétés et pseudo-classes CSS qui peuvent s'avérer utiles pour mettre en forme l'élément <code><tfoot></code> : + <ul> + <li>La pseudo-classe {{cssxref(":nth-child")}} qui permet de définir l'alignement des cellules de la colonne</li> + <li>La propriété {{cssxref("text-align")}} qui permet d'aligner le contenu des différentes cellules par rapport à un même caractère (comme le point ou la virgule).</li> + </ul> + </li> +</ul> diff --git a/files/fr/web/html/element/th/index.html b/files/fr/web/html/element/th/index.html new file mode 100644 index 0000000000..e5bf917a11 --- /dev/null +++ b/files/fr/web/html/element/th/index.html @@ -0,0 +1,264 @@ +--- +title: <th> +slug: Web/HTML/Element/th +tags: + - Element + - HTML + - Reference + - Tableaux + - Web +translation_of: Web/HTML/Element/th +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><th></code></strong> définit une cellule d'un tableau comme une cellule d'en-tête pour un groupe de cellule. La nature de ce groupe est définie grâce aux attributs {{htmlattrxref("scope", "th")}} et {{htmlattrxref("headers", "th")}}.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/th.html","tabbed-taller")}}</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> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("abbr")}}</dt> + <dd>Cet attribut contient une description courte et abrégée du contenu de la cellule. Certains outils utilisateurs, comme la synthèse vocale, peuvent décrire cette information avant le contenu lui-même.</dd> + <dt>{{htmlattrdef("colspan")}}</dt> + <dd>Cet attribut contient un entier positif indiquant le nombre de colonnes sur lesquelles s'étend la cellule. La valeur par défaut est 1. Si cet attribut vaut 0, la cellule s'étend jusqu'à la fin du {{HTMLElement("colgroup")}} auquel appartient la cellule, même si celui-ci est défini implicitement. Des valeurs supérieures à 1000 peuvent être considérées comme incorrectes et seront écrétées à 1000.</dd> + <dt>{{htmlattrdef("headers")}}</dt> + <dd>Cet attribut est une liste de chaînes de caractères séparées par des espace. Chacune correspond à l'attribut <code>id</code> de l'élément {{HTMLElement("th")}} qui s'applique à cet élément.</dd> + <dt>{{htmlattrdef("rowspan")}}</dt> + <dd>Cet attribut contient un entier positif indiquant sur combien de lignes s'étend la cellule. La valeur par défaut est 1. Si cet attribut vaut 0, la cellule s'étend jusqu'à la fin de la section ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}} du tableau à laquelle appartient la cellule même si cette section est définie implicitement. Les valeurs supérieures à 65534 seront ramenées à 65534.</dd> + <dt>{{htmlattrdef("scope")}}</dt> + <dd>Cet attribut référence les cellules auxquelles l'élément <th> est lié. Cet attribut est un attribut à valeur contrainte qui peut prendre les valeurs suivantes : + <ul> + <li><code>row</code>, ce qui signifie que l'en-tête s'applique à toutes les cellules de la ligne à laquelle appartient cet élément</li> + <li><code>col</code>, ce qui signifie que l'en-tête s'applique à toutes les cellules de la colonne à laquelle appartient cet élément</li> + <li><code>rowgroup</code>, ce qui signifie que l'en-tête s'applique à toutes les cellules restantes dans la ligne à laquelle appartient cet élément. Les cellules restants sont soit celles à droite de l'élément, soit celles à gauche selon la valeur de l'attribut {{htmlattrxref("dir", "table")}}</li> + <li><code>colgroup</code>, ce qui signifie que l'en-tête s'applique à toutes les cellules restantes dans la colonne à laquelle appartient cet élément.</li> + <li><em>auto</em></li> + </ul> + </dd> +</dl> + +<h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3> + +<dl> + <dt>{{htmlattrdef("align")}} {{obsolete_inline}} {{HTMLVersionInline("5")}}</dt> + <dd>Cet attribut à valeurs définit l'alignement horizontal pour le contenu de chaque cellule de la colonne. Les valeurs possibles sont : + <ul> + <li><code>left </code>: le contenu de la cellule est alligné à gauche de la cellule (la valeur par défaut de cet attribut)</li> + <li><code>center</code> : le contenu de la cellule est centré horizontalement</li> + <li><code>right</code> : le contenu de la cellule est aligné à droite de la cellule</li> + <li><code>justify</code> : insert des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié</li> + <li><code>char</code> : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs {{htmlattrxref("char", "th")}} et {{htmlattrxref("charoff", "th")}} {{unimplemented_inline(2212)}}.</li> + </ul> + + <p>Si cet attribut n'est pas renseigné, la valeur <code>left</code> est prise par défaut.</p> + + <div class="note"><strong>Notes : </strong>Cet attribut est devenu obsolète dans le dernier standard et ne doit donc plus être utilisé. + + <ul> + <li>Pour réaliser les mêmes effets que les valeurs <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code>, il faut utiliser la propriété CSS {{cssxref("text-align")}} sur l'élément</li> + <li>Pour réaliser le même effet qu'avec la valeur <code>char</code>. Il est possible, en CSS3, d'utiliser la valeur de l'attribut {{htmlattrxref("char", "th")}} comme valeur de la propriété {{cssxref("text-align")}}. {{unimplemented_inline}}.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("axis")}} {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt> + <dd>Cet attribut contient une liste de chaîne de caractères (séparées par des espaces). Chaque chaîne de caractère est l'identifiant d'un groupe de cellule auquel cet en-tête s'applique.</dd> + <dd> + <div class="note"><strong>Note : </strong>Cet attribut est obsolète dans le dernier standard et ne doit donc plus être utilisé. L'attribut {{htmlattrxref("scope", "td")}} doit être utilisé pour le remplacer.</div> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd>Cet attribut définit la couleur d'arrière-plan de toutes les cellules de la colonne. C'est un code à 6 chiffres hexadécimaux comme défini par le <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé. + <table style="width: 80%;"> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>black</code> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>green</code> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>silver</code> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>lime</code> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>gray</code> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>olive</code> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>white</code> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>yellow</code> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>maroon</code> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>navy</code> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>red</code> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>blue</code> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>purple</code> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>teal</code> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>fuchsia</code> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td> + <p><code>aqua</code> = "#00FFFF"</p> + </td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Note d'utilisation : </strong>Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("th")}} doit être mis en forme grâce au <a href="/fr/docs/CSS">CSS</a>. Pour fournir un effet semblable à celui achevé par l'attribut <code><strong>bgcolor</strong></code>, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{obsolete_inline}} {{HTMLVersionInline("5")}}</dt> + <dd>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "th")}} ne vaut pas <code>char</code>, l'attribut est ignoré.</dd> + <dd> + <div class="note"><strong>Note d'utilisation : </strong>Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "th")}}, on peut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("charoff")}} {{obsolete_inline}} {{HTMLVersionInline("5")}}</dt> + <dd>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut<strong> char</strong> à appliquer au contenu des cellules. + <div class="note"><strong>Note d'utilisation: </strong>Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt> + <dd>Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont : + <ul> + <li><code>baseline</code> qui alignera le texte à la ligne la plus basse possible en utilisant la <a class="external" href="https://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29">ligne de base</a> des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur <code>bottom</code>.</li> + <li><code>bottom</code> qui placera le texte au plus bas de la cellule</li> + <li><code>middle</code> qui centrera verticalement le texte dans la cellule</li> + <li><code>top</code> qui placera le texte au plus haut de la cellule.</li> + </ul> + + <div class="note"><strong>Note: </strong>Cet attribut est obsolète dans le dernier standard, la propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.</div> + </dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><table> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + </tr> + <tr> + <td>WHATWG</td> + <td>Colorad</td> + </tr> + <tr> + <td>W3C</td> + <td>Wisconsin</td> + </tr> + </tbody> +</table></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","100%","220")}}</p> + +<div class="note"> +<p><strong>Note :</strong> Voir la page {{HTMLElement("table")}} pour d'autres exemples.</p> +</div> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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>Aucune.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td> + <div class="content-models"> + <div id="table-mdls"><a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_de_flux">Contenu de flux</a> sans titre, pied de page, contenu sectionnant ou descendants d'un élément de titre.</div> + </div> + </td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>La balise de début est obligatoire. La balise de fin peut être absente si l'élément est immédiatement suivi par un élément {{HTMLElement("th")}} ou par un élément {{HTMLElement("td")}} ou s'il n'y a plus de contenu au sein de l'élément parent.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Un élément {{HTMLElement("tr")}}.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLTableHeaderCellElement")}}</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','tables.html#the-th-element','th element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-th-element','th element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("html.elements.th")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments HTML relatifs aux tableaux : {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li> +</ul> diff --git a/files/fr/web/html/element/thead/index.html b/files/fr/web/html/element/thead/index.html new file mode 100644 index 0000000000..a563876f5b --- /dev/null +++ b/files/fr/web/html/element/thead/index.html @@ -0,0 +1,242 @@ +--- +title: <thead> +slug: Web/HTML/Element/thead +tags: + - Element + - HTML + - Reference + - Tableaux + - Web +translation_of: Web/HTML/Element/thead +--- +<div>{{HTMLRef}}</div> + +<p>L'élément <strong><code><thead></code></strong> définit un ensemble de lignes qui définit l'en-tête des colonnes d'un tableau.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/thead.html","tabbed-taller")}}</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> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3> + +<dl> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt> + <dd>Cet attribut à valeurs définit l'alignement horizontal pour le contenu de chaque cellule. Les valeurs possibles sont : + <ul> + <li><code>left </code>: le contenu de la cellule est alligné à gauche de la cellule</li> + <li><code>center</code> : le contenu de la cellule est centré horizontalement</li> + <li><code>right</code> : le contenu de la cellule est aligné à droite de la cellule</li> + <li><code>justify</code> : insert des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié</li> + <li><code>char</code> : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs {{htmlattrxref("char", "thead")}} et {{htmlattrxref("charoff", "thead")}} {{unimplemented_inline(2212)}}.</li> + </ul> + + <p>Si cet attribut n'est pas renseigné, la valeur <code>left</code> est prise par défaut.</p> + + <div class="note"><strong>Notes : </strong>Cet attribut est devenu obsolète dans le dernier standard. + + <ul> + <li>Pour réaliser le même effet qu'avec les valeurs left, center, right ou justify, utilisez la propriété CSS {{cssxref("text-align")}} sur cet élément.</li> + <li>Pour réaliser le même effet qu'avec char, vous pouvez, en CSS3, utiliser la valeur de {{htmlattrxref("char", "thead")}} comme valeur pour la propriété {{cssxref("text-align")}} {{unimplemented_inline}}.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd>Cet attribut définit la couleur d'arrière-plan de toutes les cellules. C'est un code à 6 chiffres hexadécimaux comme défini par le <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé. + <table style="width: 80%;"> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>black</code> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>green</code> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>silver</code> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>lime</code> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>gray</code> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>olive</code> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>white</code> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>yellow</code> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>maroon</code> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>navy</code> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>red</code> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>blue</code> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>purple</code> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>teal</code> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>fuchsia</code> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>aqua</code> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Note d'utilisation : </strong>Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("thead")}} doit être mis en forme grâce au <a href="/fr/docs/CSS">CSS</a>. Pour fournir un effet semblable à celui achevé par l'attribut <strong>bgcolor</strong>, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt> + <dd>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "thead")}} ne vaut pas <code>char</code>, l'attribut est ignoré.</dd> + <dd> + <div class="note"><strong>Note d'utilisation : </strong>Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "thead")}}, on peut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt> + <dd>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut<strong> char</strong> à appliquer au contenu des cellules. + <div class="note"><strong>Note d'utilisation: </strong>Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt> + <dd>Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont : + <ul> + <li><code>baseline</code> qui alignera le texte à la ligne la plus basse possible en utilisant la <a class="external" href="https://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29">ligne de base</a> des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur <code>bottom</code>.</li> + <li><code>bottom</code> qui placera le texte au plus bas de la cellule</li> + <li><code>middle</code> qui centrera verticalement le texte dans la cellule</li> + <li><code>top</code> qui placera le texte au plus haut de la cellule.</li> + </ul> + + <div class="note"><strong>Note d'utilisation : </strong>Cet attribut étant maintenant obsolète (et n'étant plus supporté), il est fortement déconseillé de l'utiliser. La propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.</div> + </dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><table> + <thead> + <tr> + <th>Contenu d'en-tête 1</th> + <th>Contenu d'en-tête 2</th> + </tr> + </thead> + <tfoot> + <tr> + <td>Pied de tableau 1</td> + <td>Pied de tableau 2</td> + </tr> + </tfoot> + <tbody> + <tr> + <td>Contenu interne 1</td> + <td>Contenu interne 2</td> + </tr> + </tbody> +</table></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","100%","150")}}</p> + +<div class="note"> +<p><strong>Note :</strong> Consulter la page {{HTMLElement("table")}} pour plus d'exemples sur <code><thead></code>.</p> +</div> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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>Aucun.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Zéro ou plusieurs éléments {{HTMLElement("tr")}}.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>La balise de début est obligatoire. La balise de fin peut être absente si l'élément {{HTMLElement("thead")}} est immédiatement suivi par un élément {{HTMLElement("tbody")}} ou par un élément {{HTMLElement("tfoot")}}.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Un élément {{HTMLElement("table")}}. L'élément {{HTMLElement("thead")}} doit apparaître après tout élément {{HTMLElement("caption")}} ou {{HTMLElement("colgroup")}} (même si ce dernier est défini implicitement), il doit apparaître avant tout élément {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}} ou {{HTMLElement("tr")}}.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLTableSectionElement")}}</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','tables.html#the-thead-element','thead element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-thead-element','thead element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("html.elements.thead")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments HTML liés aux tableaux : {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("tr")}}.</li> + <li>Les propriétés et pseudo-classes CSS particulièrement utiles pour mettre en forme l'élément <code><thead></code> : + <ul> + <li>La pseudo-classe {{cssxref(":nth-child")}} qui permet de définir l'alignement des cellules de la colonne</li> + <li>La propriété {{cssxref("text-align")}} qui permet d'aligner le contenu des différentes cellules par rapport à un même caractère (par exemple le point ou la virgule).</li> + </ul> + </li> +</ul> diff --git a/files/fr/web/html/element/time/index.html b/files/fr/web/html/element/time/index.html new file mode 100644 index 0000000000..c64011e3cc --- /dev/null +++ b/files/fr/web/html/element/time/index.html @@ -0,0 +1,171 @@ +--- +title: <time> +slug: Web/HTML/Element/time +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/time +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><time></code></strong> permet de représenter une période donnée. Cet élément permet d'utiliser l'attribut <code>datetime</code> afin de traduire la date ou l'instant dans un format informatique (permettant aux moteurs de recherche d'exploiter ces données ou de créer des rappels).</p> + +<p>Cet élément permet de représenter :</p> + +<ul> + <li>une heure</li> + <li>une date du <a href="https://fr.wikipedia.org/wiki/Calendrier_gr%C3%A9gorien">calendrier grégorien</a> (en précisant éventuellement l'heure et les informations de fuseau horaire).</li> + <li><a href="https://www.w3.org/TR/2014/REC-html5-20141028/infrastructure.html#valid-duration-string">une durée valide</a>.</li> +</ul> + +<div>{{EmbedInteractiveExample("pages/tabbed/time.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> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("datetime")}}</dt> + <dd>Cet attribut indique l'heure et la date associées à l'élément. La valeur de cet attribut doit être une chaîne de caractères décrivant <a class="external" href="https://www.w3.org/TR/html51/infrastructure.html#dates-and-times">une date valide avec un fragment optionnel pour décrire l'heure</a> (cf. ci-après). Si la valeur ne peut pas être analysée comme une date/heure, le contenu de l'élément n'aura pas d'indication temporelle associée.</dd> +</dl> + +<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> + +<p>Cet élément est conçu pour présenter des dates et des heures au sein d'un document. Elles sont écrites dans un format compréhensible par un programme, ce qui peut s'avérer utile pour les agents utilisateur qui offrent des fonctionnalités de gestion de calendrier/agenda.</p> + +<p>Cet élément n'est pas approprié pour les dates antérieures à l'introduction du calendrier grégorien (en raison des complications de calcul pour ces dates).</p> + +<p>La valeur exploitable informatiquement est la valeur de l'attribut <code>datetime</code> de l'élément. Cette valeur doit être dans un format correct pour être analysé. Si l'élément ne possède pas d'attribut <code>datetime</code>, il ne doit pas avoir d'éléments fils et la valeur de l'heure est le contenu (textuel) de l'élément.</p> + +<h3 id="Valeurs_valides">Valeurs valides</h3> + +<dl> + <dt>Une chaîne de caractères représentant une année</dt> + <dd><code>2011</code></dd> + <dd><code>0001</code></dd> + <dt>Une chaîne de caractères représentant une année et un mois</dt> + <dd><code>2011-11</code></dd> + <dt>Une chaîne de caractères représentant une date</dt> + <dd><code>2011-11-18</code></dd> + <dt>Une chaîne de caractères représentant une date sans l'année</dt> + <dd><code>11-18</code></dd> + <dt>Une chaîne de caractères représentant une semaine</dt> + <dd><code>2011-W47</code></dd> + <dt>Une chaîne de caractères représentant une heure</dt> + <dd><code>14:54</code></dd> + <dd><code>14:54:39</code></dd> + <dd><code>14:54:39.929</code></dd> + <dt>Une chaîne de caractères représentant une date et une heure locale</dt> + <dd><code>2011-11-18T14:54:39.929</code></dd> + <dd><code>2011-11-18 14:54:39.929</code></dd> + <dt>Une chaîne de caractères représentant une date et une heure universelle</dt> + <dd><code>2011-11-18T14:54:39.929Z</code></dd> + <dd><code>2011-11-18T14:54:39.929-0400</code></dd> + <dd><code>2011-11-18T14:54:39.929-04:00</code></dd> + <dd><code>2011-11-18 14:54:39.929Z</code></dd> + <dd><code>2011-11-18 14:54:39.929-0400</code></dd> + <dd><code>2011-11-18 14:54:39.929-04:00</code></dd> + <dt>Une chaîne de caractères représentant une durée</dt> + <dd><code>PT4H18M3S</code></dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_simple">Exemple simple</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>Le concert commence à <time datetime="2018-07-07T20:00:00">20h00</time>.</p> +</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample('Exemple_simple', 250, 60)}}</p> + +<h3 id="Exemple_avec_datetime">Exemple avec <code>datetime</code></h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p>Le concert a lieu <time + datetime="2001-05-15T19:00">le 15 mai</time>.</p> +</pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample('Exemple_avec_datetime', 250, 60)}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">Contenu phrasé</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_phrasé">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLTimeElement")}}</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', 'text-level-semantics.html#the-time-element', '<time>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Aucune modification depuis {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'grouping-content.html#the-time-element', '<time>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Aucune modification depuis {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-time-element', '<time>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.time")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'élément {{HTMLElement("data")}} qui permet de représenter des valeurs différentes.</li> +</ul> diff --git a/files/fr/web/html/element/title/index.html b/files/fr/web/html/element/title/index.html new file mode 100644 index 0000000000..25924bf08a --- /dev/null +++ b/files/fr/web/html/element/title/index.html @@ -0,0 +1,131 @@ +--- +title: '<title> : l''élément de titre du document' +slug: Web/HTML/Element/title +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/title +--- +<div>{{HTMLRef}}</div> + +<p>L'élément <strong><code><title></code></strong> définit le titre du document (qui est affiché dans la barre de titre du navigateur ou dans l'onglet de la page). Cet élément ne peut contenir que du texte, les balises qu'il contiendrait seraient ignorées.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> + +<p>L'élément <code><title></code> est toujours utilisé au sein de l'élément {{HTMLElement("head")}} de la page.</p> + +<h3 id="Référencement_(SEO)">Référencement (SEO)</h3> + +<p>Le titre d'une page fait partie des éléments principaux qui sont scannés lors de l'indexation d'une page. C'est aussi le texte qui est affiché parmi les résultats du moteur de recherche, de façon proéminente et donc visible par les utilisateurs qui trouvent votre site grâce à un moteur de recherche.</p> + +<p>Aussi, mieux vaudra avoir des titres descriptifs plutôt que des titres trop courts ou vagues.</p> + +<p>Quelques observations :</p> + +<ul> + <li>On pourra éviter les titres sur un ou deux mots.</li> + <li>La longueur affichée pour les titres dans les résultats d'un moteur de recherche se situe entre 55 et 60 caractères. Si le titre est plus long, on veillera à ce que les concepts majeurs apparaissent avant cette longueur.</li> + <li>Attention aux entités (les chevrons HTML pourront être affichés différemment entre les navigateurs).</li> + <li>Le titre doit être intelligible et pas une simple concaténation de mots-clés.</li> + <li>Le titre devra être unique pour un même site.</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: html"><title>Et voici le titre de ma page !</title> +</pre> + +<h2 id="Accessibilité">Accessibilité</h2> + +<p>Il est important de fournir une valeur pour l'attribut <code>title</code> qui décrit le but de la page de façon claire et concise.</p> + +<p>Les personnes utilisant des outils d'assistance peuvent utiliser le titre de la page afin de déterminer rapidement ce qu'elle contient. Ainsi, il peut ne pas être nécessaire de naviguer « dans » la page, ce qui peut prendre du temps et être source de confusion si, ce faisant, on doit déterminer le but de la page.</p> + +<h4 id="Exemple">Exemple</h4> + +<pre><title>Menu - Restaurant chinois Maison bleue - Commande en ligne</title> +</pre> + +<p>Mettre à jour la valeur de <code>title</code> afin de refléter un changement d'état important (un problème de validation d'un formulaire par exemple) peut également s'avérer utile :</p> + +<h4 id="Exemple_2">Exemple</h4> + +<pre><title>2 erreurs sur votre commande - Restaurant chinois Maison bleue - Commande en ligne</title> +</pre> + +<ul> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">Comprendre les règles WCAG 2.4</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html"><em>Understanding Success Criterion 2.4.2 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li> +</ul> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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_méta-données">Contenu de méta-données</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Du texte qui n'est pas du blanc entre éléments (<em>inter-element whitespace</em>).</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>Les deux balises sont nécessaires. Si <code></title></code> est absent, le navigateur peut ignorer le reste de la page.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Un élément {{HTMLElement("head")}} qui ne contient pas d'autre élément {{HTMLElement("title")}}.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLTitleElement")}}</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', 'semantics.html#the-title-element', '<title>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-title-element', '<title>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.2', '<title>')}}</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> + +<p>{{Compat("html.elements.title")}}</p> diff --git a/files/fr/web/html/element/tr/index.html b/files/fr/web/html/element/tr/index.html new file mode 100644 index 0000000000..792b419746 --- /dev/null +++ b/files/fr/web/html/element/tr/index.html @@ -0,0 +1,422 @@ +--- +title: '<tr> : l''élément de ligne d''un tableau' +slug: Web/HTML/Element/tr +tags: + - Element + - HTML + - Reference + - Tableaux + - Web +translation_of: Web/HTML/Element/tr +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><tr></code></strong> définit une ligne de cellules dans un tableau. Une ligne peut être constituée d'éléments {{HTMLElement("td")}} (les données des cellules) et {{HTMLElement("th")}} (les cellules d'en-têtes).</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/tr.html","tabbed-taller")}}</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> + +<p>Si on veut qu'une cellule s'étende sur plusieurs lignes/colonnes, on pourra utiliser l'attribut {{htmlattrxref("colspan", "td")}} ou {{htmlattrxref("rowspan", "td")}} qui indiquent respectivement le nombre de colonnes / lignes sur lequel s'étendre (la valeur par défaut étant 1).</p> + +<p>La construction de tableau peut parfois demander un peu de pratique. Au-delà des exemples présentés ci-après, vous pouvez consulter <a href="/fr/docs/Apprendre/HTML/Tableaux">les tutoriels sur les tableaux HTML</a> afin d'apprendre comment utiliser ces éléments et attributs HTML afin d'organiser vos données tabulaires.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>À l'instar de tous les éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3> + +<dl> + <dt>{{htmlattrdef("align")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>Cet attribut à valeurs définit l'alignement horizontal pour le contenu de chaque cellule. Les valeurs possibles sont : + <ul> + <li><code>left </code>: le contenu de la cellule est aligné à gauche de la cellule</li> + <li><code>center</code> : le contenu de la cellule est centré horizontalement</li> + <li><code>right</code> : le contenu de la cellule est aligné à droite de la cellule</li> + <li><code>justify</code> : insert des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié</li> + <li><code>char</code> : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum défini par les attributs {{htmlattrxref("char", "tr")}} et {{htmlattrxref("charoff", "tr")}} {{unimplemented_inline(2212)}}.</li> + </ul> + + <p>Si cet attribut n'est pas renseigné, la valeur est héritée du nœud parent.</p> + + <div class="note"><strong>Notes : </strong>Cet attribut est devenu obsolète dans le dernier standard et ne doit donc plus être utilisé. + + <ul> + <li>Pour réaliser les mêmes effets que les valeurs <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code>, il faut utiliser la propriété CSS {{cssxref("text-align")}} sur l'élément</li> + <li>Pour réaliser le même effet qu'avec la valeur <code>char</code>. Il est possible, en CSS3, d'utiliser la valeur de l'attribut {{htmlattrxref("char", "tr")}} comme valeur de la propriété {{cssxref("text-align")}}. {{unimplemented_inline}}.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("bgcolor")}} {{Obsolete_Inline("HTML5")}}</dt> + <dd>Cet attribut définit la couleur d'arrière-plan de toutes les cellules de la colonne. C'est un code à 6 chiffres hexadécimaux comme défini par le <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé. + <table style="width: 80%;"> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>black</code> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>green</code> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>silver</code> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>lime</code> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>gray</code> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>olive</code> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>white</code> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>yellow</code> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>maroon</code> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>navy</code> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>red</code> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>blue</code> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>purple</code> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>teal</code> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>fuchsia</code> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td> + <p><code>aqua</code> = "#00FFFF"</p> + </td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Note d'utilisation : </strong>Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("tr")}} doit être mis en forme grâce au <a href="/fr/docs/CSS">CSS</a>. Pour fournir un effet semblable à celui achevé par l'attribut <code><strong>bgcolor</strong></code>, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "tr")}} ne vaut pas <code>char</code>, l'attribut est ignoré.</dd> + <dd> + <div class="note"><strong>Note d'utilisation : </strong>Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "tr")}}, il faut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("charoff")}} {{Obsolete_Inline("HTML5")}}</dt> + <dd>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère défini par l'attribut<strong> char</strong> à appliquer au contenu des cellules. + <div class="note"><strong>Note d'utilisation: </strong>Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("valign")}} {{Obsolete_Inline("HTML5")}}</dt> + <dd>Cet attribut définit l'alignement vertical du texte des cellules de la ligne. Les valeurs possibles de cet attribut sont : + <ul> + <li><code>baseline</code> qui alignera le texte à la ligne la plus basse possible en utilisant la <a class="external" href="https://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29">ligne de base</a> des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur <code>bottom</code>.</li> + <li><code>bottom</code> qui placera le texte au plus bas de la cellule</li> + <li><code>middle</code> qui centrera verticalement le texte dans la cellule</li> + <li><code>top</code> qui placera le texte au plus haut de la cellule.</li> + </ul> + + <div class="note"><strong>Note: </strong>Cet attribut est obsolète dans le dernier standard, la propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.</div> + </dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_simple">Exemple simple</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><table> + <tr> + <th>Prénom</th><th>Nom</th> + </tr> + <tr> + <td>Jean</td> <td>Biche</td> + </tr> + <tr> + <td>Marcel</td> <td>Patulacci</td> + </tr> +</table></pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Exemple_simple","100%","200")}}</p> + +<div class="note"> +<p><strong>Note :</strong> Pour plus d'exemples, voir la page {{HTMLElement("table")}}.</p> +</div> + +<h3 id="Étendre_sur_plusieurs_lignes_ou_colonnes">Étendre sur plusieurs lignes ou colonnes</h3> + +<p>On utilise ici les attributs <code>rowspan</code> et <code>colspan</code> pour étendre des cellules sur plusieurs lignes et colonnes.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><table> + <tr> + <th rowspan="2">Nom</th> + <th rowspan="2">ID</th> + <th colspan="2">Dates</th> + <th rowspan="2">Solde</th> + </tr> + <tr> + <th>Inscription</th> + <th>Résiliation</th> + </tr> + <tr> + <th>Margaret Nguyen</td> + <td>427311</td> + <td><time datetime="2010-06-03">3 juin 2010</time></td> + <td>n/a</td> + <td>0</td> + </tr> + <tr> + <th>Edvard Galinski</td> + <td>533175</td> + <td><time datetime="2011-01013">13 janvier 2011</time></td> + <td><time datetime="2017-04008">8 avril 2017</time></td> + <td>37</td> + </tr> + <tr> + <th>Hoshi Nakamura</td> + <td>601942</td> + <td><time datetime="2012-07-23">23 juillet 2012</time></td> + <td>n/a</td> + <td>15</td> + </tr> +</table></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">table { + border: 1px solid black; +} + +th, td { + border: 1px solid black; +}</pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("Étendre_sur_plusieurs_lignes_ou_colonnes")}}</p> + +<h3 id="Distinguer_en-tête_et_contenu">Distinguer en-tête et contenu</h3> + +<p>On utilise ici l'élément {{HTMLElement("thead")}} et l'élément {{HTMLElement("tbody")}} pour distinguer l'en-tête du tableau et le contenu de celui-ci.</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><table> + <thead> + <tr> + <th rowspan="2">Nom</th> + <th rowspan="2">Identifiant</th> + <th colspan="2">Dates</th> + <th rowspan="2">Solde</th> + </tr> + <tr> + <th>Inscription</th> + <th>Résiliation</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Margaret Nguyen</td> + <td>427311</td> + <td><time datetime="2010-06-03">3 juin 2010</time></td> + <td>n/a</td> + <td>0</td> + </tr> + <tr> + <th scope="row">Edvard Galinski</td> + <td>533175</td> + <td><time datetime="2011-01013">13 janvier 2011</time></td> + <td><time datetime="2017-04008">8 avril 2017</time></td> + <td>37</td> + </tr> + <tr> + <th scope="row">Hoshi Nakamura</td> + <td>601942</td> + <td><time datetime="2012-07-23">23 juillet 2012</time></td> + <td>n/a</td> + <td>15</td> + </tr> + </tbody> +</table></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">table { + border: 1px solid black; +} + +th, td { + border: 1px solid black; +}</pre> + +<h4 id="Résultat_3">Résultat</h4> + +<p>{{EmbedLiveSample("Distinguer_en-tête_et_contenu", 500, 150)}}</p> + +<h3 id="Mise_en_forme_simple">Mise en forme simple</h3> + +<p>Il est possible d'utiliser <a href="/fr/docs/Web/CSS/">CSS</a> afin de modifier l'apparence d'une ligne d'un tableau. Tous les styles appliqués à un élément <code><tr></code> auront un impact sur les cellules de cette ligne (sauf si celles-ci indiquent un style par dessus).</p> + +<p>Modifions ici la police et la couleur d'arrière-plan pour la ligne d'en-tête.</p> + +<h4 id="HTML_4">HTML</h4> + +<pre class="brush: html"><table> + <thead> + <tr> + <th rowspan="2">Nom</th> + <th rowspan="2">ID</th> + <th colspan="2">Dates</th> + <th rowspan="2">Solde</th> + </tr> + <tr> + <th>Inscription</th> + <th>Résiliation</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Margaret Nguyen</td> + <td>427311</td> + <td><time datetime="2010-06-03">3 juin 2010</time></td> + <td>n/a</td> + <td>0</td> + </tr> + <tr> + <th scope="row">Edvard Galinski</td> + <td>533175</td> + <td><time datetime="2011-01013">13 janvier 2011</time></td> + <td><time datetime="2017-04008">8 avril 2017</time></td> + <td>37</td> + </tr> + <tr> + <th scope="row">Hoshi Nakamura</td> + <td>601942</td> + <td><time datetime="2012-07-23">23 juillet 2012</time></td> + <td>n/a</td> + <td>15</td> + </tr> + </tbody> +</table></pre> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css">table { + border: 1px solid black; + font: 16px "Open Sans", Helvetica, Arial, sans-serif; +} + +thead > tr { + background-color: rgb(228, 240, 245); +} + +th, td { + border: 1px solid black; + padding:4px 6px; +} +</pre> + +<p>On utilise ici la propriété {{CSSxRef("font")}} sur l'élément {{HTMLElement("table")}} afin d'avoir une police plus agréable. Ensuite, pour tous les éléments <code><tr></code> qui sont les fils de {{HTMLElement("thead")}} (c'est-à-dire pour les lignes de l'en-tête), on indique une couleur d'arrière-plan bleu clair. Cela se propagera à l'ensemble des cellules de l'en-tête.</p> + +<h4 id="Résultat_4">Résultat</h4> + +<p>{{EmbedLiveSample("Mise_en_forme_simple", 500, 200)}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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>Aucune.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Zéro ou plusieurs éléments {{HTMLElement("td")}} ou {{HTMLElement("th")}}, éventuellement mélangés. Les éléments de script ({{HTMLElement("script")}} et {{HTMLElement("template")}}) sont également utilisés.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>La balise de début est obligatoire. La balise de fin peut être absente si l'élément {{HTMLElement("tr")}} est immédiatement suivi par un élément {{HTMLElement("tr")}} ou si l'élément du groupe parent (({{HTMLElement("thead")}}, {{HTMLElement("tbody")}} ou {{HTMLElement("tfoot")}}) n'a plus d'autre contenu.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Un élément {{HTMLElement("table")}} (uniquement si le tableau ne possède pas d'élément {{HTMLElement("body")}} et uniquement après un élément {{HTMLElement("caption")}}, {{HTMLElement("colgroup")}} ou {{HTMLElement("thead")}}) , {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} ou {{HTMLElement("tfoot")}}.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLTableRowElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </tbody> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','tables.html#the-tr-element','tr element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-tr-element','tr element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("html.elements.tr")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments HTML relatifs aux tableaux : {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}.</li> + <li>Les propriétés et pseudo-classes CSS qui sont particulièrement utiles pour mettre en forme l'élément <code><tr></code> : + <ul> + <li>La pseudo-classe {{cssxref(":nth-child")}} qui permet de définir l'alignement des cellules dans la colonne ou sur une ligne</li> + <li>La propriété {{cssxref("text-align")}} qui permet d'aligner l'ensemble des cellules par rapport au même caractère (comme le point ou la virgule).</li> + </ul> + </li> +</ul> diff --git a/files/fr/web/html/element/track/index.html b/files/fr/web/html/element/track/index.html new file mode 100644 index 0000000000..547aaf905b --- /dev/null +++ b/files/fr/web/html/element/track/index.html @@ -0,0 +1,174 @@ +--- +title: <track> +slug: Web/HTML/Element/track +tags: + - Element + - HTML + - Multimedia + - Reference + - Web +translation_of: Web/HTML/Element/track +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><track></code></strong> est utilisé comme élément fils d'un élément {{HTMLElement("audio")}} ou {{HTMLElement("video")}} et permet de fournir une piste texte pour le média (par exemple afin de gérer automatiquement les sous-titres). Les pistes texte utilisées avec cet élément sont formatées selon <a href="/fr/docs/Web/API/WebVTT_API">le format WebVTT</a> (ce sont des fichiers <code>.vtt</code>) (WebVTT pour <em>Web Video Text Tracks</em>) ou selon <a href="https://w3c.github.io/ttml2/index.html">le format <em>Timed Text Markup Language</em> (TTML)</a>.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/track.html", "tabbed-standard")}}</div> + +<div 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> !</div> + +<h2 id="Attributs">Attributs</h2> + +<p>À l'instar des autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("default")}}</dt> + <dd>Cet attribut booléen indique que c'est cette piste qui doit être activée par défaut, sauf si les réglages de l'utilisateur indiquent qu'une autre piste est plus appropriée. Pour un élément média donné, il ne peut y avoir qu'une seule piste avec cet attribut.</dd> + <dt>{{htmlattrdef("kind")}}</dt> + <dd>La façon dont la piste texte doit être utilisée. La valeur par défaut est <code>subtitles</code> et si la valeur fournie est incorrecte, l'agent utilisateur doit utiliser la valeur <code>metadata</code>. Cet attribut est un attribut à valeur contrainte qui peut prendre l'une des valeurs suivantes : + <ul> + <li><code>subtitles</code> (la valeur par défaut) + <ul> + <li>Les sous-titres fournissent une traduction du contenu lorsqu'il ne peut pas être compris par l'utilisateur. La piste peut, par exemple, contenir le texte espagnol d'un film joué en anglais.</li> + <li>Les sous-titres peuvent fournir du contenu supplémentaires, généralement des informations de contexte (par exemple, le texte qui défile au début d'un film Star Wars, la date ou le lieu d'une scène, etc.).</li> + </ul> + </li> + <li><code>captions</code> + <ul> + <li>La piste est une retransciption voire une traduction de la partie audio du média.</li> + <li>La piste peut contenir des informations non-verbales importantes comme des indications musicales ou des effets sonores. La piste peut également indiquer la source du bruit (musique, personnage, etc.).</li> + <li>Ce type de piste est adapté aux utilisateurs malentendants ou lorsque le son est désactivé.</li> + </ul> + </li> + <li><code>descriptions</code> + <ul> + <li>La piste est une description textuelle du contenu vidéo.</li> + <li>Ce type de piste est adapté aux personnes malvoyantes ou lorsque la vidéo ne peut pas être vue.</li> + </ul> + </li> + <li><code>chapters</code> + <ul> + <li>Les titres de chapitre utilisés lorsque l'utilisateur navigue au sein du média.</li> + </ul> + </li> + <li><code>metadata</code> + <ul> + <li>La piste est utilisé par des scripts, elle n'est pas visible pour l'utilisateur.</li> + </ul> + </li> + </ul> + </dd> + <dt>{{htmlattrdef("label")}}</dt> + <dd>Le titre associé à la piste et qui est affiché par le navigateur lorsque celui-ci liste les pistes disponibles.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>L'adresse du fichier pour la piste (celle du fichier<code>.vtt</code>). Cet attribut doit être une URL valide et doit nécessairement être présent dans l'élément. L'URL indiquée doit avoir la même origine à moins que l'élément parent {{HTMLElement("audio")}} ou {{HTMLElement("video")}} de l'élément <code><track></code> possède un attribut <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS">crossorigin</a>.</dd> + <dt>{{htmlattrdef("srclang")}}</dt> + <dd>La langue dans laquelle est exprimée la piste textuelle. La valeur de cet attribut doit être une balise de langue <a href="https://r12a.github.io/app-subtags/">BCP 47</a>. Si l'attribut <code>kind</code> vaut <code>subtitles,</code> l'attribut <code>srclang</code> doit obligatoirement être défini.</dd> +</dl> + +<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> + +<h3 id="Types_de_piste">Types de piste</h3> + +<p>Le type de donnéefournit par un élément <code>track</code> est décrit par l'attribut <code>kind</code>. Cet attribut peut prendre une valeur parmi <code>subtitles</code>, <code>captions</code>, <code>descriptions</code>, <code>chapters</code> ou <code>metadata</code>. L'élément pointe vers un fichier source qui contient du texte avec des annotations temporelles que le navigateur affichera lorsque l'utilisateur en aura besoin.</p> + +<p>Un élément média ({{HTMLElement("audio")}} ou {{HTMLElement("video")}}) ne peut pas avoir plusieurs pistes partageant les mêmes valeurs pour les attributs <code>kind</code>, <code>srclang</code> et <code>label</code>.</p> + +<h3 id="Détecter_le_changement_de_texte">Détecter le changement de texte</h3> + +<p>{{page("/fr/docs/Web/API/TextTrack/cuechange_event", "On the track element")}}</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><video controls poster="/images/sample.gif"> + <source src="sample.mp4" type="video/mp4"> + <source src="sample.ogv" type="video/ogv"> + <track kind="captions" src="sampleCaptions.vtt" srclang="en"> + <track kind="descriptions" + src="sampleDescriptions.vtt" srclang="en"> + <track kind="chapters" src="chapitres.vtt" srclang="en"> + <track kind="subtitles" src="soustitres_de.vtt" srclang="de"> + <track kind="subtitles" src="soustitres_en.vtt" srclang="en"> + <track kind="subtitles" src="soustitres_ja.vtt" srclang="ja"> + <track kind="subtitles" src="soustitres_oz.vtt" srclang="oz"> + <track kind="metadata" src="keyStage1.vtt" srclang="en" + label="Key Stage 1"> + <track kind="metadata" src="keyStage2.vtt" srclang="en" + label="Key Stage 2"> + <track kind="metadata" src="keyStage3.vtt" srclang="en" + label="Key Stage 3"> + <!-- Contenu alternatif pour les navigateurs qui + ne prennent pas en charge video --> + ... +</video> +</pre> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu">Catégories de contenu</a></th> + <td>Aucune</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Aucun, cet élément est un élément vide.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>Étant un élément vide, la balise de début doit être présente et il ne doit pas y avoir de balise de fin.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Un élément média avant tout autre <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>Aucune.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLTrackElement")}}</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','embedded-content.html#the-track-element','track element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "embedded-content-0.html#the-track-element", "track element")}}</td> + <td>{{Spec2("HTML5 W3C")}}</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.track")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/API/WebVTT_API">Le format WebVTT</a></li> + <li>{{domxref("HTMLMediaElement.textTracks")}}</li> +</ul> diff --git a/files/fr/web/html/element/tt/index.html b/files/fr/web/html/element/tt/index.html new file mode 100644 index 0000000000..3e879d96c0 --- /dev/null +++ b/files/fr/web/html/element/tt/index.html @@ -0,0 +1,151 @@ +--- +title: '<tt> : l''élément de texte de téléscripteur (obsolète)' +slug: Web/HTML/Element/tt +tags: + - Element + - HTML + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/tt +--- +<div>{{obsolete_header}}{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><tt></code></strong> (pour <em>Teletype Text</em>) crée un élément en ligne, écrit dans la police à chasse fixe par défaut du navigateur. Cet élément a été conçu pour mettre en forme du texte comme s'il apparaissait sur un affichage à largeur fixe tel qu'un téléscripteur.</p> + +<p>Cet élément est désormais obsolète et un élément {{HTMLElement("code")}}, {{HTMLElement("kbd")}}, {{HTMLElement("samp")}} ou {{HTMLElement("var")}} pourra être utilisé à la place s'il faut afficher du texte en incise avec une police à chasse fixe. On pourra utiliser l'élément {{HTMLElement("pre")}} pour afficher un bloc de contenu préformaté (également généralement affiché dans une police à chasse fixe).</p> + +<div class="note"><strong>Note :</strong> Si aucun de ces éléments ne correspond à la sémantique portée par votre contenu (lorsque, par exemple, il ne s'agit que d'un effet de mise en forme), vous pouvez utiliser un élément {{HTMLElement("span")}} mis en forme avec CSS (par exemple la propriété {{cssxref("font-family")}}).</div> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_simple">Exemple simple</h3> + +<p>Cet exemple utilise <code><tt></code> afin d'afficher le texte affiché et saisi dans un terminal.</p> + +<pre class="brush:html"><p> + Veuillez saisir la commande telnet suivante : + <code>set localecho</code><br /> + Le client telnet devrait alors afficher : + <tt>Local Echo is on</tt> +</p> +</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Exemple_simple", 650, 80)}}</p> + +<h3 id="Surcharger_la_police_par_défaut">Surcharger la police par défaut</h3> + +<p>Il est possible de surcharger la police par défaut utilisée pour cet élément grâce à CSS :</p> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">tt { + font-family: "Lucida Console", "Menlo", "Monaco", "Courier", + monospace; +}</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush:html"><p> + Veuillez saisir la commande telnet suivante : + <code>set localecho</code><br /> + Le client telnet devrait alors afficher : + <tt>Local Echo is on</tt> +</p> +</pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("Surcharger_la_police_par_défaut", 650, 80)}}</p> + +<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> + +<p>Par défaut, le contenu de l'élément <code><tt></code> est affiché avec la police à chasse fixe par défaut du navigateur. Comme vu dans l'exemple précédent, il est possible de surcharger cette police.</p> + +<div class="note"> +<p><strong>Note :</strong> Les règles de style propres à l'utilisateur sont prioritaires par rapport aux feuilles de style d'un site ou d'une application web.</p> +</div> + +<p>Bien que cet élément n'ait pas été officiellement déprécié en HTML 4.01, son utilisation a été déconseillée pour privilégier d'autres éléments HTML ou une mise en forme via CSS. L'élément <code><tt></code> est désormais obsolète en HTML5.</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</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_phras.C3.A9">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</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', 'obsolete.html#tt', '<tt>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'obsolete.html#elementdef-tt', '<tt>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<tt>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.tt")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("code")}}</li> + <li>{{HTMLElement("var")}}</li> + <li>{{HTMLElement("kbd")}}</li> + <li>{{HTMLElement("samp")}}</li> + <li>{{HTMLElement("pre")}}</li> +</ul> diff --git a/files/fr/web/html/element/u/index.html b/files/fr/web/html/element/u/index.html new file mode 100644 index 0000000000..4dac829322 --- /dev/null +++ b/files/fr/web/html/element/u/index.html @@ -0,0 +1,206 @@ +--- +title: '<u> : l''élément d''annotation non textuelle' +slug: Web/HTML/Element/u +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/u +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><u></code></strong> permet d'afficher un fragment de texte qui est annoté avec des éléments non textuels. Par défaut, le contenu de l'élément est souligné. Cela pourra par exemple être le cas pour marquer un texte comme étant un nom propre chinois, ou pour marquer un texte qui a été mal orthographié.</p> + +<div class="warning"> +<p><strong>Attention !</strong> Cet élément était auparavant appelé <em>underline</em> pour les anciennes versions des spécifications HTML. Si on souhaite simplement souligner du texte, il ne faudra pas utiliser cet élément mais la propriété CSS {{cssxref("text-decoration")}} avec la valeur <code>"underline"</code>.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/tabbed/u.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> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> + +<p>Étant seulement un élément de mise en forme, l'élément {{HTMLElement("u")}} a été déprécié en HTML 4 et XHTML 1. Il a été ré-introduit en HTML5 avec une autre signification : le contenu de l'élément est annoté avec une annotation non-textuelle.</p> + +<p>La spécification rappelle que dans la majorité des cas, d'autres éléments que <code><u></code> doivent être utilisés.</p> + +<div class="note"> +<p><strong>Note :</strong> Attention à la mise en forme par défaut d'un élément <code><u></code> qui le souligne. Cela peut être source de confusion entre un tel texte et un lien hypertexte (également souligné par défaut).</p> +</div> + +<h3 id="Cas_d'utilisation">Cas d'utilisation</h3> + +<p>L'élément <code><u></code> peut être utilisé afin d'indiquer des erreurs d'orthographe ou de grammaire, afin d'indiquer des noms propres au sein d'un texte écrit en chinois ou afin d'annoter un texte de façon visuelle.</p> + +<p>L'élément <code><u></code> ne doit pas être utilisé afin de simplement souligner un texte ou afin d'indiquer le titre d'une œuvre.</p> + +<h3 id="Autres_éléments_pouvant_être_utilisés">Autres éléments pouvant être utilisés</h3> + +<p>Dans la plupart des cas, il faudra utiliser un autre élément que <code><u></code> :</p> + +<ul> + <li>{{HTMLElement("em")}} afin d'indiquer une emphase</li> + <li>{{HTMLElement("b")}} afin d'indiquer une attention particulière</li> + <li>{{HTMLElement("mark")}} afin de marquer certains mots-clés ou phrases</li> + <li>{{HTMLElement("strong")}} afin d'indiquer que le texte a une importance particulière</li> + <li>{{HTMLElement("cite")}} afin d'indiquer le titre d'une œuvre ou d'une publication</li> + <li>{{HTMLElement("i")}} afin d'indiquer un terme technique, des noms de navires, des pensées ou des translitérations au sein d'un texte occidental.</li> +</ul> + +<p>Afin de fournir une annotation textuelle, on pourra utiliser l'élément {{HTMLElement("ruby")}}.</p> + +<p>Afin de modifier la mise en forme, sans apporter de modification sémantique, on utilisera la propriété {{cssxref("text-decoration")}} avec la valeur <code>"underline"</code>.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Indiquer_une_erreur">Indiquer une erreur</h3> + +<p>Dans cet exemple, on utilise <code><u></code> et des règles CSS pour afficher un paragraphe qui contient une coquille. L'erreur est indiquée avec une ligne ondulée rouge sous le texte.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p> + Ce paragraphe contient un mot mal + <u class="spelling">rothografié</u>. +</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">u.spelling { + text-decoration: red wavy underline; +}</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Indiquer_une_erreur", 650, 80)}}</p> + +<h3 id="Éviter_<u>">Éviter <code><u></code></h3> + +<p>La plupart du temps, ce n'est pas l'élément <code><u></code> qu'il faut utiliser. Voici quelques exemples de ces cas et les méthodes à privilégier.</p> + +<h4 id="Souligner_pour_la_simple_mise_en_forme">Souligner pour la simple mise en forme</h4> + +<p>Pour souligner du texte sans que cela ait une quelconque portée sémantique, on utilisera un élément {{HTMLElement("span")}} qu'on mettra en forme avec la propriété CSS {{cssxref("text-decoration")}} et la valeur <code>"underline"</code> :</p> + +<h5 id="HTML_2">HTML</h5> + +<pre class="brush: html"><span class="underline">Le plat du jour</span> +<br> +Soupe de potiron avec un soupçon de noix de muscade</pre> + +<h5 id="CSS_2">CSS</h5> + +<pre class="brush: css">.underline { + text-decoration: underline; +}</pre> + +<h5 id="Résultat_2">Résultat</h5> + +<p>{{EmbedLiveSample("Souligner_pour_la_simple_mise_en_forme", 650, 80)}}</p> + +<h4 id="Indiquer_le_titre_pour_un_livre">Indiquer le titre pour un livre</h4> + +<div id="example-unstyled-cite"> +<p>Les titres de livres doivent être indiqués avec un élément {{HTMLElement("cite")}} et non avec <code><u></code> ou <code><i></code>.</p> + +<h5 id="HTML_3">HTML</h5> + +<pre class="brush: html"><p> + Nous avons lu <cite>La Horde du Contrevent</cite> + au cours du premier trimestre. +</p></pre> + +<h5 id="Résultat_avec_la_mise_en_forme_par_défaut">Résultat avec la mise en forme par défaut</h5> + +<p>{{EmbedLiveSample("example-unstyled-cite", 650, 80)}}</p> +</div> + +<p>On notera que, par défaut, un élément <code><cite></code> est affiché en italique. Ceci peut être modifié grâce à CSS :</p> + +<pre class="brush: css">cite { + font-style: normal; + text-decoration: underline; +}</pre> + +<h5 id="Résultat_3">Résultat</h5> + +<p>{{EmbedLiveSample("Indiquer_le_titre_pour_un_livre", 650, 80)}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</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_phras.C3.A9">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</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', 'semantics.html#the-u-element', '<u>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-u-element', '<u>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.u")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les éléments {{HTMLElement("span")}}, {{HTMLElement("i")}}, {{HTMLElement("em")}}, {{HTMLElement("b")}} et {{HTMLElement("cite")}} qui, selon les cas, peuvent être utilisés à la place de <code><u></code>.</li> + <li>La propriété CSS {{cssxref("text-decoration")}} qui permet d'obtenir un effet stylistique semblable à la mise en forme par défaut d'un élément <code><u></code>.</li> +</ul> diff --git a/files/fr/web/html/element/ul/index.html b/files/fr/web/html/element/ul/index.html new file mode 100644 index 0000000000..f44c66895e --- /dev/null +++ b/files/fr/web/html/element/ul/index.html @@ -0,0 +1,195 @@ +--- +title: <ul> +slug: Web/HTML/Element/ul +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/ul +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><ul></code></strong> représente une liste d'éléments sans ordre particulier. Il est souvent représenté par une liste à puces.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/ul.html", "tabbed-standard")}}</div> + +<div 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> !</div> + +<h2 id="Attributs">Attributs</h2> + +<p>À l'instar des différents éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3> + +<dl> + <dt>{{htmlattrdef("compact")}}{{Deprecated_inline}}</dt> + <dd>Cet attribut booléen fournit une indication pour afficher la liste en mode compact. L'interprétation de cet attribut est laissée à la discrétion de l'agent utilisateur et ne fonctionne pas pour tous les navigateurs. + <div class="warning"><strong>Attention !</strong>Cet attribut a été déprécié et ne doit pas être utilisé. Pour obtenir le même effet, on pourra utiliser la propriété {{cssxref("line-height")}} avec la valeur <code>80%</code> pour l'élément <code><ul></code>.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("type")}}{{Deprecated_inline}}</dt> + <dd>Cet attribut permet de définir le style de puce utilisé pour la liste. Les valeurs définies au sein des spécifications pour HTML3.2 et HTML 4.0/4.01 sont : + <ul> + <li><code>circle</code>,</li> + <li><code>disc</code>,</li> + <li>and <code>square</code>.</li> + </ul> + + <p>Un quatrième type a été défini dans l'interface WebTV : <code>triangle</code> mais tous les navigateurs ne l'implémentent pas.</p> + + <div class="warning"><strong>Attention !</strong>Cet attribut a été déprécié et ne doit pas être utilisé. Pour obtenir le même effet, on pourra utiliser la propriété CSS {{cssxref("list-style-type")}} à la place.</div> + </dd> +</dl> + +<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> + +<ul> + <li>L'élément <code><ul></code> doit être utilisé pour regrouper plusieurs éléments qui n'ont pas de relation d'ordre. Si on hésite entre {{HTMLElement("ol")}} et {{HTMLElement("ul")}}, on se demandera si changer l'ordre des éléments de la liste a un impact : si le déplacement d'un élément change la signification, cela signifie que l'ordre est important et qu'il faudra utiliser {{HTMLElement("ol")}}, sinon l'ordre n'importe pas et {{HTMLElement("ul")}} peut être utilisé.</li> + <li>La propriété CSS {{cssxref("list-style-type")}} est utile pour choisir le type de puce utilisé.</li> + <li>Il n'y a pas de limite pour l'imbrication des listes avec les éléments {{HTMLElement("ol")}} et {{HTMLElement("ul")}}.</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_simple">Exemple simple</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><ul> + <li>1 artichaut</li> + <li>De l'essuie-tout</li> + <li>200g de chocolat</li> +</ul> +</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Exemple_simple","100%","150")}}</p> + +<h3 id="Liste_imbriquée">Liste imbriquée</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><ul> + <li>1 artichaut</li> + <li>Les trucs pour le gateau + <!-- On voit que </li> n'est pas là --> + <ul> + <li>3 oeufs</li> + <li>La génoise + <!-- Là on ouvre une autre liste --> + <ul> + <li>100g de sucre</li> + <li>1 oeuf</li> + <li>150g de farine</li> + </ul> + </li> <!-- On ferme la liste la plus imbriquée --> + <li>200g de chocolat</li> + </ul> + <!-- On ferme la liste imbriquée avec </li> --> + </li> + <li>De l'essuie-tout</li> +</ul></pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("Liste_imbriquée","100%","230")}}</p> + +<h3 id="<ul>_et_<ol>_imbriqués"><code><ul></code> et <code><ol></code> imbriqués</h3> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><ul> + <li>Lire un livre</li> + <li>Préparer une soupe + <ol> + <li>Couper les légumes</li> + <li>Mettre dans l'eau et cuire</li> + <li>Mouliner</li> + </ol> + </li> + <li>Relever le courrier</li> +</ul> +</pre> + +<h4 id="Résultat_3">Résultat</h4> + +<p>{{EmbedLiveSample("<ul>_et_<ol>_imbriqués","100%","180")}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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>, et du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a> si les enfants de l'élément <code><ul></code> incluent au moins un élément {{HTMLElement("li")}}. <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">Contenu tangible.</a></td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Zéro ou plusieurs éléments {{HTMLElement("li")}} qui peuvent éventuellement contenir à leur tour des éléments {{HTMLElement("ol")}} ou {{HTMLElement("ul")}} (listes imbriquées).</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("directory")}}, {{ARIARole("group")}}, {{ARIARole("listbox")}}, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}}, {{ARIARole("tree")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLUListElement")}}</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', 'semantics.html#the-ul-element', '<ul>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-ul-element', '<ul>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("html.elements.ul")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les autres éléments HTML relatifs aux listes : {{HTMLElement("ol")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}} (et l'élément obsolète {{HTMLElement("dir")}}).</li> + <li>Les propriétés CSS particulièrement utiles pour mettre en forme l'élément <code><ul></code> : + <ul> + <li>La propriété {{cssxref("list-style")}} qui permet de choisir la façon dont l'indicateur ordinal est affiché,</li> + <li><a href="/fr/docs/Web/CSS/Compteurs_CSS">Les compteurs CSS</a>, qui permettent de gérer des listes imbriquées complexes,</li> + <li>La propriété {{cssxref("line-height")}} qui permet de simuler l'attribut {{htmlattrxref("compact", "ul")}} désormais déprécié,</li> + <li>La propriété {{cssxref("margin")}} peut être utilisée pour contrôler l'indentation de la liste.</li> + </ul> + </li> +</ul> diff --git a/files/fr/web/html/element/var/index.html b/files/fr/web/html/element/var/index.html new file mode 100644 index 0000000000..f24dd65366 --- /dev/null +++ b/files/fr/web/html/element/var/index.html @@ -0,0 +1,140 @@ +--- +title: '<var> : l''élément de variable' +slug: Web/HTML/Element/var +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/var +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><var></code></strong> représente une variable dans une expression mathématique ou un texte lié à la programmation. Son contenu est généralement représenté avec une version italique de la police environnante utilisée, toutefois, ce comportement peut dépendre du navigateur utilisé.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/var.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> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> + +<h3 id="Éléments_associés">Éléments associés</h3> + +<p>Voici d'autres éléments qui sont fréquemment utilisés dans les contextes où <code><var></code> est utilisé :</p> + +<ul> + <li>{{HTMLElement("code")}}</li> + <li>{{HTMLElement("kbd")}}</li> + <li>{{HTMLElement("samp")}}</li> +</ul> + +<p>Si vous trouvez un élément <code><var></code> utilisé uniquement pour la mise en forme, il est préférable de remplacer celui-ci par un élément {{HTMLElement("span")}} auquel on appliquera les règles CSS souhaitées.</p> + +<h3 id="Mise_en_forme_par_défaut">Mise en forme par défaut</h3> + +<p>La plupart des navigateurs appliquent la propriété {{cssxref("font-style")}} avec la valeur <code>"italic"</code> lors de l'affichage d'un élément <code><var></code>. Ce comportement peut être surchargé par la feuille de style CSS du site :</p> + +<pre class="brush: css">var { + font: bold 15px "Courier", "Courier New", monospace; +}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_simple">Exemple simple</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush:html"><p> + Une équation simple : + <var>x</var> = <var>y</var> + 2 +</p> +</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Exemple_simple","650","80")}}</p> + +<h3 id="Surcharger_la_mise_en_forme_par_défaut">Surcharger la mise en forme par défaut</h3> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">var { + font: bold 15px "Courier", "Courier New", monospace; +}</pre> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p> + Les variables <var>minSpeed</var> et <var>maxSpeed</var> contrôlent les + vitesses minimale et maximale de l'appareil et sont exprimées en tours + par minute. +</p></pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("Surcharger_la_mise_en_forme_par_défaut","650","120")}}</p> + +<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é">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">Contenu phrasé</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_phrasé">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</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', 'text-level-semantics.html#the-var-element', '<var>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-var-element', '<var>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.var")}}</p> diff --git a/files/fr/web/html/element/video/index.html b/files/fr/web/html/element/video/index.html new file mode 100644 index 0000000000..0b4e77d045 --- /dev/null +++ b/files/fr/web/html/element/video/index.html @@ -0,0 +1,411 @@ +--- +title: <video> +slug: Web/HTML/Element/video +tags: + - Element + - HTML + - Media + - Multimedia + - Reference + - Video + - Web +translation_of: Web/HTML/Element/video +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><video></code></strong> intègre un contenu vidéo dans un document.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/video.html", "tabbed-standard")}}</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> + +<p>L'exemple précédent illustre comment utiliser l'élément <code><video></code> simplement, à la façon d'un élément {{htmlelement("img")}}. Le chemin vers le média à afficher est fourni via l'attribut <code>src</code> et on peut inclure d'autres attributs afin de spécifier la largeur et la hauteur, la lecture automatique et/ou en boucle, les contrôles affichés, etc.</p> + +<p>Le contenu fourni entre les balises <code><video></video></code> est affiché comme contenu alternatif par les navigateurs qui ne prennent pas en charge l'élément.</p> + +<p>Les navigateurs ne prennent pas en charge <a href="/fr/docs/Web/HTML/Formats_pour_audio_video">l'ensemble des formats vidéo</a> et il est possible de fournir plusieurs sources grâce à des éléments {{htmlelement("source")}}, le navigateur utilisera la première ressource dont il connaît le format :</p> + +<pre class="brush: html"><video controls> + <source src="maVideo.mp4" type="video/mp4"> + <source src="maVideo.webm" type="video/webm"> + <p>Votre navigateur ne prend pas en charge les vidéos HTML5. + Voici <a href="myVideo.mp4">un lien pour télécharger la vidéo</a>.</p> +</video></pre> + +<p>Quelques notes d'utilisation :</p> + +<ul> + <li>Si l'attribut <code>controls</code> n'est pas indiqué, la vidéo n'incluera pas les contrôles par défaut du navigateurs et il est nécessaire de fournir ses propres contrôles en utilisant JavaScript et l'API {{domxref("HTMLMediaElement")}} API. Voir l'article <a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">créer un lecteur vidéo multi-navigateurs</a> pour plus de détails.</li> + <li>L'API <code>HTMLMediaElement</code> déclenche de nombreux <a href="/fr/docs/Web/Guide/DOM/Events/evenement_medias">évènements</a> qui permettent d'avoir un contrôle précis sur l'audio et la vidéo.</li> + <li>La propriété {{cssxref("object-position")}} permet d'ajuster la position de la vidéo dans le cadre du lecteur et la propriété {{cssxref("object-fit")}} permet de contrôler l'ajustement de la taille de la vidéo dans le cadre.</li> + <li>Afin de fournir des sous-titres et légendes à la vidéo, on peut utiliser du code JavaScript ainsi que des éléments {{htmlelement("track")}} au format <a href="/fr/docs/Web/API/WebVTT_API">WebVTT</a>. Voir l'article <a href="/fr/docs/Web/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Ajouter des sous-titres et légendes à une vidéo HTML5</a> pour plus d'informations.</li> +</ul> + +<p>Pour apprendre les bases concernant <code><video></code>, nosu vous conseillons de consulter <a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">le tutoriel sur le contenu audio et video</a>.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>À l'instar des autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<dl> + <dt>{{htmlattrdef("autoplay")}}</dt> + <dd>Un attribut booléen qui indique que la vidéo doit automatiquement être lancée dès qu'elle peut être jouée sans être arrêtée par le chargement des données.</dd> + <dd> + <p class="note"><strong>Note :</strong> la lecture automatique peut être source de nuisance pour les utilisateurs. Mieux vaut l'éviter lorsque c'est possible ou proposer à l'utilisateur de choisir cette option. Cette valeur peut être utile lors de la création de vidéos dont la source sera définie <em>a posteriori</em>.</p> + + <p class="note"><strong>Note :</strong> Cet attribut est un attribut booléen et indiquer <code>autoplay="false"</code> ne suffira pas à retirer la lecture automatique. Pour ce faire, il faut complètement retirer l'attribut.</p> + + <p class="note"><strong>Note :</strong> Pour certains navigateurs (ex. Chrome 70), l'attribut <code>autoplay</code> ne fonctionne pas si aucun attribut <code>mute</code>n'est présent.</p> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("buffered")}}</dt> + <dd>Un attribut qui peut être lu afin de déterminer l'intervalle temporel mis en mémoire tampon. Cet attribut contient un objet {{domxref("TimeRanges")}}.</dd> + <dt>{{htmlattrdef("controls")}}</dt> + <dd>Si cet attribut est présent, le navigateur affichera des contrôles pour permettre à l'utilisateur de contrôler la lecture de la vidéo, le volume et la mise sur pause.</dd> + <dt>{{htmlattrdef("controlslist")}} {{experimental_inline}}</dt> + <dd>L'attribut <code>controlslist</code>, lorsqu'il est indiqué, aide le navigateur à choisir les contrôles à afficher pour la manipulation du média lorsque l'attribut <code>controls</code> est utilisé.</dd> + <dd>Les valeurs autorisées pour cet attribut sont <code>nodownload</code>, <code>nofullscreen</code> et <code>noremoteplayback</code>.<br> + On utilisera l'attribut <code>disablePictureInPicture</code> afin de désactiver ce mode et les contrôles associés.</dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>Cet attribut à valeur contrainte permet d'indiquer si le CORS doit être utilisé pour récupérer la vidéo. <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP">Les ressources avec le CORS activé</a> peuvent être réutilisées dans un élément {{HTMLElement("canvas")}} sans le <em>corrompre</em>. Les valeurs autorisées sont : + <ul> + <li><code>anonymous</code> : une requête <em>cross-origine</em> est envoyée sans information d'authentification. Autrement dit, un en-tête HTTP {{HTTPHeader("Origin")}} est envoyé, sans cookie, certificat X.509 ou sans authentification HTTP simple. Si le serveur ne fournit pas d'informations d'authentification au site d'origine (c'est-à-dire en n'envoyant pas l'en-tête HTTP {{HTTPHeader("Access-Control-Allow-Origin")}}), la vidéo sera corrompue et son utilisation sera restreinte.</li> + <li><code>use-credentials</code> : une requête <em>cross-origine</em> est envoyée avec une information d'authentification. Autrement dit, un en-tête HTTP <code>Header</code> est envoyé, avec un cookie, une certification ou une authentification HTTP simple. Si le serveur ne fournit pas d'informations d'authentification au site d'origine (c'est-à-dire en n'envoyant pas l'en-tête HTTP {{HTTPHeader("Access-Control-Allow-Origin")}}), la vidéo sera corrompue et son utilisation sera restreinte.</li> + </ul> + Lorsque cet attribut n'est pas présent, la ressource est récupérée sans requête CORS (l'en-tête HTTP {{HTTPHeader("Origin")}}) n'est pas envoyé) et elle ne peut pas être utilisée dans un élément {{HTMLElement('canvas')}}. Si la valeur est invalide, elle sera gérée comme si le mot-clé <code>anonymous</code> était utilisé. Pour plus d'informations, consulter l'article sur <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS">les attributs de paramétrage du CORS</a>.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>La hauteur de la zone où afficher la vidéo, exprimée en pixels CSS (en valeur absolue uniquement).</dd> + <dt>{{htmlattrdef("intrinsicsize")}} {{experimental_inline}}</dt> + <dd>Cet attribut indique au navigateur d'ignorer la taille intrinsèque de la vidéo et de la dimensionner avec la taille définie par cet attribut. La vidéo aura les dimensions indiquées et le rapport <code>naturalWidth</code>/<code>naturalHeight</code> renverra les valeurs fournies par cet attribut. <a href="https://github.com/ojanvafai/intrinsicsize-attribute">Explications</a>, <a href="https://googlechrome.github.io/samples/intrinsic-size/index.html">exemples</a></dd> + <dt>{{htmlattrdef("loop")}}</dt> + <dd>Un attribut booléen, qui, lorsqu'il est présent, indique que la vidéo doit être jouée en boucle.</dd> + <dt>{{htmlattrdef("muted")}}</dt> + <dd>Un attribut booléen qui indique s'il faut couper le son contenu dans la vidéo. Si cet attribut est utilisé, le son sera coupé au lancement de la vidéo. Par défaut, quand l'attribut est absent, le son sera utilisé lors de la lecture de la vidéo.</dd> + <dt><code><a href="https://wicg.github.io/picture-in-picture/#disable-pip">disablePictureInPicture</a></code> {{experimental_inline}}</dt> + <dd>Empêche le navigateur de suggérer un menu contextuel pour la superposition d'une image/vidéo ("<em>Picture-in-picture</em>") ou de demander l'activation automatique pour la superposition du média.</dd> + <dt>{{htmlattrdef("playsinline")}}</dt> + <dd>Un attribut booléen qui indique que la vidéo doit être jouée en incise, c'est-à-dire au sein de la zone de lecture de l'élément. À noter : l'absence de cet attribut n'implique pas que la vidéo sera lancée en plein écran.</dd> + <dt>{{htmlattrdef("preload")}}</dt> + <dd>Cet attribut à valeur contrainte est une indication destinée au navigateur sur la meilleure façon de charger la vidéo (selon l'auteur de la page). Il peut prendre l'une des valeurs suivantes : + <ul> + <li><code>none</code> : la vidéo ne doit pas être préchargée.</li> + <li><code>metadata</code> : seules les métadonnées de la vidéo (sa durée par exemple) sont récupérées.</li> + <li><code>auto</code> : le fichier entier peut être téléchargé, même si l'utilisateur ne s'en sert pas.</li> + <li>la chaîne de caractères vide (<code>""</code>) : synonyme de la valeur <code>auto</code>.</li> + </ul> + + <p>La valeur par défaut peut être différente selon le navigateur. La spécification conseille d'utiliser la valeur <code>metadata</code>.</p> + + <div class="note"><strong>Notes d'utilisation :</strong> + + <ul> + <li>L'attribut <code>autoplay</code> a la priorité sur <code>preload</code>. Si <code>autoplay</code> est défini, le navigateur doit nécessairement télécharger la vidéo pour la lancer.</li> + <li>Cet attribut est simplement une indication, la spécification ne force pas le navigateur à respecter la valeur de cet attribut.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("poster")}}</dt> + <dd>Une URL qui contient une vignette à afficher tant que la vidéo est en cours de téléchargement. Si cet attribut n'est pas utilisé, rien n'est affiché jusqu'à ce que la première image de la vidéo soit disponible, ensuite, c'est cette image qui est affichée comme vignette sur la vidéo.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>L'URL de la vidéo à intégrer. Cet attribut est optionnel, l'élément {{HTMLElement("source")}} peut également être utilisé dans l'élément <code><video></code> afin d'indiquer la vidéo à intégrer.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>La largeur de la zone où afficher la vidéo, exprimée en pixels CSS (en valeur absolue uniquement).</dd> +</dl> + +<h2 id="Évènements">Évènements</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Nom</th> + <th scope="col">Condition de déclenchement</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{domxref("ScriptProcessorNode.audioprocess_event","audioprocess")}}{{Deprecated_Inline}}</td> + <td>La mémoire tampon en entrée d'un {{DOMxRef("ScriptProcessorNode")}} peut désormais être traité.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.canplay_event", 'canplay')}}</td> + <td>Le navigateur peut lire le média mais estime que trop peu de données ont été chargées pour lire le média jusqu'à sa fin (il faudra vraisemblablement un arrêt pour un chargement en mémoire tampon).</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.canplaythrough_event", 'canplaythrough')}}</td> + <td>Le navigateur estime qu'il peut lire le média jusqu'à sa fin, sans avoir à interrompre la lecture par du chargement en mémoire tampon.</td> + </tr> + <tr> + <td>{{domxref("OfflineAudioContext.complete_event", "complete")}}</td> + <td>Le rendu d'un {{DOMxRef("OfflineAudioContext")}} est terminé.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.durationchange_event", 'durationchange')}}</td> + <td>L'attribut <code>duration</code> a été mis à jour.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.emptied_event", 'emptied')}}</td> + <td>Le média est devenu vide. Cela peut par exemple se produire lorsque le média a déjà été (partiellement ou complètement) chargé et que la méthode <a href="/fr/docs/Web/API/HTMLMediaElement/load" rel="internal"><code>load()</code></a> est invoquée pour le recharger.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.ended_event", 'ended')}}</td> + <td>La lecture a été interrompue car la fin du média est atteinte.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.loadeddata_event", 'loadeddata')}}</td> + <td>La première <em>frame</em> du média a été chargée.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.loadedmetadata_event", 'loadedmetadata')}}</td> + <td>Les métadonnées ont été chargées.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.pause_event", 'pause')}}</td> + <td>La lecture a été mise en pause.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.play_event", 'play')}}</td> + <td>La lecture a démarré.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.playing_event", 'playing ')}}</td> + <td>La lecture est prête à être lancée après avoir été mise en pause ou interrompue pour un chargement en mémoire de données.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.progress_event", 'progress')}}</td> + <td>Évènement déclenché périodiquement lorsque le navigateur charge une ressource.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.ratechange_event", 'ratechange')}}</td> + <td>La vitesse de lecture a changé.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.seeked_event", 'seeked')}}</td> + <td>Une opération de déplacement du curseur de lecture (<em>seek</em>) est terminée.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.seeking_event", 'seeking')}}</td> + <td>L'agent utilisateur tente de récupérer les données associées au média mais les données ne parviennent pas.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.stalled_event", 'stalled')}}</td> + <td>L'agent utilisateur tente de récupérer les données associées au média mais les données ne parviennent pas.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.suspend_event", 'suspend')}}</td> + <td>Le chargement des données du média ont été suspendues.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.timeupdate_event", 'timeupdate')}}</td> + <td>Le temps décrit par l'attribut <code>currentTime</code> a été mis à jour.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.volumechange_event", 'volumechange')}}</td> + <td>Le volume a été modifié.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.waiting_event", 'waiting')}}</td> + <td>La lecture a été interrompue en raison d'un manque temporaire de données.</td> + </tr> + </tbody> +</table> + +<h2 id="Notes_dutilisation">Notes d'utilisation</h2> + +<h3 id="Mise_en_forme_avec_CSS">Mise en forme avec CSS</h3> + +<p>L'élément <code><video></code> est un élément remplacé et, pour cet élément, la valeur initiale de {{cssxref("display")}} est <code>inline</code> mais la hauteur et la largeur du cadre sont définies par les caractéristiques de la vidéo embarquée.</p> + +<p>On peut changer la valeur de <code>display</code> en <code>block</code> afin de simplifier le positionnement et le dimensionnement. L'article <a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Bases de la mise en forme d'un lecteur vidéo</a> fournit différentes techniques de mise en forme.</p> + +<h3 id="Détecter_lajout_et_la_suppression_de_pistes">Détecter l'ajout et la suppression de pistes</h3> + +<p>Il est possible de détecter l'ajout et la suppression de pistes d'un élément <code><video></code> grâce aux évènements {{event("addtrack")}} et {{event("removetrack")}}. Toutefois, ces évènements ne sont pas déclenchés à même l'élément <code><video></code> mais sur l'objet représentant la liste des pistes associées à l'élément <code><video></code> grâce à l'objet {{domxref("HTMLMediaElement")}} qui possède un type différent selon le type de piste manipulé :</p> + +<dl> + <dt>{{domxref("HTMLMediaElement.audioTracks")}}</dt> + <dd>Un objet {{domxref("AudioTrackList")}} qui contient l'ensemble des pistes audio associées au média. Il est possible d'ajouter un écouteur sur l'évènement <code>addtrack</code> sur cet objet afin d'être alerté lorsque de nouvelles pistes audio sont ajoutées à l'élément.</dd> + <dt>{{domxref("HTMLMediaElement.videoTracks")}}</dt> + <dd>On peut ajouter un écouteur d'évènement <code>addtrack</code> à cet objet {{domxref("VideoTrackList")}} afin d'être alerté lorsque des pistes vidéos sont ajoutées à l'élément.</dd> + <dt>{{domxref("HTMLMediaElement.textTracks")}}</dt> + <dd>On peut ajouter un écouteur d'évènement <code>addtrack</code> à cet objet {{domxref("TextTrackList")}} afin d'être alerté lorsque des pistes textuelles sont ajoutées à l'élément.</dd> +</dl> + +<p>Le fragment de code qui suit, par exemple, permettra d'appeler une fonction donnée lorsque des pistes audio sont ajoutées ou supprimées d'un élément <code><video></code> :</p> + +<pre class="brush: js">var elem = document.querySelector("video"); + +elem.audioTrackList.onaddtrack = function(event) { + trackEditor.addTrack(event.track); +}; + +elem.audioTrackList.onremovetrack = function(event) { + trackEditor.removeTrack(event.track); +}; +</pre> + +<p>On peut aussi utiliser la méthode {{domxref("EventTarget.addEventListener", "addEventListener()")}} pour gérer les évènements {{event("addtrack")}} et {{event("removetrack")}}.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemples_simples">Exemples simples</h3> + +<pre class="brush: html"><!-- Un exemple simple --> +<video src="fichiervideo.webm" autoplay poster="vignette.jpg"> + Votre navigateur ne permet pas de lire les vidéos. + Mais vous pouvez toujours + <a href="fichiervideo.webm">la télécharger</a> ! +</video> + +<!-- Une vidéo avec des sous-titres --> +<video src="toto.webm"> + <track kind="subtitles" src="toto.en.vtt" srclang="en" + label="Anglais"> + <track kind="subtitles" src="toto.sv.vtt" srclang="sv" + label="Suédois"> +</video> +</pre> + +<p>Dans le premier exemple, la vidéo est lancée dès que possible. Avant que la vidéo ne soit lancée, la vignette utilisée sera le fichier <code>"vignette.jpg"</code>.</p> + +<p>Dans le deuxième exemple, l'utilisateur peut choisir parmi deux pistes de sous-titres.</p> + +<h3 id="Utiliser_plusieurs_sources">Utiliser plusieurs sources</h3> + +<p>Dans cet exemple, trois sources différentes pour la vidéo sont fournies. La première source utilisée est WebM, si son format n'est pas lisible pour le navigateur, c'est le fichier MP4 qui sera utilisé et si celui-ci n'est pas lisible non plus, ce sera le fichier OGG qui sera exploité.</p> + +<pre class="brush: html"><video width="480" controls + poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" > + <source + src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" + type="video/webm"> + <source + src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" + type="video/mp4"> + <source + src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv" + type="video/ogg"> + Votre navigateur ne permet pas de lire les vidéos HTML5. +</video></pre> + +<h2 id="Utilisation_côté_serveur">Utilisation côté serveur</h2> + +<p>Si le type MIME de la vidéo n'est pas indiqué correctement sur le serveur, la vidéo peut ne pas s'afficher, le navigateur peut afficher un boîte grise avec une croix si JavaScript est activé.</p> + +<p>Si vous utilisez Apache pour servir des vidéos Ogg Theora, vous pouvez ajouter les extensions utilisées pour les fichiers en face du type MIME. Pour cela, il faut éditer le fichier de configuration <code>mime.types</code> (situé dans le dossier <code>/etc/apache</code> ) ou utiliser la directive de configuration <code>AddType</code> dans le fichier <code>httpd.conf</code>.</p> + +<pre class="eval">AddType video/ogg .ogm +AddType video/ogg .ogv +AddType video/ogg .ogg +</pre> + +<p>Pour les vidéos WebM, le problème peut également être réglé en modifiant le fichier <code>mime.types</code> situé dans <code>/etc/apache</code> ou en ajoutant une directive <code>AddType</code> au fichier <code>httpd.conf</code>.</p> + +<pre class="eval">AddType video/webm .webm +</pre> + +<h2 id="Accessibilité">Accessibilité</h2> + +<p>Les vidéos doivent fournir des sous-titres et retranscription qui décrivent précisément le contenu. Les sous-titres doivent permettre au visiteur malentendant de comprendre le contenu audio lorsque la vidéo est lancée. Les retranscriptions sont utilisées par les personnes qui souhaitent relire le contenu audio à un rythme différent.</p> + +<p>Si on utilise un service de sous-titrage automatique est utilisé, il est nécessaire de vérifier que le contenu généré correspond bien au contenu audio de la vidéo.</p> + +<p>En plus des dialogues, les sous-titres et retranscription doivent également inclure les informations permettant d'identifier la musique et les effets sonores qui communiquent des informations importantes (l'émotion et le ton entre autres) :</p> + +<pre class="eval">14 +00:03:14 --> 00:03:18 +[Musique rock théâtrale] + +15 +00:03:19 --> 00:03:21 +[Murmure] Qu'est-ce que c'est au loin ? + +16 +00:03:22 --> 00:03:24 +C'est… C'est un… + +16 00:03:25 --> 00:03:32 +[Bruit de choc] +[La vaisselle se brise] +</pre> + +<p>Les sous-titres ne doivent pas masquer le sujet principal de la vidéo. Ils peuvent être positionnés grâce à <a href="/fr/docs/Web/API/WebVTT_API#Cue_settings">l'indication <code>align</code></a>.</p> + +<ul> + <li><a href="/fr/docs/Plugins/Flash_to_HTML5/Video/Subtitles_captions">Sous-titres et légendes - <em>Plugins</em></a></li> + <li><a href="/fr/docs/Web/API/WebVTT_API">API Web Video Text Tracks Format (WebVTT)</a></li> + <li><a href="https://webaim.org/techniques/captions/">WebAIM : <em>Captions, Transcripts, and Audio Descriptions</em> (en anglais)</a></li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.2_—_Providing_text_alternatives_for_time-based_media">Comprendre les règles WCAG 1.2</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html"><em>Understanding Success Criterion 1.2.1 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html"><em>Understanding Success Criterion 1.2.2 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li> +</ul> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_intégré">contenu intégré</a>. Si l'élément a un attribut {{htmlattrxref("controls", "video")}} : <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td> + <p>Si l'élément a un attribut {{htmlattrxref("src", "video")}} : zéro ou plusieurs éléments {{HTMLElement("track")}} suivi par du contenu transparent qui ne contient pas d'élément {{HTMLElement("audio")}} ou {{HTMLElement("video")}}</p> + + <p>Sinon, zéro ou plusieurs éléments {{HTMLElement("source")}} suivi par zéro ou plusieurs éléments {{HTMLElement("track")}}, suivi par du contenu transparent qui ne contient pas d'élément {{HTMLElement("audio")}} ou {{HTMLElement("video")}}.</p> + </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_intégré">contenu intégré</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>{{ARIARole("application")}}</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLVideoElement")}}</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">Retours</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-video-element', '<video>')}}</td> + <td><a href="https://github.com/whatwg/html/issues">Issues GitHub pour WHATWG HTML (en anglais)</a></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.video")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Formats_pour_audio_video">Les formats pris en charge par <code><audio></code> et <code><video></code></a></li> + <li>{{htmlelement("audio")}}</li> + <li>Les propriétés CSS permettant de positionner/redimensionner le contenu : {{cssxref("object-position")}} and {{cssxref("object-fit")}}</li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Utiliser les éléments <code><audio></code> et <code><video></code></a></li> + <li><a href="/fr/docs/HTML/Manipulating_video_using_canvas">Manipuler l'élément <code><video></code> avec <code><canvas></code></a></li> + <li><a href="/fr/docs/Web/HTTP/Configuring_servers_for_Ogg_media">Configuration côté serveur pour les média Ogg</a></li> +</ul> diff --git a/files/fr/web/html/element/wbr/index.html b/files/fr/web/html/element/wbr/index.html new file mode 100644 index 0000000000..07ac5892fa --- /dev/null +++ b/files/fr/web/html/element/wbr/index.html @@ -0,0 +1,113 @@ +--- +title: <wbr> +slug: Web/HTML/Element/wbr +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/wbr +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><wbr></code></strong> permet de représenter un emplacement où casser la ligne si nécessaire. Le navigateur pourra alors utiliser cet emplacement pour effectuer un saut de ligne si le texte est trop long et qu'en temps normal, une règle empêche le saut de ligne.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/wbr.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> + +<h2 id="Attributs">Attributs</h2> + +<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Notes">Notes</h2> + +<ul> + <li>Sur les pages encodées en UTF-8, <code><wbr></code> se comporte comme le point de code <code>U+200B</code><code> ZERO-WIDTH SPACE</code>, il se comporte notamment comme un point de code Unicode bidi BN, ce qui signifie qu'il n'a aucun effet sur l'ordre bidirectionnel (cf. {{Glossary("BiDi")}}. Autrement dit : <code><div dir=rtl>123,<wbr>456</div></code> sera affiché comme <code>123,456</code> et non comme <code>456,123</code> lorsqu'il n'y a pas de saut de ligne.</li> + <li>Pour la même raison, l'élément <code><wbr></code> n'introduit pas de trait d'union à la fin de ligne. Pour avoir ce caractère, il faudra utiliser l'entité (<code>&shy;</code>) (<em>soft-hyphen</em>).</li> + <li>Cet élément a été initialement implémenté par Internet Explorer 5.5 et est défini officiellement dans la spécification HTML5.</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>http://voici<wbr>.une<wbr>.très<wbr>.très<wbr>.longue<wbr>.URL<wbr>.com/avec<wbr>/pleins<wbr>/de<wbr>/niveaux<wbr>/de<wbr>/pages</p> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","100%","120")}}</p> + +<div class="note"> +<p><strong>Note :</strong> <em><a class="external" href="https://web.archive.org/web/20121105171040/http://styleguide.yahoo.com/">Le guide stylistique de Yahoo</a></em> recommande de <a class="external" href="https://web.archive.org/web/20121105171040/http://styleguide.yahoo.com/editing/treat-abbreviations-capitalization-and-titles-consistently/website-names-and-addresses">casser une URL avant la ponctuation</a> afin d'éviter toute ambiguïté sur la fin de l'URL (l'utilisateur pourrait croire que l'URL se finit en fin de ligne alors qu'elle se poursuit plus loin).</p> +</div> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Aucun, cet élément est un élément vide.</td> + </tr> + <tr> + <th scope="row">Omission de balise</th> + <td>Cet élément est un élément vide, il doit avoir une balise de début et ne doit pas avoir de balise de fin.</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_phrasé">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</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', 'semantics.html#the-wbr-element', '<wbr>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-wbr-element', '<wbr>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.wbr")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{cssxref("overflow-wrap")}}</li> + <li>{{cssxref("word-break")}}</li> + <li>{{cssxref("hyphens")}}</li> +</ul> diff --git a/files/fr/web/html/element/xmp/index.html b/files/fr/web/html/element/xmp/index.html new file mode 100644 index 0000000000..60119be95f --- /dev/null +++ b/files/fr/web/html/element/xmp/index.html @@ -0,0 +1,48 @@ +--- +title: <xmp> +slug: Web/HTML/Element/xmp +tags: + - Element + - HTML + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/xmp +--- +<div>{{Obsolete_header}}{{HTMLRef}}</div> + +<p>L'élément HTML <strong><code><xmp></code></strong> (pour <em>example</em>) affiche le texte entre les balises d'ouverture et de fermeture sans interpréter le HTML qu'il contient et en utilisant une police à chasse fixe. La spécification HTML 2 recommande un affichage suffisamment large pour contenir 80 caractères par ligne.</p> + +<div class="note"><strong>Note : </strong>Ne pas utiliser cet élément. + +<ul> + <li>Il a été déprécié depuis HTML3.2 et n'a pas été implémenté d'une manière cohérente. Il a été complètement retiré du langage dans HTML5.</li> + <li>Utilisez l'élément {{HTMLElement("pre")}} ou, si sémantiquement approprié, l'élément {{HTMLElement("code")}}. Notez qu'il vous faudra échapper les caractères '<code><</code>' et '<code>></code>' pour qu'ils ne soient pas interprétés.</li> + <li>Une police à chasse fixe peut être obtenu sur n'importe quel élément en utilisant des règles <a href="/fr/docs/CSS">CSS</a>, par la valeur <code>monospace</code> avec la propriété {{cssxref("font-family")}}.</li> +</ul> +</div> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément n'a aucun autre attribut en dehors <a href="/fr/docs/Web/HTML/Attributs_universels">des attributs universels</a>, communs à tous les éléments.</p> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Cet élément implémente l'interface {{domxref('HTMLElement')}}.</p> + +<div class="note"> +<p><strong>Note d'implémentation : </strong>Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface {{domxref('HTMLSpanElement')}} pour cet élément.</p> +</div> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page 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.xmp")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les éléments {{HTMLElement("pre")}} et {{HTMLElement("code")}} qui doivent être utilisés à la place.</li> + <li>Les éléments {{HTMLElement("plaintext")}} et {{HTMLElement("listing")}}, similaires à {{HTMLElement("xmp")}} mais également obsolètes.</li> +</ul> |