diff options
| author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-11-14 14:23:22 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-11-14 14:23:22 +0100 |
| commit | d596e86a4f13b04981f51d327af257b07e6d21c3 (patch) | |
| tree | 63473f4c84b99e13d900cdab5e5a844a1c359476 /files/fr/learn/forms | |
| parent | 55e694eab2e70941e979c2839aaca5c9ef8f3226 (diff) | |
| download | translated-content-d596e86a4f13b04981f51d327af257b07e6d21c3.tar.gz translated-content-d596e86a4f13b04981f51d327af257b07e6d21c3.tar.bz2 translated-content-d596e86a4f13b04981f51d327af257b07e6d21c3.zip | |
Prepare Learning Area section for Markdown conversion (#2738)
* Remove summary, spans and fonts
* Remove notranslate class
* Remove ids other than headings
* Remove hidden blocks
* fix livesample call with exclamation mark
* fix livesample call with exclamation mark
* fix livesample call with exclamation mark
* fix livesample call with exclamation mark
* Fix notes
* Remove code in pre, sub/sup and some styles
* fix dls
* fix absolute / english links
* fix figures and others
* fix other issues from report
* Fix other one-off issues excl. imgs
* Fix images
* Fixes #2842 for Learning area
Diffstat (limited to 'files/fr/learn/forms')
19 files changed, 1056 insertions, 1095 deletions
diff --git a/files/fr/learn/forms/advanced_form_styling/index.html b/files/fr/learn/forms/advanced_form_styling/index.html index b34fcc2065..040507b63e 100644 --- a/files/fr/learn/forms/advanced_form_styling/index.html +++ b/files/fr/learn/forms/advanced_form_styling/index.html @@ -1,20 +1,12 @@ --- title: Composition avancée des formulaires HTML slug: Learn/Forms/Advanced_form_styling -tags: - - Avancé - - CSS - - Exemple - - Formulaires - - Guide - - HTML - - Web translation_of: Learn/Forms/Advanced_form_styling original_slug: Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms --- <div>{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets", "Web/Guide/HTML/Formulaires")}}</div> -<p class="summary">Dans cet article, nous verrons comment utiliser les <a href="/fr/docs/Apprendre/CSS">CSS</a> avec les formulaires <a href="/fr/docs/Glossaire/HTML">HTML</a> pour modifier le style de certains widgets difficiles à personnaliser. Comme nous l'avons vu dans l'<a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">article précédent</a>, les champs texte et les boutons sont parfaitement compatibles avec les CSS. Maintenant, nous allons approfondir la part sombre de la composition stylistique des formulaires HTML.</p> +<p>Dans cet article, nous verrons comment utiliser les <a href="/fr/docs/Learn/CSS">CSS</a> avec les formulaires <a href="/fr/docs/Glossary/HTML">HTML</a> pour modifier le style de certains widgets difficiles à personnaliser. Comme nous l'avons vu dans l'<a href="/fr/docs/Learn/Forms/Styling_web_forms">article précédent</a>, les champs texte et les boutons sont parfaitement compatibles avec les CSS. Maintenant, nous allons approfondir la part sombre de la composition stylistique des formulaires HTML.</p> <p>Avant d'aller plus loin, faisons un rappel pour deux types de widgets de formulaires :</p> @@ -32,7 +24,7 @@ original_slug: Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms <p>L'évolution récente du HTML et des CSS a étendu l'expressivité des CSS :</p> <ul> - <li><a href="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes" rel="external">CSS 2.1</a> était très limité et n'offrait que trois pseudo-classes : + <li><a href="https://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes" rel="external">CSS 2.1</a> était très limité et n'offrait que trois pseudo-classes : <ul> <li>{{cssxref(":active")}}</li> @@ -40,7 +32,7 @@ original_slug: Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms <li>{{cssxref(":hover")}}</li> </ul> </li> - <li><a href="http://www.w3.org/TR/css3-selectors/" rel="external">CSS Selector Level 3</a> a ajouté quelques nouvelles pseudo-classes relatives aux formulaires HTML : + <li><a href="https://www.w3.org/TR/css3-selectors/" rel="external">CSS Selector Level 3</a> a ajouté quelques nouvelles pseudo-classes relatives aux formulaires HTML : <ul> <li>{{cssxref(":enabled")}}</li> <li>{{cssxref(":disabled")}}</li> @@ -48,7 +40,7 @@ original_slug: Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms <li>{{cssxref(":indeterminate")}}</li> </ul> </li> - <li><a href="http://dev.w3.org/csswg/css3-ui/#pseudo-classes" rel="external">CSS Basic UI Level 3</a> a ajouté quelques autres pseudo-classes pour décrire l'état du widget : + <li><a href="https://dev.w3.org/csswg/css3-ui/#pseudo-classes" rel="external">CSS Basic UI Level 3</a> a ajouté quelques autres pseudo-classes pour décrire l'état du widget : <ul> <li>{{cssxref(":default")}}</li> <li>{{cssxref(":valid")}}</li> @@ -61,7 +53,7 @@ original_slug: Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms <li>{{cssxref(":read-write")}}</li> </ul> </li> - <li><a href="http://dev.w3.org/csswg/selectors4/" rel="external">CSS Selector Level 4</a> actuellement en développement actif et objet de grandes discussions ne prévoit pas d'ajouter grand‑chose pour améliorer les formulaires : + <li><a href="https://dev.w3.org/csswg/selectors4/" rel="external">CSS Selector Level 4</a> actuellement en développement actif et objet de grandes discussions ne prévoit pas d'ajouter grand‑chose pour améliorer les formulaires : <ul> <li>{{cssxref(":user-error")}} qui est juste une amélioration de la pseudo‑classe {{cssxref(":invalid")}}.</li> </ul> @@ -73,16 +65,16 @@ original_slug: Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms <p>Il y a quelques expérimentations par les fournisseurs de navigateurs pour étendre l'expressivité des CSS sur les formulaires ; dans certains cas, il est bon de savoir ce qui est disponible..</p> <div class="warning"> -<p><strong>Avertissement :</strong> Même si ces expérimentations sont intéressantes, <strong>elles ne sont pas normées, ce qui signifie qu'elles ne sont pas fiables</strong>. Si vous les utilisez (et vous ne devriez probablement pas le faire souvent), vous le faites à vos propres risques et périls ; <a href="http://www.alistapart.com/articles/every-time-you-call-a-proprietary-feature-css3-a-kitten-dies/">vous faites quelque chose qui peut être mauvais pour le Web</a> en utilisant des propriétés non standard.</p> +<p><strong>Attention :</strong> Même si ces expérimentations sont intéressantes, <strong>elles ne sont pas normées, ce qui signifie qu'elles ne sont pas fiables</strong>. Si vous les utilisez (et vous ne devriez probablement pas le faire souvent), vous le faites à vos propres risques et périls ; <a href="https://www.alistapart.com/articles/every-time-you-call-a-proprietary-feature-css3-a-kitten-dies/">vous faites quelque chose qui peut être mauvais pour le Web</a> en utilisant des propriétés non standard.</p> </div> <ul> <li><a href="/fr/docs/CSS/CSS_Reference/Mozilla_Extensions" title="/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions">Extensions des CSS Mozilla </a> <ul> - <li>{{cssxref(":-moz-placeholder")}}</li> + <li>{{cssxref(":placeholder-shown")}}</li> <li>{{cssxref(":-moz-submit-invalid")}}</li> - <li>{{cssxref(":-moz-ui-invalid")}}</li> + <li>{{cssxref(":user-invalid")}}</li> <li>{{cssxref(":-moz-ui-valid")}}</li> </ul> </li> @@ -99,15 +91,15 @@ original_slug: Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms </li> </ul> -<h3 id="Contrôle_de_l'apparence_des_éléments_de_formulaire">Contrôle de l'apparence des éléments de formulaire</h3> +<h3 id="Contrôle_du_style_des_éléments_de_formulaire">Contrôle du style des éléments de formulaire</h3> <p>Les navigateurs fondés sur WebKit- (Chrome, Safari) et Gecko- (Firefox) offrent les meilleures possibilités de personnalisation des widgets HTML. Ils sont aussi disponibles sur plateforme croisées, et donc ils nécessitent un mécanisme de bascule entre les widgets de « look and feel » natif et widget stylistiquement composables par l'utilisateur.</p> -<p>À cette fin, ils utilisent une propriété propriétaire : {{cssxref("-webkit-appearance")}} ou {{cssxref("-moz-appearance")}}. <strong>Ces propriétés ne sont pas normées et ne doivent pas être utilisées</strong>. En fait, elles se comportent même différemment entre WebKit et Gecko. Cependant, il y a une valeur qu'il est bon de connaître : <code>none</code>. Avec cette valeur, vous êtes en mesure d'obtenir un contrôle (presque total) sur le style des widgets donnés.</p> +<p>À cette fin, ils utilisent une propriété propriétaire : {{cssxref("-webkit-appearance")}} ou {{cssxref("appearance")}}. <strong>Ces propriétés ne sont pas normées et ne doivent pas être utilisées</strong>. En fait, elles se comportent même différemment entre WebKit et Gecko. Cependant, il y a une valeur qu'il est bon de connaître : <code>none</code>. Avec cette valeur, vous êtes en mesure d'obtenir un contrôle (presque total) sur le style des widgets donnés.</p> <p>Donc, si vous avez du mal à appliquer un style à un élément, essayez d'utiliser ces propriétés propriétaires. Nous verrons quelques exemples ci-dessous, mais le cas d'utilisation le plus connu de cette propriété est relatif au style des champs de recherche sur les navigateurs WebKit :</p> -<pre class="brush: css"><style> +<pre class="brush: html"><style> input[type=search] { border: 1px dotted #999; border-radius: 0; @@ -120,10 +112,10 @@ input[type=search] { <input type="search"> </form></pre> -<p>{{EmbedLiveSample("Contrôle_de_l'apparence_des_éléments_de_formulaire", 250, 40)}}</p> +<p>{{EmbedLiveSample("Contrôle_du_style_des_éléments_de_formulaire", 250, 40)}}</p> <div class="note"> -<p><strong>Note :</strong> Il est toujours difficile de prédire l'avenir, quand on parle de techniques Web. L'extension des possibilités d'expression des CSS est difficile ; il y a un travail exploratoire avec d'autres spécifications, telles que <a href="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html" rel="external">Shadow DOM</a> qui offrent certaines perspectives. La quête du formulaire de style totalement composable est loin d'être terminée.</p> +<p><strong>Note :</strong> Il est toujours difficile de prédire l'avenir, quand on parle de techniques Web. L'extension des possibilités d'expression des CSS est difficile ; il y a un travail exploratoire avec d'autres spécifications, telles que <a href="https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html" rel="external">Shadow DOM</a> qui offrent certaines perspectives. La quête du formulaire de style totalement composable est loin d'être terminée.</p> </div> <h2 id="Exemples">Exemples</h2> @@ -160,38 +152,38 @@ input[type=checkbox] { <tbody> <tr> <td>Firefox 57 (Mac OSX)</td> - <td><img alt="" src="https://mdn.mozillademos.org/files/15671/firefox-mac-checkbox.png" style="height: 118px; width: 120px;"></td> + <td><img alt="" src="firefox-mac-checkbox.png"></td> </tr> <tr> <td>Firefox 57 (Windows 10)</td> - <td><img alt="" src="https://mdn.mozillademos.org/files/15691/firefox-windows-checkbox.png" style="height: 115px; width: 113px;"></td> + <td><img alt="" src="firefox-windows-checkbox.png"></td> </tr> <tr> <td>Chrome 63 (Mac OSX)</td> - <td><img alt="" src="https://mdn.mozillademos.org/files/15676/chrome-mac-checkbox.png" style="height: 117px; width: 116px;"></td> + <td><img alt="" src="chrome-mac-checkbox.png"></td> </tr> <tr> <td>Chrome 63 (Windows 10)</td> - <td><img alt="" src="https://mdn.mozillademos.org/files/15681/chrome-windows-checkbox.png" style="height: 117px; width: 120px;"></td> + <td><img alt="" src="chrome-windows-checkbox.png"></td> </tr> <tr> <td>Opera 49 (Mac OSX)</td> - <td><img alt="" src="https://mdn.mozillademos.org/files/15701/opera-mac-checkbox.png" style="height: 119px; width: 118px;"></td> + <td><img alt="" src="opera-mac-checkbox.png"></td> </tr> <tr> <td>Internet Explorer 11 (Windows 10)</td> - <td><img alt="" src="https://mdn.mozillademos.org/files/15696/ie11-checkbox.png" style="height: 112px; width: 119px;"></td> + <td><img alt="" src="ie11-checkbox.png"></td> </tr> <tr> <td>Edge 16 (Windows 10)</td> - <td><img alt="" src="https://mdn.mozillademos.org/files/15686/edge-checkbox.png" style="height: 118px; width: 119px;"></td> + <td><img alt="" src="edge-checkbox.png"></td> </tr> </tbody> </table> <h4 id="Un_exemple_un_peu_plus_compliqué">Un exemple un peu plus compliqué</h4> -<p>Comme Opera et Internet Explorer n'ont pas de fonctionnalités telles que {{cssxref("-webkit-appearance")}} ou {{cssxref("-moz-appearance")}}, leur utilisation n'est pas appropriée. Heureusement, nous sommes dans un cas où les CSS disposent d'assez d'expressions pour trouver des solutions. Prenons un exemple courant :</p> +<p>Comme Opera et Internet Explorer n'ont pas de fonctionnalités telles que {{cssxref("-webkit-appearance")}} ou {{cssxref("appearance")}}, leur utilisation n'est pas appropriée. Heureusement, nous sommes dans un cas où les CSS disposent d'assez d'expressions pour trouver des solutions. Prenons un exemple courant :</p> <pre class="brush: html"><form> <fieldset> @@ -246,7 +238,7 @@ p+p { <p>Le plan consiste à remplacer la case à cocher native par une image de notre choix. Tout d'abord, nous devons préparer une image avec tous les états requis pour une case à cocher. Ces états sont : non coché, coché, non coché désactivé et coché désactivé. Cette image sera utilisée comme fantôme des CSS :</p> -<p><img alt="Check box CSS Sprite" src="/files/4173/checkbox-sprite.png" style="height: 64px; width: 16px;"></p> +<p><img alt="Check box CSS Sprite" src="checkbox-sprite.png"></p> <p>Commençons par masquer les cases à cocher d'origine. Nous les déplacerons simplement à l'extérieur de la fenêtre de visualisation de la page. Il y a deux choses importantes à considérer ici :</p> @@ -261,7 +253,7 @@ p+p { left: -1000em; }</pre> -<p>Maintenant que nous sommes débarrassés des cases à cocher natives, ajoutons la nôtre. Pour cela, nous utiliserons le pseudo élément {{cssxref(":before")}} de l'élément {{HTMLElement("label")}} qui suit la case à cocher originale. Ainsi, dans le sélecteur suivant, nous utilisons le sélecteur d'attributs pour cibler la case à cocher, puis nous utilisons le sélecteur de parents adjacent pour cibler le <code>label</code> suivant la case à cocher originale. Enfin, nous accédons au pseudo-élément {{cssxref(":before")}} et le styliser pour qu'il affiche notre case à cocher personnalisée non cochée.</p> +<p>Maintenant que nous sommes débarrassés des cases à cocher natives, ajoutons la nôtre. Pour cela, nous utiliserons le pseudo élément {{cssxref("::before")}} de l'élément {{HTMLElement("label")}} qui suit la case à cocher originale. Ainsi, dans le sélecteur suivant, nous utilisons le sélecteur d'attributs pour cibler la case à cocher, puis nous utilisons le sélecteur de parents adjacent pour cibler le <code>label</code> suivant la case à cocher originale. Enfin, nous accédons au pseudo-élément {{cssxref("::before")}} et le styliser pour qu'il affiche notre case à cocher personnalisée non cochée.</p> <pre class="brush: css">:root input[type=checkbox] + label:before { content: ""; @@ -351,52 +343,52 @@ option { <tbody> <tr> <td>Firefox 57 (Mac OSX)</td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15672/firefox-mac-select-1-closed.png" style="height: 55px; width: 91px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15673/firefox-mac-select-1-open.png" style="height: 76px; width: 119px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15674/firefox-mac-select-2-closed.png" style="height: 67px; width: 94px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15675/firefox-mac-select-2-open.png" style="height: 82px; width: 116px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="firefox-mac-select-1-closed.png"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="firefox-mac-select-1-open.png"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="firefox-mac-select-2-closed.png"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="firefox-mac-select-2-open.png"></td> </tr> <tr> <td>Firefox 57 (Windows 10)</td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15692/firefox-windows-select-1-closed.png" style="height: 65px; width: 92px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15693/firefox-windows-select-1-open.png" style="height: 129px; width: 103px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15694/firefox-windows-select-2-closed.png" style="height: 69px; width: 92px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15695/firefox-windows-select-2-open.png" style="height: 144px; width: 108px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="firefox-windows-select-1-closed.png"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="firefox-windows-select-1-open.png"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="firefox-windows-select-2-closed.png"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="firefox-windows-select-2-open.png"></td> </tr> <tr> <td>Chrome 63 (Mac OSX)</td> - <td style="vertical-align: top; text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/15677/chrome-mac-select-1-closed.png" style="height: 36px; width: 92px;"></td> - <td style="vertical-align: top; text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/15678/chrome-mac-select-1-open.png" style="height: 62px; width: 108px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15684/chrome-windows-select-2-closed.png" style="height: 53px; width: 92px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15680/chrome-mac-select-2-open.png" style="height: 75px; width: 110px;"></td> + <td style="vertical-align: top; text-align: center;"><img alt="" src="chrome-mac-select-1-closed.png"></td> + <td style="vertical-align: top; text-align: center;"><img alt="" src="chrome-mac-select-1-open.png"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="chrome-windows-select-2-closed.png"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="chrome-mac-select-2-open.png"></td> </tr> <tr> <td>Chrome 63 (Windows 10)</td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15682/chrome-windows-select-1-closed.png" style="height: 50px; width: 91px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15683/chrome-windows-select-1-open.png" style="height: 95px; width: 91px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15684/chrome-windows-select-2-closed.png" style="height: 53px; width: 92px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15685/chrome-windows-select-2-open.png" style="height: 104px; width: 93px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="chrome-windows-select-1-closed.png"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="chrome-windows-select-1-open.png"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="chrome-windows-select-2-closed.png"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="chrome-windows-select-2-open.png"></td> </tr> <tr> <td>Opera 49 (Mac OSX)</td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15702/opera-mac-select-1-closed.png" style="height: 33px; width: 92px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15703/opera-mac-select-1-open.png" style="height: 67px; width: 115px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15704/opera-mac-select-2-closed.png" style="height: 49px; width: 89px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15705/opera-mac-select-2-open.png" style="height: 77px; width: 115px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="opera-mac-select-1-closed.png"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="opera-mac-select-1-open.png"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="opera-mac-select-2-closed.png"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="opera-mac-select-2-open.png"></td> </tr> <tr> <td>IE11 (Windows 10)</td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15697/ie11-select-1-closed.png" style="height: 52px; width: 91px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15698/ie11-select-1-open.png" style="height: 84px; width: 120px;"></td> - <td style="text-align: center; vertical-align: middle;"><img alt="" src="https://mdn.mozillademos.org/files/15699/ie11-select-2-closed.png" style="height: 57px; width: 93px;"></td> - <td style="text-align: center; vertical-align: middle;"><img alt="" src="https://mdn.mozillademos.org/files/15700/ie11-select-2-open.png" style="height: 89px; width: 123px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="ie11-select-1-closed.png"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="ie11-select-1-open.png"></td> + <td style="text-align: center; vertical-align: middle;"><img alt="" src="ie11-select-2-closed.png"></td> + <td style="text-align: center; vertical-align: middle;"><img alt="" src="ie11-select-2-open.png"></td> </tr> <tr> <td>Edge 16 (Windows 10)</td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15687/edge-select-1-closed.png" style="height: 52px; width: 91px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15688/edge-select-1-open.png" style="height: 84px; width: 105px;"></td> - <td style="text-align: center; vertical-align: middle;"><img alt="" src="https://mdn.mozillademos.org/files/15689/edge-select-2-closed.png" style="height: 51px; width: 89px;"></td> - <td style="text-align: center; vertical-align: middle;"><img alt="" src="https://mdn.mozillademos.org/files/15690/edge-select-2-open.png" style="height: 83px; width: 93px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="edge-select-1-closed.png"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="edge-select-1-open.png"></td> + <td style="text-align: center; vertical-align: middle;"><img alt="" src="edge-select-2-closed.png"></td> + <td style="text-align: center; vertical-align: middle;"><img alt="" src="edge-select-2-open.png"></td> </tr> </tbody> </table> @@ -442,7 +434,7 @@ option { <p>Bien qu'il y ait encore des points noirs avec l'utilisation des CSS dans les formulaires HTML, il y a souvent moyen de les contourner. Il n'existe pas de solution générale et nette, mais les navigateurs modernes offrent de nouvelles possibilités. Pour l'instant, la meilleure solution est d'en savoir plus sur la façon dont les divers navigateurs prennent en charge les CSS, telles qu'appliquées aux widgets de formulaires HTML.</p> -<p>Dans le prochain article de ce guide, nous explorerons comment les différents widgets de formulaire HTML prennent en charge les plus importantes propriétés des CSS : <a class="new" href="https://developer.mozilla.org/fr/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets" rel="nofollow">Tableau de compatibilité des propriétés entre widgets de formulaire</a>.</p> +<p>Dans le prochain article de ce guide, nous explorerons comment les différents widgets de formulaire HTML prennent en charge les plus importantes propriétés des CSS : <a href="/fr/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Tableau de compatibilité des propriétés entre widgets de formulaire</a>.</p> <h2 id="Voir_aussi">Voir aussi</h2> @@ -456,15 +448,15 @@ option { <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets personnalisés pour formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mise en forme des formulaires HTML</a></li> + <li><a href="/fr/docs/Learn/Forms/Your_first_form">Mon premier formulaire HTML</a></li> + <li><a href="/fr/docs/Learn/Forms/How_to_structure_a_web_form">Comment structurer un formulaire HTML</a></li> + <li><a href="/fr/docs/Learn/Forms/Basic_native_form_controls">Les widgets natifs pour formulaire</a></li> + <li><a href="/fr/docs/Learn/Forms/Sending_and_retrieving_form_data">Envoi des données de formulaire</a></li> + <li><a href="/fr/docs/Learn/Forms/Form_validation">Validation des données de formulaire</a></li> + <li><a href="/fr/docs/Learn/Forms/How_to_build_custom_form_controls">Comment construire des widgets personnalisés pour formulaire</a></li> + <li><a href="/fr/docs/Learn/Forms/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li> + <li><a href="/fr/docs/Learn/Forms/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></li> + <li><a href="/fr/docs/Learn/Forms/Styling_web_forms">Mise en forme des formulaires HTML</a></li> <li>Mise en forme avancée des formulaires HTML</li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Table de compatibilité des propriétés pour les widgets de formulaire</a></li> + <li><a href="/fr/docs/Learn/Forms/Property_compatibility_table_for_form_controls">Table de compatibilité des propriétés pour les widgets de formulaire</a></li> </ul> diff --git a/files/fr/learn/forms/basic_native_form_controls/index.html b/files/fr/learn/forms/basic_native_form_controls/index.html index 92efc020da..517880bb99 100644 --- a/files/fr/learn/forms/basic_native_form_controls/index.html +++ b/files/fr/learn/forms/basic_native_form_controls/index.html @@ -15,13 +15,13 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <div>{{LearnSidebar}}<br> {{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires", "Web/Guide/HTML/Formulaires")}}</div> -<p class="summary">Nous examinerons maintenant en détail les fonctionnalités des divers widgets pour formulaires, en soulignant les options disponibles pour collecter les différents types de données. Ce guide vise à être exhaustif en couvrant tous les widgets natifs de formulaire disponibles.</p> +<p>Nous examinerons maintenant en détail les fonctionnalités des divers widgets pour formulaires, en soulignant les options disponibles pour collecter les différents types de données. Ce guide vise à être exhaustif en couvrant tous les widgets natifs de formulaire disponibles.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Notions concernant les ordinateurs et les <a class="new" href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_à_HTML" rel="nofollow">connaissances de base du HTML</a>.</td> + <td>Notions concernant les ordinateurs et les <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">connaissances de base du HTML</a>.</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -30,10 +30,10 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs </tbody> </table> -<p>Ici, nous nous attarderons sur les widgets de formulaires intégrés aux navigateurs, mais comme les formulaires HTML restent très circonscrits et que la qualité des implémentations peut être très différente d'un navigateur à l'autre, les développeurs web construisent parfois leurs propres widgets de formulaires — voir <a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets de formulaires personnalisés</a> plus loin dans ce même module pour plus d'idées à ce propos.</p> +<p>Ici, nous nous attarderons sur les widgets de formulaires intégrés aux navigateurs, mais comme les formulaires HTML restent très circonscrits et que la qualité des implémentations peut être très différente d'un navigateur à l'autre, les développeurs web construisent parfois leurs propres widgets de formulaires — voir <a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets de formulaires personnalisés</a> plus loin dans ce même module pour plus d'idées à ce propos.</p> <div class="note"> -<p><strong>Note </strong>: La plupart des fonctionnalités discutées dans cet article sont abondamment explicitées dans les navigateurs ; nous soulignerons les exceptions à ce sujet. Si vous voulez plus de précisions, consultez les <a href="/fr/docs/Web/HTML/Element#Forms">références aux éléments de formulaires HTML</a>, et en particulier nos références détaillées aux <a href="/fr/docs/Web/HTML/Element/input">types <input></a>.</p> +<p><strong>Note :</strong> La plupart des fonctionnalités discutées dans cet article sont abondamment explicitées dans les navigateurs ; nous soulignerons les exceptions à ce sujet. Si vous voulez plus de précisions, consultez les <a href="/fr/docs/Web/HTML/Element#Forms">références aux éléments de formulaires HTML</a>, et en particulier nos références détaillées aux <a href="/fr/docs/Web/HTML/Element/input">types <input></a>.</p> </div> <h2 id="Attributs_communs">Attributs communs</h2> @@ -82,7 +82,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <p>Les champs {{htmlelement("input")}} de saisie de texte sont les widgets de formulaire les plus élémentaires. Ils sont très pratiques pour permettre à un utilisateur de saisir n'importe quel type de données. Toutefois, certains champs textuels peuvent être spécialisés pour répondre à des besoins précis. Nous avons déjà vu quelques exemples.</p> <div class="note"> -<p><strong>Note :</strong> Les champs textuels dans les formulaires HTML sont des contrôles de saisie de texte brut. Cela signifie que vous ne pouvez pas les utiliser pour réaliser de la <a href="/en-US/docs/Rich-Text_Editing_in_Mozilla" title="/en-US/docs/Rich-Text_Editing_in_Mozilla">mise en forme riche</a> (gras, italique, etc.). Tous les éditeurs de textes évolués que vous rencontrez utilisent des widgets personnalisés créés avec HTML, CSS et JavaScript.</p> +<p><strong>Note :</strong> Les champs textuels dans les formulaires HTML sont des contrôles de saisie de texte brut. Cela signifie que vous ne pouvez pas les utiliser pour réaliser de la <a href="/fr/docs/Rich-Text_Editing_in_Mozilla" title="/en-US/docs/Rich-Text_Editing_in_Mozilla">mise en forme riche</a> (gras, italique, etc.). Tous les éditeurs de textes évolués que vous rencontrez utilisent des widgets personnalisés créés avec HTML, CSS et JavaScript.</p> </div> <p>Tous les champs textuels ont des comportement en commun :</p> @@ -95,7 +95,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs </ul> <div class="note"> -<p><strong>Note :</strong> L'élément {{htmlelement("input")}} est spécial car il peut être pratiquement n'importe quoi. En réglant simplement ses attributs de type, il peut changer radicalement, et il est utilisé pour créer la plupart des types de widgets de formulaire allant des champs texte sur une seule ligne, contrôles sans entrée de texte, contrôles de date et heure jusqu'aux boutons. Il y a toutefois des exceptions, comme {{htmlelement("textarea")}} pour les entrées multi-lignes. Prenez bien note de ceci en lisant cet article.</p> +<p><strong>Note :</strong> L'élément {{htmlelement("input")}} est spécial car il peut être pratiquement n'importe quoi. En réglant simplement ses attributs de type, il peut changer radicalement, et il est utilisé pour créer la plupart des types de widgets de formulaire allant des champs texte sur une seule ligne, contrôles sans entrée de texte, contrôles de date et heure jusqu'aux boutons. Il y a toutefois des exceptions, comme {{htmlelement("textarea")}} pour les entrées multi-lignes. Prenez bien note de ceci en lisant cet article.</p> </div> <h3 id="Champs_texte_sur_une_seule_ligne"> Champs texte sur une seule ligne</h3> @@ -103,16 +103,16 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <p>On crée un champ texte sur une seule ligne avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} est mis à <code>text</code> (maisi, si vous n'indiquez pas l'attribut {{htmlattrxref("type", "input")}}, <code>text</code> est la valeur par défaut). <code>text</code> est aussi la valeur de repli si celle indiquée pour l'attribut {{htmlattrxref("type", "input")}} est inconnue du navigateur (par exemple, si vous spécifiez <code>type="date"</code> et que le navigateur ne prend pas en charge les sélecteurs de date natifs).</p> <div class="note"> -<p><strong>Note :</strong> Vous trouverez des exemples de tous les types de champ texte sur une ligne dans GitHub à <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/single-line-text-fields.html">single-line-text-fields.html</a> (voir <a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html">directement aussi</a>).</p> +<p><strong>Note :</strong> Vous trouverez des exemples de tous les types de champ texte sur une ligne dans GitHub à <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/single-line-text-fields.html">single-line-text-fields.html</a> (voir <a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html">directement aussi</a>).</p> </div> <p>Voici un exemple élémentaire de champ texte sur une ligne :</p> -<pre class="brush: html notranslate"><input type="text" id="comment" name="comment" value="Je suis un champ texte"></pre> +<pre class="brush: html"><input type="text" id="comment" name="comment" value="Je suis un champ texte"></pre> <p>Les champs texte sur une ligne n'ont qu'une seule contrainte : si vous saisissez du texte avec des sauts de ligne, le navigateur les supprime avant d'envoyer les données.</p> -<p><img alt="Screenshots of single line text fields on several platforms." src="https://developer.mozilla.org/files/4273/all-single-line-text-field.png" style="height: 235px; width: 655px;"></p> +<p><img alt="Screenshots of single line text fields on several platforms." src="https://developer.mozilla.org/files/4273/all-single-line-text-field.png"></p> <p>HTML5 améliore le champ texte élémentaire sur une ligne par ajout de valeurs spéciales pour l'attribut {{htmlattrxref("type","input")}}. Ces valeurs conservent l'élément {{HTMLElement("input")}} en tant que champ texte sur une ligne mais ajoutent quelques contraintes et caractéristiques supplémentaires au champ.</p> @@ -120,25 +120,25 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <p>Ce type de champ est défini en donnant la valeur <code>email</code> à l'attribut {{htmlattrxref("type","input")}} :</p> -<pre class="brush: html notranslate"> <input type="email" <code class="language-html"><span class="tag token"><span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>email<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>email<span class="punctuation token">"</span></span> </span></code>multiple></pre> +<pre class="brush: html"> <input type="email" id="email" name="email" multiple></pre> <p>Avec ce <code>type</code> , l'utilisateur doit saisir un e‑mail valide dans le champ. Tout autre type de contenu amène le navigateur à émettre une erreur lors de la soumission du formulaire. Notez que cette validation s'opère côté client et est faite par le navigateur :</p> -<p><img alt="Entrée d'un e-mail non valide déclenchant un message d'avertissement « Veuillez saisir une adresse électronique valide »" src="https://mdn.mozillademos.org/files/16001/fr-email.png" style="border-style: solid; border-width: 1px; display: block; height: 130px; margin: 0px auto; width: 434px;"></p> +<p><img alt="Entrée d'un e-mail non valide déclenchant un message d'avertissement « Veuillez saisir une adresse électronique valide »" src="fr-email.png"></p> <p>Avec l'attribut {{htmlattrxref("multiple","input")}}, l'utilisateur pourra saisir plusieurs adresses électroniques dans la même entrée (avec une virgule comme séparateur).</p> <p>Sur certains périphériques (les mobiles en particulier), un clavier virtuel différent et mieux adapté à la saisie d'adresses électroniques peut être affiché.</p> <div class="note"> -<p><strong>Note</strong>: Vous trouverez plus de détails sur la validation des formulaires dans l'article <a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaires</a>.</p> +<p><strong>Note :</strong> Vous trouverez plus de détails sur la validation des formulaires dans l'article <a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaires</a>.</p> </div> <h4 id="Champ_pour_mot_de_passe">Champ pour mot de passe</h4> <p>Ce type de champ est défini en donnant la valeur <code>password</code> à l'attribut {{htmlattrxref("type","input")}} :</p> -<pre class="brush: html notranslate"> <input type="password" id="pwd" name="pwd"></pre> +<pre class="brush: html"> <input type="password" id="pwd" name="pwd"></pre> <p>Aucune contrainte de saisie du texte n'est ajoutée, mais la valeur entrée dans le champ est masquée (avec des points ou des astérisques) afin qu'elle ne puisse pas être lue par d'autres.</p> @@ -150,17 +150,17 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <p>Ce type de champ se définit avec la valeur <code>search</code> de l'attribut {{htmlattrxref("type","input")}} :</p> -<pre class="brush: html notranslate"> <input type="search" id="search" name="search"></pre> +<pre class="brush: html"> <input type="search" id="search" name="search"></pre> <p>La principale différence entre un champ textuel et un champ de recherche est dans l'apparence — souvent, les champs de recherche sont affichés avec des coins arrondis, et/ou avec une « × » à cliquer pour effacer la valeur entrée. Toutefois, une fonction est aussi ajoutée : les valeurs saisies peuvent être automatiquement enregistrées afin d'être utilisées pour compléter des recherches sur plusieurs pages du même site.</p> -<p><img alt="Screenshots of search fields on several platforms." src="/files/4269/all-search-field.png" style="height: 235px; width: 655px;"></p> +<p><img alt="Screenshots of search fields on several platforms." src="all-search-field.png"></p> <h4 id="Champ_pour_numéro_de_téléphone">Champ pour numéro de téléphone</h4> <p>Ce type de champ se définit en donnant la valeur <code>tel</code> à l'attribut {{htmlattrxref("type","input")}} :</p> -<pre class="brush: html notranslate"> <input type="tel" id="tel" name="tel"></pre> +<pre class="brush: html"> <input type="tel" id="tel" name="tel"></pre> <p>À cause de la grande variété de formats de numéros de téléphones à travers le monde, ce type de champ n'ajoute pas de contrainte à la valeur saisie par l'utilisateur. C'est principalement une différence sémantique, bien que sur certains appareils (notamment mobiles) un clavier virtuel différent, mieux adapté à la saisie de numéros de téléphone, puisse être présenté.</p> @@ -168,25 +168,27 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <p>Ce type de champ se définit en donnant la valeur <code>url</code> à l'attribut {{htmlattrxref("type","input")}} :</p> -<pre class="brush: html notranslate"> <input type="url" id="url" name="url"></pre> +<pre class="brush: html"> <input type="url" id="url" name="url"></pre> <p>Il ajoute une contrainte de validation spéciale du champ ; le navigateur renvoie une erreur si une URL invalide est saisie.</p> -<div class="note"><strong>Note :</strong> ce n'est pas parce qu'une URL est bien formée qu'elle pointe vers un emplacement qui existe réellement.</div> +<div class="note"> + <p><strong>Note :</strong> ce n'est pas parce qu'une URL est bien formée qu'elle pointe vers un emplacement qui existe réellement.</p> +</div> <div class="note"> -<p><strong>Note :</strong> La présence de champs avec contraintes spéciales considérés comme erronés bloquent l'envoi du formulaire. De plus, leur apparence peut être adaptée afin de mettre en évidence l'erreur. Nous allons discuter de cela dans l'article <a href="/fr/docs/HTML/Formulaires/Validation_de_formulaires" title="/fr/docs/HTML/Formulaires/Validation_de_formulaire">Validation de formulaires</a>.</p> +<p><strong>Note :</strong> La présence de champs avec contraintes spéciales considérés comme erronés bloquent l'envoi du formulaire. De plus, leur apparence peut être adaptée afin de mettre en évidence l'erreur. Nous allons discuter de cela dans l'article <a href="/fr/docs/HTML/Formulaires/Validation_de_formulaires" title="/fr/docs/HTML/Formulaires/Validation_de_formulaire">Validation de formulaires</a>.</p> </div> <h3 id="Champs_texte_multilignes">Champs texte multilignes</h3> <p>Un champ texte sur plusieurs lignes se définit avec l'élément {{HTMLElement("textarea")}}, et non avec l'élément {{HTMLElement("input")}}.</p> -<pre class="brush: html notranslate"> <textarea cols="30" rows="10"></textarea></pre> +<pre class="brush: html"> <textarea cols="30" rows="10"></textarea></pre> <p>La principale différence entre un champ <code>textarea</code> et un champ monoligne est que, dans un textarea, l'utilisateur peut saisir du texte avec des sauts de ligne en dur (c'est à dire en pressant la touche <code>Retour</code>).</p> -<p><img alt="Screenshots of multi-lines text fields on several platforms." src="/files/4271/all-multi-lines-text-field.png" style="height: 330px; width: 745px;"></p> +<p><img alt="Screenshots of multi-lines text fields on several platforms." src="all-multi-lines-text-field.png"></p> <div class="note"> <p><strong>Note :</strong> Vous trouverez un exemple de champ texte multiligne sur GitHub à l'adresse <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/multi-line-text-field.html">multi-line-text-field.html</a> (voir aussi <a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/multi-line-text-field.html">directement</a>). Jetez-y un coup d'œil, et remarquez que dans la plupart des navigateurs, la zone de texte est dotée d'une poignée d'étirement en bas à droite pour permettre à l'utilisateur de la redimensionner. Cette capacité de redimensionnement peut être désactivée en réglant la propriété {{cssxref("resize")}} de la zone de texte à <code>none</code> dans les CSS.</p> @@ -239,7 +241,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <p>Une boîte à sélection est créée avec l'élément {{HTMLElement("select")}} complétée d'un ou plusieurs éléments enfants {{HTMLElement("option")}} définissant les valeurs possibles.</p> -<pre class="brush: html notranslate"> <select> +<pre class="brush: html"> <select> <option>Banane</option> <option>Cerise</option> <option>Citron</option> @@ -247,7 +249,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <p>Si nécessaire, la valeur par défaut de la boîte de sélection peut être définie en utilisant l'attribut {{htmlattrxref("selected","option")}} dans l'élément {{HTMLElement("option")}} désiré. Les éléments {{HTMLElement("option")}} peuvent être imbriqués dans des éléments {{HTMLElement("optgroup")}} pour créer des groupes de valeurs associées :</p> -<pre class="brush: html notranslate"> <select> +<pre class="brush: html"> <select> <optgroup label="Fruits"> <option>Banane</option> <option selected>Cerise</option> @@ -260,7 +262,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs </optgroup> </select></pre> -<p><img alt="Screenshots of single line select box on several platforms." src="/files/4517/all-select.png" style="height: 636px; width: 887px;"></p> +<p><img alt="Screenshots of single line select box on several platforms." src="all-select.png"></p> <p>Si un élément {{HTMLElement("option")}} est défini avec l'attribut <code>value</code>, la valeur de cet attribut est envoyée lorsque le formulaire est soumis. Si l'attribut <code>value</code> est omis, le contenu de l'élément {{HTMLElement("option")}} est utilisé comme valeur de la boîte de sélection.</p> @@ -272,15 +274,17 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <p>Dans ce cas toutefois, la boîte d'utilisateur n'affiche plus les valeurs sous forme d'un menu déroulant. Les valeurs sont toutes affichées dans une liste.</p> -<pre class="brush: html notranslate"> <select multiple> +<pre class="brush: html"> <select multiple> <option>Banane</option> <option>Cerise</option> <option>Citron</option> </select></pre> -<p><img alt="Screenshots of multi-lines select box on several platforms." src="/files/4559/all-multi-lines-select.png" style="height: 531px; width: 734px;"></p> +<p><img alt="Screenshots of multi-lines select box on several platforms." src="all-multi-lines-select.png"></p> -<div class="note"><strong>Note :</strong> tous les navigateurs prenant en charge l'élément {{HTMLElement("select")}} prennent aussi en charge l'attribut {{htmlattrxref("multiple","select")}} sur lui.</div> +<div class="note"> + <p><strong>Note :</strong> tous les navigateurs prenant en charge l'élément {{HTMLElement("select")}} prennent aussi en charge l'attribut {{htmlattrxref("multiple","select")}} sur lui.</p> +</div> <h3 id="Contenus_auto-complétés">Contenus auto-complétés</h3> @@ -290,7 +294,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <p>Une fois la liste de données affiliée au widget de formulaire, ses options s'utilisent comme complémentation du texte saisi par l'utilisateur ; cela se présente généralement à l'utilisateur sous forme d'une boîte déroulante listant des correspondances possibles avec ce qui doit être saisi dans la boîte.</p> -<pre class="brush: html notranslate"> <label for="onFruit">Quel est votre fruit préféré ?</label> +<pre class="brush: html"> <label for="onFruit">Quel est votre fruit préféré ?</label> <input type="text" id="onFruit" list="maSuggestion" /> <datalist id="maSuggestion"> <option>Pomme</option> @@ -303,9 +307,11 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <option>Poire</option> </datalist></pre> -<div class="note"><strong>Note :</strong> Selon la <a href="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list" rel="external">norme HTML</a>, l'attribut {{htmlattrxref("list","input")}} et l'élément {{HTMLElement("datalist")}} peuvent s'utiliser avec tout type de widget nécessitant une saisie utilisateur. Toutefois, les modalités de ce fonctionnement ne sont pas claire pour des contrôles autres que textuels (de couleur ou de date par ex.) et les divers navigateurs se comporteront de manière différente selon le cas. Pour cette raison, soyez prudent en utilisant cette fonctionnalité avec autre chose que des champs textuels.</div> +<div class="note"> + <p><strong>Note :</strong> Selon la <a href="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list" rel="external">norme HTML</a>, l'attribut {{htmlattrxref("list","input")}} et l'élément {{HTMLElement("datalist")}} peuvent s'utiliser avec tout type de widget nécessitant une saisie utilisateur. Toutefois, les modalités de ce fonctionnement ne sont pas claire pour des contrôles autres que textuels (de couleur ou de date par ex.) et les divers navigateurs se comporteront de manière différente selon le cas. Pour cette raison, soyez prudent en utilisant cette fonctionnalité avec autre chose que des champs textuels.</p> +</div> -<div><img alt="Screenshots of datalist on several platforms." src="/files/4593/all-datalist.png" style="height: 329px; width: 437px;"></div> +<div><img alt="Screenshots of datalist on several platforms." src="all-datalist.png"></div> <div> <h4 id="Prise_en_charge_de_Datalist_et_recours">Prise en charge de Datalist et recours</h4> @@ -314,22 +320,22 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <p>Pour gérer cela, voici une petite astuce offrant une bonne solution de repli pour ces navigateurs :</p> -<pre class="brush:html; line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myFruit<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Quel est votre fruit préféré ? (avec repli)<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myFruit<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>fruit<span class="punctuation token">"</span></span> <span class="attr-name token">list</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>fruitList<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>datalist</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>fruitList<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>suggestion<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>ou choisissez un fruit<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>select</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>suggestion<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>altFruit<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Pomme<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Banane<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Mûres<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Airelles<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Citron<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Litchi<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Pêche<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Poire<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>select</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>datalist</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush:html"><label for="myFruit">Quel est votre fruit préféré ? (avec repli)</label> +<input type="text" id="myFruit" name="fruit" list="fruitList"> + +<datalist id="fruitList"> + <label for="suggestion">ou choisissez un fruit</label> + <select id="suggestion" name="altFruit"> + <option>Pomme</option> + <option>Banane</option> + <option>Mûres</option> + <option>Airelles</option> + <option>Citron</option> + <option>Litchi</option> + <option>Pêche</option> + <option>Poire</option> + </select> +</datalist></pre> <p>Les navigateurs qui prennent en charge l'élément {{HTMLElement("datalist")}} ignoreront tous les éléments qui ne sont pas {{HTMLElement("option")}} et fonctionneront comme prévu. D'autre part, les navigateurs qui ne prennent pas en charge l'élément {{HTMLElement("datalist")}} afficheront l'étiquette et la boîte de sélection. Bien sûr, il y a d'autres façons de gérer ce manque de prise en charge de l'élément {{HTMLElement("datalist")}}, mais c'est la manière la plus simple (d'autres ont besoin de JavaScript).</p> @@ -337,11 +343,11 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <tbody> <tr> <th scope="row">Safari 6</th> - <td><img alt="Screenshot of the datalist element fallback with Safari on Mac OS" src="https://developer.mozilla.org/files/4583/datalist-safari.png" style="height: 32px; width: 495px;"></td> + <td><img alt="Screenshot of the datalist element fallback with Safari on Mac OS" src="https://developer.mozilla.org/files/4583/datalist-safari.png"></td> </tr> <tr> <th scope="row">Firefox 18</th> - <td><img alt="Screenshot of the datalist element with Firefox on Mac OS" src="https://developer.mozilla.org/files/4581/datalist-firefox-macos.png" style="height: 102px; width: 353px;"></td> + <td><img alt="Screenshot of the datalist element with Firefox on Mac OS" src="https://developer.mozilla.org/files/4581/datalist-firefox-macos.png"></td> </tr> </tbody> </table> @@ -354,7 +360,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <p>Il est important de noter que ces widgets ne se comportent pas tout à fait comme les autres widgets de formulaires. Pour la plupart des widgets, une fois que le formulaire est envoyé, tous les widgets dont l'attribut {{htmlattrxref("name","input")}} est défini sont envoyés, même s'ils ne sont pas renseignés. Dans le cas des éléments à cocher, leurs valeurs ne sont envoyées que s'ils sont cochés. S'ils ne sont pas cochés, rien n'est envoyé, pas même la valeur de leur attribut <code>name</code>.</p> <div class="note"> -<p><strong>Note</strong> : Vous trouverez les exemples de cette section sur GitHub à l'adresse <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/checkable-items.html">checkable-items.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html">voir directement aussi</a>).</p> +<p><strong>Note :</strong> Vous trouverez les exemples de cette section sur GitHub à l'adresse <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/checkable-items.html">checkable-items.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html">voir directement aussi</a>).</p> </div> <p>Pour un maximum de convivialité/accessibilité, il est conseillé d'entourer chaque liste d'éléments liés dans un {{htmlelement("fieldset")}}, avec un élément {{htmlelement("legend")}} fournissant une description globale de la liste. Chaque paire individuelle d'éléments {{htmlelement("label")}}/{{htmlelement("input")}} doit être contenue dans son propre élément de liste (ou similaire), comme le montrent les exemples.</p> @@ -365,22 +371,22 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <p>Une casce à cocher se crée avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur <code>checkbox</code>.</p> -<pre class="brush: html notranslate"> <input type="checkbox" <code class="language-html"><span class="tag token"><span class="attr-name token">checked</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>carrots<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>carrots<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>carrots<span class="punctuation token">"</span></span></span></code>> +<pre class="brush: html"> <input type="checkbox" checked id="carrots" name="carrots" value="carrots"> </pre> <p>Mettre l'attribut <code>checked</code> fait que la case sera cochée au chargement de la page.</p> -<p><img alt="Screenshots of check boxes on several platforms." src="/files/4595/all-checkbox.png" style="height: 198px; width: 352px;"></p> +<p><img alt="Screenshots of check boxes on several platforms." src="all-checkbox.png"></p> <h3 id="Bouton_radio">Bouton radio</h3> <p>Un bouton radio se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a la valeur <code>radio</code>.</p> -<pre class="brush: html notranslate"> <input type="radio" checked<code class="language-html"><span class="tag token"><span class="attr-name token"> id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>soup<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>meal<span class="punctuation token">"</span></span></span></code>></pre> +<pre class="brush: html"> <input type="radio" checked id="soup" name="meal"></pre> <p>Plusieurs boutons radio peuvent être liés ensemble. S'ils partagent la même valeur pour leur attribut {{htmlattrxref("name","input")}}, ils seront considérés comme faisant partie d'un seul groupe de boutons. Seulement un bouton à la fois peut être coché par groupe. Ceci signifie que si l'un d'entre eux est coché, tous les autres sont automatiquement décochés. Lorsque le formulaire est envoyé, seule la valeur du bouton coché est envoyée. Si aucun des boutons n'est coché, l'ensemble des boutons du groupe est considéré comme étant dans un état inconnu et aucune valeur n'est envoyée avec le formulaire.</p> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><fieldset> +<pre class="brush: html"><fieldset> <legend>Quel est votre mets préféré ?</legend> <ul> <li> @@ -396,9 +402,9 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <input type="radio" id="pizza" name="meal" value="pizza"> </li> </ul> -</fieldset></code></pre> +</fieldset></pre> -<p><img alt="Screenshots of radio buttons on several platforms." src="/files/4597/all-radio.png" style="height: 198px; width: 352px;"></p> +<p><img alt="Screenshots of radio buttons on several platforms." src="all-radio.png"></p> <h2 id="Boutons">Boutons</h2> @@ -417,7 +423,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <h3 id="submit">submit</h3> -<pre class="brush: html notranslate"> <button type="submit"> +<pre class="brush: html"> <button type="submit"> Ceci est un <br><strong>bouton d'envoi</strong> </button> @@ -425,7 +431,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <h3 id="reset">reset</h3> -<pre class="brush: html notranslate"> <button type="reset"> +<pre class="brush: html"> <button type="reset"> Ceci est un <br><strong>bouton de réinitialisation</strong> </button> @@ -433,7 +439,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <h3 id="anonymous">anonymous</h3> -<pre class="brush: html notranslate"> <button type="button"> +<pre class="brush: html"> <button type="button"> Ceci est un <br><strong>bouton lambda</strong> </button> @@ -446,7 +452,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <li>Dans le cas des éléments {{HTMLElement("button")}}, il est possible d'avoir une valeur différente de l'étiquette du bouton (toutefois, ceci ne peut être utilisé pour les versions antérieures à la version 8 d'Internet Explorer).</li> </ul> -<p><img alt="Screenshots of buttons on several platforms." src="/files/4599/all-buttons.png" style="height: 235px; width: 464px;"></p> +<p><img alt="Screenshots of buttons on several platforms." src="all-buttons.png"></p> <p>Techniquement parlant, il n'y a pratiquement pas de différence entre un bouton défini avec l'élément {{HTMLElement("button")}} ou l'élément {{HTMLElement("input")}}. La seule différence à noter réside dans l'étiquette du bouton lui-même. Dans un élément {{HTMLElement("input")}}, l'étiquette ne peut être constituée que de données de type caractère, alors que dans un élément {{HTMLElement("button")}}, l'étiquette peut être mise sous HTML, de sorte qu'elle peut être mise en forme en conséquence.</p> @@ -467,7 +473,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <h4 id="Exemple">Exemple</h4> -<pre class="brush: html notranslate"> <input type="number" <code class="language-html"><span class="tag token"><span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>age<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>age<span class="punctuation token">"</span></span></span></code> min="1" max="10" step="2"></pre> +<pre class="brush: html"> <input type="number" name="age" id="age" min="1" max="10" step="2"></pre> <p>Ceci créé un widget pour un nombre dont la valeur est comprise entre 1 et 10 et dont les boutons d'incrémentation/décrémentation modifient la valeur par pas de 2.</p> @@ -479,29 +485,28 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <h4 id="Exemple_2">Exemple</h4> -<pre class="brush: html line-numbers language-html notranslate"> <code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>range<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beans<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beans<span class="punctuation token">"</span></span> <span class="attr-name token">min</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span> <span class="attr-name token">max</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>500<span class="punctuation token">"</span></span> <span class="attr-name token">step</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span><span class="punctuation token">> -</span></span></code></pre> +<pre class="brush: html"><input type="range" name="beans" id="beans" min="0" max="500" step="10"></pre> <p>Cet exemple créé un curseur dont les valeurs varient entre 0 et 500, et dont les bouton d'incrément/décrément font varier la valeur de ±10.</p> <p>Un problème avec les curseurs est qu'il n'offrent aucun moyen visue de savoir quelle est leur valeur courante. Il est nécessaire d'ajouter cela vous‑même à l'aide de JavaScript, mais c'est assez facile. Dans cet exemple nous ajoutons un élément {{htmlelement("span")}} dans lequel nous écrivons la valeur courante du curseur et la mettons à jour quand elle est modifiée.</p> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beans<span class="punctuation token">"</span></span><span class="punctuation token">>Combien de haricots pouvez‑vous manger </span></span>?<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>range<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beans<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beans<span class="punctuation token">"</span></span> <span class="attr-name token">min</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span> <span class="attr-name token">max</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>500<span class="punctuation token">"</span></span> <span class="attr-name token">step</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beancount<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><label for="beans">Combien de haricots pouvez‑vous manger ?</label> +<input type="range" name="beans" id="beans" min="0" max="500" step="10"> +<span class="beancount"></span></pre> <p>et en JavaScript :</p> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">var</span> beans <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'#beans'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> count <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.beancount'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<pre class="brush: js">var beans = document.querySelector('#beans'); +var count = document.querySelector('.beancount'); -count<span class="punctuation token">.</span>textContent <span class="operator token">=</span> beans<span class="punctuation token">.</span>value<span class="punctuation token">;</span> +count.textContent = beans.value; -beans<span class="punctuation token">.</span>oninput <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - count<span class="punctuation token">.</span>textContent <span class="operator token">=</span> beans<span class="punctuation token">.</span>value<span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +beans.oninput = function() { + count.textContent = beans.value; +}</pre> -<p>Ici nous stockons dans deux variables les références du curseur et celle de <code>span</code>, puis nous réglons immédiatement le <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent">textContent</a></code> de <code>span</code> à la valeur courante <code>value</code> de l'entrée. Enfin, nous avons mis en place un gestionnaire d'événements oninput de sorte que chaque fois que le curseur de plage est déplacé, le <code>textContent</code> de <code>span</code> est mis à jour avec la nouvelle valeur de l'entrée.</p> +<p>Ici nous stockons dans deux variables les références du curseur et celle de <code>span</code>, puis nous réglons immédiatement le <code><a href="/fr/docs/Web/API/Node/textContent">textContent</a></code> de <code>span</code> à la valeur courante <code>value</code> de l'entrée. Enfin, nous avons mis en place un gestionnaire d'événements oninput de sorte que chaque fois que le curseur de plage est déplacé, le <code>textContent</code> de <code>span</code> est mis à jour avec la nouvelle valeur de l'entrée.</p> <p>L'attribut <code>range</code> pour <code>input</code> n'est pas pris en charge dans les versions d'Internet Explorer dont le numéro est inférieur à 10.</p> @@ -515,32 +520,34 @@ beans<span class="punctuation token">.</span>oninput <span class="operator token <p>Cette valeur d'attribut créé un widget pour afficher et sélectionner une date et une heure quelque soit le fuseau horaire.</p> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><input type="datetime-local" name="datetime" id="datetime"></code></pre> +<pre class="brush: html"><input type="datetime-local" name="datetime" id="datetime"></pre> <h4 id="month"><code>month</code></h4> <p>Cette valeur d'attribut créé un widget pour afficher et sélectionner un mois dans une année donnée.</p> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><input type="month" name="month" id="month"></code></pre> +<pre class="brush: html"><input type="month" name="month" id="month"></pre> <h4 id="time"><code>time</code></h4> <p>Cette valeur d'attribut créé un widget pour afficher et sélectionner un horaire.</p> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><input type="time" name="time" id="time"></code></pre> +<pre class="brush: html"><input type="time" name="time" id="time"></pre> <h4 id="week"><code>week</code></h4> <p>Cette valeur d'attribut crée un widget pour afficher et sélectionner une semaine et l'année correspondante.</p> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><input type="week" name="week" id="week"></code></pre> +<pre class="brush: html"><input type="week" name="week" id="week"></pre> <p>Tous les contrôles de sélection de date et heure peuvent être contraints à l'aide des attributs {{htmlattrxref("min","input")}} et {{htmlattrxref("max","input")}}.</p> -<pre class="brush: html notranslate"> <label for="maDate">Quand êtes vous disponible cet été ?</label> +<pre class="brush: html"> <label for="maDate">Quand êtes vous disponible cet été ?</label> <input type="date" min="2013-06-01" max="2013-08-31" id="maDate"></pre> -<p class="warning"><strong>Attention :</strong> Les widgets de date et heure sont encore peu pris en charge. Au moment de la rédaction de cet article, Chrome, Edge et Opera les prennent bien en charge, mais il n'y a pas de prise en charge dans Internet Explorer et Firefox et Safari n'ont qu'une prise en charge lacunaire de ces derniers.</p> +<div class="warning"> + <p><strong>Attention :</strong> Les widgets de date et heure sont encore peu pris en charge. Au moment de la rédaction de cet article, Chrome, Edge et Opera les prennent bien en charge, mais il n'y a pas de prise en charge dans Internet Explorer et Firefox et Safari n'ont qu'une prise en charge lacunaire de ces derniers.</p> +</div> <h3 id="Sélecteur_de_couleur">Sélecteur de couleur</h3> @@ -548,7 +555,7 @@ beans<span class="punctuation token">.</span>oninput <span class="operator token <p>Un widget de sélection de couleur se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur <code>color</code>.</p> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>color<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>color<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>color<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><input type="color" name="color" id="color"></pre> <p>Attention : la prise en charge du widget <code>color</code> n'est pas très bonne actuellement. Il n'y a aucune prise en charge dans Internet Explorer, ni actuellement dans Safari. Les autres navigateurs majeurs le prennent en charge.</p> @@ -557,12 +564,12 @@ beans<span class="punctuation token">.</span>oninput <span class="operator token <p>Il existe d'autres types de widgets qui ne peuvent pas être classés facilement à cause de leur comportement très particulier, mais qui sont toujours très utiles.</p> <div class="note"> -<p id="Sélection_de_fichier"><strong>Note </strong>: Vous trouverez les exemples de cette section sur GitHub à l'adresse <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/other-examples.html">other-examples.html</a> (à voir aussi<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/other-examples.html"> directement</a>).</p> +<p><strong>Note :</strong> Vous trouverez les exemples de cette section sur GitHub à l'adresse <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/other-examples.html">other-examples.html</a> (à voir aussi<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/other-examples.html"> directement</a>).</p> </div> <h3 id="Sélection_de_fichier_2">Sélection de fichier</h3> -<p>Les formulaires HTML permettent d'envoyer des fichiers à un serveur. Cette action spécifique est détaillée dans l'article « <a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires" title="/fr/docs/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi et extraction des données de formulaire</a> ». Le widget de sélection de fichier permet à l'utilisateur de choisir un ou plusieurs fichiers à envoyer.</p> +<p>Les formulaires HTML permettent d'envoyer des fichiers à un serveur. Cette action spécifique est détaillée dans l'article « <a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires" title="/fr/docs/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi et extraction des données de formulaire</a> ». Le widget de sélection de fichier permet à l'utilisateur de choisir un ou plusieurs fichiers à envoyer.</p> <p>Pour créer un widget de sélection de fichier, vous devez utiliser un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur <code>file</code>. Les types de fichiers acceptés peuvent être contraints en utilisant l'attribut {{htmlattrxref("accept","input")}}. De plus, si vous souhaitez permettre à l'utilisateur de choisir plusieurs fichiers, vous pouvez le faire en ajoutant l'attribut {{htmlattrxref("multiple","input")}}.</p> @@ -570,7 +577,7 @@ beans<span class="punctuation token">.</span>oninput <span class="operator token <p>Dans cet exemple, le widget de sélection de fichiers permet de sélectionner des fichiers d'images. L'utilisateur peut sélectionner plusieurs fichiers.</p> -<pre class="brush: html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">accept</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>image/*<span class="punctuation token">"</span></span> <span class="attr-name token">multiple</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><input type="file" name="file" id="file" accept="image/*" multiple></pre> <h3 id="Contenu_caché">Contenu caché</h3> @@ -578,7 +585,7 @@ beans<span class="punctuation token">.</span>oninput <span class="operator token <p>Si vous créez un tel élément, il est obligatoire de définir ses attributs <code>name</code> et <code>value</code> :</p> -<pre class="brush: html notranslate"> <input type="hidden" <code class="language-html"><span class="tag token"><span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>timestamp<span class="punctuation token">"</span></span> </span></code>name="timestamp" value="1286705410"></pre> +<pre class="brush: html"> <input type="hidden" id="timestamp" name="timestamp" value="1286705410"></pre> <h3 id="Image-bouton">Image-bouton</h3> @@ -586,7 +593,7 @@ beans<span class="punctuation token">.</span>oninput <span class="operator token <p>Une image-bouton se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur <code>image</code>. Cet élément accepte exactement le même ensemble d'attributs que l'élément {{HTMLElement("img")}}, en plus de tous les attributs valides pour n'importe quel bouton de formulaire.</p> -<pre class="brush: html notranslate"> <input type="image" alt="Click me!" src="my-img.png" width="80" height="30" /></pre> +<pre class="brush: html"> <input type="image" alt="Click me!" src="my-img.png" width="80" height="30" /></pre> <p>Si l'image-bouton est utilisée pour envoyer un formulaire, ce widget n'envoie pas sa valeur mais les coordonnées X et Y du clic sur l'image (les coordonnées sont relatives à l'image, ce qui veut dire que le coin supérieur gauche représente les coordonnées 0, 0). Les coordonnées sont envoyées sous la forme de deux paires de clé/valeur :</p> @@ -597,9 +604,9 @@ beans<span class="punctuation token">.</span>oninput <span class="operator token <p>Lorsque vous cliquez sur l'image dans ce formulaire, vous êtes redirigés une URL du type suivant :</p> -<pre class="notranslate"> http://foo.com?pos.x=123&pos.y=456</pre> +<pre> http://foo.com?pos.x=123&pos.y=456</pre> -<p>C'est une façon très commode de construire une « hot map » (cartographie des parties d'une page Internet le plus souvent balayées par le regard des lecteurs). La manière d'envoyer et d'extraire ces valeurs est détaillée dans l'article <span>« </span><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires" title="/fr/docs/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires"><span>Envoi des données de formulaire</span></a> ».</p> +<p>C'est une façon très commode de construire une « hot map » (cartographie des parties d'une page Internet le plus souvent balayées par le regard des lecteurs). La manière d'envoyer et d'extraire ces valeurs est détaillée dans l'article « <a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires" title="/fr/docs/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a> ».</p> <h3 id="Compteurs_et_barres_de_progression">Compteurs et barres de progression</h3> @@ -609,7 +616,7 @@ beans<span class="punctuation token">.</span>oninput <span class="operator token <p>Une barre de progression représente une valeur qui évolue dans le temps jusqu'à une valeur maximale définie par l'attribut {{htmlattrxref("max","progress")}}. Une telle barre peut être créée grace à un élément {{ HTMLElement("progress")}}.</p> -<pre class="brush: html notranslate"> <progress max="100" value="75">75/100</progress></pre> +<pre class="brush: html"> <progress max="100" value="75">75/100</progress></pre> <p>Cela sert à mettre en œuvre visuellement un rapport d'avancement, comme le pourcentage du nombre total de fichiers téléchargés ou le nombre de questions posées dans un questionnaire.</p> @@ -646,7 +653,7 @@ beans<span class="punctuation token">.</span>oninput <span class="operator token <p>Une telle barre se crée avec un élément {{HTMLElement("meter")}}. Cela permet d'implémenter toute sorte d'étalonnage, par exemple une barre montrant l'espace total utilisé sur un disque, qui devient rouge si le disque commence à être plein.</p> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meter</span> <span class="attr-name token">min</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span> <span class="attr-name token">max</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>75<span class="punctuation token">"</span></span> <span class="attr-name token">low</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>33<span class="punctuation token">"</span></span> <span class="attr-name token">high</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>66<span class="punctuation token">"</span></span> <span class="attr-name token">optimum</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>75<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>meter</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter></pre> <p>Le contenu de l'élément {{HTMLElement("meter")}} est un affichage informatif de repli pour les navigateurs ne prenant pas en charge cet élément ; les technologies d'assistance vocalisent cet affichage.</p> @@ -671,7 +678,7 @@ beans<span class="punctuation token">.</span>oninput <span class="operator token <ul> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment structurer un formulaire HTML</a></li> <li>Les widgets natifs pour formulaire</li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li> diff --git a/files/fr/learn/forms/form_validation/index.html b/files/fr/learn/forms/form_validation/index.html index 137b1be959..b95ce27d09 100644 --- a/files/fr/learn/forms/form_validation/index.html +++ b/files/fr/learn/forms/form_validation/index.html @@ -1,26 +1,18 @@ --- title: Validation des données de formulaires slug: Learn/Forms/Form_validation -tags: - - Exemple - - Formulaires - - Guide - - HTML - - Intermédiaire - - JavaScript - - Web translation_of: Learn/Forms/Form_validation original_slug: Web/Guide/HTML/Formulaires/Validation_donnees_formulaire --- <div>{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires")}}</div> -<p class="summary">Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les données mises dans un formulaire par un utilisateur sont dans un format correct pour pouvoir être traitées correctement et qu'elles ne vont pas casser nos applications. Nous voulons également aider les utilisateurs à compléter les formulaires correctement et à ne pas ressentir de frustration en essayant d'utiliser les applications. La validation des données de formulaire vous aide à remplir ces objectifs — cet article indique ce qu'il est nécessaire de savoir.</p> +<p>Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les données mises dans un formulaire par un utilisateur sont dans un format correct pour pouvoir être traitées correctement et qu'elles ne vont pas casser nos applications. Nous voulons également aider les utilisateurs à compléter les formulaires correctement et à ne pas ressentir de frustration en essayant d'utiliser les applications. La validation des données de formulaire vous aide à remplir ces objectifs — cet article indique ce qu'il est nécessaire de savoir.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Notions concernant les ordinateurs, une bonne compréhension du <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML</a>, des <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a> et de <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a>.</td> + <td>Notions concernant les ordinateurs, une bonne compréhension du <a href="/fr/docs/Learn/HTML">HTML</a>, des <a href="/fr/docs/Learn/CSS">CSS</a> et de <a href="/fr/docs/Learn/JavaScript">JavaScript</a>.</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -56,7 +48,7 @@ original_slug: Web/Guide/HTML/Formulaires/Validation_donnees_formulaire <p>Vous rencontrerez différents types de validation de formulaires sur le Web :</p> -<ul style="list-style-type: disc;"> +<ul> <li>La validation côté client est la validation qui est effectuée dans le navigateur, avant que les données n'aient été soumises au serveur. Cette méthode est plus conviviale que la validation côté serveur car elle donne une réponse instantanée. Il est possible de la subdiviser encore avec : <ul> <li>la validation JavaScript, codée en JavaScript, entièrement personnalisable.</li> @@ -76,7 +68,7 @@ original_slug: Web/Guide/HTML/Formulaires/Validation_donnees_formulaire <h2 id="Utiliser_la_validation_intégrée_au_formulaire">Utiliser la validation intégrée au formulaire</h2> -<p>Une des caractéristiques de <a href="/fr/docs/HTML/HTML5">HTML5</a> est la possibilité de valider la plupart des données utilisateur sans avoir recours à des scripts. Ceci se fait en utilisant des <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">attributs de validation</a> sur les éléments de formulaire ; ils vous permettent de spécifier des règles pour une entrée de formulaire comme : une valeur doit‑elle être remplie ? y a-t-il une longueur minimale et/ou maximale des données ? doit‑elle être un nombre, une adresse e-mail ou autre chose ? doit‑elle correspondre à un modèle ? Si les données saisies suivent toutes ces règles, elles sont considérées comme valides ; si ce n'est pas le cas, elles sont considérées comme non valides.<br> +<p>Une des caractéristiques de <a href="/fr/docs/orphaned/Web/Guide/HTML/HTML5">HTML5</a> est la possibilité de valider la plupart des données utilisateur sans avoir recours à des scripts. Ceci se fait en utilisant des <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">attributs de validation</a> sur les éléments de formulaire ; ils vous permettent de spécifier des règles pour une entrée de formulaire comme : une valeur doit‑elle être remplie ? y a-t-il une longueur minimale et/ou maximale des données ? doit‑elle être un nombre, une adresse e-mail ou autre chose ? doit‑elle correspondre à un modèle ? Si les données saisies suivent toutes ces règles, elles sont considérées comme valides ; si ce n'est pas le cas, elles sont considérées comme non valides.<br> Quand un élément est valide :</p> <ul> @@ -91,37 +83,31 @@ original_slug: Web/Guide/HTML/Formulaires/Validation_donnees_formulaire <li>si l'utilisateur essaie d'envoyer le formulaire, le navigateur le bloquera et affichera un message d'erreur.</li> </ul> -<h3 id="Contraintes_de_validation_sur_les_éléments_d'entrée_—_simple_début">Contraintes de validation sur les éléments d'entrée — simple début</h3> - - +<h3 id="Contraintes_de_validation_sur_les_éléments_input_—_simple_début">Contraintes de validation sur les éléments input — simple début</h3> <p>Dans cette section, nous examinerons quelques unes des diverses fonctionnalités HTML5 peuvant être utilisées pour valider des éléments d'{{HTMLElement("input")}}.</p> <p>Commençons par un exemple simple — une entrée ouvrant un choix, selon votre préférence, entre banane ou cerise. Il faut un texte {{HTMLElement("input")}} simple avec une étiquette correspondante et un {{htmlelement("button")}} de soumission. Le code source est sur GitHub à l'adresse <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> et un exemple « live » ci-dessous :</p> -<div class="hidden"> -<h6 id="Hidden_code">Hidden code</h6> - -<pre class="brush: html"><form> +<pre class="brush: html hidden"><form> <label for="choose">Préférez‑vous la banane ou la cerise ?</label> <input id="choose" name="i_like"> <button>Soumettre</button> </form></pre> -<pre class="brush: css">input:invalid { +<pre class="brush: css hidden">input:invalid { border: 2px dashed red; } input:valid { border: 1px solid black; }</pre> -</div> -<p>{{EmbedLiveSample("Hidden_code", "100%", 55)}}</p> +<p>{{EmbedLiveSample("Contraintes_de_validation_sur_les_éléments_input_—_simple_début", "100%", 55)}}</p> <p>Pour commencer, faites une copie de fruit-start.html dans un nouveau répertoire sur votre disque dur.</p> -<h3 id="L'attribut_required">L'attribut required</h3> +<h3 id="Attribut_required">Attribut required</h3> <p>La fonctionnalité de validation HTML5 la plus simple à utiliser est l'attribut {{htmlattrxref("required", "input")}}} — si vous voulez rendre une entrée obligatoire, vous pouvez marquer l'élément en utilisant cet attribut. Lorsque cet attribut est mis, le formulaire ne sera pas soumis (et affichera un message d'erreur) si l'entrée est vide (l'entrée sera également considérée comme invalide).</p> @@ -145,11 +131,11 @@ input:valid { <p>L'entrée a une bordure en pointillés rouge vif lorsqu'elle n'est pas valide, et une bordure noire plus subtile lorsqu'elle est valide. Essayez le nouveau comportement dans l'exemple ci-dessous :</p> -<p>{{EmbedLiveSample("L'attribut_required", "100%", 55)}}</p> +<p>{{EmbedLiveSample("Attribut_required", "100%", 55)}}</p> <h3 id="Validation_selon_une_expression_régulière">Validation selon une expression régulière</h3> -<p>Une autre fonctionnalité de validation très courante est l'attribut {{htmlattrxref("pattern", "input")}}, qui attend une <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">expression régulière</a> comme valeur. Une expression régulière (regex) est un modèle qui peut être utilisé pour faire correspondre des combinaisons de caractères dans des chaînes de texte, de sorte qu'elles sont idéales pour la validation de formulaires (ainsi que diverses autres utilisations en JavaScript). Les Regex sont assez complexes et nous n'avons pas l'intention de vous les enseigner de manière exhaustive dans cet article.</p> +<p>Une autre fonctionnalité de validation très courante est l'attribut {{htmlattrxref("pattern", "input")}}, qui attend une <a href="/fr/docs/Web/JavaScript/Guide/Regular_Expressions">expression régulière</a> comme valeur. Une expression régulière (regex) est un modèle qui peut être utilisé pour faire correspondre des combinaisons de caractères dans des chaînes de texte, de sorte qu'elles sont idéales pour la validation de formulaires (ainsi que diverses autres utilisations en JavaScript). Les Regex sont assez complexes et nous n'avons pas l'intention de vous les enseigner de manière exhaustive dans cet article.</p> <p>Vous trouverez ci-dessous quelques exemples pour vous donner une idée de base de leur fonctionnement :</p> @@ -184,21 +170,19 @@ input:valid { <p>Voyons un exemple — mettons à jour notre HTML en y ajoutant un attribut <code>pattern</code>, ainsi :</p> -<pre class="brush: html line-numbers language-html"><code class="language-html"><form> +<pre class="brush: html"><form> <label for="choose">Préférez‑vous la banane ou la cerise ?</label> <input id="choose" name="i_like" required pattern="banane|cerise"> <button>Soumettre</button> -</form></code></pre> +</form></pre> -<div class="hidden"> -<pre class="brush: css line-numbers language-css"><code class="language-css">input:invalid { +<pre class="brush: css">input:invalid { border: 2px dashed red; } input:valid { border: 1px solid black; -}</code></pre> -</div> +}</pre> <p>{{EmbedLiveSample("Validation_selon_une_expression_régulière", "100%", 55)}}</p> @@ -211,7 +195,7 @@ input:valid { </div> <div class="note"> -<p><strong>Note : </strong>L'élément {{HTMLElement("textarea")}} ne prend pas en charge l'attribut {{htmlattrxref("pattern", "input")}}.</p> +<p><strong>Note :</strong> L'élément {{HTMLElement("textarea")}} ne prend pas en charge l'attribut {{htmlattrxref("pattern", "input")}}.</p> </div> <h3 id="Limitation_de_la_taille_des_entrées">Limitation de la taille des entrées</h3> @@ -224,7 +208,7 @@ input:valid { <p>Supprimez maintenant le contenu de l'élément <code><body></code> et remplacez-le par le suivant :</p> -<pre class="brush: html line-numbers language-html"><code class="language-html"><form> +<pre class="brush: html"><form> <div> <label for="choose">Préférez‑vous la banane ou la cerise ?</label> <input id="choose" name="i_like" required minlength="6" maxlength="6"> @@ -236,15 +220,14 @@ input:valid { <div> <button>Soumettre</button> </div> -</form></code></pre> +</form></pre> <ul> <li>Ici, nous avons donné au champ de texte une taille minimale et maximale de 6 caractères — la même que celle de <em>banane</em> ou <em>cerise</em>. La saisie de moins de 6 caractères s'affichera comme non valide et la saisie de plus de 6 caractères ne sera pas possible dans la plupart des navigateurs.</li> <li>Nous avons également contraint le champ <code>number</code> à un <code>min</code> de 1 et un <code>max </code>de 10 — les nombres entrés hors de cette plage seront affichés comme non valides, et vous ne pourrez pas utiliser les flèches d'incrémentation/décrémentation pour porter la valeur en dehors de cette plage.</li> </ul> -<div class="hidden"> -<pre class="line-numbers language-html"><code class="language-html">input:invalid { +<pre class="brush: html hidden">input:invalid { border: 2px dashed red; } @@ -254,113 +237,112 @@ input:valid { div { margin-bottom: 10px; -}</code></pre> -</div> +}</pre> <p>Voici cet exemple s'exécutant en « live » :</p> <p>{{EmbedLiveSample('Limitation_de_la_taille_des_entrées', "100%", 100)}}</p> <div class="note"> -<p><strong>Note</strong>: <code><input type="number"></code> (et d'autres types, comme <code>range</code>) acceptent aussi un attribut {{htmlattrxref("step", "input")}} qui spécifie l'incrément en plus ou en moins de la valeur quand les contrôles d'entrée sont utilisés (comme les boutons <kbd>^</kbd> et <kbd>v</kbd>).</p> +<p><strong>Note :</strong> <code><input type="number"></code> (et d'autres types, comme <code>range</code>) acceptent aussi un attribut {{htmlattrxref("step", "input")}} qui spécifie l'incrément en plus ou en moins de la valeur quand les contrôles d'entrée sont utilisés (comme les boutons <kbd>^</kbd> et <kbd>v</kbd>).</p> </div> <h3 id="Exemple_complet">Exemple complet</h3> <p>Voici un exemple complet montrant l'utilisation des fonctionnalités HTML intégrées pour la validation :</p> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>fieldset</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>legend</span><span class="punctuation token">>Qualité</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>abbr</span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Ce champ est obligatoire<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>*<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>abbr</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>legend</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">required</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>title<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>r1<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Mr<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>r1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>M.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">required</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>title<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>r2<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Ms<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>r2<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Mme.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>fieldset</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>n1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Quel est votre âge ?<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="comment token"><!-- L'attribut pattern peut servir de recours pour les navigateurs dont le type number n'est +<pre class="brush: html"><form> + <p> + <fieldset> + <legend>Qualité<abbr title="Ce champ est obligatoire">*</abbr></legend> + <input type="radio" required name="title" id="r1" value="Mr"><label for="r1">M.</label> + <input type="radio" required name="title" id="r2" value="Ms"><label for="r2">Mme.</label> + </fieldset> + </p> + <p> + <label for="n1">Quel est votre âge ?</label> + <!-- L'attribut pattern peut servir de recours pour les navigateurs dont le type number n'est pas implémenté pour input mais qui prennent en charge l'attribut pattern. Veuillez noter que les navigateurs prenant en charge l'attribut pattern ne signalent pas d'erreur quand - il est utilisé avec un champ number. Seule son utilisation ici agit en tant que recours. --></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>number<span class="punctuation token">"</span></span> <span class="attr-name token">min</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>12<span class="punctuation token">"</span></span> <span class="attr-name token">max</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">step</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>n1<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>age<span class="punctuation token">"</span></span> - <span class="attr-name token">pattern</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>\d+<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t1<span class="punctuation token">"</span></span><span class="punctuation token">>Quel est votre fruit </span></span>favori ?<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>abbr</span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Ce champ est obligatoire<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>*<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>abbr</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t1<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>fruit<span class="punctuation token">"</span></span> <span class="attr-name token">list</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>l1<span class="punctuation token">"</span></span> <span class="attr-name token">required</span> - <span class="attr-name token">pattern</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>[Bb]anane|[Cc]erise|[Cc]itron|[Ff]raise|[Oo]range|[Pp]omme<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>datalist</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>l1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Banane<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Cerise<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">> - </span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">>Citron</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">> -</span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">>Fraise</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Orange<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Pomme<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>datalist</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t2<span class="punctuation token">"</span></span><span class="punctuation token">>Quelle est votre</span></span> adresse électronique ?<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>email<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t2<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>email<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t3<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Laissez un court message<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t3<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>msg<span class="punctuation token">"</span></span> <span class="attr-name token">maxlength</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>140<span class="punctuation token">"</span></span> <span class="attr-name token">rows</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>5<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>textarea</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span><span class="punctuation token">></span></span>Soumettre<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span></code></pre> - -<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">body </span><span class="punctuation token">{</span> - <span class="property token">font</span><span class="punctuation token">:</span> <span class="number token">1</span>em sans-serif<span class="punctuation token">;</span> - <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> - <span class="property token">margin</span> <span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token">form </span><span class="punctuation token">{</span> - <span class="property token">max-width</span><span class="punctuation token">:</span> <span class="number token">300</span>px<span class="punctuation token">;</span> - <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> - <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">0</span> <span class="number token">5</span>px<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token">p > label </span><span class="punctuation token">{</span> - <span class="property token">display</span><span class="punctuation token">:</span> block<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token">input[type=text], + il est utilisé avec un champ number. Seule son utilisation ici agit en tant que recours. --> + <input type="number" min="12" max="120" step="1" id="n1" name="age" + pattern="\d+"> + </p> + <p> + <label for="t1">Quel est votre fruit favori ?<abbr title="Ce champ est obligatoire">*</abbr></label> + <input type="text" id="t1" name="fruit" list="l1" required + pattern="[Bb]anane|[Cc]erise|[Cc]itron|[Ff]raise|[Oo]range|[Pp]omme"> + <datalist id="l1"> + <option>Banane</option> + <option>Cerise</option> + <option>Citron</option> + <option>Fraise</option> + <option>Orange</option> + <option>Pomme</option> + </datalist> + </p> + <p> + <label for="t2">Quelle est votre adresse électronique ?</label> + <input type="email" id="t2" name="email"> + </p> + <p> + <label for="t3">Laissez un court message</label> + <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea> + </p> + <p> + <button>Soumettre</button> + </p> +</form></pre> + +<pre class="brush: css">body { + font: 1em sans-serif; + padding: 0; + margin : 0; +} + +form { + max-width: 300px; + margin: 0; + padding: 0 5px; +} + +p > label { + display: block; +} + +input[type=text], input[type=email], input[type=number], textarea, -fieldset </span><span class="punctuation token">{</span> -<span class="comment token">/* requis pour composer de manière appropriée les éléments - de formulaire sur les navigateurs fondés sur WebKit */</span> - <span class="property token">-webkit-appearance</span><span class="punctuation token">:</span> none<span class="punctuation token">;</span> +fieldset { +/* requis pour composer de manière appropriée les éléments + de formulaire sur les navigateurs fondés sur WebKit */ + -webkit-appearance: none; - <span class="property token">width</span> <span class="punctuation token">:</span> <span class="number token">100%</span><span class="punctuation token">;</span> - <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#333</span><span class="punctuation token">;</span> - <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> + width : 100%; + border: 1px solid #333; + margin: 0; - <span class="property token">font-family</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span> - <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">90%</span><span class="punctuation token">;</span> + font-family: inherit; + font-size: 90%; - <span class="property token">-moz-box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span> - <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span> -<span class="punctuation token">}</span> + -moz-box-sizing: border-box; + box-sizing: border-box; +} -<span class="selector token">input<span class="pseudo-class token">:invalid</span> </span><span class="punctuation token">{</span> - <span class="property token">box-shadow</span><span class="punctuation token">:</span> <span class="number token">0</span> <span class="number token">0</span> <span class="number token">5</span>px <span class="number token">1</span>px red<span class="punctuation token">;</span> -<span class="punctuation token">}</span> +input:invalid { + box-shadow: 0 0 5px 1px red; +} -<span class="selector token">input<span class="pseudo-class token">:focus</span><span class="pseudo-class token">:invalid</span> </span><span class="punctuation token">{</span> - <span class="property token">outline</span><span class="punctuation token">:</span> none<span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +input:focus:invalid { + outline: none; +}</pre> <p>{{EmbedLiveSample("Exemple_complet", "100%", 450)}}</p> -<h3 id="Messages_d'erreur_personnalisés">Messages d'erreur personnalisés</h3> +<h3 id="Messages_adaptés_pour_les_erreurs">Messages adaptés pour les erreurs</h3> <p>Comme nous avons vu dans les exemples précédents, à chaque fois qu'un utilisateur tente d'envoyer un formulaire invalide, le navigateur affiche un message d'erreur. La manière dont le message est affiché dépend du navigateur.</p> @@ -382,22 +364,22 @@ fieldset </span><span class="punctuation token">{</span> <tbody> <tr> <td>Firefox 17 (Windows 7)</td> - <td><img alt="Example of an error message with Firefox in French on an English page" src="/files/4329/error-firefox-win7.png" style="height: 97px; width: 228px;"></td> + <td><img alt="Example of an error message with Firefox in French on an English page" src="error-firefox-win7.png"></td> </tr> <tr> <td>Chrome 22 (Windows 7)</td> - <td><img alt="Example of an error message with Chrome in French on an English page" src="/files/4327/error-chrome-win7.png" style="height: 96px; width: 261px;"></td> + <td><img alt="Example of an error message with Chrome in French on an English page" src="error-chrome-win7.png"></td> </tr> <tr> <td>Opera 12.10 (Mac OSX)</td> - <td><img alt="Example of an error message with Opera in French on an English page" src="/files/4331/error-opera-macos.png" style="height: 83px; width: 218px;"></td> + <td><img alt="Example of an error message with Opera in French on an English page" src="error-opera-macos.png"></td> </tr> </tbody> </table> <p>Pour personnaliser l'apparence et le texte de ces messages, vous devez utiliser JavaScript ; il n'est pas possible de l'implémenter en utilisant uniquement HTML et CSS.</p> -<p>HMTL5 fournit une <a href="http://www.w3.org/TR/html5/forms.html#the-constraint-validation-api">API de contraintes de validation</a> pour vérifier et personnaliser l'état des élément d'un formulaire. Il est possible, entre autres, de changer le texte des messages d'erreur. Voici un court exemple :</p> +<p>HMTL5 fournit une <a href="https://www.w3.org/TR/html5/forms.html#the-constraint-validation-api">API de contraintes de validation</a> pour vérifier et personnaliser l'état des élément d'un formulaire. Il est possible, entre autres, de changer le texte des messages d'erreur. Voici un court exemple :</p> <pre class="brush: html"><form> <label for="mail">Pourriez-vous nous fournir une adresse mail ?</label> @@ -405,7 +387,7 @@ fieldset </span><span class="punctuation token">{</span> <button>Envoyer</button> </form></pre> -<p>En JavaScript, il faut appeler la méthode <a href="/en-US/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()" title="/en-US/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()"><code>setCustomValidity()</code></a>:</p> +<p>En JavaScript, il faut appeler la méthode <a href="/fr/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()" title="/en-US/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()"><code>setCustomValidity()</code></a>:</p> <pre class="brush: js">var email = document.getElementById("mail"); @@ -417,7 +399,7 @@ email.addEventListener("keyup", function (event) { } });</pre> -<p>{{EmbedLiveSample("Messages_d'erreur_personnalisés", "100%", 50)}}</p> +<p>{{EmbedLiveSample("Messages_adaptés_pour_les_erreurs", "100%", 50)}}</p> <h2 id="Validation_de_formulaires_avec_JavaScript">Validation de formulaires avec JavaScript</h2> @@ -511,7 +493,7 @@ email.addEventListener("keyup", function (event) { <p>Pour les anciens navigateurs, il existe <a href="https://hyperform.js.org/">une prothèse d'émulation (<em>polyfill</em>) comme Hyperform</a>, pour compenser le défaut de prise en charge de cette API. Comme vous utilisez déjà JavaScript, l'utilisation d'une prethèse d'émulation n'est pas un souci supplémentaire pour la conception ou l'implémentation de votre site ou application Web.</p> -<h4 id="Exemple_d'utilisation_de_l'API_de_validation_des_contraintes">Exemple d'utilisation de l'API de validation des contraintes</h4> +<h4 id="Exemple_utilisant_la_validation_des_contraintes">Exemple utilisant la validation des contraintes</h4> <p>Voyons comment utiliser l'API pour créer des messages d'erreur personnalisés. Tout d'abord, le HTML :</p> @@ -528,7 +510,7 @@ email.addEventListener("keyup", function (event) { <p>Ce formulaire simple utilise l'attribut {{htmlattrxref("novalidate","form")}} pour désactiver la validation automatique par le navigateur ; cela permet donc à notre script d'avoir le contrôle sur la validation. Toutefois, cela ne désactive la prise en charge par l'API de validation des contraintes, ni l'application des pseudo-classes CSS {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}} et {{cssxref(":out-of-range")}}. Cela signifie que, même si le navigateur ne vérifie pas automatiquement la validité du formulaire avant l'envoi des données, vous pouvez toujours effectuer cette validation et définir l'apparence du formulaire par vous-même.</p> -<p>L'attribut <code><a href="https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions">aria-live</a></code> garantit que nos messages d'erreur personnalisés seront affichés à tout le monde, y compris les personnes utilisant des techniques d'assistance comme des lecteurs d'écran.</p> +<p>L'attribut <code><a href="/fr/docs/Accessibility/ARIA/ARIA_Live_Regions">aria-live</a></code> garantit que nos messages d'erreur personnalisés seront affichés à tout le monde, y compris les personnes utilisant des techniques d'assistance comme des lecteurs d'écran.</p> <h5 id="CSS">CSS</h5> @@ -628,7 +610,7 @@ form.addEventListener("submit", function (event) { <p>Voici le résultat:</p> -<p>{{EmbedLiveSample("Exemple_d'utilisation_de_l'API_de_validation_des_contraintes", "100%", 130)}}</p> +<p>{{EmbedLiveSample("Exemple_utilisant_la_validation_des_contraintes", "100%", 130)}}</p> <p>L'API de validation des contraintes fournit un outil puissant pour gérer la validation des formulaires, en vous laissant un contrôle sur l'interface utilisateur bien supérieur à ce que vous auriez pu avoir avec uniquement HTML et CSS. </p> @@ -644,18 +626,17 @@ form.addEventListener("submit", function (event) { <dt>Que dois-je faire si le formulaire n'est pas valide ?</dt> <dd>C'est clairement une affaire d'interface utilisateur. Vous devez décider comment le formulaire doit se comporter : enverra-t-il quand même les données ? Devriez-vous mettre en évidence les champs qui sont en erreur ? Devriez-vous afficher des messages d'erreur ?</dd> <dt>Comment puis-je aider l'utilisateur à corriger ses données invalides?</dt> - <dd>Pour limiter la frustration de l'utilisateur, il est très important de fournir autant d'information d'aide que nécessaire pour le guider dans la correction de sa saisie. Vous devriez afficher des suggestions en amont pour que l'utilisateur sache ce qui est attendu, ainsi que des messages d'erreur clairs. Si vous souhaitez vous plonger dans les exigences d'interface utilsateur pour la validation de formulaires, voici quelques articles (en anglais) utiles que vous devriez lire :</dd> - <dd> + <dd><p>Pour limiter la frustration de l'utilisateur, il est très important de fournir autant d'information d'aide que nécessaire pour le guider dans la correction de sa saisie. Vous devriez afficher des suggestions en amont pour que l'utilisateur sache ce qui est attendu, ainsi que des messages d'erreur clairs. Si vous souhaitez vous plonger dans les exigences d'interface utilsateur pour la validation de formulaires, voici quelques articles (en anglais) utiles que vous devriez lire :</p> <ul> <li>SmashingMagazine : <a href="http://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/" rel="external">Form-Field Validation: The Errors-Only Approach</a></li> <li>SmashingMagazine : <a href="http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/" rel="external">Web Form Validation: Best Practices and Tutorials</a></li> <li>Six Revision : <a href="http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/" rel="external">Best Practices for Hints and Validation in Web Forms</a></li> - <li>A List Apart : <a href="http://www.alistapart.com/articles/inline-validation-in-web-forms/" rel="external">Inline Validation in Web Forms</a></li> + <li>A List Apart : <a href="https://www.alistapart.com/articles/inline-validation-in-web-forms/" rel="external">Inline Validation in Web Forms</a></li> </ul> </dd> </dl> -<h4 id="Exemple_qui_n'utilise_pas_l'API_de_validation_des_contraintes">Exemple qui n'utilise pas l'API de validation des contraintes</h4> +<h4 id="Exemple_sans_utilisation_de_la_validation_des_contraintes">Exemple sans utilisation de la validation des contraintes</h4> <p>Afin d'illustrer le propos, réécrivons le précédent exemple afin qu'il fonctionne avec d'anciens navigateurs:</p> @@ -672,7 +653,7 @@ form.addEventListener("submit", function (event) { <button type="submit">Envoyer</button> </form></pre> -<p>Comme vous pouvez voir, le HTML est quasiment identique; nous avons juste enlevé les fonctionnalités de validation HTML. Notez que <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> est une spécification indépendante qui n'est pas spécifiquement liée à HTML5.</p> +<p>Comme vous pouvez voir, le HTML est quasiment identique; nous avons juste enlevé les fonctionnalités de validation HTML. Notez que <a href="/fr/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> est une spécification indépendante qui n'est pas spécifiquement liée à HTML5.</p> <h5 id="CSS_2">CSS</h5> @@ -818,7 +799,7 @@ addEvent(form, "submit", function () { <p>Voici le résultat:</p> -<p>{{EmbedLiveSample("Exemple_qui_n'utilise_pas_l'API_de_validation_des_contraintes", "100%", 130)}}</p> +<p>{{EmbedLiveSample("Exemple_sans_utilisation_de_la_validation_des_contraintes", "100%", 130)}}</p> <p>Comme vous avez pu le voir, il n'est pas si difficile de créer par soi-même un système de validation. La difficulté consiste à rendre le tout assez générique pour l'utiliser à la fois sur toutes les plateformes et pour chaque formulaire que vous pourriez créer. Il existe de nombreuses bibliothèques permettant ce genre de validation de formulaire ; n'hésitez pas à les utiliser. En voici quelques exemples :</p> @@ -830,7 +811,7 @@ addEvent(form, "submit", function () { </li> <li>Greffons jQuery : <ul> - <li><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" rel="external">Validation</a><span class="hidden"> </span></li> + <li><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" rel="external">Validation</a> </li> </ul> </li> </ul> @@ -861,15 +842,15 @@ addEvent(form, "submit", function () { <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets personnalisés pour formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mise en forme des 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> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Table de compatibilité des propriétés pour les widgets de formulaire</a></li> + <li><a href="/fr/docs/Learn/Forms/Your_first_form">Mon premier formulaire HTML</a></li> + <li><a href="/fr/docs/Learn/Forms/How_to_structure_a_web_form">Comment structurer un formulaire HTML</a></li> + <li><a href="/fr/docs/Learn/Forms/Basic_native_form_controls">Les widgets natifs pour formulaire</a></li> + <li><a href="/fr/docs/Learn/Forms/Sending_and_retrieving_form_data">Envoi des données de formulaire</a></li> + <li><a href="/fr/docs/Learn/Forms/Form_validation">Validation des données de formulaire</a></li> + <li><a href="/fr/docs/Learn/Forms/How_to_build_custom_form_controls">Comment construire des widgets personnalisés pour formulaire</a></li> + <li><a href="/fr/docs/Learn/Forms/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li> + <li><a href="/fr/docs/Learn/Forms/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></li> + <li><a href="/fr/docs/Learn/Forms/Styling_web_forms">Mise en forme des formulaires HTML</a></li> + <li><a href="/fr/docs/Learn/Forms/Advanced_form_styling">Mise en forme avancée des formulaires HTML</a></li> + <li><a href="/fr/docs/Learn/Forms/Property_compatibility_table_for_form_controls">Table de compatibilité des propriétés pour les widgets de formulaire</a></li> </ul> diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.html b/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.html index e488687b73..20e96ebc26 100644 --- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.html +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.html @@ -11,9 +11,9 @@ original_slug: >- --- <p>C'est le premier exemple de code qui explique <a href="/fr/docs/Web/Guide/HTML/Forms/How_to_build_custom_form_widgets">comment construire un widget de formulaire personnalisé</a>.</p> -<h2 id="Basic_state" name="Basic_state">État initial</h2> +<h2 id="Basic_state">État initial</h2> -<h3 id="Basic_state_HTML" name="Basic_state_HTML">HTML</h3> +<h3 id="Basic_state_HTML">HTML</h3> <pre class="brush: html"><div class="select"> <span class="value">Cerise</span> @@ -26,7 +26,7 @@ original_slug: >- </ul> </div></pre> -<h3 id="Basic_state_CSS" name="Basic_state_CSS">CSS</h3> +<h3 id="Basic_state_CSS">CSS</h3> <pre class="brush: css">/* --------------- */ /* Styles Requis */ @@ -148,9 +148,9 @@ original_slug: >- <div>{{ EmbedLiveSample("Basic_state", 120, 130) }}</div> -<h2 id="Active_state" name="Active_state">État actif</h2> +<h2 id="Active_state">État actif</h2> -<h3 id="Active_state_HTML" name="Active_state_HTML">HTML</h3> +<h3 id="Active_state_HTML">HTML</h3> <pre class="brush:html"><div class="select active"> <span class="value">Cerise</span> @@ -163,7 +163,7 @@ original_slug: >- </ul> </div></pre> -<h3 id="Active_state_CSS" name="Active_state_CSS">CSS</h3> +<h3 id="Active_state_CSS">CSS</h3> <pre class="brush:css">/* --------------- */ /* Styles Requis */ @@ -284,9 +284,9 @@ original_slug: >- <div>{{ EmbedLiveSample("Active_state", 120, 130) }}</div> -<h2 id="Open_state" name="Open_state">État ouvert</h2> +<h2 id="Open_state">État ouvert</h2> -<h3 id="Open_state_HTML" name="Open_state_HTML">HTML</h3> +<h3 id="Open_state_HTML">HTML</h3> <pre class="brush:html"><div class="select active"> <span class="value">Cerise</span> @@ -299,7 +299,7 @@ original_slug: >- </ul> </div></pre> -<h3 id="Open_state_CSS" name="Open_state_CSS">CSS</h3> +<h3 id="Open_state_CSS">CSS</h3> <pre class="brush:css">/* --------------- */ /* Styles Requis */ diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_2/index.html b/files/fr/learn/forms/how_to_build_custom_form_controls/example_2/index.html index b70d286010..ac248a0470 100644 --- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_2/index.html +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_2/index.html @@ -10,7 +10,7 @@ original_slug: >- --- <p>Ceci est le deuxième exemple expliquant comment <a href="/fr/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">construire un formulaire personnalisé</a>.</p> -<h2 id="JS" name="JS">JS</h2> +<h2 id="JS">JS</h2> <h3 id="HTML_Content">HTML Content</h3> @@ -174,7 +174,7 @@ original_slug: >- <p>{{ EmbedLiveSample('JS', 120, 130) }}</p> -<h2 id="No_JS" name="No_JS">Sans JS</h2> +<h2 id="No_JS">Sans JS</h2> <h3 id="HTML_Content_2">HTML Content</h3> diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.html b/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.html index 5140b97c20..2967d9d181 100644 --- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.html +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.html @@ -8,9 +8,9 @@ translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_3 original_slug: >- Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_3 --- -<p>Ceci est le troisième exemple expliquant comment <a href="https://developer.mozilla.org/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">construire des widgets de formulaire personnalisés</a>.</p> +<p>Ceci est le troisième exemple expliquant comment <a href="/fr/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">construire des widgets de formulaire personnalisés</a>.</p> -<h2 id="Change_states" name="Change_states">Changement d'état</h2> +<h2>Changement d'état</h2> <h3 id="Contenu_HTML">Contenu HTML</h3> @@ -245,4 +245,4 @@ window.addEventListener('load', function () { <h3 id="Résultat">Résultat</h3> -<p>{{ EmbedLiveSample('Change_states') }}</p> +<p>{{ EmbedLiveSample('Changement_détat') }}</p> diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_4/index.html b/files/fr/learn/forms/how_to_build_custom_form_controls/example_4/index.html index e1d738ee61..dc6f31576c 100644 --- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_4/index.html +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_4/index.html @@ -12,9 +12,9 @@ translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_4 original_slug: >- Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_4 --- -<p>Ceci est le quatrième exemple expliquant <a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">comment construire des widgets de formulaire personnalisés</a>.</p> +<p>Ceci est le quatrième exemple expliquant <a href="/fr/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">comment construire des widgets de formulaire personnalisés</a>.</p> -<h2 id="Change_states" name="Change_states">Changement d'état</h2> +<h2>Changement d'état</h2> <h3 id="Contenu_HTML">Contenu HTML</h3> @@ -295,4 +295,4 @@ window.addEventListener('load', function () { <h3 id="Résultat">Résultat</h3> -<p>{{ EmbedLiveSample('Change_states') }}</p> +<p>{{ EmbedLiveSample('Changement_détat') }}</p> diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_5/index.html b/files/fr/learn/forms/how_to_build_custom_form_controls/example_5/index.html index aad371bc78..caf65d51c3 100644 --- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_5/index.html +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_5/index.html @@ -10,7 +10,7 @@ original_slug: >- --- <p>Voici le dernier exemple expliquant <a href="/fr/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">comment construire des widgets de formulaire personnalisés</a>.</p> -<h2 id="Change_states" name="Change_states">Changement d'état</h2> +<h2>Changement d'état</h2> <h3 id="Contenu_HTML">Contenu HTML</h3> @@ -288,4 +288,4 @@ window.addEventListener('load', function () { <h3 id="Résultat">Résultat</h3> -<p>{{ EmbedLiveSample('Change_states') }}</p> +<p>{{ EmbedLiveSample('Changement_détat') }}</p> diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/index.html b/files/fr/learn/forms/how_to_build_custom_form_controls/index.html index b97d14b86e..ed842a9e47 100644 --- a/files/fr/learn/forms/how_to_build_custom_form_controls/index.html +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/index.html @@ -14,12 +14,12 @@ original_slug: >- --- <div>{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Validation_donnees_formulaire", "Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires")}}</div> -<p class="summary">Dans de nombreux cas les <a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">widgets de formulaires HTML disponibles</a> ne suffisent pas. Si vous voulez composer certains widgets dans un <a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">style avancé</a> tels que l'élément {{HTMLElement("select")}} ou si vous voulez leur donner des comportements personnalisés, vous n'avez pas d'autre choix que de créer vos propres widgets.</p> +<p>Dans de nombreux cas les <a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">widgets de formulaires HTML disponibles</a> ne suffisent pas. Si vous voulez composer certains widgets dans un <a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">style avancé</a> tels que l'élément {{HTMLElement("select")}} ou si vous voulez leur donner des comportements personnalisés, vous n'avez pas d'autre choix que de créer vos propres widgets.</p> <p>Dans cet article, nous verrons comment construire un tel widget. Pour cela, nous allons travailler avec un exemple : reconstruire l'élément {{HTMLElement("select")}}.</p> <div class="note"> -<p><strong>Note :</strong> Nous nous resterons centrés sur la construction des widgets, et non sur la façon de rendre le code générique et réutilisable ; cela impliquerait une manipulation de code JavaScript et de DOM dans un contexte inconnu, et nous sortirions de la portée de cet article.</p> +<p><strong>Note :</strong> Nous nous resterons centrés sur la construction des widgets, et non sur la façon de rendre le code générique et réutilisable ; cela impliquerait une manipulation de code JavaScript et de DOM dans un contexte inconnu, et nous sortirions de la portée de cet article.</p> </div> <h2 id="Conception_structure_et_sémantique">Conception, structure et sémantique</h2> @@ -28,58 +28,46 @@ original_slug: >- <p>Dans notre exemple, nous allons reconstruire l'élément {{HTMLElement("select")}}}. Voici le résultat que nous voulons atteindre :</p> -<p><img alt="The three states of a select box" src="/files/4481/custom-select.png" style="height: 135px; width: 366px;"></p> +<p><img alt="The three states of a select box" src="custom-select.png"></p> <p>Cette capture d'écran montre les trois états principaux du widget : l'état normal (à gauche), l'état actif (au milieu) et l'état ouvert (à droite).</p> <p>En termes de comportement, nous voulons que notre widget soit utilisable aussi bien avec une souris qu'avec un clavier, comme n'importe quel widget natif. Commençons par définir comment le widget atteint chaque état :</p> -<dl> - <dt>Le widget est dans son état normal :</dt> - <dd> +<p>Le widget est dans son état normal :</p> + <ul> <li>la page se charge</li> <li>le widget était actif et l'utilisateur a cliqué quelque part en dehors du widget</li> <li>le widget était actif et l'utilisateur a déplacé le focus sur un autre avec le clavier</li> </ul> - </dd> -</dl> - -<p> </p> -<dl> - <dd> <div class="note"> - <p><strong>Note :</strong> Déplacer le focus dans la page entre les divers widgets se fait généralement en appuyant sur la touche de tabulation, mais ce n'est pas la norme partout. Par exemple, circuler parmi les liens sur une page se fait dans Safari par défaut en utilisant la <a href="http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/">combinaison Option+Tab</a>.</p> + <p><strong>Note :</strong> Déplacer le focus dans la page entre les divers widgets se fait généralement en appuyant sur la touche de tabulation, mais ce n'est pas la norme partout. Par exemple, circuler parmi les liens sur une page se fait dans Safari par défaut en utilisant la <a href="http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/">combinaison Option+Tab</a>.</p> </div> - </dd> - <dt>Le widget est sans son état actif :</dt> - <dd> + + <p>Le widget est sans son état actif :</p> + <ul> <li>l'utilisateur clique sur lui</li> <li>l'utilisateur presse la touche Tabulation et obtient le focus</li> <li>le widget était dans l'état ouvert et l'utilisateur a cliqué dessus.</li> </ul> - </dd> - <dt>Le widget est dans un état ouvert :</dt> - <dd> + + <p>Le widget est dans un état ouvert :</p> + <ul> <li>le widget est dans un état autre que ouvert et l'utilisateur clique dessus.</li> </ul> - </dd> -</dl> <p>Maintenant que nous savons comment changer les états du widget, il est important de définir comment changer la valeur du widget :</p> -<dl> - <dt>La valeur change quand :</dt> - <dd> + <p>La valeur change quand :</p> + <ul> <li>l'utilisateur clique sur une option quand le widget est dans l'état ouvert</li> <li>l'utilisateur presse la touche <kbd>↑</kbd> ou <kbd>↓</kbd> quand le widget est dans l'état actif</li> </ul> - </dd> -</dl> <p>Enfin, définissons comment les options du widget doivent se comporter :</p> @@ -92,7 +80,7 @@ original_slug: >- <p>Autre exemple amusant : que se passera-t-il si l'utilisateur presse les touches <kbd>↑</kbd> ou <kbd>↓</kbd> alors que le widget est à l'état ouvert ? Ici, c'est un peu plus délicat. Si vous considérez que l'état actif et l'état ouvert sont totalement différents, la réponse est encore une fois « rien ne se produira » parce que nous n'avons pas défini d'interactions clavier pour l'état ouvert. D'autre part, si vous considérez que l'état actif et l'état ouvert coïncident, la valeur peut changer mais l'option ne sera certainement pas mise en valeur en conséquence, encore une fois parce que nous n'avons pas défini d'interactions clavier sur les options lorsque le widget est dans son état ouvert (nous avons seulement défini ce qui doit se passer lorsque le widget est ouvert, mais rien après).</p> -<p>Dans notre exemple, les spécifications manquantes sont évidentes et nous les traiterons, mais cela peut devenir un problème réel sur de nouveaux widgets exotiques, pour lesquels personne n'a la moindre idée de ce qu'est le bon comportement. Il est donc toujours bon de passer du temps à l'étape conception, car si vous définissez pauvrement le comportement, ou si vous oubliez de le définir, il sera très difficile de le redéfinir une fois les utilisateurs habitués. Si vous avez des doutes, demandez l'avis des autres, et si vous avez le budget pour cela, n'hésitez pas à <a href="https://fr.wikipedia.org/wiki/Test_utilisateur">faire des tests utilisateur</a>. Ce processus est appelé UX Design <span class="CLPzrc Y0NH2b">(<strong>U</strong>ser e<strong>X</strong>perience)</span>. Si vous voulez en savoir plus sur ce sujet, vous devriez consulter les ressources utiles suivantes :</p> +<p>Dans notre exemple, les spécifications manquantes sont évidentes et nous les traiterons, mais cela peut devenir un problème réel sur de nouveaux widgets exotiques, pour lesquels personne n'a la moindre idée de ce qu'est le bon comportement. Il est donc toujours bon de passer du temps à l'étape conception, car si vous définissez pauvrement le comportement, ou si vous oubliez de le définir, il sera très difficile de le redéfinir une fois les utilisateurs habitués. Si vous avez des doutes, demandez l'avis des autres, et si vous avez le budget pour cela, n'hésitez pas à <a href="https://fr.wikipedia.org/wiki/Test_utilisateur">faire des tests utilisateur</a>. Ce processus est appelé UX Design (<strong>U</strong>ser e<strong>X</strong>perience). Si vous voulez en savoir plus sur ce sujet, vous devriez consulter les ressources utiles suivantes :</p> <ul> <li><a href="http://www.uxmatters.com/" rel="external">UXMatters.com</a></li> @@ -101,7 +89,7 @@ original_slug: >- </ul> <div class="note"> -<p><strong>Note : </strong>De plus, dans la plupart des systèmes, il y a moyen d'ouvrir l'élément {{HTMLElement("select")}} pour voir tous les choix disponibles (c'est la même chose que de cliquer sur l'élément {{HTMLElement("select")}} avec une souris). Cela se fait avec <kbd>Alt</kbd>+<strong><kbd>↓</kbd></strong> sous Windows et n'a pas été implémenté dans notre exemple - mais il serait facile de le faire, car le mécanisme a déjà été implémenté pour l'événement <code>click</code>.</p> +<p><strong>Note :</strong> De plus, dans la plupart des systèmes, il y a moyen d'ouvrir l'élément {{HTMLElement("select")}} pour voir tous les choix disponibles (c'est la même chose que de cliquer sur l'élément {{HTMLElement("select")}} avec une souris). Cela se fait avec <kbd>Alt</kbd>+<strong><kbd>↓</kbd></strong> sous Windows et n'a pas été implémenté dans notre exemple - mais il serait facile de le faire, car le mécanisme a déjà été implémenté pour l'événement <code>click</code>.</p> </div> <h3 id="Definition_de_la_structure_HTML_et_de_la_sémantique">Definition de la structure HTML et de la sémantique</h3> @@ -323,7 +311,7 @@ original_slug: >- <td>{{EmbedLiveSample("Open_state",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_1")}}</td> </tr> <tr> - <td colspan="3" style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_1" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_1">Check out the source code</a></td> + <td colspan="3" style="text-align: center;"><a href="/fr/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_1" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_1">Check out the source code</a></td> </tr> </tbody> </table> @@ -333,11 +321,11 @@ original_slug: >- <p>Maintenant que le design et la structure sont prêts, nous pouvons écrire le code JAvaScript pour que le widget fonctionne vraiment.</p> <div class="warning"> -<p>Avertissement : Le code qui suit a été conçu à des fins éducatives et ne doit pas être utilisé tel quel. Entre autres choses, comme nous le verrons, il n'est pas à l'épreuve du temps et ne fonctionnera pas sur des navigateurs historiques. Il comporte également des parties redondantes. Elles devraient être optimisées pour du code de production.</p> +<p><strong>Attention :</strong> Le code qui suit a été conçu à des fins éducatives et ne doit pas être utilisé tel quel. Entre autres choses, comme nous le verrons, il n'est pas à l'épreuve du temps et ne fonctionnera pas sur des navigateurs historiques. Il comporte également des parties redondantes. Elles devraient être optimisées pour du code de production.</p> </div> <div class="note"> -<p>Note : Créer des widgets réutilisables peut se révéler un peu délicat. L'ébauche de la norme « <a href="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html">W3C Web Component</a> » apporte des réponses à cette question particulière. Le <a href="http://x-tags.org/">projet X-Tag</a> est un essai de mise en œuvre de cette spécification ; nous vous encourageons à y jeter un coup d'œil.</p> +<p><strong>Note :</strong> Créer des widgets réutilisables peut se révéler un peu délicat. L'ébauche de la norme « <a href="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html">W3C Web Component</a> » apporte des réponses à cette question particulière. Le <a href="http://x-tags.org/">projet X-Tag</a> est un essai de mise en œuvre de cette spécification ; nous vous encourageons à y jeter un coup d'œil.</p> </div> <h3 id="Pourquoi_ne_fonctionne-t-il_pas">Pourquoi ne fonctionne-t-il pas ?</h3> @@ -433,7 +421,7 @@ original_slug: >- <td>{{EmbedLiveSample("JS",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_2")}}</td> </tr> <tr> - <td colspan="2" style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2">Testez le code source</a></td> + <td colspan="2" style="text-align: center;"><a href="/fr/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2">Testez le code source</a></td> </tr> </tbody> </table> @@ -459,7 +447,7 @@ original_slug: >- <li>{{domxref("element.querySelector","querySelector")}} et {{domxref("element.querySelectorAll","querySelectorAll")}}</li> </ol> -<p>Au-delà de la disponibilité de ces fonctionnalités spécifiques, il reste encore un problème avant de commencer. L'objet retourné par la fonction {{domxref("element.querySelectorAll","querySelectorAll()")}} est une {{domxref("NodeList")}} plutôt qu'un <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code>. C'est important, car les objets <code>Array</code> acceptent la fonction <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code>, mais {{domxref("NodeList")}} ne le fait pas. Comme {{domxref("NodeList")}} ressemble vraiment à un <code>Array</code> et que <code>forEach</code> est d'utilisation si commode, nous pouvons facilement ajouter la prise en charge de <code>forEach à</code> {{domxref("NodeList")}} pour nous faciliter la vie, comme ceci :</p> +<p>Au-delà de la disponibilité de ces fonctionnalités spécifiques, il reste encore un problème avant de commencer. L'objet retourné par la fonction {{domxref("element.querySelectorAll","querySelectorAll()")}} est une {{domxref("NodeList")}} plutôt qu'un <code><a href="/fr/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code>. C'est important, car les objets <code>Array</code> acceptent la fonction <code><a href="/fr/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code>, mais {{domxref("NodeList")}} ne le fait pas. Comme {{domxref("NodeList")}} ressemble vraiment à un <code>Array</code> et que <code>forEach</code> est d'utilisation si commode, nous pouvons facilement ajouter la prise en charge de <code>forEach à</code> {{domxref("NodeList")}} pour nous faciliter la vie, comme ceci :</p> <pre class="brush: js">NodeList.prototype.forEach = function (callback) { Array.prototype.forEach.call(this, callback); @@ -706,7 +694,7 @@ window.addEventListener('load', function () { }); });</pre> -<p>Dans le code ci-dessus, il faut noter l'utilisation de la propriété <code><a href="/en-US/docs/Web/API/HTMLElement/tabIndex" title="/en-US/docs/Web/API/HTMLElement/tabIndex">tabIndex</a></code>. Utiliser cette propriété est nécessaire pour être sûr que le widget natif n'obtiendra jamais le focus et que le widget personnalisé l'obtiendra quand l'utilisateur utilise le clavier ou la souris.</p> +<p>Dans le code ci-dessus, il faut noter l'utilisation de la propriété <code><a href="/fr/docs/Web/API/HTMLElement/tabIndex" title="/en-US/docs/Web/API/HTMLElement/tabIndex">tabIndex</a></code>. Utiliser cette propriété est nécessaire pour être sûr que le widget natif n'obtiendra jamais le focus et que le widget personnalisé l'obtiendra quand l'utilisateur utilise le clavier ou la souris.</p> <p>Et voilà, nous avons terminé ! Voici le résultat :</p> @@ -734,11 +722,11 @@ window.addEventListener('load', function () { <p>Nous venons de faire quelque chose qui fonctionne, même si nous sommes loin d'avoir une boîte de sélection avec toutes les fonctionnalités, elle fonctionne parfaitement. Mais ce que nous avons fait n'est rien de plus que de jouer avec les DOM. Elle n'a pas de sémantique réelle, et même si elle ressemble à une boîte de sélection, du point de vue du navigateur, ce n'en est pas une, de sorte que les technologies d'assistance ne pourront pas comprendre que c'est une boîte de sélection. Bref, cette jolie nouvelle boîte de sélection n'est pas accessible !</p> -<p>Heureusement, il existe une solution et elle s'appelle <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a>. ARIA signifie « Accessible Rich Internet Application » et c'est une<a href="http://www.w3.org/TR/wai-aria/" rel="external"> norme W3C </a>spécialement conçue pour ce que nous faisons ici : rendre accessibles les applications web et les widgets personnalisés. Il s'agit essentiellement d'un ensemble d'attributs qui étendent le HTML afin que nous puissions mieux décrire les rôles, les états et les propriétés comme si l'élément que nous venons de concevoir était l'élément natif pour lequel il essaie de passer. L'utilisation de ces attributs est très simple, alors faisons-le.</p> +<p>Heureusement, il existe une solution et elle s'appelle <a href="/fr/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a>. ARIA signifie « Accessible Rich Internet Application » et c'est une<a href="http://www.w3.org/TR/wai-aria/" rel="external"> norme W3C </a>spécialement conçue pour ce que nous faisons ici : rendre accessibles les applications web et les widgets personnalisés. Il s'agit essentiellement d'un ensemble d'attributs qui étendent le HTML afin que nous puissions mieux décrire les rôles, les états et les propriétés comme si l'élément que nous venons de concevoir était l'élément natif pour lequel il essaie de passer. L'utilisation de ces attributs est très simple, alors faisons-le.</p> <h3 id="L'attribut_role">L'attribut <code>role</code></h3> -<p>L'attribut clé utilisé par <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> est l'attribut <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a>. L'attribut <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role </code></a> accepte une valeur qui définit à quoi sert un élément. Chaque rôle définit ses propres exigences et comportements. Dans notre exemple, nous utiliserons le rôle de <code><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role">listbox</a></code>. C'est un « rôle composite », ce qui signifie que les éléments ayant ce rôle s'attendent à avoir des enfants, chacun avec un rôle spécifique (dans ce cas, au moins un enfant avec le rôle <code>option</code>).</p> +<p>L'attribut clé utilisé par <a href="/fr/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> est l'attribut <a href="/fr/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a>. L'attribut <a href="/fr/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role </code></a> accepte une valeur qui définit à quoi sert un élément. Chaque rôle définit ses propres exigences et comportements. Dans notre exemple, nous utiliserons le rôle de <code><a href="/fr/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role">listbox</a></code>. C'est un « rôle composite », ce qui signifie que les éléments ayant ce rôle s'attendent à avoir des enfants, chacun avec un rôle spécifique (dans ce cas, au moins un enfant avec le rôle <code>option</code>).</p> <p>Il faut aussi noter qu'ARIA définit les rôles appliqués par défaut aux balises HTML standard. Par exemple, l'élément {{HTMLElement("table")}} correspond au rôle <code>grid</code>, et l'élément {{HTMLElement("ul")}} correspond au rôle <code>list</code>. Comme nous utilisons un élément {{HTMLElement("ul")}}, nous voulons nous assurer que le rôle <code>listbox</code> de notre widget remplacera le rôle <code>list</code> de l'élément {{HTMLElement("ul")}}. À cette fin, nous utiliserons le rôle <code>presentation</code>. Ce rôle est conçu pour nous permettre d'indiquer qu'un élément n'a pas de signification particulière, et est utilisé uniquement pour présenter de l'information. Nous l'appliquerons à notre élément {{HTMLElement("ul")}}.</p> @@ -759,12 +747,12 @@ window.addEventListener('load', function () { </div></pre> <div class="note"> -<p><strong>Note :</strong> Inclure à la fois l'attribut <code>role</code> et l'attribut <code>class</code> n'est nécessaire que si vous souhaitez prendre en charge les navigateurs anciens qui n'acceptent pas les <a href="/en-US/docs/CSS/Attribute_selectors" title="/en-US/docs/CSS/Attribute_selectors">selecteurs d'attribut CSS</a>.</p> +<p><strong>Note :</strong> Inclure à la fois l'attribut <code>role</code> et l'attribut <code>class</code> n'est nécessaire que si vous souhaitez prendre en charge les navigateurs anciens qui n'acceptent pas les <a href="/fr/docs/CSS/Attribute_selectors" title="/en-US/docs/CSS/Attribute_selectors">selecteurs d'attribut CSS</a>.</p> </div> <h3 id="L'attribut_aria-selected">L'attribut <code>aria-selected</code></h3> -<p>Utiliser l'attribut <code>role</code> ne suffit pas. <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> fournit également de nombreux états et attributs de propriété. Plus vous les utiliserez, mieux votre widget sera compris par les techniques d'assistance. Dans notre cas, nous limiterons notre utilisation à un seul attribut : <code>aria-selected</code>.</p> +<p>Utiliser l'attribut <code>role</code> ne suffit pas. <a href="/fr/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> fournit également de nombreux états et attributs de propriété. Plus vous les utiliserez, mieux votre widget sera compris par les techniques d'assistance. Dans notre cas, nous limiterons notre utilisation à un seul attribut : <code>aria-selected</code>.</p> <p>L'attribut <code>aria-selected</code> s'utilise pour marquer l'option actuellement sélectionnée ; ceci permet aux techniques d'assistance d'informer l'utilisateur quelle est la sélection en cours. Nous l'utiliserons dynamiquement avec JavaScript pour marquer l'option sélectionnée chaque fois que l'utilisateur en choisit une. Pour cela, nous devons réviser la fonction <code>updateValue()</code> :</p> @@ -825,7 +813,7 @@ window.addEventListener('load', function () { <ul> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment structurer un formulaire HTML</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li> diff --git a/files/fr/learn/forms/how_to_structure_a_web_form/example/index.html b/files/fr/learn/forms/how_to_structure_a_web_form/example/index.html index cb36b36527..672ae945dd 100644 --- a/files/fr/learn/forms/how_to_structure_a_web_form/example/index.html +++ b/files/fr/learn/forms/how_to_structure_a_web_form/example/index.html @@ -6,7 +6,7 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML/ --- <p>Ceci est un exemple de formulaire de paiement basique extrait de l'article <a href="/fr/docs/HTML/Formulaires/Comment_structurer_un_formulaire_HTML" title="/fr/docs/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment structurer un formulaire HTML</a>.</p> -<h2 id="Un_formulaire_de_paiement" name="Un_formulaire_de_paiement">Un formulaire de paiement</h2> +<h2 id="Un_formulaire_de_paiement">Un formulaire de paiement</h2> <h3 id="Contenu_HTML">Contenu HTML</h3> diff --git a/files/fr/learn/forms/how_to_structure_a_web_form/index.html b/files/fr/learn/forms/how_to_structure_a_web_form/index.html index a8f3079705..7f098d890e 100644 --- a/files/fr/learn/forms/how_to_structure_a_web_form/index.html +++ b/files/fr/learn/forms/how_to_structure_a_web_form/index.html @@ -17,13 +17,13 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML <div>{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML", "Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs", "Web/Guide/HTML/Formulaires")}}</div> -<p class="summary">Les bases vues, nous examinons maintenant plus en détail les éléments utilisés pour structurer et donner un sens aux différentes parties d'un formulaire.</p> +<p>Les bases vues, nous examinons maintenant plus en détail les éléments utilisés pour structurer et donner un sens aux différentes parties d'un formulaire.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Notions concernant les ordinateurs et les <a class="new" href="https://developer.mozilla.org/fr/docs/Learn/HTML/Introduction_to_HTML" rel="nofollow">connaissances de base du HTML</a>.</td> + <td>Notions concernant les ordinateurs et les <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">connaissances de base du HTML</a>.</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -40,12 +40,15 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML <p>Nous l'avons déjà rencontré dans l'article précédent.</p> -<div class="note"><strong>Note :</strong> Il est strictement interdit d'imbriquer un formulaire dans un autre formulaire. L'imbrication peut conduire à des comportements imprévisibles selon le navigateur utilisé.</div> +<div class="note"> + <p><strong>Note :</strong> Il est strictement interdit d'imbriquer un formulaire dans un autre formulaire. L'imbrication peut conduire à des comportements imprévisibles selon le navigateur utilisé. + </p> +</div> <p>Notez qu'il est toujours possible d'utiliser un widget de formulaire en dehors d'un élément {{HTMLElement("form")}} mais si vous le faites, ce widget de formulaire n'a rien à voir avec un formulaire. De tels widgets peuvent être utilisés en dehors d'un formulaire, mais alors vous devriez avoir un plan spécial pour de tels widgets, puisqu'ils ne feront rien tout seuls. Vous devrez personnaliser leur comportement avec JavaScript.</p> <div class="note"> -<p><strong>Note</strong>: HTML5 introduit l'attribut <code>form</code> dans les éléments form du HTML. Il devrait vous permettre de lier explicitement un élément avec un formulaire même s'il n'est pas inclus dans un {{ HTMLElement("form") }}. Malheureusement, pour l'instant, l'implémentation de cette fonctionnalité dans les navigateurs n'est pas encore assez fiable.</p> +<p><strong>Note :</strong> HTML5 introduit l'attribut <code>form</code> dans les éléments form du HTML. Il devrait vous permettre de lier explicitement un élément avec un formulaire même s'il n'est pas inclus dans un {{ HTMLElement("form") }}. Malheureusement, pour l'instant, l'implémentation de cette fonctionnalité dans les navigateurs n'est pas encore assez fiable.</p> </div> <h2 id="Les_éléments_<fieldset>_et_<legend>">Les éléments <fieldset> et <legend></h2> @@ -56,26 +59,26 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML <p>Voici un petit exemple :</p> -<pre class="brush:html; line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>fieldset</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>legend</span><span class="punctuation token">>Taille du jus de fruits</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>legend</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size_1<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>small<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size_1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Petite<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size_2<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>medium<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size_2<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Moyen<span class="tag token"><span class="tag token"><span class="punctuation token">ne</</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size_3<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>large<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size_3<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Grand<span class="tag token"><span class="tag token"><span class="punctuation token">e</</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>fieldset</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush:html"><form> + <fieldset> + <legend>Taille du jus de fruits</legend> + <p> + <input type="radio" name="size" id="size_1" value="small"> + <label for="size_1">Petite</label> + </p> + <p> + <input type="radio" name="size" id="size_2" value="medium"> + <label for="size_2">Moyenne</label> + </p> + <p> + <input type="radio" name="size" id="size_3" value="large"> + <label for="size_3">Grande</label> + </p> + </fieldset> +</form></pre> <div class="note"> -<p><strong>Note </strong>: Vous trouverez cet exemple dans <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/fieldset-legend.html">fieldset-legend.html</a> (voir <a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html">directement aussi</a>).</p> +<p><strong>Note :</strong> Vous trouverez cet exemple dans <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/fieldset-legend.html">fieldset-legend.html</a> (voir <a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html">directement aussi</a>).</p> </div> <p>En lisant le formulaire ci-dessus, un lecteur d'écran dira « Taille du jus de fruit : petit » pour le premier widget, « Taille du jus de fruit : moyenne » pour le second, et « Taille du jus de fruit : grande » pour le troisième.</p> @@ -88,7 +91,7 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML <p>Comme nous l'avons vu dans l'article précédent, l'élément {{HTMLElement("label")}} est le moyen naturel de définir une étiquette pour un widget de formulaire HTML. C'est l'élément le plus important si vous voulez créer des formulaires accessibles — lorsqu'ils sont correctement implémentés, les lecteurs d'écran énonceront l'étiquette d'un élément de formulaire selon toutes les instructions associées. Prenons cet exemple, que nous avons vu dans l'article précédent :</p> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>name<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Nom :<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>name<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>user_name<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><label for="name">Nom :</label> <input type="text" id="name" name="user_name"></pre> <p>Avec un élément <code><label></code> correctement associé à <code><input></code> par l'intermédiaire respectivement des attributs <code>for</code> et <code>id</code> (l'attribut <code>for</code> de <label> référence l'attibut <code>id</code> du widget correspondant), un lecteur d'écran lira et dira quelque chose comme « Nom, texte indiqué ».</p> @@ -96,9 +99,9 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML <p>Notez qu'un widget peut être incorporé dans son élément {{HTMLElement("label")}}, ainsi :</p> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>name<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - Nom : <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>name<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>user_name<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><label for="name"> + Nom : <input type="text" id="name" name="user_name"> +</label></pre> <p>Toutefois, même dans ce cas, il est considéré de bonne pratique de définir l'attribut <code>for</code> parce que certaines techniques d'assistance ne font pas implicitement le lien entre les étiquettes et les widgets.</p> @@ -108,19 +111,19 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML <p>Par exemple :</p> -<pre class="brush:html; line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>taste_1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>J'aime les cerises<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>taste_1<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>taste_cherry<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>taste_2<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>J'aime les bananes<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>taste_2<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>taste_banana<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush:html"><form> + <p> + <label for="taste_1">J'aime les cerises</label> + <input type="checkbox" id="taste_1" name="taste_cherry" value="1"> + </p> + <p> + <label for="taste_2">J'aime les bananes</label> + <input type="checkbox" id="taste_2" name="taste_banana" value="2"> + </p> +</form></pre> <div class="note"> -<p><strong>Note </strong>: Vous trouverez cet exemple dans <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/checkbox-label.html">checkbox-label.html</a> (à voir <a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/checkbox-label.html">directement aussi</a>).</p> +<p><strong>Note :</strong> Vous trouverez cet exemple dans <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/checkbox-label.html">checkbox-label.html</a> (à voir <a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/checkbox-label.html">directement aussi</a>).</p> </div> <h3 id="Étiquettes_multiples">Étiquettes multiples</h3> @@ -129,29 +132,29 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML <p>Considérons cet exemple :</p> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Les champs obligatoires sont suivis de <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>abbr</span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>required<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>*<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>abbr</span><span class="punctuation token">></span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - -<span class="comment token"><!-- Donc ceci : --></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Nom :<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>abbr</span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>required<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>*<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>abbr</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - -<span class="comment token"><!-- sera mieux programmé ainsi : --></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span><span class="punctuation token">></span></span>Nom :<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>abbr</span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>required<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>*<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>abbr</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - -<span class="comment token"><!-- mais ceci est probablement encore meilleur : --></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Nom :<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>abbr</span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>required<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>*<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>abbr</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><p>Les champs obligatoires sont suivis de <abbr title="required">*</abbr>.</p> + +<!-- Donc ceci : --> +<div> + <label for="username">Nom :</label> + <input type="text" name="username"> + <label for="username"><abbr title="required">*</abbr></label> +</div> + +<!-- sera mieux programmé ainsi : --> +<div> + <label for="username"> + <span>Nom :</span> + <input id="username" type="text" name="username"> + <abbr title="required">*</abbr> + </label> +</div> + +<!-- mais ceci est probablement encore meilleur : --> +<div> + <label for="username">Nom :<abbr title="required">*</abbr></label> + <input id="username" type="text" name="username"> +</div></pre> <p>Le paragraphe du haut définit la règle pour les éléments obligatoires. Ce doit être au début pour s'assurer que les techniques d'assistance telles que les lecteurs d'écran l'afficheront ou le vocaliseront à l'utilisateur avant qu'il ne trouve un élément obligatoire. Ainsi, ils sauront ce que signifie l'astérisque. Un lecteur d'écran mentionnera l'astérisque en disant « astérisque » ou « obligatoire », selon les réglages du lecteur d'écran — dans tous les cas, ce qui sera dit est clairement précisé dans le premier paragraphe.</p> @@ -162,11 +165,11 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML </ul> <div class="note"> -<p><strong>Note</strong> : Vous pouvez obtenir des résultats légérement différents, selon votre lecteur d'écran. Ce qui précéde a été testé avec VoiceOver (et NVDA se comporte de la même façon). Nous aimerions avoir un retour sur vos expériences également.</p> +<p><strong>Note :</strong> Vous pouvez obtenir des résultats légérement différents, selon votre lecteur d'écran. Ce qui précéde a été testé avec VoiceOver (et NVDA se comporte de la même façon). Nous aimerions avoir un retour sur vos expériences également.</p> </div> <div class="note"> -<p><strong>Note</strong> : Vous trouverez cet exemple sur GitHub dans <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/required-labels.html">required-labels.html</a> (à voir <a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html">directement aussi</a>). Ne lancez pas l'exemple avec 2 ou 3 version non mises en commentaires — le lecteur d'écran serait totalement embrouillé s'il y a plusieurs étiquettes ET plusieurs entrées avec le même ID !</p> +<p><strong>Note :</strong> Vous trouverez cet exemple sur GitHub dans <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/required-labels.html">required-labels.html</a> (à voir <a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html">directement aussi</a>). Ne lancez pas l'exemple avec 2 ou 3 version non mises en commentaires — le lecteur d'écran serait totalement embrouillé s'il y a plusieurs étiquettes ET plusieurs entrées avec le même ID !</p> </div> <h2 id="Structures_HTML_courantes_dans_les_formulaires">Structures HTML courantes dans les formulaires</h2> @@ -185,22 +188,22 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML <p>Mettons ces idées en pratique et construisons une structure de formulaire un peu plus sophistiquée — un formulaire de paiement. Il contiendra un certain nombre de types de widgets que vous ne comprenez pas encore — ne vous inquiétez pas pour l'instant ; vous découvrirez comment ils fonctionnent dans l'article suivant (<a href="/fr/docs/Learn/HTML/Forms/The_native_form_widgets">Les widgets natifs pour formulaire</a>). Pour l'instant, lisez attentivement les descriptions en suivant les instructions ci-dessous et commencez à vous faire une idée des éléments enveloppes que nous utilisons pour structurer le formulaire, et pourquoi.</p> -<ol start="1" style="list-style-type: decimal;"> +<ol> <li>Pour commencer, faites une copie locale de notre <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">fichier modèle vierge</a> et des <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css">CSS pour notre formulaire de paiement </a> dans un nouveau répertoire.</li> <li>Primo, appliquez les CSS au HTML en ajoutant la ligne suivante dans l'élément {{htmlelement("head")}} du HTML : - <pre class="brush: html line-numbers language-html"><code class="language-html"><link href="payment-form.css" rel="stylesheet"></code></pre> + <pre class="brush: html"><link href="payment-form.css" rel="stylesheet"></pre> </li> <li>Ensuite, commencez le formulaire en ajoutant un élément {{htmlelement("form")}} : - <pre class="brush: html line-numbers language-html"><form> + <pre class="brush: html"><form> </form></pre> </li> <li>Entre les balises <code><form></code>, ajoutez un en‑tête et un paragraphe pour informer les utilisateurs comment sont marqués les champs obligatoires : - <pre class="brush: html line-numbers language-html"><code class="language-html"><h1>Formulaire de paiement</h1> -<p>Les champs obligatoires sont suivis par un <strong><abbr title="required">*</abbr></strong>.</p></code></pre> + <pre class="brush: html"><h1>Formulaire de paiement</h1> +<p>Les champs obligatoires sont suivis par un <strong><abbr title="required">*</abbr></strong>.</p></pre> </li> <li>Ensuite, nous ajoutons une grande section de code dans le formulaire, sous la précédente. Ici vous verrez que nous enveloppons les champs d'informations de contact dans des éléments {{htmlelement("section")}} distincts. De plus, nous avons un ensemble de deux boutons radio, que nous mettons chacun à l'intérieur de leur propre élément de liste ({{htmlelement("li")}}). Enfin, nous avons deux zones de texte standard {{htmlelement("input")}} et leurs éléments {{htmlelement("label")}} associés, chacun contenu dans un élément {{htmlelement("p")}}, plus une entrée pour le mot de passe. Ajoutez ce code à votre formulaire maintenant : - <pre class="brush: html line-numbers language-html"><code class="language-html"><section> + <pre class="brush: html"><section> <h2>Informations de contact</h2> <fieldset> <legend>Qualité</legend> @@ -240,10 +243,10 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML </label> <input type="password" id="pwd" name="password"> </p> -</section></code></pre> +</section></pre> </li> <li>Nous arrivons maintenant à la deuxième <code><section></code> de notre formulaire — l'information de paiement. Ici nous avons trois widgets distincts avec leur étiquette, chacun contenu dans un paragraphe <code><p></code>. Le premier est un menu déroulant ({{htmlelement("select")}}) pour le choix du type de la carte de crédit. Le deuxième est un élément <code><input></code> de type nombre pour entrer le numéro de la carte de crédit. Le dernier est un élément <code><input></code> de type <code>date</code> pour entrer la date d'expiration de la carte de crédit (il sera accompagné d'un widget dateur pour les navigateurs prenant en charge cette fonctionnalité, et sera un simple champ textuel pour les navigateurs ne la prenant pas en charge). À nouveau, entrez ce qui suit après la section ci‑dessus : - <pre class="brush: html line-numbers language-html"><code class="language-html"> + <pre class="brush: html"> <section> <h2>Informations de paiement</h2> <p> @@ -271,10 +274,10 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML </label> <input type="text" id="date" name="expiration"> </p> -</section></code></pre> +</section></pre> </li> <li>La dernière section est plus simple ; elle ne contient qu'un bouton {{htmlelement("button")}} de type <code>submit</code>, pour adresser les données du formulaire. Ajoutez ceci au bas du formulaire : - <pre class="brush: html line-numbers language-html"><code class="language-html"><p> <button type="submit">Valider le paiement</button> </p></code></pre> + <pre class="brush: html"><p> <button type="submit">Valider le paiement</button> </p></pre> </li> </ol> @@ -298,7 +301,7 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML <ul> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li> - <li><span>Comment structurer un formulaire HTML</span></li> + <li>Comment structurer un formulaire HTML</li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li> diff --git a/files/fr/learn/forms/html_forms_in_legacy_browsers/index.html b/files/fr/learn/forms/html_forms_in_legacy_browsers/index.html index 6b9dc84cc2..7f12753fa5 100644 --- a/files/fr/learn/forms/html_forms_in_legacy_browsers/index.html +++ b/files/fr/learn/forms/html_forms_in_legacy_browsers/index.html @@ -6,7 +6,7 @@ original_slug: Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers --- <div>{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires")}}</div> -<p class="summary">Tout développeur apprend très rapidement (parfois difficilement) que le Web est un endroit assez inconfortable. Le pire des fléaux est le « navigateur historique ». Oui, admettons‑le, si on dit « navigateur historique », nous pensons tous aux anciennes versions d'Internet Explorer ... mais elles sont loin d'être les seules. Les premières versions de Firefox, comme la <a href="http://www.mozilla.org/en-US/firefox/organizations/">version ESR,</a> sont aussi des « navigateurs historiques ». Et dans le monde du mobile ? Quand ni le navigateur ni l'OS ne peut être mis à jour? Oui, il y a beaucoup de vieux smartphones Android ou des iPhones dont le navigateur par défaut n'est pas à jour. Ceux-ci sont aussi des « navigateurs historiques ».</p> +<p>Tout développeur apprend très rapidement (parfois difficilement) que le Web est un endroit assez inconfortable. Le pire des fléaux est le « navigateur historique ». Oui, admettons‑le, si on dit « navigateur historique », nous pensons tous aux anciennes versions d'Internet Explorer ... mais elles sont loin d'être les seules. Les premières versions de Firefox, comme la <a href="http://www.mozilla.org/en-US/firefox/organizations/">version ESR,</a> sont aussi des « navigateurs historiques ». Et dans le monde du mobile ? Quand ni le navigateur ni l'OS ne peut être mis à jour? Oui, il y a beaucoup de vieux smartphones Android ou des iPhones dont le navigateur par défaut n'est pas à jour. Ceux-ci sont aussi des « navigateurs historiques ».</p> <p>Malheureusement, parcourir cette jungle est une facette du métier. Mais opportunément, il existe quelques astuces pour nous aider à résoudre 80 % des problèmes causés par ces vieilles versions de navigateur.</p> @@ -67,8 +67,8 @@ original_slug: Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers </thead> <tbody> <tr> - <th style="text-align: center;"><img alt="Capture d'écran de l'entrée de couleur sur Chrome pour Mac OSX" src="https://mdn.mozillademos.org/files/16009/choix_chrome.png" style="height: 32px; width: 227px;"></th> - <th style="text-align: center;"><img alt="Capture d'écran de l'entrée de couleur sur Firefox" src="https://mdn.mozillademos.org/files/16010/choix_firefox.png" style="height: 36px; width: 227px;"></th> + <th style="text-align: center;"><img alt="Capture d'écran de l'entrée de couleur sur Chrome pour Mac OSX" src="choix_chrome.png"></th> + <th style="text-align: center;"><img alt="Capture d'écran de l'entrée de couleur sur Firefox" src="choix_firefox.png"></th> </tr> </tbody> </table> @@ -189,7 +189,7 @@ input.button { <p>L'équipe de Modernizr fait une maintenance opportune de grande liste de « <a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills" rel="external">polyfills »</a>. Prenez celui dont vous avez besoin.</p> <div class="note"> -<p><strong>Note :</strong> Modernizr a d'autres fonctionnalités remarquables pour faciliter le traitement du JavaScript non obstructif et les tecniques de simplifications élégantes. Prenez connaissance de <a href="http://modernizr.com/docs/" rel="external"> la documentation de Modernizr</a>.</p> +<p><strong>Note :</strong> Modernizr a d'autres fonctionnalités remarquables pour faciliter le traitement du JavaScript non obstructif et les tecniques de simplifications élégantes. Prenez connaissance de <a href="http://modernizr.com/docs/" rel="external"> la documentation de Modernizr</a>.</p> </div> <h3 id="Faites_attention_aux_performances">Faites attention aux performances</h3> @@ -208,7 +208,7 @@ input.button { <ul> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment structurer un formulaire HTML</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li> diff --git a/files/fr/learn/forms/index.html b/files/fr/learn/forms/index.html index d4d758bdfc..76832228f3 100644 --- a/files/fr/learn/forms/index.html +++ b/files/fr/learn/forms/index.html @@ -13,9 +13,7 @@ original_slug: Web/Guide/HTML/Formulaires --- <p>{{learnSidebar}}</p> -<blockquote> -<p><span class="seoSummary">Ce guide est constitué d'une série d'articles qui vous aideront à maîtriser les formulaires HTML</span>. Les formulaires HTML sont des outils très puissants pour interagir avec l'utilisateur ; toutefois, à cause de raisons historiques et techniques, il n'est pas forcément évident de savoir comment les utiliser de manière optimale. Nous allons aborder tous les aspects des formulaires HTML, de la structure à la décoration, de la gestion des données aux widgets sur-mesure.</p> -</blockquote> +<p>Ce guide est constitué d'une série d'articles qui vous aideront à maîtriser les formulaires HTML. Les formulaires HTML sont des outils très puissants pour interagir avec l'utilisateur ; toutefois, à cause de raisons historiques et techniques, il n'est pas forcément évident de savoir comment les utiliser de manière optimale. Nous allons aborder tous les aspects des formulaires HTML, de la structure à la décoration, de la gestion des données aux widgets sur-mesure.</p> <h2 id="Prérequis">Prérequis</h2> @@ -24,53 +22,53 @@ original_slug: Web/Guide/HTML/Formulaires <p>Le reste du module est toutefois un peu plus difficile — il est facile de placer des widgets de formulaire dans une page, mais vous ne pourrez pas en faire vraiment quelque chose sans utiliser quelques fonctionnalités plus avancées, les CSS et le JavaScript. C'est pourquoi, avant de regarder ces autres parties, nous vous recommandons de faire un détour et de procéder d'abord à l'étude des <a href="/fr/Apprendre/CSS/Introduction_à_CSS">CSS</a> et du <a href="/fr/docs/Apprendre/JavaScript">JavaScript</a>.</p> <div class="note"> -<p><strong>Note</strong> : Si vous travaillez sur un ordinateur/tablette/autre appareil sur lequel vous n'avez pas la possiblité de créer vos propres fichiers, vous pourrez essayer (la plupart) des exemples de code sur un programme de codage en ligne comme <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +<p><strong>Note :</strong> Si vous travaillez sur un ordinateur/tablette/autre appareil sur lequel vous n'avez pas la possiblité de créer vos propres fichiers, vous pourrez essayer (la plupart) des exemples de code sur un programme de codage en ligne comme <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> </div> -<h2 id="Éléments_de_base"><a id="Basic_guides" name="Basic_guides"></a>Éléments de base</h2> +<h2 id="Éléments_de_base">Éléments de base</h2> <dl> <dt><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></dt> <dd>Le premier article de notre série vous donne une toute première expérience de création de formulaire en HTML, y compris sa conception, sa mise en œuvre en utilisant les bons éléments HTML, l'ajout de quelques très simples décorations avec les CSS et le comment de l'envoi des données à un serveur.</dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML" title="/fr/docs/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></dt> + <dt><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML" title="/fr/docs/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment structurer un formulaire HTML</a></dt> <dd>Les bases vues, nous examinons maintenant plus en détail les éléments utilisés pour structurer et donner un sens aux différentes parties d'un formulaire.</dd> </dl> <h2 id="Quels_sont_les_widgets_pour_formulaire_disponibles">Quels sont les widgets pour formulaire disponibles ?</h2> <dl> - <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></dt> + <dt><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></dt> <dd>Nous examinons maintenant en détail les fonctionnalités des widgets pour formulaire, en regardant quelles sont les options disponibles pour collecter différentes types de données.</dd> </dl> <h2 id="Validation_et_soumission_des_données_de_formulaires">Validation et soumission des données de formulaires</h2> <dl> - <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires">Envoi des données de formulaire</a></dt> + <dt><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires">Envoi des données de formulaire</a></dt> <dd>Cet article examine ce qui arrive quand un utilisateur soumet un formulaire — où les données vont-elles et comment les gère-t-on une fois à destination ? Nous examinerons aussi quelques problèmes de sécurité associés à l'envoi des données d'un formulaire.</dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Validation des données de formulaire</a></dt> + <dt><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Validation des données de formulaire</a></dt> <dd>Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les données mises dans un formulaire par un utilisateur sont de format correct pour pouvoir les traiter correctement et qu'elles ne vont pas casser nos applications. Nous voulons également aider les utilisateurs à compléter les formulaires correctement et à ne pas ressentir de frustration en essayant d'utiliser nos applications. La validation et la soumission des données des formulaires vous aidera à remplir ces objectifs — cet article indique ce qui est nécessaire de savoir.</dd> </dl> <h2 id="Guides_avancés">Guides avancés</h2> <dl> - <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets de formulaires personnalisés</a></dt> + <dt><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets de formulaires personnalisés</a></dt> <dd>Nous allons voir quelques cas où les widgets natifs ne donnent pas ce dont vous avez besoin, pour des raisons fonctionnelles ou de style par exemple. Dans de tels cas, vous pouvez avoir besoin de construire vous même un widget de formulaire en dehors du HTML brut. Cet article explique comment faire, ainsi que les considérations à prendre en compte ce faisant, le tout à l'aide de l'étude d'un cas particulier.</dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></dt> + <dt><a href="/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></dt> <dd>Cet article examine les manières d'utiliser un formulaire pour assembler une requête HTTP et l'adresser par l'intermédiaire d'un JavaScript personnalisé, au lieu d'une soumission standard de formulaire. Il examine aussi pourquoi vous pouvez souhaiter faire ainsi et ce que cela implique corrélativement. (Voir aussi « Utilisation des objets FormData ».)</dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></dt> + <dt><a href="/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></dt> <dd>Cet article couvre les détections de fonctionnalité, etc. Elles doivent être redirigées dans le module de tests croisés entre navigateurs, car la même problématique y sera mieux traitée.</dd> </dl> <h2 id="Guides_de_mise_en_forme_des_formulaires">Guides de mise en forme des formulaires</h2> <dl> - <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mise en forme des formulaires HTML</a></dt> + <dt><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mise en forme des formulaires HTML</a></dt> <dd>Cet article est une introduction à la mise en forme des formulaires à l'aide des CSS, y compris tous les éléments de base qu'il est nécessaire de connaître pour les tâches de décoration élémentaires.</dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">Mise en forme avancée des formulaires HTML</a></dt> + <dt><a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">Mise en forme avancée des formulaires HTML</a></dt> <dd>Dans cet article, nous regarderons des techniques de mise en forme plus avancées qu'il est nécessaire d'utiliser pour opérer sur les éléments les plus difficiles à traiter.</dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Tableau de compatibilité des propriétés entre widgets de formulaire</a></dt> + <dt><a href="/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Tableau de compatibilité des propriétés entre widgets de formulaire</a></dt> <dd>Ce dernier article fournit un référentiel pratique vous permettant de rechercher quelles propriétés des CSS sont compatibles avec tel ou tel élément de formulaire.</dd> </dl> diff --git a/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.html b/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.html index 4c702ca4c0..5dea78fc0c 100644 --- a/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.html +++ b/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.html @@ -15,7 +15,7 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ --- <div>{{learnsidebar}}{{PreviousMenu("Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}</div> -<p class="summary">Les tables de compatibilité suivantes tentent de résumer l'état de la prise en charge des CSS par les formulaires HTML. Eu égard à la complexité des CSS et des formulaires HTML, ces tables ne peuvent pas être considérées comme un élément de référence parfait. Toutefois, elles vous donneront un bon aperçu de ce qui peut et de ce qui ne peut pas être fait, ce qui vous aidera à apprendre comment faire les choses.</p> +<p>Les tables de compatibilité suivantes tentent de résumer l'état de la prise en charge des CSS par les formulaires HTML. Eu égard à la complexité des CSS et des formulaires HTML, ces tables ne peuvent pas être considérées comme un élément de référence parfait. Toutefois, elles vous donneront un bon aperçu de ce qui peut et de ce qui ne peut pas être fait, ce qui vous aidera à apprendre comment faire les choses.</p> <h2 id="Comment_lire_les_tables">Comment lire les tables</h2> @@ -92,15 +92,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("width")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1][2]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("height")}}</th> + <td>Partiel</td> + <td>Oui</td> <td> <ol> <li>Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser <code>-webkit-appearance:none</code> pour pouvoir appliquer cette propriété aux champs de recherche.</li> @@ -109,9 +109,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1][2]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("border")}}</th> + <td>Partiel</td> + <td>Oui</td> <td> <ol> <li>Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser <code>-webkit-appearance:none</code> pour pouvoir appliquer cette propriété aux champs de recherche.</li> @@ -120,15 +120,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1][2]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("padding")}}</th> + <td>Partiel</td> + <td>Oui</td> <td> <ol> <li>Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser <code>-webkit-appearance:none</code> pour pouvoir appliquer cette propriété aux champs de recherche.</li> @@ -142,9 +142,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Texte et polices</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}<sup>[1]</sup></th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("color")}}</th> + <td>Oui</td> + <td>Oui</td> <td> <ol> <li>Si la propriété {{cssxref("border-color")}} n'est pas mentionnée, certains navigateurs fondés sur WebKit appliqueront la propriété {{cssxref("color")}} aussi bien à la bordure qu'à la police avec l'élément {{HTMLElement("textarea")}}.</li> @@ -152,33 +152,33 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("font")}}</th> + <td>Oui</td> + <td>Oui</td> <td>Voir la note à propos de {{cssxref("line-height")}}</td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("letter-spacing")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("text-align")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> + <th scope="row">{{cssxref("text-decoration")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td>Voir la note à propos de Opera</td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("text-indent")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>IE9 prend en charge cette propriété uniquement sur les éléments {{HTMLElement("textarea")}}, alors que Opera ne la prend en charge que sur les champs texte sur une ligne.</li> @@ -186,21 +186,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> + <th scope="row">{{cssxref("text-overflow")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> + <th scope="row">{{cssxref("text-shadow")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("text-transform")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> </tbody> @@ -209,9 +209,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("background")}}</th> + <td>Partiel</td> + <td>Oui</td> <td> <ol> <li>Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser<code> -webkit-appearance:none</code> pour pouvoir appliquer cette propriété aux champs de recherche. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que <code>background:none</code> ne soit utilisé.</li> @@ -219,9 +219,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1][2]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>Partiel</td> + <td>Oui</td> <td> <ol> <li>Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser<code> -webkit-appearance:none</code> pour pouvoir appliquer cette propriété aux champs de recherche. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que <code>background:none</code> ne soit utilisé.</li> @@ -230,9 +230,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>Non</td> + <td>Partiel</td> <td> <ol> <li>IE9 ne prend pas en charge cette propriété.</li> @@ -258,15 +258,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("width")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("height")}}</th> + <td>Partiel</td> + <td>Oui</td> <td> <ol> <li>Cette propriété n'est pas appliquée sur les navigateurs fondés sur WebKit sur Mac OSX ou iOS.</li> @@ -274,21 +274,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("border")}}</th> + <td>Partiel</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("padding")}}</th> + <td>Partiel</td> + <td>Oui</td> <td> <ol> <li>Cette propriété n'est pas appliquée sur les navigateurs fondés sur WebKit sur Mac OSX ou iOS.</li> @@ -301,57 +301,57 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Texte et polices</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("color")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("font")}}</th> + <td>Oui</td> + <td>Oui</td> <td>Voir la note à propos de {{cssxref("line-height")}}.</td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("letter-spacing")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-align")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("text-decoration")}}</th> + <td>Partiel</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("text-indent")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-overflow")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> + <th scope="row">{{cssxref("text-shadow")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("text-transform")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> </tbody> @@ -360,15 +360,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("background")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>Yes</td> + <td>Yes</td> <td> <ol> <li>Sur Opera la propriété {{cssxref("border-radius")}} n'est appliquée que si une bordure est explicitement définie.</li> @@ -376,9 +376,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>Non</td> + <td>Partiel</td> <td> <ol> <li>IE9 ne prend pas en charge cette propriété.</li> @@ -406,15 +406,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("width")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("height")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>Sur Opera, les roulettes sont zoomés, ce qui peut masquer le contenu du champ.</li> @@ -422,21 +422,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("border")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("padding")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>Sur Opera, les roulettes sont zoomés, ce qui peut masquer le contenu du champ.</li> @@ -449,55 +449,55 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Texte et polices</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("color")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("font")}}</th> + <td>Oui</td> + <td>Oui</td> <td>Voir la note à propos de {{cssxref("line-height")}}.</td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("letter-spacing")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("text-align")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> + <th scope="row">{{cssxref("text-decoration")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("text-indent")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-overflow")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> + <th scope="row">{{cssxref("text-shadow")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <th scope="row">{{cssxref("text-transform")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> @@ -508,22 +508,22 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Bordure et arrière‑plan</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("background")}}</th> + <td>Non</td> + <td>Non</td> <td colspan="1" rowspan="3"> <p>Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.</p> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>Non</td> + <td>Non</td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>Non</td> + <td>Non</td> </tr> </tbody> </table> @@ -544,9 +544,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non<sup>[1]</sup></td> + <th scope="row">{{cssxref("width")}}</th> + <td>Non</td> + <td>Non</td> <td> <ol> <li>Certains navigateurs ajoutent des marges supplémentaires et d'autres étirent le widget.</li> @@ -554,9 +554,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non<sup>[1]</sup></td> + <th scope="row">{{cssxref("height")}}</th> + <td>Non</td> + <td>Non</td> <td> <ol> <li>Certains navigateurs ajoutent des marges supplémentaires et d'autres étirent le widget.</li> @@ -564,21 +564,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("border")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("padding")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> </tbody> @@ -587,55 +587,55 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Texte et polices</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <th scope="row">{{cssxref("color")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <th scope="row">{{cssxref("font")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <th scope="row">{{cssxref("letter-spacing")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <th scope="row">{{cssxref("text-align")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <th scope="row">{{cssxref("text-decoration")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <th scope="row">{{cssxref("text-indent")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <th scope="row">{{cssxref("text-overflow")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <th scope="row">{{cssxref("text-shadow")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <th scope="row">{{cssxref("text-transform")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> @@ -646,21 +646,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("background")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> </tbody> @@ -684,9 +684,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("width")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>Cette propriété est correcte sur l'élément {{HTMLElement("select")}}, mais cela peut ne pas être le cas sur les éléments {{HTMLElement("option")}} ou {{HTMLElement("optgroup")}}.</li> @@ -694,27 +694,27 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("height")}}</th> + <td>Non</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("border")}}</th> + <td>Partiel</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[2]</sup></td> + <th scope="row">{{cssxref("padding")}}</th> + <td>Non</td> + <td>Partiel</td> <td> <ol> <li>La propriété est appliquée, mais de manière incohérente entre navigateurs sous Mac OSX.</li> @@ -728,9 +728,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Texte et polices</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("color")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>Sur Mac OSX, les navigateurs fondés sur WebKit ne prennent pas en charge cette propriété sur les widgets natifs et, avec Opera, ils ne la prennent pas du tout en charge sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.</li> @@ -738,9 +738,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("font")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>Sur Mac OSX, les navigateurs fondés sur WebKit ne prennent pas en charge cette propriété sur les widgets natifs et, avec Opera, ils ne la prennent pas du tout en charge sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.</li> @@ -748,9 +748,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("letter-spacing")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>IE9 ne prend pas en charge cette propriété sur les éléments {{HTMLElement("select")}}, {{HTMLElement("option")}}, et {{HTMLElement("optgroup")}} ; les navigateurs fondés sur WebKit sur Mac OSX ne prennent pas en charge cette propriété sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.</li> @@ -758,9 +758,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <th scope="row">{{cssxref("text-align")}}</th> + <td>No</td> + <td>No</td> <td> <ol> <li>IE9 sous Windows 7 et les navigateurs fondés sur WebKit sous Mac OSX ne prennent pas en charge cette propriété pour ce widget.</li> @@ -768,9 +768,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("text-decoration")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>Seul Firefox fournit une prise en charge totale de cette propriété. Opera ne la prend pas du tout en charge et d'autres navigateur ne le font que pour l'élément {{HTMLElement("select")}}.</li> @@ -778,9 +778,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1][2]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1][2]</sup></td> + <th scope="row">{{cssxref("text-indent")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.</li> @@ -789,15 +789,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-overflow")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1][2]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1][2]</sup></td> + <th scope="row">{{cssxref("text-shadow")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.</li> @@ -806,9 +806,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("text-transform")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.</li> @@ -821,9 +821,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("background")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td colspan="1" rowspan="3"> <ol> <li>La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.</li> @@ -831,14 +831,14 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>Partiel</td> + <td>Partiel</td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>Non</td> + <td>Partiel</td> </tr> </tbody> </table> @@ -859,33 +859,33 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("width")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("height")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("border")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("padding")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>Opera ne prend pas en charge {{cssxref("padding-top")}} et {{cssxref("padding-bottom")}} sur l'élément {{HTMLElement("select")}}.</li> @@ -898,21 +898,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Texte et polices</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("color")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("font")}}</th> + <td>Oui</td> + <td>Oui</td> <td>Voir la note à propos de {{cssxref("line-height")}}.</td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("letter-spacing")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>IE9 ne prend pas en charge cette propriété sur les éléments {{HTMLElement("select")}}, {{HTMLElement("option")}}, et {{HTMLElement("optgroup")}} ; les navigateurs fondés sur WebKit sur Mac OSX ne prennent pas en charge cette propriété sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.</li> @@ -920,9 +920,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <th scope="row">{{cssxref("text-align")}}</th> + <td>No</td> + <td>No</td> <td> <ol> <li>IE9 sous Windows 7 et les navigateurs fondés sur WebKit sous Mac OSX ne prennent pas en charge cette propriété sur ce widget.</li> @@ -930,9 +930,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <th scope="row">{{cssxref("text-decoration")}}</th> + <td>No</td> + <td>No</td> <td> <ol> <li>Uniquement pris en charge par Firefox et IE9+.</li> @@ -940,27 +940,27 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-indent")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-overflow")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-shadow")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("text-transform")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.</li> @@ -973,15 +973,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("background")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>Yes</td> + <td>Yes</td> <td> <ol> <li>Sur Opera la propriété {{cssxref("border-radius")}} n'est appliquée que si une bordure est explicitement définie.</li> @@ -989,9 +989,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>Non</td> + <td>Partiel</td> <td> <ol> <li>IE9 ne prend pas en charge cette propriété.</li> @@ -1017,33 +1017,33 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("width")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("height")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("border")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("margin")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("padding")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> </tbody> @@ -1052,57 +1052,57 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Texte et polices</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("color")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("font")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("letter-spacing")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-align")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-decoration")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-indent")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-overflow")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-shadow")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-transform")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> </tbody> @@ -1111,21 +1111,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("background")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> </tbody> @@ -1147,33 +1147,33 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("width")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("height")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("border")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("padding")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> </tbody> @@ -1182,15 +1182,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Texte et polices</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("color")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <th scope="row">{{cssxref("font")}}</th> + <td>No</td> + <td>No</td> <td> <ol> <li>Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.</li> @@ -1198,9 +1198,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("letter-spacing")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>Beaucoup de navigateurs appliquent cette propriété sur le bouton de sélection.</li> @@ -1208,21 +1208,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-align")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-decoration")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("text-indent")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>Agit plus ou moins comme une marge supplementaire en dehors du widget.</li> @@ -1230,21 +1230,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-overflow")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-shadow")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-transform")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> </tbody> @@ -1253,9 +1253,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <th scope="row">{{cssxref("background")}}</th> + <td>No</td> + <td>No</td> <td> <ol> <li>Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.</li> @@ -1263,15 +1263,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>Non</td> + <td>Partiel</td> <td> <ol> <li>IE9 ne prend pas en charge cette propriété.</li> @@ -1299,33 +1299,33 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("width")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("height")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("border")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("padding")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> </tbody> @@ -1334,57 +1334,57 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Texte et polices</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("color")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("font")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("letter-spacing")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-align")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-decoration")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-indent")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-overflow")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-shadow")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-transform")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> </tbody> @@ -1393,21 +1393,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("background")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> </tbody> @@ -1431,15 +1431,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("width")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("height")}}</th> + <td>No</td> + <td>Oui</td> <td> <ol> <li>Opera gère cette propriété comme pour un widget <code>select </code>avec les mêmes restrictions.</li> @@ -1447,21 +1447,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("border")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("padding")}}</th> + <td>No</td> + <td>Oui</td> <td> <ol> <li>Opera gère cette propriété comme pour un widget <code>select </code>avec les mêmes restrictions.</li> @@ -1474,55 +1474,55 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Texte et polices</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <th scope="row">{{cssxref("color")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <th scope="row">{{cssxref("font")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <th scope="row">{{cssxref("letter-spacing")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <th scope="row">{{cssxref("text-align")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <th scope="row">{{cssxref("text-decoration")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <th scope="row">{{cssxref("text-indent")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <th scope="row">{{cssxref("text-overflow")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <th scope="row">{{cssxref("text-shadow")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <th scope="row">{{cssxref("text-transform")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> @@ -1533,9 +1533,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <th scope="row">{{cssxref("background")}}</th> + <td>No</td> + <td>No</td> <td colspan="1" rowspan="3"> <ol> <li>Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.</li> @@ -1543,14 +1543,14 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>No</td> + <td>No</td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>No</td> + <td>No</td> </tr> </tbody> </table> @@ -1573,33 +1573,33 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("width")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("height")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("border")}}</th> + <td>Partiel</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("padding")}}</th> + <td>Oui</td> + <td>Partiel</td> <td> <ol> <li>Chrome cache les éléments {{HTMLElement("progress")}} et {{HTMLElement("meter")}} quand la propriété {{cssxref("padding")}} est appliquée sur un élément altéré.</li> @@ -1612,55 +1612,55 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Texte et polices</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <th scope="row">{{cssxref("color")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <th scope="row">{{cssxref("font")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <th scope="row">{{cssxref("letter-spacing")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <th scope="row">{{cssxref("text-align")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <th scope="row">{{cssxref("text-decoration")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <th scope="row">{{cssxref("text-indent")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <th scope="row">{{cssxref("text-overflow")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <th scope="row">{{cssxref("text-shadow")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <th scope="row">{{cssxref("text-transform")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> @@ -1671,9 +1671,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <th scope="row">{{cssxref("background")}}</th> + <td>No</td> + <td>No</td> <td colspan="1" rowspan="3"> <ol> <li>Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.</li> @@ -1681,14 +1681,14 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>No</td> + <td>No</td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>No</td> + <td>No</td> </tr> </tbody> </table> @@ -1711,15 +1711,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("width")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("height")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>Chrome et Opera ajoutent quelque espace supplémentaire autour du widget, alors que Opera sous Windows 7 réduit la poignée de <code>range</code>.</li> @@ -1727,21 +1727,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("border")}}</th> + <td>Non</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("padding")}}</th> + <td>Partiel</td> + <td>Oui</td> <td> <ol> <li>La propriété {{cssxref("padding")}} est appliquée, mais elle n'a aucun effet visible.</li> @@ -1754,55 +1754,55 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Texte et polices</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <th scope="row">{{cssxref("color")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <th scope="row">{{cssxref("font")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <th scope="row">{{cssxref("letter-spacing")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <th scope="row">{{cssxref("text-align")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <th scope="row">{{cssxref("text-decoration")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <th scope="row">{{cssxref("text-indent")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <th scope="row">{{cssxref("text-overflow")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <th scope="row">{{cssxref("text-shadow")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <th scope="row">{{cssxref("text-transform")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> @@ -1813,9 +1813,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <th scope="row">{{cssxref("background")}}</th> + <td>No</td> + <td>No</td> <td colspan="1" rowspan="3"> <ol> <li>Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.</li> @@ -1823,14 +1823,14 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>No</td> + <td>No</td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>No</td> + <td>No</td> </tr> </tbody> </table> @@ -1851,33 +1851,33 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("width")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("height")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("border")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("padding")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> </tbody> @@ -1886,55 +1886,55 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Texte et polices</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <th scope="row">{{cssxref("color")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <th scope="row">{{cssxref("font")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <th scope="row">{{cssxref("letter-spacing")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <th scope="row">{{cssxref("text-align")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <th scope="row">{{cssxref("text-decoration")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <th scope="row">{{cssxref("text-indent")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <th scope="row">{{cssxref("text-overflow")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <th scope="row">{{cssxref("text-shadow")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <th scope="row">{{cssxref("text-transform")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> @@ -1945,15 +1945,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("background")}}</th> + <td>Oui</td> + <td>Oui</td> <td colspan="1"> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td colspan="1"> <ol> <li>IE9 ne prend pas en charge cette propriété.</li> @@ -1961,9 +1961,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td colspan="1"> <ol> <li>IE9 ne prend pas en charge cette propriété.</li> @@ -1979,7 +1979,7 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <ul> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment structurer un formulaire HTML</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li> diff --git a/files/fr/learn/forms/sending_and_retrieving_form_data/index.html b/files/fr/learn/forms/sending_and_retrieving_form_data/index.html index 9585d26c64..c2736e9d5b 100644 --- a/files/fr/learn/forms/sending_and_retrieving_form_data/index.html +++ b/files/fr/learn/forms/sending_and_retrieving_form_data/index.html @@ -17,9 +17,9 @@ original_slug: Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_f --- <div>{{LearnSidebar}}{{PreviousMenu("Learn/Forms/Form_validation", "Learn/Forms")}}</div> -<p class="summary">Cet article examine ce qui arrive quand un utilisateur soumet un formulaire — où les données vont-elles et comment les gère-t-on une fois à destination ? Nous examinerons aussi quelques problèmes de sécurité associés à l'envoi des données d'un formulaire.</p> +<p>Cet article examine ce qui arrive quand un utilisateur soumet un formulaire — où les données vont-elles et comment les gère-t-on une fois à destination ? Nous examinerons aussi quelques problèmes de sécurité associés à l'envoi des données d'un formulaire.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -42,9 +42,8 @@ original_slug: Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_f <p>Côté client, un formulaire HTML n'est rien d'autre qu'un moyen commode et convivial de configurer une requête HTTP pour envoyer des données à un serveur. L'utilisateur peut ainsi adresser des informations à joindre à la requête HTTP.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Pour une meilleure idée du fonctionnement de l'architecture client‑serveur, lisez notre module <a href="/fr/docs/Learn/Server-side/First_steps">Programmation d'un site web côté‑serveur : premiers pas</a>.</p> +<div class="note"> + <p><strong>Note :</strong> Pour une meilleure idée du fonctionnement de l'architecture client‑serveur, lisez notre module <a href="/fr/docs/Learn/Server-side/First_steps">Programmation d'un site web côté‑serveur : premiers pas</a>.</p> </div> <h2 id="on_the_client_side_defining_how_to_send_the_data">Côté client : définition de la méthode d'envoi des données</h2> @@ -71,9 +70,8 @@ original_slug: Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_f <pre class="brush: html"><form action="#"></pre> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Il est possible de spécifier une URL qui utilise le protocole HTTPS (HTTP sécurisé). Quand vous faites ceci, les données sont chiffrées avec le reste de la requête, même si le formulaire lui-même est hébergé dans une page non sécurisée à laquelle on accède via HTTP. D'autre part, si le formulaire est hébergé sur une page sécurisée mais qu'on spécifie une URL non sécurisée avec l'attribut <a href="/fr/docs/Web/HTML/Element/Form#attr-action"><code>action</code></a>, tous les navigateurs affichent une alerte de sécurité pour l'utilisateur chaque fois qu'il envoie des données car celles-ci ne sont pas chiffrées.</p> +<div class="note"> + <p><strong>Note :</strong> Il est possible de spécifier une URL qui utilise le protocole HTTPS (HTTP sécurisé). Quand vous faites ceci, les données sont chiffrées avec le reste de la requête, même si le formulaire lui-même est hébergé dans une page non sécurisée à laquelle on accède via HTTP. D'autre part, si le formulaire est hébergé sur une page sécurisée mais qu'on spécifie une URL non sécurisée avec l'attribut <a href="/fr/docs/Web/HTML/Element/Form#attr-action"><code>action</code></a>, tous les navigateurs affichent une alerte de sécurité pour l'utilisateur chaque fois qu'il envoie des données car celles-ci ne sont pas chiffrées.</p> </div> <h3 id="the_method_attribute">L'attribut method</h3> @@ -118,9 +116,8 @@ original_slug: Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_f <pre>GET /?say=Hi&to=Mom HTTP/1.1 Host: foo.com</pre> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Vous trouverez cet exemple sur GitHub — voyez <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/get-method.html">get-method.html</a> (à voir <a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html">directement aussi</a>).</p> +<div class="note"> + <p><strong>Note :</strong> Vous trouverez cet exemple sur GitHub — voyez <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/get-method.html">get-method.html</a> (à voir <a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html">directement aussi</a>).</p> </div> <h4 id="the_post_method">La méthode POST</h4> @@ -154,9 +151,8 @@ say=Hi&to=Mom</pre> <p>L'en-tête <code>Content-Length </code>indique la taille du corps, et l'en-tête <code>Content-Type</code> indique le type de ressources envoyées au serveur. Nous discuterons de ces en-têtes dans un moment.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Vous trouverez cet exemple sur GitHub — voyez <a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html">post-method.html</a> (à voir <a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html">directement aussi</a>).</p> +<div class="note"> + <p><strong>Note :</strong> Vous trouverez cet exemple sur GitHub — voyez <a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html">post-method.html</a> (à voir <a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html">directement aussi</a>).</p> </div> <h3 id="viewing_http_requests">Voir les requêtes HTTP</h3> @@ -202,10 +198,9 @@ say=Hi&to=Mom</pre> <p><img alt="L'exécution du code PHP déclenche l'affichage de Hi Mom" src="php-result.png"></p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Cet exemple ne fonctionnera pas si vous le chargez localement dans un navigateur — les navigateurs ne savent pas interpréter le code PHP, donc quand le formulaire est soumis, le navigateur vous offrira seulement de télécharger le fichier PHP pour vous. Pour qu'il s'exécute, il est nécessaire de lancer l'exemple par l'intermédiaire d'un serveur PHP de n'importe quel type. Les bons choix pour des tests locaux de PHP sont <a href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac et Windows) et <a href="https://ampps.com/download">AMPPS</a> (Mac, Windows, Linux).</p> - <p></p>Notez également que si vous utilisez MAMP mais que vous n'avez pas installé MAMP Pro (ou si le temps d'essai de la démo de MAMP Pro a expiré), vous pourriez avoir des difficultés à le faire fonctionner. Pour le faire fonctionner à nouveau, nous avons constaté que vous pouvez charger l'application MAMP, puis choisir les options de menu <em>MAMP</em> > <em>Préférences</em> > <em>PHP</em>, et définir "Version standard :" à "7.2.x" (x sera différent selon la version que vous avez installée).</p> +<div class="note"> + <p><strong>Note :</strong> Cet exemple ne fonctionnera pas si vous le chargez localement dans un navigateur — les navigateurs ne savent pas interpréter le code PHP, donc quand le formulaire est soumis, le navigateur vous offrira seulement de télécharger le fichier PHP pour vous. Pour qu'il s'exécute, il est nécessaire de lancer l'exemple par l'intermédiaire d'un serveur PHP de n'importe quel type. Les bons choix pour des tests locaux de PHP sont <a href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac et Windows) et <a href="https://ampps.com/download">AMPPS</a> (Mac, Windows, Linux).</p> + <p>Notez également que si vous utilisez MAMP mais que vous n'avez pas installé MAMP Pro (ou si le temps d'essai de la démo de MAMP Pro a expiré), vous pourriez avoir des difficultés à le faire fonctionner. Pour le faire fonctionner à nouveau, nous avons constaté que vous pouvez charger l'application MAMP, puis choisir les options de menu <em>MAMP</em> > <em>Préférences</em> > <em>PHP</em>, et définir "Version standard :" à "7.2.x" (x sera différent selon la version que vous avez installée).</p> </div> <h3 id="example_python">Exemple: Python</h3> @@ -233,9 +228,8 @@ if __name__ == "__main__": <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/greeting.html">greeting.html</a> : Ce modèle contient juste une ligne qui renvoie les deux éléments de donnée qui lui sont passées lors du rendu. Cela est effectué par l'intermédiaire de la fonction <code>hello()</code> vue plus haut qui s'exécute quand l'URL <code>/hello</code> est chargée dans le navigateur.</li> </ul> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>À nouveau, ce code ne fonctionnera pas si vous tentez de le charger directement dans le navigateur. Python fonctionne un peu différemment de PHP — pour exécuter ce code localement il est nécessaire d'<a href="/fr/docs/Learn/Server-side/Django/development_environment#installing_python_3">installer Python/PIP</a>, puis Flask avec « <code>pip3 install flask</code> ». À ce moment‑là vous pourrez exécuter l'exemple avec « <code>python3 python-example.py</code> », puis en allant sur « <code>localhost:5000</code> » dans votre navigateur.</p> +<div class="note"> + <p><strong>Note :</strong> À nouveau, ce code ne fonctionnera pas si vous tentez de le charger directement dans le navigateur. Python fonctionne un peu différemment de PHP — pour exécuter ce code localement il est nécessaire d'<a href="/fr/docs/Learn/Server-side/Django/development_environment#installing_python_3">installer Python/PIP</a>, puis Flask avec « <code>pip3 install flask</code> ». À ce moment‑là vous pourrez exécuter l'exemple avec « <code>python3 python-example.py</code> », puis en allant sur « <code>localhost:5000</code> » dans votre navigateur.</p> </div> <h3 id="other_languages_and_frameworks">Autres langages et canevas de structures</h3> @@ -253,9 +247,8 @@ if __name__ == "__main__": <p>Enfin il faut noter que même en utilisant ces canevas, travailler avec des formulaires n'est pas toujours <em>facile</em>. Mais c'est quand même bien plus facile que d'essayer d'en écrire vous‑même les fonctionnalités et cela vous économisera pas mal de temps.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Nous déborderions du cadre de cet article en vous initiant aux langages côté serveur ou aux canevas. Les liens ci‑dessus vous donneront des informations si vous souhaitez en apprendre plus.</p> +<div class="note"> + <p><strong>Note :</strong> Nous déborderions du cadre de cet article en vous initiant aux langages côté serveur ou aux canevas. Les liens ci‑dessus vous donneront des informations si vous souhaitez en apprendre plus.</p> </div> <h2 id="a_special_case_sending_files">Cas particulier : envoyer des fichiers</h2> @@ -286,9 +279,8 @@ if __name__ == "__main__": </div> </form></pre> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Les serveurs peuvent être configurés avec une limite de taille pour les fichiers et les requêtes HTTP afin d'éviter les abus.</p> +<div class="note"> + <p><strong>Note :</strong> Les serveurs peuvent être configurés avec une limite de taille pour les fichiers et les requêtes HTTP afin d'éviter les abus.</p> </div> <h2 id="security_issues">Problèmes courants de sécurité</h2> @@ -331,7 +323,7 @@ if __name__ == "__main__": <ul> <li><a href="/fr/docs/Learn/Forms/Your_first_form">Mon premier formulaire HTML</a></li> - <li><a href="/fr/docs/Learn/Forms/How_to_structure_a_web_form"><span>Comment structurer un formulaire HTML</span></a></li> + <li><a href="/fr/docs/Learn/Forms/How_to_structure_a_web_form">Comment structurer un formulaire HTML</a></li> <li><a href="/fr/docs/Learn/Forms/Basic_native_form_controls">Les widgets natifs pour formulaire</a></li> <li><a href="/fr/docs/Learn/Forms/HTML5_input_types">Les types de saisie HTML5</a></li> <li><a href="/fr/docs/Learn/Forms/Other_form_controls">Autres contrôles de formulaires</a></li> diff --git a/files/fr/learn/forms/sending_forms_through_javascript/index.html b/files/fr/learn/forms/sending_forms_through_javascript/index.html index 73a9f6e15b..571ede2a5b 100644 --- a/files/fr/learn/forms/sending_forms_through_javascript/index.html +++ b/files/fr/learn/forms/sending_forms_through_javascript/index.html @@ -6,7 +6,7 @@ original_slug: Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript --- <div>{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires")}}</div> -<p class="summary">Comme dans le <a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">précédent article</a>, les formulaires HTML peuvent envoyer une requête HTTP par déclaration. Mais des formulaires peuvent aussi préparer une requête HTTP à adresser via JavaScript. Cet article explore comment faire cela.</p> +<p>Comme dans le <a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">précédent article</a>, les formulaires HTML peuvent envoyer une requête HTTP par déclaration. Mais des formulaires peuvent aussi préparer une requête HTTP à adresser via JavaScript. Cet article explore comment faire cela.</p> <h2 id="Un_formulaire_n'est_pas_toujours_un_<form>">Un formulaire n'est pas toujours un <form></h2> @@ -22,7 +22,7 @@ original_slug: Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript <h3 id="Comment_est-ce_différent">Comment est-ce différent ?</h3> -<p><a href="/en-US/docs/AJAX">AJAX</a> utilise l'objet DOM {{domxref("XMLHttpRequest")}} (XHR).Il peut construire des requêtes HTTP, les envoyer et retrouver leur résultats.</p> +<p><a href="/fr/docs/AJAX">AJAX</a> utilise l'objet DOM {{domxref("XMLHttpRequest")}} (XHR).Il peut construire des requêtes HTTP, les envoyer et retrouver leur résultats.</p> <div class="note"> <p><strong>Note :</strong> Les techniques AJAX anciennes ne se fondaient pas forcément sur {{domxref("XMLHttpRequest")}}. Par exemple, <a href="http://en.wikipedia.org/wiki/JSONP" rel="external">JSONP</a> combiné à la fonction <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/eval"><code>eval()</code></a>. Cela fonctionne, mais n'est pas recommandé en raison de sérieux problèmes de sécurité. La seule raison d'en poursuivre l'utilisation est l'utilisation de navigateurs anciens qui ne prennent pas en charge {{domxref("XMLHttpRequest")}} ou <a href="/fr/docs/Glossaire/JSON">JSON</a>, mais ce sont vraiment des navigateurs anciens ! <strong>Évitez ces techniques.</strong></p> @@ -206,7 +206,7 @@ original_slug: Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript <p>La plus ancienne façon d'expédier des données de formulaire de manière asynchrone consiste à construire un formulaire avec l'API DOM, puis d'envoyer ses données dans un {{HTMLElement("iframe")}} caché. Pour accéder au résultat de votre envoi, il suffit de récupérer le contenu de l'élément {{HTMLElement("iframe")}}.</p> <div class="warning"> -<p><strong>Avertissement :</strong> <strong>Évitez d'employer cette technique.</strong> Il y a des risques concernant la sécurité avec des services tierce-partie car vous laissez ouverte la possibilité d'une <a href="https://fr.wikipedia.org/wiki/Cross-site_scripting" rel="external">attaque par injection de script</a>. Si vous utilisez HTTPS, il reste possible de perturber la <a href="/fr/docs/JavaScript/Same_origin_policy_for_JavaScript">politique de la même origine</a>, ce qui peut rendre le contenu de l'élément {{HTMLElement("iframe")}} inatteignable. Toutefois, cette méthode peut être votre seule possibilité si vous devez prendre en charge des navigateurs très anciens.</p> +<p><strong>Attention :</strong> <strong>Évitez d'employer cette technique.</strong> Il y a des risques concernant la sécurité avec des services tierce-partie car vous laissez ouverte la possibilité d'une <a href="https://fr.wikipedia.org/wiki/Cross-site_scripting" rel="external">attaque par injection de script</a>. Si vous utilisez HTTPS, il reste possible de perturber la <a href="/fr/docs/JavaScript/Same_origin_policy_for_JavaScript">politique de la même origine</a>, ce qui peut rendre le contenu de l'élément {{HTMLElement("iframe")}} inatteignable. Toutefois, cette méthode peut être votre seule possibilité si vous devez prendre en charge des navigateurs très anciens.</p> </div> <p>Voici un exemple :</p> @@ -260,7 +260,7 @@ function sendData(data) { <p> </p> -<h2 id="Gestion_des_données_binaires"><span>Gestion des données binaires</span></h2> +<h2 id="Gestion_des_données_binaires">Gestion des données binaires</h2> <p>Si vous utilisez un objet {{domxref("XMLHttpRequest/FormData", "FormData")}} avec un formulaire qui inclut des widgets <code><input type="file"></code>, les données seront traitées automatiquement. Mais pour envoyer des données binaires à la main, il y a un travail supplémentaire à faire.</p> @@ -428,7 +428,7 @@ window.addEventListener('load', function () { <ul> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment structurer un formulaire HTML</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li> diff --git a/files/fr/learn/forms/styling_web_forms/index.html b/files/fr/learn/forms/styling_web_forms/index.html index ea8b60a29b..95ddead893 100644 --- a/files/fr/learn/forms/styling_web_forms/index.html +++ b/files/fr/learn/forms/styling_web_forms/index.html @@ -81,7 +81,7 @@ original_slug: Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML -webkit-appearance: none; }</pre> -<p><img alt="This is a screenshot of a search filed on Chrome, with and without the use of -webkit-appearance" src="/files/4153/search-chrome-macos.png" style="border-style: solid; border-width: 1px; height: 107px; width: 179px;"></p> +<p><img alt="This is a screenshot of a search filed on Chrome, with and without the use of -webkit-appearance" src="search-chrome-macos.png"></p> <p>Comme vous pouvez le voir sur la capture d'écran pour Chrome, les deux champs ont une bordure, mais le premier champ n'utilise pas la propriété <code>-webkit-appearance</code> tandis que le second a recours à la propriété <code>-webkit-appearance:none</code>. La différence est notable.</p> @@ -96,7 +96,7 @@ original_slug: Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML <p>La capture d'écran ci-dessous montre les différences. Sur la gauche il y a l'affichage par défaut de Firefox pour Mac OS X, avec les réglages de police par défaut du système. Sur la droite, les mêmes éléments avec la règle d'harmonisation utilisée.</p> -<p><img alt="This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization" src="/files/4157/font-firefox-macos.png" style="border-style: solid; border-width: 1px; height: 234px; width: 420px;"></p> +<p><img alt="This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization" src="font-firefox-macos.png"></p> <p>Il existe un débat animé sur le fait qu'un formulaire ait une meilleure apparence en utilisant les valeurs par défaut du système d'exploitation ou en utilisant des valeurs unifiant l'apparence. C'est à vous de décider en tant que designer du site ou de l'application.</p> @@ -115,7 +115,7 @@ original_slug: Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML box-sizing: border-box; }</pre> -<p><img alt="This is a screenshot of the main form widgets on Chrome on Windows 7, with and without the use of box-sizing." src="/files/4161/size-chrome-win7.png" style="border-style: solid; border-width: 1px; height: 213px; width: 358px;"></p> +<p><img alt="This is a screenshot of the main form widgets on Chrome on Windows 7, with and without the use of box-sizing." src="size-chrome-win7.png"></p> <p>Dans la capture d'écran ci-dessous, la colonne de gauche n'utilise pas {{cssxref("box-sizing")}}, alors que la colonne de droite utilise la propriété CSS <code>border-box</code>. Remarquez comment tous les éléments occupent le même espace, malgré les valeurs par défaut de la plateforme pour chacun des blocs.</p> @@ -156,7 +156,7 @@ original_slug: Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML <p>Regardons sur un exemple concret la façon de composer un formulaire HTML. Cela aidera à clarifier nombre de ces concepts. Nous allons construire un formulaire de contact sous forme de « carte postale » :</p> -<p><img alt="C'est ce que nous voulons réaliser avec le HTML et les CSS." src="https://mdn.mozillademos.org/files/16012/fr-carte.png" style="border-style: solid; border-width: 1px; height: 315px; width: 465px;"></p> +<p><img alt="C'est ce que nous voulons réaliser avec le HTML et les CSS." src="fr-carte.png"></p> <h3 id="HTML_2">HTML</h3> @@ -203,7 +203,7 @@ original_slug: Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML <li>Allez sur le <a href="https://www.fontsquirrel.com/tools/webfont-generator">Webfont Generator</a> de fontsquirrel.</li> <li>En utilisant le formulaire, téléversez les fichiers de polices et créez un kit de polices pou le Web. Téléchargez le kit sur votre ordinateur.</li> <li>Décompressez le fichier zip fourni.</li> - <li>Dans le contenu décompressé vous trouverez deux fichiers <code>.woff</code> et deux fichiers <code>.woff2</code>. Copiez ces quatre fichiers dans un répertoire nommé <code>fonts</code>, dans le même répertoire que ci‑dessus. Nous utilisons deux fichiers différents pour maximiser la compatibilité avec les navigateurs ; voyez notre article sur les <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a> pour des informations plus détaillées.</li> + <li>Dans le contenu décompressé vous trouverez deux fichiers <code>.woff</code> et deux fichiers <code>.woff2</code>. Copiez ces quatre fichiers dans un répertoire nommé <code>fonts</code>, dans le même répertoire que ci‑dessus. Nous utilisons deux fichiers différents pour maximiser la compatibilité avec les navigateurs ; voyez notre article sur les <a href="/fr/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a> pour des informations plus détaillées.</li> </ol> <h3 id="Le_CSS">Le CSS</h3> @@ -216,18 +216,18 @@ original_slug: Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML <pre class="brush: css">@font-face{ font-family : "handwriting"; -<code class="language-css"><span class="property token"> src</span><span class="punctuation token">:</span> <span class="token url">url('fonts/journal-webfont.woff2')</span> <span class="function token">format</span><span class="punctuation token">(</span><span class="string token">'woff2'</span><span class="punctuation token">)</span>, - <span class="token url">url('fonts/journal-webfont.woff')</span> <span class="function token">format</span><span class="punctuation token">(</span><span class="string token">'woff'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="property token">font-weight</span><span class="punctuation token">:</span> normal<span class="punctuation token">;</span> - <span class="property token">font-style</span><span class="punctuation token">:</span> normal<span class="punctuation token">;</span></code> +<code class="language-css"> src: url('fonts/journal-webfont.woff2') format('woff2'), + url('fonts/journal-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal;</code> } @font-face{ font-family : "typewriter"; -<code class="language-css"> <span class="property token">src</span><span class="punctuation token">:</span> <span class="token url">url('fonts/veteran_typewriter-webfont.woff2')</span> <span class="function token">format</span><span class="punctuation token">(</span><span class="string token">'woff2'</span><span class="punctuation token">)</span>, - <span class="token url">url('fonts/veteran_typewriter-webfont.woff')</span> <span class="function token">format</span><span class="punctuation token">(</span><span class="string token">'woff'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="property token">font-weight</span><span class="punctuation token">:</span> normal<span class="punctuation token">;</span> - <span class="property token">font-style</span><span class="punctuation token">:</span> normal<span class="punctuation token">;</span></code> +<code class="language-css"> src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'), + url('fonts/veteran_typewriter-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal;</code> } body { @@ -327,7 +327,7 @@ form { overflow: auto; }</pre> -<p>L'élément {{HTMLElement("button")}} est très accommodant avec les CSS ; vous faites ce que vous voulez, même en utilisant les <a href="/en-US/docs/CSS/Pseudo-elements" title="/en-US/docs/CSS/Pseudo-elements">pseudo-elements</a> !</p> +<p>L'élément {{HTMLElement("button")}} est très accommodant avec les CSS ; vous faites ce que vous voulez, même en utilisant les <a href="/fr/docs/CSS/Pseudo-elements" title="/en-US/docs/CSS/Pseudo-elements">pseudo-elements</a> !</p> <pre class="brush: css">button { position : absolute; @@ -379,7 +379,7 @@ button:focus { <ul> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment structurer un formulaire HTML</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li> diff --git a/files/fr/learn/forms/your_first_form/example/index.html b/files/fr/learn/forms/your_first_form/example/index.html index 70455c78a8..d5268524e3 100644 --- a/files/fr/learn/forms/your_first_form/example/index.html +++ b/files/fr/learn/forms/your_first_form/example/index.html @@ -6,7 +6,7 @@ original_slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML/Exemple --- <p>Ceci est l'exemple pour l'article <a href="/fr/docs/HTML/Formulaires/Mon_premier_formulaire_HTML" title="/en-US/docs/HTML/Forms/My_first_HTML_form">Mon premier formulaire HTML</a>.</p> -<h2 id="Un_formulaire_simple" name="Un_formulaire_simple">Un formulaire simple</h2> +<h2 id="Un_formulaire_simple">Un formulaire simple</h2> <h3 id="Contenu_HTML">Contenu HTML</h3> diff --git a/files/fr/learn/forms/your_first_form/index.html b/files/fr/learn/forms/your_first_form/index.html index ca8631cf21..4ee759f619 100644 --- a/files/fr/learn/forms/your_first_form/index.html +++ b/files/fr/learn/forms/your_first_form/index.html @@ -15,9 +15,9 @@ original_slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML --- <p>{{LearnSidebar}}{{NextMenu("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires")}}</p> -<p class="summary">Le premier article de notre série vous offre une toute première expérience de création de formulaire en HTML, y compris sa conception, sa mise en œuvre en utilisant les bons éléments HTML, l'ajout de quelques très simples décorations avec les CSS et la façon dont les données sont envoyées à un serveur.</p> +<p>Le premier article de notre série vous offre une toute première expérience de création de formulaire en HTML, y compris sa conception, sa mise en œuvre en utilisant les bons éléments HTML, l'ajout de quelques très simples décorations avec les CSS et la façon dont les données sont envoyées à un serveur.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -49,7 +49,7 @@ original_slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML <p>Dans ce guide, nous allons concevoir un formulaire de contact simple. Posons les premières pierres.</p> -<p><img alt="Le croquis du formulaire que l'on veut créer" src="https://mdn.mozillademos.org/files/15999/0006.png" style="border-style: solid; border-width: 1px; height: 375px; width: 400px;"></p> +<p><img alt="Le croquis du formulaire que l'on veut créer" src="0006.png"></p> <p>Notre formulaire contiendra trois champs de texte et un bouton. Nous demandons simplement à notre utilisateur son nom, son adresse électronique et le message qu'il souhaite envoyer. En appuyant sur le bouton, le message sera envoyé au serveur web.</p> @@ -63,7 +63,7 @@ original_slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML <p>Tous les formulaires HTML débutent par un élément {{HTMLElement("form")}} comme celui-ci :</p> -<pre class="brush:html; notranslate"><form action="/<code class="language-html">my-handling-form-page</code>" method="post"> +<pre class="brush:html;"><form action="/my-handling-form-page" method="post"> </form></pre> @@ -86,7 +86,7 @@ original_slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML <p>En terme de code HTML, nous avons besoin de quelque chose qui ressemble à ceci pour mettre en œuvre nos widgets de formulaire.</p> -<pre class="brush:html; notranslate"><form action="/ma-page-de-traitement" method="post"> +<pre class="brush:html;"><form action="/ma-page-de-traitement" method="post"> <div> <label for="name">Nom :</label> <input type="text" id="name" name="user_name"> @@ -112,17 +112,17 @@ original_slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML <p>Last but not least, remarquez la syntaxe de <code><input></code> vs <code><textarea></textarea></code>. C'est une des bizarreries du HTML. La balise <code><input></code> est un élément vide, ce qui signifie qu'il n'a pas besoin de balise fermante. Au contraire, {{HTMLElement("textarea")}} n'est pas un élément vide, il faut donc le fermer avec la balise fermante appropriée. Cela a un effet sur une caractéristique spécifique des formulaires HTML : la manière dont vous définissez la valeur par défaut. Pour définir une valeur par défaut d'un élément {{HTMLElement("input")}} vous devez utiliser l'attribut <code>value</code> de la manière suivante :</p> -<pre class="brush:html; notranslate"><input type="text" value="par défaut cet élément sera renseigné avec ce texte"></pre> +<pre class="brush:html;"><input type="text" value="par défaut cet élément sera renseigné avec ce texte"></pre> <p>A contrario, si vous souhaitez définir la valeur par défaut d'un élément {{HTMLElement("textarea")}}, il suffit simplement de mettre la valeur par défaut entre les balises ouvrantes et fermantes de l'élément {{HTMLElement("textarea")}} de la manière suivante :</p> -<pre class="brush:html; notranslate"><textarea>par défaut cet élément sera renseigné avec ce texte</textarea></pre> +<pre class="brush:html;"><textarea>par défaut cet élément sera renseigné avec ce texte</textarea></pre> <h3 id="Lélément_HTMLElementbutton">L'élément {{HTMLElement("button")}}</h3> <p>Notre formulaire est presque terminé. Il nous suffit seulement d'ajouter un bouton pour permettre à l'utilisateur de nous envoyer les données renseignées dans le formulaire. Ceci se fait simplement en ajoutant d'un élément {{HTMLElement("button")}} ; ajoutez‑le juste avant la balise fermante <code></form> :</code></p> -<pre class="brush:html; notranslate"> <div class="button"> +<pre class="brush:html;"> <div class="button"> <button type="submit">Envoyer le message</button> </div> </pre> @@ -136,30 +136,30 @@ original_slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML </ul> <div class="note"> -<p><strong>Note :</strong> Vous pouvez aussi utiliser l'élément {{HTMLElement("input")}} avec le type approprié pour produire un bouton, par exemple <code><input type="submit"></code>. Le principal avantage de {{HTMLElement("button")}} par rapport à l'élément {{HTMLElement("input")}} est que ce dernier ne permet d'utiliser que du texte comme étiquette tandis que l'élément {{HTMLElement("button")}} permet d'utiliser n'importe quel contenu HTML, autorisant ainsi des textes de bouton plus complexes et créatifs.</p> +<p><strong>Note :</strong> Vous pouvez aussi utiliser l'élément {{HTMLElement("input")}} avec le type approprié pour produire un bouton, par exemple <code><input type="submit"></code>. Le principal avantage de {{HTMLElement("button")}} par rapport à l'élément {{HTMLElement("input")}} est que ce dernier ne permet d'utiliser que du texte comme étiquette tandis que l'élément {{HTMLElement("button")}} permet d'utiliser n'importe quel contenu HTML, autorisant ainsi des textes de bouton plus complexes et créatifs.</p> </div> <h2 id="Mise_en_page_élémentaire_du_formulaire">Mise en page élémentaire du formulaire</h2> <p>Nous avons désormais notre formulaire HTML, et si vous le regardez dans votre navigateur préféré, vous verrez qu'il est plutôt laid.</p> -<p><img alt="" src="/files/4049/form-no-style.png" style="height: 170px; width: 534px;"></p> +<p><img alt="" src="form-no-style.png"></p> <div class="note"> -<p><strong>Note :</strong> Si vous pensez que vous n'avez pas écrit un code HTML correct, faites la comparaison avec celui de notre exemple terminé — voyez <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html">first-form.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html"> </a>ou<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html"> également directement</a>).</p> +<p><strong>Note :</strong> Si vous pensez que vous n'avez pas écrit un code HTML correct, faites la comparaison avec celui de notre exemple terminé — voyez <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html">first-form.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html"> </a>ou<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html"> également directement</a>).</p> </div> <p>Les formulaires sont notoirement embêtants à présenter joliment. Apprendre la mise en page ou la décoration des formulaires sort du cadre de cet article, donc pour le moment nous allons simplement ajouter quelques indications au CSS pour lui donner un air convenable.</p> <p>Tout d'abord, ajoutons un élément {{htmlelement("style")}} à notre page, dans l'en‑tête HTML. Comme ceci :</p> -<pre class="brush: html notranslate"><style> +<pre class="brush: html"><style> </style></pre> <p>Entre les balises style, ajoutons le CSS suivant, juste comme indiqué :</p> -<pre class="brush:css; notranslate">form { +<pre class="brush:css; ">form { /* Uniquement centrer le formulaire sur la page */ margin: 0 auto; width: 400px; @@ -219,10 +219,10 @@ button { <p>Désormais notre formulaire a une bien meilleure allure.</p> -<p><img alt="" src="/files/4051/form-style.png" style="height: 260px; width: 900px;"></p> +<p><img alt="" src="form-style.png"></p> <div class="note"> -<p><strong>Note</strong> : Il est sur GitHub dans <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form-styled.html">first-form-styled.html</a> (à voir aussi <a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html">directement</a>).</p> +<p><strong>Note :</strong> Il est sur GitHub dans <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form-styled.html">first-form-styled.html</a> (à voir aussi <a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html">directement</a>).</p> </div> <h2 id="Envoyer_les_données_au_serveur_Web">Envoyer les données au serveur Web</h2> @@ -235,7 +235,7 @@ button { <p>Pour nommer vos données vous devez utiliser l'attribut <code>name</code> pour identifier bien précisément l'élément d'information collecté par chacun des widgets. Regardons à nouveau le code de notre formulaire :</p> -<pre class="brush:html; notranslate">form action="/my-handling-form-page" method="post"> +<pre class="brush:html; ">form action="/my-handling-form-page" method="post"> <div> <label for="name">Nom :</label> <input type="text" id="name" name="user_name" /> |