diff options
Diffstat (limited to 'files/fr/web/html')
216 files changed, 39257 insertions, 0 deletions
diff --git a/files/fr/web/html/appliquer_des_couleurs/index.html b/files/fr/web/html/appliquer_des_couleurs/index.html new file mode 100644 index 0000000000..58015bad66 --- /dev/null +++ b/files/fr/web/html/appliquer_des_couleurs/index.html @@ -0,0 +1,506 @@ +--- +title: Appliquer des couleurs sur des éléments HTML grâce à CSS +slug: Web/HTML/Appliquer_des_couleurs +tags: + - CSS + - Débutant + - Guide + - HTML +translation_of: Web/HTML/Applying_color +--- +<div>{{HTMLRef}}</div> + +<p>La couleur fait partie intégrante des moyens d'expressions. Lorsqu'on écrit un site web, il est naturel d'y ajouter des couleurs dans la mise en forme. Avec <a href="/fr/docs/Web/CSS">CSS</a>, il existe de nombreuses façons d'ajouter de la couleur aux <a href="/fr/docs/Web/HTML">éléments HTML</a> afin d'obtenir le résultat souhaité. Cet article est une introduction détaillée aux différentes méthodes permettant d'appliquer des couleurs CSS en HTML.</p> + +<p>L'ajout de couleur à un document HTML s'avère assez simple et permet de colorer presque tous les éléments.</p> + +<p>Nous allons voir ici la liste de ce qui peut être coloré, la liste des propriétés CSS impliquées, les différentes façons de décrire une couleur, comment utiliser des couleurs dans les feuilles de style et dans les scripts. Nous verrons également comment permettre à un utilisateur de sélectionner une couleur.</p> + +<p>Enfin, nous verrons comment utiliser les bonnes couleurs, en gardant à l'esprit les différentes notions d'accessibilité.</p> + +<h2 id="Ce_qui_peut_être_coloré">Ce qui peut être coloré</h2> + +<p>On peut appliquer une couleur sur chaque élément HTML. Voyons plutôt quels sont les choses que l'on peut dessiner sur les éléments : le texte, la bordure, etc. Pour chacune de ces choses, nous verrons la liste des propriétés CSS qui permettent de les colorer.</p> + +<p>De façon générale, la propriété {{cssxref("color")}} permet de définir la couleur de premier plan pour le contenu d'un élément HTML et la propriété {{cssxref("background-color")}} permete de définir la couleur utilisé pour l'arrière-plan de l'élément. Ces propriétés peuvent être utilisées sur la quasi-totalité des éléments HTML.</p> + +<h3 id="Texte">Texte</h3> + +<p>Lorsqu'un élément est affiché à l'écran, les propriétés suivantes déterminent la couleur du texte, celle de son arrière-plan et celle des décorations.</p> + +<dl> + <dt>{{cssxref("color")}}</dt> + <dd>Cette propriété correspondra à la couleur utilisée pour dessiner le texte ainsi que <a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte#Style_et_poids_de_police_transformation_et_décoration_de_texte">ses décorations</a> (tels que le soulignement, le surlingement, les rayures, etc.).</dd> + <dt>{{cssxref("background-color")}}</dt> + <dd>Cette propriété correspondra à la couleur utilisée en arrière-plan du texte.</dd> + <dt>{{cssxref("text-shadow")}}</dt> + <dd>Cette propriété permet d'ajouter un effet d'ombre au texte. Parmi les options de cette ombre, on a la couleur de base de l'ombre (qui participe au flou et qui est fusionnée avec l'arrière-plan selon les autres paramètres. Voir <a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte#Ombres_du_texte">ce paragraphe</a> pour en savoir plus.</dd> + <dt>{{cssxref("text-decoration-color")}}</dt> + <dd>Par défaut, les décorations du texte (le soulignement, les rayures, etc.) utilise la propriété <code>color</code> pour leurs couleurs. Il est cependant possible de passer outre cette valeur et de fournir une couleur différente avec la propriété <code>text-decoration-color</code>.</dd> + <dt>{{cssxref("text-emphasis-color")}}</dt> + <dd>Cette propriété correspondra à la couleur utilisée pour dessiner les symboles d'emphase utilisés à côté des caractères du texte. Ces symboles sont principalement utilisés dans des textes écrits dans des langues d'Asie orientale.</dd> + <dt>{{cssxref("caret-color")}}</dt> + <dd>Cette propriété correspondra à la couleur utilisée pour dessiner le curseur de saisie de texte dans l'élément. Cette propriété est uniquement pertinente pour les éléments qui sont éditables (par exemple {{HTMLElement("input")}} et {{HTMLElement("textarea")}} ou les éléments dont l'attribut {{htmlattrxref("contenteditable")}} est activé).</dd> +</dl> + +<h3 id="Boîtes">Boîtes</h3> + +<p>Chaque élément est une boîte avec du contenu. Cette boîte possède un arrière-plan et une bordure, quel que soit le contenu qu'elle renferme</p> + +<dl> + <dt>{{anch("Bordures")}}</dt> + <dd>Voir la section {{anch("Bordures")}} pour la liste des propriétés CSS qui peuvent être utilisées pour colorer la bordure d'une boîte.</dd> + <dt>{{cssxref("background-color")}}</dt> + <dd>Cette propriété correspondra à la couleur d'arrière-plan, utilisée dans les zones où l'élément ne possède pas de contenu au premier plan.</dd> + <dt>{{cssxref("column-rule-color")}}</dt> + <dd>Cette propriété correspondra à la couleur utilisée pour dessiner la ligne qui sépare des colonnes de texte.</dd> + <dt>{{cssxref("outline-color")}}</dt> + <dd>Cette propriété correspondra à la couleur utilisée pour le contour de l'élément. Le contour est différent de la bordure car il occupe un espace autour de la boîte et peut alors chevaucher le contenu d'une autre boîte. Le contour est généralement utilisé afin d'indiquer que l'élément a le focus et ainsi montrer quel élément reçoit les évènements de saisie.</dd> +</dl> + +<h3 id="Bordures">Bordures</h3> + +<p>Tout élément possède une <a href="/fr/docs/Learn/CSS/Styling_boxes/Borders">bordure</a> dessinée autour. Une bordure simple est représentée par une ligne dessinant un rectangle autour du contenu de l'élément. Vous pouvez lire <a href="/fr/docs/Learn/CSS/Styling_boxes/Borders">la mise en forme des bordures grâce à CSS</a> afin d'approfondir ce sujet.</p> + +<p>Il est possible d'utiliser la propriété raccourcie {{cssxref("border")}} qui permet de configurer l'ensemble des caractéristiques d'une bordure en une seule règle (y compris les caractéristiques qui ne sont pas liées aux couleurs comme <a href="/fr/docs/Web/CSS/border-width">la largeur</a>, <a href="/fr/docs/Web/CSS/border-style">le style</a> (ligne pleine, pointillés, etc.) et ainsi de suite).</p> + +<dl> + <dt>{{cssxref("border-color")}}</dt> + <dd>Cette propriété correspondra à la couleur qui sera utilisée pour chacun des côtés de la bordure.</dd> + <dt>{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, {{cssxref("border-bottom-color")}}</dt> + <dd>Ces propriétés permettent d'indiquer une couleur différente pour chaque côté de la bordure de l'élément.</dd> + <dt>{{cssxref("border-block-start-color")}} et {{cssxref("border-block-end-color")}}</dt> + <dd>Ces propriétés permettent de définir les couleurs utilisées pour les côtés de la bordure dans l'axe orthogonal au sens d'écriture. Ainsi, si le texte est écrit en français (de gauche à droite), <code>border-block-start-color</code> permettra de définir le côté haut de la bordure et <code>border-block-end-color</code> le côté bas.</dd> + <dt>{{cssxref("border-inline-start-color")}} et {{cssxref("border-inline-end-color")}}</dt> + <dd>Ces propriétés permettent de définir les couleurs utilisées pour les bordures pour les côtés sur l'axe du sens d'écriture. Les côtés impactés dépendent donc des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}} qui permettent, la plupart du temps, d'ajuster la directionnalité du texte en fonction de la langue utilisée. Si le texte est écrit de droite à gauche, <code>border-inline-start-color</code> correspondra à la couleur appliquée sur le côté droit.</dd> +</dl> + +<h3 id="Les_autres_méthodes_pour_utiliser_de_la_couleur">Les autres méthodes pour utiliser de la couleur</h3> + +<p>CSS n'est pas la seule technologie web qui gère des couleurs. Voici les autres technologies qui permettent d'apporter de la couleur sur une page web.</p> + +<dl> + <dt><a href="/fr/docs/Web/API/Canvas_API">L'API Canvas</a></dt> + <dd>Cette API permet de dessiner des graphiques matriciels en deux dimensions à l'intérieur d'un élément {{HTMLElement("canvas")}}. Vous pouvez lire <a href="/fr/docs/Tutoriel_canvas">le tutoriel sur l'API Canvas</a> pour en savoir plus.</dd> + <dt><a href="/fr/docs/Web/SVG">SVG</a> (<em>Scalable Vector Graphics</em>)</dt> + <dd>Ce format permet de dessiner des images en indiquant des commandes pour dessiner des formes, des motifs et des lignes afin de composer une image. Les commandes SVG sont construites dans un fichier XML et peuvent être embarquées dans une page web grâce à un élément {{HTMLElement("img")}}.</dd> + <dt><a href="/fr/docs/Web/API/WebGL_API">WebGL</a></dt> + <dd>L'API Web Graphics Library est une API basée sur OpenGL ES qui permet de dessiner en deux ou trois dimensions sur le Web. Voir <a href="/fr/docs/Web/API/WebGL_API/Tutorial">Apprendre WebGL pour les graphismes en 2D et 3D</a> afin d'en savoir plus.</dd> +</dl> + +<h2 id="Comment_décrire_une_couleur">Comment décrire une couleur</h2> + +<p>Afin de représente une couleur en CSS, il est nécessaire de trouver une méthode pour « traduire » le concept analogique de couleur dans un format numérique qu'un ordinateur pourra utiliser. Pour ce faire, on décompose la couleur en différentes composantes. Cela peut être la part de chaque couleur primaire ou bien la teinte et la luminosité de la couleur. Bref, il existe différentes façons de décrire une couleur en CSS.</p> + +<p>Pour des informations plus détaillées sur chaque type de valeur, vous pouvez consulter la page de la référence CSS à propos de l'unité {{cssxref("<color>")}}.</p> + +<h3 id="Mots-clés">Mots-clés</h3> + +<p>Un ensemble standard de noms de couleurs a été défini et il est possible d'utiliser l'un de ces mots-clés plutôt qu'une représentation numérique s'il existe un mot-clé pour la valeur qu'on souhaite utiliser. Les mots-clés désignant les couleurs regroupent les couleurs primaires et secondaires (tels que<code>red</code> pour rouge, <code>blue</code> pour bleu, <code>orange</code>), les tons de gris (allant de <code>black</code> pour noir à <code>white</code> pour blanc et incluant des niveaux tels que <code>darkgray</code> (gris foncé) et <code>lightgrey</code> (gris clair)). D'autres couleurs sont également disponibles avec un mot-clé comme <code>lightseagreen</code>, <code>cornflowerblue</code> ou <code>rebeccapurple</code>.</p> + +<p>Vous pouvez consulter <a href="/fr/docs/Web/CSS/Type_color#Les_mots-clés">cette liste</a> pour connaître l'ensemble des mots-clés disponibles.</p> + +<h3 id="Valeurs_RGB">Valeurs RGB</h3> + +<p>Il existe trois façons de représenter une couleur RGB en CSS.</p> + +<h4 id="La_notation_hexadécimale">La notation hexadécimale</h4> + +<p>On peut utiliser une chaîne de caractères avec des chiffres hexadécimaux afin de représenter chacune des composantes (rouge, verte, bleue). On peut également décrire une quatrième composante pour l'opacité. Chaque composante est représentée par un nombre entre 0 et 255 (ce qui correspond à 0x00 et 0xFF en notation hexadécimale) ou par un nombre entre 0 et 15 (ce qui correspond à 0x0 et 0xF en notation hexadécimale). Toutes les composantes doivent être indiquées avec le même nombre de chiffres. Si c'est la notation à un seul chiffre qui est utilisée, la couleur finale sera calculée avec chaque composante doublée, autrement dit, <code>"#D"</code> sera converti en <code>"#DD"</code>.</p> + +<p>Lorsqu'on utilise une chaîne de caractères avec un code hexadécimale, la chaîne de caractères commence toujours par le caractère <code>"#"</code>. Le reste de la chaîne correspond aux chiffres hexadécimaux. L'utilisation des majuscules ou minuscules n'a pas d'importance.</p> + +<dl> + <dt><code>"#rrggbb"</code></dt> + <dd>Cette forme indique une couleur opaque dont les deux premiers chiffres hexadécimaux indiquent la composante rouge (<code>0xrr</code>), les deux chiffres suivants indiquent la composante verte (<code>0xgg</code>) et les deux derniers chiffres indiquent la composante bleue (<code>0xbb</code>).</dd> + <dt><code>"#rrggbbaa"</code></dt> + <dd>Cette forme indique une couleur dont les deux premiers chiffres hexadécimaux indiquent la composante rouge (<code>0xrr</code>), les deux chiffres suivants indiquent la composante verte (<code>0xgg</code>), les deux chiffres suivants indiquent la composante bleue (<code>0xbb</code>), enfin, les deux derniers chiffres indiquent la composante alpha (<code>0xaa</code>) utilisée pour indiquer l'opacité de la couleur (plus la valeur est faible, plus la couleur est transparente).</dd> + <dt><code>"#rgb"</code></dt> + <dd>Cette forme indique une couleur dont la composante rouge vaut <code>0xrr</code>, la composante verte vaut <code>0xgg</code> et dont la composante bleue vaut <code>0xbb</code>.</dd> + <dt><code>"#rgba"</code></dt> + <dd>Cette forme indique une couleur dont la composante rouge vaut <code>0xrr</code>, la composante verte vaut <code>0xgg</code> et dont la composante bleue vaut <code>0xbb</code>. Le canal alpha vaut <code>0xaa</code> (plus la valeur est faible, plus la couleur sera transparente).</dd> +</dl> + +<p>Par exemple, on pourra représenter un bleu pur et opaque avec les chaînes de caractères <code>"#0000ff"</code> ou <code>"#00f"</code>. Pour le rendre opaquee à 25%, on utilisera <code>"#0000ff44"</code> ou <code>"#00f4"</code>.</p> + +<h4 id="La_notation_fonctionnelle_RGB">La notation fonctionnelle RGB</h4> + +<p>La notation fonctionnelle RGB permet, comme les chaînes de caractères hexadécimales, de représenter des couleurs avec leurs composantes rouge, verte, bleue et éventuellement avec une composante alpha pour l'opacité. Toutefois, au lieu d'utiliser une chaîne de caractères, on utilise ici la fonction CSS {{cssxref("Type_color","rgb()","#rgb()")}}. Cette fonction prend trois arguments pour chacune des composantes (dans cet ordre) rouge, verte et bleue. Un quatrième paramètre, optionnel, permet d'indiquer la valeur du canal alpha.</p> + +<p>Voici les valeurs qui peuvent être utilisées pour chacun de ces paramètres :</p> + +<dl> + <dt><code>red</code>, <code>green</code> et <code>blue</code></dt> + <dd>Chaque composante doit être un entier (type {{cssxref("<integer>")}}) compris entre 0 et 255 (inclus) ou un pourcentage (type {{cssxref("<percentage>")}}) compris entre 0% et 100%.</dd> + <dt><code>alpha</code></dt> + <dd>Le canal alpha est un nombre entre 0.0 (la couleur est alors totalement transparente) et 1.0 (complètement opaque). On peut également utiliser un pourcentage où 0% correspondra à la valeur 0.0 et 100% correspondra à la valeur 1.0.</dd> +</dl> + +<p>Par exemple, on pourra représenter un rouge pur à moitié opaque grâce à <code>rgb(255, 0, 0, 0.5)</code> ou grâce à <code>rgb(100%, 0, 0, 50%)</code>.</p> + +<h3 id="La_notation_fonctionnelle_HSL">La notation fonctionnelle HSL</h3> + +<p>D'autres personnes préfèrent manipuler <a href="https://fr.wikipedia.org/wiki/Teinte_saturation_luminosit%C3%A9">la notation HSL ou aussi appeléee « Teinte saturation luminosité »</a> (NDT : HSL signifie <em>Hue Saturation Lightness</em> en anglais). Sur le Web, les couleurs HSL sont représentées grâce à la notation fonctionnelle <code>hsl()</code> (qui fonctionne de façon analogue à la fonction <code>rgb()</code>).</p> + +<div style="padding-bottom: 20px;"> +<figure style="width: 500px;"><img alt="HSL color cylinder" src="https://mdn.mozillademos.org/files/15445/1200px-HSL_color_solid_cylinder_alpha_lowgamma.png" style="height: 375px; width: 500px;"> +<figcaption><em><strong>Figure 1. Le cylindre HSL.</strong> Hue (la teinte) définit la couleur sur un axe radial qui parcourt les couleurs du spectre visible. La saturation est un pourcentage de la teinte entre un gris total et la couleur de la teinte vive. Enfin, la luminosité permet d'avoir des couleurs plus sombres (noir pour une luminosité nulle ou blanc pour une luminosité maximale). Cette image a été créée par <a href="http://commons.wikimedia.org/wiki/User:SharkD">SharkD</a> sur <a href="https://www.wikipedia.org/">Wikipédia</a> et est distribuée avec la licence <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a>.</em></figcaption> +</figure> +</div> + +<p>La valeur de la teinte (<strong>H</strong>) est un angle qui début au rouge, parcourt le jaune, le vert, le cyan, le bleu et le magenta (avant de revenir à rouge avec un angle de 360°). Cette valeur identifie la teinte de base. La valeur utilisée est de type {{cssxref("<angle>")}} et on peut utiliser différentes unités disponibles en CSS comme les degrés (<code>deg</code>), les radians (<code>rad</code>), les grades (<code>grad</code>) ou les tours (<code>turn</code>).</p> + +<p>Ensuite, la saturation (<strong>S</strong>) indique la force de la teinte dans la couleur. Enfin, la luminosité (<strong>L</strong>) indique le niveau de gris de la couleur.</p> + +<p>On peut faire une analogie avec la conception d'une couleur pour une peinture :</p> + +<ol> + <li>On commence avec une peinture de base qui possède l'intensité la plus forte pour une couleur donnée (par exemple, le bleu le plus intense qui puisse être affiché) : c'est la teinte (<em>hue</em>) (<strong>H</strong>). En CSS, c'est un angle qui détermine la couleur parmi une roue de couleurs.</li> + <li>Ensuite, on choisit une peinture avec un niveau de gris qui la force de la couleur. Est-ce qu'on veut qu'elle soit claire ou sombre, voire complètement noire ? C'est la luminosité (<strong>L</strong>). En CSS, c'est un pourcentage, 0% indiquant une couleur noire et 100% une couleur blanche.</li> + <li>Enfin, avec ces deux peintures, on décide de la proportion de chacune pour le mélange final : c'est la saturation (<strong>S</strong>). Plus cette valeur est élevée, plus on utilise la couleur de base, plus cette valeur est faible et plus on utilise la peinture grise.</li> +</ol> + +<p>Il est également possible d'ajouter un canal alpha afin d'avoir une couleur partiellement (ou totalement) transparente.</p> + +<p>Voici quelques exemples utilisant la notation HSL :</p> + +<div id="hsl-swatches"> +<div class="hidden"> +<pre class="brush: css">table { + border: 1px solid black; + font: 16px "Open Sans", Helvetica, Arial, sans-serif; + border-spacing: 0; + border-collapse: collapse; +} + +th, td { + border: 1px solid black; + padding:4px 6px; + text-align: left; +} + +th { + background-color: hsl(0, 0%, 75%); +}</pre> + +<pre class="brush: html"><table> + <thead> + <tr> + <th scope="col">Couleur en notation HSL</th> + <th scope="col">Exemple</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>hsl(90deg, 100%, 50%)</code></td> + <td style="background-color: hsl(90deg, 100%, 50%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(90, 100%, 50%)</code></td> + <td style="background-color: hsl(90, 100%, 50%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(0.15turn, 50%, 75%)</code></td> + <td style="background-color: hsl(0.15turn, 50%, 75%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(0.15turn, 90%, 75%)</code></td> + <td style="background-color: hsl(0.15turn, 90%, 75%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(0.15turn, 90%, 50%)</code></td> + <td style="background-color: hsl(0.15turn, 90%, 50%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(270deg, 90%, 50%)</code></td> + <td style="background-color: hsl(270deg, 90%, 50%);">&nbsp;</td> + </tr> + </tbody> +</table></pre> +</div> + +<p>{{EmbedLiveSample("hsl-swatches", 300, 260)}}</p> +</div> + +<div class="note"> +<p><strong>Note :</strong> Il est possible d'omettre l'unité pour la valeur de la teinte (<em>hue</em>), l'unité par défaut utilisée sera alors les degrés (<code>deg</code>).</p> +</div> + +<h2 id="Utiliser_les_couleurs">Utiliser les couleurs</h2> + +<p>Maintenant qu'on connaît les différentes propriétés CSS, comment décrire une couleur et dans quel format, on peut assembler cela pour utiliser les couleurs dans un document web. Comme on l'a vu précédemment, de nombreuses choses peuvent être colorées. Pour ce faire, on peut utiliser deux mécanismes : une « <strong>feuille de style</strong> » et du code JavaScript pour modifier et ajouter des couleurs dynamiquement.</p> + +<h3 id="Indiquer_les_couleurs_via_une_feuille_de_style">Indiquer les couleurs via une feuille de style</h3> + +<p>La façon la plus simple (et la plus fréquemment utilisée) pour appliquer des couleurs est d'utiliser une feuille de style CSS qui sera traitée par le navigateur au moment d'afficher les éléments à l'écran. Par la suite, nous verrons plusieurs exemples (sans pour autant exploiter toutes ces propriétés).</p> + +<p>Prenons un exemple et commençons par le résultat :</p> + +<div>{{EmbedLiveSample("Indiquer_les_couleurs_via_une_feuille_de_style", 650, 150)}}</div> + +<h4 id="HTML">HTML</h4> + +<p>Voici le fragment de code HTML utilisé pour cet exemple :</p> + +<pre class="brush: html"><div class="conteneur"> + <div class="boite boiteGauche"> + <p> + Voici la première boîte. + </p> + </div> + <div class="boite boiteDroite"> + <p> + Voici la seconde boîte. + </p> + </div> +</div></pre> + +<p>Ce fragment est plutôt simple : on utilise un élément {{HTMLElement("div")}} qui enveloppe le contenu, constitué de deux <code><div></code>, chacun avec une classe différente et contenant chacun un paragraphe (c'est-à-dire un élément {{HTMLElement("p")}}).</p> + +<p>Voyons ensuite la feuille de style CSS appliquée au bloc HTML précédent.</p> + +<h4 id="CSS">CSS</h4> + +<p>Nous allons ici étudier la feuille de style en la décomposant, partie par partie.</p> + +<pre class="brush: css">.conteneur { + width: 620px; + height: 110px; + margin: 0; + padding: 10px; + border: 6px solid mediumturquoise; +}</pre> + +<p>Le sélecteur de classe <code>.conteneur</code> permet d'appliquer des styles à l'élément {{HTMLElement("div")}} qui enveloppe le reste du contenu. Pour ce style, on indique une largeur avec la propriété {{cssxref("width")}} et une hauteur avec la propriété {{cssxref("height")}}, on définit aussi une marge et une zone de remplissage avec {{cssxref("margin")}} et {{cssxref("padding")}}.</p> + +<p>La règle la plus intéressante est celle où on manipule la propriété {{cssxref("border")}} afin de dessiner une bordure sur l'extérieur de l'élément. Cette bordure sera une ligne pleine de 6 pixels avec la couleur <code>mediumturquoise</code>.</p> + +<p>Les deux boîtes colorées possèdent un certain nombre de propriétés communes. On utilise donc une classe : <code>.boite</code> pour laquelle on définit ces propriétés qui seront appliquées sur les deux éléments :</p> + +<pre class="brush: css">.boite { + width: 290px; + height: 100px; + margin: 0; + padding: 4px 6px; + font: 28px "Marker Felt", "Zapfino", cursive; + display: flex; + justify-content: center; + align-items: center; +}</pre> + +<p>Pour résumer, les styles ciblés par <code>.boite</code> indiquent la taille de la boîte, la configuration de la police de caractères utilisée, centrent le contenu des boîtes grâce <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS">aux boîtes flexibles CSS</a>. Pour cela, on utilise le mode d'affichage <code>flex</code> avec {{cssxref("display", "display: flex")}} et on paramètre les propriétés {{cssxref("justify-content")}} et {{cssxref("align-items")}} avec la valeur <code>center</code>. Ensuite, on crée une classe pour chacune des deux boîtes dont chacune définit les propriétés qui diffèrent entre ces éléments.</p> + +<pre class="brush: css">.boiteGauche { + float: left; + background-color: rgb(245, 130, 130); + outline: 2px solid darkred; +}</pre> + +<p>La classe <code>.boiteGauche</code> permet de mettre en forme la boîte située à gauche et on l'utilise pour définir certaines couleurs :</p> + +<ul> + <li>La couleur de l'arrière-plan est définie grâce à la propriété {{cssxref("background-color")}} pour laquelle on fournit la valeur <code>rgb(245, 130, 130)</code>.</li> + <li>Un contour est défini autour de la boîte grâce à la propriété {{cssxref("outline")}}. Ici, ce contour est une ligne pleine, rouge foncée (le mot-clé <code>darkred</code>) de deux pixels.</li> + <li>On notera ici qu'on ne définit pas de couleur pour le texte. La valeur qui sera utilisée pour la propriété {{cssxref("color")}} sera celle qui est héritée par le plus proche élément englobant qui définit cette propriété. La couleur par défaut est le noir.</li> +</ul> + +<pre class="brush: css">.boiteDroite { + float: right; + background-color: hsl(270deg, 50%, 75%); + outline: 4px dashed rgb(110, 20, 120); + color: hsl(0deg, 100%, 100%); + text-decoration: underline wavy #88ff88; + text-shadow: 2px 2px 3px black; +}</pre> + +<p>Enfin, la classe <code>.boiteDroite</code> décrit les propriétés de la boîte dessinée à droite. On configure cette boîte afin qu'elle flotte à droite de la boîte précédente. Ensuite, on paramètre les couleurs suivantes :</p> + +<ul> + <li>La propriété <code>background-color</code> est définie avec la notation fonctionnelle HSL : <code>hsl(270deg, 50%, 75%)</code>. Cela correspond à un violet.</li> + <li>La propriété <code>outline</code> permet d'indiquer un contour de 4 pixels formé par une ligne pointillée dont la couleur est exprimée avec la notation fonctionnelle RGB <code>rgb(110, 20, 120)</code> (violet foncé).</li> + <li>La couleur de premier plan (c'est-à-dire celle utilisée pour le texte) est définie avec la propriété {{cssxref("color")}} et la valeur <code>hsl(0deg, 100%, 100%)</code> qui correspond au blanc.</li> + <li>On ajoute une ligne verte ondulée sous le texte avec {{cssxref("text-decoration")}}.</li> + <li>Enfin, on ajoute une ombre au texte avec la propriété {{cssxref("text-shadow")}} dont le paramètre de couleur vaut <code>black</code> (noir).</li> +</ul> + +<h2 id="Permettre_à_l'utilisateur_de_choisir_une_couleur">Permettre à l'utilisateur de choisir une couleur</h2> + +<p>Il existe différentes situations où l'on peut/doit permettre à l'utilisateur de sélectionner une couleur. Il peut s'agir d'une interface personnalisable, d'une application de dessin, d'une application d'édition où on peut choisir la couleur du texte, etc. Bien que, par le passé, il fut nécessaire d'implémenter son propre sélecteur de couleur, HTML fournit désormais au navigateurs une façon homogène de le faire avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} vaut <code>"color"</code>.</p> + +<p>Lorsqu'on choisit une couleur via un élément <code><input></code>, la valeur stockée dans le document et envoyée via le formulaire est représentée avec une chaîne de caractères hexadécimale.</p> + +<h3 id="Exemple_sélectionner_une_couleur">Exemple : sélectionner une couleur</h3> + +<p>Prenons un exemple simple où l'utilisateur choisit une couleur qui est immédiatement appliquée sur la bordure de l'exemple. Une fois la couleur finale sélectionnée, la valeur du sélecteur de couleur est affichée.</p> + +<p>{{EmbedLiveSample("Exemple_:_sélectionner_une_couleur", 525, 275)}}</p> + +<div class="note"> +<p><strong>Note :</strong> Sur macOS, pour indiquer qu'on a fini de choisir la couleur, il faut fermer la fenêtre du sélecteur de couleur.</p> +</div> + +<h4 id="HTML_2">HTML</h4> + +<p>Voici le fragment HTML qui permet de créer une boîte qui contient un sélecteur de couleur avec un libellé associé (l'élément {{HTMLElement("label")}}) ainsi qu'un paragraphe ({{HTMLElement("p")}}) vide dans lequel nous placerons plus tard du texte avec JavaScript.</p> + +<pre class="brush: html"><div id="box"> + <label for="colorPicker">Couleur de la bordure :</label> + <input type="color" value="#8888ff" id="colorPicker"> + <p id="output"></p> +</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<p>La feuille CSS détermine la taille de la boîte et une mise en forme simple. La bordure mesure deux pixels de large (mais sera modifiée par le code JavaScript qui va suivre…).</p> + +<pre class="brush: css">#box { + width: 500px; + height: 200px; + border: 2px solid rgb(245, 220, 225); + padding: 4px 6px; + font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif" +}</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<p>Le script est utilisé pour mettre à jour la couleur de la bordure afin que celle-ci corresponde à la valeur courante du sélecteur. On ajoute ensuite deux gestionnaires d'évènements pour « écouter » ce qui se passe avec l'élément <code><a href="/fr/docs/Web/HTML/Element/Input/color"><input type="color"></a></code>.</p> + +<pre class="brush: js">let colorPicker = document.getElementById("colorPicker"); +let box = document.getElementById("box"); +let output = document.getElementById("output"); + +box.style.borderColor = colorPicker.value; + +colorPicker.addEventListener("input", function(event) { + box.style.borderColor = event.target.value; +}, false); + +colorPicker.addEventListener("change", function(event) { + output.innerText = "Couleur choisie : " + colorPicker.value; +}, false);</pre> + +<p>L'évènement {{event("input")}} est envoyé chaque fois que la valeur de l'élément change, c'est-à-dire chaque fois que l'utilisateur ajuste la couleur via le sélecteur. Pour chacun de ces évènements, on modifie la couleur de la bordure afin qu'elle corresponde à celle du sélecteur.</p> + +<p>L'évènement {{event("change")}} est reçu lors de la finalisation du choix de la couleur via le sélecteur. Lorsque cet évènement suvient, on modifie le contenu de l'élément <code><p></code> (le paragraphe) qui possède l'identifiant <code>"output"</code> en y ajoutant une chaîne de caractères qui décrit la couleur choisie.</p> + +<h2 id="L'art_de_choisir_une_couleur">L'art de choisir une couleur</h2> + +<p>Choisir les bonnes couleurs lors de la conception d'un site web peut s'avérer plus compliqué qu'il n'y paraît. Un mauvais choix de couleur peut nuire à l'attractivité du site voire empêcher les utilisateurs de consulter le contenu si le contraste est trop faible ou les couleurs trop criardes. Dans le pire des cas, le site peut être inutilisable à cause des couleurs choisies pour les personnes qui ont des handicaps visuels.</p> + +<h3 id="Trouver_les_bonnes_couleurs">Trouver les bonnes couleurs</h3> + +<p>Il existe des outils qui permettent de faciliter la sélection des couleurs. Bien qu'ils ne remplacent pas un bon designer, ils permettent au moins de commencer.</p> + +<h4 id="La_couleur_de_base">La couleur de base</h4> + +<p>La première étape consiste à choisir la couleur de base. C'est la couleur principale qui participe à la définition du site web ou du sujet dont il est question. Par exemple, on associe la couleur jaune à La Poste, le bleu au ciel ou à quelque chose de marin, etc. Voici quelques idées (parmi les nombreuses qui existent) pour choisir une couleur de base :</p> + +<ul> + <li>Une couleur naturellement associée au contenu : la couleur d'un produit ou une couleur rattachée à un concept/une émotion dont il serait question sur le site.</li> + <li>Naviguer parmi les sites existants et les bibliothèques d'image pour puiser de l'inspiration parmi les couleurs.</li> +</ul> + +<p>Une fois la couleur de base sélectionnéee, vous pouvez utiliser certaines extensions de navigateur pour « prélever » des couleurs existantes sur le web. Le site web <a href="http://www.colorzilla.com/">ColorZilla</a>, par exemple, propose une extension (<a href="http://www.colorzilla.com/chrome">Chrome</a> / <a href="http://www.colorzilla.com/firefox">Firefox</a>) qui permet d'utiliser une pipette pour identifier les couleurs utilisées à un endroit d'une page web. Cette extension permet également de mesurer la couleur moyenne des pixels d'une zone donnée.</p> + +<div class="note"> +<p><strong>Note :</strong> On peut s'apercevoir qu'un site contient plusieurs couleurs très proches les unes des autres, utiliser une « moyenne » permet alors de récupérer le ton principal sous la forme d'une seule couleur.</p> +</div> + +<h4 id="Agrémenter_la_palette">Agrémenter la palette</h4> + +<p>Une fois la couleur de base sélectionnée et identifiée, il existe de nombreux outils qui permettent de construire une palette de couleurs qui pourront être utilisées avec cette couleur de base. Ces outils utilisent la théorie des couleurs pour déterminer les couleurs appropriées. Certains de ces outils permettent également de voir les couleurs « filtrées » afin de visualiser ce qu'une personne daltonienne verrait.</p> + +<p>Voici quelques exemples (libres d'accès et gratuits au moment où nous écrivons ces lignes) de tels outils :</p> + +<ul> + <li><a href="/fr/docs/Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs">Le sélecteur de couleur MDN</a></li> + <li><a href="http://paletton.com">Paletton</a> (en anglais)</li> + <li><a href="https://color.adobe.com/fr/create/color-wheel">La roue des couleurs en ligne d'Adobe Color CC</a></li> +</ul> + +<p>Lorsque vous concevez votre palette de couleurs, gardez à l'esprit qu'en plus des couleurs générées par ces outils, il faudra vraisemblablement prévoir des couleurs neutres (telles que le blanc ou un ton de blanc, du noir ou un ton de noir et certaines nuances de gris).</p> + +<div class="note"> +<p><strong>Note :</strong> On utilise généralement le moins de couleurs possibles afin de garder une cohérence. En utilisant des couleurs afin d'accentuer certains éléments plutôt que d'en utiliser pour tous les éléments de la page, on rend le contenu plus facile à lire et à parcourir. De plus, les couleurs ont ainsi plus d'impact</p> +</div> + +<h3 id="Quelques_ressources_sur_la_théorie_des_couleurs">Quelques ressources sur la théorie des couleurs</h3> + +<p>Décrire l'ensemble des notions liées à la théorie des couleurs dépasse le sujet de cet article. Toutefois, il existe de nombreux articles traitant de ce sujet ainsi que des cours pour apprendre ces notions. Voici quelques unes des ressources disponibles en ligne à propos de la théorie des couleurs :</p> + +<dl> + <dt><a href="https://www.khanacademy.org/partner-content/pixar/color">La science des couleurs (en anglais)</a> (<a href="https://www.khanacademy.org/">Khan Academy</a> en association avec <a href="https://www.pixar.com/">Pixar</a>)</dt> + <dd>Un cours en ligne qui introduit certains concepts : qu'est-ce qu'une couleur, comment est-elle perçue, comment utiliser les couleurs afin de véhiculer certaines idées.</dd> + <dt><a href="https://en.wikipedia.org/wiki/Color_theory">La théorie des couleurs sur Wikipédia (en anglais)</a></dt> + <dd>La page Wikipédia qui traite de la théorie des couleurs et qui fournit de nombreuses informations techniques.</dd> +</dl> + +<h3 id="Les_couleurs_et_l'accessibilité">Les couleurs et l'accessibilité</h3> + +<p>Une couleur peut poser différents problèmes d'accessibilité. Une couleur mal choisie pourra empêcher certaines personnes d'utiliser l'interface du site, ce qui peut se traduire par une baisse de fréquentation, une mauvaise image (au sens propre comme au figuré), etc.</p> + +<p>Pour commencer, n'hésitez pas à vous renseigner sur le daltonisme et les différents types de daltonisme : confusion rouge/vert, confusion sur l'ensemble des couleurs.</p> + +<div class="note"> +<p><strong>Note :</strong> Une règle d'or consiste à ne jamais utiliser une couleur comme seule façon d'indiquer une information. Si, par exemple, vous souhaitez indiquer une réussite ou un échec en changeant uniquement la couleur d'un symbole (un drapeau par exemple), les utilisateurs souffrant de daltonismes et avec une confusion rouge/vert ne pourront pas lire cette information. Il est sans doute préférable d'utiliser du texte et de la couleur afin que tout le monde puisse être en mesure de comprendre ce qui a changé.</p> +</div> + +<p>Pour plus d'informations sur le daltonisme, vous pouvez consulter les articles suivants (en anglais, n'hésitez pas à éditer la page pour ajouter des ressources francophones) :</p> + +<ul> + <li><a href="https://medlineplus.gov/colorblindness.html">Medline Plus: Color Blindness</a></li> + <li><a href="https://www.aao.org/eye-health/diseases/what-is-color-blindness">American Academy of Ophthamology: What Is Color Blindness?</a></li> + <li><a href="https://www.usability.gov/get-involved/blog/2010/02/color-blindness.html">Color Blindness & Web Design</a></li> +</ul> + +<h3 id="Un_exemple_de_conception_de_palette">Un exemple de conception de palette</h3> + +<p>Considérons un exemple rapide pour construire une palette. Imaginons qu'on souhaite construire un site web pour un jeu dont l'action se déroule sur Mars. On peut <a href="https://www.google.com/search?q=Mars&tbm=isch">rechercher des images relatives à Mars sur Google</a> ou sur un autre moteur de recherche. On utilise un sélecteur de couleur pour sélectionner un échantillon de couleur.</p> + +<p>Avec une pipette, on identifie la couleur de base : c'est la couleur de code <code>D79C7A</code>, qui correspond à un rouge orangé rouillé, typique de l'imaginaire collectif pour la surface martienne.</p> + +<p>Une fois la couleur de base sélectionnée, on construit la palette. Pour cela, nous avons choisi <a href="http://www.paletton.com/">Paletteon</a> afin de compléter avec d'autres couleurs. Lorsqu'on ouvre Palleton, on voit ceci :</p> + +<p><img alt="L'affichage du site Palleton après l'ouverture" src="https://mdn.mozillademos.org/files/15451/paletton1.png" style="height: 361px; width: 600px;"></p> + +<p>Ensuite, on saisi le code de la couleur (<code>D79C7A</code>) dans le champ "Base RGB" situé en bas à gauche de l'outil :</p> + +<p><img alt="After entering base color" src="https://mdn.mozillademos.org/files/15453/paletton2.png" style="height: 361px; width: 600px;"></p> + +<p>On obtient alors une palette monochromatique, basée sur la couleur sélectionnée. Si vous avez besoin d'un nuancier autour de cette couleur, la palette monochromatique pourra sans doute vous aider. Mais ici, on souhaite plutôt avoir une couleur qui ressorte, pour cela on clique sur le case "<em>add complementary</em>"sous le menu permettant de sélectionner le type de palette (et qui vaut "Monochromatic"). Paletteon calcule alors une couleur complémentaire appropriée et indique le code de cette nouvelle couleur dans le coin inférieur droit : <code>#508D7C</code>.</p> + +<p><img alt="Now with complementary colors included." src="https://mdn.mozillademos.org/files/15455/paletton3.png" style="height: 361px; width: 600px;"></p> + +<p>Si vous n'êtes pas satisfait du résultat obtenu, vous pouvez faire varier le schéma de composition. Ainsi, on pourra utiliser le thème "Triad" qui fournira le résultat suivant :</p> + +<p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15457/paletton4.png" style="height: 361px; width: 600px;"></p> + +<p>On obtient alors un bleu gris en haut à droite. En cliquant dessus, on obtient le code <code>#556E8D</code>. On pourra utiliser cette couleur afin d'accentuer certains éléments tels que les titres ou les onglets mis en évidence ou bien d'autres indicateurs sur le site :</p> + +<p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15459/paletton-color-detail.png" style="height: 370px; width: 526px;"></p> + +<p>Maintenant, nous disposons d'une couleur de base, d'une couleur d'accentuation ainsi que de variations autour de celles-ci au cas où nous aurions besoin de dégradés. On peut exporter les couleurs sous différents formats afin de les utiliser.</p> + +<p>Avec ces couleurs, il faudra probablement sélectionner quelques couleurs neutres. Une pratique courante consiste à trouver le contraste suffisant pour que le texte soit pleinement lisible mais sans que ce contraste soit trop fort. Il est facile de s'égarer dans l'une ou l'autre des directions : n'hésitez pas à demander des retours sur les couleurs que vous avez sélectionnées. Si le contraste est trop faible, le texte sera illisible et on ne pourra pas le distinger de l'arrière-plan, cela pourra également poser des problèmes d'accessibilité. Si le contraste est trop élevé, le site pourra paraître criard.</p> + +<h3 id="Les_couleurs_les_arrière-plans_le_contraste_et_l'impression">Les couleurs, les arrière-plans, le contraste et l'impression</h3> + +<p>Le rendu d'un document peut être différent selon que ce dernier est affiché sur un écran ou sur du papier. De plus, sur papier, on peut chercher à économiser l'encre superflu. Lorsqu'un utilisateur imprime une page, il n'est par exemple peut-être pas nécessaire d'imprimer les arrière-plans. Par défaut, la plupart des navigateurs retire les images d'arrière-plan à l'impression.</p> + +<p>Si les couleurs d'arrière-plan ou les images sont importantes pour l'ensemble du document, on peut utiliser la propriété {{cssxref("color-adjust")}} afin d'indiquer au navigateur qu'il ne faut pas modifier l'apparence du contenu.</p> + +<p>Par défaut, la propriété <code>color-adjust</code> vaut <code>economy</code> et indique au navigateur qu'il peut modifier l'apparence afin d'optimiser la lisibilité du contenu et d'économiser de l'encre selon le support d'imprimerie.</p> + +<p><code>color-adjust</code> peut être paramétré avec la valeur <code>exact</code> afin d'indiquer au navigateur qu'un ou plusieurs éléments doivent être conservés tels quels afin que l'ensemble du document ne soit pas détérioré.</p> + +<div class="note"> +<p><strong>Note :</strong> Il n'est pas garanti que le navigateur respecte exactement la feuille de style utilisée avec <code>color-adjust: exact</code>. En effet, si le navigateur fournit une option à l'utilisateur pour ne pas imprimer les arrière-plans, ce réglage prendra le pas sur la feuille de style.</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des graphiques</a></li> + <li><a href="/fr/docs/Web/Guide/Graphics">Le graphisme sur le Web</a></li> + <li><a href="/fr/docs/Outils/Couleurs_des_DevTools">Un outil de sélection de couleur sur MDN</a></li> +</ul> diff --git a/files/fr/web/html/attributs/autocomplete/index.html b/files/fr/web/html/attributs/autocomplete/index.html new file mode 100644 index 0000000000..fca919718d --- /dev/null +++ b/files/fr/web/html/attributs/autocomplete/index.html @@ -0,0 +1,228 @@ +--- +title: autocomplete +slug: Web/HTML/Attributs/autocomplete +tags: + - Attribut + - HTML + - Input + - Reference +translation_of: Web/HTML/Attributes/autocomplete +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'attribut <code>autocomplete</code> est disponible pour différents types d'éléments {{HTMLElement("input")}}, {{HTMLElement("textarea")}}, {{HTMLElement("select")}} et {{HTMLElement("form")}}. <span class="seoSummary"><code>autocomplete</code> permet d'indiquer à l'agent utilisateur qu'une assistance de saisie automatique peut être fournie et également d'indiquer le type de donnée attendu.</span></p> + +<p>La source fournissant les valeurs suggérées pour l'autocomplétion dépend du navigateur. Généralement, celle-ci est constituée des valeurs saisies précédemment par l'utilisateur. Ce peuvent également être des valeurs préconfigurées. Ainsi, un navigateur pourra permettre à un utilisateur d'enregistrer son nom, son adresse, son numéro de téléphone et des adresses électroniques pour l'aider lors de l'autocomplétion. Le navigateur pourrait également fournir le stockage chiffré des informations de cartes bancaires et déclencher une procédure d'authentification lorsque ces informations doivent être récupérées pour être utilisées.</p> + +<p>Si l'élément {{HTMLElement("input")}}, {{HTMLElement("select")}} ou {{HTMLElement("textarea")}} ne possèdent pas d'attribut <code>autocomplete</code>, le navigateur utilisera l'attribut <code>autocomplete</code> du formulaire associé (c'est-à-dire l'élément {{HTMLElement("form")}} qui est l'ancêtre de l'élément <code><input></code> ou l'élément <code><form></code> dont la valeur de l'attribut <code>id</code> correspond à celle indiquée avec l'attribut {{htmlattrxref("form", "input")}} de l'élément <code><input></code>).</p> + +<p>Pour plus d'informations, voir la documentation de l'attribut {{htmlattrxref("autocomplete", "form")}} pour l'élément {{HTMLElement("form")}}.</p> + +<div class="blockIndicator note"> +<p><strong>Note :</strong> Afin de fournir des fonctionnalités d'autocomplétion, un agent utilisateur pourra utiliser les prérequis suivants quant aux éléments <code><input></code>/<code><select></code>/<code><textarea></code>:</p> + +<ol> + <li>Que ceux-ci aient un attribut <code>name</code> et/ou <code>id</code></li> + <li>Que ceux-ci descendent d'un élément <code><form></code></li> + <li>Que le formulaire associé ait un bouton {{HTMLElement("input/submit","submit")}}</li> +</ol> +</div> + +<h2 id="Valeurs">Valeurs</h2> + +<dl> + <dt><code>off</code></dt> + <dd>Le navigateur n'est pas autorisé à saisir automatiquement des valeurs pour ce champ. Cette valeur peut être utilisée lorsque le document ou l'application fournit son propre mécanisme d'autocomplétion ou lorsque des raisons de sécurité imposent de ne pas pouvoir saisir la valeur automatiquement. + <div class="note"><strong>Note :</strong> Pour la plupart des navigateurs modernes, utiliser <code>autocomplete="off"</code> n'empêchera pas un gestionnaire de mots de passe de demander à l'utilisateur s'il souhaite sauvegarder le nom d'utilisateur et le mot de passe ou de renseigner automatiquement les informations pour un formulaire de connexion. Voir <a href="/fr/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields">l'article sur l'attribut <code>autocomplete</code> et les champs des formulaires de connexion</a>.</div> + </dd> + <dt><code>on</code></dt> + <dd>Le navigateur est autorisé à compléter automatiquement le champ. Aucune indication supplémentaire n'est fournie quant au type de donnée attendu et c'est donc au navigateur d'utiliser une heuristique pour proposer des valeurs pertinentes.</dd> + <dt><code>name</code></dt> + <dd>Le champ correspondant doit recevoir le nom complet de la personne. Utiliser cette valeur plutôt que les différents composants est une méthode souvent privilégiée car on évite ainsi de gérer les différents structures des différentes locales. Toutefois, on peut utiliser les composants suivants si on souhaite décomposer l'identité de la personne : + <dl> + <dt><code>honorific-prefix</code></dt> + <dd>Le préfixe ou le titre, par exemple « M. », « Mme. », « Me. » , etc.</dd> + <dt><code>given-name</code></dt> + <dd>Le prénom.</dd> + <dt><code>additional-name</code></dt> + <dd>Le deuxième prénom.</dd> + <dt><code>family-name</code></dt> + <dd>Le nom de famille.</dd> + <dt><code>honorific-suffix</code></dt> + <dd>Un suffixe (par exemple "Jr.").</dd> + <dt><code>nickname</code></dt> + <dd>Un surnom.</dd> + </dl> + </dd> + <dt><code>email</code></dt> + <dd>Une adresse électronique.</dd> + <dt><code>username</code></dt> + <dd>Un nom de compte ou un nom d'utilisateur.</dd> + <dt><code>new-password</code></dt> + <dd>Un nouveau mot de passe. Lors de la création d'un compte ou lors d'un changement de mot de passe, cette valeur pourra être utilisée pour le champ où saisir le nouveau mot de passe. Ainsi, on évitera au navigateur de saisir automatiquement le mot de passe actuel ou le navigateur pourra même proposer un outil permettant de créer un mot de passe sécurisé.</dd> + <dt><code>current-password</code></dt> + <dd>Le mot de passe actuel de l'utilisateur.</dd> + <dt><code>one-time-code</code></dt> + <dd>Un code à usage unique, utilisé pour vérifier l'identité de l'utilisateur.</dd> + <dt><code>organization-title</code></dt> + <dd>Un titre de poste tel que « Directeur général », « Assistant technique » ou « Ingénieur ».</dd> + <dt><code>organization</code></dt> + <dd>Le nom d'une entreprise ou d'une organisation.</dd> + <dt><code>street-address</code></dt> + <dd>Une adresse postale. Cette adresse peut être un texte sur plusieurs lignes et devrait permettre d'identifier complètement l'emplacement de l'adresse au sein d'une ville. Cette valeur n'inclut pas le nom de la ville, le code postal ou le nom du pays.</dd> + <dt><code>address-line1</code>, <code>address-line2</code>, <code>address-line3</code></dt> + <dd>Des lignes individuelles pour décrire l'adresse postale. Ces valeurs peuvent être utilisées seulement lorsque la valeur <code>street-address</code> est absente.</dd> + <dt><code>address-level4</code></dt> + <dd>Le niveau d'adresse le plus fin (cf. la section ci-après) lorsque les adresses ont quatre niveau.</dd> + <dt><code>address-level3</code></dt> + <dd>Le troisième niveau de précision d'une adresse (cf. la section ci-après) lorsque les adresses ont au moins trois niveaux administratifs.</dd> + <dt><code>address-level2</code></dt> + <dd>Le deuxième niveau de précision d'une adresse (cf. la section ci-après) lorsque les adresses ont au moins deux niveaux administratifs. Pour les pays avec deux niveaux administratifs, cela correspond généralement à la ville, au village ou à la localité de l'adresse.</dd> + <dt><code>address-level1</code></dt> + <dd>Le premier niveau de précision d'une adresse (cf. la section ci-après). C'est généralement la région ou l'état dans lequel se situe l'adresse.</dd> + <dt><code>country</code></dt> + <dd>Un code de pays.</dd> + <dt><code>country-name</code></dt> + <dd>Un nom de pays.</dd> + <dt><code>postal-code</code></dt> + <dd>Un code postal.</dd> + <dt><code>cc-name</code></dt> + <dd>Le nom complet tel qu'indiqué sur une carte bancaire. On préfèrera généralement utiliser le nom complet plutôt que de le décomposer en fragments.</dd> + <dt><code>cc-given-name</code></dt> + <dd>Le prénom tel qu'indiqué sur une carte bancaire.</dd> + <dt><code>cc-additional-name</code></dt> + <dd>Le deuxième prénom tel qu'indiqué sur une carte bancaire.</dd> + <dt><code>cc-family-name</code></dt> + <dd>Le nom de famille tel qu'indiqué sur une carte bancaire.</dd> + <dt><code>cc-number</code></dt> + <dd>Le numéro de la carte bancaire ou tout autre numéro identifiant une méthode de paiement (ce peut être un numéro de compte par exemple).</dd> + <dt><code>cc-exp</code></dt> + <dd>La date d'expiration de la méthode de paiement telle qu'indiquée sur une carte bancaire (généralement sous la forme MM/YY ou sous la forme MM/YYYYY où MM correspond aux deux chiffres du mois et où YY ou YYYY correspondent aux chiffres de l'année).</dd> + <dt><code>cc-exp-month</code></dt> + <dd>Le mois d'expiration du moyen de paiement tel qu'indiqué sur une carte bancaire.</dd> + <dt><code>cc-exp-year</code></dt> + <dd>L'année d'expiration du moyen de paiement tel qu'indiqué sur une carte bancaire.</dd> + <dt><code>cc-csc</code></dt> + <dd>Le cryptogramme du moyen de paiement tel qu'indiqué sur une carte bancaire. il s'agit généralement du code à trois chiffres de vérification situé au dos de la carte bancaire.</dd> + <dt><code>cc-type</code></dt> + <dd>Le type de moyen de paiement ("Visa" ou "Master Card").</dd> + <dt><code>transaction-currency</code></dt> + <dd>La devise utilisée pour la transaction courante.</dd> + <dt><code>transaction-amount</code></dt> + <dd>Le montant de la transaction, pour un formulaire de paiement, exprimé dans la devise fournie par <code>transaction-currency</code>.</dd> + <dt><code>language</code></dt> + <dd>La langue préférée, indiquée sous la forme <a href="https://en.wikipedia.org/wiki/IETF_language_tag">d'une balise de langue valide selon BCP 47</a>.</dd> + <dt><code>bday</code></dt> + <dd>Une date de naissance complète.</dd> + <dt><code>bday-day</code></dt> + <dd>Le jour du mois de la date de naissance.</dd> + <dt><code>bday-month</code></dt> + <dd>Le mois de l'année de la date de naissance.</dd> + <dt><code>bday-year</code></dt> + <dd>L'année de la date de naissance.</dd> + <dt><code>sex</code></dt> + <dd>Un genre (tel que « femme », « homme », « Fa'afafine » etc.) sous la forme d'un texte libre sans passage à la ligne.</dd> + <dt><code>tel</code></dt> + <dd>Un numéro de téléphone complet qui inclut l'identifiant du pays. Si le numéro de téléphone doit être décomposé en composants, on pourra utiliser les valeurs suivantes : + <dl> + <dt><code>tel-country-code</code></dt> + <dd>L'indicateur du pays pour le numéro de téléphone (33 pour la France ou 1 pour les États-Unis par exemple).</dd> + <dt><code>tel-national</code></dt> + <dd>Le numéro de téléphone complet sans l'indicateur du pays.</dd> + <dt><code>tel-area-code</code></dt> + <dd>La code de la zone pour le numéro de téléphone avec un préfixe interne au pays si nécessaire.</dd> + <dt><code>tel-local</code></dt> + <dd>Le numéro de téléphone sans l'indicateur de pays ni l'indicateur de zone.</dd> + </dl> + </dd> + <dt><code>tel-extension</code></dt> + <dd>Une extension au numéro de téléphone qui permet par exemple d'indiquer le numéro de chambre dans un hôtel ou le numéro d'un bureau au sein d'une entreprise.</dd> + <dt><code>impp</code></dt> + <dd>Une URL pour un protocole de messagerie instantannée (par exemple "xmpp:username@example.net").</dd> + <dt><code>url</code></dt> + <dd>Une URL, pertinente dans le contexte du formulaire.</dd> + <dt><code>photo</code></dt> + <dd>L'URL d'une image représentant la personne, l'entreprise ou l'information de contact pour ce formulaire.</dd> +</dl> + +<p>Voir <a href="https://html.spec.whatwg.org/multipage/forms.html#autofill">la spécification WHATWG</a> pour plus de détails.</p> + +<div class="note"> +<p><strong>Note :</strong> À la différence des autres navigateurs, pour Firefox, l'attribut <code>autocomplete</code> contrôlera également si <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">l'état de désactivation ou de coche dynamique persiste lors d'un rechargement de la page</a> pour un champ <code><input></code>. Par défaut, un élément reste désactivé ou coché/décoché lors des rechargements. En utilisant l'attribut <code>autocomplete</code> avec la valeur <code>off</code>, on désactive cette fonctionnalité. Cela fonctionne, y compris lorsque l'attribut <code>autocomplete</code> ne devrait pas s'appliquer à l'élément <code><input></code> d'après son type. Voir {{bug(654072)}}.</p> +</div> + +<h2 id="Les_niveaux_administratifs_pour_les_adresses">Les niveaux administratifs pour les adresses</h2> + +<p>Les quatre niveaux administratifs pour les adresses (<code>address-level1</code> jusqu'à <code>address-level4</code>) décrivent l'adresse avec un niveau de précision croissant au sein du pays dans lequel l'adresse est situé. Chaque pays possède son propre système de division administrative et peut donc organiser les niveaux selon un ordre différent pour l'écriture des adresses.</p> + +<p><code>address-level1</code> représente toujours le niveau le plus large : c'est la composante la moins spécifique de l'adresse après la maille du pays.</p> + +<h3 id="Disposition_du_formulaire">Disposition du formulaire</h3> + +<p>Étant donné qu'une adresse s'écrit différemment selon le pays, il peut être utile, si possible, de fournir différentes dispositions de formulaires pour les utilisateurs (éventuellement en fonction de leur locale) pour faciliter la saisie de leur adresse pour leur pays.</p> + +<h3 id="Variations">Variations</h3> + +<p>La façon d'utiliser les niveaux administratifs varie d'un pays à l'autre. Voici quelques exemples non exhaustifs.</p> + +<h4 id="États-Unis">États-Unis</h4> + +<p>Aux États-Unis, une adresse s'écrit généralement comme suit :</p> + +<p>432 Anywhere St<br> + Exampleville CA 95555</p> + +<p>Dans ce cas, la portion la moins précise est le code "CA" (qui correspond au code postal pour l'état de Californie) et on a donc <code>address-level1</code> qui correspond à ce niveau (ici l'état et plus particulièrement : "CA").</p> + +<p>La deuxième partie de l'adresse la moins précise est le nom de la ville et c'est donc cette information (ici "Exampleville") qui sera utilisée pour <code>address-level2</code>.</p> + +<p>Les niveaux 3 et 4 ne sont pas utilisés aux États-Unis.</p> + +<h4 id="Royaume-Uni">Royaume-Uni</h4> + +<p>Le Royaume-Uni utilise un ou deux niveaux d'adresse selon l'adresse. Il s'agit de la ville postale et, dans certains cas, de la localité.</p> + +<h4 id="Chine">Chine</h4> + +<p>La Chine utilise jusqu'à trois niveaux administratifs : la province, la ville et le district.</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.2', "sec-forms.html#autofilling-form-controls-the-autocomplete-attribute", "autocomplete")}}</td> + <td>{{Spec2('HTML5.2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute", "autocomplete")}}</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.global_attributes.autocomplete")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'élément HTML {{htmlelement("input")}}</li> + <li>L'élément HTML {{htmlelement("select")}}</li> + <li>L'élément HTML {{htmlelement("textarea")}}</li> + <li>L'élément HTML {{htmlelement("form")}}</li> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Les formulaires HTML</a></li> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les attributs universels</a>.</li> +</ul> diff --git a/files/fr/web/html/attributs/index.html b/files/fr/web/html/attributs/index.html new file mode 100644 index 0000000000..1b1c140c4e --- /dev/null +++ b/files/fr/web/html/attributs/index.html @@ -0,0 +1,767 @@ +--- +title: Liste des attributs HTML +slug: Web/HTML/Attributs +tags: + - Attribut + - HTML + - Reference + - Web +translation_of: Web/HTML/Attributes +--- +<div>{{HTMLSidebar}}</div> + +<p>Chaque élément HTML peut <a href="/fr/Apprendre/HTML/Balises_HTML">avoir un ou plusieurs attributs</a>. Ces attributs sont des valeurs supplémentaires qui permettent de configurer les éléments ou d'adapter leur comportement.</p> + +<h2 id="Liste_des_attributs">Liste des attributs</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Nom de l'attribut</th> + <th>Éléments auxquels il s'applique</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>accept</code></td> + <td>{{HTMLElement("form")}}, {{HTMLElement("input")}}</td> + <td>La liste des types acceptés par le serveur. Généralement, il s'agit de types de fichier.</td> + </tr> + <tr> + <td><code>accept-charset</code></td> + <td>{{HTMLElement("form")}}</td> + <td>La liste des jeux de caractères pris en charge.</td> + </tr> + <tr> + <td><code>accesskey</code></td> + <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> + <td>Cet attribut permet de définir un raccourci clavier pour activer un élément ou lui passer le focus.</td> + </tr> + <tr> + <td><code>action</code></td> + <td>{{HTMLElement("form")}}</td> + <td>L'URI d'un programme qui traite les informations envoyées par le formulaire.</td> + </tr> + <tr> + <td><code>align</code></td> + <td>{{HTMLElement("applet")}}, {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}} , {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}</td> + <td>Cet attribut définit l'alignement horizontal de l'élément.</td> + </tr> + <tr> + <td><code>allow</code></td> + <td>{{HTMLElement("iframe")}}</td> + <td>Cet attribut définit les règles des fonctionnalités pour cette <em>iframe</em>.</td> + </tr> + <tr> + <td><code>alt</code></td> + <td>{{HTMLElement("applet")}}, {{HTMLElement("area")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}</td> + <td>Un texte alternatif à afficher lorsque l'élément ne peut pas être affiché.</td> + </tr> + <tr> + <td><code>async</code></td> + <td>{{HTMLElement("script")}}</td> + <td>Cet attribut indique que le script devrait être exécuté de façon asynchrone.</td> + </tr> + <tr> + <td><code>autocapitalize</code></td> + <td><a href="/fr/docs/Web/HTML/Attributs_universels">Attribut universel</a></td> + <td>Cet attribut contrôle la façon dont un champ texte est saisi en majuscules de façon automatique.</td> + </tr> + <tr> + <td><code>autocomplete</code></td> + <td> + <p>{{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}</p> + </td> + <td>Cet attribut indique que ces contrôles ou que ce formulaire peuvent être remplis automatiquement par le navigateur.</td> + </tr> + <tr> + <td><code>autofocus</code></td> + <td>{{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}</td> + <td>Cet attribut indique que l'élément doit recevoir le focus automatiquement une fois que la page est chargée.</td> + </tr> + <tr> + <td><code>autoplay</code></td> + <td>{{HTMLElement("audio")}}, {{HTMLElement("video")}}</td> + <td>Cet attribut indique que l'élément audio ou vidéo doit être lancé dès que possible.</td> + </tr> + <tr> + <td><code>background</code></td> + <td>{{HTMLElement("body")}}, {{HTMLElement("table")}}, {{HTMLElement("td")}}, {{HTMLElement("th")}}</td> + <td> + <p>Définit l'URL vers un fichier qui est une image.</p> + + <p>Note : Bien que les navigateurs et les clients <em>emails</em> prennent en charge cet attribut, cet attribut est obsolète. On utilisera plutôt la propriété {{cssxref("background-image")}}.</p> + </td> + </tr> + <tr> + <td><code>bgcolor</code></td> + <td>{{HTMLElement("body")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("marquee")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("td")}}, {{HTMLElement("th")}}, {{HTMLElement("tr")}}</td> + <td> + <p>Cet attribut indique la couleur d'arrière-plan pour l'élément.</p> + + <div class="note"> + <p><strong>Note :</strong> Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard {{cssxref("background-color")}}.</p> + </div> + </td> + </tr> + <tr> + <td><code>border</code></td> + <td>{{HTMLElement("img")}}, {{HTMLElement("object")}}, {{HTMLElement("table")}}</td> + <td> + <p>Cet attribut indique la largeur de la bordure.</p> + + <div class="note"> + <p><strong>Note :</strong> Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard {{cssxref("border")}}.</p> + </div> + </td> + </tr> + <tr> + <td><code>buffered</code></td> + <td>{{HTMLElement("audio")}}, {{HTMLElement("video")}}</td> + <td>Cet attribut contient la valeur de l'intervalle de temps d'ores et déjà mis en mémoire tampon pour le média de l'élément.</td> + </tr> + <tr> + <td><code>challenge</code></td> + <td>{{HTMLElement("keygen")}}</td> + <td>Une chaîne de challenge qui est envoyée avec la clef publique.</td> + </tr> + <tr> + <td><code>charset</code></td> + <td>{{HTMLElement("meta")}}, {{HTMLElement("script")}}</td> + <td>Cet attribut déclare l'encodage de caractères utilisé pour la page ou le script.</td> + </tr> + <tr> + <td><code>checked</code></td> + <td>{{HTMLElement("command")}}, {{HTMLElement("input")}}</td> + <td>Cet attribut indique si l'élément doit être vérifié au chargement de la page.</td> + </tr> + <tr> + <td><code>cite</code></td> + <td>{{HTMLElement("blockquote")}}, {{HTMLElement("del")}}, {{HTMLElement("ins")}}, {{HTMLElement("q")}}</td> + <td>Cet attribut est une URI qui pointe vers la source de la citation ou de la modification.</td> + </tr> + <tr> + <td><code>class</code></td> + <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> + <td>Cet attribut permet de définir la ou les classes auxquelles appartient un élément afin de le manipuler en script ou de le mettre en forme avec CSS.</td> + </tr> + <tr> + <td><code>code</code></td> + <td>{{HTMLElement("applet")}}</td> + <td>Cet attribut définit l'URL du fichier de classe qui doit être utilisé pour le chargement et l'exécution de l'applet.</td> + </tr> + <tr> + <td><code>codebase</code></td> + <td>{{HTMLElement("applet")}}</td> + <td>Cet attribut fournit une URL absolue ou relative du dossier contenant les fichiers <code>.class</code> de l'applet.</td> + </tr> + <tr> + <td><code>color</code></td> + <td>{{HTMLElement("basefont")}}, {{HTMLElement("font")}}, {{HTMLElement("hr")}}</td> + <td> + <p>Cet attribut définit la couleur du texte grâce à un nom de couleur ou grâce à un code hexadécimal dans le format #RRGGBB.</p> + + <div class="note"> + <p><strong>Note :</strong> Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard {{cssxref("color")}}.</p> + </div> + </td> + </tr> + <tr> + <td><code>cols</code></td> + <td>{{HTMLElement("textarea")}}</td> + <td>Cet attribut définit le nombre de colonnes pour le texte contenu dans un<code> textarea</code>.</td> + </tr> + <tr> + <td><code>colspan</code></td> + <td>{{HTMLElement("td")}}, {{HTMLElement("th")}}</td> + <td>Cet attribut définit le nombre de colonnes sur lequel une cellule doit s'étendre.</td> + </tr> + <tr> + <td><code>content</code></td> + <td>{{HTMLElement("meta")}}</td> + <td>Une valeur associée avec <code>http-equiv</code> ou <code>name</code> selon le contexte.</td> + </tr> + <tr> + <td><code>contenteditable</code></td> + <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> + <td>Cet attribut indique si le contenu de l'élément peut être édité.</td> + </tr> + <tr> + <td><code>contextmenu</code></td> + <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> + <td>Cet attribut fait référence à l'identifiant d'un élément {{HTMLElement("menu")}} qui sera utilisé comme menu contextuel pour l'élément.</td> + </tr> + <tr> + <td><code>controls</code></td> + <td>{{HTMLElement("audio")}}, {{HTMLElement("video")}}</td> + <td>Cet attribut indique si le navigateur doit afficher les contrôles de lecture du média pour l'utilisateur.</td> + </tr> + <tr> + <td><code>coords</code></td> + <td>{{HTMLElement("area")}}</td> + <td>Un ensemble de valeurs qui définit les coordonnées de la zone d'intérêt.</td> + </tr> + <tr> + <td><code>crossorigin</code></td> + <td>{{HTMLElement("audio")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("video")}}</td> + <td>Cet attribut gère les requêtes de différentes origines.</td> + </tr> + <tr> + <td><code>csp</code> {{experimental_inline}}</td> + <td>{{HTMLElement("iframe")}}</td> + <td>Cet attribut définit la politique de sécurité de contenu que le document intégré doit respecter.</td> + </tr> + <tr> + <td><code>data</code></td> + <td>{{HTMLElement("object")}}</td> + <td>Cet attribut définit l'URL de la ressource.</td> + </tr> + <tr> + <td><code>data-*</code></td> + <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> + <td>Grâce aux attributs de donnée, on peut associer des attributs personnalisés afin de transporter des informations spécifiques.</td> + </tr> + <tr> + <td><code>datetime</code></td> + <td>{{HTMLElement("del")}}, {{HTMLElement("ins")}}, {{HTMLElement("time")}}</td> + <td>Cet attribut indique la date et l'heure associées à l'élément.</td> + </tr> + <tr> + <td><code>decoding</code></td> + <td>{{HTMLElement("img")}}</td> + <td>Cet attribut indique la méthode préférée pour décoder l'image.</td> + </tr> + <tr> + <td><code>default</code></td> + <td>{{HTMLElement("track")}}</td> + <td>Cet attribut indique que la piste devrait être activée sauf si les préférences de l'utilisateur indique un autre choix.</td> + </tr> + <tr> + <td><code>defer</code></td> + <td>{{HTMLElement("script")}}</td> + <td>Cet attribut indique que le script doit être exécuté une fois que la page a été analysée.</td> + </tr> + <tr> + <td><code>dir</code></td> + <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> + <td>Cet attribut définit la direction du texte (gauche à droite ou droite à gauche).</td> + </tr> + <tr> + <td><code>dirname</code></td> + <td>{{HTMLElement("input")}}, {{HTMLElement("textarea")}}</td> + <td></td> + </tr> + <tr> + <td><code>disabled</code></td> + <td>{{HTMLElement("button")}}, {{HTMLElement("command")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}</td> + <td>Cet attribut indique si l'utilisateur peut interagir avec l'élément.</td> + </tr> + <tr> + <td><code>download</code></td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + <td>Cet attribut indique si l'hyperlien est utilisé afin de télécharger une ressource.</td> + </tr> + <tr> + <td><code>draggable</code></td> + <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> + <td>Cet attribut indique si l'élément peut être déplacé/glissé.</td> + </tr> + <tr> + <td><code>dropzone</code></td> + <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> + <td>Cet attribut indique si l'élément peut recevoir du contenu suite à un glisser/déposer.</td> + </tr> + <tr> + <td><code>enctype</code></td> + <td>{{HTMLElement("form")}}</td> + <td>Cet attribut définit le type de contenu des données de formulaire envoyées lorsque la méthode utilisée est <code>POST</code>.</td> + </tr> + <tr> + <td><code>enterkeyhint</code> {{experimental_inline}}</td> + <td>{{HTMLElement("textarea")}}, <code>contenteditable</code></td> + <td>Cet attribut indique le libellé ou l'icône à afficher sur la touche entrée des clavier virtuels. Cet attribut peut être utilisé sur les contrôles de formulaires ou sur les éléments qui sont éditables (par exemple avec l'attribut <code>contenteditable</code>).</td> + </tr> + <tr> + <td><code>for</code></td> + <td>{{HTMLElement("label")}}, {{HTMLElement("output")}}</td> + <td>Cet attribut décrit l'élément auquel se rapporte l'élément courant.</td> + </tr> + <tr> + <td><code>form</code></td> + <td>{{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("meter")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}</td> + <td>Cet attribut indique le formulaire auquel l'élément se rapporte.</td> + </tr> + <tr> + <td><code>formaction</code></td> + <td>{{HTMLElement("input")}}, {{HTMLElement("button")}}</td> + <td>Cet attribut est l'URI du programme qui traite les données pour ces champs du formulaire. Il prend le pas sur l'attribut <code>action</code> défini pour {{HTMLElement("form")}}.</td> + </tr> + <tr> + <td><code>formenctype</code></td> + <td>{{HTMLElement("input")}}, {{HTMLElement("button")}}</td> + <td>Si le bouton ou le champ sert à l'envoi (<code>type="submit"</code>), cet attribut indique l'encodage utilisé pour l'envoi des données. Si cet attribut est indiqué, il surcharge l'attribut <code>enctype</code> du formulaire auquel est rattaché le bouton/champ.</td> + </tr> + <tr> + <td><code>formmethod</code></td> + <td>{{HTMLElement("input")}}, {{HTMLElement("button")}}</td> + <td>Si le bouton ou le champ sert à l'envoi (<code>type="submit"</code>), cet attribut indique la méthode HTTP pour envoyer les données (<code>GET</code>, <code>POST</code>, etc.). Si cet attribut est indiqué, il surcharge l'attribut <code>method</code> du formulaire auquel est rattaché le bouton/champ.</td> + </tr> + <tr> + <td><code>formnovalidate</code></td> + <td>{{HTMLElement("input")}}, {{HTMLElement("button")}}</td> + <td>Si le bouton ou le champ sert à l'envoi (<code>type="submit"</code>), cet attribut booléen indique que le formulaire ne doit pas être validé à l'envoi. Si cet attribut est indiqué, il surcharge l'attribut <code>novalidate</code> du formulaire auquel est rattaché le bouton/champ.</td> + </tr> + <tr> + <td><code>formtarget</code></td> + <td>{{HTMLElement("input")}}, {{HTMLElement("button")}}</td> + <td>Si le bouton ou le champ sert à l'envoi (<code>type="submit"</code>), cet attribut indique le contexte de navigation (onglet, fenêtre ou <em>iframe</em>) dans lequel afficher la réponse après l'envoi du formulaire. Si cet attribut est indiqué, il surcharge l'attribut <code>target</code> du formulaire auquel est rattaché le bouton/champ.</td> + </tr> + <tr> + <td><code>headers</code></td> + <td>{{HTMLElement("td")}}, {{HTMLElement("th")}}</td> + <td>Les identifiants des éléments <code><th></code> qui s'appliquent à cet élément.</td> + </tr> + <tr> + <td><code>height</code></td> + <td>{{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}}</td> + <td> + <p>Pour ces éléments, cet attribut définit la hauteur occupée par l'élément. Pour les autres éléments, on utilisera {{cssxref("height")}} property.</p> + + <div class="note"> + <p><strong>Note :</strong> Pour certains éléments comme {{HTMLElement("div")}},cet attribut est un reliquat et ne devrait plus être utilisé. C'est la propriété CSS {{cssxref("height")}} qui est la méthode standard pour définir la hauteur d'un élément.</p> + </div> + </td> + </tr> + <tr> + <td><code>hidden</code></td> + <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> + <td>Cet attribut empêche le rendu d'un élément sur une page tout en conservant les éléments fils actifs.</td> + </tr> + <tr> + <td><code>high</code></td> + <td>{{HTMLElement("meter")}}</td> + <td>Cet attribut indique la borne inférieure de l'intervalle haut.</td> + </tr> + <tr> + <td><code>href</code></td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("base")}}, {{HTMLElement("link")}}</td> + <td>L'URL de la ressource liée.</td> + </tr> + <tr> + <td><code>hreflang</code></td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td>Cet attribut indique la langue utilisé pour la ressource liée.</td> + </tr> + <tr> + <td><code>http-equiv</code></td> + <td>{{HTMLElement("meta")}}</td> + <td></td> + </tr> + <tr> + <td><code>icon</code></td> + <td>{{HTMLElement("command")}}</td> + <td>Cet attribut indique une image qui représente la commande.</td> + </tr> + <tr> + <td><code>id</code></td> + <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> + <td>Cet attribut permet d'identifier un élément d'un document de façon unique. Il est généralement utilisé pour manipuler l'élément avec des scripts ou pour le mettre en forme avec CSS.</td> + </tr> + <tr> + <td><code>importance</code> {{experimental_inline}}</td> + <td>{{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}</td> + <td>Cet attribut indique la priorité relative pour la récupération (<em>fetch</em>) des ressources.</td> + </tr> + <tr> + <td><code>integrity</code></td> + <td>{{HTMLElement("link")}}, {{HTMLElement("script")}}</td> + <td> + <p>Une fonctionnalité relative à la sécurité qui permet aux navigateurs de vérifier les fichiers qu'ils récupèrent.</p> + </td> + </tr> + <tr> + <td><code>intrinsicsize</code> {{experimental_inline}}</td> + <td>{{HTMLElement("img")}}</td> + <td>Cet attribut indique au navigateur qu'il faut ignorer la taille intrinsèque de l'image et qu'il faut utiliser la taille indiquée avec les attributs.</td> + </tr> + <tr> + <td><code>inputmode</code></td> + <td>{{HTMLElement("textarea")}}, <code>contenteditable</code></td> + <td>Cet attribut fournit une indication sur le type de donnée qui pourrait être saisi par l'utilisateur lors de l'édition du formulaire ou de l'élément. Cet attribut peut être utilisé sur les contrôles de formulaires ou sur les éléments qui sont éditables (par exemple avec l'attribut <code>contenteditable</code>).</td> + </tr> + <tr> + <td><code>ismap</code></td> + <td>{{HTMLElement("img")}}</td> + <td>Cet attribut indique que l'image contribue à une mosaïque d'images interactive côté serveur.</td> + </tr> + <tr> + <td><code>itemprop</code></td> + <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> + <td></td> + </tr> + <tr> + <td><code>keytype</code></td> + <td>{{HTMLElement("keygen")}}</td> + <td>Cet attribut définit le type de clé qui est généré.</td> + </tr> + <tr> + <td><code>kind</code></td> + <td>{{HTMLElement("track")}}</td> + <td>Cet attribut définit le type de piste textuelle.</td> + </tr> + <tr> + <td><code>label</code></td> + <td>{{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("track")}}</td> + <td>Cet attribut définit un titre, lisible par un utilisateur, pour l'élément.</td> + </tr> + <tr> + <td><code>lang</code></td> + <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> + <td>Cet attribut définit la langue utilisée dans l'élément.</td> + </tr> + <tr> + <td><code>language</code></td> + <td>{{HTMLElement("script")}}</td> + <td>Cet attribut définit le langage de script utilisé dans l'élément.</td> + </tr> + <tr> + <td><code>loading</code> {{experimental_inline}}</td> + <td>{{HTMLElement("img")}}, {{HTMLElement("iframe")}}</td> + <td>Cet attribut indique que l'élément doit être chargé à la demande.</td> + </tr> + <tr> + <td><code>list</code></td> + <td>{{HTMLElement("input")}}</td> + <td>Cet attribut constitue une liste d'options prédéfinie qui est suggérée à l'utilisateur.</td> + </tr> + <tr> + <td><code>loop</code></td> + <td>{{HTMLElement("audio")}}, {{HTMLElement("bgsound")}}, {{HTMLElement("marquee")}}, {{HTMLElement("video")}}</td> + <td>Cet attribut indique si le média courant doit recommencer au début une fois que sa lecture est terminée.</td> + </tr> + <tr> + <td><code>low</code></td> + <td>{{HTMLElement("meter")}}</td> + <td>Cet attribut indique la borne supérieure de l'intervalle bas.</td> + </tr> + <tr> + <td><code>manifest</code></td> + <td>{{HTMLElement("html")}}</td> + <td> + <p>Cet attribut définit l'URL du manifeste du document pour la gestion du cache.</p> + + <p>Cet attribut est obsolète, on utilisera plutôt <code><link rel="manifest"></code>.</p> + </td> + </tr> + <tr> + <td><code>max</code></td> + <td>{{HTMLElement("input")}}, {{HTMLElement("meter")}}, {{HTMLElement("progress")}}</td> + <td>Cet attribut indique la valeur maximale autorisée.</td> + </tr> + <tr> + <td><code>maxlength</code></td> + <td>{{HTMLElement("input")}}, {{HTMLElement("textarea")}}</td> + <td>Cet attribut définit le nombre maximal de caractères autorisé dans l'élément.</td> + </tr> + <tr> + <td><code>minlength</code></td> + <td>{{HTMLElement("input")}}, {{HTMLElement("textarea")}}</td> + <td>Cet attribut définit le nombre minimal de caractères qui doivent être saisis dans l'élément.</td> + </tr> + <tr> + <td><code>media</code></td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}}, {{HTMLElement("style")}}</td> + <td>Cet attribut est indication à propos du type de média pour la ressource liée.</td> + </tr> + <tr> + <td><code>method</code></td> + <td>{{HTMLElement("form")}}</td> + <td>Cet attribut définit la méthode <a href="/fr/docs/HTTP">HTTP</a> à utiliser pour l'envoi des données du formulaire (<code>GET</code> par défaut ou <code>POST</code>)</td> + </tr> + <tr> + <td><code>min</code></td> + <td>{{HTMLElement("input")}}, {{HTMLElement("meter")}}</td> + <td>Cet attribut indique la valeur minimale autorisée.</td> + </tr> + <tr> + <td><code>multiple</code></td> + <td>{{HTMLElement("input")}}, {{HTMLElement("select")}}</td> + <td>Cet attribut indique si plusieurs valeurs peuvent être saisies pour des entrées de type <code>email</code> ou <code>file</code>.</td> + </tr> + <tr> + <td><code>muted</code></td> + <td>{{HTMLElement("audio")}},{{HTMLElement("video")}}</td> + <td>Cet attribut indique si le son de la vidéo doit être coupé lorsque la page est chargée initialement.</td> + </tr> + <tr> + <td><code>name</code></td> + <td>{{HTMLElement("button")}}, {{HTMLElement("form")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, {{HTMLElement("map")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}</td> + <td>Le nom de l'élément qui peut être utilisé par le serveur pour identifier le champ d'un formulaire.</td> + </tr> + <tr> + <td><code>novalidate</code></td> + <td>{{HTMLElement("form")}}</td> + <td>Cet attribut indique que les données du formulaire ne doivent pas être validées lors de l'envoi.</td> + </tr> + <tr> + <td><code>open</code></td> + <td>{{HTMLElement("details")}}</td> + <td>Cet attribut indique si les détails seront affichés lors du chargement de la page.</td> + </tr> + <tr> + <td><code>optimum</code></td> + <td>{{HTMLElement("meter")}}</td> + <td>Cet attribut indique la valeur numérique optimale.</td> + </tr> + <tr> + <td><code>pattern</code></td> + <td>{{HTMLElement("input")}}</td> + <td>Cet attribut définit une expression rationnelle contre laquelle valider la valeur de l'élément.</td> + </tr> + <tr> + <td><code>ping</code></td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + <td></td> + </tr> + <tr> + <td><code>placeholder</code></td> + <td>{{HTMLElement("input")}}, {{HTMLElement("textarea")}}</td> + <td>Cet attribut fournit une indication à l'utilisateur sur ce qu'il peut saisir dans le champ.</td> + </tr> + <tr> + <td><code>poster</code></td> + <td>{{HTMLElement("video")}}</td> + <td>Cet attribut est une URL qui indique l'image à afficher tant que l'utilisateur n'a pas lancé la vidéo ou déplacé le curseur.</td> + </tr> + <tr> + <td><code>preload</code></td> + <td>{{HTMLElement("audio")}}, {{HTMLElement("video")}}</td> + <td>Cet attribut indique si toute ou partie, voire aucune partie de la ressource doit être téléchargée en avance.</td> + </tr> + <tr> + <td><code>radiogroup</code></td> + <td>{{HTMLElement("command")}}</td> + <td></td> + </tr> + <tr> + <td><code>readonly</code></td> + <td>{{HTMLElement("input")}}, {{HTMLElement("textarea")}}</td> + <td>Cet attribut indique si l'élément peut être édité.</td> + </tr> + <tr> + <td><code>referrerpolicy</code></td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}</td> + <td>Définit le référent (<em>referrer</em>) envoyé lors de la récupération de la ressource.</td> + </tr> + <tr> + <td><code>rel</code></td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td>Cet attribut définit la relation entre l'objet cible et l'objet du lien.</td> + </tr> + <tr> + <td><code>required</code></td> + <td>{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}</td> + <td>Cet attribut indique si l'élément doit obligatoirement être renseigné dans le formulaire.</td> + </tr> + <tr> + <td><code>reversed</code></td> + <td>{{HTMLElement("ol")}}</td> + <td>Cet attribut indique si la liste doit être affichée dans un ordre décroissant plutôt que dans un ordre croissant.</td> + </tr> + <tr> + <td><code>rows</code></td> + <td>{{HTMLElement("textarea")}}</td> + <td>Cet attribut définit le nombre de lignes pour la zone de texte.</td> + </tr> + <tr> + <td><code>rowspan</code></td> + <td>{{HTMLElement("td")}}, {{HTMLElement("th")}}</td> + <td>Cet attribut définit le nombre de lignes sur lesquelles une cellule doit s'étendre.</td> + </tr> + <tr> + <td><code>sandbox</code></td> + <td>{{HTMLElement("iframe")}}</td> + <td>Empêche un élément chargé dans une <em>iframe</em> d'utiliser certaines fonctionnalités (envoyer des formulaires ou ouvrir de nouvelles fenêtres par exemples).</td> + </tr> + <tr> + <td><code>scope</code></td> + <td>{{HTMLElement("th")}}</td> + <td>Définit les cellules sur lesquelles porte la cellule d'en-tête.</td> + </tr> + <tr> + <td><code>scoped</code></td> + <td>{{HTMLElement("style")}}</td> + <td></td> + </tr> + <tr> + <td><code>selected</code></td> + <td>{{HTMLElement("option")}}</td> + <td>Cet attribut définit la valeur qui sera sélectionnée au chargement de la page.</td> + </tr> + <tr> + <td><code>shape</code></td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + <td></td> + </tr> + <tr> + <td><code>size</code></td> + <td>{{HTMLElement("input")}}, {{HTMLElement("select")}}</td> + <td>Cet attribut définit la largeur de l'élément en pixels, si l'attribut <code>type</code> de l'élément vaut <code>text</code> ou <code>password</code>, cela correspond au nombre de caractères du champ.</td> + </tr> + <tr> + <td><code>sizes</code></td> + <td>{{HTMLElement("link")}}, {{HTMLElement("img")}}, {{HTMLElement("source")}}</td> + <td></td> + </tr> + <tr> + <td><code>slot</code></td> + <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> + <td>Cet attribut affecte un créneau pour un élément dans le <em>shadow DOM</em>.</td> + </tr> + <tr> + <td><code>span</code></td> + <td>{{HTMLElement("col")}}, {{HTMLElement("colgroup")}}</td> + <td></td> + </tr> + <tr> + <td><code>spellcheck</code></td> + <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> + <td>Cet attribut indique si la vérification orthographique est activée pour l'élément courant.</td> + </tr> + <tr> + <td><code>src</code></td> + <td>{{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("script")}}, {{HTMLElement("source")}}, {{HTMLElement("track")}}, {{HTMLElement("video")}}</td> + <td>Cet attribut indique l'URL du contenu embarqué.</td> + </tr> + <tr> + <td><code>srcdoc</code></td> + <td>{{HTMLElement("iframe")}}</td> + <td></td> + </tr> + <tr> + <td><code>srclang</code></td> + <td>{{HTMLElement("track")}}</td> + <td></td> + </tr> + <tr> + <td><code>srcset</code></td> + <td>{{HTMLElement("img")}}</td> + <td></td> + </tr> + <tr> + <td><code>start</code></td> + <td>{{HTMLElement("ol")}}</td> + <td>Cet attribut définit le première nombre de la liste si celui-ci est différent de 1.</td> + </tr> + <tr> + <td><code>step</code></td> + <td>{{HTMLElement("input")}}</td> + <td></td> + </tr> + <tr> + <td><code>style</code></td> + <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> + <td>Cet attribut définit des styles CSS qui auront la priorité sur ceux définis précédemment. Il ne devrait être utilisé qu'à des fins de tests car il est conseillé d'utiliser un/des fichier(s) à part pour gérer la mise en forme.</td> + </tr> + <tr> + <td><code>summary</code></td> + <td>{{HTMLElement("table")}}</td> + <td></td> + </tr> + <tr> + <td><code>tabindex</code></td> + <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> + <td>Cet attribut permet de modifier l'ordre dans la navigation à la tabulation.</td> + </tr> + <tr> + <td><code>target</code></td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("base")}}, {{HTMLElement("form")}}</td> + <td></td> + </tr> + <tr> + <td><code>title</code></td> + <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> + <td>Cet attribut définit un texte expliquant le contenu de l'élément et qui est généralement affiché sous la forme d'une bulle d'information au survol de l'élément.</td> + </tr> + <tr> + <td><code>translate</code></td> + <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> + <td>Cet attribut indique si le contenu textuel de l'élément doit être traduit ou non.</td> + </tr> + <tr> + <td><code>type</code></td> + <td>{{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("command")}}, {{HTMLElement("embed")}}, {{HTMLElement("object")}}, {{HTMLElement("script")}}, {{HTMLElement("source")}}, {{HTMLElement("style")}}, {{HTMLElement("menu")}}</td> + <td>Cet attribut définit le type de l'élément.</td> + </tr> + <tr> + <td><code>usemap</code></td> + <td>{{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}</td> + <td></td> + </tr> + <tr> + <td><code>value</code></td> + <td>{{HTMLElement("button")}}, {{HTMLElement("option")}}, {{HTMLElement("input")}}, {{HTMLElement("li")}}, {{HTMLElement("meter")}}, {{HTMLElement("progress")}}, {{HTMLElement("param")}}</td> + <td>Cet attribut définit la valeur par défaut qui sera affichée dans l'élément au chargement de la page.</td> + </tr> + <tr> + <td><code>width</code></td> + <td>{{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}}</td> + <td> + <p>Pour ces éléments, cet attribut définit la largeur occupée sur l'écran.</p> + + <div class="note"> + <p><strong>Note :</strong> Pour tous les autres éléments, comme {{HTMLElement("div")}}, il faut utiliser la propriété CSS standard {{cssxref("width")}} afin de définir la largeur.</p> + </div> + </td> + </tr> + <tr> + <td><code>wrap</code></td> + <td>{{HTMLElement("textarea")}}</td> + <td>Cet attribut indique l'utilisation du retour automatique à la ligne pour le texte de l'élément.</td> + </tr> + </tbody> +</table> + +<h2 id="Attribut_de_contenu_ou_attribut_IDL">Attribut de contenu ou attribut IDL ?</h2> + +<p>En HTML, la plupart des attributs ont deux aspects : l'<strong>attribut de contenu</strong> et l'<strong>attribut IDL</strong> (pour <em>Interface Definition Language</em> ou langage de définition des interfaces).</p> + +<p>L'attribut de contenu est l'attribut qu'on définit via le contenu (le code HTML) et qu'on obtenir et/ou définir via les méthodes {{domxref("element.setAttribute()")}} et {{domxref("element.getAttribute()")}}. L'attribut de contenu sera toujours une chaîne de caractères, y compris lorsque la valeur attendue est un entier. Ainsi, pour indiquer une <code>maxlength</code> d'un élément {{HTMLElement("input")}} à 42, on utilisera <code>setAttribute("maxlength", "42")</code> sur cet élément.</p> + +<p>L'attribut IDL est également connu sous la forme d'une propriété JavaScript. Ce sont les attributs qu'on peut obtenir ou modifier via JavaScript sous la forme <code class="moz-txt-verticalline">élément.toto</code>. L'attribut IDL utilisera toujours la valeur de l'attribut de contenu sous-jacent, éventuellement en la modifiant pour renvoyer une valeur ou pour la modifier. Autrement dit, les attributs IDL, reflètent les attributs de contenu.</p> + +<p>La plupart du temps, les attributs IDL renverront leurs valeurs, telles qu'elles sont utilisées. Par exemple, le type (l'attribut <code>type</code>) par défaut des éléments {{HTMLElement("input")}} vaut <code>"text"</code>, et si on définit <code>input.type="tototruc"</code>, l'élément <code><input></code> se comportera comme un élément de type <code>text</code> (en termes d'apparence et de comportement) mais le contenu de l'attribut <code>type</code> sera "tototruc". Cependant, l'attribut de type IDL renverra la chaîne <code>"text"</code>.</p> + +<p>Les attributs IDL ne sont pas toujours des chaînes de caractères. <code>input.maxlength</code> est un nombre par exemple (un entier long signé pour être précis). Lorsqu'on manipule des attributs IDL on utilisera toujours le type défini pour l'interface. Ainsi, <code>input.maxlength</code> renverra toujours un nombre et si on souhaite le définir, il faudra le faire avec un nombre, si on passe une valeur d'un autre type, cette valeur sera convertie grâce aux mécanismes de conversion habituels de JavaScript.</p> + +<p>Les attributs IDL peuvent avoir d'autres types : entiers longs non-signés, URL, booléens, etc. Cependant, il n'existe pas de règle claire qui définisse le comportement des attributs IDL en fonction de l'attribut de contenu. La plupart du temps, <a href="https://www.w3.org/TR/2011/WD-html5-20110525/common-dom-interfaces.html#reflecting-content-attributes-in-idl-attributes">les règles de cette spécification seront suivies</a>.</p> + +<h2 id="Attributs_booléens">Attributs booléens</h2> + +<p>Certains attributs de contenu (ex. <code>required</code>, <code>readonly</code>, <code>disabled</code>) sont des <a href="https://www.w3.org/TR/html52/infrastructure.html#sec-boolean-attributes">attributs booléens</a>. Si un attribut booléen est présent, sa valeur correspondra à <em>vrai</em> (<em>true</em>), s'il est absent, sa valeur correspondra à <em>faux</em> (<em>false</em>).</p> + +<p>HTML5 définit certaines restrictions quant aux valeurs autorisées pour les attributs booléens. Si un attribut est présent, sa valeur doit être :</p> + +<ul> + <li>aucune valeur</li> + <li>la chaîne vide</li> + <li>une valeur écrite en ASCII, insensible à la casse, qui représente le nom canonique de l'attribut sans blanc avant ou après la valeur.</li> +</ul> + +<p>Voici quelques exemples valides pour utiliser un attribut booléen :</p> + +<pre><div itemscope>Ce fragment est du HTML valide mais du XML invalide.</div> +<div itemscope=itemscope>Ce fragment est du HTML valide mais du XML invalide.</div> +<div itemscope="">Ce fragment est du HTML valide et du XML valide.</div> +<div itemscope="itemscope">Ce fragment est du HTML et du XML valide mais est plus verbeux.</div></pre> + +<p>Pour être tout à fait explicite, les valeurs <code>"true"</code> et <code>"false"</code> ne sont pas autorisées pour les attributs booléens. Pour représenter une valeur fausse, il faudra ne pas écrire l'attribut du tout.</p> + +<p>Cette règle peut entraîner quelques incompréhensions : si on écrit <code>checked="false"</code> l'attribut <code>checked</code> sera présent et donc considéré comme <em>vrai</em> (<em>true</em>).</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Element">Les éléments HTML</a></li> +</ul> diff --git a/files/fr/web/html/attributs/pattern/index.html b/files/fr/web/html/attributs/pattern/index.html new file mode 100644 index 0000000000..556f50aca9 --- /dev/null +++ b/files/fr/web/html/attributs/pattern/index.html @@ -0,0 +1,161 @@ +--- +title: 'HTML attribute: pattern' +slug: Web/HTML/Attributs/pattern +tags: + - Attribut + - HTML + - Reference +translation_of: Web/HTML/Attributes/pattern +--- +<div>{{HTMLSidebar}}</div> + +<p>L'attribut <strong><code>pattern</code></strong> indique une <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">expression rationnelle</a> que doit respecter la valeur du contrôle du formulaire. Si une valeur non nulle (qui n'est pas <code>null</code>) ne respecte pas les contraintes portées par <code>pattern</code>, la propriété {{domxref('ValidityState.patternMismatch','patternMismatch')}} en lecture seule, rattachée à l'objet {{domxref('ValidityState')}}, vaudra <code>true</code>.</p> + +<p>L'attribut <code>pattern</code> peut être utilisé pour les champs de type {{HTMLElement("input/text", "text")}}, {{HTMLElement("input/tel", "tel")}}, {{HTMLElement("input/email", "email")}}, {{HTMLElement("input/url", "url")}}, {{HTMLElement("input/password", "password")}}, {{HTMLElement("input/search", "search")}}.</p> + +<div id="pattern-include"> +<p>La valeur de cet attribut doit être une expression rationnelle JavaScript valide (voir la documentation de {{jsxref("RegExp")}} et <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">le guide sur les expressions rationnelles</a>). Le marqueur (<em>flag</em>) <code>'u'</code> pour être utilisé afin d'indiquer que l'expression rationnelle est une séquence de codets Unicode et non ASCII. On n'utilisera pas de barres obliques (<em>slashes</em>) autour du texte du motif de l'expression rationnelle.</p> + +<p>Si le motif n'est pas indiqué ou est invalide, aucune expression rationnelle ne sera appliquée et l'attribut sera ignoré.</p> + +<div class="note"> +<p><strong>Note :</strong> On pourra utiliser l'attribut {{htmlattrxref("title", "input")}} afin de fournir aux utilisateurs des explications quant aux règles à respecter pour que la valeur soit valide. Attention, on ne doit pas utiliser uniquement cet attribut pour fournir ces explications. Voir ci-après quant à l'utilisabilité.</p> +</div> +</div> + +<p>Certains types d'<code><input></code> qui prennent en charge l'attribut <code>pattern</code> (notamment {{HTMLElement("input/email", "email")}} et {{HTMLElement("input/url", "url")}}) ont des contraintes particulières qui doivent également être respectées. Si l'attribut <code>pattern</code> n'est pas présent et que la valeur saisie ne respecte pas la syntaxe attendue pour ce type de champ, la propriété en lecture seule {{domxref('ValidityState.typeMismatch','typeMismatch')}} vaudra <code>true</code>.</p> + +<h3 id="Utilisabilité">Utilisabilité</h3> + +<p>Lorsqu'on utilise l'attribut <code>pattern</code>, il est nécessaire de fournir une description du format attendu avec un texte visible près du contrôle. On pourra en plus utiliser l'attribut <code><a href="/fr/docs/Web/HTML/Attributs_universels/title">title</a></code> afin de fournir une description. Les agents utilisateur peuvent utiliser la valeur de <code>title</code> lors de la validation des contraintes afin d'indiquer à l'utilisateur que le motif n'est pas respecté. Certains navigateurs pourront afficher une bulle d'information et certains outils d'assistance pourront énoncer le contenu de <code>title</code> à voix haute lorsque le focus arrive sur le contrôle. Toutefois, l'utilisation seule de cet attribut ne suffit pas pour fournir une accessibilité suffisante.</p> + +<h3 id="Validation_des_contraintes">Validation des contraintes</h3> + +<p>Si la valeur du champ n'est pas la chaîne vide et que la valeur ne respecte pas l'expression rationnelle, on aura une incohérence, portée par {{domxref('ValidityState.patternMismatch','patternMismatch')}}.<br> + L'expression rationnelle indiquée doit correspondre pour toute la chaîne (depuis son début jusqu'à la fin. Autrement dit, c'est comme si on enveloppait l'expression entre <code>^(?:</code> et <code>)$</code> afin d'indiquer que c'est toute la chaîne qui est considérée (et pas une de ses sous-partie).</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Avec le fragment de code HTML suivant :</p> + +<div id="exemple1"> +<pre class="brush: html notranslate"><p> + <label>Veuillez saisir votre numéro de téléphone au format (123)456-7890 + (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)- + <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> - + <input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/> + </label> +</p></pre> + +<p>Ici on a les trois sections d'un numéro de téléphone nord-américain avec les deux premières contenant 3 chiffres et la dernière contenant 4 chiffres.</p> + +<p>Si les valeurs saisies sont trop longues ou trop courtes ou si elles contiennent des caractères qui ne sont pas des chiffres, la valeur de l'attribut <code>patternMismatch</code> sera <code>true</code>. On aura également l'activation de la pseudo-classe CSS {{cssxref(":invalid")}}.</p> + +<pre class="brush: css notranslate">input:invalid { + border: red solid 3px; +}</pre> + +<p>{{EmbedLiveSample("exemple1", 300, 40)}}</p> +</div> + +<p>En utilisant les attributs <code><a href="/fr/docs/Web/HTML/Attributes/minlength">minlength</a></code> et <code><a href="/fr/docs/Web/HTML/Attributes/maxlength">maxlength</a></code> à la place, on aurait eu les propriétés {{domxref('validityState.tooLong')}} ou {{domxref('validityState.tooShort')}} qui auraient valu <code>true</code>.</p> + +<h3 id="Indiquer_un_motif">Indiquer un motif</h3> + +<p>On pourra utiliser l'attribut {{htmlattrxref("pattern","input")}} afin d'indiquer une expression rationnelle qui devra être respectée par la valeur saisie pour que celle-ci soit considérée comme valide (voir <a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire#Validation_selon_une_expression_régulière">ce guide sur la validation avec les expressions rationnelles</a> pour une introduction).</p> + +<p>L'exemple qui suit permet de restreindre les valeurs saisies entre 4 et 8 caractères qui doivent également être des lettres minuscules.</p> + +<pre class="brush: html notranslate"><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}" title="4 à 8 lettres en minuscules"> + <span class="validity"></span> + <p>Les noms d'utilisateurs doivent être en minuscules et contenir 4 à 8 caractères.</p> + </div> + <div> + <button>Envoyer</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">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> +</div> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample('Indiquer_un_motif', 600, 110)}}</p> + +<h3 id="Accessibilité">Accessibilité</h3> + +<p>Lorsqu'un contrôle dispose de l'attribut <code>pattern</code>, l'attribut <code>title</code>, s'il est utilisé, doit décrire le motif souhaité. Attention, reposer uniquement sur l'attribut <code>title</code> pour fournir une aide visuelle n'est pas souhaitable car la plupart des agents utilisateur n'exposent pas cet attribut de façon accessible. Certains navigateurs affichent une bulle d'information lorsqu'on survole l'élément avec un pointeur mais cela laisse de côté les utilisateurs qui naviguent avec le clavier ou ceux qui utilisent une interface tactile. Il faut donc inclure au moins autrement des informations sur la façon de saisir des valeurs qui respectent les contraintes.</p> + +<p>L'attribut <code>title</code> est utilisé par certains navigateurs pour écrire les messages d'erreur. Attention toutefois car les navigateurs affichent également le contenu de cet attribut au survol de l'élément y compris lorsqu'il n'y a pas d'erreur. La formulation doit être choisie avec précaution pour ne pas induire l'utilisateur en erreur.</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#attr-input-pattern', 'pattern')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'forms.html#attr-input-pattern', 'pattern')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#attr-input-pattern', 'pattern')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("html.elements.attributes.pattern")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">Les contraintes de validation</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation">La validation des données de formulaires</a></li> + <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">Les expressions rationnelles (ou expressions régulières / <em>regexp</em>)</a></li> +</ul> diff --git a/files/fr/web/html/attributs_universels/accesskey/index.html b/files/fr/web/html/attributs_universels/accesskey/index.html new file mode 100644 index 0000000000..e53f876ed8 --- /dev/null +++ b/files/fr/web/html/attributs_universels/accesskey/index.html @@ -0,0 +1,143 @@ +--- +title: accesskey +slug: Web/HTML/Attributs_universels/accesskey +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/accesskey +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<div>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>accesskey</strong></code> fournit une indication afin de générer un raccourci clavier pour l'élément courant. La valeur de cet attribut est une liste de caractères (un caractère étant ici un seul point de code Unicode) séparés par des espaces. Le navigateur utilisera le premier caractère qui est disponible selon la disposition du clavier utilisée.</div> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-accesskey.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 combinaison de touches utilisée pour le raccourci clavier dépend du navigateur et du système d'exploitation utilisés.</p> + +<div class="note"> +<p><strong>Note :</strong> La spécification WHATWG indique qu'il est possible d'indiquer des caractères séparés par plusieurs espaces, auquel cas le navigateur considèrera le premier qu'il prend en charge. Toutefois, cela ne fonctionne pas dans la plupart des navigateurs. Pour IE/Edge, c'est la première valeur prise en charge qui sera utilisée si celle-ci n'entre pas en conflit avec d'autres commandes.</p> +</div> + +<table class="standard-table"> + <thead> + <tr> + <th></th> + <th>Windows</th> + <th>Linux</th> + <th>Mac</th> + </tr> + </thead> + <tbody> + <tr> + <th>Firefox</th> + <td colspan="2" rowspan="1"><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>touche</em></kbd></td> + <td> + <p>Pour Firefox 57 et les versions ultérieures : <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd><em>touche</em></kbd> ou <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>touche</em></kbd><br> + Pour Firefox 14 et les versions ultérieures : <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>touche</em></kbd><br> + Pour Firefox 13 et les versions antérieures : <kbd>Control</kbd> + <kbd><em>touche</em></kbd></p> + </td> + </tr> + <tr> + <th>Edge</th> + <td><kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td> + <td colspan="2" rowspan="1">N/A</td> + </tr> + <tr> + <th>Internet Explorer</th> + <td><kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td> + <td colspan="2" rowspan="1">N/A</td> + </tr> + <tr> + <th>Google Chrome</th> + <td colspan="2" rowspan="1"><kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td> + <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td> + </tr> + <tr> + <th>Safari</th> + <td><kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td> + <td>N/A</td> + <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td> + </tr> + <tr> + <th>Opera 15+</th> + <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Opera 12</th> + <td colspan="3" rowspan="1"><kbd>Shift</kbd> + <kbd>Esc</kbd> ouvre une liste de contenu accessible via la touche <code>accesskey</code>, on peut alors ensuite choisir l'élément voulu grâce la touche <kbd><em>touche</em></kbd></td> + </tr> + </tbody> +</table> + +<h2 id="Accessibilité">Accessibilité</h2> + +<p>Au-delà de la prise en charge limitée des navigateurs, <code>accesskey</code> pose plusieurs problèmes :</p> + +<ul> + <li>Un raccourci défini avec <code>accesskey</code> peut rentrer en conflit avec un raccourci du système ou du navigateur, voire avec un raccourci d'un outil d'assistance. Les raccourcis pouvant être différents entre les navigateurs, systèmes d'exploitation et les outils, il n'est pas certain qu'une combinaison qui fonctionne dans un cas puisse fonctionner partout.</li> + <li>Certains raccourcis définis avec <code>accesskey</code> peuvent ne pas être utilisés avec certains claviers, notamment lorsqu'on doit prendre en compte l'internationalisation.</li> + <li>Les raccourcis définis avec <code>accesskey</code> qui utilisent un nombre peuvent être source de confusion pour les personnes souffrant de problèmes cognitifs si le nombre n'a pas d'association logique avec la fonctionnalité déclenchée par le raccourci.</li> + <li>Il est nécessaire d'informer l'utilisateur qu'un raccourci est présent afin que celui-ci puisse être conscient de cette fonctionnalité. Sans méthode d'information, l'utilisateur pourra accidentellement déclencher les raccourcis définis avec <code>accesskey</code>.</li> +</ul> + +<p>Étant donné ces raisons, il est généralement conseillé de ne pas utiliser <code>accesskey</code> pour les sites web et applications généralistes.</p> + +<ul> + <li><a href="https://webaim.org/techniques/keyboard/accesskey#spec">WebAIM : accessibilité au clavier - <code>accesskey</code> (en anglais)</a></li> +</ul> + +<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('HTML5.2', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5.2')}}</td> + <td>Un comportement plus réaliste est défini et correspond à ce qui est réellement implémenté.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Aucune modification depuis {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Aucune modification depuis {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Plusieurs caractères peuvent être définis via cet attribut depuis {{SpecName('HTML4.01')}}. Cet attribut peut désormais être défini sur n'importe quel élément.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>L'attribut est uniquement pris en charge par {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} et {{HTMLElement("textarea")}}.</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.global_attributes.accesskey")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("Element.accessKey")}}</li> + <li>{{domxref("HTMLElement.accessKeyLabel")}}</li> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> +</ul> diff --git a/files/fr/web/html/attributs_universels/autocapitalize/index.html b/files/fr/web/html/attributs_universels/autocapitalize/index.html new file mode 100644 index 0000000000..206412edde --- /dev/null +++ b/files/fr/web/html/attributs_universels/autocapitalize/index.html @@ -0,0 +1,49 @@ +--- +title: autocapitalize +slug: Web/HTML/Attributs_universels/autocapitalize +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/autocapitalize +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>autocapitalize</strong></code> est un attribut à valeurs contraintes qui contrôle la façon dont le texte saisi est automatiquement converti en majuscules ou non. Voici les valeurs autorisées pour cet attribut :</p> + +<ul> + <li><code>off</code> ou <code>none</code> : aucune transformation automatique n'est appliquée (par défaut, les lettres sont écrites en minuscules)</li> + <li><code>on</code> ou <code>sentences</code> : la première lettre de chaque phrase est automatiquement écrite en majuscule, les autres lettres ne sont pas transformées (elles sont par défaut en minuscules)</li> + <li><code>words</code> : la première lettre de chaque mot est automatiquement écrite en majuscule, les autres lettres ne sont pas transformées (elles sont par défaut en minuscules)</li> + <li><code>characters</code> : toutes les lettres sont converties en majuscules.</li> +</ul> + +<p>L'attribut <code>autocapitalize</code> n'a aucun impact lorsqu'on utilise un clavier physique. Il modifie la saisie pour les autres moyens de saisie tels que les claviers virtuels ou les moyens de saisie orale. Le but de cet attribut est d'aider de tels moyens à faciliter la saisie de l'utilisateur. Par défaut, un tel moyen de saisie utilisera une majuscule pour chaque début de phrase, modifier l'attribut <code>autocapitalize</code> permet aux auteurs de modifier ce comportement selon les différents éléments.</p> + +<p>L'attribut <code>autocapitalize</code> n'entraînera pas de mise en majuscule automatique pour un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} vaut <code>url</code>, <code>email</code> ou <code>password</code>.</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', "interaction.html#autocapitalization", "autocapitalize")}}</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.global_attributes.autocapitalize")}}</p> diff --git a/files/fr/web/html/attributs_universels/class/index.html b/files/fr/web/html/attributs_universels/class/index.html new file mode 100644 index 0000000000..6204b6a173 --- /dev/null +++ b/files/fr/web/html/attributs_universels/class/index.html @@ -0,0 +1,63 @@ +--- +title: class +slug: Web/HTML/Attributs_universels/class +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/class +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>class</strong></code> indique une liste de classes associées à l'élément courant. Les classes permettent de manipuler les éléments, via CSS ou JavaScript en utilisant <a href="/fr/docs/Web/CSS/Sélecteurs_de_classe">les sélecteurs de classe</a> ou des fonctions telles que {{domxref("document.getElementsByClassName")}}.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-class.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>Bien que la spécification ne précise aucune contrainte quant aux noms utilisés pour les classes, une bonne pratique consiste à utiliser des noms qui traduisent la sémantique de l'élément plutôt que la mise en forme. Ainsi, les noms sémantiques restent pertinents même lorsque la présentation de la page évolue.</p> + +<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', "dom.html#classes", "class")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Aucune modification depuis {{SpecName('HTML5.1')}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#element-attrdef-global-class", "class")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>État selon {{SpecName('HTML WHATWG')}}. Aucune modification depuis {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#classes", "class")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>État selon {{SpecName('HTML WHATWG')}}. <code>class</code> est désormas sun attribut universel depuis {{SpecName('HTML4.01')}},.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Cet attribut est pris en charge sur tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}.</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.global_attributes.class")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Tous les attributs universels</a></li> +</ul> diff --git a/files/fr/web/html/attributs_universels/contenteditable/index.html b/files/fr/web/html/attributs_universels/contenteditable/index.html new file mode 100644 index 0000000000..1f805fc490 --- /dev/null +++ b/files/fr/web/html/attributs_universels/contenteditable/index.html @@ -0,0 +1,85 @@ +--- +title: contenteditable +slug: Web/HTML/Attributs_universels/contenteditable +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/contenteditable +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>contenteditable</strong></code> est un attribut à valeur contrainte qui indique si l'élément courant doit pouvoir être édité par l'utilisateur ou non. Lorsque c'est le cas, des éléments de l'interface du navigateur (ou de l'agent utilisateur) sont modifiés afin de permettre l'édition.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-contenteditable.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>Les valeurs autorisées pour cet attribut sont :</p> + +<ul> + <li><code>true</code> ou la chaîne de caractères vide qui indiquent que l'élément est éditable</li> + <li><code>false</code> qui indique que l'élément ne peut pas être édité.</li> +</ul> + +<p>Si cet attribut n'est pas défini, sa valeur est héritée depuis son élément parent.</p> + +<p>Cet attribut n'est pas un attribut booléen ! Cela signifie qu'une valeur explicite est nécessaire pour son fonctionnement. Toute forme telle que <code><label contenteditable>Exemple</label></code> n'est pas autorisée. La version correcte sera <code><label contenteditable="true">Exemple</label></code>.</p> + +<p>Il est possible de modifier la couleur du symbole d'insertion grâce à la propriété CSS {{cssxref("caret-color")}}.</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 Editing", "contentEditable.html#contenteditable", "contenteditable")}}</td> + <td>{{Spec2("HTML Editing")}}</td> + <td>Ajout de <code>"events"</code>, <code>"caret"</code>, <code>"typing"</code>, <code>"plaintext-only"</code>.</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "editing.html#attr-contenteditable", "contenteditable")}}</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", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>Dérivation de {{SpecName("HTML WHATWG")}}, aucune modification depuis {{SpecName("HTML5.1")}}</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Dérivation de {{SpecName("HTML WHATWG")}}, aucune modification depuis {{SpecName("HTML5 W3C")}}</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2("HTML5 W3C")}}</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">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.global_attributes.contenteditable")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Contenu_editable">Rendre le contenu éditable</a></li> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Tous les attributs universels</a></li> + <li>{{domxref("HTMLElement.contentEditable")}} et {{domxref("HTMLElement.isContentEditable")}}</li> + <li>{{cssxref("caret-color")}}</li> + <li><a href="/fr/docs/Web/API/HTMLElement/input_event">L'évènement <code>input</code> pour l'objet DOM <code>HTMLElement</code></a></li> +</ul> diff --git a/files/fr/web/html/attributs_universels/contextmenu/index.html b/files/fr/web/html/attributs_universels/contextmenu/index.html new file mode 100644 index 0000000000..187be1f1cc --- /dev/null +++ b/files/fr/web/html/attributs_universels/contextmenu/index.html @@ -0,0 +1,118 @@ +--- +title: contextmenu +slug: Web/HTML/Attributs_universels/contextmenu +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/contextmenu +--- +<div>{{HTMLSidebar("Global_attributes")}}{{obsolete_header}}</div> + +<div class="warning"> +<p><strong>Attention !</strong> Cet attribut est <a href="https://html.spec.whatwg.org/multipage/obsolete.html#attr-contextmenu">obsolète</a> et sera retiré de l'ensemble des navigateurs.</p> +</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>contextmenu</strong></code> correspond à l'{{htmlattrxref("id","","identifiant",1)}} d'un élément {{HTMLElement("menu")}} qu'on souhaite utiliser comme menu contextuel pour l'élément courant.</p> + +<p>Un menu contextuel est un menu qui apparaît suite à une action utilisateur (par exemple un clic-droit). HTML5 permet désormais de personnaliser ce menu.</p> + +<div id="ContextMenu_Example"> +<h2 id="Exemples">Exemples</h2> + +<p>Voici quelques exemples de personnalisations de menus. Le code HTML pourra être :</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html"><body contextmenu="share"> + <menu type="context" id="share"> + <menu label="Partager"> + <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem> + <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem> + </menu> + </menu> + <ol> + <li> + Dans cet exemple, vous pouvez partager un lien vers + cette page sur Facebook et/ou Twitter via le groupe Partager + du menu contextuel + </li> + <li>Sur cette ligne : on peut partager la page sur Twitter ou Facebook grâce au menu Partager du menu contextuel.</li> + <li><pre contextmenu="changeFont" id="fontSizing">Sur cette ligne : on peut changer la taille de la police en utilisant les options "Augmenter/Réduire la taille de la police" du menu contextuel</pre></li> + <menu type="context" id="changeFont"> + <menuitem label="Augmenter la taille de la police" onclick="incFont()"></menuitem> + <menuitem label="Réduire la taille de la police" onclick="decFont()"></menuitem> + </menu> + <li contextmenu="ChangeImage" id="changeImage">Sur cette ligne : on peut utiliser l'option "Changer l'image" du menu.</li><br /> + <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" contextmenu="ChangeImage" id="promoButton" /> + <menu type="context" id="ChangeImage"> + <menuitem label="Changer l'image" onclick="changeImage()"></menuitem> + </menu> + </ol> +</body> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush:js">function shareViaTwitter() { + window.open("https://twitter.com/intent/tweet?text=" + + "Je découvre ContextMenu avec MDN."); +} + +function shareViaFacebook() { + window.open("https://facebook.com/sharer/sharer.php?u=" + + "https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/contextmenu"); +} +function incFont(){ + document.getElementById("fontSizing").style.fontSize="larger"; +} + +function decFont(){ + document.getElementById("fontSizing").style.fontSize="smaller"; +} + +function changeImage(){ + var j = Math.ceil((Math.random()*39)+1); + document.images[0].src="https://developer.mozilla.org/media/img/promote/promobutton_mdn" + j + ".png"; +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<div>{{EmbedLiveSample("Exemples",600,500)}}</div> +</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", "obsolete.html#attr-contextmenu", "contextmenu")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Rendu obsolète</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "interactive-elements.html#context-menus", "contextmenu")}}</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">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.global_attributes.contextmenu")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> + <li>{{domxref("HTMLElement.contextMenu")}}</li> +</ul> diff --git a/files/fr/web/html/attributs_universels/data-_star_/index.html b/files/fr/web/html/attributs_universels/data-_star_/index.html new file mode 100644 index 0000000000..d8befa7a2f --- /dev/null +++ b/files/fr/web/html/attributs_universels/data-_star_/index.html @@ -0,0 +1,83 @@ +--- +title: data-* +slug: Web/HTML/Attributs_universels/data-* +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/data-* +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>Les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a> <code><strong>data-*</strong></code> forment une classe d'attributs, appelés attributs de données (<em>data attributes</em>). Ils permettent d'échanger des données propriétaire entre le <a href="/fr/docs/Web/HTML">HTML</a> et la représentation du <a href="/fr/docs/Web/API/Référence_du_DOM_Gecko">DOM</a>, qu'on peut manipuler avec des scripts.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-data.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>De tels attributs sont disponibles via l'interface {{domxref("HTMLElement")}} de l'élément pour lequel l'attribut est utilisé. La propriété {{domxref("HTMLElement.dataset")}} permet d'accéder à l'attribut.<br> + Ici, l'astérisque (<code>*</code>) peut être remplacée par n'importe quel nom valide selon <a class="external" href="https://www.w3.org/TR/REC-xml/#NT-Name">les règles appliquées aux noms XML</a> et en respectant les contraintes suivantes :</p> + +<ul> + <li>Le nom ne peut pas commencer par <code>xml</code>, quelle que soit la casse utilisée pour les différentes lettres</li> + <li>Le nom ne doit pas contenir de point-virgule (<code>U+003A</code>)</li> + <li>Le nom ne doit pas contenir de lettres majuscules de l'alphabet latin (<code>A</code> à <code>Z</code>).</li> +</ul> + +<p>La propriété {{domxref("HTMLElement.dataset")}} est un objet {{domxref("StringMap")}} et la valeur d'un attribut de donnée nommé <code>data-test-valeur</code> sera accessible via <code>HTMLElement.dataset.testValeur</code> car les tirets (<code>U+002D</code>) sont remplacés par la majuscule de la lettre suivante (<a href="https://fr.wikipedia.org/wiki/CamelCase">CamelCase</a>).</p> + +<h3 id="Utilisation">Utilisation</h3> + +<p>Lorsqu'on ajoute des attributs de données <code>data-*</code>, on peut utiliser les éléments HTML classiques afin d'en faire des objets complexes et puissants. Ainsi, un <em>sprite</em> d'un vaisseau spatial dans un jeu peut être modélisé via un élément {{HTMLElement("img")}} auquel on associe un attribut <code>class</code> et plusieurs attributs de données sous la forme <code>data-*</code>.</p> + +<pre class="brush: html"><img class="spaceship cruiserX3" src="shipX3.png" + data-ship-id="324" data-weapons="laserI laserII" + data-x="414354" data-y="85160" data-z="31940" + onclick="spaceships[this.dataset.shipId].blasted()"> +</img> +</pre> + +<p>Pour un tutoriel plus avancé à propos des attributs de données HTML, lire l'article <a href="/fr/Apprendre/HTML/Comment/Utiliser_attributs_donnes">Manipuler les attributs de données</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', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Pas de modification depuis la dernière dérivation, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Dérivée de {{SpecName('HTML WHATWG')}}, pas de changement depuis {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Dérivée de {{SpecName('HTML WHATWG')}}, 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.global_attributes.data_attributes")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> + <li>La propriété {{domxref("HTMLElement.dataset")}} qui permet d'accéder à ces valeurs et de les modifier.</li> +</ul> diff --git a/files/fr/web/html/attributs_universels/dir/index.html b/files/fr/web/html/attributs_universels/dir/index.html new file mode 100644 index 0000000000..5cf187f35e --- /dev/null +++ b/files/fr/web/html/attributs_universels/dir/index.html @@ -0,0 +1,90 @@ +--- +title: dir +slug: Web/HTML/Attributs_universels/dir +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/dir +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>dir</strong></code> est un attribut à valeur contrainte qui indique la direction du texte contenu dans l'élément.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-dir.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>Les valeurs autorisées pour cet attribut sont :</p> + +<ul> + <li><code>ltr</code> : qui signifie <em>left to right </em>(gauche à droite), utilisé pour les langages écrits de gauche à droite (comme le français ou l'anglais par exemple)</li> + <li><code>rtl</code> : qui signifie <em>right to left</em> (droite à gauche), utilisé pour les langages écrits de droite à gauche (comme l'arabe par exemple)</li> + <li><code>auto</code> : qui délègue la décision à l'agent utilisateur. L'algorithme utilisé est relativement simple : le contenu textuel est analysé et lorsque le premier caractère possédant une direction « forte » est rencontré, cette direction est prise pour l'ensemble de l'élément.</li> +</ul> + +<div class="note"> +<p><strong>Notes d'utilisation :</strong><br> + Cet attribut est obligatoire pour l'élément {{HTMLElement("bdo")}}, pour lequel l'attribut a une sémantique différente.</p> + +<ul> + <li> + <p>La valeur de l'attribut n'est pas héritée par l'élément {{HTMLElement("bdi")}}. S'il n'est pas défini, la valeur par défaut sera <code>auto</code>.</p> + </li> + <li> + <p>Cet attribut peut être surchargé par les propriétés CSS {{cssxref("direction")}} et {{cssxref("unicode-bidi")}}, (qui sont appliquées si une page CSS est active et que l'élément courant prend en charge ces propriétés).</p> + </li> + <li> + <p>La direction du texte est généralement liée à la sémantique du contenu et non à sa présentation. Il est donc recommandé d'utiliser cet attribut plutôt que des propriétés CSS quand la direction n'est pas lié à une quelconque mise en forme. Ainsi, le texte sera affiché correctement, y compris si le navigateur ne supporte pas ces propriétés CSS ou si CSS est désactivé.</p> + </li> + <li> + <p>La valeur <code>auto</code> doit être utilisée pour des données dont la direction est inconnue (comme par exemple des données provenant d'une saisie utilisateur).</p> + </li> +</ul> +</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', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Aucun changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Dérivée de {{SpecName('HTML WHATWG')}}, aucun changement de {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Dérivée de {{SpecName('HTML WHATWG')}}, à partir de {{SpecName('HTML4.01')}} la valeur <code>auto</code> a été ajoutée et l'attribut est un attribut global à part entière.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "dirlang.html#h-8.2", "dir")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Attribut pris en charge pour tous les éléments à l'exception {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, et {{HTMLElement("script")}}.</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.global_attributes.dir")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> + <li>La propriété {{domxref("HTMLElement.dir")}} qui reflète cet attribut</li> +</ul> diff --git a/files/fr/web/html/attributs_universels/draggable/index.html b/files/fr/web/html/attributs_universels/draggable/index.html new file mode 100644 index 0000000000..fe5d5cf514 --- /dev/null +++ b/files/fr/web/html/attributs_universels/draggable/index.html @@ -0,0 +1,71 @@ +--- +title: draggable +slug: Web/HTML/Attributs_universels/draggable +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/draggable +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>draggable</strong></code> est un attribut à valeur contrainte qui indique si l'élément peut être déplacé avec la souris dans un geste de glisser-déposer lorsqu'on utilise l'API <em><a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">Drag & Drop</a></em> ou les fonctionnalités natives du navigateur. Les valeurs autorisées pour cet attribut sont les suivantes :</p> + +<ul> + <li><code>true</code> : qui indique que l'élément peut être déplacé à la souris</li> + <li><code>false</code> : qui indique que l'élément ne peut pas être déplacé à la souris</li> +</ul> + +<p>Si l'attribut n'est pas défini, la valeur par défaut sera <code>auto</code> : le comportement de l'élément sera celui spécifié par défaut par le navigateur.</p> + +<p>Cet attribut est un attribut à valeur contrainte, ce n'est pas un attribut booléen. Il faut donc utiliser une valeur explicite <code>true</code> ou <code>false</code>. La notation raccourcie <code><img draggable></code>(utilisant uniquement le nom de l'attribut) ne fonctionnera pas :</p> + +<pre class="example-bad brush: html"><label draggable>Label exemple</label></pre> + +<p>En revanche, on pourra correctement utiliser :</p> + +<pre class="example-good brush: html"><label draggable="true">Label exemple</label></pre> + +<p>Par défaut, seules les sélections de texte, les images et les liens peuvent être déplacés à la souris. Pour les autres éléments, il faudra définir le gestionnaire d'événements pour {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} afin de faire fonctionner le glisser-déposer. Cela est illustré <a href="/fr/docs/Glisser_et_déposer/Opérations_de_glissement">dans cet exemple</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", "interaction.html#the-draggable-attribute", "draggable")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Aucune modification depuis la dernière dérivation de {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "interaction.html#the-draggable-attribute", "draggable")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>Aucune modification</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#the-draggable-attribute", "draggable")}}</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">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.global_attributes.draggable")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> +</ul> diff --git a/files/fr/web/html/attributs_universels/dropzone/index.html b/files/fr/web/html/attributs_universels/dropzone/index.html new file mode 100644 index 0000000000..e645e30973 --- /dev/null +++ b/files/fr/web/html/attributs_universels/dropzone/index.html @@ -0,0 +1,48 @@ +--- +title: dropzone +slug: Web/HTML/Attributs_universels/dropzone +tags: + - Attribut universel + - HTML + - Obsolete + - Reference +translation_of: Web/HTML/Global_attributes/dropzone +--- +<div>{{HTMLSidebar("Global_attributes")}} {{deprecated_header}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>dropzone</strong></code> est un attribut à valeur contrainte qui indique le type de contenu qui peut être déposé sur un élément, il est utilisé avec l'<a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">API <em>Drag & Drop</em></a>. Les valeurs autorisées pour cet attribut sont :</p> + +<ul> + <li><code>copy</code> qui indique que déposer un élément glissé créera une copie de celui-ci</li> + <li><code>move</code> qui indique qu'un élément qui a été glissé sera déplacé vers son nouvel emplacement</li> + <li><code>link</code> qui crée un lien vers les données déplacées</li> +</ul> + +<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('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Dérivée de {{SpecName('HTML WHATWG')}}, 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.global_attributes.dropzone")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> +</ul> diff --git a/files/fr/web/html/attributs_universels/hidden/index.html b/files/fr/web/html/attributs_universels/hidden/index.html new file mode 100644 index 0000000000..c14d208620 --- /dev/null +++ b/files/fr/web/html/attributs_universels/hidden/index.html @@ -0,0 +1,69 @@ +--- +title: hidden +slug: Web/HTML/Attributs_universels/hidden +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/hidden +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>hidden</strong></code> est un attribut booléen qui indique s'il n'est pas encore ou s'il n'est plus pertinent d'afficher l'élément courant. Cet attribut peut, par exemple, être utilisé afin de masquer des éléments tant que l'utilisateur ne s'est pas connecté. Le navigateur n'affichera pas les éléments masqués via cet attribut.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-hidden.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>Cet attribut ne doit pas être utilisé pour masquer du contenu qui devrait pouvoir être vu sous une autre présentation. Si un contenu est marqué comme masqué, il sera masqué pour l'ensemble des présentations, y compris pour les lecteurs d'écran et autres outils d'assistance.</p> + +<p>Les éléments cachés avec <code>hidden</code> ne devraient pas avoir de lien qui pointent vers eux depuis des éléments visibles. De plus, les éléments fils de l'élément caché sont toujours actifs : cela signifie qu'ils peuvent être utilisés par les scripts et que les formulaires peuvent envoyer des données. Dans certains autres contextes, il est possible d'avoir des relations avec les éléments cachés via <code>hidden</code>.</p> + +<p>Par exemple, on peut utiliser l'attribut ARIA <code>aria-describedby</code> pour faire référence à une description qui serait cachée (si cette dernière n'est pas pertinente seule). De même un élément {{HTMLElement("canvas")}} caché peut être utilisé comme un <em>buffer</em> hors champ par moteur graphique scripté.</p> + +<div class="note"> +<p><strong>Note :</strong> Cet attribut sera surchargé par la propriété CSS {{cssxref("display")}}. Ainsi, un élément dont le style a <code>display: flex</code> sera affiché à l'écran, même si l'attribut <code>hidden</code> est présent.</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', "interaction.html#the-hidden-attribute", "hidden")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Aucune modification depuis {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Définit le rendu par défaut suggéré en CSS lorsque l'attribut <code>hidden</code> est utilisé.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Dérivée de {{SpecName('HTML WHATWG')}}. La 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.global_attributes.hidden")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> + <li><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute">Utiliser l'attribut <code>aria-hidden</code></a></li> +</ul> diff --git a/files/fr/web/html/attributs_universels/id/index.html b/files/fr/web/html/attributs_universels/id/index.html new file mode 100644 index 0000000000..a08d5e0dce --- /dev/null +++ b/files/fr/web/html/attributs_universels/id/index.html @@ -0,0 +1,72 @@ +--- +title: id +slug: Web/HTML/Attributs_universels/id +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/id +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>id</strong></code> définit un identifiant qui doit être unique pour l'ensemble du document. Le but de cet attribut est de pouvoir identifier un élément lorsqu'on crée un lien, <a href="/fr/docs/Web/HTTP/Basics_of_HTTP/Identifier_des_ressources_sur_le_Web#Fragment">avec un fragment</a> et qu'on souhaite le manipuler avec un script ou qu'on le met en forme avec CSS.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-id.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="blockIndicator warning"> +<p><strong>Note :</strong> La valeur de cet attribut est une chaîne de caractère « opaque ». Cela signifie que cet attribut ne doit pas être utilisé pour transporter de l'information. Les informations sur la signification de l'élément dans le document ne doivent pas être portées par la valeur de cet attribut.</p> +</div> + +<p>La valeur de cet attribut ne doit pas contenir de blancs (espaces, tabulation, etc.). Les navigateurs interprèteront les identifiants avec des espaces comme si l'espace faisait partie de l'identifiant. Ce comportement est différent de celui de l'attribut {{htmlattrxref("class")}} qui permet d'avoir des valeurs séparées par des espaces. Les éléments ne peuvent avoir qu'un seul identifiant défini via l'attribut <code><strong>id</strong></code>.</p> + +<div class="note"> +<p><strong>Note :</strong> L'utilisation de caractères non-ASCII ou qui ne sont pas des chiffres latins ou<code>'_'</code>, <code>'-'</code> et <code>'.'</code> peut entraîner des problèmes de compatibilité car ils n'étaient pas autorisé avec HTML 4. Bien que cette restriction n'existe plus avec HTML 5, un identifiant devrait toujours commencer par une lettre pour une meilleure compatibilité.</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', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Aucun changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Dérivée de {{SpecName('HTML WHATWG')}}, aucun changement depuis {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Dérivée de {{SpecName('HTML WHATWG')}}, les caractères <code>'_'</code>, <code>'-'</code> et <code>'.'</code> sont désormais acceptés s'ils ne sont pas utilisés au début de l'identifiant. Cet attribut devient un attribut global à part entière.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Pris en charge par tous les éléments sauf {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, et {{HTMLElement("title")}}.</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.global_attributes.id")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("Element.id")}} qui reflète cet attribut</li> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> +</ul> diff --git a/files/fr/web/html/attributs_universels/index.html b/files/fr/web/html/attributs_universels/index.html new file mode 100644 index 0000000000..779e617a3d --- /dev/null +++ b/files/fr/web/html/attributs_universels/index.html @@ -0,0 +1,196 @@ +--- +title: Les attributs universels +slug: Web/HTML/Attributs_universels +tags: + - Attribut + - Attribut universel + - HTML + - Reference + - Web +translation_of: Web/HTML/Global_attributes +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>Les <strong>attributs universels</strong> sont des attributs communs à l'ensemble des éléments HTML. Ces attributs peuvent donc être ajoutés sur tous les éléments (dans certains cas, les attributs n'auront aucun effet).</p> + +<p>Les attributs universels peuvent être définis sur tous <a href="/fr/docs/Web/HTML/Element">les éléments HTML</a>, <em>y compris pour les éléments non définis dans le standard</em>. Autrement dit, les éléments non-standards doivent pouvoir accepter ces attributs. Cela permettra au navigateur de les gérer selon certains des aspects de la spécification. Par exemple, pour un navigateur conforme, un élément <code><toto hidden>...</toto></code> sera masqué bien que <code><toto></code> ne soit pas un élément HTML valide.</p> + +<p>En plus des attributs universels HTML, il existe également les attributs universels suivants :</p> + +<ul> + <li>{{htmlattrdef("xml:lang")}} et {{htmlattrdef("xml:base")}} : ces attributs proviennent des spécifications XHTML. Ils sont désormais dépréciés mais conservés pour des raisons de compatibilité.</li> + <li>Les nombreux attributs <code><strong><a href="/fr/docs/Accessibilité/ARIA">aria-*</a></strong></code> utilisés afin d'améliorer l'accessibilité.</li> + <li>Les attributs utilisés pour <a href="/fr/docs/Web/Guide/DOM/Events/Event_handlers">les gestionnaires d'événements</a> déclarés directement sur les éléments : <code><strong>onabort</strong></code>, <code><strong>onautocomplete</strong></code>, <code><strong>onautocompleteerror</strong></code>, <code><strong>onblur</strong></code>, <code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncontextmenu</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onsort</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code>.</li> +</ul> + +<h2 id="Liste_des_attributs_universels">Liste des attributs universels</h2> + +<dl> + <dt>{{htmlattrdef("accesskey")}}</dt> + <dd>Cet attribut fournit une indication permettant de générer un raccourci clavier pour l'élément courant. Cet attribut se compose d'une liste de caractères séparés par des espaces. Le navigateur doit utiliser le premier caractère qui existe selon la disposition du clavier utilisée.</dd> + <dt>{{htmlattrdef("autocapitalize")}}</dt> + <dd>Cet attribut contrôle la façon dont le texte saisi est automatiquement converti en majuscules. Les valeurs autorisées pour cet attribut sont : + <ul> + <li><code>off</code> ou <code>none</code> : il n'y pas de convertion en majuscules réalisée.</li> + <li><code>on</code> ou <code>sentences</code> : la première lettre de chaque phrase est écrite en majuscule par défaut. Les autres lettres sont en minuscules par défaut.</li> + <li><code>words</code> : la première lettre de chaque mot est écrite en majuscule par défaut, les autres lettres sont en minuscules par défaut.</li> + <li><code>characters</code> : toutes les lettres sont écrites en majuscules par défaut</li> + </ul> + </dd> + <dt>{{htmlattrdef("class")}}</dt> + <dd>Une liste de classes, séparées par des espaces, qui permettent de catégoriser l'élément. Les classes permettent au CSS et à JavaScript de manipuler des éléments spécifiques grâce à <a href="/fr/docs/Web/CSS/Sélecteurs_de_classe">des sélecteurs de classe</a> (pour CSS) ou grâce à des fonctions telles que {{domxref("Document.getElementsByClassName()")}} (pour JavaScript).</dd> + <dt>{{htmlattrdef("contenteditable")}}</dt> + <dd>Un attribut à valeur contrainte qui indique si l'élément peut être édité par l'utilisateur. Si c'est le cas, le navigateur modifie l'interface utilisateur afin de permettre l'édition. Les valeur autorisées pour cet attribut sont : + <ul> + <li><code>true</code> ou la chaîne vide : ces valeurs indiquent que l'élément doit pouvoir être édité</li> + <li><code>false</code> qui indique que l'élément ne doit pas pouvoir être édité.</li> + </ul> + </dd> + <dt>{{htmlattrdef("contextmenu")}}{{obsolete_inline}}</dt> + <dd>La valeur de cet attribut correspond à la valeur de l'attribut {{htmlattrxref("id","menu")}} d'un élément {{HTMLElement("menu")}} qui doit être utilisé comme menu contextuel par cet élément.</dd> + <dt>{{htmlattrdef("data-*")}}</dt> + <dd>Cette classe d'attribut, appelée « attributs de données personnalisés », permet d'échanger des informations dans un format propriétaire entre le HTML et le DOM afin de pouvoir les manipuler via des langage de scripts. La propriété {{domxref("HTMLElement.dataset")}} permet d'accéder à l'ensemble des attribut définis de cette façon.</dd> + <dt>{{htmlattrdef("dir")}}</dt> + <dd>Un attribut à valeur contrainte qui indique la directionnalité du texte de l'élément. Les valeurs autorisées pour cet attribut sont : + <ul> + <li><code>ltr</code> (l'abbréviation anglaise pour <em>Left To Right</em>) indique que le contenu est écrit de gauche à droite (comme le français par exemple)</li> + <li><code>rtl</code> (l'abbréviation anglaise pour <em>Right To Left</em>) indique que le contenu est écrit de droite à gauche (comme l'arabe par exemple)</li> + <li><code>auto</code> : c'est l'agent utilisateur qui décide. Il utilise un algortihme qui analyse les caractères du contenu de l'élément jusqu'à trouver un caractère avec une forte directionnalité qu'il applique alors à l'ensemble de l'élément.</li> + </ul> + </dd> + <dt>{{htmlattrdef("draggable")}}</dt> + <dd>Un attribut à valeur contrainte qui indique qu'un élément peut être glissé/déposé grâce à l'<a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">API <em>Drag & Drop</em></a>. Les valeurs autorisées pour cet attribut sont : + <ul> + <li><code>true</code> : l'élément peut être glissé/déposé</li> + <li><code>false</code> : l'élément ne peut pas être glissé/déposé.</li> + </ul> + </dd> + <dt>{{htmlattrdef("dropzone")}} {{experimental_inline}}</dt> + <dd>Un attribut à valeur contrainte qui indique le type de contenu qui peut être déposé sur un élément grâce à l'<a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">API <em>Drag & Drop</em></a>. Les valeurs autorisées pour cet attribut sont : + <ul> + <li><code>copy</code> : lorsque l'élément est déposé, une copie de l'élément est créée</li> + <li><code>move</code> : lorsque l'élément est déposé, il est déplacé vers ce nouvel emplacement</li> + <li><code>link</code> : un lien est créé vers les données qui sont déplacée.</li> + </ul> + </dd> + <dt>{{htmlattrdef("exportparts")}} {{experimental_inline}}</dt> + <dd>Utilisé pour exporter de façon transitive certaines parties d'un arbre <em>shadow</em> sur un arbre réel.</dd> + <dt>{{htmlattrdef("hidden")}}</dt> + <dd>Un attribut booléen dont la valeur indique que l'élément n'est pas encore, ou n'est plus <em>pertinent</em>. Cet attribut peut ainsi être utilisé pour masquer les éléments d'une page qui ne peuvent pas être utilisés tant que la procédure de connexion n'est pas terminée. Le navigateur n'affichera pas les éléments pour lesquels cet attribut est utilisé. Cet attribut ne doit pas être utilisé afin de masquer du contenu qui aurait pu être affiché de façon pertinente.</dd> + <dt>{{htmlattrdef("id")}}</dt> + <dd>Cet attribut définit un identifiant, unique au sein de tout le document, ,pour un élément. Il doit permettre d'identifier un élément lorsqu'on crée un lien vers lui et/ou lorsque le manipule avec des scripts ou avec CSS.</dd> + <dt>{{htmlattrdef("inputmode")}}</dt> + <dd>Cet attribut fournit une indication au navigateur quant au type de contenu qui sera saisi dans le champ et qui aide à déterminer la configuration du clavier virtuel qui peut être affiché pour la saisie. Ce type est principalement utilisé pour les éléments {{HTMLElement("input")}} mais peut tout à fait être utilisé sur n'importe quel élément avec le mode {{htmlattrxref("contenteditable")}}.</dd> + <dt>{{htmlattrdef("is")}}</dt> + <dd>Cet attribut indique qu'un élément HTML standard devrait se comporter comme un élément personnalisé natif (voir <a href="/fr/docs/Web/Web_Components/Using_custom_elements">Manipuler les custom elements</a> pour plus d'informations).</dd> + <dt>{{htmlattrdef("itemid")}}</dt> + <dd>L'identifiant unique, global, d'un objet. Cet attribut est lié <a href="https://html.spec.whatwg.org/multipage/#toc-microdata">aux microdonnées</a>.</dd> + <dt>{{htmlattrdef("itemprop")}}</dt> + <dd>Cet attribut permet d'ajouter des propriétés à un objet. Cet attribut est une paire entre un nom et une valeur. Cet attribut est lié <a href="https://html.spec.whatwg.org/multipage/#toc-microdata">aux microdonnées</a>.</dd> + <dt>{{htmlattrdef("itemref")}}</dt> + <dd>Les propriétés d'un objet qui ne sont pas les éléments descendants de l'élément courant peuvent être associée via l'attribut <code>itemscope</code> contenant une référence vers un <code>itemref</code>. <code>itemref</code> fournit une liste d'identifiants d'éléments qui correspondent aux propriétés supplémentaires définies autre part dans le document. Cet attribut est lié <a href="https://html.spec.whatwg.org/multipage/#toc-microdata">aux microdonnées</a>.</dd> + <dt>{{htmlattrdef("itemscope")}}</dt> + <dd><code>itemscope</code> fonctionne généralement avec <code>itemtype</code> afin d'indiquer que le coded HTML contenu dans un bloc donné concerne un objet en particulier. <code>itemscope</code> crée l'objet et définit la portée de l'<code>itemtype</code> associée. <code>itemtype</code> est une URL valide construite à partir d'un vocabulaire (par exemple <a href="https://schema.org/">schema.org</a>) qui décrit les objets et leurs propriétés. Cet attribut est lié <a href="https://html.spec.whatwg.org/multipage/#toc-microdata">aux microdonnées</a>.</dd> + <dt>{{htmlattrdef("itemtype")}}</dt> + <dd>Cet attribut indique l'URL du vocabulaire utilisé pour définir les propriétés d'un objet. Cet attribut est lié <a href="https://html.spec.whatwg.org/multipage/#toc-microdata">aux microdonnées</a>.</dd> + <dt>{{htmlattrdef("lang")}}</dt> + <dd>Cet attribut aide à définir la langue utilisée pour l'élément. Pour les éléments non-éditables, c'est la langue dans laquelle ils sont écrits et pour les éléments éditables, c'est la langue dans laquelle ils devraient être écrits. Cet attribut contient une seule valeur telle que définie dans le document IETF <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a>. L'attribut <code><strong>xml:lang</strong></code> est prioritaire par rapport à cet attribut lorsqu'il s'agit de déterminer la langue d'un élément.</dd> + <dt>{{htmlattrdef("part")}} {{experimental_inline}}</dt> + <dd>Une liste séparée par des espaces avec les noms des parties (<em>parts</em>) de l'élément. Les noms des parties permettent au CSS de cibler et de mettre en forme certains éléments d'un arbre <em>shadow</em> via le pseudo-élément {{cssxref("::part")}}.</dd> + <dt>{{htmlattrdef("slot")}}</dt> + <dd>Cet attribut affecte un créneau de l'arbre du <em><a href="/fr/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a></em> pour un élément. L'élément ayant l'attribut <code>slot</code> est affecté au créneau créé par l'élément {{HTMLElement("slot")}} pour lequel l'attribut {{htmlattrxref("name", "slot")}} correspond à la valeur de l'attribut <code>slot</code>.</dd> + <dt>{{htmlattrdef("spellcheck")}} {{experimental_inline}}</dt> + <dd>Un attribut à valeur contrainte qui définit s'il faut détecter les fautes d'orthographe/grammaire dans le texte de l'élément. Les valeurs autorisées pour cet attribut sont : + <ul> + <li><code>true</code> qui indique que, si possible, il faut vérifier les erreurs d'orthographe</li> + <li><code>false</code> qui indique qu'il ne faut pas vérifier les erreurs.</li> + </ul> + </dd> + <dt>{{htmlattrdef("style")}}</dt> + <dd>Cet attribut contient les déclarations <a href="/fr/docs/Web/CSS/">CSS</a> utilisées pour mettre en forme l'élément. Note : il est recommandé d'utiliser un ou plusieurs fichiers séparés, plutôt que cet attribut, pour définir les règles de mise en forme. Le rôle de l'élément {{HTMLElement("style")}} consiste à permettre une mise en forme rapide, notamment pour des tests.</dd> + <dt>{{htmlattrdef("tabindex")}}</dt> + <dd>Cet attribut à valeur entière indique l'ordre dans lequel l'élément participe à la navigation au clavier via la tabulation. Il peut prendre différente valeur : + <ul> + <li>une valeur négative indiquera que l'élément peut recevoir le focus mais n'est pas accessible via la navigation séquentielle au clavier</li> + <li><code>0</code> indiquera que l'élément peut recevoir le focus et être accessible via la navigation au clavier mais l'ordre est relatif et déterminé par l'agent utilisateur</li> + <li>une valeur positive indiquera que l'élément peut recevoir le focus et qu'il est accessible via la navigation au clavier. La valeur utilisée indique l'ordre relatif de l'élément dans la navigation. Autrement dit, la navigation au clavier ira dans le sens croissant des éléments selon leurs valeurs respectives de <code>tabindex</code>. Si plusieurs éléments ont la même valeur, ce sera leur ordre relatif dans le document qui sera utilisé.</li> + </ul> + </dd> + <dt>{{htmlattrdef("title")}}</dt> + <dd>Cet attribut contient une représentation textuelle de l'information auquel il est lié. Une telle information est généralement, mais pas nécessairement, affichée sous la forme d'une bulle d'informations.</dd> + <dt>{{htmlattrdef("translate")}} {{experimental_inline}}</dt> + <dd>Un attribut à valeur contrainte qui est utilisé pour définir si les valeurs des attributs et des éléments fils de type {{domxref("Text")}} doivent être traduits lorsque la page est localisée. Les valeurs autorisées pour cet attribut sont : + <ul> + <li>La chaîne vide ou <code>yes</code> qui indiquent que l'élément doit être traduit</li> + <li><code>no</code> qui indique que l'élément ne sera pas traduit.</li> + </ul> + </dd> +</dl> + +<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", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS Shadow Parts", "#exposing")}}</td> + <td>{{Spec2("CSS Shadow parts")}}</td> + <td>Ajout des attributs universels <code>part</code> et <code>exportparts</code>.</td> + </tr> + <tr> + <td>{{SpecName("HTML5.3", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML5.3")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>Dérivation de {{SpecName("HTML WHATWG")}}. Depuis, {{SpecName("HTML5.1")}}, les attributs <code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code> et <code>itemtype</code> ont été ajoutés.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Les attributs <code>contextmenu</code>, <code>spellcheck</code>, <code>draggable</code>, et <code>dropzone</code> ont été ajoutés depuis {{SpecName('HTML5 W3C')}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Le concept d'attribut universel est introduit et les attributs <code>dir</code>, <code>lang</code>, <code>style</code>, <code>id</code>, <code>class</code>, <code>tabindex</code>, <code>accesskey</code>, <code>title</code> sont désormais des attributs universels.<br> + <code>xml:lang</code> qui faisait initialement partie de XHTML est inclus dans HTML. Les attributs<br> + <code>hidden</code>, <code>data-*</code>, <code>contenteditable</code> et <code>translate</code> sont ajoutés.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Aucun attribut universel n'est défini. Plusieurs attributs, devenus universels par la suite, sont définis sur un sous-ensemble d'élément.<br> + <code>class</code> et <code>style</code> sont pris en charge pour tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}.<br> + <code>dir</code> est pris en charge pour tous les éléments à l'exception de {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} et {{HTMLElement("script")}}.<br> + <code>id</code> est pris en charge pour tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}.<br> + <code>lang</code> est pris en charge pour tous les éléments à l'exception de {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} et {{HTMLElement("script")}}.<br> + <code>tabindex</code> est uniquement pris en charge pour les éléments {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}} et {{HTMLElement("textarea")}}.<br> + <code>accesskey</code> est uniquement pris en charge pour {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} et {{HTMLElement("textarea")}}.<br> + <code>title</code> est pris en charge pour tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}} et {{HTMLElement("title")}}.</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.global_attributes")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les interfaces {{domxref("Element")}} et {{domxref("GlobalEventHandlers")}} qui permettent de manipuler la plupart des attributs globaux.</li> +</ul> diff --git a/files/fr/web/html/attributs_universels/inputmode/index.html b/files/fr/web/html/attributs_universels/inputmode/index.html new file mode 100644 index 0000000000..2babf82909 --- /dev/null +++ b/files/fr/web/html/attributs_universels/inputmode/index.html @@ -0,0 +1,65 @@ +--- +title: inputmode +slug: Web/HTML/Attributs_universels/inputmode +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/inputmode +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary">L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <strong><code>inputmode</code></strong> est un attribut à valeur contrainte qui fournit une indication au navigateur quant au type de donnée qui peut être saisi par l'utilisateur lors de l'édition de l'élément ou de son contenu.</span> Les valeurs autorisées sont les suivantes :</p> + +<dl> + <dt><code>none</code></dt> + <dd>Aucun clavier virtuel ne doit être affiché. Cette valeur s'avère utile lorsque l'application ou le site web implémente son propre outil de saisie.</dd> + <dt><code>text</code></dt> + <dd>C'est du texte qui sera saisi et un clavier dans la locale de l'utilisateur pourra être affiché.</dd> + <dt><code>decimal</code></dt> + <dd>C'est un nombre décimal qui sera saisi. Le clavier affiché peut contenir des chiffres et le séparateur décimal de la locale de l'utilisateur. Attention, selon les appareils, le signe moins (<code>-</code>) peut ne pas être présent.</dd> + <dt><code>numeric</code></dt> + <dd>C'est un nombre entier qui sera saisi. Le clavier affiché peut contenir les chiffres de 0 à 9. Attention, selon les appareils, le signe moins (<code>-</code>) peut ne pas être présent.</dd> + <dt><code>tel</code></dt> + <dd>C'est un numéro de téléphone qui sera saisi. Le clavier affiché pourra être celui d'un téléphone avec les chiffres allant de 0 à 9, l'astérisque et le dièse. Pour les champs de formulaire où il faut saisir un numéro de téléphone, on utilisera plutôt <code><a href="/fr/docs/Web/HTML/Element/Input/tel"><input type="tel"></a></code>.</dd> + <dt><code>search</code></dt> + <dd>L'élément éditable sert à la recherche. Le clavier affiché sera optimisé pour une recherche (par exemple, la touche Entrée pourra être indiquée avec le mot-clé « Rechercher »).</dd> + <dt><code>email</code></dt> + <dd>C'est une adresse électronique qui sera saisie. Le clavier affiché pourra être optimisé pour la saisie d'adresses email (généralement, on aura le caractère @ et d'autres éléments). Pour les champs de formulaire où il faut saisir une adresse électronique, on utilisera plutôt <code><a href="/fr/docs/Web/HTML/Element/Input/email"><input type="email"></a></code>.</dd> + <dt><code>url</code></dt> + <dd>C'est une URL qui sera saisie. Le clavier affiché pourra être optimisé pour la saisie d'URL. Ainsi, la touche pour la barre oblique pourra être plus accessible, le clavier pourra proposer un accès à l'historique des URL utilisées, etc. Pour les champs de formulaire où il faut saisir une URL, on utilisera plutôt <code><a href="/fr/docs/Web/HTML/Element/Input/url"><input type="url"></a></code>.</dd> +</dl> + +<p>Lorsque cet attribut n'est pas explicitement défini, sa valeur par défaut est <code>"text"</code>, ce qui indique que c'est du texte qui sera saisi et qu'un clavier standard devrait être utilisé.</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", "interaction.html#input-modalities:-the-inputmode-attribute", "inputmode")}}</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.global_attributes.inputmode")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">L'ensemble des attributs universels</a></li> +</ul> diff --git a/files/fr/web/html/attributs_universels/is/index.html b/files/fr/web/html/attributs_universels/is/index.html new file mode 100644 index 0000000000..e460ffc4a3 --- /dev/null +++ b/files/fr/web/html/attributs_universels/is/index.html @@ -0,0 +1,67 @@ +--- +title: is +slug: Web/HTML/Attributs_universels/is +tags: + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/is +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'attribut <code><strong>is</strong></code> est un <a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> qui indique qu'un élément HTML standard devrait se comporter comme un élément natif personnalisé (<em>custom element</em>) défini (voir <a href="/fr/docs/Web/Web_Components/Using_custom_elements">Manipuler les <em>custom elements</em></a> pour plus de détails).</p> + +<p>Cet attribut peut uniquement être utilisé si l'élément personnalisé indiqué a été correctement <a href="/fr/docs/Web/API/CustomElementRegistry/define">défini</a> dans le document courant et qu'il étend le type d'élément sur lequel il est appliqué.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Cet exemple est tiré de l'exemple <code><a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a></code> (<a href="https://mdn.github.io/web-components-examples/word-count-web-component/">voir le résultat en <em>live</em></a>).</p> + +<pre class="brush: js">// On crée une classe pour l'élément +class WordCount extends HTMLParagraphElement { + constructor() { + // On appelle super() pour récupérer l'initialisation + // des classes parentes + super(); + + // Le contenu du constructeur, etc. + ... + + } +} + +// On définit le nouvel élément. +customElements.define('word-count', WordCount, { extends: 'p' });</pre> + +<pre class="brush: html"><p is="word-count"></p></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', "custom-elements.html#attr-is", "is")}}</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.global_attributes.is")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les différents <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a></li> +</ul> diff --git a/files/fr/web/html/attributs_universels/itemid/index.html b/files/fr/web/html/attributs_universels/itemid/index.html new file mode 100644 index 0000000000..c592936a5d --- /dev/null +++ b/files/fr/web/html/attributs_universels/itemid/index.html @@ -0,0 +1,116 @@ +--- +title: itemid +slug: Web/HTML/Attributs_universels/itemid +tags: + - Attribut + - Attribut universel + - HTML + - Micro-données + - Reference + - itemid +translation_of: Web/HTML/Global_attributes/itemid +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <strong><code>itemid</code></strong> permet d'identifier un objet, au sens des microdonnées, de façon unique et globale. L'attribut <code>itemid</code> peut uniquement être défini sur les éléments qui ont un attribut {{htmlattrxref("itemscope")}} et un attribut {{htmlattrxref("itemtype")}}. De plus, un <code>itemid</code> ne peut pas être défini sur des éléments dont l'attribut <code>itemscope</code> possède un attribut <code>itemtype</code> qui définit un vocabulaire qui ne prend pas en charge les identifiants globaux tels que défini dans la spécification du vocabulaire.</p> + +<p>La signification exacte d'un identifiant global est déterminée par la spécification du vocabulaire. C'est le rôle de cette spécification d'autoriser ou non la présence de plusieurs éléments avec le même identifiant (sur une ou plusieurs pages) et de définir les règles de gestion associées.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">itemid="URN"</pre> + +<p class="note"><strong>Note :</strong> Selon la définition du WHATWG, un <code>itemid</code> doit être une URL. Dans l'exemple qui suit, on utilise plutôt une URN, plus appropriée pour définir un identifiant unique comme <code>itemid</code>. Cette incohérence reflète l'état actuellement incomplet de la spécification sur les microdonnées.</p> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="HTML">HTML</h3> + +<p>Un élément qui décrit un livre :</p> + +<pre class="brush: html"><dl itemscope + itemtype="http://vocab.example.net/book" + <mark>itemid="urn:isbn:0-330-34032-8"</mark>> + <dt>Title <dd itemprop="title">The Reality Dysfunction + <dt>Author <dd itemprop="author">Peter F. Hamilton + <dt>Publication date + <dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996</time> </dl> +</pre> + +<h3 id="Données_structurées_correspondantes">Données structurées correspondantes</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="14">itemscope</td> + <td>itemtype: itemid</td> + <td colspan="2" rowspan="1"> + <div class="jyrRxf-eEDwDf jcd3Mb IZ65Hb-hUbt4d">http://vocab.example.net/book: urn:isbn:0-330-34032-8</div> + </td> + </tr> + <tr> + <td>itemprop</td> + <td>title</td> + <td>The Reality Dysfunction</td> + </tr> + <tr> + <td>itemprop</td> + <td>author</td> + <td> + <div class="jyrRxf-eEDwDf jcd3Mb">Peter F. Hamilton</div> + </td> + </tr> + <tr> + <td>itemprop</td> + <td>pubdate</td> + <td>1996-01-26</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 Microdata', "#items", "itemid")}}</td> + <td>{{Spec2('HTML Microdata')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemid", "itemid")}}</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.global_attributes.itemid")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> + <li>Les autres attributs universels relatifs aux microdonnées : + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> diff --git a/files/fr/web/html/attributs_universels/itemprop/index.html b/files/fr/web/html/attributs_universels/itemprop/index.html new file mode 100644 index 0000000000..956054bb32 --- /dev/null +++ b/files/fr/web/html/attributs_universels/itemprop/index.html @@ -0,0 +1,436 @@ +--- +title: itemprop +slug: Web/HTML/Attributs_universels/itemprop +tags: + - Attribut + - Attribut universel + - HTML + - Micro-données + - Microdata +translation_of: Web/HTML/Global_attributes/itemprop +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <strong><code>itemprop</code></strong> est utilisé afin d'ajouter des propriétés à un objet. C'est un attribut universel et chaque élément HTML peut donc avoir un attribut <code>itemprop</code> qui permettra de former un couple de nom (la valeur de l'attribut) et de valeur (la valeur de l'élément). Chacune de ces paires constitue une <strong>propriété</strong> et un groupe de propriété forme un <strong>objet (<em>item</em>)</strong>. Les valeurs des propriétés sont généralement des chaînes de caractères ou des URL et peuvent être associées à de nombreux éléments comme {{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("object")}}, {{HTMLElement("source")}} , {{HTMLElement("track")}} et {{HTMLElement("video")}}.</p> + +<h3 id="Un_exemple_simple">Un exemple simple</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div itemscope itemtype="http://schema.org/Movie"> + <h1 <strong>itemprop="name"</strong>>Avatar</h1> + <span>Director: + <span <strong>itemprop="director"</strong>>James Cameron</span> + (born August 16, 1954) + </span> + <span <strong>itemprop="genre"</strong>>Science fiction</span> + <a href="../movies/avatar-theatrical-trailer.html" + <strong>itemprop="trailer"</strong>>Trailer</a> +</div></pre> + +<h4 id="Structure_de_données">Structure de données</h4> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="2"> </td> + <th colspan="2" rowspan="1"><strong>Objet</strong></th> + </tr> + <tr> + <th><strong>Nom pour <code>itemprop</code></strong></th> + <th><strong>Valeur pour <code>itemprop</code></strong></th> + </tr> + <tr> + <td><code>itemprop</code></td> + <td>name</td> + <td>Avatar</td> + </tr> + <tr> + <td><code>itemprop</code></td> + <td>director</td> + <td>James Cameron</td> + </tr> + <tr> + <td><code>itemprop</code></td> + <td>genre</td> + <td>Science fiction</td> + </tr> + <tr> + <td><code>itemprop</code></td> + <td>trailer</td> + <td>../movies/avatar-theatrical-trailer.html</td> + </tr> + </tbody> +</table> + +<h2 id="Propriétés">Propriétés</h2> + +<p>Les valeurs des propriétés sont généralement des chaînes de caractères ou des URL. Lorsque c'est une URL, on l'exprime grâce à l'élément {{HTMLElement("a")}} et avec son attribut <code>href</code>. Pour un élément {{HTMLElement("img")}}, on lira son attribut <code>src</code>, de même pour les autres éléments HTML qui font appel à d'autres ressources.</p> + +<h3 id="Trois_propriétés_dont_les_valeurs_sont_des_chaînes_simples">Trois propriétés dont les valeurs sont des chaînes simples</h3> + +<pre class="brush: html"><div itemscope> + <p>My name is + <span itemprop="name">Neil</span>. + </p> + <p>My band is called + <span itemprop="band">Four Parts Water</span>. + </p> + <p>I am + <span itemprop="nationality">British</span>. + </p> +</div></pre> + +<h3 id="Une_propriété_«_image_»_dont_la_valeur_est_une_URL">Une propriété « image » dont la valeur est une URL</h3> + +<pre class="brush: html"><div itemscope> + <img itemprop="image" + src="google-logo.png" alt="Google"> +</div> +</pre> + +<h3 id="Une_propriété_dont_la_valeur_est_un_identifiant_«_machine_»">Une propriété dont la valeur est un identifiant « machine »</h3> + +<pre class="brush: html"><h1 itemscope> + <data itemprop="product-id" + value="9678AOU879">The Instigator 2000</data> +</h1></pre> + +<p>Lorsqu'une chaîne est décrite avec un format machine plutôt qu'un format « humain », on la propriété est exprimée avec la valeur de l'attribut <code>value</code> de l'élément {{HTMLElement("data")}} et c'est le contenu de l'élément qui fournira la valeur humainement compréhensible.</p> + +<h3 id="Un_exemple_de_mesure">Un exemple de mesure</h3> + +<pre class="brush: html"><div itemscope itemtype="http://schema.org/Product"> + <span itemprop="name"> + Panasonic White 60L Refrigerator + </span> + <img src="panasonic-fridge-60l-white.jpg" alt=""> + <div itemprop="aggregateRating" + itemscope + itemtype="http://schema.org/AggregateRating"> + <meter itemprop="ratingValue" min=0 value=3.5 max=5> + Rated 3.5/5 + </meter> + (based on <span itemprop="reviewCount">11</span> + customer reviews) + </div> +</div></pre> + +<p>Pour les données numériques, on peut utiliser l'élément {{HTMLElement("meter")}} et la valeur de son attribut <code>value</code>.</p> + +<h3 id="Une_propriété_de_date">Une propriété de date</h3> + +<pre class="brush: html"><div itemscope> + I was born on + <time itemprop="birthday" datetime="2009-05-10"> + May 10th 2009 + </time>. +</div></pre> + +<p>Pour les valeurs temporelles, on utilisera les éléments {{HTMLElement("time")}} et son attribut <code>datetime</code>.</p> + +<h3 id="Imbrication_de_propriétés">Imbrication de propriétés</h3> + +<pre class="brush: html"><div itemscope> + <p>Name: + <span itemprop="name">Amanda</span> + </p> + <p>Band: + <span itemprop="band" itemscope> + <span itemprop="name">Jazz Band</span> + (<span itemprop="size">12</span> players) + </span> + </p> +</div></pre> + +<p>On peut avoir des imbrications de propriétés et utiliser l'attribut <code>itemscope</code> sur l'élément qui porte le groupe.</p> + +<p>L'élément de plus haut niveau possède deux propriétés <code>name</code> et <code>band</code>. La valeur de <code>name</code> est Amanda et la valeur de <code>ban</code><code>d</code> est un objet à part entière, composé de deux propriétés <code>name</code> et <code>size</code>. Le valeur pour <code>name</code> est Jazz Band et la valeur de <code>size</code> est 12. L'objet de plus haut niveau est un objet qui ne fait pas partie d'un autre objet.</p> + +<h3 id="Séparation_des_objets">Séparation des objets</h3> + +<pre class="brush: html"><div itemscope id="amanda" itemref="a b"></div> +<p id="a">Name: <span itemprop="name">Amanda</span></p> +<div id="b" itemprop="band" itemscope itemref="c"></div> +<div id="c"> + <p>Band: <span itemprop="name">Jazz Band</span></p> + <p>Size: <span itemprop="size">12</span> players</p> +</div></pre> + +<p>On obtient le même résultat qu'avec l'exemple précédent. Le premier objet possède deux propriétés <code>name</code> (qui vaut Amanda) et <code>band</code> qui est défini avec un autre objet. Le deuxième objet possède deux propriétés <code>name</code> (qui vaut Jazz Band) et <code>size</code> (qui vaut 12).</p> + +<h3 id="Un_objet_avec_plusieurs_occurrences_d'une_propriété">Un objet avec plusieurs occurrences d'une propriété</h3> + +<pre class="brush: html"><div itemscope> + <p>Flavors in my favorite ice cream:</p> + <ul> + <li itemprop="flavor">Lemon sorbet</li> + <li itemprop="flavor">Apricot sorbet</li> + </ul> +</div></pre> + +<p>Cet objet possède deux fois la même propriété <code>flavor</code>, qui prend deux valeurs Lemon sorbet et Apricot sorbet.</p> + +<h3 id="Deux_propriétés_avec_la_même_valeur">Deux propriétés avec la même valeur</h3> + +<pre class="brush: html"><div itemscope> + <span itemprop="favorite-color favorite-fruit"> + orange + </span> +</div></pre> + +<p>On peut définir deux propriétés au même endroit si elles prennent la même valeur.</p> + +<h3 id="Équivalence_sémantique">Équivalence sémantique</h3> + +<pre class="brush: html"><figure> + <img src="castle.jpeg"> + <figcaption> + <span itemscope> + <span itemprop="name">The Castle</span> + </span> + (1986) + </figcaption> +</figure></pre> + +<pre class="brush: html"><span itemscope> + <meta itemprop="name" content="The Castle"> +</span> +<figure> + <img src="castle.jpeg"> + <figcaption>The Castle (1986)</figcaption> +</figure></pre> + +<p>Ces deux exemples sont équivalents d'un point de vue sémantique. Tous les deux se composent d'un schéma et d'une légende et tous les deux possèdent un objet avec une propriété <code>name</code> qui vaut The Castle. Une différence subsiste : si l'utilisateur glisse-dépose l'élément, l'objet sera inclus dans les données. Dans les deux cas, l'image n'est pas associée à l'objet.</p> + +<h2 id="Les_noms_et_les_valeurs">Les noms et les valeurs</h2> + +<p>Une propriété est un ensemble non-ordonné de composants uniques sensibles à la casse qui représentent les paires de noms/valeurs. Les valeur doit avoir au moins composant pour se rattacher à l'objet. Dans le tableau ci-après, chaque cellule correspond à un composant.</p> + +<h3 id="Exemples_de_noms">Exemples de noms</h3> + +<table class="standard-table"> + <thead> + <tr> + <th colspan="1" rowspan="2" scope="col"> </th> + <th colspan="2" rowspan="1" scope="col">Objet</th> + </tr> + <tr> + <th scope="col">nom pour <code>itemprop</code></th> + <th scope="col">valeur pour <code>itemprop</code></th> + </tr> + </thead> + <tbody> + <tr> + <th><code>itemprop</code></th> + <td>country</td> + <td>Ireland</td> + </tr> + <tr> + <th><code>itemprop</code></th> + <td>Option</td> + <td>2</td> + </tr> + <tr> + <th><code>itemprop</code></th> + <td>https://www.flickr.com/photos/nlireland/6992065114/</td> + <td>Ring of Kerry</td> + </tr> + <tr> + <th><code>itemprop</code></th> + <td>img</td> + <td>https://www.flickr.com/photos/nlireland/6992065114/</td> + </tr> + <tr> + <th><code>itemprop</code></th> + <td>website</td> + <td>flickr</td> + </tr> + <tr> + <th><code>itemprop</code></th> + <td>(token)</td> + <td>(token)</td> + </tr> + </tbody> +</table> + +<p><strong>Les composants</strong> sont des chaînes de caractères ou des URL. Un objet est appelé un objet typé si c'est une URL. Les chaînes ne peuvent pas contenir de point ou de deux points.</p> + +<ol> + <li>Si un objet est un objet typé, il doit être : + <ol> + <li>Un nom de propriété autorisé par la spécification qui définit les types pertinents pour un objet ou</li> + <li>Une URL valide qui est une URL absolue qui définit un nom faisant partie de la spécification du vocabulaire ou</li> + <li>Une URL valide qui est une URL absolue utilisée comme un nom propriétaire ou</li> + </ol> + </li> + <li>Si un objet n'est pas un objet typé, le nom doit être : + <ol> + <li>Une chaîne qui ne contient pas de caractères "<strong>.</strong>" (U+002E FULL STOP) ou "<strong>:</strong>" (U+003A COLON) et qui est utilisée comme un nom « propriétaire » pour la propriété (c'est-à-dire avec un nom qui n'est pas défini dans une spécification publique).</li> + </ol> + </li> +</ol> + +<p class="note"><strong>Note :</strong> Les caractères « : » sont interdits pour les valeurs qui ne sont pas des URL afin de pouvoir distinguer les URL du reste. Les valeurs avec les caractères « . » sont réservés pour de futurs ajouts et les blancs ne sont pas autorisés car les valeurs seraient analysées comme plusieurs valeurs distinctes.</p> + +<h2 id="Valeurs">Valeurs</h2> + +<p>La valeur d'une propriété est définie comme le premier cas qui correspond dans cette liste :</p> + +<ul> + <li>Si l'élément possède un attribut <strong><code>itemscope</code> :</strong> + + <ul> + <li>La valeur est <strong>l'objet</strong> créé par l'élément.</li> + </ul> + </li> + <li>Si l'élément est un élément <strong><code>meta</code> :</strong> + <ul> + <li>La valeur est celle de l'attribut <strong><code>content</code></strong> s'il existe, la chaîne vide sinon.</li> + </ul> + </li> + <li>Si l'élément est <code><strong>audio</strong></code>, <code><strong>embed</strong></code>, <code><strong>iframe</strong></code>, <code><strong>img</strong></code>, <code><strong>source</strong></code>, <code><strong>track</strong></code> ou <strong><code>video</code> :</strong> + <ul> + <li>La valeur est l'URL correspondant à l'analyse de l'attribut <code>src</code> relatif au nœeud du document ou la chaîne vide s'il n'y pas de tel attribut ou que la recomposition de l'URL échoue.</li> + </ul> + </li> + <li>Si l'élément est un élément <code><strong>a</strong></code>, <code><strong>area</strong></code> ou <strong><code>link</code> :</strong> + <ul> + <li>La valeur est l'URL qui correspond à l'analyse de la valeur de l'attribut <code>href</code> relatif au nœud du document ou la chaîne vide s'il n'y pas de tel attribut ou que la recomposition de l'URL échoue.</li> + </ul> + </li> + <li>Si l'élément est un élément <strong><code>object</code> :</strong> + <ul> + <li>La valeur est l'URL qui correspond à l'analyse de la valeur de l'attribut <code>data</code> relatif au nœud du document ou la chaîne vide s'il n'y pas de tel attribut ou que la recomposition de l'URL échoue.</li> + </ul> + </li> + <li>Si l'élément est un élément <strong><code>data</code> :</strong> + <ul> + <li>La valeur est la valeur l'attribut <code>value</code> s'il est présent ou la chaîne vide sinon.</li> + </ul> + </li> + <li>Si l'élément est un élément <strong><code>meter</code> :</strong> + <ul> + <li>La valeur est la valeur l'attribut <code>value</code> s'il est présent ou la chaîne vide sinon. + <ul> + </ul> + </li> + </ul> + </li> + <li>Si l'élément est un élément <strong><code>time</code> :</strong> + <ul> + <li>La valeur de l'élément est la valeur de l'attribut <strong><code>datetime</code></strong>.</li> + </ul> + </li> +</ul> + +<p>Sinon :</p> + +<ul> + <li>La valeur de l'élément est le contenu textuel de l'élément HTML (<code>textContent</code>).</li> +</ul> + +<p>Les éléments qui permettent d'utiliser des attributs URL pour des URL absolues sont : <code><strong>a</strong></code>, <code><strong>area</strong></code>, <code><strong>audio</strong></code>, <code><strong>embed</strong></code>, <code><strong>iframe</strong></code>, <code><strong>img</strong></code>, <code><strong>link</strong></code>, <code><strong>object</strong></code>, <code><strong>source</strong></code>, <code><strong>track</strong></code> et <strong><code>video</code></strong>.</p> + +<h3 id="Ordre_des_noms">Ordre des noms</h3> + +<p>L'ordre des noms n'a pas d'importance mais si une propriété possède plusieurs valeurs, l'ordre sera relatif pour cette propriété.</p> + +<h4 id="Exemples_équivalents">Exemples équivalents</h4> + +<pre class="brush: html"><div itemscope> + <p itemprop="a">1</p> + <p itemprop="a">2</p> + <p itemprop="b">test</p> +</div></pre> + +<pre class="brush: html"><div itemscope> + <p itemprop="b">test</p> + <p itemprop="a">1</p> + <p itemprop="a">2</p> +</div></pre> + +<pre class="brush: html"><div itemscope> + <p itemprop="a">1</p> + <p itemprop="b">test</p> + <p itemprop="a">2</p> +</div></pre> + +<pre class="brush: html"><div id="x"> + <p itemprop="a">1</p> +</div> +<div itemscope itemref="x"> + <p itemprop="b">test</p> + <p itemprop="a">2</p> +</div> +</pre> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">itemprop = "name", value</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML_2">HTML</h3> + +<p>Un exemple sur un livre qu'on décrit avec les différents attributs.</p> + +<pre class="brush: html"><dl itemscope + itemtype="http://vocab.example.net/book" + itemid="urn:isbn:0-330-34032-8"> + <dt>Title <dd itemprop="title">The Reality Dysfunction + <dt>Author <dd itemprop="author">Peter F. Hamilton + <dt>Publication date + <dd> + <time itemprop="pubdate" datetime="1996-01-26"> + 26 January 1996 + </time> +</dl> +</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 Microdata', "#dfn-attr-itemprop", "itemprop")}}</td> + <td>{{Spec2('HTML Microdata')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "microdata.html#names:-the-itemprop-attribute", "itemprop")}}</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.global_attributes.itemprop")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> + <li>Les autres attributs universels relatifs aux microdonnées : + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> diff --git a/files/fr/web/html/attributs_universels/itemref/index.html b/files/fr/web/html/attributs_universels/itemref/index.html new file mode 100644 index 0000000000..894df9c87c --- /dev/null +++ b/files/fr/web/html/attributs_universels/itemref/index.html @@ -0,0 +1,97 @@ +--- +title: itemref +slug: Web/HTML/Attributs_universels/itemref +tags: + - Attribut + - Attribut universel + - HTML + - Micro-données + - Microdata + - Reference +translation_of: Web/HTML/Global_attributes/itemref +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>itemref</strong></code> permet d'associer des propriétés à un objet via <code>itemscope</code> lorsque l'élement courant n'est pas un élément descendant. <code>itemref</code> fournit une liste d'identifiants d'éléments (à ne pas confondre avec <code>itemid</code>) dont des propriétés sont définies plus loin dans le document.</p> + +<p>L'attribut <code>itemref</code> peut uniquement être défini sur des éléments pour lesquels un attribut <code>itemscope</code> a été défini.</p> + +<p class="note"><strong>Note :</strong> L'attribut <code>itemref</code> ne fait pas partie du modèle de données des micro-données. Il s'agit purement d'une construction syntaxique pour aider les auteurs à annoter une page où les données ne suivent pas une structure arborescente claire.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">itemref</pre> + +<h2 class="syntaxbox" id="Exemple">Exemple</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div itemscope id="amanda" itemref="a b"></div> +<p id="a">Name: <span itemprop="name">Amanda</span> </p> +<div id="b" itemprop="band" itemscope itemref="c"></div> +<div id="c"> + <p>Band: <span itemprop="name">Jazz Band</span> </p> + <p>Size: <span itemprop="size">12</span> players</p> +</div></pre> + +<h3 id="Structure_de_données_correspondante">Structure de données correspondante</h3> + +<p><small>Au format <a href="https://json-ld.org/" rel="external">JSON-LD</a> :</small></p> + +<pre class="brush: json">{ + "@id": "amanda", + "name": "Amanda", + "band": { + "@id": "b", + "name": "Jazz Band", + "size": 12 + } +} +</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 Microdata', "#dfn-itemref", "itemref")}}</td> + <td>{{Spec2('HTML Microdata')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemref", "itemref")}}</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.global_attributes.itemref")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> + <li>Les autres attributs universels relatifs aux microdonnées : + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> diff --git a/files/fr/web/html/attributs_universels/itemscope/index.html b/files/fr/web/html/attributs_universels/itemscope/index.html new file mode 100644 index 0000000000..5e76969620 --- /dev/null +++ b/files/fr/web/html/attributs_universels/itemscope/index.html @@ -0,0 +1,228 @@ +--- +title: itemscope +slug: Web/HTML/Attributs_universels/itemscope +tags: + - Attribut + - Attribut universel + - HTML + - Micro-données + - Microdata + - Reference +translation_of: Web/HTML/Global_attributes/itemscope +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <strong><code>itemscope</code> </strong>fonctionne généralement avec l'attribut <code>itemtype</code> afin d' indiquer qu'un bloc HTML contient un objet donné. <code>itemscope</code> crée l'objet et définit la portée de l'<code>itemtype</code> associé. Il est possible d'associer un attribut <code>itemscope</code> à n'importe quel élément HTML.</p> + +<h3 id="Les_identifiants_rattachés_à_itemscope">Les identifiants rattachés à <code>itemscope</code></h3> + +<p>Un élément qui possède un attribut <code>itemscope</code> permet de définir un nouvel élément qui sera un groupe de paires de noms/valeurs. Les éléments qui ont un attribut <code>itemscope</code> et un attribut <code>itemtype</code> peuvent également définir un attribut <code>id</code> (à ne pas confondre avec <code>itemid)</code> pour identifier de façon unique l'élément sur le Web.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">itemscope</pre> + +<h2 id="Exemple">Exemple</h2> + +<p>Dans cet exemple, on a trois attributs <code>itemscopes</code>. Ces trois <code>itemscopes</code> définissent les portées respectives des <code>itemtypes</code> correspondants qui sont : Recipe, AggregateRating et NutritionInformation.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div itemscope itemtype="https://schema.org/Recipe"> +<h2 itemprop="name">Grandma's Holiday Apple Pie</h2> +<img itemprop="image" src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg" width="50" height="50"/> +<p>By <span itemprop="author" itemscope itemtype="https://schema.org/Person"> +<span itemprop="name">Carol Smith</p></span> +</span> +<p>Published: <time datetime="2009-11-05" itemprop="datePublished"> +November 5, 2009</p></time> +<span itemprop="description">This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.<br></span> + <span itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating"> + <span itemprop="ratingValue">4.0</span> stars based on <span itemprop="reviewCount">35</span> reviews<br></span> +Prep time: <time datetime="PT30M" itemprop="prepTime">30 min<br></time> + Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour<br></time> + Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min<br></time> + Yield: <span itemprop="recipeYield">1 9" pie (8 servings)<br></span> + <span itemprop="nutrition" itemscope itemtype="https://schema.org/NutritionInformation"> + Serving size: <span itemprop="servingSize">1 medium slice<br></span> + Calories per serving: <span itemprop="calories">250 cal<br></span> + Fat per serving: <span itemprop="fatContent">12 g<br></span> +</span> +<p>Ingredients:<br> + <span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br></span> + <span itemprop="recipeIngredient">White sugar: 3/4 cup<br></span> + ... </p> + +Directions: <br> + <div itemprop="recipeInstructions"> + 1. Cut and peel apples<br> + 2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br> + ... + </div> +</div> </pre> + +<h3 id="Structure_des_données">Structure des données</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="14">itemscope</td> + <td>itemtype</td> + <td colspan="2" rowspan="1">Recipe</td> + </tr> + <tr> + <td>itemprop</td> + <td>name:</td> + <td>Grandma's Holiday Apple Pie</td> + </tr> + <tr> + <td>itemprop</td> + <td>image:</td> + <td> + <div class="jyrRxf-eEDwDf jcd3Mb">https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg</div> + </td> + </tr> + <tr> + <td>itemprop</td> + <td>datePublished:</td> + <td>2009-11-05</td> + </tr> + <tr> + <td>itemprop</td> + <td>description:</td> + <td>This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.</td> + </tr> + <tr> + <td>itemprop</td> + <td>prepTime:</td> + <td>PT30M</td> + </tr> + <tr> + <td>itemprop</td> + <td>cookTime:</td> + <td>PT1H</td> + </tr> + <tr> + <td>itemprop</td> + <td>totalTime:</td> + <td>PT1H30M</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeYield:</td> + <td>1 9" pie (8 servings)</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeIngredient:</td> + <td>Thinly-sliced apples: 6 cups</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeIngredient:</td> + <td>White sugar: 3/4 cup</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeInstructions:</td> + <td> + <div class="jyrRxf-eEDwDf jcd3Mb">1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .</div> + </td> + </tr> + <tr> + <td>itemprop</td> + <td colspan="2" rowspan="1">author [Person]:</td> + </tr> + <tr> + <td>itemprop</td> + <td>name:</td> + <td>Carol Smith</td> + </tr> + <tr> + <td colspan="1" rowspan="3">itemscope</td> + <td>itemprop[itemtype]</td> + <td colspan="2" rowspan="1">aggregateRating [AggregateRating]:</td> + </tr> + <tr> + <td>itemprop</td> + <td>ratingValue:</td> + <td>4.0</td> + </tr> + <tr> + <td>itemprop</td> + <td>reviewCount:</td> + <td>35</td> + </tr> + <tr> + <td colspan="1" rowspan="4">itemscope</td> + <td>itemprop[itemtype]</td> + <td colspan="2" rowspan="1">nutrition [NutritionInformation]:</td> + </tr> + <tr> + <td>itemprop</td> + <td>servingSize:</td> + <td>1 medium slice</td> + </tr> + <tr> + <td>itemprop</td> + <td>calories:</td> + <td>250 cal</td> + </tr> + <tr> + <td>itemprop</td> + <td>fatContent:</td> + <td>12 g</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note</strong> : Pour extraire des micro-données d'un document HTML, vous pouvez utiliser <a href="https://developers.google.com/structured-data/testing-tool/">l'outil d'extraction de Google pour les micro-données.</a> Vous pouvez par exemple utiliser le document HTML précédent.</p> +</div> + +<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 Microdata', "#dfn-itemscope", "itemscope")}}</td> + <td>{{Spec2('HTML Microdata')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemscope", "itemscope")}}</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.global_attributes.itemscope")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> + <li>Les autres attributs universels relatifs aux microdonnées : + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> diff --git a/files/fr/web/html/attributs_universels/itemtype/index.html b/files/fr/web/html/attributs_universels/itemtype/index.html new file mode 100644 index 0000000000..5d3ce08694 --- /dev/null +++ b/files/fr/web/html/attributs_universels/itemtype/index.html @@ -0,0 +1,113 @@ +--- +title: itemtype +slug: Web/HTML/Attributs_universels/itemtype +tags: + - Attribut + - Attribut universel + - HTML + - Micro-données + - Microdata + - Référence(2) +translation_of: Web/HTML/Global_attributes/itemtype +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <strong><code>itemtype</code> </strong>définit l'URL du vocabulaire qui sera utilisé pour définir les propriétés des objets dans la structure de données. <code>itemscope</code> est utilisé afin de définir la portée, dans le document, où le vocabulaire défini sera actif.</p> + +<p>L'attribut <code>itemtype</code> doit avoir une valeur qui est un ensemble non ordonné de fragments uniques, sensible à la casse. Chaque fragment doit être une URL absolue valide et tous les fragments participent à la définition du même vocabulaire. La valeur de l'attribut doit avoir au moins un fragment.</p> + +<p>Les types d'objet doivent tous être définis dans des spécifications de vocabulaire (comme <a href="http://schema.org/">schema.org</a>) et doivent tous être définis avec le même vocabulaire.</p> + +<p>L'attribut <code>itemtype</code> peut uniquement être défini pour les éléments qui ont un attribut <code>itemscope</code>.</p> + +<p>Google et les autres moteurs de recherche participent au vocabulaire défini par <a href="http://schema.org/">schema.org</a> pour structurer les données. Ce vocabulaire définit un ensemble standard de types et de noms de propriétés. Par exemple <code><a href="http://schema.org/MusicEvent">MusicEvent</a></code> indique un événement musical dont les propriétés <code><a href="http://schema.org/startDate">startDate</a></code> et <code><a href="http://schema.org/location">location</a></code> utilisées pour définir les détails du concert. Dans ce cas, l'URL <code><a href="http://schema.org/MusicEvent">http://schema.org/MusicEvent</a></code> sera l'URL utilisée pour l'attribut <code>itemtype</code> et les propriétés <code>startDate</code> et <code>location</code> seront les propriétés utilisées, définies par <code><a href="http://schema.org/MusicEvent">http://schema.org/MusicEvent</a></code>.</p> + +<div class="note"> +<p><strong>Note :</strong> Vous pourrez trouver plus d'informations sur l'attribut itemtype sur <a href="http://schema.org/Thing">http://schema.org/Thing</a></p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">itemtype = URL</pre> + +<h3 id="Exemple_simple">Exemple simple</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div itemscope itemtype="http://schema.org/Product"> + <span itemprop="brand">ACME</span> + <span itemprop="name">Executive Anvil</span> +</div></pre> + +<h4 id="Structure_de_données">Structure de données</h4> + +<table class="standard-table"> + <tbody> + <tr> + <td rowspan="4"><code>itemscope</code></td> + <td><code>itemtype</code></td> + <td colspan="2" rowspan="1">http://schema.org/Product</td> + </tr> + <tr> + <td><code>itemprop</code></td> + <td><code>name</code></td> + <td>Executive Anvil</td> + </tr> + <tr> + <td><code>itemprop</code></td> + <td colspan="2" rowspan="1"><code>brand [Thing]</code></td> + </tr> + <tr> + <td><code>itemprop</code></td> + <td><code>name</code></td> + <td>ACME</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 Microdata', "#dfn-itemtype", "itemtype")}}</td> + <td>{{Spec2('HTML Microdata')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemtype", "itemprop")}}</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.global_attributes.itemtype")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> + <li>Les autres attributs universels relatifs aux microdonnées : + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> diff --git a/files/fr/web/html/attributs_universels/lang/index.html b/files/fr/web/html/attributs_universels/lang/index.html new file mode 100644 index 0000000000..6a45c3ed2a --- /dev/null +++ b/files/fr/web/html/attributs_universels/lang/index.html @@ -0,0 +1,86 @@ +--- +title: lang +slug: Web/HTML/Attributs_universels/lang +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/lang +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>lang</strong></code> permet de définir la langue utilisée pour l'élément. Pour les éléments non-éditables, c'est la langue dans laquelle ils sont écrits. Pour les éléments éditables, c'est la langue dans laquelle devrait écrire l'utilisateur. La valeur de cet attribut est une « balise de langue » dont le format est défini par le document de l'IETF : <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Les balises d'identification de langues (BCP47)</em></a>. Si cette balise est la chaîne vide, la langue sera définie comme <em>inconnue</em>. Si la balise de langue n'est pas valide selon BCP47, la langue sera définie comme <em>invalide</em>.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-lang.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>Même lorsque l'attribut <code><strong>lang</strong></code> est défini, il peut ne pas être pris en compte. En effet, l'attribut {{htmlattrxref("xml:lang")}} aura la priorité sur celui-ci.</p> + +<p>Pour la pseudo-classe CSS {{cssxref(":lang")}}, deux noms de langues invalides sont considérés différents si les noms utilisés sont différents. Par exemple, alors que <code>:lang(fr)</code> permet l'appariement avec les déclarations (valides) <code>lang="fr-BE"</code> ou <code>lang="fr-CH"</code>, un encodage (invalide) comme <code>:lang(xyzzy)</code> ne permet pas l'appariement avec une déclaration (invalide) comme <code>lang="xyzzy-Zorp!"</code>.</p> + +<h2 id="Syntaxe_des_balises_de_langue">Syntaxe des balises de langue</h2> + +<p>La syntaxe complète décrite par la BCP 47 est suffisamment développée pour désigner certains dialectes spécifiques. Toutefois, dans la plupart des cas, l'utilisation sera assez simple.</p> + +<p>Voici un aperçu de la syntaxe simplifiée. Une balise de langue est composées de trois « sous-balises » séparées par des tirets. Chacune de ces sous-balises indique une certaine propriété de la langue. Les trois sous-balises communément utilisées sont :</p> + +<dl> + <dt>Sous-balise de langue</dt> + <dd>Ce fragment est obligatoire. C'est un code sur deux ou trois caractères (généralement en minuscules) qui définit la langue de base. Pour l'anglais, cette sous-balise est <code>en</code> et pour le Badeshi, cette balise est <code>bdz</code>.</dd> + <dt>Sous-balise de script</dt> + <dd>Ce fragment est optionnel. Il décrit le système d'écriture utilisé par la langue. Cette sous-balise contient toujours quatre caractères. Pour le braille français, la balise complète sera donc <code>fr-Brail</code> ; pour le japonais écrit avec l'alphabet Katakana, le code sera <code>ja-Kana</code>. Si la langue est utilisée avec le script le plus fréquemment utilisé (par exemple de l'espagnol écrit avec l'alphabet latin), il n'est pas nécessaire d'indiquer cette sous-balise.</dd> + <dt>Sous-balise régionale</dt> + <dd>Ce fragment est optionnel. Il définit un dialecte de la langue de base pour une région donnée. Cette sous-balise est composée de deux lettres en majuscules pour indiquer un pays ou de trois chiffres pour une indiquer une région qui n'est pas un pays. Ainsi, <code>es-ES</code> représente l'espagnol parlé en Espagne et <code>es-013</code> représente l'espagnol parlé en Amérique centrale ; l'espagnol international serait simplement <code>es</code>.</dd> +</dl> + +<p>La sous-balise de script doit précéder la sous-balise régionale si les deux sont présentes. Voici un exemple avec les trois fragments : <code>ru-Cyrl-BY</code> qui correspond au russe, écrit avec l'alphabet cyrillique, tel que parlé en Biélorussie.</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', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Aucun changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Dérivée de {{SpecName('HTML WHATWG')}}, aucun changement de {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Dérivée de {{SpecName('HTML WHATWG')}}. Définition du comportement de l'attribut <strong>xml:lang</strong> et de l'algorithme à utiliser pour déterminer la langue utilisée. Cet attribut devient également un attribut global à part entière.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Attribut supporté pour tous les éléments {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, et {{HTMLElement("script")}}.</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.global_attributes.lang")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> + <li>La pseudo-classe CSS {{cssxref(":lang")}}</li> + <li>L'en-tête HTTP {{HTTPHeader("Content-Language")}}</li> +</ul> diff --git a/files/fr/web/html/attributs_universels/slot/index.html b/files/fr/web/html/attributs_universels/slot/index.html new file mode 100644 index 0000000000..c6b96098a0 --- /dev/null +++ b/files/fr/web/html/attributs_universels/slot/index.html @@ -0,0 +1,49 @@ +--- +title: slot +slug: Web/HTML/Attributs_universels/slot +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/slot +--- +<div>{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</div> + +<p>L'attribut HTML universel <code><strong>slot</strong></code> permet d'affecter un créneau d'un <em><a href="/fr/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a></em> à un élément. Un élément avec un attribut <code>slot</code> est affecté au créneau créé par l'élément {{HTMLElement("slot")}} dont la valeur de l'attribut {{htmlattrxref("name", "slot")}} correspond à celle de l'attribut <code>slot</code>.</p> + +<p>Pour des exemples d'application, consulter le guide <a href="/fr/docs/Web/Web_Components/Using_templates_and_slots">Utiliser les modèles (<em>templates</em>) et les emplacements (<em>slots</em>)</a>.</p> + +<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', "dom.html#attr-slot", "slot attribute")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', "#dom-element-slot", "slot attribute")}}</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 à 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.global_attributes.slot")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les autres attributs universels</a></li> +</ul> diff --git a/files/fr/web/html/attributs_universels/spellcheck/index.html b/files/fr/web/html/attributs_universels/spellcheck/index.html new file mode 100644 index 0000000000..efc982d646 --- /dev/null +++ b/files/fr/web/html/attributs_universels/spellcheck/index.html @@ -0,0 +1,153 @@ +--- +title: spellcheck +slug: Web/HTML/Attributs_universels/spellcheck +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/spellcheck +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'attribut universel <code><strong>spellcheck</strong></code> est un attribut à valeur contrainte qui définit si l'orthographe du contenu de l'élément doit être vérifiée.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-spellcheck.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>Les valeurs autorisées pour cet attribut sont :</p> + +<ul> + <li><code>true</code> : cette valeur indique que, si possible, l'orthographe de l'élément doit être vérifiée avec le correcteur orthographique.</li> + <li><code>false</code> : cette valeur indique que l'orthographe de l'élément ne doit pas être vérifié.</li> +</ul> + +<p>La valeur par défaut de l'attribut (utilisée si elle n'est pas définie explicitement) sera fonction du navigateur et du type d'élément. Cette valeur par défaut peut également être héritée (autrement dit, la valeur utilisée pour l'élément courant sera la valeur explicite définie pour son plus proche ancêtre dans l'arbre des éléments).</p> + +<p>Cet attribut est un attribut à valeur contrainte, ce n'est pas un attribut booléen. Il faut donc utiliser explicitement les valeurs <code>true</code> ou <code>false</code>. Ainsi :</p> + +<pre class="example-bad brush: html"><label spellcheck>Label exemple</label></pre> + +<p>sera invalide, la formulation correcte étant :</p> + +<pre class="example-good brush: html"><label spellcheck="true">Label exemple</label></pre> + +<p>Cet attribut n'est qu'une indication à destination du navigateur : il n'est pas obligatoire qu'un navigateur puisse vérifier l'orthographe. Les éléments non-éditables ne sont généralement pas vérifiés, même lorsque <code><strong>spellcheck</strong></code> vaut <code>true</code> et que le navigateur possède une fonctionnalité de vérification orthographique.</p> + +<p>La valeur par défaut sera différente selon l'élément et le navigateur :</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Navigateur</th> + <th>{{HTMLElement("html")}}</th> + <th>{{HTMLElement("textarea")}}</th> + <th>{{HTMLElement("input")}}</th> + <th>Autres</th> + <th>Commentaires</th> + </tr> + <tr> + <td rowspan="3">Firefox / Gecko</td> + <td><code>false</code></td> + <td><code>false</code></td> + <td><code>false</code></td> + <td><em>hérité</em></td> + <td>Lorsque <code>layout.spellcheckDefault</code> vaut <code>0</code></td> + </tr> + <tr> + <td><strong><code>false</code></strong></td> + <td><strong><code>true</code></strong></td> + <td><strong><em>hérité</em></strong></td> + <td><strong><em>hérité</em></strong></td> + <td><strong>Lorsque <code>layout.spellcheckDefault</code> vaut <code>1</code> (valeur par défaut)</strong></td> + </tr> + <tr> + <td><code>false</code></td> + <td><code>true</code></td> + <td><code>true</code></td> + <td><em>hérité</em></td> + <td>Lorsque <code>layout.spellcheckDefault</code> vaut <code>2</code></td> + </tr> + <tr> + <td>Chrome</td> + <td><code>false</code></td> + <td><code>true</code></td> + <td>?</td> + <td><em>hérité</em></td> + </tr> + <tr> + <td>Internet Explorer</td> + <td><code>false</code></td> + <td><code>true</code></td> + <td>?</td> + <td><em>hérité</em></td> + </tr> + <tr> + <td>Opera</td> + <td><code>false</code></td> + <td><code>true</code></td> + <td>?</td> + <td><em>hérité</em></td> + </tr> + <tr> + <td>Safari</td> + <td><code>false</code></td> + <td><code>true</code></td> + <td>?</td> + <td><em>hérité</em></td> + </tr> + </tbody> +</table> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><!-- La valeur par défaut --> +<textarea>Saisissay un texte issy</textarea> + +<!-- Les valeurs explicites --> +<textarea spellcheck="true">Saisissay un texte issy</textarea> +<textarea spellcheck="false">Saisissay un texte issy</textarea> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","200","300")}}</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', "interaction.html#spelling-and-grammar-checking", "spellcheck")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Pas de changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#spelling-and-grammar-checking", "spellcheck")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Dérivée de {{SpecName('HTML WHATWG')}}, 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.global_attributes.spellcheck")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> +</ul> diff --git a/files/fr/web/html/attributs_universels/style/index.html b/files/fr/web/html/attributs_universels/style/index.html new file mode 100644 index 0000000000..3da865a0e9 --- /dev/null +++ b/files/fr/web/html/attributs_universels/style/index.html @@ -0,0 +1,92 @@ +--- +title: style +slug: Web/HTML/Attributs_universels/style +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/style +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>style</strong></code> contient des déclarations <a href="/fr/docs/Web/CSS">CSS</a> afin de mettre en forme l'élément. Attention, il est recommandé de définir les règles de mise en forme dans un ou plusieurs fichiers séparés. Cet attribut, ainsi que l'élément {{HTMLElement("style")}} ont simplement pour but de permettre une mise en forme rapide, notamment pour tester.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-style.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>Cet attribut ne doit pas être utilisé à des fins sémantiques. En effet, si toute mise en forme est retirée, toute page doit rester correcte d'un point de vue sémantique. On ne devrait pas, notamment, utiliser cet attribut afin de cacher des informations qui ne seraient pas pertinentes (cela devrait être réalisé avec l'attribut {{htmlattrxref("hidden")}}.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p style="color: rgb(255, 0, 0)"> + Cette méthode n'est pas vraiment recommandée +</p> + +<p class="toto"> + Alors que ça, c'est mieux. +</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.toto { + color: rgb(0, 255, 0); +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","300","300")}}</p> + +<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', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Aucune modification depuis la dernière dérivation de {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Dérivée de {{SpecName('HTML WHATWG')}}, aucune modification depuis {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Dérivée de {{SpecName('HTML WHATWG')}}. Depuis {{SpecName("HTML4.01")}}, cet attribut est désormais un attribut universel.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/styles.html#h-14.2.2', 'style')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Cet attribut est pris en charge par tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, et {{HTMLElement("title")}}.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Style", "", "")}}</td> + <td>{{Spec2("CSS3 Style")}}</td> + <td>Définition du contenu pour l'attribut <code>style</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.global_attributes.style")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> +</ul> diff --git a/files/fr/web/html/attributs_universels/tabindex/index.html b/files/fr/web/html/attributs_universels/tabindex/index.html new file mode 100644 index 0000000000..87aa27e5cc --- /dev/null +++ b/files/fr/web/html/attributs_universels/tabindex/index.html @@ -0,0 +1,115 @@ +--- +title: tabindex +slug: Web/HTML/Attributs_universels/tabindex +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/tabindex +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>tabindex</strong></code> est un entier indiquant si l'élément peut capturer le focus et si c'est le cas, dans quel ordre il le capture lors de la navigation au clavier (généralement à l'aide de la touche <kbd>Tab</kbd>). Si plusieurs éléments partagent la même valeur d'attribut <strong><code>tabindex</code></strong>, leur ordre sera calculé en fonction de leur position dans le document.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-tabindex.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 attribut peut prendre l'une des valeurs suivantes :</p> + +<ul> + <li>Une valeur négative : l'élément peut capturer le focus mais ne peut pas être atteint via la navigation au clavier ; + <div class="note"> + <p><strong>Note :</strong> Cette valeur peut être utile lorsqu'on a un contenu situé en dehors de l'écran qui doit apparaître lors d'un évènement donné. Il ne sera pas possible d'y passer le focus au clavier mais on pourra le faire avec <a href="/fr/docs/Web/API/HTMLElement/focus">la méthode <code>focus()</code></a>.</p> + </div> + </li> + <li><code>0</code> : l'élément peut capturer le focus et être atteint via la navigation au clavier, cependant son ordre relatif est défini par la plateforme, généralement selon l'ordre des éléments du DOM ; + <div class="warning"> + <p><strong>Attention !</strong> Le positionnement CSS n'aura pas d'impact sur le <code>taborder</code>. Le positionnement n'a qu'un impact visuel, l'ordre des tabulations correspond à l'ordre du DOM.</p> + </div> + </li> + <li>Une valeur positive : l'élément peut capturer le focus et peut être atteint via la navigation au clavier, l'ordre relatif dans la navigation est défini par la valeur de l'attribut. Les navigations seront parcourues dans l'ordre croissant. + <div class="warning"> + <p><strong>Attention !</strong> Il n'est pas recommandé de fournir des valeurs positives pour les éléments car cela peut être source de confusion, notamment pour les personnes qui utilisent des technologies d'assistance. Il est préférable d'organiser les éléments dans un ordre correct au niveau du DOM.</p> + </div> + </li> +</ul> + +<p>Si on utilise l'attribut <code>tabindex</code> sur un élément {{HTMLElement("div")}}, on ne pourra pas naviguer dans le contenu de cet élément avec les flèches du clavier, sauf si <code>tabindex</code> est également utilisé sur le contenu. Pour observer ce comportement, vous pouvez utiliser <a href="https://jsfiddle.net/jainakshay/0b2q4Lgv/">cet exemple JSFiddle</a>.</p> + +<div class="note"> +<p><strong>Note :</strong> La valeur maximale pour <code>tabindex</code> est fixée à 32767 par HTML4. Sa valeur par défaut est 0 pour les éléments qui peuvent recevoir le focus et -1 pour les autres.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><button tabindex="1">Un bouton</button> +<textarea>Saisir un texte</textarea> +<button tabindex="0">Un autre bouton</button> +<button tabindex="1">Et un troisième</button></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","200","300")}}</p> + +<h2 id="Accessibilité">Accessibilité</h2> + +<p>Il faut éviter d'utiliser l'attribut <code>tabindex</code> avec du contenu <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_interactif">non-interactif</a> si on souhaite uniquement rendre cet élément accessible au clavier (par exemple en voulant utiliser un élément {{HTMLElement("div")}} plutôt qu'un élément {{HTMLElement("button")}}).</p> + +<p>Les composants rendus interactifs par cette méthode ne feront pas partie de l'<a href="/fr/Apprendre/a11y/What_is_accessibility#Accessibility_APIs">arbre d'accessibilité</a> et ne pourront pas être analysés par les technologies d'assistance. Le contenu devrait être décrit sémantiquement avec des éléments interactifs ({{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, etc.). En effet, ces éléments disposent nativement de rôles et d'états qui peuvent être utilisées par les API d'accessibilité (il faut sinon les gérer via <a href="/fr/docs/Accessibilité/ARIA">ARIA</a>).</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/">Utiliser l'attribut <code>tabindex</code>|<em>The Paciello Group</em> (en anglais)</a></li> +</ul> + +<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', "interaction.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Aucune modification depuis la dernière dérivation, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-tabindex-attribute", "tabindex")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Dérivée de {{SpecName('HTML WHATWG')}}, aucune modification depuis {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Dérivée de {{SpecName('HTML WHATWG')}}. À partir de {{SpecName("HTML4.01")}}, l'attribut est désormais supporté sur tous les éléments, c'est un attribut global à part entière.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Attribut uniquement supporté sur {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, et {{HTMLElement("textarea")}}.</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.global_attributes.tabindex")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>La propriété {{domxref("HTMLElement.tabIndex")}} qui reflète cet attribut.</li> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> + <li><a href="https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html">Ce billet en anglais sur l'accessibilité et <code>tabindex</code></a> écrit par Adrian Roselli</li> + <li><code><a href="/fr/docs/Web/API/Document/hasFocus">Document.hasFocus()</a></code></li> +</ul> diff --git a/files/fr/web/html/attributs_universels/title/index.html b/files/fr/web/html/attributs_universels/title/index.html new file mode 100644 index 0000000000..06f0feee8d --- /dev/null +++ b/files/fr/web/html/attributs_universels/title/index.html @@ -0,0 +1,129 @@ +--- +title: title +slug: Web/HTML/Attributs_universels/title +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/title +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>title</strong></code> contient un texte d'information relatif à l'élément auquel il est rattaché.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-title.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>On le trouve généralement utilisé pour :</p> + +<ul> + <li>Fournir un libellé pour les éléments {{HTMLElement("iframe")}}</li> + <li>Fournir un libellé associé automatiquement à un élément {{HTMLElement("input")}}</li> + <li>Fournir un libellé pour les contrôles des <a href="/fr/docs/Web/HTML/Element/table">tableaux de données</a></li> +</ul> + +<p>Si cet attribut est absent, cela signifie que le titre de l'élément ancêtre le plus proche est toujours pertinent (et pourrait être utilisé comme bulle d'information pour l'élément courant). Si cet attribut vaut la chaîne vide, cela signifie explicitement que la valeur du titre de l'ancêtre le plus proche n'est pas pertinent (et ne devrait pas être utilisé comme bulle d'information).</p> + +<p>Une sémantique différente est définie pour cet attribut lorsqu'il est utilisé avec les éléments {{HTMLElement("link")}}, {{HTMLElement("abbr")}}, {{HTMLElement("input")}} et {{HTMLElement("menuitem")}}.</p> + +<h2 id="Titre_sur_plusieurs_lignes">Titre sur plusieurs lignes</h2> + +<p>Un attribut <code>title</code> peut contenir plusieurs lignes. Chaque caractère <code>U+000A LINE FEED</code> (<code>LF</code>) représentera un saut de ligne. Le fragment de code suivant représente donc un élément dont le titre est écrit sur deux lignes.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p> + Les sauts de ligne au sein d'un attribut title doivent être pris en compte : + <abbr title="Ceci est un + titre sur plusieurs lignes">Exemple</abbr>. +</p> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Titre_sur_plusieurs_lignes")}}</p> + +<h2 id="Héritage_de_title">Héritage de <code>title</code></h2> + +<p>Lorsqu'un élément ne possède pas d'attribut <code>title</code>, il hérite de la valeur de l'attribut pour l'élément parent (qui peut également l'hériter de son parent, etc.).</p> + +<p>Si cet attribut est défini avec la chaîne vide, cela signifie que le titre provenant d'un élément parent n'est pas pertinent et qu'il ne devrait pas être utilisé.</p> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html"><div title="Une bubulle"> + <p>Si vous survolez cet élément, il y aura une bulle d'information "Une bubulle".</p> + <p title="">Et au-dessus de celui-ci, aucune info.</p> +</div></pre> + +<h3 id="Résultat_2">Résultat</h3> + +<p>{{EmbedLiveSample("Héritage_de_title")}}</p> + +<h2 id="Accessibilité">Accessibilité</h2> + +<p>L'attribut <code>title</code> est très problématique pour :</p> + +<ul> + <li>Les personnes qui utilisent des appareils à interface tactile</li> + <li>Les personnes qui naviguent au clavier</li> + <li>Les personnes qui naviguent en utilisant des outils d'assistance comme des lecteurs d'écran ou des loupes logicielles</li> + <li>Les personnes souffrant de troubles musculaires ou cognitifs.</li> +</ul> + +<p>Cela est dû à une prise en charge hétérogène de la part des navigateurs. Si on souhaite avoir une bulle d'information, mieux vaudra <a href="https://inclusive-components.design/tooltips-toggletips/">utiliser une technique plus accessible</a>.</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/">Utiliser l'attribut HTML <code>title</code> - The Paciello Group (en anglais)</a></li> + <li><em><a href="https://inclusive-components.design/tooltips-toggletips/">Tooltips & Toggletips - Inclusive Components</a></em><a href="https://inclusive-components.design/tooltips-toggletips/"> (en anglais)</a></li> + <li><a href="https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/"><em>The Trials and Tribulations of the Title Attribute</em> (en anglais) - 24 Accessibility</a></li> +</ul> + +<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', "elements.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Aucune modification depuis {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Dérivation de {{SpecName('HTML WHATWG')}}, aucune modification de {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Dérivation de {{SpecName('HTML WHATWG')}}. À partir de {{SpecName("HTML4.01")}}, <code>title</code> est désormais un attribut universel.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Pris en charge par l'ensemble des éléments sauf {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}} et {{HTMLElement("title")}}.</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.global_attributes.title")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> + <li>{{domxref("HTMLElement.title")}} that reflects this attribute.</li> +</ul> diff --git a/files/fr/web/html/attributs_universels/translate/index.html b/files/fr/web/html/attributs_universels/translate/index.html new file mode 100644 index 0000000000..215800e5ff --- /dev/null +++ b/files/fr/web/html/attributs_universels/translate/index.html @@ -0,0 +1,71 @@ +--- +title: translate +slug: Web/HTML/Attributs_universels/translate +tags: + - Attribut + - Attribut universel + - Experimental + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/translate +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>translate</strong></code> est un attribut à valeur contrainte qui peut être utilisé afin d'indiquer si les valeurs d'attribut d'un élément et si les valeurs de ses nœuds {{domxref("Text")}} descendants doivent être traduits lorsque la page est localisée ou s'il faut les laisser inchangés. Les valeurs autorisées pour cet attribut sont :</p> + +<ul> + <li><code>"yes"</code> (ou une chaîne vide), qui indique que l'élément devrait être traduit lorsque la page est localisée ;</li> + <li><code>"no"</code>, qui indique que l'élément ne doit pas être traduit.</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Note :</strong> Bien que la prise en charge de cet attribut ne soit pas homogène pour les navigateurs, celui-ci est pris en compte par les outils de traduction automatique (Google Translate par exemple) et les outils de traduction utilisés par les traducteurs. Aussi, cet attribut doit être utilisé par les auteurs web afin d'indiquer correctement le contenu qui ne devrait pas être traduit.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><label for="postcode" translate="no"> + <span translate="yes">Enter your postcode to find the nearest store</span> +</label> +<input id="postcode" type="text"></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","250","250")}}</p> + +<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', "dom.html#attr-translate", "translate")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Aucun changement depuis la dernière dérivation {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-translate-attribute", "translate")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Dérivée de {{SpecName('HTML WHATWG')}}, 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.global_attributes.translate")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> + <li>La propriété {{domxref("HTMLElement.translate")}} qui reflète cet attribut.</li> +</ul> diff --git a/files/fr/web/html/attributs_universels/x-ms-acceleratorkey/index.html b/files/fr/web/html/attributs_universels/x-ms-acceleratorkey/index.html new file mode 100644 index 0000000000..f03780b703 --- /dev/null +++ b/files/fr/web/html/attributs_universels/x-ms-acceleratorkey/index.html @@ -0,0 +1,45 @@ +--- +title: x-ms-acceleratorkey +slug: Web/HTML/Attributs_universels/x-ms-acceleratorkey +tags: + - Attribut + - HTML + - Non-standard + - Reference +translation_of: Web/HTML/Global_attributes/x-ms-acceleratorkey +--- +<div>{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}</div> + +<p>La propriété <code><strong>x-ms-acceleratorkey</strong></code> fournit une méthode pour déclarer si une touche d'accélération a été affectée à un élément.</p> + +<div class="blockIndicator note"> +<p><strong>Note :</strong> Pour fournir un raccourci clavier pour un élément qui n'utilise pas JavaScript, on utilisera l'attribut <code><a href="/fr/docs/Web/HTML/Attributs_universels/accesskey">accesskey</a></code>.</p> +</div> + +<p>{{Non-standard_Inline}} Cette propriété non-standard est spécifique à Internet Explorer et à Microsoft Edge.</p> + +<p>La propriété <code>x-ms-acceleratorkey</code> permet d'indiquer sur l'arbre d'accessibilité (utilisé par les outils d'assistance tels que les lecteurs d'écran) qu'une touche d'accélération existe. Cet attribut ne fournit pas le comportement déclenché par cette touche. Il est nécessaire de fournir les gestionnaires d'évènements associés tels que <code>onkeypress</code>, <code>onkeydown</code> ou <code>onkeyup</code> afin de traiter l'utilisation de la touche dans l'application.</p> + + + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: html"><button x-ms-acceleratorkey="string">...</button></pre> + +<h2 id="Valeur">Valeur</h2> + +<p>Cette propriété peut être une chaîne de caractères avec le nom de la touche accélératrice :</p> + +<ul> + <li><code>"Ctrl+B"</code> pour indiquer la combinaison des touches <kbd>Ctrl</kbd> et <kbd>B</kbd>.</li> + <li><code>"J"</code> pour indiquer la touche <kbd>J</kbd> uniquement.</li> + <li><code>"Ctrl+; then K"</code> (cf. <a href="https://help.manuscript.com/7558/fogbugz-keyboard-shortcuts#For_Your_Server_or_non-Ocelot_Keyboard_Shortcuts">FogBugz’s old keyboard mode</a>). Une approche plus compliquée mais qui ne remplace pas les raccourcis clavier fournis par le navigateur ou le système d'exploitation.</li> +</ul> + +<h2 id="See_Also" name="See_Also">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Mozilla/Tech/XUL/Propri%C3%A9t%C3%A9s/accessKey">L'attribut universel <code>accesskey</code></a></li> + <li><a href="/fr/docs/Web/CSS/-ms-accelerator">La propriété CSS spécifique <code>-ms-accelerator</code></a></li> + <li><a href="/fr/docs/Web/API/Microsoft_API_extensions">Les extensions spécifiques à Microsoft</a></li> +</ul> diff --git a/files/fr/web/html/attributs_universels/x-ms-format-detection/index.html b/files/fr/web/html/attributs_universels/x-ms-format-detection/index.html new file mode 100644 index 0000000000..f11309e1b5 --- /dev/null +++ b/files/fr/web/html/attributs_universels/x-ms-format-detection/index.html @@ -0,0 +1,60 @@ +--- +title: x-ms-format-detection +slug: Web/HTML/Attributs_universels/x-ms-format-detection +tags: + - Attribut + - HTML + - Non-standard + - Reference +translation_of: Web/HTML/Global_attributes/x-ms-format-detection +--- +<div>{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}</div> + +<p>L'attribut <code><strong>x-ms-format-detection</strong></code> détermine si le format de la donnée dans le contenu est détectée automatiquement et, lorsqu'elle est trouvée, est convertie en un lien sur lequel on peut cliquer.</p> + +<div class="blockIndicator note"> +<p><strong>Note :</strong> Les liens créés grâce à la détection de format n'apparaissent pas dans le DOM.</p> +</div> + +<p>{{Non-standard_inline}}Cette propriété est spécifique à Internet Explorer et à Microsoft Edge.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: html"><html x-ms-format-detection="none"> +</pre> + +<h2 id="Valeurs">Valeurs</h2> + +<p>Cet attribut peut prendre une chaîne de caractères parmi les suivantes comme valeur :</p> + +<dl> + <dt><code>all</code></dt> + <dd>Tous les formats de donnée pris en charge sont détectés.</dd> + <dt><code>none</code></dt> + <dd>La détection de format est désactivée.</dd> + <dt><code>phone</code></dt> + <dd>Seuls les numéros de téléphone sont détectés.</dd> +</dl> + +<div class="note"> +<p><strong>Note :</strong> Les liens créés via la détection de format n'auront pas d'impact sur le contenu ou sur la disposition du DOM.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<p>Pour désactiver la détection automatique sous certaines conditions, on pourra par exemple utiliser JavaScript afin d'ajouter <code>x-ms-format-detection</code> sur les éléments qu'on soit sur un mobile (détection activée) ou sur un ordinateur de bureau (détection désactivée) :</p> + +<pre class="brush: js">if (window.matchMedia('(min-width: 1024px)').matches) { + var e = document.getElementsByClassName("phone"); + for (i = 0; i < e.length; i++) + e[i].setAttribute("x-ms-format-detection", "none"); +} +</pre> + +<p>Dans cet exemple, les numéros de téléphone conservent la mise en forme tant que la zone d'affichage (<em>viewport</em>) est moins large que 1024 pixels.</p> + +<h2 id="See_Also" name="See_Also">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/API/Microsoft_Extensions">Les extensions spécifiques à Microsoft</a></li> +</ul> diff --git a/files/fr/web/html/contenu_editable/index.html b/files/fr/web/html/contenu_editable/index.html new file mode 100644 index 0000000000..01e1691ed1 --- /dev/null +++ b/files/fr/web/html/contenu_editable/index.html @@ -0,0 +1,36 @@ +--- +title: Contenu éditable +slug: Web/HTML/Contenu_editable +translation_of: Web/Guide/HTML/Editable_content +--- +<h2 id="Introduction">Introduction</h2> +<p>Chaque élément du HTML5 peut être éditable. Cette fonctionnalité a été introduite longtemps auparavant mais a maintenant été standarisée avec <a class="external" href="http://www.whatwg.org/" title="http://www.whatwg.org/">WHATWG</a> (<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#contenteditable" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#contenteditable">voir la spécification HTML actuelle</a>). Avec des gestionnaires d'événements JavaScript, vous pouvez transformer votre page Web en un éditeur de texte, complet et rapide.</p> +<h2 id="Compatibilité">Compatibilité</h2> +<p>Le contenu éditable est entièrement compatible avec les navigateurs actuels :</p> +<ul> + <li>Firefox 3.5+</li> + <li>Chrome 6.0+</li> + <li>Internet Explorer 6.0+</li> + <li>Safari 3.2+</li> + <li>Opera 8+</li> + <li>iOS Safari 5.0+</li> + <li>Android Browser 3.0+</li> +</ul> +<p>Ce n'est pas encore supporté par Opera Mini et Opera Mobile.</p> +<h2 id="Comment_ça_marche">Comment ça marche ?</h2> +<p>Fixez l'attribut <code>contenteditable</code> à <code>true</code> dans votre élément HTML. Ça peut être fait dans quasiment tous les éléments HTML.</p> +<h2 id="Exemples">Exemples</h2> +<p>Un exemple simple :</p> +<pre><!DOCTYPE html> +<html> + <body> + <div contenteditable="true"> + Ce texte peut être édité par l'utilisateur. + </div> + </body> +</html> </pre> +<p>Vous pouvez observer un exemple concret intégrant JavaScript utilisant LocalStorage <a class="external" href="http://html5demos.com/contenteditable" title="http://html5demos.com/contenteditable">ici</a>. Le code source est disponible <a href="http://html5demos.com/contenteditable#view-source" title="http://html5demos.com/contenteditable#view-source">ici</a>.</p> +<h2 id="Voir_aussi">Voir aussi</h2> +<p><a href="/fr/docs/Midas" title="en/Midas">Comment interagir avec le contenu </a>(style proche de l'ancienne API Internet Explorer) ou encore <a href="/fr/docs/Rich-Text_Editing_in_Mozilla" title="en/rich-text editing in mozilla">ici</a>.</p> +<div> + {{ languages({ "ja": "ja/HTML/Content_Editable", "zh-cn": "zh-cn/HTML/Content_Editable" }) }}</div> 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> diff --git a/files/fr/web/html/formats_date_heure_html/index.html b/files/fr/web/html/formats_date_heure_html/index.html new file mode 100644 index 0000000000..f9da6c5f01 --- /dev/null +++ b/files/fr/web/html/formats_date_heure_html/index.html @@ -0,0 +1,457 @@ +--- +title: Formats de date et d'heure utilisés en HTML +slug: Web/HTML/Formats_date_heure_HTML +tags: + - Date + - Guide + - HTML + - Time +translation_of: Web/HTML/Date_and_time_formats +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Certains éléments HTML manipulent des valeurs temporelles pour des dates ou des heures. Les formats utilisés pour les chaînes de caractères qui définissent ces valeurs sont décrits dans cet article.</span> Les éléments qui utilisent ces données sont notamment les éléments {{HTMLElement("input")}} qui permettent de choisir une date, une heure ou les deux, les éléments {{HTMLElement("ins")}} et {{HTMLElement("del")}} dont l'attribut {{htmlattrxref("datetime", "ins")}} indique la date (ou la date et l'heure) à laquelle l'ajout ou la suppression de contenu a eu lieu.</p> + +<p>Pour les éléments <code><input></code>, voici les différents type (cf. {{htmlattrxref("type", "input")}}) pour lesquels l'attribut {{htmlattrxref("value")}} contient une chaîne de caractères représentant une date ou une heure :</p> + +<div class="twocolumns"> +<ul style="list-style-type: none; padding-left: 0;"> + <li><code><a href="/fr/docs/Web/HTML/Element/input/date">date</a></code></li> + <li><code><a href="/fr/docs/Web/HTML/Element/input/datetime">datetime</a></code> {{deprecated_inline}}</li> + <li><code><a href="/fr/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code></li> + <li><code><a href="/fr/docs/Web/HTML/Element/input/month">month</a></code></li> + <li><code><a href="/fr/docs/Web/HTML/Element/input/time">time</a></code></li> + <li><code><a href="/fr/docs/Web/HTML/Element/input/week">week</a></code></li> +</ul> +</div> + +<h2 id="Exemples">Exemples</h2> + +<p>Avant de détailler plus, voyons quelques exemples de chaînes de caractères utilisées en HTML et qui représentent des valeurs temporelles.</p> + +<table class="standard-table"> + <caption>Exemple de chaînes de caractères utilisées en HTML pour représenter des dates et des heures</caption> + <thead> + <tr> + <th scope="col">Chaîne de caractères</th> + <th colspan="2" scope="col">Date/heure</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>2005-06-07</code></td> + <td>7 juin 2005</td> + <td><a href="/en-US/docs/Web/HTML/Date_and_time_formats#Date_strings">[détails]</a></td> + </tr> + <tr> + <td><code>08:45</code></td> + <td>08h45m (le matin)</td> + <td><a href="/en-US/docs/Web/HTML/Date_and_time_formats#Time_strings">[détails]</a></td> + </tr> + <tr> + <td><code>08:45:25</code></td> + <td>08h45m25s</td> + <td><a href="/en-US/docs/Web/HTML/Date_and_time_formats#Time_strings">[détails]</a></td> + </tr> + <tr> + <td><code>0033-08-04T03:40</code></td> + <td>03h40 (du matin), le 04 août 33</td> + <td><a href="/en-US/docs/Web/HTML/Date_and_time_formats#Local_date_and_time_strings">[détails]</a></td> + </tr> + <tr> + <td><code>1977-04-01T14:00:30</code></td> + <td>30 secondes après 14h00, le premier avril 1977</td> + <td><a href="/en-US/docs/Web/HTML/Date_and_time_formats#Local_date_and_time_strings">[détails]</a></td> + </tr> + <tr> + <td><code>1901-01-01T00:00Z</code></td> + <td>Minuit, UTC, le 1er janvier 1901</td> + <td><a href="/en-US/docs/Web/HTML/Date_and_time_formats#Global_date_and_time_strings">[détails]</a></td> + </tr> + <tr> + <td><code>1901-01-01T00:00:01-04:00</code></td> + <td>Minuit passé d'une seconde sur l'heure de l'Est (EST), le 1er janvier 1901</td> + <td><a href="/en-US/docs/Web/HTML/Date_and_time_formats#Global_date_and_time_strings">[détails]</a></td> + </tr> + </tbody> +</table> + +<h2 id="Notions_essentielles">Notions essentielles</h2> + +<p>Avant de s'intéresser aux différents formats pour la représentation textuelle des valeurs temporelles en HTML, commençons par décrire comment ces valeurs sont définies formellement. HTML utilise une variation du standard {{interwiki("wikipedia", "ISO 8601")}} pour les chaînes de caractères représentant les dates et les heures. Il est toujours utile de vérifier que le format utilisé est compatible avec HTML car la spécification HTML utilise des algorithmes pour analyser ces chaînes qui sont plus précis que le standard ISO 8601 (il peut donc y avoir quelques fines différences).</p> + +<h3 id="Jeu_de_caractères">Jeu de caractères</h3> + +<p>En HTML, les chaînes qui représentent des dates et des heures manipulent uniquement des caractères {{interwiki("wikipedia", "ASCII")}}.</p> + +<h3 id="Numérotation_des_années">Numérotation des années</h3> + +<p>La spécification HTML indique que les années doivent être exprimées selon le <a href="https://fr.wikipedia.org/wiki/Calendrier_gr%C3%A9gorien">calendrier grégorien</a>. Bien que les interfaces utilisateur permettent éventuellement de saisir des dates grâce à d'autres calendriers, la valeur sous-jacente est toujours représentée à l'aide du calendrier grégorien.</p> + +<p>Bien que le calendrier grégorien ait été créé en 1582 afin de remplacer le calendrier julien, la notation grégorienne est « étendue » en HTML jusqu'à 1 après J.C. Aussi, si vous manipulez des dates antérieures à 1582, assurez-vous qu'elles soient bien exprimées selon le calendrier grégorien.</p> + +<p>En HTML, les années sont toujours écrites avec au moins 4 chiffres. Aussi, les années antérieures à l'an 1000 sont complétées avec des zéros : l'an 72 est donc écrit <code>0072</code>. Les années antérieures à l'an 1 ne sont pas prises en charge par HTML.</p> + +<p>Une année est normalement constituée de 365 jours, sauf pendant les <strong>{{anch("Années bissextiles", "années bissextiles")}}</strong>.</p> + +<h4 id="Années_bissextiles">Années bissextiles</h4> + +<p>Une année bissextile est une année dont le numéro est:</p> + +<ul> + <li>Divisible par 400 ou,</li> + <li>Divisible par 4 mais pas par 100</li> +</ul> + +<p>Bien qu'une année calendaire s'étende sur 365 jours, la Terre met environ 365,2422 jours avant d'effectuer une orbite complète autour du soleil. Les années bissextiles permettent d'ajuster le calendrier et de le synchroniser avec la position de la planète le long de l'orbite. Ajouter un jour tous les 4 ans (environ) permet d'avoir une année moyenne longue de 365,25 jours, ce qui est relativement correct.</p> + +<p>En ajustant l'algorithme avec les contraintes ci-avant (divisible par 400 ou divisible par 4 mais pas par 100), on s'approche plus précisement du nombre correct de jours (365,2425). Des secondes intercalaires sont parfois ajoutées au calendrier afin de compenser les trois millièmes restant et le ralentissement naturel de la rotation de la Terre.</p> + +<p>Le deuxième mois de l'année (février) possède 28 jours pendant les années non-bissextiles et 29 jours pendant les années bissextiles.</p> + +<h3 id="Mois_de_l'année">Mois de l'année</h3> + +<p>Une année comporte 12 mois, numérotés de 1 à 12. Les valeurs des mois sont toujours représentées par une chaîne de caractères se composant de deux chiffres : des valeurs entre <code>01</code> et <code>12</code>. Voir le tableau ci-après pour les numéros des mois et le nombre de jours correspondant.</p> + +<h3 id="Jours_du_mois">Jours du mois</h3> + +<p>Les mois numérotés 1, 3, 5, 7, 8, 10 et 12 possèdent 31 jours. Les mois 4, 6, 9 et 11 possèdent 30 jours. Le deuxième mois, février, possède 28 jours sauf pendant les années bissextiles où il possède 29 jours. Le tableau ci-après détaille les mois et leurs noms, ainsi que leur durée en jours.</p> + +<table class="standard-table"> + <caption>Les mois de l'année et leur durée en jours</caption> + <thead> + <tr> + <th scope="row">Numéro du mois</th> + <th scope="col">Nom (en français))</th> + <th scope="col">Durée du mois (en nombre de jours)</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">01</th> + <td>Janvier</td> + <td>31</td> + </tr> + <tr> + <th scope="row">02</th> + <td>Février</td> + <td>28 (29 pour les années bissextiles)</td> + </tr> + <tr> + <th scope="row">03</th> + <td>Mars</td> + <td>31</td> + </tr> + <tr> + <th scope="row">04</th> + <td>Avril</td> + <td>30</td> + </tr> + <tr> + <th scope="row">05</th> + <td>Mai</td> + <td>31</td> + </tr> + <tr> + <th scope="row">06</th> + <td>Juin</td> + <td>30</td> + </tr> + <tr> + <th scope="row">07</th> + <td>Juillet</td> + <td>31</td> + </tr> + <tr> + <th scope="row">o8</th> + <td>Août</td> + <td>31</td> + </tr> + <tr> + <th scope="row">09</th> + <td>Septembre</td> + <td>30</td> + </tr> + <tr> + <th scope="row">10</th> + <td>Octobre</td> + <td>31</td> + </tr> + <tr> + <th scope="row">11</th> + <td>Novembre</td> + <td>30</td> + </tr> + <tr> + <th scope="row">12</th> + <td>Décembre</td> + <td>31</td> + </tr> + </tbody> +</table> + +<h2 id="Représentation_des_semaines">Représentation des semaines</h2> + +<p>Une chaîne de caractères représentant une semaine correspondra à une semaine d'une année donnée. Aussi, une chaîne de caractères <strong>valide</strong> pour représenter une semaine se compose de 4 chiffres représentant l'année, suivis d'un tiret ("<code>-</code>" ou U+002D), suivi de la lettre majuscule "<code>W</code>" (U+0057), suivie d'un numéro de semaine sur deux chiffres.</p> + +<p>Le numéro de la semaine est une chaîne de caractères, avec deux chiffres, entre <code>01</code> et <code>53</code>. Chaque semaine commence un lundi et se termine un dimanche. Il est ainsi possible que les premiers jours de janvier fassent partie de la dernière semaine de l'année précédente et que les derniers jours fassent partie de la première semaine de l'année suivante. La première semaine de l'année est celle qui contient <em>le premier jeudi de l'année</em>. Ainsi, le premier jeudi de 1953 était le 1er janvier et la semaine contenant ce jour est donc considérée la première semaine de l'année. Ainsi, le 30 décembre 1952 appartient à la semaine <code>1953-W01</code>.</p> + +<p>Une année aura 53 semaines si :</p> + +<ul> + <li>Le premier jour de l'année calendaire (le premier janvier) est un jeudi <strong>ou</strong></li> + <li>Le premier jour de l'année calendaire (le premier janvier) est un mercredi et que l'année est une {{anch("Années bissextiles", "année bissextile")}}.</li> +</ul> + +<p>Les autres années contiennent 52 semaines.</p> + +<table class="standard-table"> + <caption>Exemples de chaînes de caractères valides pour représenter des semaines</caption> + <thead> + <tr> + <th scope="col">Chaîne de caractères</th> + <th scope="col">Semaine et année (intervalle de dates)</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>2001-W37</code></td> + <td>Semaine 37 de l'année 2001 (entre le 10 et le 16 septembre 2001)</td> + </tr> + <tr> + <td><code>1953-W01</code></td> + <td>Semaine 1 de l'année 1953 (entre le 29 décembre 1952 et le 4 janvier 1953)</td> + </tr> + <tr> + <td><code>1948-W53</code></td> + <td>Semaine 53 de l'année 1948 (entre le 27 décembre 1948 et le 2 janvier 1949)</td> + </tr> + <tr> + <td><code>1949-W01</code></td> + <td>Semaine 1 de l'année 1949 (entre le 3 janvier et le 9 janvier 1949)</td> + </tr> + <tr> + <td><code>0531-W16</code></td> + <td>Semaine 16 de l'année 531 (entre le 13 avril et le 19 avril 531)</td> + </tr> + <tr> + <td><code>0042-W04</code></td> + <td>Semaine 4 de l'année 42 (entre le 21 et le 27 janvier 42)</td> + </tr> + </tbody> +</table> + +<p>On notera que les deux composantes pour l'année et pour la semaine sont complétées avec des zéros à gauche afin que l'année soit exprimée sur 4 chiffres et que la semaine soit exprimée sur 2 chiffres.</p> + +<h2 id="Représentation_des_mois">Représentation des mois</h2> + +<p>Une chaîne de caractères pour un mois représente un mois d'une année donnée (plutôt qu'un mois « générique »). Aussi, on ne représentera pas simplement le mois de janvier mais le mois de janvier de l'année 1972.</p> + +<p>Une chaîne de caractères représentant un mois est valide si elle commence par un numéro d'année valide (une chaîne de caractères composée de quatre chiffres), suivie d'un tiret ("<code>-</code>", ou U+002D), suivi d'un nombre sur deux chiffres où <code>01</code> représente janvier et où <code>12</code> représente décembre.</p> + +<table class="standard-table"> + <caption>Exemples de chaînes de caractères valides pour la représentation d'un mois</caption> + <thead> + <tr> + <th scope="col">Chaîne de caractères</th> + <th scope="col">Le mois et l'année</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>17310-09</code></td> + <td>Le mois de septembre de l'année 17310</td> + </tr> + <tr> + <td><code>2019-01</code></td> + <td>Le mois de janvier de l'année 2019</td> + </tr> + <tr> + <td><code>1993-11</code></td> + <td>Le mois de novembre de l'année 1993</td> + </tr> + <tr> + <td><code>0571-04</code></td> + <td>Le mois d'avril de l'année 571</td> + </tr> + <tr> + <td><code>0001-07</code></td> + <td>Le mois de juillet de l'an 1</td> + </tr> + </tbody> +</table> + +<p>On notera que les années sont exprimées sur au moins 4 chiffres et que les années antérieures à 1000 sont préfixées de 0.</p> + +<h2 id="Représentation_des_dates">Représentation des dates</h2> + +<p>Une chaîne de caractères représentant une date est valide si elle contient : une année (cf. ci-avant) suivie d'un tiret, suivi d'un mois, suivi d'un tiret ("<code>-</code>" ou U+002D) suivi du numéro du jour dans le mois sur deux chiffres.</p> + +<table class="standard-table"> + <caption>Exemples de chaînes de caractères valides pour représenter des dates</caption> + <thead> + <tr> + <th scope="col">Chaîne de caractères</th> + <th scope="col">Date complète</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>1993-11-01</code></td> + <td>1er novembre 1993</td> + </tr> + <tr> + <td><code>1066-10-14</code></td> + <td>14 octobre 1066</td> + </tr> + <tr> + <td><code>0571-04-22</code></td> + <td>22 avril 571</td> + </tr> + <tr> + <td><code>0062-02-05</code></td> + <td>5 février 62</td> + </tr> + </tbody> +</table> + +<h2 id="Représentation_des_heures">Représentation des heures</h2> + +<p>Une chaîne de caractères représentant une heure peut décrire différentes précisions : minute, seconde ou milliseconde. Il n'est pas possible d'indiquer uniquement l'heure ou les minutes. Une chaîne valide se compose <em>a minima</em> d'une valeur sur deux chiffres représentant une heure, suivi de deux-points ("<code>:</code>", U+003A) puis d'une valeur sur deux chiffres exprimant les minutes. La valeur des minutes peut ensuite être suivie d'un autre deux-points puis d'une valeur sur deux chiffres pour les secondes. Il est possible d'indiquer les millisecondes en ajoutant un point ("<code>.</code>", U+002E) après les secondes, suivi d'une valeur sur un, deux ou trois chiffres.</p> + +<p>Voici quelques règles supplémentaires :</p> + +<ul> + <li>L'heure est toujours exprimée selon une horloge sur 24 heures où <code>00</code> correspond à minuit et où <code>23</code> correspond à onze heures du soir. Aucune valeur en dehors de l'intervalle <code>00</code>–<code>23</code> n'est autorisée.</li> + <li>La valeur représentant les minutes doit être composée de deux chiffres et être située entre <code>00</code> et <code>59</code>. Les valeurs en dehors de cet intervalle ne sont pas autorisées.</li> + <li>Si les secondes ne sont pas exprimées, il ne faut pas que la valeur se termine par un deux-points (après les minutes).</li> + <li>Si les secondes sont exprimées, leur nombre doit être entre <code>00</code> et <code>59</code>. Il n'est pas possible d'indiquer des secondes intercalaires à l'aide de valeurs telles que <code>60</code> ou <code>61</code>.</li> + <li>Si le nombre de secondes est indiqué et que c'est un entier, il ne doit pas être suivi d'un point.</li> + <li>Si les millisecondes sont indiquées, la valeur correspondante peut être composée d'un à trois chiffres.</li> +</ul> + +<table class="standard-table"> + <caption>Exemples de chaînes de caractères valides pour exprimer une heure</caption> + <thead> + <tr> + <th scope="col">Chaîne de caractères</th> + <th scope="col">Heure</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>00:00:30.75</code></td> + <td>Minuit passé de 30 secondes et 750 millisecondes</td> + </tr> + <tr> + <td><code>12:15</code></td> + <td>Midi passé de quinze minutes</td> + </tr> + <tr> + <td><code>13:44:25</code></td> + <td>13 heures 44 et 25 secondes</td> + </tr> + </tbody> +</table> + +<h2 id="Représentation_des_dates_et_heures_locales">Représentation des dates et heures locales</h2> + +<p>Une chaîne de caractères <code><a href="/fr/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code> se compose d'une chaîne de caractères représentant une date, suivie de la lettre "<code>T</code>" ou d'une espace puis d'une chaîne de caractères représentant une heure. La représentation ne contient aucune information quant au fuseau horaire dont il est question et on présume que la valeur temporelle indiquée est relative au fuseau horaire de l'utilisateur.</p> + +<p>Lorsqu'on définit la valeur de l'attribut {{htmlattrxref("value", "input")}} d'un champ <code>datetime-local</code>, la chaîne de caractères est normalisée. Les formes normalisées utilisent toujours la lettre T comme séparateur entre la date et l'heure. De plus, les formes normalisées utilisent toujours la forme la plus courte pour exprimer l'heure (les secondes sont omises si leur valeur est <code>:00</code>).</p> + +<table class="standard-table"> + <caption>Exemples de chaînes de caractères valides pour l'expression de dates/heures</caption> + <thead> + <tr> + <th scope="col">Chaîne de caractères</th> + <th scope="col">Version normalisée</th> + <th scope="col">Date et heure correspondantes</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>1986-01-28T11:38:00.01</code></td> + <td><code>1986-01-28T11:38:00.01</code></td> + <td>28 janvier 1986 à 11 heures et 38 minutes passées de 10 millisecondes</td> + </tr> + <tr> + <td><code>1986-01-28 11:38:00.010</code></td> + <td><code>1986-01-28T11:38:00.01</code><sup><a href="#datetime-local-footnote1">1</a></sup></td> + <td>28 janvier 1986 à 11 heures et 38 minutes passées de 10 millisecondes</td> + </tr> + <tr> + <td><code>0170-07-31T22:00:00</code></td> + <td><code>0170-07-31T22:00</code><sup><a href="#datetime-local-footnote2">2</a></sup></td> + <td>31 juillet 170 à 22 heures</td> + </tr> + </tbody> +</table> + +<ol> + <li>On notera qu'après la normalisation, on obtient la même chaîne que sur l'exemple précédent : l'espace séparateur a été remplacé par un <code>"T"</code> et le zéro de terminaison a été supprimé pour raccourcir la chaîne de l'heure.</li> + <li>On notera que la forme normalisée de cette date ne contient pas l'expression des secondes.</li> +</ol> + +<h2 id="Représentation_des_dates_et_heures_universelles">Représentation des dates et heures universelles</h2> + +<p>Une valeur de date/heure universelle exprime la date et l'heure mais aussi le fuseau horaire de l'instant. Une chaîne de caractères représentant une telle valeur commence de la même façon qu'une chaîne de caractère représentant une date/heure locale, suivie d'une chaîne de caractères indiquant le décalage horaire.</p> + +<h3 id="Chaîne_de_caractères_exprimant_le_décalage_horaire">Chaîne de caractères exprimant le décalage horaire</h3> + +<p>La chaîne de caractères qui décrit le décalage horaire contient un décalage positif d'heures et de minutes, relativement à un fuseau de base. Il existe deux points de référence qui sont très proches sans être identiques :</p> + +<ul> + <li>Pour les dates situées après la création du temps coordonné universel (UTC, {{interwiki("wikipedia", "Coordinated Universal Time")}}) au début des années 60, le point de référence est indiqué avec <code>Z</code> et le décalage indique le décalage d'un fuseau horaire par rapport au méridien situé à la longitude 0° (méridien de Greenwich).</li> + <li>Pour les dates antérieures à UTC, le point de référence est exprimé en {{interwiki("wikipedia", "UT1")}}, qui correspond au temps solaire au méridien de longitude 0°.</li> +</ul> + +<p>La chaîne de caractères indiquant le décalage est directement ajoutée après la valeur pour la date et l'heure. Si la date et l'heure sont déjà exprimées relativement à UTC, on pourra simplement suffixer <code>"Z"</code>, sinon, on construira le complément de la façon suivante :</p> + +<ol> + <li>Un caractère indiquant le signe du décalage : le plus ("<code>+</code>" ou U+002B) pour les fuseaux situés à l'est du méridien ou le moins ("<code>-</code>" ou U+002D) pour les fuseaux situés à l'ouest.</li> + <li>Deux chiffres indiquant le nombre d'heures de décalage par rapport au méridien. Cette valeur doit être comprise entre <code>00</code> et <code>23</code>.</li> + <li>Deux-points ("<code>:</code>") (nécessaires uniquement si le décalage contient des minutes)</li> + <li>Deux chiffres indiquant les minutes de décalage. Cette valeur doit être comprise entre <code>00</code> et <code>59</code>.</li> +</ol> + +<p>Bien que ces règles permettent d'exprimer des fuseaux horaires entre -23:59 et +23:59, l'intervalle actuel des décalages horaires est -12:00 à +14:00 et il n'y a pas de fuseau horaire pour lequel le décalage en minutes est différent de <code>00</code>, <code>30</code> ou <code>45</code>. Cela peut en théorie évoluer à tout moment car les pays sont libres de modifier leur fuseau horaire quand ils le souhaitent.</p> + +<table class="standard-table"> + <caption>Exemples de chaînes de caractères valides pour l'expression de dates/heures universelles</caption> + <thead> + <tr> + <th scope="col">Chaîne de caractères</th> + <th scope="col">Date/heure universelle</th> + <th scope="col">Date/heure sur le méridien solaire</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>2005-06-07T00:00Z</code></td> + <td>7 juin 2005 à minuit UTC</td> + <td>7 juin 2005 à minuit</td> + </tr> + <tr> + <td><code>1789-08-22T12:30:00.1-04:00</code></td> + <td>22 août 1789 à midi trente (passé d'un dixième de seconde) selon l'heure avancée de l'Est (<em>Eastern Daylight Time</em> (EDT))</td> + <td>22 août 1789 à 16 heures trente passées d'un dixième de seconde</td> + </tr> + <tr> + <td><code>3755-01-01 00:00+10:00</code></td> + <td>1er janvier 3755 à minuit pour le fuseau AEST (<em>Australian Eastern Standard Time</em>)</td> + <td>31 décembre 3754 à 14h</td> + </tr> + </tbody> +</table> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("input")}}</li> + <li>Les éléments {{HTMLElement("ins")}} et {{HTMLElement("del")}} qui possèdent l'attribut <code>datetime</code> qui permet de définir une date ou une date et une heure locales pour indiquer le moment où le contenu a été inséré ou supprimé</li> + <li><a href="https://www.iso.org/iso-8601-date-and-time-format.html">La spécification ISO 8601</a></li> + <li><a href="/fr/docs/Web/JavaScript/Guide/Nombres_et_dates">Le chapitre sur les nombres et les dates</a> dans le <a href="/fr/docs/Web/JavaScript/Guide">Guide JavaScript</a></li> + <li>L'objet JavaScript {{jsxref("Date")}}</li> + <li>L'objet <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/DateTimeFormat">Intl.DateTimeFormat</a></code> qui permet de formater des dates et des heures pour une locale donnée</li> +</ul> diff --git a/files/fr/web/html/images_avec_le_contrôle_d_accès_http/index.html b/files/fr/web/html/images_avec_le_contrôle_d_accès_http/index.html new file mode 100644 index 0000000000..e0f92b24c7 --- /dev/null +++ b/files/fr/web/html/images_avec_le_contrôle_d_accès_http/index.html @@ -0,0 +1,117 @@ +--- +title: Images avec le contrôle d'accès HTTP +slug: Web/HTML/Images_avec_le_contrôle_d_accès_HTTP +tags: + - Avancé + - CORS + - Canvas + - HTML + - Reference +translation_of: Web/HTML/CORS_enabled_image +--- +<div>{{QuickLinksWithSubpages("/fr/docs/Web/HTML/")}}</div> + +<p><span class="seoSummary">HTML permet d'utiliser l'attribut {{htmlattrxref("crossorigin", "img")}} sur les images. Utilisé avec un en-tête {{Glossary("CORS")}} adéquat, les images définies par {{HTMLElement("img")}} provenant d'origines étrangères pourront être utilisées au sein d'un élément {{HTMLElement("canvas")}} comme si elles avaient été chargées depuis l'origine courante.</span></p> + +<p>Pour plus de détails sur l'attribut <code>crossorigin</code>, voir <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS">les attributs de paramétrage du CORS</a>.</p> + +<h2 id="Canevas_corrompu_et_sécurité">Canevas corrompu et sécurité</h2> + +<p>Les pixels composant un canevas pouvant venir de différentes sources, notamment d'images ou de vidéos récupérées depuis des hôtes tiers, il est nécessaire de se prémunir contre certains problèmes de sécurité.</p> + +<p>Dès que des données sont chargées dans le canevas depuis une autre origine sans avoir été « approuvées » par le CORS, le canevas devient <strong>corrompu</strong> (<em>tainted</em>). Dès qu'un canevas est corrompu, il n'est plus considéré comme sécurisé et toute tentative de récupérer des données depuis les données de l'image résultera en une exception.</p> + +<p>Si la source du contenu tiers est un élément HTML {{HTMLElement("img")}} ou SVG {{SVGElement("svg")}}, il n'est plus permis de récupérer le contenu du canevas.</p> + +<p>Si la source du contenu tiers est une image obtenue à partir d'un {{domxref("HTMLCanvasElement")}} ou d'une {{domxref("ImageBitMap")}} et que la source de l'image ne respecte pas les règles quant à l'unicité de l'origine, il ne sera pas possible de lire le contenu du canevas.</p> + +<p>Appeler l'une des méthodes suivantes sur un canevas corrompu déclenchera une erreur :</p> + +<ul> + <li>{{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} sur le contexte du canevas</li> + <li>{{domxref("HTMLCanvasElement.toBlob", "toBlob()")}} sur l'élément {{HTMLElement("canvas")}}</li> + <li>{{domxref("HTMLCanvasElement.toDataURL", "toDataURL()")}} sur le canevas</li> +</ul> + +<p>L'exception levée par de tels appels sera une exception <code>SecurityError</code>. Cette mesure protège les utilisateurs contre l'exposition de données privées via des images provenant de sites tiers sans permission.</p> + +<h2 id="Stocker_une_image_provenant_d'une_origine_tierce">Stocker une image provenant d'une origine tierce</h2> + +<p>Dans cet exemple, on souhaite autoriser la récupération et l'enregistrement d'images provenant d'une autre origine. Pour parvenir à ce résultat, il faudra configurer le serveur et également écrire du code pour le site web.</p> + +<h3 id="Configuration_serveur">Configuration serveur</h3> + +<p>Pour commencer, configurons le serveur stockant les images avec un en-tête {{HTTPHeader("Access-Control-Allow-Origin")}} qui permet un accès multi-origines aux fichiers images.</p> + +<p>Dans la suite de cet exemple, on prendra le cas d'un site est servi via <a href="https://httpd.apache.org/">Apache</a>. On pourra utiliser le fragment <a href="https://github.com/h5bp/server-configs-apache/blob/master/src/cross-origin/images.conf">de configuration serveur Apache pour les images CORS</a> :</p> + +<pre class="brush: xml"><IfModule mod_setenvif.c> + <IfModule mod_headers.c> + <FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)$"> + SetEnvIf Origin ":" IS_CORS + Header set Access-Control-Allow-Origin "*" env=IS_CORS + </FilesMatch> + </IfModule> +</IfModule></pre> + +<p>Pour résumer, cela permet de configurer le serveur afin de pouvoir accéder aux fichiers graphiques (ceux avec les extensions ".bmp", ".cur", ".gif", ".ico", ".jpg", ".jpeg", ".png", ".svg", ".svgz", and ".webp") depuis d'autres origines, d'où qu'elles soient sur Internet.</p> + +<h3 id="Implémenter_l'enregistrement">Implémenter l'enregistrement</h3> + +<p>Maintenant que le serveur est configuré pour permettre la récupération d'image depuis plusieurs origines, on peut écrire le code qui permet à l'utilisateur d'enregistrer les images <a href="/fr/docs/Web/API/Web_Storage_API">en stockage local</a> comme si elles étaient servies depuis le même domaine que le code.</p> + +<p>Pour cela, on utilise l'attribut {{htmlattrxref("crossorigin")}} en définissant {{domxref("HTMLImageElement.crossOrigin", "crossOrigin")}} sur l'élément {{domxref("HTMLImageElement")}} sur lequel l'image sera chargée. Ainsi, on indique au navigateur de demander un accès multi-origine lors du téléchargement de l'image.</p> + +<h4 id="Démarrer_le_téléchargement">Démarrer le téléchargement</h4> + +<p>Voici le code qui démarre le téléchargement (déclenché par exemple lorsque l'utilisateur clique sur un bouton « Télécharger ») :</p> + +<pre class="brush: js">function startDownload() { + let imageURL = "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn_logo-only_color.svg?1535749917189"; + + downloadedImg = new Image; + downloadedImg.crossOrigin = "Anonymous"; + downloadedImg.addEventListener("load", imageReceived, false); + downloadedImg.src = imageURL; +}</pre> + +<p>Ici, l'URL de l'image à télécharger est codée en dur mais cette valeur pourrait très bien provenir d'un argument passé à la fonction. Pour démarrer le téléchargement, on crée un nouvel objet {{domxref("HTMLImageElement")}} grâce au constructeur {{domxref("HTMLImageElement.Image", "Image()")}}. L'image est ensuite configurée afin de permettre un téléchargement multi-origine grâce à l'attribut <code>crossOrigin</code> paramétré avec <code>"Anonymous"</code> (qui permet le téléchargement, non-authentifié, d'une image multi-origine). Un gestionnaire d'évènement est ajouté afin de réagir à l'évènement {{event("load")}} lorsque l'image a été reçue.</p> + +<p>Enfin, l'attribut {{domxref("HTMLImageElement.src", "src")}} de l'image est défini avec l'URL de l'image à télécharger et le téléchargement démarre.</p> + +<h4 id="Recevoir_et_enregistrer_l'image">Recevoir et enregistrer l'image</h4> + +<p>Voici le fragment de code exécuté lorsque l'image a été téléchargée :</p> + +<pre class="brush: js">function imageReceived() { + let canvas = document.createElement("canvas"); + let context = canvas.getContext("2d"); + + canvas.width = downloadedImg.width; + canvas.height = downloadedImg.height; + + context.drawImage(downloadedImg, 0, 0); + imageBox.appendChild(canvas); + + try { + localStorage.setItem("saved-image-example", canvas.toDataURL("image/png")); + } + catch(err) { + console.log("Error: " + err); + } +}</pre> + +<p><code>imageReceived()</code> est invoquée lorsque l'évènement <code>"load"</code> est déclenché sur l'élément <code>HTMLImageElement</code> qui reçoit l'image téléchargée. Cet évènement se produit lorsque l'ensemble des données téléchargées est disponible. Cette fonction commence par créer un nouvel élément {{HTMLElement("canvas")}} qui sera utilisé afin de convertir l'image en une URL de donnée. On récupère également un accès au contexte du canevas pour dessiner en 2D ({{domxref("CanvasRenderingContext2D")}}) dans la variable <code>context</code>.</p> + +<p>La taille du canevas est ajustée afin que ses dimensions correspondent à celles de l'image. L'image est ensuite dessinée dans le canevas grâce à {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}. Le canevas est alors inséré dans le document et l'image y devient visible.</p> + +<p>Enfin, on enregistre l'image dans le stockage local. Pour cela, on utilise les méthodes de l'API <em>Web Storage</em> en passant par la variable globale {{domxref("Window.localStorage", "localStorage")}}. La méthode {{domxref("HTMLCanvasElement.toDataURL", "toDataURL()")}} est utilisée afin de convertir l'image en une URL de données représentant une image PNG qui est enregistrée dans l'espace local grâce à la méthode {{domxref("Storage.setItem", "setItem()")}}.</p> + +<p>Vous pouvez <a href="https://cors-image-example.glitch.me/">essayer</a> ou <a href="https://glitch.com/edit/#!/remix/cors-image-example">adapter</a> cet exemple sur Glitch.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a class="external" href="https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-crossorigin">Spécification HTML : l'attribut <code>crossorigin</code></a></li> + <li><a href="/fr/docs/Web/API/Web_Storage_API">L'API <em>Web Storage</em></a></li> +</ul> diff --git a/files/fr/web/html/index.html b/files/fr/web/html/index.html new file mode 100644 index 0000000000..9d4ec4719b --- /dev/null +++ b/files/fr/web/html/index.html @@ -0,0 +1,98 @@ +--- +title: HTML (HyperText Markup Language) +slug: Web/HTML +tags: + - HTML + - HTML 5 + - Landing + - Reference + - Web +translation_of: Web/HTML +--- +<div>{{HTMLSidebar}}</div> + +<p><strong>HTML</strong> signifie « <em>HyperText Markup Language</em> » qu'on peut traduire par « langage de balises pour l'hypertexte ». Il est utilisé afin de créer et de représenter le contenu d'une page web et sa structure. D'autres technologies sont utilisées avec HTML pour décrire la présentation d'une page (<a href="/fr/docs/Web/CSS">CSS</a>) et/ou ses fonctionnalités interactives (<a href="/fr/docs/Web/JavaScript">JavaScript</a>).</p> + +<p>HTML fonctionne grâce à des « balises » qui sont insérées au sein d'un texte normal. Chacune de ces balises indique la signification de telle ou telle portion de texte dans le site. On parle d'« hypertexte » en référence aux liens qui connectent les pages web entre elles. C'est la mécanique originelle du « World Wide Web » que nous connaissons aujourd'hui. En écrivant et publiant des pages web, vous devenez un acteur du Web dès que votre site est accessible en ligne.</p> + +<p>HTML permet d'inclure des images et d'autres contenus dans les pages web. Grâce à HTML, chacun peut créer des sites web aussi bien statiques que dynamiques. HTML est le langage qui permet de décrire la structure et le contenu d'un document web. Ce contenu est balisé par des éléments HTML comme {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}},{{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}} et bien d'autres encore. Ces éléments forment les blocs utilisés pour construire un site web.</p> + +<p>En HTML, les balises sont insensibles à la casse et peuvent aussi bien être écrites en minuscules, en majuscules voire avec un mélange des deux. Autrement dit, la balise <code><title></code> pourrait très bien être écrite comme <code><Title></code>, <code><TiTle></code> ou d'une autre façon.</p> + +<p>Les articles suivants fournissent des éléments de référence utiles au développement web :</p> + +<section class="cleared" id="sect1"> +<ul class="card-grid"> + <li><span>Introduction à HTML</span> + + <p>Vous faites vos premiers pas dans le développement web ? <a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_HTML">Nos articles sur les bases de HTML</a> expliquent ce qu'est HTML et comment l'utiliser.</p> + </li> + <li><span>Tutoriels HTML</span> + <p>Pour plus d'informations sur l'utilisation du HTML, des tutoriels et des exemples complets, vous pouvez consulter <a href="/fr/Apprendre/HTML">notre section Apprendre HTML</a>.</p> + </li> + <li><span>Référence HTML</span> + <p>Dans notre <a href="/fr/docs/Web/HTML/Reference">référence exhaustive</a>, vous trouverez le détail de chaque élément et attribut constituant HTML.</p> + </li> +</ul> + +<div> +<div> +<h2 id="Tutoriels">Tutoriels</h2> + +<p>La section <a href="/fr/docs/Apprendre/HTML">Apprendre HTML</a> contient plusieurs modules pour vous apprendre à utiliser HTML sans autre connaissance particulière.</p> + +<dl> + <dt><a href="/fr/Apprendre/HTML/Introduction_à_HTML">Une introduction à HTML</a></dt> + <dd>Dans ce module, on brosse un premier portrait de HTML pour présenter les concepts importants, la syntaxe. On voit comment appliquer HTML sur du texte, comment créer des hyperliens et comment structurer une page web grâce à HTML.</dd> + <dt><a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding">Le multimédia et l'intégration</a></dt> + <dd>Dans ce module, on explore comment utiliser HTML pour intégrer des fichiers multimédias dans une page web. Cela couvre les différentes façons d'inclure une image, comment ajouter une vidéo ou un fichier audio voire aussi comment intégrer d'autres pages web.</dd> + <dt><a href="/fr/docs/Apprendre/HTML/Tableaux">Les tableaux HTML</a></dt> + <dd>Il est parfois compliqué de représenter des données tabulaires de façon compréhensible et lisible sur une page web. Dans ce module, on voit les différentes balises utilisées pour construire des tableaux et certaines fonctionnalités plus complexes comme les légendes et résumés.</dd> + <dt><a href="/fr/docs/Web/Guide/HTML/Formulaires">Les formulaires HTML</a></dt> + <dd>Les formulaires sont cruciaux sur le Web, ils permettent de créer un compte sur un site, de se connecter, d'acheter des produits, d'écrire des commentaires, etc. Dans ce module, on voit comment créer des formulaires pour le navigateur (« côté client »).</dd> + <dt><a href="/fr/Apprendre/HTML/Comment">Utiliser HTML pour résoudre des problèmes courants</a></dt> + <dd>Ce module fournit un ensemble d'articles au sujet des problèmes qu'on rencontre fréquemment lorsqu'on crée une page web : gérer les titres, ajouter des images ou des vidéos, mettre en avant une partie du texte, créer un formulaire, etc.</dd> +</dl> + +<h2 id="Références">Références</h2> + +<dl> + <dt><a href="/fr/docs/Web/HTML/Reference">Référence HTML</a></dt> + <dd>HTML est un langage décrivant la structure et le contenu sémantique d'un document web. Il est constitué d'<strong>éléments</strong>, chacun pouvant être paramétré grâce à différents <strong>attributs</strong>.</dd> + <dt><a href="/fr/docs/Web/HTML/Element">Référence des éléments HTML</a></dt> + <dd>Cette page liste les différents éléments HTML.</dd> + <dt><a href="/fr/docs/Web/HTML/Attributs_globaux">Référence des attributs HTML</a></dt> + <dd>Les éléments HTML possèdent des attributs. Ce sont des valeurs additionnelles permettant de configurer ou d'ajuster le comportement les éléments de manières à répondre aux critères de l'utilisateur.</dd> + <dt><a href="/fr/docs/Web/HTML/Éléments_en_ligne">Éléments en ligne</a> et <a href="/fr/docs/Web/HTML/%C3%89l%C3%A9ments_en_bloc">éléments de bloc</a></dt> + <dd>Les éléments HTML sont habituellement des éléments « en ligne » ou des éléments de bloc. Un élément en ligne occupe seulement l'espace associé aux balises. Les éléments de bloc sont une catégorie d'éléments HTML opposés aux éléments en ligne. Leur caractéristique principale réside dans le fait qu'ils sont séparés par un saut de ligne avant et après l'élément. Ce faisant, ils prennent la largeur de leurs conteneurs (créant ainsi un bloc de contenu).</dd> + <dt><a href="">Attributs universels</a></dt> + <dd>Les attributs universels peuvent être utilisés sur tous les éléments HTML, <em>même ceux non spécifiés dans le standard</em>. Par exemple, les navigateurs qui prennent en charge HTML5 masquent les contenus marqués comme <code><toto hidden>...<toto></code><code>, bien que </code><code><toto></code> ne soit pas un élément valide HTML.</dd> + <dt><a href="/fr/docs/Web/HTML/Types_de_lien">Types de lien</a></dt> + <dd>Les différents liens permettent de décrire les relations entre deux documents qui sont reliés entre eux par un élément {{HTMLElement("a")}}, {{HTMLElement("area")}} ou {{HTMLElement("link")}}.</dd> + <dt><a href="/fr/docs/Web/Media/Formats">Formats de média audio et vidéo pris en charge par HTML</a></dt> + <dd>Les éléments {{HTMLElement("audio")}} et {{HTMLElement("video")}} permettent d'ajouter des médias audio et vidéo directement dans le navigateur (sans avoir à utiliser des plugins ou programmes tiers).</dd> + <dt><a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu">Types de contenu HTML</a></dt> + <dd>HTML s'organise selon différents types de contenu dont chacun peut être autorisé ou non en fonction du contexte. Ces catégories indiquent quels éléments peuvent être contenus ou non dans d'autres éléments. Cet article explique le fonctionnement de ces catégories.</dd> +</dl> +</div> + +<div> +<h2 id="Autres_guides">Autres guides</h2> + +<dl> + <dt class="landingPageList"><a href="/fr/docs/Web/HTML/Images_avec_le_contrôle_d_accès_HTTP">Images avec CORS activé</a></dt> + <dd class="landingPageList">L'attribut {{htmlattrxref("crossorigin", "img")}}, utilisé avec un en-tête {{glossary("CORS")}} adéquat, permet aux images définies via un élément {{HTMLElement("img")}} d'être chargées depuis des origines tierces et d'être utilisées au sein d'éléments {{HTMLElement("canvas")}} comme si elles étaient chargées depuis l'origine courante.</dd> + <dt><a href="fr/docs/Web/HTML/Reglages_des_attributs_CORS">Attributs de réglage du CORS</a></dt> + <dd>Certains des éléments HTML supportant le <a href="/fr/docs/HTTP/Access_control_CORS">CORS</a> (Cross-Origin Resource Sharing) comme {{HTMLElement("img")}} ou {{HTMLElement("video")}} ont un attribut {{HTMLattrxref("crossorigin","img")}} qui permet de configurer les requêtes CORS pour les données de l'élément à renvoyer.</dd> + <dt><a href="/fr/docs/Web/HTML/Gestion_du_focus_en_HTML">Gérer le focus en HTML</a></dt> + <dd>L'attribut DOM {{domxref("Document.activeElement")}} et la méthode DOM {{domxref("Document.hasFocus()")}} permettent au programmeur de mieux contrôler l'interactivité d'une page vis à vis des actions de l'utilisateur. Ils peuvent par exemple être utilisés pour des statistiques, pour surveiller le nombre de clics sur certains liens d'une page, pour comptabiliser le nombre de fois où l'élément reçoit le focus, etc. De plus, combinés à AJAX, ils aident à minimiser le nombre de requêtes au serveur, en fonction de l'activité de l'utilisateur et de l'agencement de la page.</dd> + <dt class="landingPageList"><a href="/fr/docs/Web/HTML/Précharger_du_contenu">Précharger du contenu grâce à <code>rel="preload"</code></a></dt> + <dd class="landingPageList">La valeur <code>preload</code> de l'attribut {{htmlattrxref("rel", "link")}} associé à l'élément {{htmlelement("link")}} permet d'écrire des requêtes de récupération de ressources au sein de l'élément {{htmlelement("head")}} du document HTML pour les ressources qui seront nécessaires à la page peu de temps après le chargement. Les ressources ciblées sont ainsi préchargées lors du chargement de la page avant que le navigateur effectue un premier rendu. Cela permets que les ressources soient disponibles plus tôt et moins susceptibles de bloquer l'affichage de la page, améliorant ainsi les performances. Cet article explique les bases du fonctionnement de <code>preload</code>.</dd> + <dt class="landingPageList"><a href="/fr/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">Modes de compatibilité (<em>quirks mode</em>) et mode standard</a></dt> + <dd class="landingPageList">Des informations historiques à propos du mode <em>quirks</em> et du mode standard.</dd> +</dl> +</div> +</div> + +<p><a href="/fr/docs/tag/HTML">Voir tout…</a></p> +</section> diff --git a/files/fr/web/html/index/index.html b/files/fr/web/html/index/index.html new file mode 100644 index 0000000000..1b11c889ca --- /dev/null +++ b/files/fr/web/html/index/index.html @@ -0,0 +1,9 @@ +--- +title: Index de la documentation HTML +slug: Web/HTML/Index +tags: + - HTML + - Index +translation_of: Web/HTML/Index +--- +<p>{{Index("/fr/docs/Web/HTML")}}</p> diff --git a/files/fr/web/html/introduction_to_html5/index.html b/files/fr/web/html/introduction_to_html5/index.html new file mode 100644 index 0000000000..51eaf4850e --- /dev/null +++ b/files/fr/web/html/introduction_to_html5/index.html @@ -0,0 +1,40 @@ +--- +title: Introduction à HTML5 +slug: Web/HTML/Introduction_to_HTML5 +tags: + - HTML + - HTML5 +translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +--- +<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a> est la nouvelle version du standard HTML. Il apporte non seulement l'utilisation de média riches (vidéo, audio, SVG, etc.) mais aussi des fonctionnalités permettant le développement d'applications web bien plus attractives et interactives.</p> + +<p>Étant donné que HTML5 est encore en cours d'évolution, certains navigateurs ne supportent pas encore toutes les fonctionnalités offertes par ce nouveau standard. Ceci dit Gecko (et donc Firefox) supporte déjà dans sa version 1.8.1 une majorité des possibilités de HTML5. Vous trouverez ce que Gecko supporte déjà en visitant cette page : <a href="/fr/HTML/HTML5" title="fr/HTML/HTML5">HTML5</a>. Pour obtenir davantage d'informations sur le support de HTML5 par de multiples navigateurs, jetez un coup d'œil sur le site<a class="external" href="http://caniuse.com/#cats=HTML5" title="http://caniuse.com/#cats=HTML5"> CanIUse</a> .</p> + +<h2 id="Indiquer_que_le_document_contient_du_HTML5_grâce_au_doctype_HTML5">Indiquer que le document contient du HTML5 grâce au doctype HTML5</h2> + +<p>La doctype HTML5 est très simple, il s'agit simplement de ceci :</p> + +<pre class="brush: html"><!DOCTYPE html> +</pre> + +<p>Cela permet au navigateur ne supportant pas encore le HTML5 de passer en mode standard et ainsi d'ignorer les balises inconnues.</p> + +<p>Il est beaucoup plus simple que les précédents doctypes, et plus court. Il est ainsi plus facile à retenir et réduit le nombre d'octets devant être téléchargés.</p> + +<h2 id="Déclarer_l'encodage_de_caractères_avec_<meta_charset>">Déclarer l'encodage de caractères avec <code><meta charset></code></h2> + +<p>La première chose que l'on fait d'habitude sur une page web c'est déclarer l'encodage de caractère utilisé. Dans les versions précédentes de HTML, ceci était fait en utilisant le très complexe élément {{HTMLElement("meta")}}. Avec HTML5, c'est beaucoup plus simple :</p> + +<pre class="brush:html;"><meta charset="UTF-8"></pre> + +<p>Placez ceci au tout début de votre élément {{HTMLElement("head") }}, car certains navigateurs recommencent leur interprétation des documents HTML, si l'encodage de caractère déclaré est différent de ce qu'ils avaient anticipé. De plus, il est recommandé d'utiliser UTF-8, car il simplifie la gestion des caractères dans les documents utilisant plusieurs graphies.</p> + +<p>Notez que HTML5 limite les encodages autorisés à ceux qui sont compatibles avec ASCII et utilisant au moins 8 bits. Ceci pour améliorer la sécurité et éviter certains types d'attaques.</p> + +<h2 id="Utiliser_le_nouveau_parser_HTML5">Utiliser le nouveau parser HTML5</h2> + +<p>Les nouvelles règles d'analyse du HTML5, celles qui s'occupent de la sémantique du code, ont été renforcées. Jusqu'à l'arrivée du HTML5, seules les règles pour un code valide avaient été définies. À la moindre erreur dans le code (la plupart des sites Web en comportent au moins une), le comportement à adopter était laissé à la libre interprétation des navigateurs, qui ne choisissaient pas toujours le même. Maintenant, lorsque des erreurs sont rencontrées dans le code, tous les navigateurs implémentant HTML5 doivent se comporter de la même façon.</p> + +<p>Cette obligation aide les développeurs Web. Bien que tous les nouveaux navigateurs utilisent maintenant les règles d'analyse d'HTML5, des navigateurs ne respectant pas HTML5 sont encore utilisés. Il est toujours fortement recommandé d'écrire un code valide, car il est plus facile à lire et à maintenir, et diminue les risques d'incompatibilité avec les vieux navigateurs.</p> + +<p>Ne vous inquiétez pas, vous n'avez rien à changer sur votre site Web, les développeurs des navigateurs ont déjà fait le nécessaire !</p> diff --git a/files/fr/web/html/microdonnées/index.html b/files/fr/web/html/microdonnées/index.html new file mode 100644 index 0000000000..66230edd72 --- /dev/null +++ b/files/fr/web/html/microdonnées/index.html @@ -0,0 +1,140 @@ +--- +title: Microdonnées +slug: Web/HTML/Microdonnées +tags: + - HTML + - Microdata + - Microdonnées +translation_of: Web/HTML/Microdata +--- +<div>{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}</div> + +<p>Les microdonnées (<em>microdata</em>) sont une partie de la spécification HTML du <a href="/fr/docs/Glossaire/WHATWG">WHATWG</a> qui est utilisée afin de fournir des métadonnées sur le contenu des pages web. Les moteurs de recherche, les robots (<em>crawlers</em>) d'analyse peuvent traiter les microdonnées d'une page web pour améliorer l'expérience de navigation. Les moteurs de recherches peuvent tirer parti des informations pour obtenir une meilleure pertinence. Les microdonnées sont structurées grâce à un vocabulaire permettant de décrire des objets qui sont des groupes de paires de noms/valeurs. Le but des microdonnées est de faciliter l'annotation des éléments HTML et d'être plus simple à utiliser que RDFa ou les microformats.</p> + +<p>Les microdonnées sont des groupes de paires nom-valeur. Ces groupes sont appelés des objets (<em>items</em>) et chaque paire nom-valeur est une propriété. Les objets et les propriétés s'inscrivent dans des éléments HTML classiques :</p> + +<ul> + <li>Pour créer un objet, on utilise l'attribut <strong><code>itemscope</code></strong></li> + <li>Pour ajouter une propriété, on utilise l'attribut <strong><code>itemprop</code></strong> sur l'un des descendants.</li> +</ul> + +<h2 id="Vocabulaires">Vocabulaires</h2> + +<p>Google et les autres moteurs de recherches participent au vocabulaire défini par <a href="https://schema.org/">schema.org</a> pour structurer les données. Ce vocabulaire définit un ensemble standard de types et de noms de propriétés. Par exemple <code><a href="https://schema.org/MusicEvent">MusicEvent</a></code> indique un événement musical dont les propriétés <code><a href="https://schema.org/startDate">startDate</a></code> et <code><a href="https://schema.org/location">location</a></code> utilisées pour définir les détails du concert. Dans ce cas, l'URL <code><a href="https://schema.org/MusicEvent">https://schema.org/MusicEvent</a></code> sera l'URL utilisée pour l'attribut <code>itemtype</code> et les propriétés <code>startDate</code> et <code>location</code> seront les propriétés utilisées, définies par <code><a href="https://schema.org/MusicEvent">https://schema.org/MusicEvent</a></code>.</p> + +<p>Les vocabulaires de microdonnées fournissent la sémantique (c'est-à-dire la signification) d'un élément. Les développeurs et auteurs web peuvent construire des vocabulaires spécifiques ou réutiliser ceux disponibles sur le Web comme <a href="https://schema.org">schema.org</a>.</p> + +<p>Plusieurs moteurs de recherche (Google, Bing et Yahoo!) s'appuient sur <a href="https://schema.org/">schema.org</a> pour améliorer les résultats de recherche.</p> + +<h2 id="Localisation">Localisation</h2> + +<p>Dans certains cas, les moteurs de recherche couvrent un public régional. Certaines extensions sont donc ajoutées aux microdonnées pour fournir du contenu spécifique. Ainsi, <a href="https://www.yandex.com/">Yandex</a> qui est un moteur de recherche très présent en Russie supporte des microformats comme <em>hCard</em>, <em>hRecipe</em>, <em>hReview</em> et <em>hProduct</em> et fournit son propre format pour dédfinir les termes et les articles encyclopédiques. Cette extension a été construite afin de résoudre les problème de translitération entre les alphabets cyrillique et latin.</p> + +<h2 id="Attributs_globaux_liés_aux_microdonnées">Attributs globaux liés aux microdonnées</h2> + +<p>Certains attributs globaux concernent directement les microdonnées :</p> + +<dl> + <dt><code><a href="/fr/docs/Web/HTML/Attributs_globaux/itemid">itemid</a></code></dt> + <dd>Cet attribut est l'identifiant unique d'un objet.</dd> + <dt><code><a href="/fr/docs/Web/HTML/Attributs_globaux/itemprop">itemprop</a></code></dt> + <dd>Cet attribut est utilisé afin d'ajouter des propriétés à un élément.</dd> + <dt><code><a href="/fr/docs/Web/HTML/Attributs_globaux/itemref">itemref</a></code></dt> + <dd>Cet attribut permet de faire référence à d'autres éléments HTML décrivant le même objet.</dd> + <dt><code><a href="/fr/docs/Web/HTML/Attributs_globaux/itemscope">itemscope</a></code></dt> + <dd>Cet attribut définit la portée du vocabulaire déclaré par <code>itemtype</code> et englobe généralement un objet.</dd> + <dt><code><a href="/fr/docs/Web/HTML/Attributs_globaux/itemtype">itemtype</a></code></dt> + <dd>Cet attribut définit le vocabulaire qui spécifie le modèle de données utilisé pour décrire les objets.</dd> +</dl> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div itemscope itemtype="https://schema.org/SoftwareApplication"> + <span itemprop="name">Angry Birds</span> - + + REQUIRES <span itemprop="operatingSystem">ANDROID</span><br> + <link itemprop="applicationCategory" href="https://schema.org/GameApplication"/> + + <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating"> + RATING: + <span itemprop="ratingValue">4.6</span> ( + <span itemprop="ratingCount">8864</span> ratings ) + </div> + + <div itemprop="offers" itemscope itemtype="https://schema.org/Offer"> + Price: $<span itemprop="price">1.00</span> + <meta itemprop="priceCurrency" content="USD" /> + </div> +</div></pre> + +<h3 id="Structure_de_donnée">Structure de donnée</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="4">itemscope</td> + <td>itemtype</td> + <td colspan="2" rowspan="1">SoftwareApplication (https://schema.org/SoftwareApplication)</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Angry Birds</td> + </tr> + <tr> + <td>itemprop</td> + <td>operatingSystem</td> + <td>ANDROID</td> + </tr> + <tr> + <td>itemprop</td> + <td>applicationCategory</td> + <td>GameApplication (https://schema.org/GameApplication)</td> + </tr> + <tr> + <td colspan="1" rowspan="3">itemscope</td> + <td>itemprop[itemtype]</td> + <td colspan="2" rowspan="1">aggregateRating [AggregateRating]</td> + </tr> + <tr> + <td>itemprop</td> + <td>ratingValue</td> + <td>4.6</td> + </tr> + <tr> + <td>itemprop</td> + <td>ratingCount</td> + <td>8864</td> + </tr> + <tr> + <td colspan="1" rowspan="3">itemscope</td> + <td>itemprop[itemtype]</td> + <td colspan="2" rowspan="1">offers [Offer]</td> + </tr> + <tr> + <td>itemprop</td> + <td>price</td> + <td>1.00</td> + </tr> + <tr> + <td>itemprop</td> + <td>priceCurrency</td> + <td>USD</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>Fonctionnalité ajoutée dans Firefox 16 et retirée dans Firefox 49.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les attributs universels</a></li> + <li> + <p><a href="/fr/docs/Web/API/Microdata_DOM_API">L'API Microdata</a></p> + </li> +</ul> diff --git a/files/fr/web/html/microformats/index.html b/files/fr/web/html/microformats/index.html new file mode 100644 index 0000000000..9144f6683b --- /dev/null +++ b/files/fr/web/html/microformats/index.html @@ -0,0 +1,446 @@ +--- +title: microformats +slug: Web/HTML/microformats +tags: + - HTML + - Microformat + - µFormat +translation_of: Web/HTML/microformats +--- +<div>{{HTMLSidebar}}</div> + +<p><a href="http://microformats.org/"><dfn>Les microformats</dfn></a> (parfois abrégés <strong>μF</strong>) sont un ensemble de conventions pour intégrer une sémantique en HTML et fournir une API utilisable par les moteurs de recherche, les agrégateurs et d'autres outils. Ces constructions HTML permettent de marquer des entités pouvant être génériques (personnes, organisations, évènements, etc.) ou spécifiques à un domaine.</p> + +<p>Les microformats sont utilisés par l'ensemble des principaux moteurs de recherche. Les données associées sont fournies via l'attribut {{HTMLAttrXRef("class")}} et peuvent donc être ajoutées à n'importe quel élément HTML.</p> + +<p>Les valeurs fournies sont censées être interprétables par des machines et lisibles par les humains.</p> + +<p>Il existe <a href="http://microformats.org/wiki/microformats2#Parsers">différentes bibliothèques d'analyse pour la plupart des langages de programmation</a> qui permettent d'analyser les données microformats2.</p> + +<h3 id="Le_fonctionnement_des_microformat">Le fonctionnement des microformat</h3> + +<p>Un auteur d'une page web peut ajouter des microformats via le contenu HTML. Ainsi, si un auteur veut s'identifier via un élément, il peut utiliser une classe <a href="http://microformats.org/wiki/h-card">h-card</a> :</p> + +<div dir="ltr" style="text-align: left;"> +<pre class="source-html4strict"><a class="h-card" href="http://example.com">Joe Bloggs</a></pre> + +<p>Lorsqu'un parseur de microformat détectera cette donnée, il saura que cette page contient une « carte » qui décrit une personne ou une organisation nommée <code>Joe Blogger</code> et donc l'URL est <code>http://example.com/</code>. Le parseur rend ensuite cette donnée accessible via des API qui pourront être utilisées par des applications.</p> +</div> + +<h2 id="Préfixes_et_microformats">Préfixes et microformats</h2> + +<p>Tous les microformats se composent d'une racine et d'un ensemble de propriétés. Les propriétés sont optionnelles et peuvent avoir plusieurs valeurs (si une application a besoin d'une seule valeur, elle pourra utiliser la première valeur d'une propriété). Les données hiérarchisées sont représentées avec des microformats imbriqués.</p> + +<p>Tous les noms de classe des microformats utilisent des préfixes. La syntaxe des préfixes <strong>est indépendante de celle des vocabulaires</strong> (développées séparément).</p> + +<ul> + <li><strong>"h-*" pour les racines</strong> (ex. "h-card", "h-entry", "h-feed"…). Ces racines indiquent un type ciblant un vocabulaire de propriétés donné. Ainsi : + + <ul> + <li><a href="http://microformats.org/wiki/h-card">h-card</a> décrit une personne ou une organisation</li> + <li><a href="http://microformats.org/wiki/h-entry">h-entry</a> décrit un contenu en ligne épisodique ou daté (tel qu'un billet de blog)</li> + <li><a href="http://microformats.org/wiki/h-feed">h-feed</a> décrit un flux (médias, billets, etc)</li> + <li>D'autres exemples sont décrits <a href="http://microformats.org/wiki/microformats2#v2_vocabularies">sur le wiki microformats2.</a></li> + </ul> + </li> + <li><strong>"p-*" pour les propriétés textuelles</strong> (ex. "p-name", "p-summary") + <ul> + <li>Un contenu texte. Pour certains éléments HTML, certains attributs spécifiques seront utilisés (ex. {{HTMLAttrxref("alt","img")}} pour {{HTMLElement("img")}}, {{HTMLAttrxref("title","abbr")}} pour {{HTMLElement("abbr")}}).</li> + </ul> + </li> + <li><strong>"u-*" pour les propriétés qui sont des URL</strong> (ex. "u-url", "u-photo", "u-logo") + <ul> + <li>Une analyse spécifique est nécessaire et ce sont les attributs plutôt que le contenu de l'élément qui seront utilisés (ex. {{HTMLAttrxref("src","img")}} pour {{HTMLElement("img")}}, {{HTMLAttrxref("href","a")}} pour {{HTMLElement("a")}}, {{HTMLAttrxref("object","data")}} pour {{HTMLElement("data")}}, etc.).</li> + </ul> + </li> + <li><strong>"dt-*" pour les propriétés temporelles (date/heure)</strong> (ex. "dt-start", "dt-end", "dt-bday") + <ul> + <li>Une analyse spécifique est nécessaire.</li> + </ul> + </li> + <li><strong>"e-*" pour les arborescences</strong> où l'intégralité de la hiérarchie de l'élément est la valeur à récupérer (ex. "e-content"). Le préfixe "e-" peut être retenu en anglais comme "<em><strong>e</strong>lement tree</em>", "<em><strong>e</strong>mbedded markup</em>" ou "<em><strong>e</strong>ncapsulated markup</em>".</li> +</ul> + +<h2 id="Exemples_de_microformats">Exemples de microformats</h2> + +<h3 id="h-card">h-card</h3> + +<p>Le microformat <a href="http://microformats.org/wiki/h-card">h-card</a> représente une personne ou une organisation.</p> + +<p>La valeur de chaque propriété est définie en HTML via l'attribut <code>class</code>.</p> + +<div dir="ltr" style="text-align: left;"> +<pre class="brush: html"><p class="h-card"> + <img class="u-photo" src="http://example.org/photo.png" alt="" /> + <a class="p-name u-url" href="http://example.org">Joe Bloggs</a> + <a class="u-email" href="mailto:joebloggs@example.com">joebloggs@example.com</a>, + <span class="p-street-address">17 Austerstræti</span> + <span class="p-locality">Reykjavík</span> + <span class="p-country-name">Iceland</span> +</p></pre> +</div> + +<table class="standard-table"> + <tbody> + <tr> + <th>Propriété</th> + <th>Description</th> + </tr> + <tr> + <td><strong><code>p-name</code></strong></td> + <td>Le nom complet et formaté de la personne ou de l'organisation.</td> + </tr> + <tr> + <td><strong><code>u-email</code></strong></td> + <td>L'adresse électronique.</td> + </tr> + <tr> + <td><strong><code>u-photo</code></strong></td> + <td>Une photo pour la personne ou l'organisation.</td> + </tr> + <tr> + <td><strong><code>u-url</code></strong></td> + <td>La page d'accueil ou une URL représentant la personne ou l'organisation.</td> + </tr> + <tr> + <td><strong><code>u-uid</code></strong></td> + <td>Un identifiant universel unique (de préférence une URL canonique).</td> + </tr> + <tr> + <td><strong><code>p-street-address</code></strong></td> + <td>L'adresse composée du numéro et du nom de la rue.</td> + </tr> + <tr> + <td><strong><code>p-locality</code></strong></td> + <td>La ville ou le village de résidence.</td> + </tr> + <tr> + <td><strong><code>p-country-name</code></strong></td> + <td>Le nom du pays de résidence.</td> + </tr> + </tbody> +</table> + +<h4 id="Exemple_imbriqué">Exemple imbriqué</h4> + +<div dir="ltr" style="text-align: left;"> +<pre class="brush: html"><div class="h-card"> + <a class="p-name u-url" + href="http://blog.lizardwrangler.com/" + >Mitchell Baker</a> + (<a class="p-org h-card" + href="http://mozilla.org/" + >Mozilla Foundation</a>) +</div></pre> +</div> + +<p>Cela fournira le JSON suivant :</p> + +<div dir="ltr" style="text-align: left;"> +<pre class="brush: json">{ + "items": [{ + "type": ["h-card"], + "properties": { + "name": ["Mitchell Baker"], + "url": ["http://blog.lizardwrangler.com/"], + "org": [{ + "value": "Mozilla Foundation", + "type": ["h-card"], + "properties": { + "name": ["Mozilla Foundation"], + "url": ["http://mozilla.org/"] + } + }] + } + }] +}</pre> +</div> + +<div class="blockIndicator note"> +<p><strong>Note :</strong> Le h-card imbriqué récupère des valeurs implicites pour <code>name</code> et <code>url</code>.</p> +</div> + +<h3 id="h-entry">h-entry</h3> + +<p>Le microformat <a href="http://microformats.org/wiki/h-entry">h-entry</a> représente un contenu épisodique ou daté présent sur le Web. Il est généralement utilisé pour du contenu qui est présenté dans un flux (ex. les billets de blog).</p> + +<div dir="ltr" style="text-align: left;"> +<pre class="brush: html"><article class="h-entry"> + <h1 class="p-name">Microformats are amazing</h1> + <p>Published by <a class="p-author h-card" href="http://example.com">W. Developer</a> + on <time class="dt-published" datetime="2013-06-13 12:00:00">13<sup>th</sup> June 2013</time></p> + + <p class="p-summary">In which I extoll the virtues of using microformats.</p> + + <div class="e-content"> + <p>Blah blah blah</p> + </div> +</article></pre> + +<h4 id="Propriétés">Propriétés</h4> +</div> + +<table class="standard-table"> + <tbody> + <tr> + <th>Propriété</th> + <th>Description</th> + </tr> + <tr> + <td><strong><code>p-name</code></strong></td> + <td>Nom ou titre pour l'entrée.</td> + </tr> + <tr> + <td><strong><code>p-author</code></strong></td> + <td>L'auteur de l'entrée (éventuellement imbriquée avec une h-card).</td> + </tr> + <tr> + <td><strong><code>dt-published</code></strong></td> + <td>La date de publication de l'entrée.</td> + </tr> + <tr> + <td><strong><code>p-summary</code></strong></td> + <td>Un résumé de l'entrée.</td> + </tr> + <tr> + <td><strong><code>e-content</code></strong></td> + <td>Le contenu complet de l'entrée.</td> + </tr> + </tbody> +</table> + +<h4 id="Exemple_de_microformat_h-entry_analysé">Exemple de microformat h-entry analysé</h4> + +<pre class="brush: html" id="line1"><div class="h-entry"> + <p><span class="p-author h-card"> + <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ><img class="u-photo" src="https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg"/></a> + <a class="p-name u-url" href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">Greg McVerry</a></span> + Replied to <a class="u-in-reply-to" href="https://developer.mozilla.org/en-US/docs/Web/HTML/microformats">a post on + <strong>developer.mozilla.org</strong> </a>: + </p> + <p class="p-name e-content">Hey thanks for making this microformats resource</p> + <p> <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">Greg McVerry</a> + published this <a class="u-url url" href="https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource"><time class="dt-published" + datetime="2019-05-31T14:19:09+0000">31 May 2019</time></a></p> +</div></pre> + +<div class="panelContent"> +<pre class="brush: json">{ + "items": [ + { + "type": [ "h-entry" ], + "properties": { + "in-reply-to": [ "https://developer.mozilla.org/en-US/docs/Web/HTML/microformats" ], + "name": [ "Hey thanks for making this microformats resource" ], + "url": [ "https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource" ], + "published": [ "2019-05-31T14:19:09+0000" ], + "content": [ + { + "html": "Hey thanks for making this microformats resource", + "value": "Hey thanks for making this microformats resource", + "lang": "en" + } + ], + "author": [ + { + "type": [ "h-card" ], + "properties": { + "name": [ "Greg McVerry" ], + "photo": [ "https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg" ], + "url": [ "https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ] + }, + "lang": "en", + "value": "Greg McVerry" + } + ] + }, + "lang": "en" + }</pre> +</div> + +<h3 id="h-feed">h-feed</h3> + +<p>Le microformat <a href="http://microformats.org/wiki/h-feed">h-feed</a> est un flux de billets <a href="http://microformats.org/wiki/h-entry" title="h-entry">h-entry</a>.</p> + +<h4 id="Example_h-feed">Example h-feed</h4> + +<div dir="ltr" style="text-align: left;"> +<pre class="brush: html"><div class="h-feed"> + <h1 class="p-name">Microformats Blogs</h1> + <article class="h-entry"> + <h2 class="p-name">Microformats are amazing</h2> + <p>Published by <a class="p-author h-card" href="http://example.com">W. Developer</a> + on <time class="dt-published" datetime="2013-06-13 12:00:00">13<sup>th</sup> June 2013</time> + </p> + <p class="p-summary">In which I extoll the virtues of using microformats.</p> + <div class="e-content"> <p>Blah blah blah</p> </div> + </article> +</div></pre> +</div> + +<h4 id="Propriétés_2">Propriétés</h4> + +<table class="standard-table"> + <tbody> + <tr> + <th>Propriété</th> + <th>Description</th> + </tr> + <tr> + <td><strong><code>p-name</code></strong></td> + <td>Nom du flux.</td> + </tr> + <tr> + <td><strong><code>p-author</code></strong></td> + <td>Auteur du flux, éventuellement intégré via une h-card.</td> + </tr> + </tbody> +</table> + +<h4 id="Éléments_fils">Éléments fils</h4> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>h-entry</strong></td> + </tr> + <tr> + <td>Des objets représentants des éléments du flux.</td> + </tr> + </tbody> +</table> + +<h3 id="h-event">h-event</h3> + +<p>Le microformat <code>h-event</code> permet de représenter des évènements.</p> + +<div dir="ltr" style="text-align: left;"> +<pre class="brush: html"><div class="h-event"> + <h1 class="p-name">Microformats Meetup</h1> + <p>From + <time class="dt-start" datetime="2013-06-30 12:00">30<sup>th</sup> June 2013, 12:00</time> + to <time class="dt-end" datetime="2013-06-30 18:00">18:00</time> + at <span class="p-location">Some bar in SF</span></p> + <p class="p-summary">Get together and discuss all things microformats-related.</p> +</div></pre> +</div> + +<h4 id="Propriétés_3">Propriétés</h4> + +<table class="standard-table"> + <tbody> + <tr> + <th>Propriété</th> + <th>Description</th> + </tr> + <tr> + <td><strong><code>p-name</code></strong></td> + <td>Nom ou titre pour l'évènement.</td> + </tr> + <tr> + <td><strong><code>p-summary</code></strong></td> + <td>Résumé de l'évènement.</td> + </tr> + <tr> + <td><strong><code>dt-start</code></strong></td> + <td>Date/heure de début de l'évènement</td> + </tr> + <tr> + <td><strong><code>dt-end</code></strong></td> + <td>Date/heure de fin de l'évènement</td> + </tr> + <tr> + <td><strong><code>p-location</code></strong></td> + <td>Emplacement / lieu de l'évènement, éventuellement indiqué par une h-card.</td> + </tr> + </tbody> +</table> + +<h4 id="Exemple_d'analyse">Exemple d'analyse</h4> + +<div dir="ltr" style="text-align: left;"> +<pre class="brush: html"><div class="h-event"> + <h2 class="p-name">IndieWeb Summit</h2> + <time class="dt-start" datetime="2019-06-29T09:00:00-07:00">June 29, 2019 at 9:00am (-0700)</time><br>through <time class="dt-end" datetime="2019-06-30T18:00:00-07:00">June 30, 2019 at 6:00pm (-0700)</time><br> + <div class="p-location h-card"> + <div> + <span class="p-name">Mozilla</span> + </div> + <div> + <span class="p-street-address">1120 NW Couch St</span>, + <span class="p-locality">Portland</span>, + <span class="p-region">Oregon</span>, + <span class="p-country">US</span> + </div> + <data class="p-latitude" value="45.52345"></data> + <data class="p-longitude" value="-122.682677"></data> + </div> + <div class="e-content">Come join us + </div> + <div> + <span class="p-author h-card"><a class="u-url p-name" href="https://aaronparecki.com">Aaron Parecki</a></span> Published this <a href="https://aaronparecki.com/2019/06/29/1/" class="u-url">event </a>on <time class="dt published" datetime="2019-05-25T18:00:00-07:00">May 5th, 2019</time> + </div> +</div></pre> + + + +<div class="panelContent"> +<pre class="brush: json">{ + "items": [ + { + "type": [ "h-event" ], + "properties": { + "name": [ "IndieWeb Summit" ], + "url": [ "https://aaronparecki.com/2019/06/29/1/" ], + "author": [ + { + "type": [ "h-card" ], + "properties": { + "name": [ "Aaron Parecki" ], + "url": [ "https://aaronparecki.com"] + }, + "lang": "en", + "value": "Aaron Parecki" + } + ], + "start": [ "2019-06-29T09:00:00-07:00" ], + "end": [ "2019-06-30T18:00:00-07:00" ], + "published": [ "2019-05-25T18:00:00-07:00" ], + "content": [ + { + "html": "Come join us", + "value": "Come join us", + "lang": "en" + } + ], + "location": [ + { + "type": [ "h-card" ], + "properties": { + "name": [ "Mozilla" ], + p-street-address: [ "1120 NW Couch St" ] + "locality": [ "Portland" ], + "region": [ "Oregon" ], + "country": [ "US" ], + "latitude": [ "45.52345" ], + "longitude": [ "-122.682677" ] + }, + "lang": "en", + "value": "Mozilla" + } + ] + }, + "lang": "en" + } + ],</pre> +</div> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{Interwiki("wikipedia", "Microformat")}} on Wikipedia</li> + <li><a href="http://microformats.org/">Le site officiel des microformats</a></li> + <li><a href="http://microformats.org/wiki/search_engines">Prise en charge des différents moteurs de recherche</a> sur le site microformats</li> + <li><a href="https://indiewebcamp.com/microformats">Les microformats sur IndieWebCamp</a></li> +</ul> diff --git a/files/fr/web/html/optimizing_your_pages_for_speculative_parsing/index.html b/files/fr/web/html/optimizing_your_pages_for_speculative_parsing/index.html new file mode 100644 index 0000000000..15342d7577 --- /dev/null +++ b/files/fr/web/html/optimizing_your_pages_for_speculative_parsing/index.html @@ -0,0 +1,36 @@ +--- +title: Optimisation des pages pour l'analyse spéculative +slug: Web/HTML/Optimizing_your_pages_for_speculative_parsing +tags: + - Avancé + - Cookies + - Développement Web + - HTML + - HTML5 + - NeedsUpdate +translation_of: Glossary/speculative_parsing +--- +<p><span id="result_box" lang="fr"><span>Traditionnellement dans les navigateurs, l'analyseur HTML a été exécuté sur le fil principal et a été bloqué après une balise <code></script></code> jusqu'à ce que le script ait été extrait du réseau et exécuté.</span> <span>L'analyseur HTML dans Firefox 4 et versions ultérieures prend en charge l'analyse spéculative sur le fil principal.</span> <span>Il analyse "en avant" pendant que les scripts sont téléchargés et exécutés.</span> <span>Comme dans Firefox 3.5 et 3.6, l'analyseur HTML lance des chargements spéculatifs pour les scripts, les feuilles de style et les images qu'il trouve à l'avance dans le flux.</span> <span>Toutefois, dans Firefox 4 et versions ultérieures, l'analyseur HTML exécute également l'algorithme de construction de l'arborescence HTML de manière spéculative.</span> <span>L'avantage est que lorsqu'une spéculation réussit, il n'est pas nécessaire d'analyser la partie du fichier entrant qui a déjà été analysée pour les scripts, les feuilles de style et les images.</span> <span>L'inconvénient est qu'il y a plus de travail perdu quand la spéculation échoue.</span><br> + <br> + <span>Ce document vous aide à éviter le genre de choses qui font échouer la spéculation et ralentir le chargement de votre page.</span></span></p> + +<h2 id="Réussir_les_chargements_spéculatifs">Réussir les chargements spéculatifs</h2> + +<p><span id="result_box" lang="fr"><span>Il n'y a qu'une seule règle pour réussir les chargements spéculatifs de scripts liés, de feuilles de style et d'images :</span></span></p> + +<ul> + <li>Si vous utilisez un élément <code><base></code> p<span id="result_box" lang="fr"><span>our remplacer l'URI de base de votre page, placez l'élément dans la partie non-scriptée du document.</span></span> Ne l'ajoutez pas par <code>document.write()</code> ou <code>document.createElement()</code>.</li> +</ul> + +<h2 id="Éviter_de_perdre_la_sortie_du_constructeur_d'arborescence">Éviter de perdre la sortie du constructeur d'arborescence</h2> + +<p>L'analyse spéculative du constructeur d'arborescence échoue quand <code>document.write()</code> change l'état du constructeur d'arborescence, au point que l'état spéculatif après la balise <code></script></code> <span class="short_text" id="result_box" lang="fr"><span>ne tient plus lorsque tout le contenu inséré par</span></span> <code>document.write()</code> a été analysé. <span id="result_box" lang="fr"><span>Cependant, seules les utilisations inhabituelles de</span></span> <code>document.write()</code> entraînent ce genre de problèmes. Ici, les choses à éviter :</p> + +<ul> + <li><span class="short_text" id="result_box" lang="fr"><span>n'écrivez pas d'arborescences déséquilibrées.</span></span> <code><script>document.write("<div>");</script></code> est mauvais. <code><script>document.write("<div></div>");</script></code> est valide.</li> + <li>n'écrivez pas de balisage infini. <code><script>document.write("<div></div");</script></code> est mauvais.</li> + <li><span id="result_box" lang="fr"><span>ne terminez pas votre écriture avec un retour chariot</span></span> . <code><script>document.write("Hello World!\r");</script></code> est mauvais. <code><script>document.write("Hello World!\n");</script></code> est valide.</li> + <li><span id="result_box" lang="fr"><span>notez que l'écriture de balises équilibrées peut entraîner la déduction d'autres balises de telle manière que l'écriture est finalement déséquilibrée</span></span>. Par exemple, <code><script>document.write("<div></div>");</script></code> <span id="result_box" lang="fr"><span>à l'intérieur de l'élément d'en-tête sera interprété comme</span></span> <code><script>document.write("</head><body><div></div>");</script></code> qui est déséquilibré.</li> + <li><span class="short_text" id="result_box" lang="fr"><span>ne pas formater une partie de tableau</span></span>. <code><table><script>document.write("<tr><td>Hello World!</td></tr>");</script></table></code> est mauvais. Par contre, <code><script>document.write("</code><code><table></code><code><tr><td>Hello World!</td></tr></code><code></table></code><code>");</script></code> est valide.</li> + <li><span id="result_box" lang="fr"><span>À FAIRE : document.write inclus dans d'autres éléments de formatage.</span></span></li> +</ul> diff --git a/files/fr/web/html/précharger_du_contenu/index.html b/files/fr/web/html/précharger_du_contenu/index.html new file mode 100644 index 0000000000..2519577b6c --- /dev/null +++ b/files/fr/web/html/précharger_du_contenu/index.html @@ -0,0 +1,237 @@ +--- +title: Précharger du contenu avec rel="preload" +slug: Web/HTML/Précharger_du_contenu +tags: + - Guide + - HTML + - JavaScript + - Performance + - preload +translation_of: Web/HTML/Preloading_content +--- +<div>{{QuickLinksWithSubpages("/fr/docs/Web/HTML")}}</div> + +<p class="summary">La valeur <code>preload</code> de l'attribut {{htmlattrxref("rel", "link")}} pour l'élément {{htmlelement("link")}} permet d'écrire des requêtes déclaratives de récupération au sein de l'élément {{htmlelement("head")}}. On peut ainsi indiquer les ressources dont la page aura besoin peu après son chargement. Cela permet de les précharger au début du chargement de la page, avant que le rendu intervienne. On s'assure donc que les ressources nécessaires soient disponibles plus tôt, évitant ainsi de bloquer le rendu initial de la page et améliorant les performances. Dans cet article, on voit comment utiliser <code>preload</code>.</p> + +<h2 id="Les_bases">Les bases</h2> + +<p>On utilise généralement l'élément <code><link></code> de façon assez simple afin de charger une feuille de style CSS pour la page :</p> + +<pre class="brush: html"><link rel="stylesheet" href="styles/main.css"></pre> + +<p>Dans le cas qui va nous intéresser, on utilisera l'attribut <code>rel</code> avec la valeur <code>preload</code>. Cela va permettre d'utiliser l'élément <code><link></code> pour précharger à peu près n'importe quelle ressource dont on aurait besoin. Dans la version la plus simple, il suffit d'indiquer le chemin de la ressource à précharger via l'attribut {{htmlattrxref("href", "link")}} et le type de la ressource via l'attribut {{htmlattrxref("as", "link")}}.</p> + +<p>Voici un exemple d'application simple (vous pouvez consulter <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/js-and-css">le code source de cet exemple JS et CSS</a> et visualiser <a href="https://mdn.github.io/html-examples/link-rel-preload/js-and-css/">la démo <em>live</em></a>) :</p> + +<pre class="brush: html"><head> + <meta charset="utf-8"> + <title>Exemple de preload avec JS et CSS</title> + + <link rel="preload" href="style.css" as="style"> + <link rel="preload" href="main.js" as="script"> + + <link rel="stylesheet" href="style.css"> +</head> + +<body> + <h1>Balles rebondissantes</h1> + <canvas></canvas> + + <script src="main.js"></script> +</body></pre> + +<p>Dans cet exemple, on précharge les fichiers CSS et JavaScript afin qu'ils soient disponibles dès qu'ils sont nécessaires pour le rendu de la page. Cet exemple est un peu trivial, mais on peut voir que, plus les ressources sont identifiées <em>tard</em>, plus elles sont grandes. Par exemple, une feuille de style pourra à son tour pointer vers d'autres ressources comme des polices ou des images. On pourrait aussi avoir de grandes images ou des vidéos à afficher plus bas dans la page.</p> + +<p><code>preload</code> possède d'autres avantages. On pourra utiliser l'attribut <code>as</code> afin d'indiquer le type de contenu à précharger afin que le navigateur puisse :</p> + +<ul> + <li>Prioriser le chargement des ressources plus précisément.</li> + <li>Identifier les requêtes utilisées ensuite afin de réutiliser la même ressource si c'est possible.</li> + <li>Appliquer la bonne <a href="/fr/docs/HTTP/CSP">politique de sécurité du contenu</a> pour la ressource en question</li> + <li>Utiliser le bon {{HTTPHeader("Accept")}} pour les requêtes associées.</li> +</ul> + +<h3 id="Quels_sont_les_types_de_contenu_qu'on_peut_précharger">Quels sont les types de contenu qu'on peut précharger ?</h3> + +<p>Il est possible de précharger de nombreux types de contenu, voici les valeurs principales qu'on peut utiliser avec l'attribut <code>as</code> :</p> + +<ul> + <li><code>audio</code> : un fichier audio.</li> + <li><code>document</code> : un document HTML destiné à être intégré dans un élément {{htmlelement("frame")}} ou dans un élément {{htmlelement("iframe")}}.</li> + <li><code>embed</code> : une ressource destinée à être intégrée dans un élément {{htmlelement("embed")}}.</li> + <li><code>fetch</code> : une ressource à laquelle on accèdera via une requête <code>fetch</code> ou via une requête XHR (par exemple un <code>ArrayBuffer</code> ou un fichier JSON).</li> + <li><code>font</code> : un fichier de police de caractère.</li> + <li><code>image</code> : un fichier contenant une image .</li> + <li><code>object</code> : une ressource à intégrer dans un élément {{htmlelement("embed")}}.</li> + <li><code>script</code> : un fichier JavaScript.</li> + <li><code>style</code> : une feuille de style.</li> + <li><code>track</code> : un fichier WebVTT.</li> + <li><code>worker</code> : un <em>web worker</em> ou un <em>worker</em> partagé JavaScript.</li> + <li><code>video</code> : un fichier vidéo.</li> +</ul> + +<div class="note"> +<p><strong>Note </strong>: Pour avoir plus de détails quant à ces valeurs et aux fonctionnalités web associées, vous pouvez consulter la spécification Preload et notamment <a href="https://w3c.github.io/preload/#link-element-extensions">les extensions à l'élément <code><link></code></a>. On notera également que la liste complète des valeurs acceptables pour l'attribut <code>as</code> est définie dans la spécification Fetch (cf. <a href="https://fetch.spec.whatwg.org/#concept-request-destination">les destinations de requête</a>).</p> +</div> + +<h2 id="Ajouter_un_type_MIME">Ajouter un type MIME</h2> + +<p>Les éléments <code><link></code> permettent d'utiliser un attribut {{htmlattrxref("type", "link")}} qui contient <a href="https://fr.wikipedia.org/wiki/Type_MIME">le type MIME</a> de la ressource vers laquelle pointe l'élément. Cet attribut est particulièrement utile pour le préchargement : le navigateur pourra analyser l'attribut <code>type</code> afin de déterminer s'il prend en charge ce type de ressource. Le téléchargement ne démarrera que si c'est le cas, sinon, l'élément sera ignoré.</p> + +<p>Vous pouvez voir un exemple de ce fonctionnement avec une vidéo (<a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/video">voir le code source complet</a> et <a href="https://mdn.github.io/html-examples/link-rel-preload/video/">la version live</a>) :</p> + +<pre class="brush: html"><head> + <meta charset="utf-8"> + <title>Exemple de préchargement d'une vidéo</title> + + <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4"> +</head> +<body> + <video controls> + <source src="sintel-short.mp4" type="video/mp4"> + <source src="sintel-short.webm" type="video/webm"> + <p>Votre navigateur ne prend pas en charge les vidéos HTML5. + Voici <a href="sintel-short.mp4">un lien pour télécharger la vidéo</a>.</p> + </video> +</body></pre> + +<p>Dans cet exemple, les navigateurs qui prennent en charge le format MP4 préchargeront le fichier en question et l'utiliseront. En revanche, les navigateurs qui ne supportent que WebM pourront bien utiliser le second fichier mais celui-ci ne sera préchargé. Cet exemple illustre comment ajouter le préchargement dans une stratégie d'amélioration progressive.</p> + +<h2 id="Récupérer_des_ressources_de_différentes_origines">Récupérer des ressources de différentes origines</h2> + +<p>Si le paramétrage <a href="/fr/docs/HTTP/Access_control_CORS">CORS</a> de votre site fonctionne correctement, vous pouvez également précharger des ressources provenant d'origines multiples tant que l'attribut {{htmlattrxref("crossorigin","link")}} est utilisé dans l'élément <code><link></code>.</p> + +<p>Les fichiers pour les polices de caractères constituent un cas intéressant. En effet, pour différentes raisons, elles doivent être récupérées via un mode CORS anonyme (cf. <a href="https://drafts.csswg.org/css-fonts/#font-fetching-requirements">les spécifications pour la récupération des polices</a> si vous êtes intéressé par les détails).</p> + +<p>Utilisons ce cas de figure comme exemple. Tout d'abord parce que le chargement des polices est un scénario fréquent et ensuite parce que c'est plus simple que de mettre en place un exemple avec des requêtes vers plusieurs origines. Vous pouvez consulter <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts">le code source complet de l'exemple sur GitHub</a> (<a href="https://mdn.github.io/html-examples/link-rel-preload/fonts/">et voir le résultat <em>live</em> ici</a>) :</p> + +<pre class="brush: html"><head> + <meta charset="utf-8"> + <title>Exemple de préchargement pour les polices</title> + + <link rel="preload" href="fonts/cicle_fina-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous"> + <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> + <link rel="preload" href="fonts/cicle_fina-webfont.woff" as="font" type="font/woff" crossorigin="anonymous"> + <link rel="preload" href="fonts/cicle_fina-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous"> + <link rel="preload" href="fonts/cicle_fina-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous"> + + <link rel="preload" href="fonts/zantroke-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous"> + <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> + <link rel="preload" href="fonts/zantroke-webfont.woff" as="font" type="font/woff" crossorigin="anonymous"> + <link rel="preload" href="fonts/zantroke-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous"> + <link rel="preload" href="fonts/zantroke-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous"> + + <link href="style.css" rel="stylesheet" type="text/css"> +</head> +<body> + ... +</body></pre> + +<p>Vous pouvez ici voir qu'on fournit l'indication sur le type de ressource via l'attribut <code>as</code>, le type MIME grâce à l'attribut <code>type</code> mais aussi et surtout l'attribut <code>crossorigin</code> qui permet de gérer le CORS.</p> + +<p>Il y a donc moins de risque que la police soit disponible après le premier rendu de la page, on évite ainsi les problèmes de scintillement de police (ou <em>FOUT</em> pour <em>Flash Of Unstyled Text</em>).</p> + +<h2 id="Gérer_les_différents_médias">Gérer les différents médias</h2> + +<p>Une qualité des éléments <code><link></code> est qu'ils gèrent l'attribut {{htmlattrxref("media", "link")}}. Ce dernier peut être utilisé afin de conditionner le chargement de la ressource <a href="/fr/docs/Web/CSS/@media">selon le type de média</a> voire <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">selon des requêtes de média (<em>media queries</em>)</a>. En bref, il est possible de faire du chargement de ressources qui soit <em>responsive</em> !</p> + +<p>Prenons un exemple simple (<a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/media">le code source est disponible sur GitHub</a>, <a href="https://mdn.github.io/html-examples/link-rel-preload/media/">avec une démonstration <em>live</em></a>) :</p> + +<pre class="brush: html"><head> + <meta charset="utf-8"> + <title>Exemple de préchargement responsive</title> + + <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)"> + <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)"> + + <link rel="stylesheet" href="main.css"> +</head> +<body> + <header> + <h1>Mon site</h1> + </header> + + <script> + var mediaQueryList = window.matchMedia("(max-width: 600px)"); + var header = document.querySelector('header'); + + if(mediaQueryList.matches) { + header.style.backgroundImage = 'url(bg-image-narrow.png)'; + } else { + header.style.backgroundImage = 'url(bg-image-wide.png)'; + } + </script> +</body></pre> + +<p>Vous pouvez ici voir qu'on a ajouté les attributs <code>media</code> sur les éléments <code><link></code> afin de charger une image étroite si l'utilisateur utilise un écran étroit ou une image plus large si l'écran de l'appareil est plus large. Il est toutefois nécessaire d'afficher la bonne image en en-tête selon le résultat de la requête média et on utilise donc {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} (lire <a href="/fr/docs/Web/CSS/Requêtes_média/Tester_les_media_queries">Tester les requêtes média</a> pour plus d'informations sur ce point).</p> + +<p>Ce concept n'est pas limité aux images voire aux fichiers du même type ! Laissez libre cours à votre imagination ! On peut imaginer charger un diagramme SVG relativement simple si l'utilisateur est sur un écran étroit (où la bande passante et le processeur sont souvent plus limités) ou précharger un code JavaScript complexe, utilisé pour afficher un modèle 3D complexe lorsque l'appareil de l'utilisateur possède plus de ressources.</p> + +<h2 id="Utiliser_des_scripts_et_des_préchargements_différés">Utiliser des scripts et des préchargements différés</h2> + +<p>Un autre avantage de ce mécanisme est qu'on peut choisir d'exécuter des préchargements par script si besoin. Dans le fragment de code suivant, on crée une instance de {{domxref("HTMLLinkElement")}} qu'on attache au DOM :</p> + +<pre class="brush: js">var preloadLink = document.createElement("link"); +preloadLink.href = "myscript.js"; +preloadLink.rel = "preload"; +preloadLink.as = "script"; +document.head.appendChild(preloadLink); +</pre> + +<p>Cela signifie que le navigateur préchargera le fichier JavaScript sans pour autant l'utiliser immédiatement.</p> + +<p>Pour utiliser le script en question, quand on en a besoin, on pourrait écrire :</p> + +<pre class="brush: js">var preloadedScript = document.createElement("script"); +preloadedScript.src = "myscript.js"; +document.body.appendChild(preloadedScript); +</pre> + +<p>Cela permet de précharger un script et de différer son exécution jusqu'au moment où on en a besoin.</p> + +<h2 id="Les_autres_mécanismes_de_préchargement">Les autres mécanismes de préchargement</h2> + +<p>Il existe d'autres fonctionnalités qui permettent de précharger des ressources mais aucune n'est aussi flexible que <code><link rel="preload"></code> :</p> + +<ul> + <li><code><link rel="prefetch"></code> est pris en charge par les navigateurs depuis longtemps mais sert pour précharger des ressources qui seront utilisées sur la prochaine page vers laquelle on navigue. Autrement dit, c'est utile mais pas pour la page courante ! De plus, les navigateurs choisiront une priorité moins élevée pour les ressources <code>prefetch</code> que pour celles utilisant <code>preload</code> (la page actuelle est considérée comme plus importante que la suivante). Pour plus de détails, lire <a href="/fr/docs/FAQ_sur_le_préchargement_des_liens">la FAQ sur le préchargement des liens</a>.</li> + <li><code><link rel="prerender"></code> est utilisé afin d'afficher la page indiquée en arrière-plan, accélérant le chargement de la page si l'utilisateur navigue vers cette page. Pouvant entraîner une consommation de bande passante plus importante, Chrome considère <code>prerender</code> comme <a href="https://developers.google.com/web/updates/2018/07/nostate-prefetch">un préchargement NoState</a>.</li> + <li><code><link rel="subresource"></code>{{non-standard_inline}} était pris en charge par Chrome par le passé et devait permettre de précharger les ressources pour le chargement et la navigation dans la page mais il n'existait de moyen de priorisation (l'attribut <code>as</code> n'existait pas) et l'ensemble des ressources recevait donc une priorité assez basse.</li> + <li>De nombreux utilitaires de chargement scriptés existent par ailleurs mais ils ne disposent pas du contexte de priorisation disponible dans le navigateur et, en tant que ressources, peuvent participer à ces problèmes de performances de chargement.</li> +</ul> + +<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('Preload','#x2.link-type-preload','preload')}}</td> + <td>{{Spec2('Preload')}}</td> + <td>Détails complémentaires sur <code>preload</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'link-type-preload', 'rel=preload')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Définition simple de <code>preload</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.link.rel.preload")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/">Le préchargement : à quoi ça sert ? (en anglais)</a> par Yoav Weiss</li> +</ul> diff --git a/files/fr/web/html/quirks_mode_and_standards_mode/index.html b/files/fr/web/html/quirks_mode_and_standards_mode/index.html new file mode 100644 index 0000000000..e6859b0e04 --- /dev/null +++ b/files/fr/web/html/quirks_mode_and_standards_mode/index.html @@ -0,0 +1,53 @@ +--- +title: Mode quirks de Mozilla +slug: Web/HTML/Quirks_Mode_and_Standards_Mode +tags: + - Guide + - HTML + - Web + - XHTML +translation_of: Web/HTML/Quirks_Mode_and_Standards_Mode +--- +<p>Par le passé, les pages web étaient souvent écrites sous deux versions : une destinée à Netscape Navigator et l'autre à Microsoft Internet Explorer. Lorsque les standards du Web sont apparus avec le W3C, les navigateurs ne pouvaient pas simplement commencer à les utiliser car leur mise en place rendrait inutilisable la plupart des sites web existant. Les navigateurs ont alors introduit deux modes afin de traiter les sites respectants les standards des autres sites historiques.</p> + +<p>Il existe aujourd'hui trois modes utilisés par les moteurs de rendu des navigateurs web : le mode <em>quirks</em>, le mode quasi-standard et le mode standard total. En <strong>mode <em>quirks</em></strong>, le moteur de disposition émule le comportement non-standard de Navigator 4 et d'Internet Explorer 5. Ce mode permet de prendre en charge les sites web rédigés avant l'adoption généralisées des standards web. En <strong>mode standard total</strong>, le comportement du navigateur est entièrement (aux bugs près) celui décrit par les spécifications HTML et CSS. En <strong>mode quasi-standard</strong>, très peu de déviations sont implémentées.</p> + +<h2 id="How_does_Mozilla_determine_which_mode_to_use.3F" name="How_does_Mozilla_determine_which_mode_to_use.3F">Comment les navigateurs déterminent le mode à utiliser ?</h2> + +<h3 id="HTML">HTML</h3> + +<p>Pour les documents <a href="/fr/docs/Web/HTML" title="/en-US/docs/HTML">HTML</a>, les navigateurs utilisent le <em>DOCTYPE</em> présent au début du document afin de déterminer si celui-ci doit être géré avec le mode <em>quirks</em> ou avec l'un des modes standards. Si vous souhaitez qu'une page utilise le mode standard total, son DOCTYPE devra correspondre à celui utilisé dans cet exemple :</p> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="fr"> + <head> + <meta charset=UTF-8> + <title>Bonjour tout le monde !</title> + </head> + <body> + </body> +</html></pre> + +<p>Le DOCTYPE illustré dans cet exemple, <code><!DOCTYPE html></code>, est le plus simple possible et correspond à la recommandation HTML5. Les versions précédentes des standards HTML recommandaient d'autres variantes. Toutefois, l'ensemble des navigateurs actuels utiliseront le mode standard total avec ce DOCTYPE (y compris IE6). Il n'est pas justifié de choisir un DOCTYPE plus compliqué ; le faire risquerait de déclencher l'utilisation du mode quasi-standard ou du mode <em>quirks</em>.</p> + +<p>Assurez-vous que le DOCTYPE soit présent au tout début du document HTML. Tout ce qui précède le DOCTYPE (un commentaire ou une déclaration XML) déclenchera le mode <em>quirks</em> pour Internet Explorer 9 et les versions antérieures.</p> + +<p>En HTML5, le seul but du DOCTYPE est d'activer le mode standard total. Les anciennes versions du standard HTML donnaient une sémantique plus riche au DOCTYPE mais aucun navigateur n'a utilisé le DOCTYPE pour autre chose que pour choisir entre le mode <em>quirks</em> et l'un des modes standards.</p> + +<p>Vous pouvez également consulter <a class="external" href="https://hsivonen.iki.fi/doctype/" title="http://hsivonen.iki.fi/doctype/">cet article avec plus de détails sur la façon dont les navigateurs choisissent entre les différents modes</a>.</p> + +<h3 id="XHTML">XHTML</h3> + +<p>Si la page est servie comme <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> avec le type MIME <code>application/xhtml+xml</code> dans l'en-tête HTTP <code>Content-Type</code>, il n'est pas nécessaire d'utiliser de DOCTYPE afin d'activer le mode standard car de tels documents utiliseront toujours le mode standard total. On notera toutefois que servir les pages avec un type <code>application/xhtml+xml</code> entraînera l'affichage <a href="/en-US/docs/XHTML#Support" title="XHTML">d'une boîte de téléchargement</a> d'un fichier au format inconnu sous Internet Explorer 8 car IE9 est la première version d'Internet Explorer à prendre en charge XHTML.</p> + +<p>Si on sert un contenu semblable à du XHTML mais avec le type MIME <code>text/html</code>, le navigateur l'interprètera comme du HTML et il faudra alors ajouter le DOCTYPE afin d'utiliser un mode standard.</p> + +<h2 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">Comment connaître le mode utilisé ?</h2> + +<p>Sous Firefox, vous pouvez utiliser le menu contextuel : "Informations sur la page" et le champ "Mode de rendu" de l'onglet Général..</p> + +<p>Sous Internet Explorer, appuyez sur la touche <em>F12</em> et utilisez le champ <em>Document Mode</em>.</p> + +<h2 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">Quelles sont les différences entre les modes ?</h2> + +<p>Voir <a href="/fr/docs/Comportement_du_mode_quirks_de_Mozilla">la liste des déviations (<em>quirks</em>)</a> et <a href="/fr/docs/Mozilla/Mode_presque_standard_de_Gecko" title="Gecko%27s_%22Almost_Standards%22_Mode">la description du mode quasi-standard</a> pour les différences entre ces modes.</p> diff --git a/files/fr/web/html/reference/index.html b/files/fr/web/html/reference/index.html new file mode 100644 index 0000000000..5361ee77ac --- /dev/null +++ b/files/fr/web/html/reference/index.html @@ -0,0 +1,30 @@ +--- +title: Référence HTML +slug: Web/HTML/Reference +tags: + - HTML + - Landing + - Reference + - Web +translation_of: Web/HTML/Reference +--- +<div>{{HTMLSidebar}}</div> + +<p>Cette référence <a href="/fr/docs/Web/HTML">HTML</a> décrit l'ensemble des <strong>éléments</strong> et des <strong>attributs</strong> qui peuvent être utilisés en HTML, y compris les <strong>attributs universels</strong> qui peuvent s'appliquer sur tous les éléments.</p> + +<dl> + <dt><a href="/fr/docs/Web/HTML/Element">Référence des éléments HTML</a></dt> + <dd>Cette page énumère tous les éléments HTML, regroupés ici selon leurs fonctions.</dd> + <dt><a href="/fr/docs/Web/HTML/Attributs">Référence des attributs HTML</a></dt> + <dd>Chaque élément HTML peut avoir un ou plusieurs attributs. Ces attributs sont des valeurs supplémentaires qui permettent de configurer les éléments ou d'adapter leur comportement.</dd> + <dt><a href="/fr/docs/Web/HTML/Attributs_universels">Attributs universels</a></dt> + <dd>Les attributs universels peuvent être définis sur tous les éléments HTML, y compris pour les éléments non définis dans le standard. Autrement dit, les éléments non-standards doivent pouvoir accepter ces attributs. Cela permettra au navigateur de les gérer selon certains des aspects de la spécification. Par exemple, pour un navigateur conforme, un élément <toto hidden>...<toto> sera masqué bien que <toto> ne soit pas un élément HTML valide.</dd> + <dt><a href="/fr/docs/Web/HTML/Link_types">Types de liens</a></dt> + <dd>En HTML, les différents types de liens indiquent les relations entre deux documents. Ces liens peuvent prendre la forme d'un élément {{HTMLElement("a")}}, {{HTMLElement("area")}} ou {{HTMLElement("link")}}.</dd> + <dt><a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu">Catégories de contenu</a></dt> + <dd>Chaque élément HTML appartient à une ou plusieurs catégories de contenu. Ces catégories regroupent des éléments avec des caractéristiques communes.</dd> + <dt><a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">Formats des dates et heures en HTML</a></dt> + <dd>Certains éléments HTML permettent de manipuler des valeurs temporelles (dates, heures, dates et heures). Cet article décrit le format de représentation de ces valeurs, notamment utilisées pour les éléments {{HTMLElement("input")}}, {{HTMLElement("ins")}} et {{HTMLElement("del")}}.</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/HTML">Voir tout...</a></span></p> diff --git a/files/fr/web/html/reglages_des_attributs_cors/index.html b/files/fr/web/html/reglages_des_attributs_cors/index.html new file mode 100644 index 0000000000..ebb63f97f5 --- /dev/null +++ b/files/fr/web/html/reglages_des_attributs_cors/index.html @@ -0,0 +1,96 @@ +--- +title: Attributs de réglage du CORS +slug: Web/HTML/Reglages_des_attributs_CORS +tags: + - Avancé + - CORS + - HTML + - Reference +translation_of: Web/HTML/Attributes/crossorigin +--- +<div>{{HTMLSidebar}}</div> + +<p>En HTML5, certains des éléments HTML supportant le <a href="/fr/docs/HTTP/Access_control_CORS">CORS</a> (Cross-Origin Resource Sharing) comme les éléments {{HTMLElement("img")}}, {{HTMLElement("video")}} ou {{HTMLElement("script")}}, ont un attribut <code>crossorigin</code> (propriété <code>crossOrigin</code>), qui permet de configurer les requêtes CORS pour les données de l'élément à renvoyer. Ces attributs sont listés ci-après avec les valeurs qu'ils peuvent avoir :</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Mot-clé</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>anonymous</code></td> + <td>Les requêtes CORS pour cet élément auront le marqueur d'authentification (<em>credentials flag</em>) avec la valeur <code>'same-origin'</code>.</td> + </tr> + <tr> + <td><code>use-credentials</code></td> + <td>Les requêtes CORS pour cet élément auront le marqueur d'authentification (<em>credentials flag</em>) avec la valeur <code>'include'</code>.</td> + </tr> + <tr> + <td><code>""</code></td> + <td>Utiliser la chaîne vide (<code>crossorigin=""</code>) ou l'attribut seul (<code>crossorigin</code>) sera équivalent à l'utilisation de la valeur <code>anonymous</code>.</td> + </tr> + </tbody> +</table> + +<p>Par défaut (quand l'attribut n'est pas spécifié), le CORS n'est pas du tout utilisé. Le mot-clé <code>anonymous</code> signifie que, lorsqu'il n'y a pas la même origine, il n'y aura ni échange d<strong>'informations d'authentification de l'utilisateur</strong> via des cookies, ni des certificats SSL côté client ou des authentifications HTTP comme détaillé dans la <a href="https://www.w3.org/TR/cors/#user-credentials">section terminologique de la spécification CORS</a>.</p> + +<p>Un mot-clé invalide ou une chaîne de caractères vide seront interprétés comme le mot-clé <code>anonymous</code>.</p> + +<h3 id="Exemple_utiliser_crossorigin_avec_l'élément_script">Exemple : utiliser <code>crossorigin</code> avec l'élément <code>script</code></h3> + +<p>On peut utiliser l'élément {{HTMLElement("script")}} afin d'indiquer au navigateur d'exécuter un script (ici, <code>https://exemple.com/framework-exemple.js</code>) sans envoyer les informations d'authentification de l'utilisateur.</p> + +<pre class="brush: html"><script src="https://exemple.com/framework-exemple.js" + crossorigin="anonymous"> +</script></pre> + +<h3 id="Exemple_utiliser_des_informations_d'authentification_avec_un_manifeste">Exemple : utiliser des informations d'authentification avec un manifeste</h3> + +<p>La valeur <code>use-credentials</code> doit être utilisée lorsqu'on récupère un manifeste nécessitant des informations d'authentification, y compris lorsque le fichier provient de la même origine :</p> + +<pre class="brush: html"><link rel="manifest" href="/app.manifest" crossorigin="use-credentials"></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', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2> + +<h3 id="L'attribut_crossorigin_pour_<script>">L'attribut <code>crossorigin</code> pour <code><script></code></h3> + +<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.script.crossorigin")}}</p> + +<h3 id="L'attribut_crossorigin_pour_<video>">L'attribut <code>crossorigin</code> pour <code><video></code></h3> + +<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.video.crossorigin")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTTP/CORS">CORS</a></li> +</ul> diff --git a/files/fr/web/html/sections_and_outlines_of_an_html5_document/index.html b/files/fr/web/html/sections_and_outlines_of_an_html5_document/index.html new file mode 100644 index 0000000000..319d98e927 --- /dev/null +++ b/files/fr/web/html/sections_and_outlines_of_an_html5_document/index.html @@ -0,0 +1,375 @@ +--- +title: Structures et sections d'un document HTML5 +slug: Web/HTML/Sections_and_Outlines_of_an_HTML5_document +tags: + - Avancé + - Exemple + - Guide + - HTML + - HTML5 + - Section + - Structure + - Web +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +--- +<p>Cette page présente la manière dont les navigateurs définissent la structure d'un document à partir de son fichier HTML.</p> + +<h2 id="Structure_et_document_outline">Structure et document outline</h2> + +<p>Le terme anglais "document outline" ou "document outlines" désigne la structure d'un document générée à partir de ses titres. Cette structure permet de fournir aux usagers une vision simplifiée du document, tel un sommaire ou une table des matières.</p> + +<p>Les technologies d'assistances telles que les lecteurs d'écran peuvent proposer à leurs usagers de parcourir le document par ce moyen. Cela leur permet d'avoir rapidement une idée du contenu de la page ou d'aller directement à la section qui les intéresse.</p> + +<p>Depuis HTML4, cette structure est générée à partir de la valeur absolue des différents titres. Un <code><h2></code> sera considéré comme un niveau hiérarchique plus bas qu'un <code><h1></code> et un niveau plus haut qu'un <code><h3></code>.</p> + +<p>L'algorithme Outline HTML5, proposait quand à lui de générer cette même structure non pas à partir des titres, mais à partir de l'imbrication des <code><section></code> entre elles. Cet algorithme n'est à l'heure actuelle implémenté par aucun navigateur ou technologie d'assistance. La partie du document le concernant est donc purement indicative.</p> + +<h2 id="Structure_dun_document_depuis_HTML4">Structure d'un document depuis HTML4</h2> + +<p>La structure d'un document, à savoir la structure sémantique de ce qui est entre <code><body></code> et <code></body></code>, est fondamentale pour la présentation de la page à l'utilisateur. HTML4 utilise la notion de sections et sous-sections d'un document pour décrire sa structure. Une section est définie par un élément de division HTML ({{HTMLElement ("div")}}) contenant des éléments de titre ({{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, {{ HTMLElement ("h3")}}, {{HTMLElement ("h4")}}, {{HTMLElement ("h5")}} ou {{HTMLElement ("h6")}}), définissant son titre. Les relations entre ces éléments HTML et la division HTML conduit à la structure du document et son schéma.</p> + +<p>Ainsi, le code suivant :</p> + +<pre class="brush: html"><code class="brush: html"> +<div class="section" id="foret-elephants"> + <h1>Les éléphants de forêt</h1> + <p>Dans cet article, nous discutons des éléphants de forêt moins connus. + … cette section continue… + <div class="subsection" id="foret-habitat"> + <h2>Habitat</h2> + <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux. + … ce paragraphe continue… + </div> +</div></code></pre> + +<p>conduit au schéma suivant :</p> + +<pre>1. Les éléphants de forêt + 1.1 Habitat +</pre> + +<p>Les éléments {{HTMLElement ("div")}} ne sont pas obligatoires pour définir une nouvelle section. La simple présence d'un élément de titre est suffisante pour impliquer une nouvelle section. Par conséquent :</p> + +<pre class="brush: html"><h1>Les éléphants de forêt</h1> + <p>Dans cette section, nous discutons des éléphants de forêt moins connus. + … cette section continue… + + <h2>Habitat</h2> + <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux. + … ce paragraphe continue… + + <h2>Régime</h2> + +<h1>Gerbilles de Mongolie</h1> +</pre> + +<p>conduit au schéma suivant :</p> + +<pre>1. Les éléphants de forêt + 1.1 Habitat + 1.2 Régime +2. Gerbilles de Mongolie</pre> + +<h2 id="Problèmes_résolus_par_HTML5">Problèmes résolus par HTML5</h2> + +<p>Le code HTML4 définit la structure d'un document, cependant son algorithme schématique implicite est très strict et conduit à de nombreux problèmes :</p> + +<ol> + <li>L'utilisation de {{HTMLElement ("div")}} pour définir les sections sémantiques, sans définir de valeurs spécifiques pour l'attribut <code>class</code>, rend impossible l'automatisation de l'algorithme (« {{HTMLElement ("div")}} fait-il partie de l'aperçu de la page ? Définit-il une section ou un paragraphe ? » ou « Ce {{HTMLElement ("div")}} est-il là uniquement pour le style ? »). En d'autres termes, la spécification HTML4 est très imprécise sur ce qui est une section et quel est son champ d'application. La génération automatique du schéma est importante, surtout pour les <a class="external" href="http://en.wikipedia.org/wiki/Assistive_technology">technologies d'assistance (en)</a> qui sont susceptibles d'adapter leur façon de présenter l'information aux utilisateurs en fonction de la structure du document. HTML5 supprime la nécessité d'éléments {{HTMLElement ("div")}} dans l'algorithme par l'introduction d'un nouvel élément, {{HTMLElement ("section")}}, l'élément HTML Section.</li> + <li>La fusion de plusieurs documents est compliquée : l'inclusion d'un sous-document dans un document principal conduit à modifier le niveau des éléments de titres HTML afin de conserver le plan du document. Ce problème est résolu dans HTML5, les éléments de section nouvellement introduits ({{HTMLElement ("article")}}, {{HTMLElement ("section")}}, {{HTMLElement ("nav")}} et {{HTMLElement ("aside")}}) sont toujours sous-sections de la plus proche section ascendante, indépendamment des sections créées par les en-têtes internes.</li> + <li>En HTML4, chaque section fait partie de la structure du document. Mais les documents ne sont pas souvent linéaires. Un document peut avoir des sections spéciales contenant des informations qui n'en font pas partie, même si elles sont liées au flux principal, comme un bloc de publicité ou une boîte explication. HTML5 introduit l'élément {{HTMLElement ("aside")}} permettant à ces sections de ne pas faire partie du plan principal.</li> + <li>Encore une fois, en HTML4, parce que chaque section fait partie de la structure du document, il n'est pas possible d'avoir des sections contenant des informations relatives non pas au document mais au site tout entier, comme des logos, des menus, une table des matières, ou des mentions légales. À cet effet, HTML5 introduit trois éléments de section spécifiques : {{HTMLElement ("nav")}} pour des collections de liens, comme une table des matières, {{HTMLElement ("footer")}} et {{HTMLElement ("header")}} pour les informations relatives au site.</li> +</ol> + +<p>Plus généralement HTML5 apporte la précision des caractéristiques de sectionnement et de position, permettant aux contours de documents à être prévisibles et utilisés par le navigateur afin d'améliorer l'expérience utilisateur.</p> + +<h2 id="Lalgorithme_Outline_HTML5">L'algorithme Outline HTML5</h2> + +<div class="warning"> +<p><strong>Important </strong>: Aucune implémentation de cet algorithme Outline HTML5 n'existe ni dans les navigateurs web ni dans les technologies d'assistance. Elle n'a jamais fait partie de la spécification finale W3C. L'algorithme <a href="https://www.w3.org/TR/html5/sections.html#outline">Outline</a> <em>ne devrait donc pas être utilisé</em> pour transmettre la structure d'un document aux utilisateurs. Il est recommandé aux auteurs d'utiliser le <a href="https://www.w3.org/TR/html5/sections.html#rank">rang</a> des titres (<code><a href="https://www.w3.org/TR/html5/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code>-<code><a href="https://www.w3.org/TR/html5/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a></code>) pour transmettre la structure d'un document.</p> +</div> + +<p>Cet algorithme propose de générer la structure du document à partir de l'imbrication des sections entre elles.</p> + +<h3 id="Définir_des_sections_en_HTML5">Définir des sections en HTML5</h3> + +<p>Tout le contenu se trouvant à l'intérieur de l'élément {{HTMLElement ("body")}} est une partie d'une section. Les articles en HTML5 peuvent être imbriqués. À côté de la section principale, définie par l'élément {{HTMLElement ("body")}}, les limites de la section sont définies explicitement ou implicitement. Sections explicitement définies sont le contenu dans {{HTMLElement ("body")}}, {{HTMLElement ("section")}}, {{HTMLElement ("article")}}, {{HTMLElement ("aside")}}, {{HTMLElement ("footer")}}, {{HTMLElement ("header")}} et {{HTMLElement ("nav")}} balises.</p> + +<div class="note"> +<p>Remarque : Chaque section peut avoir sa propre hiérarchie rubrique. Par conséquent, même une section imbriquée peut avoir un {{HTMLElement ("h1")}}. Voir <a href="#D.C3.A9finir_les_ent.C3.AAte_en_HTML5" title="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5">Définition des sections en HTML5</a></p> +</div> + +<p>Prenons un exemple - ici nous avons un document avec une section de haut niveau et un pied de page défini. Dans la section de haut niveau, nous avons trois sous-sections, définies par deux éléments {{htmlelement ('section')}} et un élément {{htmlelement ('aside')}} :</p> + +<pre class="brush: html"><section> + + <h1>éléphants de forêt</h1> + + <section> + <h1>Introduction</h1> + <p>Dans cette section, nous discutons des éléphants de forêt moins connus.</p> + </section> + + <section> + <h1>Habitat</h1> + <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux.</p> + </section> + + <aside> + <p>bloc publicitaire</p> + </aside> + +</section> + +<footer> + <p>(c) 2010 La société Exemple</p> +</footer> +</pre> + +<p>Cela conduit à la structure suivante :</p> + +<pre>1. Les éléphants de forêt + 1.1 Introduction + 1.2 Habitat + 1.3 Section (aside)</pre> + +<h3 id="Définition_des_en-têtes_en_HTML5">Définition des en-têtes en HTML5</h3> + +<p>Bien que les éléments de sectionnement HTML définissent la structure du document, un plan a également besoin de titres pour être utile. La règle de base est simple : le premier élément de titre HTML (l'un des {{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, {{HTMLElement ("h3")}}, {{HTMLElement ("h4")}}, {{HTMLElement ("h5")}}, {{HTMLElement ("h6")}}) définit le titre de la section courante.</p> + +<p>Les éléments de titre ont un <em>rang</em> donné par le nombre dans le nom de l'élément, où {{HTMLElement ("h1")}} a le rang <em> le plus élevé</em> et {{HTMLElement ("h6")}} a le rang <em>le plus bas</em>. Le classement relatif ne compte que dans une section ; la structure des sections détermine le plan, et non pas le rang des titres de sections. Par exemple, ce code :</p> + +<pre class="brush: html"><section> + <h1>éléphants de forêt</h1> + + <p>Dans cette section, nous discutons des éléphants de forêt moins connus. + Cette section continue…</p> + + <section> + <h2>Habitat</h2> + + <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux. + Ce paragraphe continue…</p> + </section> +</section> + +<section> + <h3>Gerbilles de Mongolie</h3> + + <p>Dans cet article, nous discutons des célèbres gerbilles mongoles. + Cette section continue… +</section></pre> + +<p>conduit à la structure suivante :</p> + +<pre>1. Les éléphants de forêt + 1.1 Habitat +2. Gerbilles de Mongolie</pre> + +<p>Notez que le rang de l'élément titre (dans l'exemple {{HTMLElement ("h1")}} pour la première section de niveau supérieur, {{HTMLElement ("h2")}} pour la sous-section et {{HTMLElement ("h3")}} pour la seconde section de haut niveau) n'est pas important. Tout rang peut être utilisé comme en-tête d'une section explicitement définie, bien que cette pratique ne soit pas recommandée.</p> + +<h3 id="Découpage_implicite">Découpage implicite</h3> + +<p>Parce que les éléments de sectionnement HTML5 ne sont pas obligatoires pour définir la structure, pour conserver la compatibilité avec le Web existant dominé par HTML4, il existe un moyen de définir des sections sans eux. C'est ce qu'on appelle le <em>découpage implicite</em>.</p> + +<p>Les éléments de titre HTML ({{HTMLElement ("h1")}} à {{HTMLElement ("h6")}}) définissent une nouvelle section, implicite, quand ils ne sont pas le premier en-tête de leurs sections ascendantes, explicites. La façon dont cette section implicite est positionnée dans la structure est définie par son rang par rapport au titre précédent dans leur section ascendante. Si elle est d'un rang inférieur à l'en-tête précédent, il ouvre une sous-section implicite de la section. Ce code :</p> + +<pre class="brush: html"><section> + <h1>éléphants de forêt</h1> + + <p>Dans cette section, nous discutons des éléphants de forêt moins connus. + Cette section continue… + + <h3 class="implicit subsection">Habitat</h3> + + <p>Les éléphants de forêt <p> ne vivent pas dans les arbres mais parmi eux. + Ce paragraphe continue… +</section></pre> + +<p>conduit à la structure suivante :</p> + +<pre>1. Les éléphants de forêt + 1.1 Habitat <em>(implicitement défini par l'élément h3)</em></pre> + +<p>Si elle est de même rang que le titre précédent, elle ferme la section précédente (qui peut avoir été explicite !) et en ouvre une nouvelle implicite de même niveau :</p> + +<pre class="brush: html"><section> + <h1>Éléphants de forêt</h1> + + <p>Dans cette section, nous discutons des éléphants de forêt moins connus. + Cette section continue… + + <h1 class="implicit section">Gerbilles de Mongolie</h1> + + <p>Les gerbilles de Mongolie sont mignons petits mammifères. + Cette section continue… +</section></pre> + +<p>conduit à la structure suivante :</p> + +<pre>1. Les éléphants de forêt +2. Gerbilles de Mongolie <em>(implicitement défini par l'élément h1, qui a fermé la section précédente dans le même temps)</em></pre> + +<p>Si elle est d'un rang supérieur au titre précédent, elle ferme la section précédente et en ouvre une nouvelle implicite de niveau supérieur :</p> + +<pre class="brush: html"><body> + <h1>Mammifères</h1> + + <h2>Baleines</h2> + + <p>Dans cette section, nous discutons de baleines géantes. + Cette section continue… + + <section> + <h3>Éléphants de forêt</h3> + + <p>Dans cet article, nous discutons des éléphants de forêt moins connus. + Cette section continue… + + <h3>Gerbilles de Mongolie</h3> + + <p>Hordes de gerbilles ont étalé leur gamme bien au-delà Mongolie. + Ce paragraphe continue… + + <h2>Reptiles</h2> + + <p>Reptiles sont des animaux à sang froid. + Ce paragraphe continue… + </section> +</body></pre> + +<p>conduit à la structure suivante :</p> + +<pre>1. Mammifères + 1.1 Baleines (défini implicitement par l'élément h2) + 1.2 éléphants de forêt (défini explicitement par l'élément section) + 1.3 Gerbilles de Mongolie (défini implicitement par l'élément h3 qui ferme la section précédente en même temps) +2. Reptiles (défini implicitement par l'élément h2 qui ferme la section précédente en même temps) +</pre> + +<p>Ce n'est pas la structure à laquelle on pourrait s'attendre en jetant un coup d'œil rapide sur le balisage. Pour rendre votre balisage humainement compréhensible, il est bon d'utiliser des balises explicites pour ouvrir et fermer les sections, et de faire correspondre les niveaux des titres avec le niveau d'imbrication désiré de la section. Toutefois, cela n'est pas exigé par la spécification HTML5. Si vous trouvez que les navigateurs rendent de façon inattendue le plan de votre document, vérifiez que vos sections sont implicitement fermées par des éléments d'en-tête.</p> + +<p>Une exception à cette règle générale – qui veut que rang du titre devrait correspondre au niveau d'imbrication de la section – concerne les sections qui peuvent être réutilisées dans d'autres documents. Par exemple, une section peut être stockée dans un système de gestion de contenu et assemblée dans des documents au moment de l'exécution. Dans ce cas, une bonne pratique consiste à commencer par {{HTMLElement ("h1")}} pour le titre de niveau supérieur de la section réutilisable. Le niveau d'imbrication de la section réutilisable sera déterminé par la hiérarchie des sections du document dans lequel elle apparaît. Les balises de section explicites sont toujours utiles dans ce cas.</p> + +<h3 id="Racines_de_sectionnement">Racines de sectionnement</h3> + +<p>Une racine de sectionnement est un élément HTML qui peut avoir son propre plan, mais les sections et les titres qu'elle contient ne contribuent pas à la structure de son ascendant. À côté de {{HTMLElement ("body")}}, qui est la racine logique de sectionnement d'un document, il y a souvent des éléments qui introduisent du contenu externe à la page : {{HTMLElement ("blockquote")}}, {{HTMLElement ("details")}}, {{HTMLElement ("fieldset")}}, {{HTMLElement ("figure")}} et {{HTMLElement ("td")}}.</p> + +<h4 id="Exemple">Exemple</h4> + +<pre class="brush: html"><section> + <h1>Éléphants de forêt</h1> + <section> + <h2>Introduction</h2> + <p>Dans cette section, nous discutons des éléphants de forêt moins connus.</p> + </section> + <section> + <h2>Habitat</h2> + <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux. Regardons ce que les scientifiques disent dans «&nbsp;<cite> l'éléphant de forêt à Bornéo </cite>&nbsp;»&nbsp;: + <blockquote> + <h1>Bornéo</h1> + <p>L'éléphant de la forêt vie à Bornéo…</p> + </blockquote> + </section> +</section> +</pre> + +<p>Cet exemple se traduit par la structure suivante :</p> + +<pre>1. Les éléphants de forêt + 1.1 Introduction + 1.2 Habitat</pre> + +<p>Cette structure ne contient pas le plan interne à l'élément {{HTMLElement ("blockquote")}}, qui, étant une citation externe, est une racine de sectionnement et isole sa structure interne.</p> + +<h3 id="Les_sections_externes_à_la_structure">Les sections externes à la structure</h3> + +<p>HTML5 introduit deux nouveaux éléments qui permettent de définir des sections ne faisant pas partie de la structure principale d'un document Web :</p> + +<ol> + <li>L'élément HTML de section ({{HTMLElement ("aside")}}) définit une section qui, bien que liée à l'élément principal, ne fait pas partie du flux principal, comme une boîte d'information ou une publicité. Il dispose de son propre plan, mais il n'appartient pas au plan principal.</li> + <li>L'élément HTML de section ({{HTMLElement ("nav")}}) définit une section qui contient les liens de navigation. Il peut y en avoir plusieurs dans un document, par exemple, un avec des liens internes à la page, comme une table des matières, et un autre avec des liens de navigations dans le site. Ces liens ne font pas partie du flux principal et du plan, et généralement peut ne pas être initialement rendu par le lecteur d'écran et les technologies d'assistance similaires.</li> +</ol> + +<h3 id="Headers_and_Footers">Headers and Footers</h3> + +<p>HTML5 présente également deux nouveaux éléments qui peuvent être utilisés pour marquer l'en-tête et le pied de page d'une section :</p> + +<ol> + <li>L'élément HTML de titre de section ({{HTMLElement ("header")}}) définit l'en-tête d'une page, contenant généralement le logo et le nom du site et, éventuellement, un menu horizontal. Malgré son nom, il n'est pas nécessairement placé au début de la page.</li> + <li>L'élément HTML de pied de section ({{HTMLElement ("footer")}}) définit un pied-de-page, contenant généralement les mentions légales et parfois quelques liens. Malgré son nom, il n'est pas nécessairement placé dans le bas de la page.</li> +</ol> + +<p>Ceux-ci ne créent pas de nouvelles sections dans la structure, mais ils marquent le contenu dans les sections de la page.</p> + +<h2 id="Adresses_dans_les_éléments_de_sectionnement">Adresses dans les éléments de sectionnement</h2> + +<p>L'auteur d'un document veut souvent publier des informations de contact, le nom de l'auteur tel et son adresse. HTML4 le permet grâce à cet l'élément {{HTMLElement ("address")}}, qui a été prolongé en HTML5.</p> + +<p>Un document peut être fait de différentes sections de différents auteurs. Une section d'un autre auteur que celui de la page principale est définie en utilisant l'élément {{HTMLElement ("article")}}. Par conséquent, l'élément {{HTMLElement ("address")}} est désormais lié à son {{HTMLElement ("body")}} ou à l'ancêtre {{HTMLElement ("article")}} le plus proche.</p> + +<h2 id="Utilisation_des_éléments_HTML5_dans_les_navigateurs_Non-HTML5">Utilisation des éléments HTML5 dans les navigateurs Non-HTML5</h2> + +<p>Les articles et les éléments en-têtes devraient fonctionner dans la plupart des navigateurs non HTML5. Bien que non pris en charge, ils n'ont pas besoin d'une interface spéciale DOM et ils n'ont besoin que d'un style CSS spécifique comme des éléments inconnus sont aménagés comme display: inline par défaut:</p> + +<pre class="brush: css"><code class="brush: css">section, article, aside, footer, header, nav, hgroup { + display: block; +}</code></pre> + +<p>Bien sûr, le développeur web peut styliser différemment, mais gardez à l'esprit que dans un navigateur non HTML5, le style par défaut est différent de ce qui est attendu de ces éléments. Notez également que le {{HTMLElement ("time")}} élément n'a pas été inclus, car le style par défaut pour elle dans un navigateur non HTML5 est le même que celui de l'une HTML5 compatible.</p> + +<p>Cette méthode a ses limites si, comme certains navigateurs ne permettent pas de style des éléments non pris en charge. C'est le cas d'Internet Explorer (version 8 et versions antérieures), qui ont besoin d'un script spécifique pour permettre à celle-ci :</p> + +<pre class="brush: html"><!--[if lt IE 9]>; + <script> + document.createElement("header"); + document.createElement("footer"); + document.createElement("section"); + document.createElement("aside"); + document.createElement("nav"); + document.createElement("article"); + document.createElement("hgroup"); + document.createElement("time"); + </script> +<![endif]--></pre> + +<p>Ce script signifie que, dans le cas d'Internet Explorer (8 et antérieures), les scripts doivent être activés pour pouvoir afficher HTML5 et les éléments de sectionnement titres correctement. Sinon, ils ne seront pas affichés, ce qui peut être problématique, car ces éléments sont susceptibles de définir la structure de la page entière. C'est pourquoi un élément {{HTMLElement ("NoScript")}} explicite devrait être ajouté pour ce cas :</p> + +<pre class="brush: html"><noscript> + <p><strong>Attention, cette page Web nécessite que JavaScript soit activé !</strong></p> + <p>JavaScript est un langage de programmation couramment utilisé pour créer des effets intéractifs dans les navigateurs Web.</p> + <p>Malheureusement, il est désactivé dans votre navigateur. Veuillez l'activer pour afficher cette page.</p> + <p><a href="https://goo.gl/koeeaJ">Comment activer JavaScript ?</a></p> +</noscript></pre> + +<p>Cela conduit au code ci-dessous pour permettre la prise en charge des éléments de sections et d'en-têtes HTML5 dans les navigateurs non HTML5, même pour Internet Explorer (8 et antérieur), avec un retour correct pour le cas où ce dernier est configuré pour ne pas autoriser les scripts :</p> + +<pre class="brush: html"><!--[if lt IE 9]> + <script> + document.createElement("header"); + document.createElement("footer"); + document.createElement("section"); + document.createElement("aside"); + document.createElement("nav"); + document.createElement("article"); + document.createElement("hgroup"); + document.createElement ("time"); + </script> +<![endif]--> + <noscript> + <p><strong>Attention, cette page Web nécessite que JavaScript soit activé !</strong></p> + <p>JavaScript est un langage de programmation couramment utilisé pour créer des effets interactifs dans les navigateurs Web.</p> + <p>Malheureusement, il est désactivé dans votre navigateur. Veuillez l'activer pour afficher cette page.</p> + <p><a href="https://goo.gl/koeeaJ">Comment activer JavaScript ?</a></p> + </noscript> +</pre> + +<div class="blockIndicator note"> +<p>Cependant, pour des raisons d’accessibilité, un site devrait toujours pouvoir être consultable en l’absence de Javascript.</p> +</div> + +<h2 id="Conclusion">Conclusion</h2> + +<p>Les nouveaux éléments sémantiques introduits en HTML5 apportent la capacité de décrire la structure et le plan d'un document web d'une manière standard. Ils apportent un grand avantage pour les utilisateurs de navigateurs HTML5 et qui ont besoin de la structure pour les aider à comprendre la page, par exemple, les utilisateurs de technologies d'assistance. Ces nouveaux éléments sémantiques sont simples à utiliser et, avec très peu d'efforts, ils peuvent également être mis en œuvre dans les navigateurs ne prenant pas en charge HTML5. Par conséquent, ils devraient être utilisés sans restriction.</p> + +<div>{{HTML5ArticleTOC()}}</div> diff --git a/files/fr/web/html/types_de_lien/index.html b/files/fr/web/html/types_de_lien/index.html new file mode 100644 index 0000000000..f8134a8fe7 --- /dev/null +++ b/files/fr/web/html/types_de_lien/index.html @@ -0,0 +1,368 @@ +--- +title: Types de lien +slug: Web/HTML/Types_de_lien +tags: + - HTML + - Reference + - Types de lien + - Web +translation_of: Web/HTML/Link_types +--- +<div>{{HTMLSidebar}}</div> + +<p>En HTML, les types de lien indiquent la relation entre deux documents, reliés ensemble grâce à un élément {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}} ou {{HTMLElement("link")}}.</p> + +<table class="standard-table"> + <caption>Liste des types de lien HTML et leur signification</caption> + <thead> + <tr> + <th scope="col">Type de lien</th> + <th scope="col">Description</th> + <th scope="col">Utilisable dans ces éléments</th> + <th scope="col">Interdit dans ces éléments</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>alternate</code></td> + <td> + <ul> + <li>Si l'élément est un élément {{HTMLElement("link")}} et que l'attribut {{htmlattrxref("rel", "link")}} contient le type <code>stylesheet</code>, ce lien définit <a href="/fr/docs/Web/CSS/Feuilles_de_style_alternatives">une feuille de style alternative</a>. Dans ce cas, l'attribut {{htmlattrxref("title", "link")}} doit être présent et ne doit pas être la chaîne de caractères vide.</li> + <li>Si l'attribut {{htmlattrxref("type","link")}} vaut <code>application/rss+xml</code> ou <code>application/atom+xml</code>, le lien définit <a href="/fr/docs/Web/RSS/Premiers_pas/Syndication">un flux de syndication</a>. Le premier flux définit sur la page est le flux par défaut.</li> + <li>Sinon, le lien définit une page alternative, il peut s'agir : + <ul> + <li>Si l'attribut {{htmlattrxref("media","link")}} est défini, d'une page destinée à un autre support (par exemple une tablette)</li> + <li>D'une page dans une autre langue si l'attribut {{htmlattrxref("hreflang","link")}} est défini,</li> + <li>D'une page dans un autre format (par exemple PDF) si l'attribut {{htmlattrxref("type","link")}} est défini,</li> + <li>D'une combinaison de ces documents.</li> + </ul> + </li> + </ul> + </td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td>{{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>archives</code> {{obsolete_inline}}</td> + <td>Ce type définit un hyperlien vers un document qui contient un lien d'archive vers le document courant. Un billet de blog pourrait ainsi créer un lien vers un index qui liste les articles publiés pendant ce mois.<br> + <br> + <strong>Note :</strong> Bien que la forme <code>archive</code> (au singulier) soit reconnue, elle est incorrecte et doit être évitée.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td>{{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>author</code></td> + <td>Ce type définit un hyperlien vers une page qui décrit l'auteur ou qui fournit un moyen de contacter l'auteur du document.<br> + <br> + <strong>Note :</strong> Ce lien peut être un lien <code>mailto:</code> bien que ce ne soit pas recommandé afin d'éviter la collecte de l'adresse électronique (mieux vaut avoir un formulaire de contact).<br> + <br> + Bien que l'attribut {{htmlattrxref("rev", "link")}} soit reconnu pour les éléments {{HTMLElement("a")}}, {{HTMLElement("area")}} et {{HTMLElement("link")}}, il ne faut pas utiliser cet attribut avec un type de lien « <code>made</code> » mais plutôt utiliser {{htmlattrxref("rel", "link")}} avec ce type de lien (« <code>author</code> »).</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td>{{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>bookmark</code></td> + <td>Ce type de lien indique l'hyperlien est <a href="https://fr.wikipedia.org/wiki/Permalien">un permalien</a> pour l'élément {{HTMLElement("article")}} qui est l'ancêtre le plus proche. S'il n'y en a aucun, c'est un permalien pour <a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">la section</a> la plus proche de l'élément courant.<br> + <br> + Ce type de lien permet de placer un marque-page pour un seul article d'une page qui contient plusieurs articles (par exemple un agrégateur).</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + <td>{{HTMLElement("link")}}, {{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>canonical</code></td> + <td>Un lien canonique est un élément HTML qui aide les webmasters à ne pas dupliquer du contenu en indiquant la version <em>canonique</em> ou <em>préférée</em> de la page pour l'optimisation à destination des moteurs de recherche.</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>dns-prefetch</code> {{experimental_inline}}</td> + <td>Ce type de lien indique au navigateur qu'une ressource est nécessaire et permet au navigateur d'effectuer une requête DNS et un établissement de connexion avant que l'utilisateur clique sur le lien.</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>external</code></td> + <td>Ce type de lien indique que l'hyperlien mène vers une ressource située à l'extérieur du site sur lequel se trouve la page courante. Autrement dit, en suivant ce lien, l'utilisateur quitte le site qu'il visite.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> + <td>{{HTMLElement("link")}}</td> + </tr> + <tr> + <td><code>first</code> {{obsolete_inline}}</td> + <td>Ce type indique que l'hyperlien mène à la première ressource dans la série de ressources à laquelle appartient la page actuelle.<br> + <br> + <strong>Note :</strong> les autres types de lien permettant une navigation séquentielle sont : <code>last</code>, <code>prev</code>, <code>next</code> (pour respectivement la dernière, la précédente et la suivante).<br> + <br> + Bien que les synonymems <code>begin</code> et <code>start</code> puissent être reconnus, ils sont incorrects et devraient être évités.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td>{{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>help</code></td> + <td> + <ul> + <li>Si l'élément est un élément {{HTMLElement("a")}} ou {{HTMLElement("area")}}, ce type indique que l'hyperlien mène vers une ressource contenant de l'aide sur l'utilisation de l'élément parent du lien et de ses descendants.</li> + <li>Si l'élément est un élément {{HTMLElement("link")}}, ce type indique que l'hyperlien mène vers une ressource fournissant une aide à propos de la page entière.</li> + </ul> + </td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}, {{HTMLElement("link")}}</td> + <td><em>Aucun</em>.</td> + </tr> + <tr> + <td><code>icon</code></td> + <td>Ce type définit une ressource qui représente la page dans l'interface utilisateur. C'est généralement une icône (visuelle ou auditive).<br> + <br> + Les attributs {{htmlattrxref("media","link")}}, {{htmlattrxref("type","link")}} et {{htmlattrxref("sizes","link")}} permettent au navigateur de choisir l'icône la plus appropriée au contexte. Si plusieurs ressources sont équivalentes, le navigateur sélectionnera celle qui est déclarée en dernière, dans l'ordre des éléments de l'arbre du document. Ces attributs ne sont que des indications et les ressources associées peuvent ne pas correspondre, auquel cas, le navigateur en sélectionnera une autre s'il en existe une adéquate.<br> + <br> + <strong>Note :</strong> sur iOS, ce type de lien n'est pas utilisé, à la place, ce sont les relations ({{htmlattrxref("rel","link")}}) <code><a href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4">apple-touch-icon</a></code> et <code><a href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6">apple-touch-startup-image</a></code> qui sont utilisées.<br> + <br> + Le type de lien <code>shortcut</code> est souvent vu avant <code>icon</code> mais il n'est pas conforme et les navigateurs l'ignorent, c'est pourquoi il ne doit plus être utilisé.</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>import</code>{{experimental_inline}}</td> + <td>Imports de ressource en HTML</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>index</code> {{obsolete_inline}}</td> + <td>Ce type indique que la page fait partie d'une structure hiérarchique et que l'hyperlien renvoie au niveau le plus haut de cette structure.<br> + <br> + Si un ou plusieurs liens de type <code>up</code> sont présent, la quantité de ces liens indique la profondeur de la page courante au sein de la hiérarchie.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td>{{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>last</code> {{obsolete_inline}}</td> + <td> + <p>Ce type indique que l'hyperlien mène à la dernière ressource dans la série de ressources à laquelle appartient la page actuelle.<br> + <br> + <strong>Note :</strong> les autres types de lien permettant une navigation séquentielle sont : <code>first</code>, <code>prev</code>, <code>next</code> (pour respectivement la première, la précédente et la suivante).</p> + + <p>Bien que le synonyme <code>end</code> puisse être reconnu, il est incorrect et doit être évité.</p> + </td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>Aucun</em>.</td> + </tr> + <tr> + <td><code>license</code></td> + <td>Ce type de lien mène vers un document contenant des informations relatives à la licence appliquée au contenu. Si le lien n'est pas dans l'élément {{HTMLElement("head")}}, le standard n'indique pas que la licence doit s'appliquer à tout ou partie du document, seules les données de la page permettent de le savoir.<br> + <br> + <strong>Note :</strong> bien qu'il puisse être reconnu, le synonyme <code>copyright</code> est incorrect et doit être évité.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}, {{HTMLElement("link")}}</td> + <td><em>Aucun</em>.</td> + </tr> + <tr> + <td><code>manifest</code></td> + <td>Ce type de lien indique que la ressource liée est <a href="/fr/docs/Web/Manifest">un manifeste d'application web</a>.</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>modulepreload</code></td> + <td>Initialise le chargement anticipé (et prioritaire) des modules de scripts</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> + <td></td> + </tr> + <tr> + <td><code>next</code></td> + <td>Ce type indique que l'hyperlien mène à la prochaine ressource dans la série de ressources à laquelle appartient la page actuelle.<br> + <br> + <strong>Note :</strong> les autres types de lien permettant une navigation séquentielle sont : <code>first</code>, <code>prev</code>, <code>last</code> (pour respectivement la première, la précédente et la dernière).</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}, {{HTMLElement("link")}}</td> + <td><em>Aucun</em>.</td> + </tr> + <tr> + <td><code>nofollow</code></td> + <td>Ce type de lien indique que le document lié n'est pas approuvé par l'auteur du document actuel, par exemple s'il n'a aucun contrôle envers le document lié ou si le document est un mauvais exemple ou encore s'il existe une relation commerciale (le lien a été vendu). Ce type de lien peut être utilisé par certains moteurs de recherche qui utilise des classements selon la popularité des documents.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> + <td>{{HTMLElement("link")}}</td> + </tr> + <tr> + <td><code>noopener</code></td> + <td> + <p>Ce type de lien indique au navigateur d'ouvrir le lien sans que le nouveau contexte de navigation créé ait accès au document qui contenait le lien (techniquement la propriété {{domxref("Window.opener")}} renverra <code>null</code>).<br> + <br> + Ce type est particulièrement utile lorsqu'on ouvre un lien pour lequel on ne veut pas qu'il puisse interagir avec le document source (voir également l'article <em><a href="https://mathiasbynens.github.io/rel-noopener/">About <code>rel=noopener</code></a></em> pour plus de détails) tout en fournissant un référent via l'en-tête HTTP (à moins que <code>noreferrer</code> n'y soit également utilisé).</p> + + <p>Lorsque <code>noopener</code> est utilisé, les noms utilisés pour l'attribut <code>target</code>, qui ne sont pas vides et qui ne sont pas <code>_top</code>, <code>_self</code> ou <code>_parent</code> sont alors traités comme s'ils étaient synonymes de <code>_blank</code> lorsqu'il s'agit de décider d'ouvrir une nouvelle fenêtre ou un nouvel onglet.</p> + </td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> + <td>{{HTMLElement("link")}}</td> + </tr> + <tr> + <td><code>noreferrer</code></td> + <td> + <p>Ce type de lien empêche le navigateur, lorsqu'on navigue vers une autre page, que le l'adresse de la page ou toute autre valeur soit fournie via l'en-tête HTTP {{HTTPHeader("Referer")}}.<br> + (Dans Firefox, avant Firefox 37, ce type ne fonctionnait que pour les liens sur lesquels on cliquait directement, lorsqu'on utilisait un menu « Ouvrir dans un nouvel onglet », ce type était ignoré.</p> + </td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> + <td>{{HTMLElement("link")}}</td> + </tr> + <tr> + <td><code>opener</code> {{experimental_inline}} {{non-standard_inline}}</td> + <td>Annule l'effet de l'ajout implicite de <code>rel="noopener"</code> sur les liens qui possèdent explicitement <code>target="_blank"</code> (voir <a href="https://github.com/whatwg/html/issues/4078">la discussion sur les spécifications HTML</a>, <a href="https://trac.webkit.org/changeset/237144/webkit/">la modification WebKit change</a> et <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1503681">la discussion sur le bug Firefox correspondant</a>).</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> + <td>{{HTMLElement("link")}}</td> + </tr> + <tr> + <td><code>pingback</code></td> + <td>Ce type définit une URI vers une ressource externee qui doit être appelée si quelqu'un ajoute un commentaire ou une citation à propos de la page web courant. Le protocole pour un tel appel est défini dans la spécification <a href="https://www.hixie.ch/specs/pingback/pingback">Pingback 1.0</a>.<br> + <br> + <strong>Note :</strong> si l'en-tête HTTP {{HTTPHeader("X-Pingback")}} est également présent, celui-ci aura la prioriété sur l'élément {{HTMLElement("link")}} avec ce type de lien.</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>preconnect</code> {{experimental_inline}}</td> + <td>Ce type de lien suggère au navigateur d'ouvrir une connexion vers le site web visé de façon anticipée, sans diffuser d'information privée et sans télécharger de contenu. Il est utilisé afin de pouvoir récupérer le contenu lié plus rapidement.</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>prefetch</code></td> + <td>Ce type de lien suggère au navigateur de récupérer la ressource liée de façon anticipée phase car il est probable que l'utilisateur la demande. À partir de Firefox 44, la valeur de l'attribut {{htmlattrxref("crossorigin", "link")}} est prise en compte, ce qui permet d'effectuer des récupérations anticipées anonymes.<br> + <br> + <strong>Note :</strong> <a href="/fr/docs/FAQ_sur_le_préchargement_des_liens">la FAQ sur <code>prefetch</code></a> explique quels liens peuvent être récupérés de façon anticipée et quelles peuvent être les méthodes alternatives.</td> + <td>{{HTMLElement("a")}} {{unimplemented_inline}},<br> + {{HTMLElement("area")}} {{unimplemented_inline}},<br> + {{HTMLElement("link")}}</td> + <td>{{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>preload</code></td> + <td> + <p>Ce type de lien indique au navigateur de précharger une ressource car celle-ci sera nécessaire par la suite lors de la navigation.</p> + + <p>Voir l'article <a href="/fr/docs/Web/HTML/Précharger_du_contenu">Précharger du contenu grâce à <code>rel="preload"</code></a> pour plus d'informations.</p> + </td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>prerender</code> {{experimental_inline}}</td> + <td>Ce type de lien suggère au navigateur de récupérer la ressource liée en avance et de préparer son rendu hors de l'écran afin qu'elle puisse être présentée rapidement à l'utilisateur lorsqu'elle sera nécessaire.</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>prev</code></td> + <td>Ce type indique que l'hyperlien mène à la ressource précédente dans la série de ressources à laquelle appartient la page actuelle.<br> + <br> + <strong>Note :</strong> les autres types de lien permettant une navigation séquentielle sont : <code>first</code>, next, <code>last</code> (pour respectivement la première, la suivante et la dernière).<br> + <br> + Bien que la valeur <code>previous</code> soit reconnue comme synonyme, elle est incorrecte et ne doit pas être utilisée.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}, {{HTMLElement("form")}}</td> + <td><em>Aucun</em>.</td> + </tr> + <tr> + <td><code>search</code></td> + <td>Ce type de lien indique que l'hyperlien cible un document dont l'interface est destinée à la recherche sur ce document, sur ce site ou sur les ressources associées.<br> + <br> + Si l'attribut {{htmlattrxref("type","link")}} vaut <code>application/opensearchdescription+xml</code>, la ressource est <a href="/fr/Add-ons/Creating_OpenSearch_plugins_for_Firefox">un plugin OpenSearch</a> qui peut facilement être ajouté à l'interface de certains navigateurs comme Firefox ou Internet Explorer.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}, {{HTMLElement("form")}}</td> + <td><em>Aucun</em>.</td> + </tr> + <tr> + <td><code>sidebar</code> {{non-standard_inline}}</td> + <td>Ce type indique que l'hyperlien mène vers une ressource qui serait plus pertinente au sein d'un contexte de navigation secondaire tel qu'une barre latérale. Les navigateurs qui ne possèdent pas de tel contexte ignoreront ce mot-clé.<br> + <br> + Bien que ce type de lien ait fait partie de la spécification HTML, il a été retiré de la spécification et est uniquement implémenté par Firefox pour les versions antérieures à Firefox 63.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td>{{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>stylesheet</code></td> + <td>Ce type de lien définit une ressource externe qui doit être utilisée comme une feuille de style. Si le type de la ressource n'est pas défini, le navigateur considèrera que c'est une feuille de style <code>text/css</code>.<br> + <br> + Utilisé avec le mot-clé <code>alternate</code>, il permet de définir <a href="/fr/docs/Web/CSS/Feuilles_de_style_alternatives">une feuille de style alternative</a> auquel cas l'atttribut {{htmlattrxref("title", "link")}} doit être présent et ne doit pas être la chaîne vide.</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>tag</code></td> + <td>Ce type indique que l'hyperlien fait référence à un document qui décrit l'étiquette (le <em>tag</em>) appliquée à ce document.<br> + <br> + <strong>Note :</strong> ce type de lien ne doit pas être utilisé pour renvoyer vers un nuage de <em>tags</em> car ce dernier concerne un ensemble de pages et pas uniquement le document courant.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + <td>{{HTMLElement("link")}}, {{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>up</code> {{obsolete_inline}}</td> + <td>Ce type de lien indique que la page fait partie d'une structure hiérarchique et que l'hyperlien mène vers une ressource située au niveau supérieur de cette structure.<br> + <br> + Le nombre de <code>up</code> indique la différence de profondeur dans la hiérarchie entre la page courante et la page associée.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td>{{HTMLElement("form")}}</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('Preload','#x2.link-type-preload','preload')}}</td> + <td>{{Spec2('Preload')}}</td> + <td>Ajout du type <code>preload</code>.</td> + </tr> + <tr> + <td>{{SpecName('Resource Hints', '#dfn-preconnect', 'preconnect')}}</td> + <td>{{Spec2('Resource Hints')}}</td> + <td>Ajout des types <code>dns-prefetch</code>, <code>preconnect</code> et <code>prerender</code>.</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "links.html#linkTypes", "link types")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Ajout de <code>opener</code>. <code>noopener</code> devient le comportement par défaut pour les liens avec <code>target="_blank"</code>.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "links.html#linkTypes", "link types")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Ajout de <code>tag</code>, <code>search</code>, <code>prefetch</code>, <code>noreferrer</code>, <code>nofollow</code>, <code>icon</code> et <code>author</code>.<br> + Renommage de <code>copyright</code> en <code>license</code>.<br> + Suppression de <code>start</code>, <code>chapter</code>, <code>section</code>, <code>subsection</code> et <code>appendix</code></td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "types.html#type-links", "link types")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Ajout de <code>alternate</code>, <code>stylesheet</code>, <code>start</code>, <code>chapter</code>, <code>section</code>, <code>subsection</code>, <code>appendix</code> et <code>bookmark</code>.<br> + Renomme <code>previous</code> en <code>prev</code>.<br> + Suppression de <code>top</code> et <code>search</code>.</td> + </tr> + <tr> + <td>{{SpecName("HTML3.2", "#link", "<link>")}}</td> + <td>Obsolète</td> + <td>Ajout de <code>top</code>, <code>contents</code>, <code>index</code>, <code>glossary</code>, <code>copyright</code>, <code>next</code>, <code>previous</code>, <code>help</code> et <code>search</code>.</td> + </tr> + <tr> + <td>{{RFC(1866, "HTML 2.0")}}</td> + <td>Obsolète</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.link.rel")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("link")}}</li> + <li>{{HTMLElement("a")}}</li> + <li>{{HTMLElement("area")}}</li> +</ul> diff --git a/files/fr/web/html/utilisation_d'audio_et_video_en_html5/index.html b/files/fr/web/html/utilisation_d'audio_et_video_en_html5/index.html new file mode 100644 index 0000000000..5d9210f67c --- /dev/null +++ b/files/fr/web/html/utilisation_d'audio_et_video_en_html5/index.html @@ -0,0 +1,244 @@ +--- +title: Utilisation d'audio et video en HTML5 +slug: Web/HTML/Utilisation_d'audio_et_video_en_HTML5 +tags: + - Aperçu + - Featured + - Guide + - HTML + - HTML5 + - Media + - Web +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +--- +<p>{{ gecko_minversion_header("1.9.1") }}</p> + +<p>La gestion des éléments HTML 5 <a class="internal" href="/fr/HTML/Element/Audio" title="fr/HTML/Element/Audio"><code>audio</code></a> et <a class="internal" href="/Fr/HTML/Element/Video" title="fr/HTML/Element/Video"><code>video</code></a> a été introduite dans Firefox 3.5, ce qui permet d'intégrer facilement des médias dans des documents HTML. Actuellement, les formats de média Ogg Theora, Ogg Vorbis et WAV sont gérés.</p> + +<h2 id="Intégration_de_médias">Intégration de médias</h2> + +<p>Il est trivial d'intégrer des médias dans vos documents HTML :</p> + +<pre class="brush: html"><video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls> + Votre navigateur ne gère pas l'élément <code>video</code>. +</video> +</pre> + +<p>Cet exemple jouera une vidéo exemple du site web de Theora.</p> + +<p>Plusieurs fichiers sources peuvent être référencés à l'aide de l'élément <a class="internal" href="/fr/HTML/Element/Source" title="fr/HTML/Element/Source"><code>source</code></a> afin de fournir des vidéos/extraits audio encodés dans différents formats pour différents navigateurs. Par exemple,</p> + +<pre class="brush: html"><video controls> + <source src="foo.ogg" type="video/ogg"> + <source src="foo.mp4"> + Votre navigateur ne gère pas l'élément <code>video</code>. +</video> +</pre> + +<p>jouera le fichier Ogg dans les navigateurs gérant ce format. Si ce n'est pas le cas, il essaiera de jouer le fichier MPEG-4.</p> + +<p>Il est également possible d'indiquer les codecs dont le fichier média a besoin ; cela permet au navigateur de prendre de meilleurs décisions :</p> + +<pre class="brush: html"><video controls> + <source src="foo.ogg" type="video/ogg; codecs=&quot;dirac, speex&quot;"> + Votre navigateur ne gère pas l'élément <code>video</code>. +</video></pre> + +<p>Ici, on indique que la vidéo utilise les codecs Dirac et Speex. Si le navigateur gère les médias Ogg, mais pas les codecs spécifiés, la vidéo ne se chargera pas.</p> + +<p>Si l'attribut <code>type</code> n'est pas spécifié le type du média est récupéré depuis le serveur et vérifié pour voir s'il est géré par Gecko ; s'il n'est pas utilisable, l'élément <code>source</code> suivant est vérifié. Si aucun des éléments <code>source</code> ne peut être utilisé, un évènement <code>error</code> est transmis à l'élément <code>video</code>. Si l'attribut <code>type</code> est spécifié, il est comparé avec ceux qui peuvent être joués ; s'il n'est pas reconnu, le serveur n'est même pas interrogé, et on passe directement à la vérification de l'élément <code>source</code> suivant.</p> + +<p> </p> + +<h2 id="Contrôle_de_la_lecture">Contrôle de la lecture</h2> + +<p>Une fois le média intégré dans votre document HTML à l'aide de ces nouveaux éléments, vous pouvez les contrôler programmatiquement depuis du code JavaScript. Par exemple, pour démarrer (ou redémarrer) la lecture, vous pouvez faire ceci :</p> + +<pre class="brush: js">var v = document.getElementsByTagName("video")[0]; +v.play(); +</pre> + +<p>La première ligne récupère le premier élément video dans le document, et la seconde appelle la méthode <a class="external" href="/fr/NsIDOMHTMLMediaElement#play()" title="https://developer.mozilla.org/editor/fckeditor/core/editor/fr/NsIDOMHTMLMediaElement#play()"><code>play()</code></a> de l'élément, telle que définie dans l'interface {{ interface("nsIDOMHTMLMediaElement") }} utilisée pour implémenter les éléments de médias.</p> + +<h2 id="Évènements_des_médias">Évènements des médias</h2> + +<p>Différents évènements sont envoyés lors du traitement de médias :</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Nom de l'évènement</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>abort</code></td> + <td>Envoyé lorsque la lecture est annulée ; par exemple il sera envoyé si le média est en cours de lecture et redémarré depuis le début.</td> + </tr> + <tr> + <td><code>canplay</code></td> + <td>Envoyé lorsque suffisamment de données sont disponibles pour débuter la lecture du média, au moins pour quelques premières images. Il correspond à la valeur <code>CAN_PLAY</code> de <code>readyState</code>.</td> + </tr> + <tr> + <td><code>canplaythrough</code></td> + <td>Envoyé lorsque l'état devient <code>CAN_PLAY_THROUGH</code>, ce qui indique que le média peut être entièrement lu sans interruption, en supposant que la vitesse de téléchargement reste au niveau actuel.</td> + </tr> + <tr> + <td><code>canshowcurrentframe</code></td> + <td>L'image courante est chargée et peut être présentée. Ceci correspond à la valeur <code>CAN_SHOW_CURRENT_FRAME</code> de <code>readyState</code>.</td> + </tr> + <tr> + <td><code>dataunavailable</code></td> + <td>Envoyé lorsque l'état devient <code>DATA_UNAVAILABLE</code>.</td> + </tr> + <tr> + <td><code>durationchange</code></td> + <td>Les métadonnées ont été chargées ou modifiées, ce qui indique un changement dans la durée du média. Sera par exemple envoyé lorsque le média est suffisamment chargé pour que sa durée soit connue.</td> + </tr> + <tr> + <td><code>emptied</code></td> + <td>Le média est devenu vide ; par exemple si le média est déjà chargé (ou partiellement chargé) et qu'on appelle la méthode <a class="internal" href="/fr/nsIDOMMediaHTMLElement#load()" title="fr/nsIDOMMediaHTMLElement#load()"><code>load()</code></a> pour le recharger.</td> + </tr> + <tr> + <td><code>empty</code></td> + <td>Envoyé lorsqu'une erreur survient et que le média est vide.</td> + </tr> + <tr> + <td><code>ended</code></td> + <td>Envoyé lorsque la lecture se termine.</td> + </tr> + <tr> + <td><code>error</code></td> + <td>Envoyé lorsqu'une erreur se produit. L'attribut <code>error</code> de l'élément contient plus d'informations.</td> + </tr> + <tr> + <td><code>loadedfirstframe</code></td> + <td>La première image du média a été chargée.</td> + </tr> + <tr> + <td><code>loadedmetadata</code></td> + <td>Les métadonnées du média ont été chargées ; tous les attributs contiennent autant d'informations que possible.</td> + </tr> + <tr> + <td><code>loadstart</code></td> + <td>Envoyé lorsque le chargement du média débute.</td> + </tr> + <tr> + <td><code>pause</code></td> + <td>Envoyé lorsque la lecture est interrompue.</td> + </tr> + <tr> + <td><code>play</code></td> + <td>Envoyé lorsque la lecture débute ou reprend.</td> + </tr> + <tr> + <td><code>progress</code></td> + <td> + <p>Envoyé périodiquement pour informer les parties intéressées de la progression du téléchargement du média. L'évènement progress dispose de trois attributs :</p> + + <dl> + <dt><code>lengthComputable</code></dt> + <dd>vaut <code>true</code> si la taille totale du média est connue, <code>false</code> sinon.</dd> + <dt><code>loaded</code></dt> + <dd>Le nombre d'octets du fichier de média qui ont été reçus jusqu'à présent.</dd> + <dt><code>total</code></dt> + <dd>Le nombre total d'octets dans le fichier de média.</dd> + </dl> + </td> + </tr> + <tr> + <td><code>ratechange</code></td> + <td>Envoyé lorsque la vitesse de lecture change.</td> + </tr> + <tr> + <td><code>seeked</code></td> + <td>Envoyé lorsqu'une opération de positionnement est effectuée.</td> + </tr> + <tr> + <td><code>seeking</code></td> + <td>Envoyé lorsqu'une opération de positionnement débute.</td> + </tr> + <tr> + <td><code>suspend</code> {{ gecko_minversion_inline("1.9.2") }}</td> + <td>Envoyé lorsque le chargement du média est interrompu ; cela peut arriver parce que le téléchargement est terminé ou parce qu'il a été mis en pause pour toute autre raison.</td> + </tr> + <tr> + <td><code>timeupdate</code></td> + <td>Le temps indiqué par l'attribut <code>currentTime</code> de l'élément a été modifié.</td> + </tr> + <tr> + <td><code>volumechange</code></td> + <td>Envoyé lorsque le volume audio est modifié (qu'il s'agisse d'une modification du volume ou d'un changement de l'attribut <code>muted</code>).</td> + </tr> + <tr> + <td><code>waiting</code></td> + <td>Envoyé lorsque l'opération demandée (comme une lecture) est retardée en attendant la fin d'une autre opération (comme un positionnement).</td> + </tr> + </tbody> +</table> + +<p>{{ gecko_minversion_note("1.9.2", "L'ancien évènement <code>load</code> a été retiré de Gecko 1.9.2, il n'était pas déclenché quand il fallait et ne doit pas être utilisé.") }}</p> + +<p>Ces évènements peuvent facilement être interceptés à l'aide ce ce genre de code :</p> + +<pre>var v = document.getElementsByTagName("video")[0]; + +v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true); +v.currentTime = 10.0; +</pre> + +<p>Cet exemple récupère le premier élément vidéo du document et lui attache un écouteur d'évènement, vérifiant l'évènement seeked qui est envoyé lorsqu'une opération de positionnement se termine. La fonction appelle simplement la méthode <code>play()</code> de l'élément, qui lance la lecture.</p> + +<p>Ensuite, à la ligne 4, cet exemple positionne l'attribut <code>currentTime</code> de l'élément à 10.0, ce qui lance une opération de positionnement à la dixième seconde du média. Cela déclenche l'envoi d'un évènement <code>seeking</code> au début de l'opération, ensuite d'un évènement <code>seeked</code> lorsque le positionnement est terminé.</p> + +<p>Autrement dit, l'exemple se positionne à dix secondes du début du média, puis commence la lecture dès que c'est fait.</p> + +<h2 id="Options_de_rechange">Options de rechange</h2> + +<p>Le code HTML fourni entre les balises, par exemple <code><video></code> et <code></video></code>, est utilisé par les navigateurs ne gérant pas les médias HTML 5. Vous pouvez tirer parti de cela pour fournir un contenu alternatif de rechange pour ces navigateurs.</p> + +<p>Cette section propose deux options de rechange possibles pour la vidéo. Dans les deux cas, si le navigateur gère la vidéo HTML 5, c'est celle-ci qui sera utilisée.</p> + +<h3 id="Utilisation_de_Flash">Utilisation de Flash</h3> + +<p>Vous pouvez utiliser Flash pour lire une vidéo Flash si l'élément <code>video</code> n'est pas géré :</p> + +<pre class="brush: html"><video src="video.ogv" controls> + <object data="flvplayer.swf" type="application/x-shockwave-flash"> + <param value="flvplayer.swf" name="movie"/> + </object> +</video> +</pre> + +<p>Notez qu'il ne faut pas mettre d'attribut <code>classid</code> à la balise <code>object</code> afin de rester compatible avec les autres navigateurs qu'Internet Explorer.</p> + +<h3 id="Lecture_de_vidéos_Ogg_dans_une_applet_Java">Lecture de vidéos Ogg dans une applet Java</h3> + +<p>Une applet Java appelée <a class="external" href="http://maikmerten.livejournal.com/2256.html" title="http://maikmerten.livejournal.com/2256.html">Cortado</a> peut-être utilisée pour lire les vidéos Ogg dans les navigateurs ne pouvant pas lire les vidéos HTML 5 mais où Java est géré :</p> + +<pre class="brush: html"><video src="my_ogg_video.ogg" controls width="320" height="240"> + <object type="application/x-java-applet" + width="320" height="240"> + <param name="archive" value="cortado.jar"> + <param name="code" value="com.fluendo.player.Cortado.class"> + <param name="url" value="my_ogg_video.ogg"> + <p>You need to install Java to play this file.</p> + </object> +</video> +</pre> + +<p>Si vous ne créez pas d'élément enfant de l'objet cortado comme l'élément <p> dans l'exemple ci-dessus, les installations de Firefox 3.5 qui gèrent la vidéo nativement mais où Java n'est pas installé informeront incorrectement l'utilisateur qu'il doit installer un plugin pour lire le contenu de la page.</p> + +<h2 id="Voir_également">Voir également</h2> + +<ul> + <li><a class="internal" href="/fr/HTML/Element/Audio" title="fr/HTML/Element/Audio"><code>audio</code></a></li> + <li><a class="internal" href="/Fr/HTML/Element/Video" title="fr/HTML/Element/Video"><code>video</code></a></li> + <li><a class="internal" href="/fr/HTML/Element/Source" title="fr/HTML/Element/Source"><code>source</code></a></li> + <li><a class="internal" href="/fr/Manipulation_de_vidéos_avec_canvas" title="fr/Manipulation de vidéos avec canvas"><code>Manipulation de vidéos avec canvas</code></a></li> + <li>{{ interface("nsIDOMHTMLMediaElement") }}</li> + <li><a class="internal" href="/fr/docs/Web/HTML/formats_media_support" title="fr/Formats de médias gérés par les éléments audio et video"><code>Formats de médias gérés par les éléments audio et video</code></a></li> +</ul> + +<p> {{ languages( { "en": "en/Using_audio_and_video_in_Firefox" } ) }}</p> + +<p> {{ languages( { "es": "es/Etiquetas audio y video en Firefox" } ) }}</p> diff --git a/files/fr/web/html/utiliser_application_cache/index.html b/files/fr/web/html/utiliser_application_cache/index.html new file mode 100644 index 0000000000..ccc78772a8 --- /dev/null +++ b/files/fr/web/html/utiliser_application_cache/index.html @@ -0,0 +1,338 @@ +--- +title: Utiliser Application Cache +slug: Web/HTML/Utiliser_Application_Cache +tags: + - Avancé + - Cache + - Déprécié + - Guide + - HTML + - appcache +translation_of: Web/HTML/Using_the_application_cache +--- +<div>{{DefaultAPISidebar("App Cache")}}{{securecontext_header}}{{deprecated_header}}</div> + +<div class="warning"> +<p><strong>Attention !</strong> L'utilisation de la fonction de <em>mise en cache d'application</em> décrite ici est actuellement fortement déconseillée; cette fonctionnalité est <a href="https://html.spec.whatwg.org/multipage/browsers.html#offline">en train d' être retiré de la plate-forme Web</a>. Utiliser <a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service Workers</a> à la place. En fait, à partir de Firefox 44, quand l'<a href="/fr/docs/Web/HTML/Using_the_application_cache">application cache</a> est utilisé pour fournir une aide hors ligne pour une page, un message d'avertissement est maintenant affiché dans la console conseillant aux développeurs d'utiliser <a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service workers</a> à la place ({{bug("1204581")}}).</p> +</div> + +<h2 id="Introduction">Introduction</h2> + +<p><a href="/fr/docs/Web/Guide/HTML/HTML5">HTML5</a> supporte la mise en cache hors-ligne de ressources d'applications web; les fichiers sont stockés dans<strong> l'Application Cache </strong><em>(AppCache)</em> - une collection de ressources obtenues depuis un fichier <strong>manifest</strong> (<code>*.appcache</code>) inclue dans une application web.</p> + +<p>L'utilisation d'une application cache permet les bénéfices suivants :</p> + +<ul> + <li>Navigation hors-ligne : les utilisateurs peuvent utiliser un site même s'ils ne sont pas connectés.</li> + <li>Vitesse : les ressources mises en cache sont locales, et se chargent donc plus rapidement.</li> + <li>Réduction de la charge serveur : le navigateur ne télécharge uniquement les ressources qui ont changées sur le serveur.</li> +</ul> + +<div> +<h2 id="Comment_fonctionne_AppCache">Comment fonctionne AppCache</h2> + +<h3 id="Activer_AppCache">Activer AppCache</h3> + +<p>Vous devez, pour utiliser le cache d'application, utiliser l'attribut <code><a href="/fr/docs/Web/HTML/Element/html#attr-manifest">manifest</a> </code>dans l'élément <code><html> </code>comme suit :</p> + +<pre class="brush: html notranslate"><html manifest="example.appcache"> + ... +</html></pre> + +<p>L'attribut <code>manifest</code> spécifie l'URI d'un <strong>manifeste de cache</strong>, qui est un fichier texte qui répertorie les ressources (fichiers) que le navigateur doit mettre en cache pour votre application.</p> + +<p>Vous devez inclure l'attribut <code>manifest</code> sur chaque page de votre application que vous souhaitez mettre en cache. Le navigateur met pas en cache les pages qui ne contiennent pas l'attribut <code>manifest</code>, sauf si celle-ci sont explicitement mentionnées dans le manifeste même. Vous ne devez pas lister toutes les pages que vous souhaitez mettre en cache dans le fichier manifeste, le navigateur ajoute implicitement chaque page que l'utilisateur visite et qui possède l'attribut <code>manifest</code> réglé sur le cache de l'application.</p> + +<p>Certains navigateurs dont Firefox vont avertir l'utilisateur la première fois que celui-ci charge votre application par une notification :</p> + +<p>« Ce site internet (<code>www.example.com</code>) veut stocker des données sur votre ordinateur pour une utilisation hors-ligne. [Accepter] [Refuser pour ce site] [Pas maintenant] ».</p> + +<p>Le terme « d'applications (fonctionnant) hors-ligne » est parfois utilisé pour désigner les applications que l'utilisateur a autorisé à travailler hors-ligne.</p> + +<h3 id="Chargement_des_documents">Chargement des documents</h3> + +<p>L'utilisation d'un cache de l'application modifie le processus normal de chargement d'un document :</p> + +<ul> + <li>Si un cache de l'application existe, le navigateur charge le document et ses ressources associées directement à partir de la mémoire cache, sans accéder au réseau. Cela accélère le temps de chargement du document.</li> + <li>Le navigateur vérifie ensuite si le manifeste de cache a été mis à jour sur le serveur.</li> + <li>Si le manifeste de cache a été mis à jour, le navigateur télécharge une nouvelle version du manifeste et les ressources figurant dans ce dernier. Cela se fait en arrière-plan et n'affecte pas les performances de manière significative.</li> +</ul> + +<p>Le procédé de chargement de documents et mise à jour du cache de l'application est définie de manière plus détaillée ci-dessous:</p> + +<ol> + <li>Quand le navigateur visite un document qui contient l'attribut <code>manifest </code>et qu'il n'existe pas encore de cache d'application, il chargera le document puis récupérera toutes les entrées listées dans le manifeste, créant ainsi la première version du cache d'application.</li> + <li>Lors des visites ultérieures de ce document, le navigateur chargera le document et les autres ressources précisées dans le manifeste à partir du cache d'application — et non du serveur. De plus, le navigateur enverra aussi un évènement <code>checking </code>à l'objet <a href="/fr/docs/Web/API/Window/applicationCache"><code>window.applicationCache</code></a>, puis récupère le manifeste en fonction de la règle de cache HTTP adéquate.</li> + <li>Si la version en cache du manifeste est à jour, l'évènement <code>noupdate </code>est envoyé a l'<code>applicationCache</code>, et le processus de mise à jour est terminé. C'est la raison pour laquelle vous devez changer le manifeste chaque fois que vous mettez à jour les ressources sur le serveur, afin que le navigateur sache qu'il doit de nouveau récupérer les ressources.</li> + <li>Si le manifeste <em>a changé</em>, tous les fichiers dans le manifeste (dont ceux ajoutés au cache lors de l'appel à <a href="/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMOfflineResourceList#add.28.29"><code>applicationCache.add()</code></a>) sont récupérés dans un cache temporaire, en fonction des règles de cache HTTP adéquates. Un évènement <code>progress </code>est envoyé à l'objet <code>applicationCache </code>chaque fois qu'un fichier est récupéré dans le cache temporaire. Un évènement <code>error </code>est envoyé à chaque erreur, et la mise à jour s'arrête.</li> + <li>Une fois tous les fichiers récupérés en bonne et due forme, ils sont transférés dans le véritable cache hors-ligne un par un, et un évènement <code>cached </code>est envoyé à l'objet <code>applicationCache</code>. Le document étant déjà chargé dans le navigateur depuis le cache, le document mis à jour ne sera pas ré-affiché tant que celui-ci n'est pas chargé à nouveau (que ce soit manuellement ou via un programme).</li> +</ol> + +<h2 id="Emplacement_du_stockage_et_effacement_du_cache_hors-ligne">Emplacement du stockage et effacement du cache hors-ligne</h2> + +<p>Dans Chrome, le cache hors-ligne peut être effacé grâce au bouton "Effacer les données de navigation..." dans les préférences, ou en ouvrant <code>chrome://appcache-internals/</code>. Safari a un paramètre "Vider le cache" dans ses préférences, mais il est possible que le redémarrage du navigateur soit nécessaire.</p> + +<p>Dans Firefox, les données de cache hors-ligne sont stockées séparément du profil Firefox—à côté du cache disque normal :</p> + +<ul> + <li>Windows Vista/7: <code>C:\Users\<username>\AppData\<strong>Local</strong>\Mozilla\Firefox\Profiles\<salt>.<profile name>\OfflineCache</code></li> + <li>Mac/Linux: <code>/Users/<username>/Library/Caches/Firefox/Profiles/<salt>.<profile name>/OfflineCache</code></li> +</ul> + +<p>Dans Firefox l'état actuel du cache hors-ligne est consultable sur la page <code>about:cache</code> (dans la section "Offline cache device"). Le cache hors-ligne peut être effacé pour chaque site individuellement à l'aide du boutton "Supprimer..." dans Menu -> Options -> Avancé -> Réseau -> Contenu web et données utilisateur hors connexion.</p> + +<p>Avant Firefox 11, ni Tools -> Clear Recent History ni Tools -> Options -> Advanced -> Network -> Offline data -> Clear Now ne permettaient d'effacer le cache hors-ligne. Ceci a été corrigé.</p> + +<p>Voir aussi <a href="/fr/docs/DOM/Storage#Storage_location_and_clearing_the_data">effacer les données de stockage DOM</a>.</p> + +<p>Les caches d'application peuvent aussi devenir obsolètes. Si le manifeste d'une application est retiré du serveur, le navigateur efface toutes les données cachées utilisant ce manifeste, et déclenche un event "obsoleted" à l'objet <code>applicationCache</code>. Le statut du cache de l'application est alors <code>OBSOLETE</code>.</p> + +<h2 id="Le_manifeste_du_cache">Le manifeste du cache</h2> + +<h3 id="Référencement_dun_fichier_de_manifeste_de_cache">Référencement d'un fichier de manifeste de cache</h3> + +<p>L'attribut <code>manifest</code> dans une application web peut spécifier le chemin relatif d'un manifeste de cache ou une URL absolue. (Les URL absolues doivent être de la même origine que l'application). Le manifeste du cache peut avoir une extension de fichier, mais il doit être servi avec le MIME type <code>text/cache-manifest</code>.</p> + +<div class="note"><strong>Note: </strong>Sur les serveurs Apache, le MIME type pour les fichiers manifest (.appcache) peut être défini par l'ajout de <code>AddType text/cache-manifest .appcache</code> à un fichier a .htaccess soit à l'intérieur du répertoire racine, soit le même répertoire que l'application.</div> + +<h3 id="Les_entrées_dans_un_manifeste_de_cache">Les entrées dans un manifeste de cache</h3> + +<p>Le fichier manifest de cache est un simple fichier de texte qui liste les ressources que le navigateur doit cache pour l'accès hors ligne. Les ressources sont identifiées par URI. Les entrées listées dans le manifeste de cache doivent avoir le même plan, hôte, et port comme un manifest.</p> + +<h3 id="Example_1_Un_fichier_manifeste_simple">Example 1: Un fichier manifeste simple</h3> + +<p>Ci-dessous, un exemple simple de manifeste — <code>example.appcache</code> utilisé par le site imaginaire www.example.com:</p> + +<pre class="notranslate">CACHE MANIFEST +# v1 - 2011-08-13 +# Ceci est un commentaire. +https://www.example.com/index.html +https://www.example.com/header.png +https://www.example.com/blah/blah +</pre> + +<p>Il n'y a pas, dans cet exemple, d'en-tête de section, donc toutes les lignes sont supposées être des sections (<code>CACHE:</code>) explicites. On peut aussi utiliser des URL relatives (<code>index.html</code>, …)</p> + +<p>Le commentaire « v1 » n'est pas là par hasard : le cache n'est mis à jour que quand le manifeste change, avec une correspondance d'octet à octet. Si vous utilisez d'autres ressources (par exemple en mettant à jour le contenu de l'image <code>header.png</code>), vous devez changer le manifeste pour signaller au navigateur qu'il doit rafraîchir le cache, et, comme <code>header.png</code> est déjà présent dans le cache, vous devez modifier quelquechose d'autre. Bien que vous puissiez changer n'importe quoi d'autre dans le manifest, utiliser un numéro de version est une bonne pratique conseillée.</p> + +<div class="warning"><strong>Important:</strong> N'utilisez pas le manifeste lui-même dans le fichier de manifeste : il vous serait alors quasiment impossible d'informer le navigateur lors de la mise à jour du manifeste.</div> + +<h3 id="Des_sections_dans_un_manifeste_de_cache_CACHE_NETWORK_et_FALLBACK">Des sections dans un manifeste de cache: <code>CACHE</code>, <code>NETWORK</code>, et <code>FALLBACK</code></h3> + +<p>Un manifeste peut avoir trois sections distinctes: <code>CACHE</code>, <code>NETWORK</code>, et <code>FALLBACK</code>.</p> + +<dl> + <dt><code>CACHE:</code></dt> + <dd>Ceci est la section par défaut pour les entrées dans un manifeste de cache. Les fichiers sont répertoriés sous le CACHE: l'en-tête de section (ou immédiatement après la ligne MANIFESTE CACHE) est explicitement mis en cache après qu'il ait été téléchargé pour la première fois.</dd> + <dt><code>NETWORK:</code></dt> + <dd>Les fichiers répertoriés dans le NETWORK: l'en-tête de section dans le fichier manifeste de cache est une ressource de la liste blanche qui nécessite une connexion au serveur. Toutes les demandes à cette ressource contournent le cache, même si l'utilisateur est déconnecté. Le caractère générique * peut être utilisé qu'une seule fois. La plupart des sites en ont besoin *.</dd> + <dt><code>FALLBACK:</code></dt> + <dd>Le <code>FALLBACK:</code> section qui spécifie les pages de repli que le navigateur doit utiliser si une ressource est inaccessible. Chaque entrée dans cette section répertorie deux URIs (le premier est la ressource, le second est le repli). Les deux URIs doivent être relatif et de la même origine que le fichier manifeste. Les Wildcards peuvent être utilisés.</dd> +</dl> + +<p>Les sections <code>CACHE</code>, <code>NETWORK</code>, et FALLBACK peuvent être listés dans n'importe quel ordre dans un manifeste de cache, et chaque section peut apparaître plus qu'une fois dans un simple manifeste.</p> + +<h3 id="Example_2_Un_manifeste_de_cache_plus_complet">Example 2 : Un manifeste de cache plus complet</h3> + +<p>Voici un exemple plus complet de manifeste pour notre site imaginaire www.example.com.</p> + +<pre class="notranslate">CACHE MANIFEST +# v1 2011-08-14 +# Ceci est un autre commentaire +index.html +cache.html +style.css +image1.png + +# Contenu Fallback +FALLBACK: +. fallback.html + +# L'utilise depuis le network (réseau) si il est disponible +NETWORK: +network.html</pre> + +<p>Nous utilisons dans cet exemple les sections <code>FALLBACK </code>et <code>NETWORK</code> pour préciser que la page <code>network.html</code> doit toujours être récupérée depuis le réseau et que la page <code>fallback.html</code> doit être utilisée comme ressource de secours, par exemple si la connexion au serveur ne peut être établie.</p> + +<h3 id="Structure_dun_manifeste">Structure d'un manifeste</h3> + +<p>Les manifestes doivent être servis avec le type MIME <code>text/cache-manifest</code>, et toutes les ressources servies en utilisant ce type MIME doivent respecter la syntaxe d'un manifeste, comme défini ici.</p> + +<p>Les manifestes sont des fichiers textes au format UTF-8 et peuvent, éventuellement, inclure un caractère BOM. Les nouvelles lignes peuvent être représentés par saut de ligne (<code>U+000A</code>), retour chariot (<code>U+000D</code>), ou les deux.</p> + +<p>La première ligne du manifeste doit être la chaine <code>CACHE MANIFEST</code> (séparé par un simple espace <code>U+0020</code>), suivi par aucun ou plusieurs espaces ou tabulations. Tout autre texte sur la ligne sera ignoré.</p> + +<p>Le reste du manifeste peut contenir 0 ou plusieurs lignes :</p> + +<dl> + <dt>Lines vides</dt> + <dd>Vous pouvez utiliser les lignes vides comprenant 0 ou plusieurs espaces ou tabulations.</dd> + <dt>Commentaire</dt> + <dd>Les commentaires consistent en 0 ou plusieurs espaces ou tabulations suivis du caractère <code>#</code>, suivi de 0 ou plusieurs caractères de texte. Les commentaires devraient être utilisés seulement sur leur propre ligne, et ne devrait pas être ajoutés à d'autres lignes. Cela signifie également que vous ne pouvez pas spécifier les identifiants de fragments.</dd> + <dt>Section de tête</dt> + <dd>La <code>section header</code> précise la section du cache qui est manipulée. Il en existe trois types:</dd> +</dl> + +<blockquote> +<table class="standard-table" style="height: 130px; width: 535px;"> + <tbody> + <tr> + <th>Section header</th> + <th>Description</th> + </tr> + <tr> + <td><code>CACHE:</code></td> + <td>Passe à la section explicite. C'est la section par défaut.</td> + </tr> + <tr> + <td><code>NETWORK:</code></td> + <td>Passe à la section des sections en ligne sur la liste blanche.</td> + </tr> + <tr> + <td><code>FALLBACK:</code></td> + <td>Passe à la section de secours.</td> + </tr> + </tbody> +</table> +</blockquote> + +<dl> + <dd>La ligne d'en-tête de section peut contenir des espaces, mais doit inclure un « : » dans le nom de la section.</dd> + <dt>Section data</dt> + <dd>Le format des lignes de données varie selon les sections. Dans la section explicite (<code>CACHE:</code>) chaque ligne contient une référence URI ou IRI à une ressource en cache (aucun caractère joker n'est admis dans cette section). Des espaces sont accepté avant et après l'URI on l'IRI sur chaque ligne. Dans la section de secours, chaque ligne est une référence URI ou IRI vers une ressource, suivie d'une ressource de secours qui sera utilisée lorsque la connexion au serveur ne peut être établie. Dans la section en ligne, chaque ligne est une référence valide URI ou IRI à une ressource qui sera récupérée sur le réseau (le caractère joker « * » est autorisé dans cette section). + <div class="note"><strong>Note: </strong>Les URI relatives pointent vers les URI du manifeste, et non vers les URI du document qui référence le manifeste.</div> + </dd> +</dl> + +<p>Le manifeste peut passer à l'envie d'une section à l'autre (chaque en-tête de section peut être utilisée plusieurs fois), et les sections vides sont tolérées.</p> + +<h2 id="Les_ressources_dans_AppCache">Les ressources dans AppCache</h2> + +<p>Le cache inclue toujours au moins une ressource, identifiée par URI. Toutes les ressources répondent à une des catégories suivantes :</p> + +<dl> + <dt>Entrées Maitres</dt> + <dd>Il s'agit de ressources ajoutées au cache parce qu'un contexte de navigation visité par l'utilisateur incluait un document qui indiquait que ces ressources étaient dans le cache en utilisant son attribut <code>manifest</code>.</dd> + <dt>Entrées Explicites</dt> + <dd>Il s'agit de ressources listées dans le manifeste du cache.</dd> + <dt>Entrées Network</dt> + <dd>Il s'agit de ressources listées dans le manifeste du cache comme entrées de network.</dd> + <dt>Entrées Fallback</dt> + <dd>Il s'agit de ressources listées dans le manifeste du cache comme entrées de fallback. {{fx_minversion_inline("3")}}</dd> +</dl> + +<div class="note"><strong>Note : </strong>Les ressources peuvent être marquées dans plusieurs catégories, et peuvent donc être catégorisées comme des entrées multiples. Par exemple, une entrée peut être à la fois une entrée explicite et une entrée de fallback.</div> + +<p>Les catégories ressources sont décrites en détail ci-dessous.</p> + +<h3 id="Entrées_Maitres">Entrées Maitres</h3> + +<p>Tous les fichiers HTML peuvent inclure un attribut {{htmlattrxref("manifest","html")}} dans leur élément {{HTMLElement("html")}}. Par exemple, disons que nous avons le fichier <code><a class="linkification-ext external" href="https://www.foo.bar/entry.html">https://www.example.com/entry.html</a></code>, qui ressemble à ça :</p> + +<pre class="brush: html notranslate"><html manifest="example.appcache"> + <h1>Application Cache Example</h1> +</html> +</pre> + +<p>Si <code>entry.html</code> n'est pas inclue dans le manifeste, visiter la page <code>entry.html</code> provoquera l'ajout de la page <code>entry.html</code> dans le cache de l'application comme une master entry.</p> + +<h3 id="Entrées_Explicites">Entrées Explicites</h3> + +<p>Les entrées explicites sont des ressources explicitement listées dans la section <code>CACHE </code>d'un manifeste de cache.</p> + +<h3 id="Entrées_Network">Entrées Network</h3> + +<p>Les entrées listées dans <code>NETWORK :</code> peuvent contenir plusieurs ou aucune ressource que l'application requiert lors d'un accès en ligne. C'est principalement une <em>liste blanche en ligne</em>. Les URIS spécifiées dans la section <code>NETWORK</code> sont chargées depuis le serveur plutôt que depuis le cache. Cela permet au modèle de sécurité du navigateur de protéger l'utilisateur de possibles brèches de sécurité en limitant l'accès aux seules ressources approuvées.</p> + +<div class="note"><strong>Note :</strong> La <em>liste blanche en ligne</em> est ignorée pour les versions de Firefox antérieures à 3.5.</div> + +<p>Vous pouvez l'utiliser pour, par exemple, charger et exécuter des scripts et d'autres codes depuis le serveur au lieu du cache. :</p> + +<pre class="notranslate">CACHE MANIFEST +NETWORK: +/api +</pre> + +<p>Ceci assure que les requêtes téléchargent les ressources contenues dans <code><a class="external" href="https://www.example.com/api/" rel="freelink">https://www.example.com/api/</a></code> viendront toujours du réseau sans essayer d'accéder au cache.</p> + +<div class="note"><strong>Note </strong>: Juste omettre les <em>master entries</em> (les fichiers qui ont l'attribut <code>manifest</code> défini dans l'élément <code>html</code>) dans le manifeste n'aurait pas le même comportement parce que les <em>master entries</em> seront ajoutées — et donc servies depuis— le cache. </div> + +<h3 id="Entrées_Fallback">Entrées Fallback</h3> + +<p>Les entrées de fallback sont utilisées quand une tentative de chargement d'une ressource échoue. Par exemple, imaginons qu'il y a un manifeste situé à <code><a class="external" href="https://www.example.com/example.appcache" rel="freelink">https://www.example.com/example.appcache</a></code>, et qui contient :</p> + +<pre class="notranslate">CACHE MANIFEST +FALLBACK: +example/bar/ example.html +</pre> + +<p>Toute requête vers <code><a class="external" href="https://www.example.com/example/bar/" rel="freelink">https://www.example.com/example/bar/</a></code> ou n'importe lequel de ses sous-répertoires et contenus provoquera une tentative de chargement de la ressource demandée. Si la tentative échoue, soit à cause d'un échec réseau ou d'une erreur serveur quelle qu'elle soit, le contenu du fichier <code>example.html</code> sera chargé à la place.</p> + +<h2 id="Les_états">Les états</h2> + +<p>Chaque cache a un statut qui indique la condition actuelle du cache. Les caches qui partagent la même URI de manifeste partagent le même statut, qui est un des suivants :</p> + +<dl> + <dt><code>UNCACHED</code></dt> + <dd>Une valeur spéciale qui indique qu'un object <em>application cache</em> n'est pas complètement initialisée.</dd> + <dt><code>IDLE</code></dt> + <dd>Le cache n'est pas en cours de mise à jour.</dd> + <dt><code>CHECKING</code></dt> + <dd>Le manifeste est en train d'être contrôlé pour d'éventuelles mises à jour.</dd> + <dt><code>DOWNLOADING</code></dt> + <dd>Des ressources sont en train d'être téléchargées pour être ajoutées au cache, dû à un changement du manifeste.</dd> + <dt><code>UPDATEREADY</code></dt> + <dd>Il y a une nouvelle version du cache disponible. Il y a un évènement <code>updateready</code> correspondant, qui est lancé au lieu de l'évènement <code>cached</code> quand une nouvelle mise à jour a été téléchargée mais pas encore activée via la méthode <code>swapCache()</code>.</dd> + <dt><code>OBSOLETE</code></dt> + <dd>Le groupe de caches est maintenant obsolète.</dd> +</dl> + +<h2 id="Test_pour_les_mises_à_jour_des_manifestes_de_cache">Test pour les mises à jour des manifestes de cache</h2> + +<p>Vous pouvez programmer un test pour voir si une application possède un manifeste de cache à jour en utilisant JavaScript. Depuis un manifeste de cache peut être été mis à jour avant un script qui teste si les événements sont à jour, les scripts doivent toujours tester <code>window.applicationCache.status</code>.</p> + +<pre class="brush: js notranslate">function onUpdateReady() { + console.log('nouvelle version trouvée !'); +} +window.applicationCache.addEventListener('updateready', onUpdateReady); +if(window.applicationCache.status === window.applicationCache.UPDATEREADY) { + onUpdateReady(); +}</pre> + +<p>Pour démarrer manuellement le test pour un nouveau manifeste de cache, vous pouvez utilisez <code>window.applicationCache.update()</code>.</p> + +<h2 id="Pièges">Pièges</h2> + +<ul> + <li>Ne jamais accéder à des fichiers mis en cache à l'aide des paramètres GET traditionnels (comme <code>other-cached-page.html?parameterName=value</code>). Cela rendra le contournement du navigateur du cache et de tenter de l'obtenir à partir du réseau. Pour créer un lien vers les ressources mises en cache qui ont des paramètres analysés dans les paramètres d'utilisation de JavaScript dans la partie de hach de la liaison, comme <code>other-cached-page.html#whatever?parameterName=value</code>.</li> + <li>Lorsque les applications sont mises en cache, mettant simplement à jour les ressources (fichiers) qui sont utilisés dans une page Web mais cela ne suffit pas à mettre à jour les fichiers qui ont été mis en cache. Vous devez mettre à jour le fichier manifeste de cache lui-même avant que le navigateur récupère et utilise les fichiers mis à jour. Vous pouvez le faire par programme<code>window.applicationCache.swapCache()</code>, si les ressources qui ont déjà été chargées ne seront pas affectés. Pour vous assurer que les ressources sont chargées à partir d'une nouvelle version du cache de l'application, rafraîchir la page est idéal.</li> + <li>Il est une bonne idée de mettre des en-têtes expirés sur votre serveur web pour les fichiers * .appcache pour qu'ils expirent immédiatement. Cela évite le risque de mise en cache des fichiers manifestes. Par exemple, dans Apache, vous pouvez spécifier une telle configuration comme suit:<br> + <code>ExpiresByType text/cache-manifest "access plus 0 seconds"</code></li> +</ul> + +<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.html.manifest")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="https://www.html5rocks.com/en/tutorials/appcache/beginner/">HTML5Rocks - A Beginner's Guide to Using the Application Cache</a></li> + <li><a href="https://appcache.offline.technology/">Appcache Facts</a> - detailed information on AppCache idiosyncrasies</li> + <li><a href="https://alistapart.com/article/application-cache-is-a-douchebag">A List Apart: Application Cache is a Douchebag</a> + <ul> + <li><a href="https://flailingmonkey.com/application-cache-not-a-douchebag">The Application Cache is no longer a Douchebag</a> - an overview of the app cache debugging tools added in Firefox 23.</li> + </ul> + </li> + <li><a href="https://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> at hacks.mozilla.org - showcases an offline app demo and explains how it works.</li> + <li><a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline">HTML 5 working draft: Offline web applications</a></li> + <li><a href="https://www.w3.org/TR/offline-webapps/">W3C Working Group Note: Offline Web Applications</a></li> + <li><a href="https://developer.teradata.com/blog/js186040/2011/11/html5-cache-manifest-an-off-label-usage">HTML5 Cache Manifest: An Off-label Usage</a></li> + <li><a href="https://www.ibm.com/developerworks/web/library/wa-ffox3/">Get ready for Firefox 3.0 - A Web developer's guide to the many new features in this popular browser, especially the offline application features</a> (IBM developerWorks)</li> + <li><a href="/fr/docs/Application_cache_implementation_overview">Application cache implementation overview</a></li> + <li><a href="https://www.onlinewebcheck.com/check.php?adv=1">OnlineWebCheck.com - Check manifeste file syntax (application Windows)</a></li> +</ul> +</div> diff --git a/files/fr/web/html/utiliser_dash_avec_les_vidéos_en_html/index.html b/files/fr/web/html/utiliser_dash_avec_les_vidéos_en_html/index.html new file mode 100644 index 0000000000..6a1b7f19f1 --- /dev/null +++ b/files/fr/web/html/utiliser_dash_avec_les_vidéos_en_html/index.html @@ -0,0 +1,103 @@ +--- +title: Utiliser DASH avec les vidéos en HTML +slug: Web/HTML/Utiliser_DASH_avec_les_vidéos_en_HTML +tags: + - Avancé + - DASH + - Guide + - HTML +translation_of: Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video +--- +<div>{{HTMLSidebar}}</div> + +<p><strong><em>Dynamic Adaptive Streaming over HTTP</em> (DASH)</strong> est un protocole de <em>streaming</em> adaptatif : il permet de changer le débit de la vidéo en fonction des performances réseau afin que la vidéo ne soit pas interrompue lors de la lecture.</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>Firefox 21 inclut une implémentation de DASH pour le format vidéo WebM mais celle-ci est désactivée par défaut et peut être activée via la préférence <code>media.dash.enabled</code> sous <code>about:config</code>.</p> + +<p>Firefox 23 a retiré la prise en charge de DASH pour le format WebM. Cette fonctionnalité sera remplacée par l'implémentation de l'<a href="http://www.w3.org/TR/media-source/">API Media Source Extensions</a> qui permettra la prise en charge de DASH via des bibliothèques JavaScript tierces (telles que dash.js). Pour plus de détails, voir le bug <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=778617">778617</a>.</p> + +<h2 id="Utiliser_DASH_côté_serveur">Utiliser DASH, côté serveur</h2> + +<p>Pour commencer, il faut convertir la vidéo WebM en manifeste DASH avec les vidéos associées aux différents débits. Pour cela, on aura besoin de :</p> + +<ul> + <li>ffpmeg - avec la prise en charge de l'audio et vidéo WebM fourni via libvpx and libvoribis en version 2.5 minimum (<a href="http://www.ffmpeg.org/">ffmpeg.org</a>).</li> +</ul> + +<h3 id="1._Utiliser_un_fichier_WebM_afin_de_créer_une_piste_audio_et_plusieurs_fichiers_vidéo">1. Utiliser un fichier WebM afin de créer une piste audio et plusieurs fichiers vidéo</h3> + +<p>Dans les lignes d'exemple qui suivent, on utilise le fichier de départ<strong><em> in.video</em></strong>. Ce fichier peut être n'importe quel conteneur avec au moins un flux audio et un flux vidéo qui peut être décodé par ffmpeg.</p> + +<p>On créera la piste audio avec :</p> + +<pre>ffmpeg -i in.video -vn -acodec libvorbis -ab 128k -dash 1 my_audio.webm +</pre> + +<p>On créera les pistes vidéos avec :</p> + +<pre>ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ +-an -vf scale=160:90 -b:v 250k -dash 1 video_160x90_250k.webm + +ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ +-an -vf scale=320:180 -b:v 500k -dash 1 video_320x180_500k.webm + +ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ +-an -vf scale=640:360 -b:v 750k -dash 1 video_640x360_750k.webm + +ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ +-an -vf scale=640:360 -b:v 1000k -dash 1 video_640x360_1000k.webm + +ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ +-an -vf scale=1280:720 -b:v 1500k -dash 1 video_1280x720_1500k.webm +</pre> + +<p>Autrement, on peut utiliser cette commande :</p> + +<pre>ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 \ +-g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ +-an -vf scale=160:90 -b:v 250k -dash 1 video_160x90_250k.webm \ +-an -vf scale=320:180 -b:v 500k -dash 1 video_320x180_500k.webm \ +-an -vf scale=640:360 -b:v 750k -dash 1 video_640x360_750k.webm \ +-an -vf scale=640:360 -b:v 1000k -dash 1 video_640x360_1000k.webm \ +-an -vf scale=1280:720 -b:v 1500k -dash 1 video_1280x720_1500k.webm</pre> + +<h3 id="2._Créer_le_manifeste">2. Créer le manifeste</h3> + +<pre>ffmpeg \ + -f webm_dash_manifest -i video_160x90_250k.webm \ + -f webm_dash_manifest -i video_320x180_500k.webm \ + -f webm_dash_manifest -i video_640x360_750k.webm \ + -f webm_dash_manifest -i video_1280x720_1500k.webm \ + -f webm_dash_manifest -i my_audio.webm \ + -c copy \ + -map 0 -map 1 -map 2 -map 3 -map 4 \ + -f webm_dash_manifest \ + -adaptation_sets "id=0,streams=0,1,2,3 id=1,streams=4" \ + my_video_manifest.mpd</pre> + +<p>Les arguments <code>-map</code> correspondent aux fichiers d'entrée dans l'ordre dans lequel ils sont fournis. Il doit y en avoir un pour chaque fichier. L'argument <code>-adaptation_sets</code> permet de les affecter à différents ensembles d'adaptation. Par exemple, cela crée un ensemble (0) qui contient les flux 0, 1, 2 et 3 (les vidéos) et un autre ensemble (1) qui contient uniquement le flux 4 (l'audio).</p> + +<p>On pourra alors placer le fichier de manifeste créé à côté des fichiers vidéo sur le serveur web ou sur le CDN. DASH fonctionne via HTTP donc il suffit simplement que votre serveur prenne en charge les requêtes d'intervalles d'octets (byte range requests) et qu'il puisse servir les fichiers <code>.mpd</code> avec <code>mimetype="application/dash+xml"</code>.</p> + +<h2 id="Utiliser_DASH_côté_client">Utiliser DASH, côté client</h2> + +<p>Il faut modifier la page web pour que celle-ci pointe d'abord vers le manifeste, avant le fichier vidéo en tant que tel :</p> + +<pre class="brush: html"><video> + <source src="movie.mpd"> + <source src="movie.webm"> + Votre navigateur ne prend pas en charge les vidéos HTML. +</video></pre> + +<p>C'est tout !<br> + Si le navigateur utilisé prend en charge DASH/MSE, la diffusion de la vidéo sera maintenant adaptative.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="http://wiki.webmproject.org/adaptive-streaming/webm-dash-specification">La spécification WebM DASH du projet WebM </a></li> + <li><a href="http://dashif.org/">Le forum DASH Industry</a></li> + <li><a href="http://wiki.webmproject.org/adaptive-streaming/instructions-to-playback-adaptive-webm-using-dash">Descriptions du projet WebM pour la création de fichiers DASH avec FFMPEG</a></li> +</ul> diff --git a/files/fr/web/html/éléments_en_bloc/index.html b/files/fr/web/html/éléments_en_bloc/index.html new file mode 100644 index 0000000000..c099de574f --- /dev/null +++ b/files/fr/web/html/éléments_en_bloc/index.html @@ -0,0 +1,126 @@ +--- +title: Éléments de bloc +slug: Web/HTML/Éléments_en_bloc +tags: + - Débutant + - HTML + - Web +translation_of: Web/HTML/Block-level_elements +--- +<div>{{HTMLSidebar}}</div> + +<p>Les éléments de bloc forment une catégorie d'éléments HTML (<em>HyperText Markup Language</em>) en opposition aux <a href="/fr/docs/Web/HTML/Éléments_en_ligne">éléments en ligne</a>.</p> + +<p>Leur caractéristique principale réside dans le fait qu'ils sont séparés par un saut de ligne avant et après l'élément (créant ainsi un « bloc » de contenu). On peut, en quelque sorte, les représenter comme des blocs empilés les uns sur les autres. Ce faisant, ils prennent la largeur de leurs conteneurs.</p> + +<div class="note"> +<p><strong>Note :</strong> Un élément de bloc commence toujours sur une nouvelle ligne et prend toute la largeur disponible (autrement dit, il s'étend le plus possible vers la droite et vers la gauche).</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Ce paragraphe est un élément de bloc. Son fond a été coloré pour illustrer son conteneur.</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">p { + background-color: #8ABB55; +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample('Exemples')}}</p> + +<h2 id="Contrainte">Contrainte</h2> + +<ul> + <li>Les éléments de bloc ne peuvent apparaître qu'au sein d'un élément {{HTMLElement("body")}}</li> +</ul> + +<h2 id="Élément_de_bloc_ou_élément_en_ligne">Élément de bloc ou élément en ligne ?</h2> + +<p>Les éléments de bloc diffèrent des éléments en ligne par :</p> + +<dl> + <dt>La mise en forme</dt> + <dd>Par défaut, les éléments de bloc commencent sur des nouvelles lignes.</dd> + <dt>Le modèle de contenu</dt> + <dd>De façon générale, les éléments de bloc peuvent contenir des éléments en ligne et d'autres éléments de bloc. L'idée structurelle sous-jacente est que les éléments de bloc créent de plus grandes structures que les éléments en ligne.</dd> +</dl> + +<p>La distinction entre bloc et ligne est utilisée dans les spécifications HTML jusqu'à la version 4.01. En HTML5, cette distinction binaire est remplacée par un ensemble plus complexe de <a href="/fr/docs/Web/HTML/Catégorie_de_contenu">catégories de contenu</a>. La catégorie des éléments en bloc correspond approximativement à la catégorie de <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a> en HTML5, celle des éléments en ligne correspond à la catégorie de <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>. Il y a également d'autres catégories (<a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_interactif">le contenu interactif</a> par exemple).</p> + +<h2 id="Éléments">Éléments</h2> + +<p>La liste qui suit contient tous les éléments HTML en bloc (cette catégorie n'est pas strictement applicable pour les éléments apparus avec HTML5).</p> + +<div class="threecolumns"> +<dl> + <dt>{{HTMLElement("address")}}</dt> + <dd>Information de contact.</dd> + <dt>{{HTMLElement("article")}}</dt> + <dd>Contenu d'un article.</dd> + <dt>{{HTMLElement("aside")}}</dt> + <dd>Contenu tangentiel.</dd> + <dt>{{HTMLElement("blockquote")}}</dt> + <dd>Long bloc de citation.</dd> + <dt>{{HTMLElement("details")}}</dt> + <dd>Outil permettant de révéler des informations sur la page.</dd> + <dt>{{HTMLElement("dialog")}}</dt> + <dd>Boîte de dialogue.</dd> + <dt>{{HTMLElement("dd")}}</dt> + <dd>Description d'une définition.</dd> + <dt>{{HTMLElement("div")}}</dt> + <dd>Division d'un document.</dd> + <dt>{{HTMLElement("dl")}}</dt> + <dd>Liste de définitions.</dd> + <dt>{{HTMLElement("dt")}}</dt> + <dd>Définition/description d'un terme.</dd> + <dt>{{HTMLElement("fieldset")}}</dt> + <dd>Ensemble de champs.</dd> + <dt>{{HTMLElement("figcaption")}}</dt> + <dd>Légende d'une image.</dd> + <dt>{{HTMLElement("figure")}}</dt> + <dd>Permet de grouper des média avec une légende (voir {{HTMLElement("figcaption")}}).</dd> + <dt>{{HTMLElement("footer")}}</dt> + <dd>Bas de page ou de section.</dd> + <dt>{{HTMLElement("form")}}</dt> + <dd>Formulaire.</dd> + <dt>{{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}</dt> + <dd>Éléments de titre de niveau 1 à 6.</dd> + <dt>{{HTMLElement("header")}}</dt> + <dd>En-tête de page ou de section.</dd> + <dt>{{HTMLElement("hgroup")}}</dt> + <dd>Information d'en-tête de groupe.</dd> + <dt>{{HTMLElement("hr")}}</dt> + <dd>Ligne de division horizontale.</dd> + <dt>{{HTMLElement("li")}}</dt> + <dd>Élément d'une liste.</dd> + <dt>{{HTMLElement("main")}}</dt> + <dd>Contient le contenu central unique au document.</dd> + <dt>{{HTMLElement("nav")}}</dt> + <dd>Contient des liens de navigation.</dd> + <dt>{{HTMLElement("ol")}}</dt> + <dd>Liste ordonnée.</dd> + <dt>{{HTMLElement("p")}}</dt> + <dd>Paragraphe.</dd> + <dt>{{HTMLElement("pre")}}</dt> + <dd>Texte pré-formaté.</dd> + <dt>{{HTMLElement("section")}}</dt> + <dd>Section d'une page web.</dd> + <dt>{{HTMLElement("table")}}</dt> + <dd>Tableau.</dd> + <dt>{{HTMLElement("ul")}}</dt> + <dd>Liste non-ordonnée.</dd> +</dl> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Éléments_en_ligne">Les éléments en ligne</a></li> + <li>{{cssxref("display")}}</li> + <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal">Les éléments de bloc et les éléments en ligne dans le flux normal</a></li> +</ul> diff --git a/files/fr/web/html/éléments_en_ligne/index.html b/files/fr/web/html/éléments_en_ligne/index.html new file mode 100644 index 0000000000..fb9207dd72 --- /dev/null +++ b/files/fr/web/html/éléments_en_ligne/index.html @@ -0,0 +1,169 @@ +--- +title: Éléments en-ligne +slug: Web/HTML/Éléments_en_ligne +tags: + - Débutant + - Elements en ligne + - Guide + - HTML + - Reference +translation_of: Web/HTML/Inline_elements +--- +<div>{{HTMLSidebar}}</div> + +<p><span class="seoSummary">En HTML, les éléments en ligne (<em>inline elements</em> en anglais) sont ceux qui occupent l'espace délimités par leurs balises plutôt que d'interrompre le flux du contenu.</span> Dans cet article, nous étudierons ces éléments en ligne et également leurs différences quant <a href="/fr/docs/Web/HTML/Éléments_en_bloc">aux éléments de bloc (<em>block-level elements</em>)</a>.</p> + +<div class="note"> +<p><strong>Note :</strong> Un élément en ligne ne commence pas sur une nouvelle ligne et prend uniquement la largeur qui lui est nécessaire.</p> +</div> + +<h2 id="Éléments_en_ligne_et_éléments_de_bloc_un_exemple">Éléments en ligne et éléments de bloc : un exemple</h2> + +<p>Un exemple vaut mieux qu'une longue explication. Voici pour commencer la feuille de style CSS que nous utiliserons :</p> + +<pre class="brush: css">.highlight { + background-color:#ee3; +}</pre> + +<h3 id="Élément_en_ligne">Élément en ligne</h3> + +<p>Le fragment de code HTML qui suit utilise un élément en ligne avec la classe <code>highlight</code> :</p> + +<pre class="brush: html"><p>The following span is an <span class="highlight">inline element</span>; +its background has been colored to display both the beginning and end of +the inline element's influence.</p></pre> + +<p>Dans cet exemple, l'élément {{HTMLElement("p")}} (le paragraphe) est un élément de bloc qui contient du texte. Dans ce texte, on a un élément {{HTMLElement("span")}} qui est un élément en ligne. L'élément <code><span></code> étant un élément en ligne, le paragraphe est bien affiché sous la forme d'un flux de texte sans rupture :</p> + +<p>{{EmbedLiveSample("Élément_en_ligne", 600, 80)}}</p> + +<div class="hidden"> +<p>Contenu masqué pour la lecture : cette feuille de style CSS est également utilisée :</p> + +<pre class="brush: css">body { + margin: 0; + padding: 4px; + border: 1px solid #333; +} + +.highlight { + background-color:#ee3; +}</pre> +</div> + +<h3 id="Élément_de_bloc">Élément de bloc</h3> + +<p>Transformons l'exemple précédent pour passer d'un élément <code><span></code> à un élément {{HTMLElement("div")}} qui est un élément de bloc :</p> + +<pre class="brush: html"><p>The following div is an <div class="highlight">block-level element;</div> +its background has been colored to display both the beginning and end of +the block-level element's influence.</p></pre> + +<div class="hidden"> +<p>Contenu masqué pour la lecture : cette feuille de style CSS est également utilisée :</p> + +<pre class="brush: css">body { + margin: 0; + padding: 4px; + border: 1px solid #333; +} + +.highlight { + background-color:#ee3; +}</pre> +</div> + +<p>Et voici le résultat qu'on obtient :</p> + +<p>{{EmbedLiveSample("Élément_de_bloc", 600, 150)}}</p> + +<p>On voit ici que l'élément <code><div></code> modifie complètement la disposition du texte et le découpe en trois partie : une partie avant le <code><div></code>, une partie constituée avec le texte de l'élément <code><div></code> et une dernière partie ensuite.</p> + +<h3 id="Modifier_le_type_d'un_d'élément">Modifier le type d'un d'élément</h3> + +<p>Il est possible de choisir le mode d'affichage d'un élément afin de modifier son comportement par défaut grâce à la propriété CSS {{cssxref("display")}}. En passant la valeur de <code>display</code> de <code>"inline"</code> à <code>"block"</code>, on peut indiquer au navigateur d'afficher l'élément comme une boîte de bloc plutôt que comme une boîte en ligne. Attention, l'élément ne sera plus affiché de la même façon, vérifiez le résultat obtenu. De plus, ce changement n'impactera pas la catégorie et le modèle de contenu de l'élément : utiliser <code>display:block</code> sur un élément {{HTMLElement("span")}} ne permettra toujours pas de lui imbriquer un élément {{HTMLElement("div")}} à l'intérieur.</p> + +<h2 id="Différences_conceptuelles">Différences conceptuelles</h2> + +<p>Voici, en résumé, les différences conceptuelles entre les éléments en ligne et les éléments de bloc :</p> + +<dl> + <dt>Modèle de contenu</dt> + <dd>En général, les éléments en ligne ne peuvent contenir que des données ou d'autres éléments en ligne. Il n'est pas possible de placer des éléments de bloc à l'intérieur d'éléments en ligne.</dd> + <dt>Formatage</dt> + <dd>Par défaut, les éléments en ligne n'introduisent pas de saut de ligne dans le flux du document. En revanche, les éléments de bloc provoquent un saut de ligne (ce comportement peut être modifié grâce au CSS).</dd> +</dl> + +<h2 id="Liste_des_éléments_en_ligne">Liste des éléments en ligne</h2> + +<p>Les éléments HTML suivants sont, par défaut, des éléments en ligne :</p> + +<div class="threecolumns"> +<dl> + <dt>{{HTMLElement("a")}}</dt> + <dt>{{HTMLElement("abbr")}}</dt> + <dt>{{HTMLElement("acronym")}}</dt> + <dt>{{HTMLElement("audio")}} (if has visible controls)</dt> + <dt>{{HTMLElement("b")}}</dt> + <dt>{{HTMLElement("bdi")}}</dt> + <dt>{{HTMLElement("bdo")}}</dt> + <dt>{{HTMLElement("big")}}</dt> + <dt>{{HTMLElement("br")}}</dt> + <dt>{{HTMLElement("button")}}</dt> + <dt>{{HTMLElement("canvas")}}</dt> + <dt>{{HTMLElement("cite")}}</dt> + <dt>{{HTMLElement("code")}}</dt> + <dt>{{HTMLElement("data")}}</dt> + <dt>{{HTMLElement("datalist")}}</dt> + <dt>{{HTMLElement("del")}}</dt> + <dt>{{HTMLElement("dfn")}}</dt> + <dt>{{HTMLElement("em")}}</dt> + <dt>{{HTMLElement("embed")}}</dt> + <dt>{{HTMLElement("i")}}</dt> + <dt>{{HTMLElement("iframe")}}</dt> + <dt>{{HTMLElement("img")}}</dt> + <dt>{{HTMLElement("input")}}</dt> + <dt>{{HTMLElement("ins")}}</dt> + <dt>{{HTMLElement("kbd")}}</dt> + <dt>{{HTMLElement("label")}}</dt> + <dt>{{HTMLElement("map")}}</dt> + <dt>{{HTMLElement("mark")}}</dt> + <dt>{{HTMLElement("meter")}}</dt> + <dt>{{HTMLElement("noscript")}}</dt> + <dt>{{HTMLElement("object")}}</dt> + <dt>{{HTMLElement("output")}}</dt> + <dt>{{HTMLElement("picture")}}</dt> + <dt>{{HTMLElement("progress")}}</dt> + <dt>{{HTMLElement("q")}}</dt> + <dt>{{HTMLElement("ruby")}}</dt> + <dt>{{HTMLElement("s")}}</dt> + <dt>{{HTMLElement("samp")}}</dt> + <dt>{{HTMLElement("script")}}</dt> + <dt>{{HTMLElement("select")}}</dt> + <dt>{{HTMLElement("slot")}}</dt> + <dt>{{HTMLElement("small")}}</dt> + <dt>{{HTMLElement("span")}}</dt> + <dt>{{HTMLElement("strong")}}</dt> + <dt>{{HTMLElement("sub")}}</dt> + <dt>{{HTMLElement("sup")}}</dt> + <dt>{{HTMLElement("svg")}}</dt> + <dt>{{HTMLElement("template")}}</dt> + <dt>{{HTMLElement("textarea")}}</dt> + <dt>{{HTMLElement("time")}}</dt> + <dt>{{HTMLElement("u")}}</dt> + <dt>{{HTMLElement("tt")}}</dt> + <dt>{{HTMLElement("var")}}</dt> + <dt>{{HTMLElement("video")}}</dt> + <dt>{{HTMLElement("wbr")}}</dt> +</dl> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Éléments_en_bloc">Les éléments de bloc</a></li> + <li><a href="/fr/docs/Web/HTML/Element">Référence des éléments HTML</a></li> + <li>{{cssxref("display")}}</li> + <li><a href="/fr/docs/Web/Guide/HTML/Cat%C3%A9gories_de_contenu">Les catégories de contenu</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal">Les éléments de bloc et les éléments en ligne dans le flux normal</a></li> +</ul> |