From dea9d1f019d9e14357c58cf18653df1ac779d9d8 Mon Sep 17 00:00:00 2001 From: julieng Date: Wed, 13 Oct 2021 07:13:08 +0200 Subject: convert content to md --- files/fr/web/html/applying_color/index.md | 594 +++--- files/fr/web/html/attributes/accept/index.md | 224 +- files/fr/web/html/attributes/autocomplete/index.md | 405 ++-- files/fr/web/html/attributes/capture/index.md | 99 +- files/fr/web/html/attributes/crossorigin/index.md | 108 +- files/fr/web/html/attributes/disabled/index.md | 233 +- .../fr/web/html/attributes/elementtiming/index.md | 63 +- files/fr/web/html/attributes/for/index.md | 72 +- files/fr/web/html/attributes/index.md | 2215 ++++++++++++++++---- files/fr/web/html/attributes/max/index.md | 214 +- files/fr/web/html/attributes/maxlength/index.md | 62 +- files/fr/web/html/attributes/min/index.md | 198 +- files/fr/web/html/attributes/minlength/index.md | 70 +- files/fr/web/html/attributes/multiple/index.md | 274 +-- files/fr/web/html/attributes/pattern/index.md | 176 +- files/fr/web/html/attributes/readonly/index.md | 146 +- files/fr/web/html/attributes/rel/index.md | 604 +++--- files/fr/web/html/attributes/required/index.md | 110 +- files/fr/web/html/attributes/size/index.md | 84 +- files/fr/web/html/attributes/step/index.md | 166 +- files/fr/web/html/block-level_elements/index.md | 209 +- files/fr/web/html/cors_enabled_image/index.md | 102 +- files/fr/web/html/date_and_time_formats/index.md | 438 ++-- files/fr/web/html/element/a/index.md | 557 ++--- files/fr/web/html/element/abbr/index.md | 201 +- files/fr/web/html/element/acronym/index.md | 65 +- files/fr/web/html/element/address/index.md | 157 +- files/fr/web/html/element/applet/index.md | 185 +- files/fr/web/html/element/area/index.md | 248 ++- files/fr/web/html/element/article/index.md | 179 +- files/fr/web/html/element/aside/index.md | 128 +- files/fr/web/html/element/audio/index.md | 548 +++-- files/fr/web/html/element/b/index.md | 107 +- files/fr/web/html/element/base/index.md | 118 +- files/fr/web/html/element/basefont/index.md | 70 +- files/fr/web/html/element/bdi/index.md | 182 +- files/fr/web/html/element/bdo/index.md | 111 +- files/fr/web/html/element/bgsound/index.md | 60 +- files/fr/web/html/element/big/index.md | 94 +- files/fr/web/html/element/blink/index.md | 60 +- files/fr/web/html/element/blockquote/index.md | 105 +- files/fr/web/html/element/body/index.md | 224 +- files/fr/web/html/element/br/index.md | 129 +- files/fr/web/html/element/button/index.md | 345 +-- files/fr/web/html/element/canvas/index.md | 219 +- files/fr/web/html/element/caption/index.md | 155 +- files/fr/web/html/element/center/index.md | 68 +- files/fr/web/html/element/cite/index.md | 152 +- files/fr/web/html/element/code/index.md | 108 +- files/fr/web/html/element/col/index.md | 221 +- files/fr/web/html/element/colgroup/index.md | 246 ++- files/fr/web/html/element/content/index.md | 117 +- files/fr/web/html/element/data/index.md | 101 +- files/fr/web/html/element/datalist/index.md | 105 +- files/fr/web/html/element/dd/index.md | 79 +- files/fr/web/html/element/del/index.md | 134 +- files/fr/web/html/element/details/index.md | 236 ++- files/fr/web/html/element/dfn/index.md | 184 +- files/fr/web/html/element/dialog/index.md | 220 +- files/fr/web/html/element/dir/index.md | 61 +- files/fr/web/html/element/div/index.md | 144 +- files/fr/web/html/element/dl/index.md | 268 ++- files/fr/web/html/element/dt/index.md | 83 +- files/fr/web/html/element/em/index.md | 112 +- files/fr/web/html/element/embed/index.md | 124 +- files/fr/web/html/element/fieldset/index.md | 197 +- files/fr/web/html/element/figcaption/index.md | 71 +- files/fr/web/html/element/figure/index.md | 186 +- files/fr/web/html/element/font/index.md | 50 +- files/fr/web/html/element/footer/index.md | 148 +- files/fr/web/html/element/form/index.md | 324 +-- files/fr/web/html/element/frame/index.md | 72 +- files/fr/web/html/element/frameset/index.md | 54 +- files/fr/web/html/element/head/index.md | 179 +- files/fr/web/html/element/header/index.md | 185 +- .../fr/web/html/element/heading_elements/index.md | 370 ++-- files/fr/web/html/element/hgroup/index.md | 210 +- files/fr/web/html/element/hr/index.md | 184 +- files/fr/web/html/element/html/index.md | 171 +- files/fr/web/html/element/i/index.md | 173 +- files/fr/web/html/element/iframe/index.md | 375 ++-- files/fr/web/html/element/image/index.md | 28 +- files/fr/web/html/element/img/index.md | 692 +++--- files/fr/web/html/element/index.md | 126 +- files/fr/web/html/element/input/button/index.md | 280 +-- files/fr/web/html/element/input/checkbox/index.md | 393 ++-- files/fr/web/html/element/input/color/index.md | 216 +- files/fr/web/html/element/input/date/index.md | 489 +++-- .../web/html/element/input/datetime-local/index.md | 590 +++--- files/fr/web/html/element/input/datetime/index.md | 14 +- files/fr/web/html/element/input/email/index.md | 516 ++--- files/fr/web/html/element/input/file/index.md | 572 +++-- files/fr/web/html/element/input/hidden/index.md | 248 +-- files/fr/web/html/element/input/image/index.md | 507 ++--- files/fr/web/html/element/input/index.md | 636 +++--- files/fr/web/html/element/input/month/index.md | 505 +++-- files/fr/web/html/element/input/number/index.md | 482 ++--- files/fr/web/html/element/input/password/index.md | 386 ++-- files/fr/web/html/element/input/radio/index.md | 396 ++-- files/fr/web/html/element/input/range/index.md | 509 ++--- files/fr/web/html/element/input/reset/index.md | 227 +- files/fr/web/html/element/input/search/index.md | 542 +++-- files/fr/web/html/element/input/submit/index.md | 345 ++- files/fr/web/html/element/input/tel/index.md | 573 +++-- files/fr/web/html/element/input/text/index.md | 568 +++-- files/fr/web/html/element/input/time/index.md | 555 ++--- files/fr/web/html/element/input/url/index.md | 484 ++--- files/fr/web/html/element/input/week/index.md | 415 ++-- files/fr/web/html/element/ins/index.md | 206 +- files/fr/web/html/element/kbd/index.md | 285 +-- files/fr/web/html/element/keygen/index.md | 178 +- files/fr/web/html/element/label/index.md | 301 +-- files/fr/web/html/element/legend/index.md | 157 +- files/fr/web/html/element/li/index.md | 247 ++- files/fr/web/html/element/link/index.md | 535 +++-- files/fr/web/html/element/main/index.md | 277 +-- files/fr/web/html/element/map/index.md | 177 +- files/fr/web/html/element/mark/index.md | 220 +- files/fr/web/html/element/marquee/index.md | 179 +- files/fr/web/html/element/menu/index.md | 338 ++- files/fr/web/html/element/menuitem/index.md | 229 +- files/fr/web/html/element/meta/index.md | 984 +++++---- files/fr/web/html/element/meter/index.md | 222 +- files/fr/web/html/element/nav/index.md | 170 +- files/fr/web/html/element/nobr/index.md | 45 +- files/fr/web/html/element/noembed/index.md | 33 +- files/fr/web/html/element/noframes/index.md | 97 +- files/fr/web/html/element/noscript/index.md | 169 +- files/fr/web/html/element/object/index.md | 294 +-- files/fr/web/html/element/ol/index.md | 323 +-- files/fr/web/html/element/optgroup/index.md | 172 +- files/fr/web/html/element/option/index.md | 163 +- files/fr/web/html/element/output/index.md | 170 +- files/fr/web/html/element/p/index.md | 192 +- files/fr/web/html/element/param/index.md | 163 +- files/fr/web/html/element/picture/index.md | 179 +- files/fr/web/html/element/plaintext/index.md | 43 +- files/fr/web/html/element/pre/index.md | 207 +- files/fr/web/html/element/progress/index.md | 174 +- files/fr/web/html/element/q/index.md | 168 +- files/fr/web/html/element/rb/index.md | 190 +- files/fr/web/html/element/rp/index.md | 174 +- files/fr/web/html/element/rt/index.md | 111 +- files/fr/web/html/element/rtc/index.md | 172 +- files/fr/web/html/element/ruby/index.md | 176 +- files/fr/web/html/element/s/index.md | 189 +- files/fr/web/html/element/samp/index.md | 216 +- files/fr/web/html/element/script/index.md | 353 ++-- files/fr/web/html/element/section/index.md | 182 +- files/fr/web/html/element/select/index.md | 354 ++-- files/fr/web/html/element/shadow/index.md | 153 +- files/fr/web/html/element/slot/index.md | 182 +- files/fr/web/html/element/small/index.md | 157 +- files/fr/web/html/element/source/index.md | 210 +- files/fr/web/html/element/spacer/index.md | 57 +- files/fr/web/html/element/span/index.md | 160 +- files/fr/web/html/element/strike/index.md | 96 +- files/fr/web/html/element/strong/index.md | 191 +- files/fr/web/html/element/style/index.md | 259 ++- files/fr/web/html/element/sub/index.md | 204 +- files/fr/web/html/element/summary/index.md | 199 +- files/fr/web/html/element/sup/index.md | 228 +- files/fr/web/html/element/table/index.md | 680 +++--- files/fr/web/html/element/tbody/index.md | 325 ++- files/fr/web/html/element/td/index.md | 418 ++-- files/fr/web/html/element/template/index.md | 203 +- files/fr/web/html/element/textarea/index.md | 378 ++-- files/fr/web/html/element/tfoot/index.md | 358 ++-- files/fr/web/html/element/th/index.md | 324 ++- files/fr/web/html/element/thead/index.md | 302 ++- files/fr/web/html/element/time/index.md | 226 +- files/fr/web/html/element/title/index.md | 174 +- files/fr/web/html/element/tr/index.md | 912 ++++---- files/fr/web/html/element/track/index.md | 284 ++- files/fr/web/html/element/tt/index.md | 204 +- files/fr/web/html/element/u/index.md | 252 +-- files/fr/web/html/element/ul/index.md | 301 +-- files/fr/web/html/element/var/index.md | 191 +- files/fr/web/html/element/video/index.md | 614 +++--- files/fr/web/html/element/wbr/index.md | 153 +- files/fr/web/html/element/xmp/index.md | 42 +- .../web/html/global_attributes/accesskey/index.md | 215 +- .../html/global_attributes/autocapitalize/index.md | 59 +- .../web/html/global_attributes/autofocus/index.md | 31 +- files/fr/web/html/global_attributes/class/index.md | 73 +- .../global_attributes/contenteditable/index.md | 83 +- .../html/global_attributes/contextmenu/index.md | 134 +- .../html/global_attributes/data-_star_/index.md | 80 +- files/fr/web/html/global_attributes/dir/index.md | 89 +- .../web/html/global_attributes/draggable/index.md | 69 +- .../html/global_attributes/enterkeyhint/index.md | 113 +- .../fr/web/html/global_attributes/hidden/index.md | 61 +- files/fr/web/html/global_attributes/id/index.md | 65 +- files/fr/web/html/global_attributes/index.md | 315 ++- .../web/html/global_attributes/inputmode/index.md | 71 +- files/fr/web/html/global_attributes/is/index.md | 51 +- .../fr/web/html/global_attributes/itemid/index.md | 142 +- .../web/html/global_attributes/itemprop/index.md | 714 ++++--- .../fr/web/html/global_attributes/itemref/index.md | 110 +- .../web/html/global_attributes/itemscope/index.md | 384 ++-- .../web/html/global_attributes/itemtype/index.md | 133 +- files/fr/web/html/global_attributes/lang/index.md | 85 +- files/fr/web/html/global_attributes/part/index.md | 22 +- files/fr/web/html/global_attributes/slot/index.md | 57 +- .../web/html/global_attributes/spellcheck/index.md | 237 ++- files/fr/web/html/global_attributes/style/index.md | 105 +- .../web/html/global_attributes/tabindex/index.md | 167 +- files/fr/web/html/global_attributes/title/index.md | 178 +- .../web/html/global_attributes/translate/index.md | 69 +- .../global_attributes/x-ms-acceleratorkey/index.md | 52 +- .../x-ms-format-detection/index.md | 58 +- files/fr/web/html/index.md | 163 +- files/fr/web/html/index/index.md | 2 +- files/fr/web/html/inline_elements/index.md | 232 +- files/fr/web/html/link_types/dns-prefetch/index.md | 16 +- files/fr/web/html/link_types/index.md | 1024 +++++++-- files/fr/web/html/link_types/manifest/index.md | 14 +- .../fr/web/html/link_types/modulepreload/index.md | 12 +- files/fr/web/html/link_types/noopener/index.md | 20 +- files/fr/web/html/link_types/noreferrer/index.md | 14 +- files/fr/web/html/link_types/preconnect/index.md | 19 +- files/fr/web/html/link_types/prefetch/index.md | 14 +- files/fr/web/html/link_types/preload/index.md | 290 +-- files/fr/web/html/link_types/prerender/index.md | 14 +- files/fr/web/html/microdata/index.md | 138 +- files/fr/web/html/microformats/index.md | 521 ++--- .../html/quirks_mode_and_standards_mode/index.md | 50 +- files/fr/web/html/reference/index.md | 30 +- files/fr/web/html/viewport_meta_tag/index.md | 99 +- 229 files changed, 27441 insertions(+), 25223 deletions(-) (limited to 'files/fr') diff --git a/files/fr/web/html/applying_color/index.md b/files/fr/web/html/applying_color/index.md index ea1e73ea67..ae03220e48 100644 --- a/files/fr/web/html/applying_color/index.md +++ b/files/fr/web/html/applying_color/index.md @@ -15,163 +15,150 @@ tags: translation_of: Web/HTML/Applying_color original_slug: Web/HTML/Appliquer_des_couleurs --- -
{{HTMLRef}}
+{{HTMLRef}} -

La couleur fait partie intégrante des moyens d'expressions. Lorsqu'on écrit un site web, il est naturel d'y ajouter des couleurs dans la mise en forme. Avec CSS, il existe de nombreuses façons d'ajouter de la couleur aux éléments HTML afin d'obtenir le résultat souhaité. Cet article est une introduction détaillée aux différentes méthodes permettant d'appliquer des couleurs CSS en HTML.

+La couleur fait partie intégrante des moyens d'expressions. Lorsqu'on écrit un site web, il est naturel d'y ajouter des couleurs dans la mise en forme. Avec [CSS](/fr/docs/Web/CSS), il existe de nombreuses façons d'ajouter de la couleur aux [éléments](/fr/docs/Web/HTML/Element) [HTML](/fr/docs/Web/HTML) afin d'obtenir le résultat souhaité. Cet article est une introduction détaillée aux différentes méthodes permettant d'appliquer des couleurs CSS en HTML. -

L'ajout de couleur à un document HTML s'avère assez simple et permet de colorer presque tous les éléments.

+L'ajout de couleur à un document HTML s'avère assez simple et permet de colorer presque tous les éléments. -

Nous allons aborder la plupart des points que vous devez connaître lorsque vous utilisez des couleurs, y compris une liste de ce que vous pouvez colorer et des propriétés CSS concernées, comment décrire une couleur, et comment utiliser les couleurs à la fois dans les feuilles de style et dans les scripts. Nous verrons également comment permettre à l'utilisateur de choisir une couleur.

+Nous allons aborder la plupart des points que vous devez connaître lorsque vous utilisez des couleurs, y compris une [liste de ce que vous pouvez colorer et des propriétés CSS concernées](#things_that_can_have_color), [comment décrire une couleur](#how_to_describe_a_color), et comment [utiliser les couleurs à la fois dans les feuilles de style et dans les scripts](#using_color). Nous verrons également comment [permettre à l'utilisateur de choisir une couleur](#letting_the_user_pick_a_color). -

Ensuite, nous terminerons avec une brève discussion sur l'utilisation judicieuse des couleurs : comment sélectionner les couleurs adéquates tout en gardant à l'esprit les besoins des personnes daltoniennes par exemple.

+Ensuite, nous terminerons avec une brève discussion sur [l'utilisation judicieuse des couleurs](#using_color_wisely) : comment sélectionner les couleurs adéquates tout en gardant à l'esprit les besoins des personnes daltoniennes par exemple. -

Ce qui peut être coloré

+## Ce qui peut être coloré -

On peut appliquer une couleur sur chaque élément HTML. Voyons plutôt quelles sont les choses que l'on peut dessiner sur les éléments : le texte, la bordure, etc. Pour chacune de ces choses, nous verrons la liste des propriétés CSS qui permettent de les colorer.

+On peut appliquer une couleur sur chaque élément HTML. Voyons plutôt quelles sont les choses que l'on peut dessiner sur les éléments : le texte, la bordure, etc. Pour chacune de ces choses, nous verrons la liste des propriétés CSS qui permettent de les colorer. -

De façon générale, la propriété color permet de définir la couleur de premier plan pour le contenu d'un élément HTML et la propriété background-color permet de définir la couleur utilisée pour l'arrière-plan de l'élément. Ces propriétés peuvent être utilisées sur la quasi-totalité des éléments HTML.

+De façon générale, la propriété [`color`](/fr/docs/Web/CSS/color) permet de définir la couleur de premier plan pour le contenu d'un élément HTML et la propriété [`background-color`](/fr/docs/Web/CSS/background-color) permet de définir la couleur utilisée pour l'arrière-plan de l'élément. Ces propriétés peuvent être utilisées sur la quasi-totalité des éléments HTML. -

Texte

+### Texte -

Lorsqu'un élément est affiché à l'écran, les propriétés suivantes déterminent la couleur du texte, celle de son arrière-plan et celle des décorations.

+Lorsqu'un élément est affiché à l'écran, les propriétés suivantes déterminent la couleur du texte, celle de son arrière-plan et celle des décorations. -
-
color
-
Cette propriété correspondra à la couleur utilisée pour dessiner le texte ainsi que ses décorations (tels que le soulignement, le surlignement, les rayures, etc.).
-
background-color
-
Cette propriété correspondra à la couleur utilisée en arrière-plan du texte.
-
text-shadow
-
Cette propriété permet d'ajouter un effet d'ombre au texte. Parmi les options de cette ombre, on a la couleur de base de l'ombre (qui participe au flou et qui est fusionnée avec l'arrière-plan selon les autres paramètres. Voir ce paragraphe pour en savoir plus.
-
text-decoration-color
-
Par défaut, les décorations du texte (le soulignement, les rayures, etc.) utilise la propriété color pour leurs couleurs. Il est cependant possible de passer outre cette valeur et de fournir une couleur différente avec la propriété text-decoration-color.
-
text-emphasis-color
-
Cette propriété correspondra à la couleur utilisée pour dessiner les symboles d'emphase utilisés à côté des caractères du texte. Ces symboles sont principalement utilisés dans des textes écrits dans des langues d'Asie orientale.
-
caret-color
-
Cette propriété correspondra à la couleur utilisée pour dessiner le curseur de saisie de texte dans l'élément. Cette propriété est uniquement pertinente pour les éléments qui sont éditables (par exemple <input> et <textarea> ou les éléments dont l'attribut contenteditable est activé).
-
+- [`color`](/fr/docs/Web/CSS/color) + - : Cette propriété correspondra à la couleur utilisée pour dessiner le texte ainsi que [ses décorations](/fr/docs/Learn/CSS/Styling_text/Fundamentals#font_style_font_weight_text_transform_and_text_decoration) (tels que le soulignement, le surlignement, les rayures, etc.). +- [`background-color`](/fr/docs/Web/CSS/background-color) + - : Cette propriété correspondra à la couleur utilisée en arrière-plan du texte. +- [`text-shadow`](/fr/docs/Web/CSS/text-shadow) + - : Cette propriété permet d'ajouter un effet d'ombre au texte. Parmi les options de cette ombre, on a la couleur de base de l'ombre (qui participe au flou et qui est fusionnée avec l'arrière-plan selon les autres paramètres. Voir [ce paragraphe](/fr/docs/Learn/CSS/Styling_text/Fundamentals#text_drop_shadows) pour en savoir plus. +- [`text-decoration-color`](/fr/docs/Web/CSS/text-decoration-color) + - : Par défaut, les décorations du texte (le soulignement, les rayures, etc.) utilise la propriété `color` pour leurs couleurs. Il est cependant possible de passer outre cette valeur et de fournir une couleur différente avec la propriété `text-decoration-color`. +- [`text-emphasis-color`](/fr/docs/Web/CSS/text-emphasis-color) + - : Cette propriété correspondra à la couleur utilisée pour dessiner les symboles d'emphase utilisés à côté des caractères du texte. Ces symboles sont principalement utilisés dans des textes écrits dans des langues d'Asie orientale. +- [`caret-color`](/fr/docs/Web/CSS/caret-color) + - : Cette propriété correspondra à la couleur utilisée pour dessiner le curseur de saisie de texte dans l'élément. Cette propriété est uniquement pertinente pour les éléments qui sont éditables (par exemple [``](/fr/docs/Web/HTML/Element/Input) et [` + + +``` + +### Résultat + +{{EmbedLiveSample('examples')}} + +## Spécifications + +| Spécification | Statut | +| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | +| {{SpecName('HTML WHATWG', 'forms.html#attr-input-readonly', 'l\'attribut readonly')}} | {{Spec2('HTML WHATWG')}} | +| {{SpecName('HTML5 W3C', 'forms.html#attr-input-readonly', 'l\'attribut readonly')}} | {{Spec2('HTML5 W3C')}} | +| {{SpecName('HTML5.1', 'sec-forms.html#the-readonly-attribute', 'l\'attribut readonly')}} | {{Spec2('HTML5.1')}} | + +## Compatibilité des navigateurs + +{{Compat("html.elements.attributes.readonly")}} + +## Voir aussi -

Validation des contraintes

- -

Si l'élément est en lecture seule, la valeur de l'élément ne peut pas être mise à jour par l'utilisateur et ne participe pas à la validation des contraintes.

- -

Exemples

- -

HTML

- -
<div class="group">
-  <input type="textbox" value="Some value" readonly="readonly"/>
-  <label>Textbox</label>
-</div>
-<div class="group">
-  <input type="date" value="2020-01-01" readonly="readonly"/>
-  <label>Date</label>
-</div>
-<div class="group">
-  <input type="email" value="Some value" readonly="readonly"/>
-  <label>Email</label>
-</div>
-<div class="group">
-  <input type="password" value="Some value" readonly="readonly"/>
-  <label>Password</label>
-</div>
-<div class="group">
-  <textarea readonly="readonly">Some value</textarea>
-  <label>Message</label>
-</div>
-
- -

Résultat

- -
{{EmbedLiveSample('examples')}}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatut
{{SpecName('HTML WHATWG', 'forms.html#attr-input-readonly', 'l\'attribut readonly')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#attr-input-readonly', 'l\'attribut readonly')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML5.1', 'sec-forms.html#the-readonly-attribute', 'l\'attribut readonly')}}{{Spec2('HTML5.1')}}
- -

Compatibilité des navigateurs

- -

{{Compat("html.elements.attributes.readonly")}}

- -

Voir aussi

- - +- Les pseudo-classses [`:read-only`](/fr/docs/Web/CSS/:read-only) et [`:read-write`](/fr/docs/Web/CSS/:read-write) +- L'élément [``](/fr/docs/Web/HTML/Element/Input) +- L'élément [``](/fr/docs/Web/HTML/Element/Input), [` + + + +``` -

{{EmbedLiveSample("Validation_grâce_à_une_expression_rationnelle", 700, 275)}}

+{{EmbedLiveSample("Validation_grâce_à_une_expression_rationnelle", 700, 275)}} -

Le formulaire ({{HTMLElement("form")}}) contient un élément {{HTMLElement("input")}} de type "email" pour saisir l'adresse de l'utilisateur, un élément {{HTMLElement("textarea")}} permettant de saisir le message et un élément <input> de type "submit" qui formera un bouton permettant d'envoyer le formulaire. Chaque champ possède un élément {{HTMLElement("label")}} associé qui permet d'indiquer ce qui est attendu.

+Le formulaire ({{HTMLElement("form")}}) contient un élément {{HTMLElement("input")}} de type `"email"` pour saisir l'adresse de l'utilisateur, un élément {{HTMLElement("textarea")}} permettant de saisir le message et un élément `` de type [`"submit"`](/fr/docs/Web/HTML/Element/input/submit) qui formera un bouton permettant d'envoyer le formulaire. Chaque champ possède un élément {{HTMLElement("label")}} associé qui permet d'indiquer ce qui est attendu. -

Si on regarde le champ de saisie pour l'adresse électronique, on voit que les deux attributs {{htmlattrxref("size", "input")}} et {{htmlattrxref("maxlength", "input")}} ont la valeur 64 (on affiche une boîte de saisie large de 64 caractères et on ne peut saisir une adresse électronique d'au plus 64 caractères). L'attribut {{htmlattrxref("required", "input")}} est présent et l'adresse électronique est donc obligatoire pour l'envoi du formulaire.

+Si on regarde le champ de saisie pour l'adresse électronique, on voit que les deux attributs {{htmlattrxref("size", "input")}} et {{htmlattrxref("maxlength", "input")}} ont la valeur 64 (on affiche une boîte de saisie large de 64 caractères et on ne peut saisir une adresse électronique d'au plus 64 caractères). L'attribut {{htmlattrxref("required", "input")}} est présent et l'adresse électronique est donc obligatoire pour l'envoi du formulaire. -

L'attribut {{htmlattrxref("placeholder", "input")}} indique qu'une valeur semblable à "nomutilisateur@beststartupever.com" est attendue. L'intérêt de cette valeur est double : on indique qu'il faut saisir une adresse mail et on suggère que cette adresse provient d'un compte beststartupever.com. Le type "email" permet de valider le texte saisi afin de vérifier qu'il s'agit d'une adresse électronique valide. Si la valeur saisie n'est pas une adresse valide, un message d'erreur sera affiché :

+L'attribut {{htmlattrxref("placeholder", "input")}} indique qu'une valeur semblable à `"nomutilisateur@beststartupever.com"` est attendue. L'intérêt de cette valeur est double : on indique qu'il faut saisir une adresse mail et on suggère que cette adresse provient d'un compte beststartupever.com. Le type `"email"` permet de valider le texte saisi afin de vérifier qu'il s'agit d'une adresse électronique valide. Si la valeur saisie n'est pas une adresse valide, un message d'erreur sera affiché : -

+![](enter-valid-email-address.png) -

Si on utilise uniquement les attributs qu'on vient de décrire, on restreint les valeurs saisissables aux adresses électroniques valides de 64 caractères. Or, on veut également valider le fait que l'adresse respecte le format "nomutilisateur@beststartupever.com". C'est pourquoi on utilise l'attribut {{htmlattrxref("pattern", "input")}} avec la valeur ".+@beststartupever.com". Cette valeur est une expression rationnelle qui permet de vérifier que la chaîne de caractère contient un ou plusieurs caractères quelconques, ensuite suivi d'une arobase (@) puis du nom de domaine "beststartupever.com".

+Si on utilise uniquement les attributs qu'on vient de décrire, on restreint les valeurs saisissables aux adresses électroniques valides de 64 caractères. Or, on veut également valider le fait que l'adresse respecte le format "_nomutilisateur_@beststartupever.com". C'est pourquoi on utilise l'attribut {{htmlattrxref("pattern", "input")}} avec la valeur `".+@beststartupever.com"`. Cette valeur est une expression rationnelle qui permet de vérifier que la chaîne de caractère contient un ou plusieurs caractères quelconques, ensuite suivi d'une arobase (@) puis du nom de domaine "beststartupever.com". -

On notera que cette expression rationnelle ne permet pas de vérifier que l'adresse électronique est valide (on pourra par exemple avoir " @beststartupever.com" (avec un espace en début de chaîne) ou encore "@@beststartupever.com" qui ne sont pas valides). En fait, le navigateur vérifie que l'adresse respecte l'expression rationnelle fournie et que l'adresse est valide. Autrement dit, avec le type "email" et cette valeur pour l'attribut pattern, on s'assure que l'adresse est une adresse électronique valide et que c'est une bien une adresse avec le nom de domaine "beststartupever.com".

+On notera que cette expression rationnelle ne permet pas de vérifier que l'adresse électronique est valide (on pourra par exemple avoir " @beststartupever.com" (avec un espace en début de chaîne) ou encore "@@beststartupever.com" qui ne sont pas valides). En fait, le navigateur vérifie que l'adresse respecte l'expression rationnelle fournie **et** que l'adresse est valide. Autrement dit, avec le type `"email"` et cette valeur pour l'attribut `pattern`, on s'assure que l'adresse est une adresse électronique valide et que c'est une bien une adresse avec le nom de domaine "beststartupever.com". -

Lorsqu'on utilise l'attribut pattern Il est conseillé d'utilisé l'attribut {{htmlattrxref("title")}} afin de décrire le motif de l'expression ratioennelle. Autrement dit, dans ce cas, l'attribut title doit décrire le format souhaité plutôt que contenir une autre information. En effet, cet attribut sera affiché ou prononcé en cas d'erreur. Par exemple, le navigateur pourrait afficher le message "Le texte saisi ne correspond pas au motif requis." suivi du texte indiqué dans la valeur de title. Par exemple si l'attribut title vaut "Adresse email", le message affiché serait "Le texte saisi ne correspond pas au motif requis. Adresse email" ce qui n'est pas correct.

+Lorsqu'on utilise l'attribut `pattern` Il est conseillé d'utilisé l'attribut {{htmlattrxref("title")}} afin de décrire le motif de l'expression ratioennelle. Autrement dit, dans ce cas, l'attribut `title` doit décrire le format souhaité plutôt que contenir une autre information. En effet, cet attribut sera affiché ou prononcé en cas d'erreur. Par exemple, le navigateur pourrait afficher le message "Le texte saisi ne correspond pas au motif requis." suivi du texte indiqué dans la valeur de `title`. Par exemple si l'attribut `title` vaut "Adresse email", le message affiché serait "Le texte saisi ne correspond pas au motif requis. Adresse email" ce qui n'est pas correct. -

C'est pour cela qu'on indique la chaîne de caractères "Merci de fournir uniquement une adresse Best Startup Ever". Le message complet obtenu sera donc : "Le texte saisi ne correspond pas au motif requis. Merci de fournir uniquement une adresse Best Startup Ever."

+C'est pour cela qu'on indique la chaîne de caractères "Merci de fournir uniquement une adresse Best Startup Ever". Le message complet obtenu sera donc : "Le texte saisi ne correspond pas au motif requis. Merci de fournir uniquement une adresse Best Startup Ever." -

+![](email-pattern-match-bad.png) -
-

Note : Si vous rencontrez des problèmes à propos de l'expression rationnelle, n'hésitez pas à ouvrir la console du navigateur. Cette dernière peut contenir des messages d'erreur aidant à diagnostiquer et résoudre le problème.

-
+> **Note :** Si vous rencontrez des problèmes à propos de l'expression rationnelle, n'hésitez pas à ouvrir la console du navigateur. Cette dernière peut contenir des messages d'erreur aidant à diagnostiquer et résoudre le problème. -

Exemples

+## Exemples -

Dans l'exemple qui suit, on peut saisir une adresse électronique qui contient au plus 256 caractères. La boîte de saisie affichera au plus 64 caractères et contiendra le texte  "user@example.gov" comme indication lorsque le champ est vide. On trouve également l'attribut {{htmlattrxref("multiple", "input")}} qui permet de saisir zéro ou plusieurs adresses séparées par des virgules (cf. ci-avant). Enfin, l'attribut {{htmlattrxref("list", "input")}} utilisé indique un identifiant d'un élément {{HTMLElement("datalist")}} dont les éléments {{HTMLElement("option")}} déterminent les valeurs suggérées qui peuvent être sélectionnées par l'utilisateur.

+Dans l'exemple qui suit, on peut saisir une adresse électronique qui contient au plus 256 caractères. La boîte de saisie affichera au plus 64 caractères et contiendra le texte  `"user@example.gov"` comme indication lorsque le champ est vide. On trouve également l'attribut {{htmlattrxref("multiple", "input")}} qui permet de saisir zéro ou plusieurs adresses séparées par des virgules (cf. ci-avant). Enfin, l'attribut {{htmlattrxref("list", "input")}} utilisé indique un identifiant d'un élément {{HTMLElement("datalist")}} dont les éléments {{HTMLElement("option")}} déterminent les valeurs suggérées qui peuvent être sélectionnées par l'utilisateur. -

L'élément {{HTMLElement("label")}} qui précède l'élément <input> permettra d'afficher un libellé avant la boîte de saisie. Le lien entre les deux est fait grâce à l'attribut for qui contient "emailAddress" qui est l'identifiant de l'élément {{HTMLElement("input")}}. Grâce à cette association, cliquer sur l'étiquette permettra de placer le focus sur le champ de saisie.

+L'élément {{HTMLElement("label")}} qui précède l'élément `` permettra d'afficher un libellé avant la boîte de saisie. Le lien entre les deux est fait grâce à l'attribut `for` qui contient `"emailAddress"` qui est l'identifiant de l'élément {{HTMLElement("input")}}. Grâce à cette association, cliquer sur l'étiquette permettra de placer le focus sur le champ de saisie. -
<label for="emailAddress">Email</label><br/>
-<input id="emailAddress" type="email" placeholder="user@example.gov"
-       list="defaultEmails" size="64" maxlength="256" multiple>
+```html
+

+
 
-<datalist id="defaultEmails">
-  <option value="jbond007@mi6.defence.gov.uk">
-  <option value="jbourne@unknown.net">
-  <option value="nfury@shield.org">
-  <option value="tony@starkindustries.com">
-  <option value="hulk@grrrrrrrr.arg">
-</datalist>
+ + +``` -

{{EmbedLiveSample('Exemples', 600, 50)}}

+{{EmbedLiveSample('Exemples', 600, 50)}} -

Résumé technique

+## Résumé technique - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + +
{{anch("Valeur")}}Une chaîne de caractères ({{domxref("DOMString")}}) représentant une adresse électronique ou une chaîne vide.
Évènements{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}
Attributs pris en charge{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("multiple", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} et {{htmlattrxref("size", "input")}}
Attributs IDLlist et value
Méthodes{{domxref("HTMLInputElement.select", "select()")}}
{{anch("Valeur")}} + Une chaîne de caractères ({{domxref("DOMString")}}) représentant + une adresse électronique ou une chaîne vide. +
Évènements + {{domxref("HTMLElement/change_event", "change")}} et + {{domxref("HTMLElement/input_event", "input")}} +
Attributs pris en charge + {{htmlattrxref("autocomplete", "input")}}, + {{htmlattrxref("list", "input")}}, + {{htmlattrxref("maxlength", "input")}}, + {{htmlattrxref("minlength", "input")}}, + {{htmlattrxref("multiple", "input")}}, + {{htmlattrxref("pattern", "input")}}, + {{htmlattrxref("placeholder", "input")}}, + {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} + et {{htmlattrxref("size", "input")}} +
Attributs IDLlist et value
Méthodes + {{domxref("HTMLInputElement.select", "select()")}} +
-

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'forms.html#e-mail-state-(type=email)', '<input type="email">')}}{{Spec2('HTML WHATWG')}}Définition initiale.
{{SpecName('HTML5.1', 'sec-forms.html#email-state-typeemail', '<input type="email">')}}{{Spec2('HTML5.1')}}Définition initiale.
+## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{SpecName('HTML WHATWG', 'forms.html#e-mail-state-(type=email)', '<input type="email">')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. | +| {{SpecName('HTML5.1', 'sec-forms.html#email-state-typeemail', '<input type="email">')}} | {{Spec2('HTML5.1')}} | Définition initiale. | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("html.elements.input.input-email")}}

+{{Compat("html.elements.input.input-email")}} -

Voir aussi

+## Voir aussi - +- [Le guide relatif aux formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires) +- {{HTMLElement("input")}} +- [``](/fr/docs/Web/HTML/Element/input) diff --git a/files/fr/web/html/element/input/file/index.md b/files/fr/web/html/element/input/file/index.md index 924ba06e65..8d329673d4 100644 --- a/files/fr/web/html/element/input/file/index.md +++ b/files/fr/web/html/element/input/file/index.md @@ -7,257 +7,218 @@ tags: - Reference translation_of: Web/HTML/Element/input/file --- -
{{HTMLRef}}
- -

Les éléments {{HTMLElement("input")}} dont l'attribut type vaut "file" permettent à un utilisateur de sélectionner un ou plusieurs fichiers depuis leur appareil et de les uploader vers un serveur via un formulaire ou grâce à du code JavaScript via l'API File.

- -
{{EmbedInteractiveExample("pages/tabbed/input-file.html", "tabbed-shorter")}}
- -

Valeur

- -

L'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères ({{domxref("DOMString")}}) qui représente le chemin du/des fichier(s) sélectionné(s). Les autres fichiers peuvent être identifiés grâce à la propriété HTMLInputElement.files.

- -
-

Note :

-
    -
  1. Si plusieurs fichiers sont sélectionnés, la chaîne de caractères représente le chemin du premier fichier sélectionné. Il est possible d'accéder aux autres fichiers en JavaScript grâce à la propriété FileList.
    2. -
  2. Si aucun fichier n'est sélectionné, la chaîne de caractères sera vide ("").
    3. -
  3. La chaîne de caractères est préfixée avec C:\fakepath\ afin d'éviter la fuite d'informations sensibles concernant la structure des fichiers de l'utilisateur.
    4. -
-
- -

Attributs supplémentaires

- -

En complément des attributs partagés par l'ensemble des éléments {{HTMLElement("input")}}, les champs de type file peuvent également utiliser les attributs suivants :

- - - - - - - - - - - - - - - - - - - - - - - - - - -
AttributDescription
{{anch("accept")}}Un ou plusieurs identifiants de type de fichier décrivants les types de fichier autorisés.
{{anch("capture")}}La source à utiliser pour capturer des images ou des vidéos.
{{anch("files")}}Un objet {{domxref("FileList")}} qui liste les fichiers choisis
{{anch("multiple")}}Un attribut booléen qui, lorsqu'il est présent, indique que plusieurs fichiers peuvent être sélectionnés.
+{{HTMLRef}} -

{{htmlattrdef("accept")}}

+Les éléments {{HTMLElement("input")}} dont l'attribut `type` vaut **`"file"`** permettent à un utilisateur de sélectionner un ou plusieurs fichiers depuis leur appareil et de les _uploader_ vers un serveur via [un formulaire](/fr/docs/Web/Guide/HTML/Formulaires) ou grâce à du code JavaScript [via l'API _File_](/fr/docs/Using_files_from_web_applications). -

Une chaîne de caractères qui définit les types de fichier qui devraient être acceptés. Cette chaîne est une liste d'identifiants de type de fichier (cf. ci-après) séparés par des virgules. Un fichier pouvant avoir un format selon différentes extensions et types MIME, il est souvent utile de cibler plusieurs identifiants pour la bonne sélection du fichier.

+{{EmbedInteractiveExample("pages/tabbed/input-file.html", "tabbed-shorter")}} -

Les fichiers Microsoft Word, par exemple, peuvent être identifiés de différentes façons et, dans un site avec un champ qui accepte les fichiers Word, on pourra écrire :

+## Valeur -
<input type="file" id="docpicker"
-  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
+L'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères ({{domxref("DOMString")}}) qui représente le chemin du/des fichier(s) sélectionné(s). Les autres fichiers peuvent être identifiés grâce à la propriété `HTMLInputElement.files`. -

{{htmlattrdef("capture")}}

+> **Note :** +> +> 1. Si plusieurs fichiers sont sélectionnés, la chaîne de caractères représente le chemin du premier fichier sélectionné. Il est possible d'accéder aux autres fichiers en JavaScript [grâce à la propriété `FileList`](). +> 2. Si aucun fichier n'est sélectionné, la chaîne de caractères sera vide (`""`). +> 3. La chaîne de caractères [est préfixée avec `C:\fakepath\`](https://html.spec.whatwg.org/multipage/input.html#fakepath-srsly) afin d'éviter la fuite d'informations sensibles concernant la structure des fichiers de l'utilisateur. -

Une chaîne de caractères qui indique la caméra à utiliser pour capturer des photos et des vidéos si l'attribut accept indique que le fichier est de ce type. Lorsque capture vaut "user", cela indique que la caméra qui fait face à l'utilisateur devrait être utilisée. Si l'attribut vaut "environment", c'est la caméra qui est tournée vers l'extérieur devrait être utilisée. Si l'attribut est absent, l'agent utilisateur pourra décider de laquelle utiliser. Si la caméra souhaitée par l'attribut n'est pas disponible, l'agent utilisateur pourra utiliser une autre caméra de l'appareil.

+## Attributs supplémentaires -
-

Note : capture était auparavant un attribut booléen qui, lorsqu'il était présent, indiquait que les capteurs de l'appareil (caméra/micro) devaient être utilisés plutôt qu'un fichier.

-
+En complément des attributs partagés par l'ensemble des éléments {{HTMLElement("input")}}, les champs de type `file` peuvent également utiliser les attributs suivants : -

{{htmlattrdef("files")}}

+| Attribut | Description | +| ------------------------------ | --------------------------------------------------------------------------------------------------------- | +| `{{anch("accept")}}` | Un ou plusieurs identifiants de type de fichier décrivants les types de fichier autorisés. | +| `{{anch("capture")}}` | La source à utiliser pour capturer des images ou des vidéos. | +| `{{anch("files")}}` | Un objet {{domxref("FileList")}} qui liste les fichiers choisis | +| `{{anch("multiple")}}` | Un attribut booléen qui, lorsqu'il est présent, indique que plusieurs fichiers peuvent être sélectionnés. | -

Un objet {{domxref("FileList")}} qui liste chaque fichier sélectionné. Cette liste n'a qu'un seul élément, sauf si {{htmlattrxref("multiple", "input/file")}} est indiqué.

+### {{htmlattrdef("accept")}} -

{{htmlattrdef("multiple")}}

+Une chaîne de caractères qui définit les types de fichier qui devraient être acceptés. Cette chaîne est une liste d'identifiants de type de fichier (cf. ci-après) séparés par des virgules. Un fichier pouvant avoir un format selon différentes extensions et types MIME, il est souvent utile de cibler plusieurs identifiants pour la bonne sélection du fichier. -

Lorsque cet attribut booléen est indiqué, le champ peut être utilisé afin de sélectionner plus d'un fichier.

+Les fichiers Microsoft Word, par exemple, peuvent être identifiés de différentes façons et, dans un site avec un champ qui accepte les fichiers Word, on pourra écrire : -

Attribut non-standard

+```html + +``` -

En complément des attributs précédents, les éléments <input type="file"> peuvent utiliser les attributs spécifiques suivants. Ces attributs ne sont pas standard et ne devraient donc pas être utilisés.

+### {{htmlattrdef("capture")}} - - - - - - - - - - - - - -
AttributDescription
{{anch("webkitdirectory")}}Un attribut booléen qui indique si l'utilisateur peut choisir un répertoire (ou plusieurs si {{anch("multiple")}} est présent).
+Une chaîne de caractères qui indique la caméra à utiliser pour capturer des photos et des vidéos si l'attribut `accept` indique que le fichier est de ce type. Lorsque `capture` vaut `"user"`, cela indique que la caméra qui fait face à l'utilisateur devrait être utilisée. Si l'attribut vaut `"environment"`, c'est la caméra qui est tournée vers l'extérieur devrait être utilisée. Si l'attribut est absent, l'agent utilisateur pourra décider de laquelle utiliser. Si la caméra souhaitée par l'attribut n'est pas disponible, l'agent utilisateur pourra utiliser une autre caméra de l'appareil. + +> **Note :** `capture` était auparavant un attribut booléen qui, lorsqu'il était présent, indiquait que les capteurs de l'appareil (caméra/micro) devaient être utilisés plutôt qu'un fichier. + +### {{htmlattrdef("files")}} + +Un objet {{domxref("FileList")}} qui liste chaque fichier sélectionné. Cette liste n'a qu'un seul élément, sauf si {{htmlattrxref("multiple", "input/file")}} est indiqué. + +### {{htmlattrdef("multiple")}} + +Lorsque cet attribut booléen est indiqué, le champ peut être utilisé afin de sélectionner plus d'un fichier. + +## Attribut non-standard -

{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}

+En complément des attributs précédents, les éléments `` peuvent utiliser les attributs spécifiques suivants. Ces attributs ne sont pas standard et ne devraient donc pas être utilisés. -

L'attribut booléen webkitdirectory, lorsqu'il est présent, indique que le contrôle permet de sélectionner un/des répertoires plutôt qu'un/des fichiers. Voir {{domxref("HTMLInputElement.webkitdirectory")}} pour plus de détails et d'exemples.

+| Attribut | Description | +| -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | +| `{{anch("webkitdirectory")}}` | Un attribut booléen qui indique si l'utilisateur peut choisir un répertoire (ou plusieurs si `{{anch("multiple")}}` est présent). | -
-

Note : Bien que cet attribut ait initialement été implémenté pour les navigateurs WebKit, webkitdirectory est utilisable avec Microsoft Edge et pour Firefox 50 et supérieurs. Toutefois, bien que la prise en charge soit assez vaste, cet attribut reste non-standard et ne doit pas être utilisé.

-
+### {{htmlattrdef("webkitdirectory")}} {{non-standard_inline}} -

Identifiants de type de fichier

+L'attribut booléen `webkitdirectory`, lorsqu'il est présent, indique que le contrôle permet de sélectionner un/des répertoires plutôt qu'un/des fichiers. Voir {{domxref("HTMLInputElement.webkitdirectory")}} pour plus de détails et d'exemples. -

Un identifiant de type de fichier est une chaîne de caractères qui décrit le type de fichier qui peut être sélectionné par un utilisateur via un élément {{HTMLElement("input")}} de type file. Chaque identifiant peut prendre une des formes suivantes :

+> **Note :** Bien que cet attribut ait initialement été implémenté pour les navigateurs WebKit, `webkitdirectory` est utilisable avec Microsoft Edge et pour Firefox 50 et supérieurs. Toutefois, bien que la prise en charge soit assez vaste, cet attribut reste non-standard et ne doit pas être utilisé. - +## Identifiants de type de fichier -

L'attribut accept prend comme valeur une chaîne de caractères composée d'un ou plusieurs identifiants de type, séparés par des virgules. Ainsi, si un sélecteur de fichier doit permettre de sélectionner des images ou des documents PDF, on pourra écrire :

+Un identifiant de type de fichier est une chaîne de caractères qui décrit le type de fichier qui peut être sélectionné par un utilisateur via un élément {{HTMLElement("input")}} de type `file`. Chaque identifiant peut prendre une des formes suivantes : -
<input type="file" accept="image/*,.pdf">
+- Une extension de fichier valide, sensible à la casse et qui commence par un point (« . »). Par exemple : `.jpg`, `.pdf` ou `.doc`. +- Un type MIME valide, sans extension. +- La chaîne de caractères `audio/*` qui indique « n'importe quel fichier audio » +- La chaîne de caractères `video/*` qui indique « n'importe quel fichier vidéo » +- La chaîne de caractères `image/*` qui indique « n'importe quel fichier image ». -

Utiliser <input type="file">

+L'attribut `accept` prend comme valeur une chaîne de caractères composée d'un ou plusieurs identifiants de type, séparés par des virgules. Ainsi, si un sélecteur de fichier doit permettre de sélectionner des images ou des documents PDF, on pourra écrire : -

Un exemple simple

+```html + +``` -
<form method="post" enctype="multipart/form-data">
- <div>
-   <label for="file">Sélectionner le fichier à envoyer</label>
-   <input type="file" id="file" name="file" multiple>
- </div>
- <div>
-   <button>Envoyer</button>
- </div>
-</form>
+## Utiliser `` - +} +``` -

Ce fragment de code HTML produira le résultat suivant :

+Ce fragment de code HTML produira le résultat suivant : -

{{EmbedLiveSample('Un_exemple_simple', 650, 60)}}

+{{EmbedLiveSample('Un_exemple_simple', 650, 60)}} -
-

Note : Vous pouvez également trouver cet exemple sur GitHub — avec le code source et la démonstration.

-
+> **Note :** Vous pouvez également trouver cet exemple sur GitHub — [avec le code source](https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html) et [la démonstration](https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html). -

Quel que soit l'appareil ou le système d'exploitation de l'utilisateur, l'élément <input type="file"> fournit un bouton qui ouvre un sélecteur de fichier permettant de choisir un fichier.

+Quel que soit l'appareil ou le système d'exploitation de l'utilisateur, l'élément `` fournit un bouton qui ouvre un sélecteur de fichier permettant de choisir un fichier. -

Lorsque l'attribut {{htmlattrxref("multiple", "input")}} est utilisé (comme dans l'exemple précédent), cela signifie que plusieurs fichiers peuvent être sélectionnés de façon simultanée. L'utilisateur doit alors pouvoir choisir plusieurs fichiers depuis le sélecteur de fichier (par exemple en maintenant la touche Shift ou Control puis en cliquant). Si on souhaite qu'un seul fichier puisse être envoyé, il suffit de ne pas utiliser l'attribut multiple.

+Lorsque l'attribut {{htmlattrxref("multiple", "input")}} est utilisé (comme dans l'exemple précédent), cela signifie que plusieurs fichiers peuvent être sélectionnés de façon simultanée. L'utilisateur doit alors pouvoir choisir plusieurs fichiers depuis le sélecteur de fichier (par exemple en maintenant la touche Shift ou Control puis en cliquant). Si on souhaite qu'un seul fichier puisse être envoyé, il suffit de ne pas utiliser l'attribut `multiple`. -

Lorsqu'on envoie le formulaire de l'exemple, le nom de chaque fichier sera ajouté aux paramètres de l'URL de la façon suivante : ?file=fichier1.txt&file=fichier2.txt

+Lorsqu'on envoie le formulaire de l'exemple, le nom de chaque fichier sera ajouté aux paramètres de l'URL de la façon suivante : `?file=fichier1.txt&file=fichier2.txt` -

Obtenir des informations sur les fichiers sélectionnés

+### Obtenir des informations sur les fichiers sélectionnés -

Les fichiers sélectionnés peuvent être obtenus sous la forme d'un objet {{domxref("FileList")}} renvoyé par la propriété HTMLInputElement.files de l'élement du DOM. Cet objet est une liste d'objets {{domxref("File")}}. Un objet FileList se comporte comme un tableau et on peut donc consulter sa longueur (la propriété length) afin de connaître le nombre de fichiers sélectionnés.

+Les fichiers sélectionnés peuvent être obtenus sous la forme d'un objet {{domxref("FileList")}} renvoyé par la propriété `HTMLInputElement.files` de l'élement du DOM. Cet objet est une liste d'objets {{domxref("File")}}. Un objet `FileList` se comporte comme un tableau et on peut donc consulter sa longueur (la propriété `length`) afin de connaître le nombre de fichiers sélectionnés. -

Chaque objet File contient les informations suivantes :

+Chaque objet `File` contient les informations suivantes : - +- `name` : le nom du fichier. +- `lastModified` : un nombre représentant la date à laquelle le fichier a été modifié pour la dernière fois (sous la forme d'un horodatage UNIX). +- `lastModifiedDate` : un objet {{domxref("Date")}} qui représente la date et l'heure à laquelle le fichier a été modifié pour la dernière fois. +- `size` : un nombre qui représente la taille du fichier en octets. +- `type` : une chaîne de caractères ({{domxref("DOMString")}}) qui représente [le type MIME](/fr/docs/Glossaire/Type_MIME) du fichier. +- `webkitRelativePath`{{non-standard_inline}} : une chaîne de caractères qui indique l'emplacement relatif du fichier par rapport au dossier de base indiqué par l'attribut {{htmlattrxref("webkitdirectory", "input")}}. _Attention, cette fonctionnalité est non-standard et doit être utilisée avec précaution._ -
-

Note : Dans la plupart des navigateurs récents, il est possible de récupérer et de modifier l'attribut IDL HTMLInputElement.files. Pour Firefox, cela a été ajouté avec la version 57 (cf. {{bug(1384030)}}).

-
+> **Note :** Dans la plupart des navigateurs récents, il est possible de récupérer et de modifier l'attribut IDL `HTMLInputElement.files`. Pour Firefox, cela a été ajouté avec la version 57 (cf. {{bug(1384030)}}). -

Restreindre les types de fichiers acceptés

+### Restreindre les types de fichiers acceptés -

Il arrive souvent qu'on souhaite sélectionner certains types de fichiers. Par exemple, si on souhaite fournir une image de profil, on restreindra probablemnt les formats à ceux des formats d'image compatibles pour le Web comme JPEG ou PNG.

+Il arrive souvent qu'on souhaite sélectionner certains types de fichiers. Par exemple, si on souhaite fournir une image de profil, on restreindra probablemnt les formats à ceux des formats d'image compatibles pour le Web comme [JPEG](/fr/docs/Glossaire/jpeg) ou [PNG](/fr/docs/Glossaire/PNG). -

Pour cela, on peut utiliser l'attribut {{htmlattrxref("accept","input")}} afin d'indiquer les formats de fichier acceptés (sous la forme d'une liste d'extensions de fichier ou de types MIME séparés par des virgules). Par exemple :

+Pour cela, on peut utiliser l'attribut {{htmlattrxref("accept","input")}} afin d'indiquer les formats de fichier acceptés (sous la forme d'une liste d'extensions de fichier ou de types MIME séparés par des virgules). Par exemple : - +- `accept="image/png"` ou `accept=".png"` permettra de n'accepter que les fichiers PNG. +- `accept="image/png, image/jpeg"` ou `accept=".png, .jpg, .jpeg"` permettra de n'accepter que les fichiers PNG ou JPEG. +- `accept="image/*"` permettra d'accepter n'importe quel fichier dont le type MIME est `image/*` (pour de nombreux appareils mobiles, cette valeur permet d'utiliser l'appareil photo de l'appareil afin de prendre une photo qui sera utilisée comme fichier à envoyer). +- `accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"` permettra d'accepter un fichier ressemblant à un document Word. -

Prenons un exemple :

+Prenons un exemple : -
<form method="post" enctype="multipart/form-data">
-  <div>
-    <label for="profile_pic">Sélectionnez le fichier à utiliser</label>
-    <input type="file" id="profile_pic" name="profile_pic"
-          accept=".jpg, .jpeg, .png">
-  </div>
-  <div>
-    <button>Envoyer</button>
-  </div>
-</form>
+```html +
+
+ + +
+
+ +
+
+``` - +} +``` -

Voici le résultat produit :

+Voici le résultat produit : -

{{EmbedLiveSample('Restreindre_les_types_de_fichiers_acceptés', 650, 60)}}

+{{EmbedLiveSample('Restreindre_les_types_de_fichiers_acceptés', 650, 60)}} -
-

Note : Vous pouvez également consulter cet exemple sur GitHub — voir le code source et la démonstration live.

-
+> **Note :** Vous pouvez également consulter cet exemple sur GitHub — [voir le code source](https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-with-accept.html) et [la démonstration _live_](https://mdn.github.io/learning-area/html/forms/file-examples/file-with-accept.html). -

Le résultat peut sembler similaire à l'exemple précédent mais lorsque vous essayer de sélectionner un fichier, vous verrez que le sélecteur ne permet de sélectionner que les fichiers du/des type(s) indiqué(s) (il peut y avoir certaines différences selons les navigateurs et les systèmes d'exploitation).

+Le résultat peut sembler similaire à l'exemple précédent mais lorsque vous essayer de sélectionner un fichier, vous verrez que le sélecteur ne permet de sélectionner que les fichiers du/des type(s) indiqué(s) (il peut y avoir certaines différences selons les navigateurs et les systèmes d'exploitation). -

L'attribut accept ne permet pas de valider/contrôler le type réel du/des fichier(s) sélectionné(s). Il fournit simplement une indication au navigateur pour aider l'utilisateur à sélectionner les bons fichiers. Toutefois, dans la plupart des cas, l'utilisateur peut toujours choisir une option dans le sélecteur afin de pouvoir choisir un fichier d'un autre type.

+L'attribut `accept` ne permet pas de valider/contrôler le type réel du/des fichier(s) sélectionné(s). Il fournit simplement une indication au navigateur pour aider l'utilisateur à sélectionner les bons fichiers. Toutefois, dans la plupart des cas, l'utilisateur peut toujours choisir une option dans le sélecteur afin de pouvoir choisir un fichier d'un autre type. -

Dans tous les cas (et comme pour les autres éléments envoyés au serveur), il est nécessaire de contrôler les données reçues par un mécanisme de validation côté serveur.

+Dans tous les cas (et comme pour les autres éléments envoyés au serveur), il est nécessaire de contrôler les données reçues par un mécanisme de validation côté serveur. -

Notes

+### Notes -
    -
  1. À partir de {{Gecko("2.0")}}, appeler la méthode click() sur un élément de type file ouvre le sélecteur de fichier et permet à un utilisateur de sélectionner les fichiers sur son système d'opération. Pour plus d'exemples, voir Utiliser des fichiers avec des applications web.
    2. -
  2. -

    Il n'est pas possible de définir la valeur du sélecteur de fichier via un script. Le code suivant n'aura aucun effet :

    +1. À partir de {{Gecko("2.0")}}, appeler la méthode `click()` sur un élément de type `file` ouvre le sélecteur de fichier et permet à un utilisateur de sélectionner les fichiers sur son système d'opération. Pour plus d'exemples, voir Utiliser des fichiers avec des applications web. +2. Il n'est pas possible de définir la valeur du sélecteur de fichier via un script. Le code suivant n'aura aucun effet : - 
    const input = document.querySelector("input[type=file]");
-input.value = "toto";
-
    -
    3. -
  3. Lorsqu'on choisit un fichier via <input type="file">, le chemin réel du fichier source n'est pas transmis dans la valeur de l'attribut value pour des raisons de sécurité. À la place, on a le nom du fichier précédé du chemin C:\fakepath\. Cela provient de raisons historiques, est pris en charge par la plupart des navigateurs modernes. Cela a même été inscrit dans la spécification.
    4. -
+ ```js + const input = document.querySelector("input[type=file]"); + input.value = "toto"; + ``` -

Exemples

+3. Lorsqu'on choisit un fichier via ``, le chemin réel du fichier source n'est pas transmis dans la valeur de l'attribut `value` pour des raisons de sécurité. À la place, on a le nom du fichier précédé du chemin `C:\fakepath\`. Cela provient de raisons historiques, est pris en charge par la plupart des navigateurs modernes. Cela a même été [inscrit dans la spécification](https://html.spec.whatwg.org/multipage/forms.html#fakepath-srsly). -

Dans l'exemple qui suit, on présente sélecteur de fichiers plus avancé, qui tire parti des informations disponibles grâce à la propriété HTMLInputElement.files. On montre aussi quelques astuces.

+## Exemples -
-

Note : Le code source complet de cet exemple est disponible sur GitHub — file-example.html (voir la démonstration live associée). Nous n'expliquerons pas ici la feuille de style CSS mais plutôt le code JavaScript qui contient la logique.

-
+Dans l'exemple qui suit, on présente sélecteur de fichiers plus avancé, qui tire parti des informations disponibles grâce à la propriété `HTMLInputElement.files`. On montre aussi quelques astuces. -

Tout d'abord, voici le fragment de code HTML utilisé :

+> **Note :** Le code source complet de cet exemple est disponible sur GitHub — [file-example.html](https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html) ([voir la démonstration _live_ associée](https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html)). Nous n'expliquerons pas ici la feuille de style CSS mais plutôt le code JavaScript qui contient la logique. -
<form method="post" enctype="multipart/form-data">
-  <div>
-    <label for="image_uploads">Sélectionner des images à uploader (PNG, JPG)</label>
-    <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple>
-  </div>
-  <div class="preview">
-    <p>Aucun fichier sélectionné pour le moment</p>
-  </div>
-  <div>
-    <button>Envoyer</button>
-  </div>
-</form>
+Tout d'abord, voici le fragment de code HTML utilisé : - +} +``` -

Pour l'instant, le fragment HTML ressemble à ce que nous avons déjà vu avant, rien de spécial.

+Pour l'instant, le fragment HTML ressemble à ce que nous avons déjà vu avant, rien de spécial. -

Voyons maintenant le code JavaScript utilisé :

+Voyons maintenant le code JavaScript utilisé : -

Pour les premières lignes du script, on récupère des références au formulaire et à l'élément {{htmlelement("div")}} qui possède la classe .preview. Ensuite, on masque l'élément {{htmlelement("input")}} car leur apparence peut être incohérente entre les navigateurs et qu'il est difficile de les mettre en forme. Cliquer sur l'élément {{htmlelement("label")}} suffit à ouvrir le sélecteur et nous mettons donc en forme cet élément à la façon d'un bouton. Ainsi, l'utilisateur saura comment interagir avec le document pour uploader des fichiers.

+Pour les premières lignes du script, on récupère des références au formulaire et à l'élément {{htmlelement("div")}} qui possède la classe `.preview`. Ensuite, on masque l'élément {{htmlelement("input")}} car leur apparence peut être incohérente entre les navigateurs et qu'il est difficile de les mettre en forme. Cliquer sur l'élément {{htmlelement("label")}} suffit à ouvrir le sélecteur et nous mettons donc en forme cet élément à la façon d'un bouton. Ainsi, l'utilisateur saura comment interagir avec le document pour _uploader_ des fichiers. -
var input = document.querySelector('input');
+```js
+var input = document.querySelector('input');
 var preview = document.querySelector('.preview');
 
-input.style.opacity = 0;
- -
-

Note : La propriété opacity est utilisée pour masquer l'élément <input> plutôt que visibility: hidden ou display: none. En effet, avec ces derniers les technologies d'assistance (lecteurs d'écran par exemple) comprendraient que l'élément n'est pas interactif et ne peut pas être utilisé.

-
- -

Ensuite, on ajoute un gestionnaire d'évènement à l'élément <input> afin de réaliser certaines actions lorsque sa valeur (c'est-à-dire les fichiers sélectionnés) change. Ici, le gestionnaire d'évènement appelle la fonction updateImageDisplay() que nous décrirons juste après.

- -
input.addEventListener('change', updateImageDisplay);
- -

À chaque fois que la fonction updateImageDisplay() est appelée :

- - - -
function updateImageDisplay() {
+input.style.opacity = 0;
+```
+
+> **Note :** La propriété [`opacity`](/fr/docs/Web/CSS/opacity) est utilisée pour masquer l'élément `` plutôt que [`visibility: hidden`](/fr/docs/Web/CSS/visibility) ou [`display: none`](/fr/docs/Web/CSS/display). En effet, avec ces derniers les technologies d'assistance (lecteurs d'écran par exemple) comprendraient que l'élément n'est pas interactif et ne peut pas être utilisé.
+
+Ensuite, on ajoute [un gestionnaire d'évènement](/fr/docs/Web/API/EventTarget/addEventListener) à l'élément `` afin de réaliser certaines actions lorsque sa valeur (c'est-à-dire les fichiers sélectionnés) change. Ici, le gestionnaire d'évènement appelle la fonction `updateImageDisplay()` que nous décrirons juste après.
+
+```js
+input.addEventListener('change', updateImageDisplay);
+```
+
+À chaque fois que la fonction `updateImageDisplay()` est appelée :
+
+- On lance une boucle [`while`](/en-US/docs/Web/JavaScript/Reference/Statements/while) afin de vider le contenu qui pourrait être dans l'élément `
` servant à la prévisualisation.
+- On récupère l'objet {{domxref("FileList")}} qui contient les informations sur les fichiers sélectionnés et on le stocke dans une variable intitulée `curFiles`.
+- On vérifie si aucun fichier n'a été sélectionné (ce qui se traduit par vérifier si `curFiles.length` vaut 0). Si c'est le cas, on place un message dans le `
` de prévisualisation pour indiquer qu'aucun fichier n'a été sélectionné.
+- Si des fichiers ont été sélectionnés, on les parcourt afin d'afficher des informations sur ces fichiers dans l'élément `
`. Quelques notes :
+
+  - On utilise une fonction `validFileType()` afin de vérifier si le fichier est bien du bon type (c'est-à-dire qu'il respecte les extensions d'image indiquées dans l'attribut `accept`).
+
+    - Si c'est le cas :
+
+      - On affiche le nom et la taille du fichier dans une liste à l'intérieur du `
` (obtenus à partir de `curFiles[i].name` et `curFiles[i].size`). La fonction `returnFileSize()` est utilisée ici afin d'afficher la taille de façon lisible (en octets, kilo-octets ou mega-octets plutôt que toujours en octets).
+      - On génère un aperçu de l'image en appelant la méthode `window.URL.createObjectURL(curFiles[i])` et en réduisant l'image grâce à du CSS puis on insère cette image dans la liste.
+
+    - Si le type de fichier est invalide, on affiche un message dans la liste afin d'indiquer à l'utilisateur qu'il est nécessaire de sélectionner un autre type de fichier.
+
+```js
+function updateImageDisplay() {
   while(preview.firstChild) {
     preview.removeChild(preview.firstChild);
   }
@@ -366,7 +324,7 @@ input.style.opacity = 0;
} else { var list = document.createElement('ol'); preview.appendChild(list); - for(var i = 0; i < curFiles.length; i++) { + for(var i = 0; i < curFiles.length; i++) { var listItem = document.createElement('li'); var para = document.createElement('p'); if(validFileType(curFiles[i])) { @@ -385,108 +343,112 @@ input.style.opacity = 0; list.appendChild(listItem); } } -} +} +``` -

La fonction validFileType() prend un objet {{domxref("File")}} en entrée puis parcourt la liste des types de fichier autorisés pour les comparer à la propriété type du fichier. Si on trouve une correspondance (ce qui signifie que le type est bien autorisé), la fonction renvoie true, sinon, elle renvoie false.

+La fonction `validFileType()` prend un objet {{domxref("File")}} en entrée puis parcourt la liste des types de fichier autorisés pour les comparer à la propriété `type` du fichier. Si on trouve une correspondance (ce qui signifie que le type est bien autorisé), la fonction renvoie `true`, sinon, elle renvoie `false`. -
var fileTypes = [
+```js
+var fileTypes = [
   'image/jpeg',
   'image/pjpeg',
   'image/png'
 ]
 
 function validFileType(file) {
-  for(var i = 0; i < fileTypes.length; i++) {
+  for(var i = 0; i < fileTypes.length; i++) {
     if(file.type === fileTypes[i]) {
       return true;
     }
   }
 
   return false;
-}
+} +``` -

La fonction returnFileSize() prend en entrée un nombre d'octets (dans notre exemple, celui-ci provient de la propriété size du fichier) et le transforme en une chaîne de caractères plus compréhensible avec une taille en octets/Ko/Mo.

+La fonction `returnFileSize()` prend en entrée un nombre d'octets (dans notre exemple, celui-ci provient de la propriété `size` du fichier) et le transforme en une chaîne de caractères plus compréhensible avec une taille en octets/Ko/Mo. -
function returnFileSize(number) {
-  if(number < 1024) {
+```js
+function returnFileSize(number) {
+  if(number < 1024) {
     return number + ' octets';
-  } else if(number >= 1024 && number < 1048576) {
+  } else if(number >= 1024 && number < 1048576) {
     return (number/1024).toFixed(1) + ' Ko';
-  } else if(number >= 1048576) {
+  } else if(number >= 1048576) {
     return (number/1048576).toFixed(1) + ' Mo';
   }
-}
+} +``` -

Et voici le résultat :

+Et voici le résultat : -

{{EmbedLiveSample('Exemples', '100%', 200)}}

+{{EmbedLiveSample('Exemples', '100%', 200)}} -

Résumé technique

+## Résumé technique - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{anch("Valeur")}}Une chaîne de caractères ({{domxref("DOMString")}}) qui représente le chemin du fichier sélectionné.
Évènements{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}
Attributs pris en charge{{htmlattrxref("accept", "input/file")}}, {{htmlattrxref("capture", "input/file")}}, {{htmlattrxref("files", "input/file")}}, {{htmlattrxref("multiple", "input/file")}}
Attributs IDLfiles et value
Interface DOM{{domxref("HTMLInputElement")}}
PropriétésPropriétés pour les éléments HTMLInputElement de type file
Méthodes{{domxref("HTMLInputElement.select", "select()")}}
{{anch("Valeur")}} + Une chaîne de caractères ({{domxref("DOMString")}}) qui + représente le chemin du fichier sélectionné. +
Évènements + {{domxref("HTMLElement/change_event", "change")}} et + {{domxref("HTMLElement/input_event", "input")}} +
Attributs pris en charge + {{htmlattrxref("accept", "input/file")}}, + {{htmlattrxref("capture", "input/file")}}, + {{htmlattrxref("files", "input/file")}}, + {{htmlattrxref("multiple", "input/file")}} +
Attributs IDLfiles et value
Interface DOM{{domxref("HTMLInputElement")}}
Propriétés + Propriétés pour les éléments HTMLInputElement de type + file +
Méthodes + {{domxref("HTMLInputElement.select", "select()")}} +
-

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'input.html#file-upload-state-(type=file)', '<input type="file">')}}{{Spec2('HTML WHATWG')}}Définition initiale.
{{SpecName('HTML5.1', 'sec-forms.html#file-upload-state-typefile', '<input type="file">')}}{{Spec2('HTML5.1')}}Définition initiale.
+## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName('HTML WHATWG', 'input.html#file-upload-state-(type=file)', '<input type="file">')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. | +| {{SpecName('HTML5.1', 'sec-forms.html#file-upload-state-typefile', '<input type="file">')}} | {{Spec2('HTML5.1')}} | Définition initiale. | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("html.elements.input.input-file")}}

+{{Compat("html.elements.input.input-file")}} -

Voir aussi

+## Voir aussi - +- [Manipuler des fichiers à partir d'applications web](/fr/docs/Using_files_from_web_applications) contient différents exemples d'applications relatifs à `` +- [L'API _File_](/fr/docs/Web/API/File). diff --git a/files/fr/web/html/element/input/hidden/index.md b/files/fr/web/html/element/input/hidden/index.md index 5ec54ea676..88af11be58 100644 --- a/files/fr/web/html/element/input/hidden/index.md +++ b/files/fr/web/html/element/input/hidden/index.md @@ -7,117 +7,101 @@ tags: - Reference translation_of: Web/HTML/Element/input/hidden --- -
{{HTMLRef}}
+{{HTMLRef}} -

Les éléments {{HTMLElement("input")}} de type "hidden" permettent aux développeurs web d'inclure des données qui ne peuvent pas être vues ou modifiées lorsque le formulaire est envoyé. Cela permet par exemple d'envoyer l'identifiant d'une commande ou un jeton de sécurité unique. Les champs de ce type sont invisibles sur la page.

+Les éléments {{HTMLElement("input")}} de type **`"hidden"`** permettent aux développeurs web d'inclure des données qui ne peuvent pas être vues ou modifiées lorsque le formulaire est envoyé. Cela permet par exemple d'envoyer l'identifiant d'une commande ou un jeton de sécurité unique. Les champs de ce type sont invisibles sur la page. -
-

Note : La ligne de code suivante est suivie du rendu associé... si l'exemple fonctionne correctement, vous ne devriez rien voir :)

-
+> **Note :** La ligne de code suivante est suivie du rendu associé... si l'exemple fonctionne correctement, vous ne devriez rien voir :) -

Exemple simple

+## Exemple simple -
<input id="prodId" name="prodId" type="hidden" value="xm234jq">
+```html + +``` -

{{EmbedLiveSample('Exemple_simple', 600, 40)}}

+{{EmbedLiveSample('Exemple_simple', 600, 40)}} -
-

Note : Attention, les évènements DOM input et change ne s'appliquent pas à ce type de contrôle. Les champs masqués ne peuvent pas recevoir le focus, y compris en JavaScript avec hiddenInput.focus()).

-
+> **Note :** Attention, les évènements DOM [`input`](/fr/docs/Web/API/HTMLElement/input_event) et [`change`](/fr/docs/Web/API/HTMLElement/change_event) ne s'appliquent pas à ce type de contrôle. Les champs masqués ne peuvent pas recevoir le focus, y compris en JavaScript avec `hiddenInput.focus()`). -

Valeur

+## Valeur -

L'attribut {{htmlattrxref("value", "input")}} de l'élément contient une chaîne de caractères masquée qui est envoyée au serveur avec le formulaire. Cette valeur ne peut pas directement être éditée par l'utilisateur sur la page (mais elle est toujours accessible et modifiable via les outils de développement intégrés au navigateur).

+L'attribut {{htmlattrxref("value", "input")}} de l'élément contient une chaîne de caractères masquée qui est envoyée au serveur avec le formulaire. Cette valeur ne peut pas directement être éditée par l'utilisateur sur la page (mais elle est toujours accessible et modifiable via les outils de développement intégrés au navigateur). -
-

Attention : Bien que la valeur ne soit pas affichée sur la page, elle est visible et modifiable par l'utilisateur si ce dernier utilise les outils de développements intégrés aux navigateurs (par exemple "Afficher la source"). Le type hidden ne doit donc pas être utilisé comme mécanisme de sécurité.

-
+> **Attention :** Bien que la valeur ne soit pas affichée sur la page, elle est visible et modifiable par l'utilisateur si ce dernier utilise les outils de développements intégrés aux navigateurs (par exemple "Afficher la source"). Le type `hidden` ne doit donc pas être utilisé comme mécanisme de sécurité. -

Attributs supplémentaires

+## Attributs supplémentaires -

En complément des attributs communs à l'ensemble des éléments <input>, les champs masqués peuvent utiliser les attributs suivants :

+En complément des attributs communs à l'ensemble des éléments ``, les champs masqués peuvent utiliser les attributs suivants : - - - - - - - - - - - - - -
AttributDescription
{{anch("name")}}À l'instar de l'ensemble des champs de saisie, ce sera le nom auquel associer la donnée lors de l'envoi du formulaire. Si la valeur spéciale "_charset_" est utilisée pour cet attribut, la valeur du champ sera l'encodage utilisé pour l'envoi du formulaire.
+| Attribut | Description | +| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `{{anch("name")}}` | À l'instar de l'ensemble des champs de saisie, ce sera le nom auquel associer la donnée lors de l'envoi du formulaire. Si la valeur spéciale `"_charset_"` est utilisée pour cet attribut, la valeur du champ sera l'encodage utilisé pour l'envoi du formulaire. | -

{{htmlattrdef("name")}}

+### {{htmlattrdef("name")}} -

Cet attribut fait partie des attributs communs à l'ensemble des éléments <input> mais il possède un comportement particulier pour les champs masqués. En effet, si cet attribut utilise la valeur spéciale "_charset_", la valeur du champ envoyée avec le formulaire sera l'encodage utilisé pour l'envoi du formulaire.

+Cet attribut fait partie des attributs communs à l'ensemble des éléments `` mais il possède un comportement particulier pour les champs masqués. En effet, si cet attribut utilise la valeur spéciale `"_charset_"`, la valeur du champ envoyée avec le formulaire sera l'encodage utilisé pour l'envoi du formulaire. -

Utiliser les valeurs masquées dans les formulaires

+## Utiliser les valeurs masquées dans les formulaires -

Comme évoqué ci-avant, les éléments <input type="hidden"> peuvent être utilisés lorsque le formulaire sert à transmettre des données avec lesquelles l'utilisateur n'est pas censé intéragir.

+Comme évoqué ci-avant, les éléments ` peuvent être utilisés lorsque le formulaire sert à transmettre des données avec lesquelles l'utilisateur n'est pas censé intéragir. -

Suivre les modifications apportées au contenu

+### Suivre les modifications apportées au contenu -

Un usage fréquent de ces éléments est de garder un registre des données qui doivent être mises à jour dans une base de données lorsque le formulaire est envoyé. Le processus est généralement le suivant :

+Un usage fréquent de ces éléments est de garder un registre des données qui doivent être mises à jour dans une base de données lorsque le formulaire est envoyé. Le processus est généralement le suivant : -
    -
  1. L'utilisateur édite du contenu (un billet de blog, une fiche d'un produit) en commençant par cliquer sur le bouton Éditer.
    2. -
  2. Le contenu à modifier est extrait de la base de données et est chargé dans le formulaire HTML afin que l'utilisateur puis appliquer les modifications voulues.
    3. -
  3. Après avoir éditer, l'utilisateur envoie le formulaire et les données mises à jour sont envoyées au serveur qui se charge d'appliquer cette mise à jour en base de données.
    4. -
+1. L'utilisateur édite du contenu (un billet de blog, une fiche d'un produit) en commençant par cliquer sur le bouton Éditer. +2. Le contenu à modifier est extrait de la base de données et est chargé dans le formulaire HTML afin que l'utilisateur puis appliquer les modifications voulues. +3. Après avoir éditer, l'utilisateur envoie le formulaire et les données mises à jour sont envoyées au serveur qui se charge d'appliquer cette mise à jour en base de données. -

Ici, lors de la deuxième étape, on peut récupérer l'identifiant de l'enregistrement et le placer dans un champ caché du formulaire. Lorsque le formulaire est envoyé à l'étape 3, l'identifiant est automatiquement envoyé au serveur avec le contenu. L'identifiant permet alors au serveur de connaître l'enregistrement de la base de données qui doit être mis à jour.

+Ici, lors de la deuxième étape, on peut récupérer l'identifiant de l'enregistrement et le placer dans un champ caché du formulaire. Lorsque le formulaire est envoyé à l'étape 3, l'identifiant est automatiquement envoyé au serveur avec le contenu. L'identifiant permet alors au serveur de connaître l'enregistrement de la base de données qui doit être mis à jour. -

Pour un exemple complet, voir la section {{anch("Exemples")}} ci-après.

+Pour un exemple complet, voir la section {{anch("Exemples")}} ci-après. -

Contribuer à la sécurité d'un site web

+### Contribuer à la sécurité d'un site web -

Les champs masqués sont également employés afin de stocker des jetons de sécurité (aussi appelés « secrets ») afin d'améliorer la sécurité d'un site. Pour un formulaire sensible (par exemple le transfert d'argent d'un compte à un autre sur un site bancaire), le secret est généré par le serveur et intégré sur la page afin de prouver l'identité de l'utilisateur et que c'est bien le bon formulaire qui est utilisé pour effectuer le transfert.

+Les champs masqués sont également employés afin de stocker des jetons de sécurité (aussi appelés « secrets ») afin d'améliorer la sécurité d'un site. Pour un formulaire sensible (par exemple le transfert d'argent d'un compte à un autre sur un site bancaire), le secret est généré par le serveur et intégré sur la page afin de prouver l'identité de l'utilisateur et que c'est bien le bon formulaire qui est utilisé pour effectuer le transfert. -

Cela permet d'éviter le cas où quelqu'un crée un faux site et un faux formulaire pour transférer de l'argent sur le mauvais compte (c'est ce qu'on appelle Cross Site Request Forgery (CSRF)).

+Cela permet d'éviter le cas où quelqu'un crée un faux site et un faux formulaire pour transférer de l'argent sur le mauvais compte (c'est ce qu'on appelle [Cross Site Request Forgery (CSRF)](https://fr.wikipedia.org/wiki/Cross-Site_Request_Forgery)). -
-

Note : Comme indiqué précédemment, placer le secret dans un champ masqué ne le rend pas plus sécurisé. La composition, l'encodage de la clé et la vérification par le serveur sont autant d'étapes cruciales pour garantir la qualité du secret utilisé. Le champ masqué n'est finalement qu'un outil qui simplifie l'envoi de cette information au serveur lorsque l'utilisateur envoie le formulaire.

-
+> **Note :** Comme indiqué précédemment, placer le secret dans un champ masqué ne le rend pas plus sécurisé. La composition, l'encodage de la clé et la vérification par le serveur sont autant d'étapes cruciales pour garantir la qualité du secret utilisé. Le champ masqué n'est finalement qu'un outil qui simplifie l'envoi de cette information au serveur lorsque l'utilisateur envoie le formulaire. -

Validation

+## Validation -

Aucune contrainte de validation n'est appliquée sur ces valeurs.

+Aucune contrainte de validation n'est appliquée sur ces valeurs. -

Exemples

+## Exemples -

Voyons comment implémenter une version simple du formulaire d'édition décrit précédemment : on utilise un champ masqué pour mémoriser l'identifiant de la donnée qui est modifiée.

+Voyons comment implémenter une version simple du formulaire d'édition décrit précédemment : on utilise un champ masqué pour mémoriser l'identifiant de la donnée qui est modifiée. -

HTML

+### HTML -

Voici le fragment HTML pour le formulaire :

+Voici le fragment HTML pour le formulaire : -
<form>
-  <div>
-    <label for="title">Titre du billet :</label>
-    <input type="text" id="title" name="title" value="Mon meilleur billet">
-  </div>
-  <div>
-    <label for="content">Contenu :</label>
-    <textarea id="content" name="content" cols="60" rows="5">
+```html
+

+  

+    
+    
+  

+  

+    
+    
+  

+  

+    
+  

+  
+

+```
 
-
CSS

+### CSS
 
-
Ajoutons quelques éléments de mise en forme :

+Ajoutons quelques éléments de mise en forme :
 
-
html {
+```css
+html {
   font-family: sans-serif;
 }
 
@@ -146,85 +130,69 @@ input, textarea {
 
 textarea {
   height: 60px;
-}

+}
+```
 
-
JavaScript

+### JavaScript
 
-
Le serveur génèrera la page HTML avec l'identifiant "postID" qui contient l'identifiant du billet de la base de données. Lorsque l'utilisateur termine l'édition, c'est le navigateur qui envoie cette donnée au serveur ainsi que les autres données du formulaire. Aucun code JavaScript n'est nécessaire pour gérer cela.

+Le serveur génèrera la page HTML avec l'identifiant `"postID"` qui contient l'identifiant du billet de la base de données. Lorsque l'utilisateur termine l'édition, c'est le navigateur qui envoie cette donnée au serveur ainsi que les autres données du formulaire. Aucun code JavaScript n'est nécessaire pour gérer cela.
 
-
Résultat

+### Résultat
 
-
{{EmbedLiveSample('Exemples', '100%', 200)}}

+{{EmbedLiveSample('Exemples', '100%', 200)}}
 
-

-
Note : Vous pouvez consulter l'exemple sur GitHub (cf. le code source et la démonstration live).

-

+> **Note :** Vous pouvez consulter l'exemple sur GitHub (cf. [le code source](https://github.com/mdn/learning-area/blob/master/html/forms/hidden-input-example/index.html) et [la démonstration _live_](https://mdn.github.io/learning-area/html/forms/hidden-input-example/index.html)).
 
-
Lorsque le formulaire est envoyé, les données envoyées au serveur ressembleront à :

+Lorsque le formulaire est envoyé, les données envoyées au serveur ressembleront à :
 
-
title=Mon+meilleur+billet&content=Le+contenu+de+mon+meilleur+article.+J'espère+qu'il+vous+plaît!&postId=34657

+`title=Mon+meilleur+billet&content=Le+contenu+de+mon+meilleur+article.+J'espère+qu'il+vous+plaît!&postId=34657`
 
-
Bien que le champ masqué soit invisible sur la page, il fait toujours partie des données envoyées.

+Bien que le champ masqué soit invisible sur la page, il fait toujours partie des données envoyées.
 
-
Résumé technique

+## Résumé technique
 
 
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
+  
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+  
{{anch("Valeur")}}Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de la donnée masquée qu'on souhaite envoyer au serveur.
ÉvènementsAucun.
Attributs pris en charge{{htmlattrxref("autocomplete", "input")}}
Attributs IDLvalue
MéthodesAucune.
{{anch("Valeur")}}
+        Une chaîne de caractères ({{domxref("DOMString")}}) qui
+        représente la valeur de la donnée masquée qu'on souhaite envoyer au
+        serveur.
+      
ÉvènementsAucun.
Attributs pris en charge{{htmlattrxref("autocomplete", "input")}}
Attributs IDLvalue
MéthodesAucune.

 

 
-
Spécifications

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'forms.html#hidden-state-(type=hidden)', '<input type="hidden">')}}{{Spec2('HTML WHATWG')}}Définition initiale.
{{SpecName('HTML5.2', 'sec-forms.html#hidden-state-typehidden', '<input type="hidden">')}}{{Spec2('HTML5.2')}}Définition initiale.

+## Spécifications
+
+| Spécification                                                                                                                        | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('HTML WHATWG', 'forms.html#hidden-state-(type=hidden)', '<input type="hidden">')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. |
+| {{SpecName('HTML5.2', 'sec-forms.html#hidden-state-typehidden', '<input type="hidden">')}}     | {{Spec2('HTML5.2')}}     | Définition initiale. |
 
-
Compatibilité des navigateurs

+## Compatibilité des navigateurs
 
-
{{Compat("html.elements.input.input-hidden")}}

+{{Compat("html.elements.input.input-hidden")}}
 
-
Voir aussi

+## Voir aussi
 
-
+- [Guide sur les formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires)
+- {{HTMLElement("input")}}
+- L'interface DOM {{domxref("HTMLInputElement")}}
diff --git a/files/fr/web/html/element/input/image/index.md b/files/fr/web/html/element/input/image/index.md
index 4d3fac19f5..03ffa06680 100644
--- a/files/fr/web/html/element/input/image/index.md
+++ b/files/fr/web/html/element/input/image/index.md
@@ -9,277 +9,223 @@ tags:
   - Web
 translation_of: Web/HTML/Element/input/image
 ---
-
{{HTMLRef}}

-
-
Les éléments {{HTMLElement("input")}} dont l'attribut type vaut image sont utilisés afin de créer des boutons graphiques pour l'envoi de formulaire. Autrement dit, le bouton d'envoi aura la forme d'une image plutôt que de contenir un texte.

-
-
{{EmbedInteractiveExample("pages/tabbed/input-image.html", "tabbed-standard")}}

-
-
Valeur

-
-
Les éléments <input type="image"> n'acceptent pas de valeur pour l'attribut value. Le chemin vers l'image à afficher est indiqué grâce à l'attribut src.

-
-
Attributs supplémentaires

-
-
En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les boutons image permettent d'utiliser les attributs suivants :

-
-
- 
-  
-   
-   
-  
- 
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
AttributeDescription
{{anch("alt")}}Texte de remplacement lorsque l'image ne peut pas être affichée
{{anch("formaction")}}L'URL à laquelle envoyer les données du formulaire. Cette valeur prend le pas sur l'attribut {{htmlattrxref("action", "form")}} du formulaire s'il est défini.
{{anch("formenctype")}}Une chaîne de caractères qui indique le type d'encodage à utiliser pour les données du formulaire.
{{anch("formmethod")}}La méthode HTTP à utiliser pour envoyer le formulaire.
{{anch("formnovalidate")}}Un booléen qui, lorsqu'il est présent, indique que les champs du formulaire ne sont pas soumis aux contraintes de validation avant l'envoi des données au serveur.
{{anch("formtarget")}}Le contexte de navigation dans lequel charger la réponse du serveur reçue après l'envoi du formulaire.
{{anch("height")}}La hauteur, en pixels CSS, à laquelle dessiner l'image
{{anch("src")}}L'URL à partir de laquelle charger l'image
{{anch("width")}}La largeur, en pixels CSS, à laquelle dessiner l'image

+{{HTMLRef}}
 
-
{{htmlattrdef("alt")}}

+Les éléments {{HTMLElement("input")}} dont l'attribut `type` vaut **`image`** sont utilisés afin de créer des boutons graphiques pour l'envoi de formulaire. Autrement dit, le bouton d'envoi aura la forme d'une image plutôt que de contenir un texte.
 
-
L'attribut alt fournit un texte alternatif à utiliser comme libellé pour le bouton lorsque l'image ne peut être chargée ou affichée (que ce soit en raison d'une erreur ou de la configuration de l'agent utilisateur). Si cet attribut est fourni, ce doit être une chaîne de caractères non vide et qui décrit clairement le rôle du bouton.

+{{EmbedInteractiveExample("pages/tabbed/input-image.html", "tabbed-standard")}}
 
-
Ainsi, si on a un bouton graphique avec une image et/ou une incône avec le texte Se connecter. Le texte alternatif porté par alt devrait être proche de "Se connecter".

+## Valeur
 
-

-
Note : Bien que, d'un point de vue technique, l'attribut alt soit optionnel. Il faut toujours en inclure un afin d'améliorer l'accessibilité et l'utilisabilité du bouton.

-

+Les éléments `` n'acceptent pas de valeur pour l'attribut `value`. Le chemin vers l'image à afficher est indiqué grâce à l'attribut `src`.
 
-
D'un point de vue fonctionnel, l'attribut alt pour <input type="image"> fonctionne de la même façon que l'attribut {{htmlattrdef("alt", "img")}} associé aux éléments {{HTMLElement("img")}}.

+## Attributs supplémentaires
 
-
{{htmlattrdef("formaction")}}

+En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les boutons `image` permettent d'utiliser les attributs suivants :
 
-
Une chaîne de caractères représentant l'URL à laquelle envoyer les données du formulaire. Cette valeur prend le pas sur l'attribut {{htmlattrxref("action", "form")}} du formulaire ({{HTMLElement("form")}}) propriétaire du champ <input>.

+| Attribute                              | Description                                                                                                                                                                                                               |
+| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `{{anch("alt")}}`                 | Texte de remplacement lorsque l'image ne peut pas être affichée                                                                                                                                                           |
+| `{{anch("formaction")}}`         | L'URL à laquelle envoyer les données du formulaire. Cette valeur prend le pas sur l'attribut {{htmlattrxref("action", "form")}} du formulaire s'il est défini.                                                  |
+| `{{anch("formenctype")}}`     | Une chaîne de caractères qui indique le type d'encodage à utiliser pour les données du formulaire.                                                                                                                        |
+| `{{anch("formmethod")}}`         | La méthode HTTP à utiliser pour envoyer le formulaire.                                                                                                                                                                    |
+| `{{anch("formnovalidate")}}` | Un booléen qui, lorsqu'il est présent, indique que les champs du formulaire ne sont pas soumis [aux contraintes de validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) avant l'envoi des données au serveur. |
+| `{{anch("formtarget")}}`         | Le contexte de navigation dans lequel charger la réponse du serveur reçue après l'envoi du formulaire.                                                                                                                    |
+| `{{anch("height")}}`             | La hauteur, en pixels CSS, à laquelle dessiner l'image                                                                                                                                                                    |
+| `{{anch("src")}}`                 | L'URL à partir de laquelle charger l'image                                                                                                                                                                                |
+| `{{anch("width")}}`             | La largeur, en pixels CSS, à laquelle dessiner l'image                                                                                                                                                                    |
 
-
Cet attribut est également disponible pour les éléments <input type="submit"> et {{HTMLElement("button")}}.

+### {{htmlattrdef("alt")}}
 
-
{{htmlattrdef("formenctype")}}

+L'attribut `alt` fournit un texte alternatif à utiliser comme libellé pour le bouton lorsque l'image ne peut être chargée ou affichée (que ce soit en raison d'une erreur ou de la configuration de l'agent utilisateur). Si cet attribut est fourni, ce doit être une chaîne de caractères non vide et qui décrit clairement le rôle du bouton.
 
-
Une chaîne de caractères qui identifie la méthode d'encodage à utiliser pour l'envoi des données du formulaire au serveur. Trois valeurs sont autorisées :

+Ainsi, si on a un bouton graphique avec une image et/ou une incône avec le texte _Se connecter_. Le texte alternatif porté par `alt` devrait être proche de `"Se connecter"`.
 
-

- 
application/x-www-form-urlencoded

- 
Les informations sont envoyées sous la forme d'une chaîne de caractères ajoutée à l'URL en utilisant l'algorithme de {{jsxref("encodeURI", "encodeURI()")}}. Cette valeur est la valeur par défaut.

- 
multipart/form-data

- 
Cette valeur utilise l'API {{domxref("FormData")}} pour gérer les données et permet d'uploaderdes fichiers. Cet encodage doit être utilisé s'il y a des éléments  {{HTMLElement("input")}} de {{htmlattrxref("type", "input")}} "file" (<input type="file">).

- 
text/plain

- 
Les données sont envoyées comme texte simple. Cette valeur est généralement utile pour déboguer car elle permet de voir facilement les données envoyées.

-

+> **Note :** Bien que, d'un point de vue technique, l'attribut `alt` soit optionnel. Il faut toujours en inclure un afin d'améliorer l'accessibilité et l'utilisabilité du bouton.
 
-
Si cet attribut est défini, sa valeur prend la priorité sur l'attribut {{htmlattrxref("action", "form")}} du formulaire.

+D'un point de vue fonctionnel, l'attribut `alt` pour `` fonctionne de la même façon que l'attribut {{htmlattrdef("alt", "img")}} associé aux éléments {{HTMLElement("img")}}.
 
-
Cet attribut est également disponible pour les éléments <input type="submit"> et {{HTMLElement("button")}}.

+### {{htmlattrdef("formaction")}}
 
-
{{htmlattrdef("formmethod")}}

+Une chaîne de caractères représentant l'URL à laquelle envoyer les données du formulaire. Cette valeur prend le pas sur l'attribut {{htmlattrxref("action", "form")}} du formulaire ({{HTMLElement("form")}}) propriétaire du champ ``.
 
-
Une chaîne de caractères qui indique la méthode HTTP à utiliser lors de l'envoi des données du formulaire. Cette valeur prend la priorité sur l'attribut {{htmlattrxref("method", "form")}} du formulaire. Les valeurs autorisées sont :

+Cet attribut est également disponible pour les éléments [``](/fr/docs/Web/HTML/Element/input/submit) et {{HTMLElement("button")}}.
 
-

- 
get

- 
Une URL est construite en commençant avec l'URL fournie par l'attribut formaction ou {{htmlattrxref("action", "form")}}, suivie d'un point d'interrogation puis des données du formulaire, encodées comme indiqué avec formenctype ou {{htmlattrxref("enctype", "form")}}. Cette URL est ensuite envoyée au serveur avec une requête HTTP {{HTTPMethod("get")}}. Cette méthode fonctionne correctement pour les formulaires simples, contenant des données ASCII et sans effet de bord. C'est la valeur par défaut.

- 
post

- 
Les données du formulaire sont incluses dans le corps de la requête envoyée à l'URL fournie par l'attribut formaction ou {{htmlattrxref("action", "form")}} en utilisant une requête {{HTTPMethod("push")}}. Cette méthode prend en charge les données plus complexes (que celles pour get) et les pièces jointes sous forme de fichiers.

- 
dialog

- 
Cette méthode est utilisée pour indique que le bouton permet simplement de fermer la boîte de dialogue associée au champ. Aucune donnée n'est transmise.

-

+### {{htmlattrdef("formenctype")}}
 
-
Cet attribut est également disponible pour les éléments <input type="submit"> et {{HTMLElement("button")}}.

+Une chaîne de caractères qui identifie la méthode d'encodage à utiliser pour l'envoi des données du formulaire au serveur. Trois valeurs sont autorisées :
 
-
{{htmlattrdef("formnovalidate")}}

+- `application/x-www-form-urlencoded`
+  - : Les informations sont envoyées sous la forme d'une chaîne de caractères ajoutée à l'URL en utilisant l'algorithme de {{jsxref("encodeURI", "encodeURI()")}}. **Cette valeur est la valeur par défaut.**
+- `multipart/form-data`
+  - : Cette valeur utilise l'API {{domxref("FormData")}} pour gérer les données et permet d'*uploader*des fichiers. Cet encodage _doit_ être utilisé s'il y a des éléments  {{HTMLElement("input")}} de {{htmlattrxref("type", "input")}} `"file"` ([``](/fr/docs/Web/HTML/Element/input/file)).
+- `text/plain`
+  - : Les données sont envoyées comme texte simple. Cette valeur est généralement utile pour déboguer car elle permet de voir facilement les données envoyées.
 
-
Un attribut booléen qui, lorsqu'il est présent, indique que le formulaire ne devrait pas être validé avant d'être envoyé au serveur. Cet attribut prend la priorité sur l'attribut {{htmlattrxref("novalidate", "form")}} du formulaire parent.

+Si cet attribut est défini, sa valeur prend la priorité sur l'attribut {{htmlattrxref("action", "form")}} du formulaire.
 
-
Cet attribut est également disponible pour les éléments <input type="submit"> et {{HTMLElement("button")}}.

+Cet attribut est également disponible pour les éléments [``](/fr/docs/Web/HTML/Element/input/submit) et {{HTMLElement("button")}}.
 
-
{{htmlattrdef("formtarget")}}

+### {{htmlattrdef("formmethod")}}
 
-
Une chaîne de caractères qui indique un nom ou un mot-clé qui définit où afficher la réponse reçue depuis le serveur après l'envoi du formulaire. La chaîne de caractères doit correspondre au nom d'un contexte de navigation (un onglet, une fenêtre ou une {{HTMLElement("iframe")}}). La valeur de cet attribut prendra la priorité sur celle fournie par l'attribut {{htmlattrxref("target", "form")}} du formulaire ({{HTMLElement("form")}}) parent.

+Une chaîne de caractères qui indique la méthode HTTP à utiliser lors de l'envoi des données du formulaire. Cette valeur prend la priorité sur l'attribut {{htmlattrxref("method", "form")}} du formulaire. Les valeurs autorisées sont :
 
-
En complément des noms des onglets, fenêtres, iframes, quelques mots-clés spéciaux peuvent être utilisés :

+- `get`
+  - : Une URL est construite en commençant avec l'URL fournie par l'attribut `formaction` ou {{htmlattrxref("action", "form")}}, suivie d'un point d'interrogation puis des données du formulaire, encodées comme indiqué avec `formenctype` ou {{htmlattrxref("enctype", "form")}}. Cette URL est ensuite envoyée au serveur avec une requête HTTP {{HTTPMethod("get")}}. Cette méthode fonctionne correctement pour les formulaires simples, contenant des données ASCII et sans effet de bord. **C'est la valeur par défaut.**
+- `post`
+  - : Les données du formulaire sont incluses dans le corps de la requête envoyée à l'URL fournie par l'attribut `formaction` ou {{htmlattrxref("action", "form")}} en utilisant une requête {{HTTPMethod("push")}}. Cette méthode prend en charge les données plus complexes (que celles pour `get`) et les pièces jointes sous forme de fichiers.
+- `dialog`
+  - : Cette méthode est utilisée pour indique que le bouton permet simplement de fermer la boîte de dialogue associée au champ. Aucune donnée n'est transmise.
 
-

- 
_self

- 
La réponse est chargée dans le même contexte de navigation que celui contenant le formulaire. Cela remplacera le document courant avec les données reçues. Cette valeur est la valeur par défaut.

- 
_blank

- 
La réponse est chargé dans un contexte de navigation vierge. Ce sera généralement un nouvel onglet dans la même fenêtre mais cela peut varier selon la configuration de l'agent utilisateur.

- 
_parent

- 
La réponse est chargée dans le contexte de navigation parent du contexte courant. S'il n'y a pas de contexte parent, cette valeur est synonyme de _self.

- 
_top

- 
La réponse est chargée dans le contexte de navigation de plus haut niveau, c'est-à-dire le contexte de navigation qui est l'ancêtre, sans parent, du contexte courant. Si le contexte courant est déjà le contexte de navigation le plus haut, cette valeur est synonyme de _self.

-

+Cet attribut est également disponible pour les éléments [``](/fr/docs/Web/HTML/Element/input/submit) et {{HTMLElement("button")}}.
 
-
Cet attribut est également disponible pour les éléments <input type="submit"> et {{HTMLElement("button")}}.

+### {{htmlattrdef("formnovalidate")}}
 
-
{{htmlattrdef("height")}}

+Un attribut booléen qui, lorsqu'il est présent, indique que le formulaire ne devrait pas être validé avant d'être envoyé au serveur. Cet attribut prend la priorité sur l'attribut {{htmlattrxref("novalidate", "form")}} du formulaire parent.
 
-
Une valeur numérique qui indique la hauteur, exprimée en pixels CSS, pour dessiner l'image fournie par l'attribut src.

+Cet attribut est également disponible pour les éléments [``](/fr/docs/Web/HTML/Element/input/submit) et {{HTMLElement("button")}}.
 
-
{{htmlattrdef("src")}}

+### {{htmlattrdef("formtarget")}}
 
-
Une chaîne de caractères qui définit l'URL du fichier image à afficher pour le bouton. Lorsque l'utilisateur interagit avec l'image, le champ est géré comme tout autre bouton <input>.

+Une chaîne de caractères qui indique un nom ou un mot-clé qui définit où afficher la réponse reçue depuis le serveur après l'envoi du formulaire. La chaîne de caractères doit correspondre au nom **d'un contexte de navigation** (un onglet, une fenêtre ou une {{HTMLElement("iframe")}}). La valeur de cet attribut prendra la priorité sur celle fournie par l'attribut {{htmlattrxref("target", "form")}} du formulaire ({{HTMLElement("form")}}) parent.
 
-
{{htmlattrdef("width")}}

+En complément des noms des onglets, fenêtres, _iframes_, quelques mots-clés spéciaux peuvent être utilisés :
 
-
Une valeur numérique qui indique la largeur, exprimée en pixels CSS, pour dessiner l'image fournie par l'attribut src.

+- `_self`
+  - : La réponse est chargée dans le même contexte de navigation que celui contenant le formulaire. Cela remplacera le document courant avec les données reçues. **Cette valeur est la valeur par défaut.**
+- `_blank`
+  - : La réponse est chargé dans un contexte de navigation vierge. Ce sera généralement un nouvel onglet dans la même fenêtre mais cela peut varier selon la configuration de l'agent utilisateur.
+- `_parent`
+  - : La réponse est chargée dans le contexte de navigation parent du contexte courant. S'il n'y a pas de contexte parent, cette valeur est synonyme de `_self`.
+- `_top`
+  - : La réponse est chargée dans le contexte de navigation de plus haut niveau, c'est-à-dire le contexte de navigation qui est l'ancêtre, sans parent, du contexte courant. Si le contexte courant est déjà le contexte de navigation le plus haut, cette valeur est synonyme de `_self`.
 
-
Attributs obsolètes

+Cet attribut est également disponible pour les éléments [``](/fr/docs/Web/HTML/Element/input/submit) et {{HTMLElement("button")}}.
 
-
L'attribut suivant a été défini en HTML4 pour les champs de type image mais n'a pas été implémenté par l'ensemble des navigateurs et a été déprécié depuis :

+### {{htmlattrdef("height")}}
 
-
- 
-  
-   
-   
-  
- 
- 
-  
-   
-   
-  
- 
-
AttributeDescription
{{anch("usemap")}}Le nom d'une carte d'images cliquables ({{HTMLElement("map")}}) à utiliser pour l'image. Cet élément est obsolète et c'est l'élément {{HTMLElement("img")}} qui devrait être utilisé pour créer des cartes à la place.

+Une valeur numérique qui indique la hauteur, exprimée en pixels CSS, pour dessiner l'image fournie par l'attribut `src`.
+
+### {{htmlattrdef("src")}}
+
+Une chaîne de caractères qui définit l'URL du fichier image à afficher pour le bouton. Lorsque l'utilisateur interagit avec l'image, le champ est géré comme tout autre bouton ``.
+
+### {{htmlattrdef("width")}}
+
+Une valeur numérique qui indique la largeur, exprimée en pixels CSS, pour dessiner l'image fournie par l'attribut `src`.
+
+## Attributs obsolètes
+
+L'attribut suivant a été défini en HTML4 pour les champs de type `image` mais n'a pas été implémenté par l'ensemble des navigateurs et a été déprécié depuis :
+
+| Attribute                  | Description                                                                                                                                                                                                                        |
+| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `{{anch("usemap")}}` | Le nom d'une carte d'images cliquables ({{HTMLElement("map")}}) à utiliser pour l'image. Cet élément est obsolète et c'est l'élément {{HTMLElement("img")}} qui devrait être utilisé pour créer des cartes à la place. |
+
+### {{htmlattrdef("usemap")}}
+
+Lorsque l'attribut `usemap` est utilisé, sa valeur doit être le nom d'un élément {{HTMLElement("map")}} qui définit l'image avec des régions cliquables à utiliser. Cette utilisation est obsolète et l'élément {{HTMLElement("img")}} devrait être utilisé pour les images avec des zones cliquables.
 
-
{{htmlattrdef("usemap")}}

+## Utiliser les contrôles ``
 
-
Lorsque l'attribut usemap est utilisé, sa valeur doit être le nom d'un élément {{HTMLElement("map")}} qui définit l'image avec des régions cliquables à utiliser. Cette utilisation est obsolète et l'élément {{HTMLElement("img")}} devrait être utilisé pour les images avec des zones cliquables.

+Un élément `` est [un élément remplacé](/fr/docs/Web/CSS/Élément_remplacé) (c'est-à-dire un élément dont le contenu n'est pas généré ou géré par le CSS) et se comporte comme un élément {{htmlelement("img")}} tout en permettant [d'envoyer un formulaire (comme un élément ``)](/fr/docs/Web/HTML/Element/Input/submit).
 
-
Utiliser les contrôles <input type="image">

+### Les fonctionnalités essentielles
 
-
Un élément <input type="image"> est un élément remplacé (c'est-à-dire un élément dont le contenu n'est pas généré ou géré par le CSS) et se comporte comme un élément {{htmlelement("img")}} tout en permettant d'envoyer un formulaire (comme un élément <input type="submit">).

+Prenons un exemple simple qui utilise les attributs strictement nécessaires (qui fonctionnent de la même façon que pour un élément ``) :
 
-
Les fonctionnalités essentielles

+```html
+
+```
 
-
Prenons un exemple simple qui utilise les attributs strictement nécessaires (qui fonctionnent de la même façon que pour un élément <img>) :

+{{EmbedLiveSample('Les_fonctionnalités_essentielles', 600, 50)}}
 
-
<input id="image" type="image" width="100" height="30" alt="Login"
-       src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png">

+- L'attribut {{htmlattrxref("src", "input")}} indique le chemin de l'image qu'on souhaite afficher sur le bouton.
+- L'attribut {{htmlattrxref("alt", "input")}} fournit un texte alternatif à l'image qui peut notamment être utilisé par un lecteur d'écran pour indiquer ce à quoi correspond l'image. Ce texte sera également affiché si l'image ne peut pas être affichée (par exemple si le chemin est incorrect). Si possible, il est préférable d'utiliser le texte que vous auriez utilisé si vous aviez mis en place un élément \`.
+- Les attributs {{htmlattrxref("width", "input")}} et {{htmlattrxref("height", "input")}} sont utilisés afin d'indiquer la largeur et la hauteur, exprimées en pixels, avec lesquelles représenter l'image. Le bouton aura la même taille que l'image. S'il est nécessaire que le bouton soit plus gros que l'image, on pourra utiliser des règles CSS (par exemple avec la propriété {{cssxref("padding")}}). Si un seul des deux attributs est fourni, la seconde dimension sera automatiquement ajustée afin que l'image conserve ses proportions originelles.
 
-
{{EmbedLiveSample('Les_fonctionnalités_essentielles', 600, 50)}}

+### Surcharger le comportement par défaut
 
-
+Les éléments `` — comme les boutons [``](/fr/docs/Web/HTML/Element/input/submit) — prennent en charge différents attributs qui permettent d'adapter le compotement du formulaire :
 
-
Surcharger le comportement par défaut

+- {{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}}
+  - : Cet attribut indique l'URI d'un programme qui traite les informations envoyées par l'élément ``. Cet attribut surcharge l'attribut {{htmlattrxref("action","form")}} du formulaire associé.
 
-
Les éléments <input type="image"> — comme les boutons <input type="submit"> — prennent en charge différents attributs qui permettent d'adapter le compotement du formulaire :

+
 
-

- 
{{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}}

- 
Cet attribut indique l'URI d'un programme qui traite les informations envoyées par l'élément <input>. Cet attribut surcharge l'attribut {{htmlattrxref("action","form")}} du formulaire associé.

-

+- {{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}}
 
-

- 
{{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}}

- 
Cet attribut définit le type de contenu utilisé pour envoyer le formulaire au serveur. Les valeurs possibles sont :
- 
    
-  
  • application/x-www-form-urlencoded : la valur par défaut si l'attribut n'est pas utilisé.
    • 
-  
  • text/plain.
    • 
- 

+  - : Cet attribut définit le type de contenu utilisé pour envoyer le formulaire au serveur. Les valeurs possibles sont :
 
- 
Si cet attribut est utilisé, il surcharge l'attribut {{htmlattrxref("enctype","form")}} du formulaire associé.

- 

- 
{{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}}

- 
Cet attribut indique la méthode HTTP utilisée par le navigateur afin d'envoyer le formulaire. Les valeurs possibles sont :
- 
    
-  
  • post : les données du formulaire sont incluses dans le corps du formulaire puis envoyées au serveur.
    • 
-  
  • get : les données du formulaire sont ajoutées après l'URI de l'attribut form avec un point d'interrogation (« ? ») comme séparateur. L'URI alors obtenue est envoyée au serveur. Cette méthode doit uniquement être utilisée lorsque le formulaire n'entraîne aucun effet de bord et que les données ne contiennent que des caractères ASCII.
    • 
- 

+    - `application/x-www-form-urlencoded` : la valur par défaut si l'attribut n'est pas utilisé.
+    - `text/plain`.
 
- 
Si cet attribut est utilisé, il surcharge l'attribut {{htmlattrxref("method","form")}} du formulaire associé.

- 

- 
{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}}

- 
Un attribut booléen qui indique si le formulaire ne doit pas être validé avant d'être envoyé. Si cet attribut est utilisé, il surcharge l'attribut {{htmlattrxref("novalidate","form")}} du formulaire associé.

- 
{{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}}

- 
Un nom ou un mot-clé qui indique où la réponse doit être affichée après que le formulaire a été envoyé. Cette valeur est le nom ou un mot-clé qui désigne un contexte de navigation (par exemple un onglet, une fenêtre ou une iframe). Si cet attribut est indiqué, il surcharge l'attribut {{htmlattrxref("target", "form")}} du formulaire associé. Les mots-clés suivants ont des significations particulières :
- 
    
-  
  • _self : la réponse est chargée dans le même contexte de navigation que le contexte courant. C'est la valeur par défaut si l'attribut n'est pas utilisé.
    • 
-  
  • _blank : la réponse est chargée dans un nouveau contexte de navigation anonyme.
    • 
-  
  • _parent : la réponse est chargée dans le contexte navigation qui est le parent du contexte courant. S'il n'y a aucun contexte parent, cette valeur se comportera comme la valeur _self.
    • 
-  
  • _top : la réponse est chargée dans le contexte de navigation de plus haut niveau (c'est-à-dire le contexte qui est un ancêtre du contexte courant et qui n'a pas de contexte parent). Si le contexte courant n'a pas de parent, cette valeur se comportera comme _self.
    • 
- 

- 

-

+    Si cet attribut est utilisé, il surcharge l'attribut {{htmlattrxref("enctype","form")}} du formulaire associé.
 
-
Utiliser les coordonnées x et y

+- {{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}}
 
-
Lorsqu'on envoie un formulaire avec un bouton <input type="image">, les coordonnées (x et y) du clic sur l'image sont également envoyées au serveur (voir cet exemple).

+  - : Cet attribut indique la méthode HTTP utilisée par le navigateur afin d'envoyer le formulaire. Les valeurs possibles sont :
 
-
Lorsqu'on clique sur l'image pour envoyer le formulaire, vous pourrez voir que l'URL contient deux autres paramètres (par exemple "?x=52&y=55"). Si le contrôle possède un attribut {{htmlattrxref("name", "input")}}, ce nom sera utilisé comme préfixe. Ainsi, si name vaut "position", les coordonnées du clic seront envoyées dans l'URL avec le format suivant : "?position.x=52&position.y=55". Ce préfixe est également appliqué aux autres attributs.

+    - `post` : les données du formulaire sont incluses dans le corps du formulaire puis envoyées au serveur.
+    - `get` : les données du formulaire sont ajoutées après l'URI de l'attribut **`form`** avec un point d'interrogation (« ? ») comme séparateur. L'URI alors obtenue est envoyée au serveur. Cette méthode doit uniquement être utilisée lorsque le formulaire n'entraîne aucun effet de bord et que les données ne contiennent que des caractères ASCII.
 
-
Les coordonnées X et Y sont calculées en pixels à partir du coin en haut à gauche de l'image ete peuvent être utilisées lorsque l'emplacement du clic possède une quelconque importance (par exemple une carte). Ces coordonnées peuvent donc être utilisées côté serveur afin de renvoyer des informations pertinentes (par exemple des informations quant aux lieux alentour).

+    Si cet attribut est utilisé, il surcharge l'attribut {{htmlattrxref("method","form")}} du formulaire associé.
 
-
Ajuster la position et l'échelle de l'image

+- {{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}}
+  - : Un attribut booléen qui indique si le formulaire ne doit pas être validé avant d'être envoyé. Si cet attribut est utilisé, il surcharge l'attribut {{htmlattrxref("novalidate","form")}} du formulaire associé.
+- {{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}}
 
-
Il est possible d'utiliser la propriété CSS {{cssxref("object-position")}} afin d'ajuster la position de l'image au sein de la boîte fournie par l'élément <input>. La propriété CSS {{cssxref("object-fit")}} peut être utilisée afin de contrôler la façon dont l'image est redimensionnée pour tenir dans la boîte. On peut donc ajuster le cadre grâce aux attributs width et height afin de créer un espace fixe sur le document puis ajuster la façon dont l'image occupe cet espace.

+  - : Un nom ou un mot-clé qui indique où la réponse doit être affichée après que le formulaire a été envoyé. Cette valeur est le nom ou un mot-clé qui désigne un contexte de navigation (par exemple un onglet, une fenêtre ou une _iframe_). Si cet attribut est indiqué, il surcharge l'attribut {{htmlattrxref("target", "form")}} du formulaire associé. Les mots-clés suivants ont des significations particulières :
 
-
Exemples

+    - \_`self` : la réponse est chargée dans le même contexte de navigation que le contexte courant. C'est la valeur par défaut si l'attribut n'est pas utilisé.
+    - `_blank` : la réponse est chargée dans un nouveau contexte de navigation anonyme.
+    - `_parent` : la réponse est chargée dans le contexte navigation qui est le parent du contexte courant. S'il n'y a aucun contexte parent, cette valeur se comportera comme la valeur `_self`.
+    - `_top` : la réponse est chargée dans le contexte de navigation de plus haut niveau (c'est-à-dire le contexte qui est un ancêtre du contexte courant et qui n'a pas de contexte parent). Si le contexte courant n'a pas de parent, cette valeur se comportera comme `_self`.
 
-
Un formulaire de connexion

+### Utiliser les coordonnées `x` et `y`
 
-
Dans l'exemple suivant, on insère le bouton vu précedemment dans un formulaire de connexion.

+Lorsqu'on envoie un formulaire avec un bouton ``, les coordonnées (`x` et `y`) du clic sur l'image sont également envoyées au serveur ([voir cet exemple](https://mdn.github.io/learning-area/html/forms/image-type-example/xy-coordinates-example.html)).
 
-
{{EmbedLiveSample('Un_formulaire_de_connexion', 600, 170)}}

+Lorsqu'on clique sur l'image pour envoyer le formulaire, vous pourrez voir que l'URL contient deux autres paramètres (par exemple `"?x=52&y=55"`). Si le contrôle possède un attribut {{htmlattrxref("name", "input")}}, ce nom sera utilisé comme préfixe. Ainsi, si `name` vaut `"position"`, les coordonnées du clic seront envoyées dans l'URL avec le format suivant : `"?position.x=52&position.y=55"`. Ce préfixe est également appliqué aux autres attributs.
 
-
Voici le fragment de code HTML utilisé :

+Les coordonnées X et Y sont calculées en pixels à partir du coin en haut à gauche de l'image ete peuvent être utilisées lorsque l'emplacement du clic possède une quelconque importance (par exemple une carte). Ces coordonnées peuvent donc être utilisées côté serveur afin de renvoyer des informations pertinentes (par exemple des informations quant aux lieux alentour).
 
-
<form>
-  <p>Connectez-vous</p>
-  <div>
-    <label for="userId">Identifiant</label>
-    <input type="text" id="userId" name="userId">
-  </div>
-  <div>
-    <label for="pwd">Mot de passe</label>
-    <input type="password" id="pwd" name="pwd">
-  </div>
-  <div>
-    <input id="image" type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" alt="Login" width="100">
-  </div>
-</form>

+### Ajuster la position et l'échelle de l'image
 
-
Ensuite, on ajoute un feuille de style CSS pour mettre en forme les éléments :

+Il est possible d'utiliser la propriété CSS {{cssxref("object-position")}} afin d'ajuster la position de l'image au sein de la boîte fournie par l'élément ``. La propriété CSS {{cssxref("object-fit")}} peut être utilisée afin de contrôler la façon dont l'image est redimensionnée pour tenir dans la boîte. On peut donc ajuster le cadre grâce aux attributs `width` et `height` afin de créer un espace fixe sur le document puis ajuster la façon dont l'image occupe cet espace.
 
-
div {
+## Exemples
+
+### Un formulaire de connexion
+
+Dans l'exemple suivant, on insère le bouton vu précedemment dans un formulaire de connexion.
+
+{{EmbedLiveSample('Un_formulaire_de_connexion', 600, 170)}}
+
+Voici le fragment de code HTML utilisé :
+
+```html
+

+  
Connectez-vous

+  

+    
+    
+  

+  

+    
+    
+  

+  

+    
+  

+

+```
+
+Ensuite, on ajoute un feuille de style CSS pour mettre en forme les éléments :
+
+```css
+div {
   margin-bottom: 10px;
 }
 
@@ -288,34 +234,38 @@ label {
   width: 70px;
   text-align: right;
   padding-right: 10px;
-}

+}
+```
 
-
Ajuster la position et l’échelle de l’image

+### Ajuster la position et l’échelle de l’image
 
-
Dans l'exemple qui suit, on adapte l'exemple précédent afin de disposer de plus d'espace pour l'image et on ajuste la taille et la position de l'image grâce à {{cssxref("object-fit")}} et {{cssxref("object-position")}}.

+Dans l'exemple qui suit, on adapte l'exemple précédent afin de disposer de plus d'espace pour l'image et on ajuste la taille et la position de l'image grâce à {{cssxref("object-fit")}} et {{cssxref("object-position")}}.
 
-
{{EmbedLiveSample("Ajuster_la_position_et_l’échelle_de_l’image", 600, 300)}}

+{{EmbedLiveSample("Ajuster_la_position_et_l’échelle_de_l’image", 600, 300)}}
 
-
HTML

+#### HTML
 
-
<form>
-  <p>Connectez-vous</p>
-  <div>
-    <label for="userId">Identifiant</label>
-    <input type="text" id="userId" name="userId">
-  </div>
-  <div>
-    <label for="pwd">Mot de passe</label>
-    <input type="password" id="pwd" name="pwd">
-  </div>
-  <div>
-    <input id="image" type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" alt="Login" width="100">
-  </div>
-</form>

+```html
+

+  
Connectez-vous

+  

+    
+    
+  

+  

+    
+    
+  

+  

+    
+  

+

+```
 
-
CSS

+#### CSS
 
-
div {
+```css
+div {
   margin-bottom: 10px;
 }
 
@@ -331,65 +281,60 @@ label {
   object-fit: contain;
   background-color: #ddd;
 }
-

+```
 
-
On voit ici object-position qui permet de dessiner l'image à paritr du coin supérieur droit de l'élément et object-fit qui vaut contain : l'image est ainsi dessinée avec la taille la plus grande possible tout en respectant ses proportions et en ne dépassant pas de la boîte. L'arrière-plan de l'image sera visible s'il y a des zones non-couvertes.

+On voit ici `object-position` qui permet de dessiner l'image à paritr du coin supérieur droit de l'élément et `object-fit` qui vaut `contain` : l'image est ainsi dessinée avec la taille la plus grande possible tout en respectant ses proportions et en ne dépassant pas de la boîte. L'arrière-plan de l'image sera visible s'il y a des zones non-couvertes.
 
-
Résumé technique

+## Résumé technique
 
 
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
+  
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+  
{{anch("Valeur")}}Aucune, l'attribut value ne devrait pas être utilisé.
ÉvènementsAucun.
Attributs pris en charge{{htmlattrxref("alt", "input")}}, {{htmlattrxref("src", "input")}}, {{htmlattrxref("width", "input")}}, {{htmlattrxref("height", "input")}}, {{htmlattrxref("formaction", "input")}}, {{htmlattrxref("formenctype", "input")}}, {{htmlattrxref("formmethod", "input")}}, {{htmlattrxref("formnovalidate", "input")}}, {{htmlattrxref("formtarget", "input")}}
Attributs IDLAucun.
MéthodesAucune.
{{anch("Valeur")}}
+        Aucune, l'attribut value ne devrait pas être utilisé.
+      
ÉvènementsAucun.
Attributs pris en charge
+        {{htmlattrxref("alt", "input")}},
+        {{htmlattrxref("src", "input")}},
+        {{htmlattrxref("width", "input")}},
+        {{htmlattrxref("height", "input")}},
+        {{htmlattrxref("formaction", "input")}},
+        {{htmlattrxref("formenctype", "input")}},
+        {{htmlattrxref("formmethod", "input")}},
+        {{htmlattrxref("formnovalidate", "input")}},
+        {{htmlattrxref("formtarget", "input")}}
+      
Attributs IDLAucun.
MéthodesAucune.

 

 
-
Spécifications

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'forms.html#image-button-state-(type=image)', '<input type="image">')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#image-button-state-%28type=image%29', '<input type="image">')}}{{Spec2('HTML5 W3C')}}

+## Spécifications
+
+| Spécification                                                                                                                                | État                             | Commentaires |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'forms.html#image-button-state-(type=image)', '<input type="image">')}}     | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'forms.html#image-button-state-%28type=image%29', '<input type="image">')}} | {{Spec2('HTML5 W3C')}}     |              |
 
-
Compatibilité des navigateurs

+## Compatibilité des navigateurs
 
-
{{Compat("html.elements.input.input-image")}}

+{{Compat("html.elements.input.input-image")}}
 
-
Voir ausi

+## Voir ausi
 
-
+- L'élément {{HTMLElement("input")}} et l'interface DOM {{domxref("HTMLInputElement")}} qu'il implémente.
diff --git a/files/fr/web/html/element/input/index.md b/files/fr/web/html/element/input/index.md
index 54df76bc7d..0d528c5c9a 100644
--- a/files/fr/web/html/element/input/index.md
+++ b/files/fr/web/html/element/input/index.md
@@ -10,449 +10,405 @@ tags:
   - Web
 translation_of: Web/HTML/Element/input
 ---
-
{{HTMLRef}}

-
-
L'élément HTML <input> est utilisé pour créer un contrôle interactif dans un formulaire web qui permet à l'utilisateur de saisir des données. Les saisies possibles et le comportement de l'élément <input> dépend fortement de la valeur indiquée dans son attribut type.

-
-
{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}

-
-
Les différents types de champs <input>

-
-
La façon dont un élément <input> fonctionne dépend grandement de la valeur de son attribut type. Aussi, pour chacun de ces types, on aura une page de référence dédiée. Par défaut, lorsque l'attribut type n'est pas présent, il aura la valeur implicite text.

-
-
Les types de champs disponibles sont :

-
-
-
-
Certains types sont désormais obsolètes :

-
-
-
-
Attributs

-
-
L'élément <input> est l'un des éléments HTML les plus complexes et puissants et il peut utiliser de nombreux types et attributs. Chaque élément <input> étant basé sur l'interface DOM {{domxref("HTMLInputElement")}}, ils partagent tous, techniquement, les mêmes attributs. Toutefois, certains attributs ne fonctionnent que pour certains types de champs et certains attributs fonctionnent spécifiquement selon le type de champ.

-
-
Sur cette page, vous trouverez des informations sur les attributs communs à l'ensemble des types d'éléments <input> ainsi que la description de quelques attributs notables.

-
-
Attributs communs à l'ensemble des types

-
-
This section lists the attributes which are used by all form <input> types. Attributes that are unique to particular input types—or attributes which are common to all input types but have special behaviors when used on a given input type—are instead documented on those types' pages.

-
-

-
Note : Les éléments <input> peuvent bien entendu utiliser les attributs universels.

-

-
-
- 
-  
-   
-   
-  
- 
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
AttributDescription
{{anch("autocomplete")}}Une chaîne de caractères qui indique le type d'autocomplétion à utiliser.
{{anch("autofocus")}}Un attribut booléen qui passe le focus sur le champ lorsque le formulaire est affiché.
{{anch("disabled")}}Un attribut booléen qui indique si le champ doit être désactivé.
{{anch("form")}}L'identifiant du formulaire (la valeur de l'attribut id de l'élément {{HTMLElement("form")}}) auquel le champ est rattaché. Si cet attribut est absent, le champ sera rattaché au formulaire le plus proche qui le contient s'il existe.
{{anch("list")}}L'identifiant (valeur de l'attribut id) d'un élément {{HTMLElement("datalist")}} qui fournit une liste de suggestions.
{{anch("name")}}Le nom du champ qui sera rattaché à la donnée envoyée via le formulaire.
{{anch("readonly")}}Un attribut booléen qui indique si le champ peut être édité ou non.
{{anch("required")}}Un attribut booléen qui indique que le champ doit être renseigné avant de pouvoir envoyer le formulaire.
{{anch("tabindex")}}Une valeur numérique qui indique à l'agent utilisateur l'ordre selon lequel naviguer au clavier grâce à la touche Tab.
{{anch("type")}}Une chaîne de caractère qui indique le type de champ représenté par l'élément <input>.
{{anch("value")}}La valeur du champ.

+{{HTMLRef}}
+
+L'élément HTML **``** est utilisé pour créer un contrôle interactif dans un formulaire web qui permet à l'utilisateur de saisir des données. Les saisies possibles et le comportement de l'élément `` dépend fortement de la valeur indiquée dans son attribut `type`.
+
+{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}
+
+## Les différents types de champs ``
+
+La façon dont un élément `` fonctionne dépend grandement de la valeur de son attribut `type`. Aussi, pour chacun de ces types, on aura une page de référence dédiée. Par défaut, lorsque l'attribut `type` n'est pas présent, il aura la valeur implicite `text`.
+
+Les types de champs disponibles sont :
+
+- `{{HTMLElement("input/button", "button")}}` : un bouton sans comportement défini.
+- `{{HTMLElement("input/checkbox", "checkbox")}}` : une case à cocher qui permet de sélectionner/déselectionner une valeur
+- `{{HTMLElement("input/color", "color")}}` : {{HTMLVersionInline("5")}} un contrôle qui permet de définir une couleur.
+- `{{HTMLElement("input/date", "date")}}` : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir une date (composé d'un jour,  d'un mois et d'une année).
+- `{{HTMLElement("input/datetime-local", "datetime-local")}}` : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir une date et une heure (sans fuseau horaire).
+- `{{HTMLElement("input/email", "email")}}` : {{HTMLVersionInline("5")}} un champ qui permet de saisir une adresse éléctronique.
+- `{{HTMLElement("input/file", "file")}}` : un contrôle qui permet de sélectionner un fichier. L'attribut **`accept`** définit les types de fichiers qui peuvent être sélectionnés.
+- `{{HTMLElement("input/hidden", "hidden")}}` : un contrôle qui n'est pas affiché mais dont la valeur est envoyée au serveur.
+- `{{HTMLElement("input/image", "image")}}` : un bouton graphique d'envoi du formulaire. L'attribut `src` doit être défini avec la source de l'image et l'attribut `alt` doit être défini avec le texte alternatif. Les attributs `height` et `width` permettent de définir la taille de l'image en pixels.
+- `{{HTMLElement("input/month", "month")}}` : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir un mois et une année (sans fuseau horaire).
+- `{{HTMLElement("input/number", "number")}}` : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir un nombre.
+- `{{HTMLElement("input/password", "password")}}` : un champ texte sur une seule ligne dont la valeur est masquée. Les attributs `maxlength` et `minlength` définissent la taille maximale et minimale de la valeur à saisir dans le champ.
+
+  > **Note :** Tout formulaire comportant des données sensibles doit être servi via HTTPS. Les navigateurs alertent les utilisateurs lorsque les formulaires avec de telles données sont uniquement disponibles via HTTP.
+
+- `{{HTMLElement("input/radio", "radio")}}` : un bouton radio qui permet de sélectionner une seule valeur parmi un groupe de différentes valeurs.
+- `{{HTMLElement("input/range", "range")}}` : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir un nombre dont la valeur exacte n'est pas importante.
+- `{{HTMLElement("input/reset", "reset")}}` : un bouton qui réinitialise le contenu du formulaire avec les valeurs par défaut.
+- `{{HTMLElement("input/search", "search")}}` : {{HTMLVersionInline("5")}} un champ texte sur une ligne pour des termes de recherche. Les sauts de ligne sont automatiquement retirés.
+- `{{HTMLElement("input/submit", "submit")}}` : un bouton qui envoie le formulaire.
+- `{{HTMLElement("input/tel", "tel")}}` : {{HTMLVersionInline("5")}} un contrôle pour saisir un numéro de téléphone.
+- `{{HTMLElement("input/text", "text")}}` : un champ texte sur une seule ligne. Les sauts de ligne sont automatiquement retirés.
+- `{{HTMLElement("input/time", "time")}}` : {{HTMLVersionInline("5")}} A control for entering a time value with no time zone.
+- `{{HTMLElement("input/url", "url")}}` : {{HTMLVersionInline("5")}} un champ permettant de saisir une URL.
+- `{{HTMLElement("input/week", "week")}}` : {{HTMLVersionInline("5")}} un contrôle permettant de saisir une date représentée par un numéro de semaine et une année (sans indication de fuseau horaire).
+
+Certains types sont désormais obsolètes :
+
+- `{{HTMLElement("input/datetime", "datetime")}}` : {{HTMLVersionInline("5")}} {{deprecated_inline}} {{obsolete_inline}} un contrôle pour saisir une date et une heure selon un fuseau horaire UTC. **Cette fonctionnalité a été [retirée du standard WHATWG HTML.](https://github.com/whatwg/html/issues/336)**
+
+## Attributs
+
+L'élément `` est l'un des éléments HTML les plus complexes et puissants et il peut utiliser de nombreux types et attributs. Chaque élément `` étant basé sur l'interface DOM {{domxref("HTMLInputElement")}}, ils partagent tous, techniquement, les mêmes attributs. Toutefois, certains attributs ne fonctionnent que pour certains types de champs et certains attributs fonctionnent spécifiquement selon le type de champ.
 
-
{{htmlattrdef("autocomplete")}}

+Sur cette page, vous trouverez des informations sur les attributs communs à l'ensemble des types d'éléments `` ainsi que la description de quelques attributs notables.
 
-
Une chaîne de caractères qui décrit si le champ doit fournir des fonctionnalités d'autocomplétion. Cette autocomplétion peut notamment provenir des valeurs précédemment saisies dans le champ. D'autres méthodes plus complexes peuvent être utilisées : un navigateur pourra par exemple interagir avec la liste des contacts de l'appareil afin de proposer l'autocomplétion pour les adresses électroniques. Voir {{SectionOnPage("/fr/docs/Web/HTML/Attributs/autocomplete", "Valeurs")}} pour les valeurs qui peuvent être utilisées avec cet attribut.

+### Attributs communs à l'ensemble des types
 
-
Cet attribut n'aura aucun effet sur les champs qui ne renvoient pas de valeurs numériques ou de textes (les champs checkbox ou image par exemple).

+This section lists the attributes which are used by all form `` types. Attributes that are unique to particular input types—or attributes which are common to all input types but have special behaviors when used on a given input type—are instead documented on those types' pages.
 
-
Pour plus d'informations, voir la page de documentation sur l'attribut HTML autocomplete.

+> **Note :** Les éléments `` peuvent bien entendu utiliser les [attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-
{{htmlattrdef("autofocus")}}

+| Attribut                           | Description                                                                                                                                                                                                                                         |
+| ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `{{anch("autocomplete")}}` | Une chaîne de caractères qui indique le type d'autocomplétion à utiliser.                                                                                                                                                                           |
+| `{{anch("autofocus")}}`     | Un attribut booléen qui passe le focus sur le champ lorsque le formulaire est affiché.                                                                                                                                                              |
+| `{{anch("disabled")}}`     | Un attribut booléen qui indique si le champ doit être désactivé.                                                                                                                                                                                    |
+| `{{anch("form")}}`             | L'identifiant du formulaire (la valeur de l'attribut `id` de l'élément {{HTMLElement("form")}}) auquel le champ est rattaché. Si cet attribut est absent, le champ sera rattaché au formulaire le plus proche qui le contient s'il existe. |
+| `{{anch("list")}}`             | L'identifiant (valeur de l'attribut `id`) d'un élément {{HTMLElement("datalist")}} qui fournit une liste de suggestions.                                                                                                                   |
+| `{{anch("name")}}`             | Le nom du champ qui sera rattaché à la donnée envoyée via le formulaire.                                                                                                                                                                            |
+| `{{anch("readonly")}}`     | Un attribut booléen qui indique si le champ peut être édité ou non.                                                                                                                                                                                 |
+| `{{anch("required")}}`     | Un attribut booléen qui indique que le champ doit être renseigné avant de pouvoir envoyer le formulaire.                                                                                                                                            |
+| `{{anch("tabindex")}}`     | Une valeur numérique qui indique à l'agent utilisateur l'ordre selon lequel naviguer au clavier grâce à la touche Tab.                                                                                                                   |
+| `{{anch("type")}}`             | Une chaîne de caractère qui indique l[e type de champ représenté par l'élément ``](#types).                                                                                                                                                  |
+| `{{anch("value")}}`         | La valeur du champ.                                                                                                                                                                                                                                 |
 
-
Un attribut booléen qui, lorsqu'il est présent, indique que le champ doit recevoir le focus lorsque le chargement de la page est terminé (ou que la boîte de dialogue ({{HTMLElement("dialog")}}) contenant l'élément est affichée).

+#### {{htmlattrdef("autocomplete")}}
 
-

-
Note : Un élément ayant l'attribut autofocus peut avoir le focus avant que l'évènement {{domxref("DOMContentLoaded")}} soit déclenché.

-

+Une chaîne de caractères qui décrit si le champ doit fournir des fonctionnalités d'autocomplétion. Cette autocomplétion peut notamment provenir des valeurs précédemment saisies dans le champ. D'autres méthodes plus complexes peuvent être utilisées : un navigateur pourra par exemple interagir avec la liste des contacts de l'appareil afin de proposer l'autocomplétion pour les adresses électroniques. Voir {{SectionOnPage("/fr/docs/Web/HTML/Attributs/autocomplete", "Valeurs")}} pour les valeurs qui peuvent être utilisées avec cet attribut.
 
-
Seul un élément du document peut avoir l'attribut autofocus. Il n'est pas possible d'utiliser l'attribut autofocus sur les champs de type hidden car ces derniers, masqués, ne peuvent pas avoir le focus.

+Cet attribut n'aura aucun effet sur les champs qui ne renvoient pas de valeurs numériques ou de textes (les champs `checkbox` ou `image` par exemple).
 
-

-
Attention : Le focus automatique sur un champ de formulaire peut être source de confusion, notamment pour les personnes qui utilisent des lecteurs d'écran. En effet, lorsque autofocus est utilisé, les lecteurs d'écran « téléportent » l'utilisateur sur le contrôle du champ, sans aucun avertissement.

-

+Pour plus d'informations, voir [la page de documentation sur l'attribut HTML `autocomplete`](/fr/docs/Web/HTML/Attributs/autocomplete).
 
-
{{htmlattrdef("disabled")}}

+#### {{htmlattrdef("autofocus")}}
 
-
Un attribut booléen qui, lorsqu'il est présent, indique que l'utilisateur ne devrait pas pouvoir interagir avec le champ. Les champs désactivés sont généralement affichés avec une couleur plus pale et/ou avec d'autres indications.

+Un attribut booléen qui, lorsqu'il est présent, indique que le champ doit recevoir le focus lorsque le chargement de la page est terminé (ou que la boîte de dialogue ({{HTMLElement("dialog")}}) contenant l'élément est affichée).
 
-
Les champs désactivés avec cet attribut ne reçoivent pas l'évènement {{event("click")}} et ne sont pas envoyés avec le formulaire.

+> **Note :** Un élément ayant l'attribut `autofocus` peut avoir le focus avant que l'évènement {{domxref("DOMContentLoaded")}} soit déclenché.
 
-

-
Note : Bien que ce ne soit pas indiqué dans la spécification, Firefox conserver l'état désactivé des champs, y compris si cet état a été obtenu dynamiquement, lors des rechargements de la page. L'attribut {{htmlattrxref("autocomplete","input")}} pourra être utilisé afin de contrôler cette fonctionnalité.

-

+Seul un élément du document peut avoir l'attribut `autofocus`. Il n'est pas possible d'utiliser l'attribut `autofocus` sur les champs de type `hidden` car ces derniers, masqués, ne peuvent pas avoir le focus.
 
-
{{htmlattrdef("form")}}

+> **Attention :** Le focus automatique sur un champ de formulaire peut être source de confusion, notamment pour les personnes qui utilisent des lecteurs d'écran. En effet, lorsque `autofocus` est utilisé, les lecteurs d'écran « téléportent » l'utilisateur sur le contrôle du champ, sans aucun avertissement.
 
-
Une chaîne de caractères qui indique l'élément {{HTMLElement("form")}} auquel le champ est associé (on parle de « formulaire propriétaire »). La valeur de cette chaîne de caractères doit correspondre à la valeur de l'attribut {{htmlattrxref("id")}} d'un élément <form> du document. Si cet attribut n'est pas utilisé, l'élément <input> est rattaché au formulaire le plus proche qui le contient (si un tel formulaire existe).

+#### {{htmlattrdef("disabled")}}
 
-
Grâce à cet attribut, on peut placer un champ n'importe où dans le document et avoir un lien entre le champ et un formulaire situé ailleurs.

+Un attribut booléen qui, lorsqu'il est présent, indique que l'utilisateur ne devrait pas pouvoir interagir avec le champ. Les champs désactivés sont généralement affichés avec une couleur plus pale et/ou avec d'autres indications.
 
-

-
Note : Un champ ne peut être associé qu'à un seul formulaire.

-

+Les champs désactivés avec cet attribut ne reçoivent pas l'évènement {{event("click")}} et ne sont pas envoyés avec le formulaire.
 
-
{{htmlattrdef("list")}}

+> **Note :** Bien que ce ne soit pas indiqué dans la spécification, Firefox conserver l'état désactivé des champs, [y compris si cet état a été obtenu dynamiquement](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing), lors des rechargements de la page. L'attribut {{htmlattrxref("autocomplete","input")}} pourra être utilisé afin de contrôler cette fonctionnalité.
 
-
Cet attribut est une chaîne de caractères qui correspond à l'identifiant ({{domxref("Element.id", "id")}}) d'un élément {{HTMLElement("datalist")}} du document et qui fournit une liste de valeurs à suggérer à l'utilisateur pour ce champ. Les valeurs de cette liste qui ne sont pas compatibles avec ce type de champ ne seront pas incluses dans les suggestions.

+#### {{htmlattrdef("form")}}
 
-
L'attribut list n'est pas pris en charge pour les types hidden, password, checkbox, radio, file ou pour les boutons.

+Une chaîne de caractères qui indique l'élément {{HTMLElement("form")}} auquel le champ est associé (on parle de « formulaire propriétaire »). La valeur de cette chaîne de caractères doit correspondre à la valeur de l'attribut {{htmlattrxref("id")}} d'un élément `
` du document. Si cet attribut n'est pas utilisé, l'élément `` est rattaché au formulaire le plus proche qui le contient (si un tel formulaire existe).
 
-
{{htmlattrdef("name")}}

+Grâce à cet attribut, on peut placer un champ n'importe où dans le document et avoir un lien entre le champ et un formulaire situé ailleurs.
 
-
Une chaîne de caractères qui définit le nom associé au champ. Ce nom sera envoyé avec la valeur lors de l'envoi du formulaire.

+> **Note :** Un champ ne peut être associé qu'à un seul formulaire.
 
-
Lorsqu'un champ a un nom, cette valeur devient une propriété de  {{domxref("HTMLFormElement.elements")}} qu'on pourra utiliser en JavaScript (ex. si on a un attribut name qui vaut hat-size :

+#### {{htmlattrdef("list")}}
 
-
let form = document.querySelector("form");
+Cet attribut est une chaîne de caractères qui correspond à l'identifiant ({{domxref("Element.id", "id")}}) d'un élément {{HTMLElement("datalist")}} du document et qui fournit une liste de valeurs à suggérer à l'utilisateur pour ce champ. Les valeurs de cette liste qui ne sont pas compatibles avec ce type de champ ne seront pas incluses dans les suggestions.
+
+L'attribut `list` n'est pas pris en charge pour les types `hidden`, `password`, `checkbox`, `radio`, `file` ou pour les boutons.
+
+#### {{htmlattrdef("name")}}
+
+Une chaîne de caractères qui définit le nom associé au champ. Ce nom sera envoyé avec la valeur lors de l'envoi du formulaire.
+
+Lorsqu'un champ a un nom, cette valeur devient une propriété de  {{domxref("HTMLFormElement.elements")}} qu'on pourra utiliser en JavaScript (ex. si on a un attribut `name` qui vaut `hat-size` :
+
+```js
+let form = document.querySelector("form");
 let guestName = form.elements.guest;
 let hatSize = form.elements["hat-size"];
-

+```
+
+Avec ce code, la variable `guestName` correspondra à l'élément {{domxref("HTMLInputElement")}} du champ `guest` et `hatSize` à l'objet pour le champ `hat-size`.
+
+> **Attention :** Il est préférable de ne pas utiliser de valeurs pour `name` qui correspondent à une propriété native de l'objet du DOM car cela surchargerait la propriété préexistante avec une référence au champ concerné.
 
-
Avec ce code, la variable guestName correspondra à l'élément {{domxref("HTMLInputElement")}} du champ guest et hatSize à l'objet pour le champ hat-size.

+Le nom `_charset_` possède une signification spéciale. Si cette valeur est utilisée comme nom pour un élément `` de type [`hidden`](/fr/docs/Web/HTML/Element/Input/hidden), la valeur du champ (l'attribut `value`) sera automatiquememnt renseignée par l'agent utilisateur et correspondra à l'encodage utilisé pour envoyer le formulaire.
 
-

-
Attention : Il est préférable de ne pas utiliser de valeurs pour name qui correspondent à une propriété native de l'objet du DOM car cela surchargerait la propriété préexistante avec une référence au champ concerné.

-

+Si l'attribut `name` n'est pas présent ou qu'il est vide, la valeur du champ ne sera pas envoyée avec le formulaire.
 
-
Le nom _charset_ possède une signification spéciale. Si cette valeur est utilisée comme nom pour un élément <input> de type hidden, la valeur du champ (l'attribut value) sera automatiquememnt renseignée par l'agent utilisateur et correspondra à l'encodage utilisé pour envoyer le formulaire.

+> **Note :** Pour certaines raisons historiques, le nom `isindex` n'est pas autorisé. Pour en savoir plus, voir la section [Nommage des contrôles de formulaire : l'attribut `name`](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-name) de la spécification HTML.
 
-
Si l'attribut name n'est pas présent ou qu'il est vide, la valeur du champ ne sera pas envoyée avec le formulaire.

+#### {{htmlattrdef("readonly")}}
 
-

-
Note : Pour certaines raisons historiques, le nom isindex n'est pas autorisé. Pour en savoir plus, voir la section Nommage des contrôles de formulaire : l'attribut name de la spécification HTML.

-

+Un attribut booléen qui, lorsqu'il est présent, indique que l'utilisateur ne devrait pas pouvoir éditer la valeur du champ.
 
-
{{htmlattrdef("readonly")}}

+`disabled` et `readonly` sont bien différents : `readonly` permet d'avoir un contrôle fonctionnel mais non éditable alors que les champs `disabled` ne fonctionnent pas comme des contrôles.
 
-
Un attribut booléen qui, lorsqu'il est présent, indique que l'utilisateur ne devrait pas pouvoir éditer la valeur du champ.

+> **Note :** L'attribut `required` n'est pas autorisé sur les éléments `` avec l'attribut `readonly`. Seuls les champs textuels peuvent être mis en lecture seule. En effet, pour les autres contrôles (ex. les case à cocher et les boutons radio), il n'y a pas de réelle différence entre l'application de `readonly` ou de `disabled`.
 
-
disabled et readonly sont bien différents : readonly permet d'avoir un contrôle fonctionnel mais non éditable alors que les champs disabled ne fonctionnent pas comme des contrôles.

+#### {{htmlattrdef("required")}}
 
-

-
Note : L'attribut required n'est pas autorisé sur les éléments <input> avec l'attribut readonly. Seuls les champs textuels peuvent être mis en lecture seule. En effet, pour les autres contrôles (ex. les case à cocher et les boutons radio), il n'y a pas de réelle différence entre l'application de readonly ou de disabled.

-

+Un attribut booléen qui, lorsqu'il est présent, indique que l'utilisateur doit fournir une valeur pour ce champ avant de pouvoir envoyer le formulaire. L'attribut `required` est pris en charge pour tous les types d'éléments `` exceptés :
 
-
{{htmlattrdef("required")}}

+- [`color`](/fr/docs/Web/HTML/Element/input/color)
+- [`hidden`](/fr/docs/Web/HTML/Element/input/hidden)
+- [`range`](/fr/docs/Web/HTML/Element/input/range)
+- [`submit`](/fr/docs/Web/HTML/Element/input/submit)
+- [`image`](/fr/docs/Web/HTML/Element/input/image)
+- [`reset`](/fr/docs/Web/HTML/Element/input/reset)
+- [`button`](/fr/docs/Web/HTML/Element/input/button)
 
-
Un attribut booléen qui, lorsqu'il est présent, indique que l'utilisateur doit fournir une valeur pour ce champ avant de pouvoir envoyer le formulaire. L'attribut required est pris en charge pour tous les types d'éléments <input> exceptés :

+Lorsqu'un champ contient l'attribut, la pseudo-classe CSS {{cssxref(":required")}} lui est appliqué. À l'inverse, les champs qui n'ont pas d'attribut `required` auront la pseudo-classe {{cssxref(":optional")}} appliquée (cela ne s'applique pas aux types de champ qui ne prennent pas en charge `require`).
 
-

-
-

+> **Note :** Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut `required` n'aura pas d'effet sur les champs ayant également l'attribut {{htmlattrxref("readonly", "input/text")}}.
 
-
Lorsqu'un champ contient l'attribut, la pseudo-classe CSS {{cssxref(":required")}} lui est appliqué. À l'inverse, les champs qui n'ont pas d'attribut required auront la pseudo-classe {{cssxref(":optional")}} appliquée (cela ne s'applique pas aux types de champ qui ne prennent pas en charge require).

+#### {{htmlattrdef("tabindex")}}
 
-

-
Note : Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut required n'aura pas d'effet sur les champs ayant également l'attribut {{htmlattrxref("readonly", "input/text")}}.

-

+Une valeur nnumérique qui définit si le champ peut recevoir le focus via la navigation au clavier (en navigant avec la touche Tab) et la façon dont l'élément s'inscrit dans l'ordre de la navigation au clavier.
 
-
{{htmlattrdef("tabindex")}}

+Les valeurs de `tabindex` auront un sens différents selon leur signe :
 
-
Une valeur nnumérique qui définit si le champ peut recevoir le focus via la navigation au clavier (en navigant avec la touche Tab) et la façon dont l'élément s'inscrit dans l'ordre de la navigation au clavier.

+- Lorsque `tabindex` est une valeur négative, cela indique que l'élément peut recevoir le focus de la part de l'utilisateur mais sans utiliser la navigation séquentielle au clavier. Il est recommandé de toujours utiliser une valeur de `-1` dans ce cas.
+- Lorsque `tabindex` est nul, cela indique que l'élément peut recevoir le focus et peut être accessible via la navigation au clavier mais que l'ordre de navigation est laissé à la discrétion de l'agent utilisateur. C'est généralement la meilleure valeur à utiliser.
+- Lorsque `tabindex` est une valeur positive, cette dernière définit l'ordre de l'élément dans la navigation au clavier. Chaque fois que l'utilisateur appuie sur la touche
 
-
Les valeurs de tabindex auront un sens différents selon leur signe :

+  Tab
 
-
    
- 
  • Lorsque tabindex est une valeur négative, cela indique que l'élément peut recevoir le focus de la part de l'utilisateur mais sans utiliser la navigation séquentielle au clavier. Il est recommandé de toujours utiliser une valeur de -1 dans ce cas.
    • 
- 
  • Lorsque tabindex est nul, cela indique que l'élément peut recevoir le focus et peut être accessible via la navigation au clavier mais que l'ordre de navigation est laissé à la discrétion de l'agent utilisateur. C'est généralement la meilleure valeur à utiliser.
    • 
- 
  • Lorsque tabindex est une valeur positive, cette dernière définit l'ordre de l'élément dans la navigation au clavier. Chaque fois que l'utilisateur appuie sur la touche Tab, le focus passe à un élément qui possède un attribut tabindex plus élevé. La plupart des plateformes disposent également d'une fonctionnalité pour « reculer » dans la navigation au clavier, généralement via la combinaison de touches Shift + Tab.
    • 
-

+  , le focus passe à un élément qui possède un attribut `tabindex` plus élevé. La plupart des plateformes disposent également d'une fonctionnalité pour « reculer » dans la navigation au clavier, généralement via la combinaison de touches
 
-
Si cet attribut est absent ou n'est pas un entier valide, ce sera à l'agent utilisateur de respecter les conventions de la plateforme sous-jacente pour la navigation au clavier et la gestion du focus.

+  Shift
 
-
{{htmlattrdef("type")}}

+  \+
 
-
Une chaîne de caractères qui indique le type de contrôle à afficher. On pourra par exemple avoir une case à cocher en utilisant la valeur checkbox. Lorsque cet attribut est absent ou qu'une valeur inconnue est utilisée, la valeur par défaut sera text et le contrôle créé permettra de saisir un texte.

+  Tab
 
-
Les valeurs autorisées pour cet attribut sont présentées plus haut.

+  .
 
-
{{htmlattrdef("value")}}

+Si cet attribut est absent ou n'est pas un entier valide, ce sera à l'agent utilisateur de respecter les conventions de la plateforme sous-jacente pour la navigation au clavier et la gestion du focus.
 
-
La valeur du champ. Lorsque cet attribut est indiqué en HTML, il correspond à la valeur initiale du champ qui peut ensuite être modifié par l'utilisateur. Cette valeur peut également être récupérée et modifiée en JavaScript grâce à la propriété value de l'objet {{domxref("HTMLInputElement")}}. Cet attribut est toujours optionnel.

+#### {{htmlattrdef("type")}}
 
-

-
Note : À la différence des autres contrôles, les cases à cocher et les boutons radio sont uniquemnet envoyés via le formulaire lorsque l'attribut checked est vrai. Dans ce cas, l'attribut value sera la valeur associée au champ.

+Une chaîne de caractères qui indique le type de contrôle à afficher. On pourra par exemple avoir une case à cocher en utilisant la valeur `checkbox`. Lorsque cet attribut est absent ou qu'une valeur inconnue est utilisée, la valeur par défaut sera `text` et le contrôle créé permettra de saisir un texte.
 
-
Aussi, si on a une case à cocher dont l'attribut name vaut status, que l'attribut value vaut active et que la case est cochée, les données envoyées au formulaire contiendront status=active. Si la case à cocher n'est pas cochée, ses données ne seront pas envoyées avec le formulaire. Pour les cases à cocher et les boutons radio, la valeur par défaut de l'attribut value est on.

-

+Les valeurs autorisées pour cet attribut sont [présentées plus haut](#types).
 
-
Exemples

+#### {{htmlattrdef("value")}}
 
-
Exemple simple

+La valeur du champ. Lorsque cet attribut est indiqué en HTML, il correspond à la valeur initiale du champ qui peut ensuite être modifié par l'utilisateur. Cette valeur peut également être récupérée et modifiée en JavaScript grâce à la propriété `value` de l'objet {{domxref("HTMLInputElement")}}. Cet attribut est toujours optionnel.
 
-
HTML

+> **Note :** À la différence des autres contrôles, les cases à cocher et les boutons radio sont uniquemnet envoyés via le formulaire lorsque l'attribut `checked` est vrai. Dans ce cas, l'attribut `value` sera la valeur associée au champ.
+>
+> Aussi, si on a une case à cocher dont l'attribut `name` vaut `status`, que l'attribut `value` vaut `active` et que la case est cochée, les données envoyées au formulaire contiendront `status=active`. Si la case à cocher n'est pas cochée, ses données ne seront pas envoyées avec le formulaire. Pour les cases à cocher et les boutons radio, la valeur par défaut de l'attribut `value` est `on`.
 
-
<p>Un élément de saisie simple </p>
-<input type="text" value="Saisir un texte ici">
-

+## Exemples
 
-
Résultat

+### Exemple simple
 
-
{{EmbedLiveSample('Exemple_simple', '', '100')}}

+#### HTML
 
-
Un scénario fréquent

+```html
+
Un élément de saisie simple 

+
+```
 
-
HTML

+#### Résultat
 
-
<p>Un formulaire avec différents types de champs</p>
-<form action="getform.php" method="get">
-  <label>Prénom : <input type="text"></label><br>
-  <label>Nom : <input type="text"></label><br>
-  <label>Adresse email : <input type="email"></label><br>
-  <input type="submit" value="Envoyer">
-</form>
-

+{{EmbedLiveSample('Exemple_simple', '', '100')}}
 
-
Résultat

+### Un scénario fréquent
 
-
{{EmbedLiveSample('Un_scénario_fréquent', '', '200')}}

+#### HTML
 
-
Localisation

+```html
+
Un formulaire avec différents types de champs

+
+  

+  

+  

+  
+

+```
 
-
Pour certains types d'éléments <input>, les valeurs saisies autorisées dépendent de la locale utilisée. Ainsi, dans certaines locales, 1,000.00 est un nombre valide alors que dans d'autres, il faudra avoir saisi 1.000,00 pour exprimer le même nombre.

+#### Résultat
 
-
Firefox utilise la méthode heuristique suivante afin de déterminer la locale pour laquelle valider la saisie de l'utilisateur (au moins dans le cas de type="number"):

+{{EmbedLiveSample('Un_scénario_fréquent', '', '200')}}
 
-
+## Localisation
 
-
Accessibilité

+Pour certains types d'éléments ``, les valeurs saisies autorisées dépendent de la locale utilisée. Ainsi, dans certaines locales, 1,000.00 est un nombre valide alors que dans d'autres, il faudra avoir saisi 1.000,00 pour exprimer le même nombre.
 
-
Utilisation de libellés

+Firefox utilise la méthode heuristique suivante afin de déterminer la locale pour laquelle valider la saisie de l'utilisateur (au moins dans le cas de `type="number"`):
 
-
Lorsqu'on utilise des champs de formulaire, il est recommandé d'ajouter des libellés pour chacun de ces champs. Ainsi, les personnes qui utilisent des outils d'assistance pourront connaître la signification du champ.

+- Utiliser la langue définie par l'attribut `lang`/`xml:lang` de l'élément ou par celui de ses parents.
+- Sinon utiliser la langue définie dans l'en-tête HTTP {{httpheader("Content-Language")}}
+- Sinon, utiliser la locale du navigateur
 
-
Dans l'exemple suivant, on illustre comment associer un élément <label> avec un élément <input>. Pour ce faire, on ajoutera un identifiant (un attribut id) à l'élément <input> et on référencera cet identifiant via l'attribut for de l'élément <label>.

+## Accessibilité
 
-
<label for="ptipois">Aimez-vous les petits-pois ?</label>
-<input type="checkbox" name="petitspois" id="ptipois">
-

+### Utilisation de libellés
 
-
Dimensionnement - taille

+Lorsqu'on utilise des champs de formulaire, il est recommandé d'ajouter des libellés pour chacun de ces champs. Ainsi, les personnes qui utilisent des outils d'assistance pourront connaître la signification du champ.
 
-
Les éléments interactifs tels que les champs de formulaire doivent fournir une surface suffisamment grande pour qu'il soit facile de les activer. Cela facilitera la tâche à une variété de personnes : celles qui ont des problèmes moteur, celles qui utilisent des dispositifs de pointage peu précis (doigt ou stylet). La taille interactive minimale recommandée est de 44x44 pixels CSS.

+Dans l'exemple suivant, on illustre comment associer un élément `