From 8829a7c9eb82f180bac76ed5836aaef95be209a1 Mon Sep 17 00:00:00 2001 From: julieng Date: Wed, 13 Oct 2021 07:12:55 +0200 Subject: move *.html to *.md --- files/fr/web/html/applying_color/index.html | 509 -------------- files/fr/web/html/applying_color/index.md | 509 ++++++++++++++ files/fr/web/html/attributes/accept/index.html | 163 ----- files/fr/web/html/attributes/accept/index.md | 163 +++++ .../fr/web/html/attributes/autocomplete/index.html | 269 -------- files/fr/web/html/attributes/autocomplete/index.md | 269 ++++++++ files/fr/web/html/attributes/capture/index.html | 90 --- files/fr/web/html/attributes/capture/index.md | 90 +++ .../fr/web/html/attributes/crossorigin/index.html | 107 --- files/fr/web/html/attributes/crossorigin/index.md | 107 +++ files/fr/web/html/attributes/disabled/index.html | 139 ---- files/fr/web/html/attributes/disabled/index.md | 139 ++++ .../web/html/attributes/elementtiming/index.html | 65 -- .../fr/web/html/attributes/elementtiming/index.md | 65 ++ files/fr/web/html/attributes/for/index.html | 70 -- files/fr/web/html/attributes/for/index.md | 70 ++ files/fr/web/html/attributes/index.html | 765 --------------------- files/fr/web/html/attributes/index.md | 765 +++++++++++++++++++++ files/fr/web/html/attributes/max/index.html | 159 ----- files/fr/web/html/attributes/max/index.md | 159 +++++ files/fr/web/html/attributes/maxlength/index.html | 65 -- files/fr/web/html/attributes/maxlength/index.md | 65 ++ files/fr/web/html/attributes/min/index.html | 156 ----- files/fr/web/html/attributes/min/index.md | 156 +++++ files/fr/web/html/attributes/minlength/index.html | 76 -- files/fr/web/html/attributes/minlength/index.md | 76 ++ files/fr/web/html/attributes/multiple/index.html | 180 ----- files/fr/web/html/attributes/multiple/index.md | 180 +++++ files/fr/web/html/attributes/pattern/index.html | 153 ----- files/fr/web/html/attributes/pattern/index.md | 153 +++++ files/fr/web/html/attributes/readonly/index.html | 107 --- files/fr/web/html/attributes/readonly/index.md | 107 +++ files/fr/web/html/attributes/rel/index.html | 427 ------------ files/fr/web/html/attributes/rel/index.md | 427 ++++++++++++ files/fr/web/html/attributes/required/index.html | 101 --- files/fr/web/html/attributes/required/index.md | 101 +++ files/fr/web/html/attributes/size/index.html | 74 -- files/fr/web/html/attributes/size/index.md | 74 ++ files/fr/web/html/attributes/step/index.html | 133 ---- files/fr/web/html/attributes/step/index.md | 133 ++++ files/fr/web/html/block-level_elements/index.html | 128 ---- files/fr/web/html/block-level_elements/index.md | 128 ++++ files/fr/web/html/cors_enabled_image/index.html | 123 ---- files/fr/web/html/cors_enabled_image/index.md | 123 ++++ files/fr/web/html/date_and_time_formats/index.html | 469 ------------- files/fr/web/html/date_and_time_formats/index.md | 469 +++++++++++++ files/fr/web/html/element/a/index.html | 431 ------------ files/fr/web/html/element/a/index.md | 431 ++++++++++++ files/fr/web/html/element/abbr/index.html | 181 ----- files/fr/web/html/element/abbr/index.md | 181 +++++ files/fr/web/html/element/acronym/index.html | 70 -- files/fr/web/html/element/acronym/index.md | 70 ++ files/fr/web/html/element/address/index.html | 111 --- files/fr/web/html/element/address/index.md | 111 +++ files/fr/web/html/element/applet/index.html | 114 --- files/fr/web/html/element/applet/index.md | 114 +++ files/fr/web/html/element/area/index.html | 151 ---- files/fr/web/html/element/area/index.md | 151 ++++ files/fr/web/html/element/article/index.html | 120 ---- files/fr/web/html/element/article/index.md | 120 ++++ files/fr/web/html/element/aside/index.html | 102 --- files/fr/web/html/element/aside/index.md | 102 +++ files/fr/web/html/element/audio/index.html | 385 ----------- files/fr/web/html/element/audio/index.md | 385 +++++++++++ files/fr/web/html/element/b/index.html | 98 --- files/fr/web/html/element/b/index.md | 98 +++ files/fr/web/html/element/base/index.html | 111 --- files/fr/web/html/element/base/index.md | 111 +++ files/fr/web/html/element/basefont/index.html | 72 -- files/fr/web/html/element/basefont/index.md | 72 ++ files/fr/web/html/element/bdi/index.html | 173 ----- files/fr/web/html/element/bdi/index.md | 173 +++++ files/fr/web/html/element/bdo/index.html | 106 --- files/fr/web/html/element/bdo/index.md | 106 +++ files/fr/web/html/element/bgsound/index.html | 66 -- files/fr/web/html/element/bgsound/index.md | 66 ++ files/fr/web/html/element/big/index.html | 91 --- files/fr/web/html/element/big/index.md | 91 +++ files/fr/web/html/element/blink/index.html | 88 --- files/fr/web/html/element/blink/index.md | 88 +++ files/fr/web/html/element/blockquote/index.html | 107 --- files/fr/web/html/element/blockquote/index.md | 107 +++ files/fr/web/html/element/body/index.html | 144 ---- files/fr/web/html/element/body/index.md | 144 ++++ files/fr/web/html/element/br/index.html | 113 --- files/fr/web/html/element/br/index.md | 113 +++ files/fr/web/html/element/button/index.html | 205 ------ files/fr/web/html/element/button/index.md | 205 ++++++ files/fr/web/html/element/canvas/index.html | 179 ----- files/fr/web/html/element/canvas/index.md | 179 +++++ files/fr/web/html/element/caption/index.html | 146 ---- files/fr/web/html/element/caption/index.md | 146 ++++ files/fr/web/html/element/center/index.html | 73 -- files/fr/web/html/element/center/index.md | 73 ++ files/fr/web/html/element/cite/index.html | 121 ---- files/fr/web/html/element/cite/index.md | 121 ++++ files/fr/web/html/element/code/index.html | 93 --- files/fr/web/html/element/code/index.md | 93 +++ files/fr/web/html/element/col/index.html | 148 ---- files/fr/web/html/element/col/index.md | 148 ++++ files/fr/web/html/element/colgroup/index.html | 149 ---- files/fr/web/html/element/colgroup/index.md | 149 ++++ files/fr/web/html/element/content/index.html | 114 --- files/fr/web/html/element/content/index.md | 114 +++ files/fr/web/html/element/data/index.html | 85 --- files/fr/web/html/element/data/index.md | 85 +++ files/fr/web/html/element/datalist/index.html | 89 --- files/fr/web/html/element/datalist/index.md | 89 +++ files/fr/web/html/element/dd/index.html | 83 --- files/fr/web/html/element/dd/index.md | 83 +++ files/fr/web/html/element/del/index.html | 118 ---- files/fr/web/html/element/del/index.md | 118 ++++ files/fr/web/html/element/details/index.html | 251 ------- files/fr/web/html/element/details/index.md | 251 +++++++ files/fr/web/html/element/dfn/index.html | 177 ----- files/fr/web/html/element/dfn/index.md | 177 +++++ files/fr/web/html/element/dialog/index.html | 157 ----- files/fr/web/html/element/dialog/index.md | 157 +++++ files/fr/web/html/element/dir/index.html | 66 -- files/fr/web/html/element/dir/index.md | 66 ++ files/fr/web/html/element/div/index.html | 127 ---- files/fr/web/html/element/div/index.md | 127 ++++ files/fr/web/html/element/dl/index.html | 191 ----- files/fr/web/html/element/dl/index.md | 191 +++++ files/fr/web/html/element/dt/index.html | 79 --- files/fr/web/html/element/dt/index.md | 79 +++ files/fr/web/html/element/em/index.html | 99 --- files/fr/web/html/element/em/index.md | 99 +++ files/fr/web/html/element/embed/index.html | 103 --- files/fr/web/html/element/embed/index.md | 103 +++ files/fr/web/html/element/fieldset/index.html | 145 ---- files/fr/web/html/element/fieldset/index.md | 145 ++++ files/fr/web/html/element/figcaption/index.html | 71 -- files/fr/web/html/element/figcaption/index.md | 71 ++ files/fr/web/html/element/figure/index.html | 149 ---- files/fr/web/html/element/figure/index.md | 149 ++++ files/fr/web/html/element/font/index.html | 52 -- files/fr/web/html/element/font/index.md | 52 ++ files/fr/web/html/element/footer/index.html | 92 --- files/fr/web/html/element/footer/index.md | 92 +++ files/fr/web/html/element/form/index.html | 186 ----- files/fr/web/html/element/form/index.md | 186 +++++ files/fr/web/html/element/frame/index.html | 64 -- files/fr/web/html/element/frame/index.md | 64 ++ files/fr/web/html/element/frameset/index.html | 56 -- files/fr/web/html/element/frameset/index.md | 56 ++ files/fr/web/html/element/head/index.html | 123 ---- files/fr/web/html/element/head/index.md | 123 ++++ files/fr/web/html/element/header/index.html | 124 ---- files/fr/web/html/element/header/index.md | 124 ++++ .../web/html/element/heading_elements/index.html | 248 ------- .../fr/web/html/element/heading_elements/index.md | 248 +++++++ files/fr/web/html/element/hgroup/index.html | 141 ---- files/fr/web/html/element/hgroup/index.md | 141 ++++ files/fr/web/html/element/hr/index.html | 134 ---- files/fr/web/html/element/hr/index.md | 134 ++++ files/fr/web/html/element/html/index.html | 124 ---- files/fr/web/html/element/html/index.md | 124 ++++ files/fr/web/html/element/i/index.html | 122 ---- files/fr/web/html/element/i/index.md | 122 ++++ files/fr/web/html/element/iframe/index.html | 228 ------ files/fr/web/html/element/iframe/index.md | 228 ++++++ files/fr/web/html/element/image/index.html | 37 - files/fr/web/html/element/image/index.md | 37 + files/fr/web/html/element/img/index.html | 402 ----------- files/fr/web/html/element/img/index.md | 402 +++++++++++ files/fr/web/html/element/index.html | 130 ---- files/fr/web/html/element/index.md | 130 ++++ files/fr/web/html/element/input/button/index.html | 331 --------- files/fr/web/html/element/input/button/index.md | 331 +++++++++ .../fr/web/html/element/input/checkbox/index.html | 342 --------- files/fr/web/html/element/input/checkbox/index.md | 342 +++++++++ files/fr/web/html/element/input/color/index.html | 197 ------ files/fr/web/html/element/input/color/index.md | 197 ++++++ files/fr/web/html/element/input/date/index.html | 490 ------------- files/fr/web/html/element/input/date/index.md | 490 +++++++++++++ .../html/element/input/datetime-local/index.html | 591 ---------------- .../web/html/element/input/datetime-local/index.md | 591 ++++++++++++++++ .../fr/web/html/element/input/datetime/index.html | 24 - files/fr/web/html/element/input/datetime/index.md | 24 + files/fr/web/html/element/input/email/index.html | 427 ------------ files/fr/web/html/element/input/email/index.md | 427 ++++++++++++ files/fr/web/html/element/input/file/index.html | 492 ------------- files/fr/web/html/element/input/file/index.md | 492 +++++++++++++ files/fr/web/html/element/input/hidden/index.html | 230 ------- files/fr/web/html/element/input/hidden/index.md | 230 +++++++ files/fr/web/html/element/input/image/index.html | 395 ----------- files/fr/web/html/element/input/image/index.md | 395 +++++++++++ files/fr/web/html/element/input/index.html | 458 ------------ files/fr/web/html/element/input/index.md | 458 ++++++++++++ files/fr/web/html/element/input/month/index.html | 456 ------------ files/fr/web/html/element/input/month/index.md | 456 ++++++++++++ files/fr/web/html/element/input/number/index.html | 423 ------------ files/fr/web/html/element/input/number/index.md | 423 ++++++++++++ .../fr/web/html/element/input/password/index.html | 281 -------- files/fr/web/html/element/input/password/index.md | 281 ++++++++ files/fr/web/html/element/input/radio/index.html | 353 ---------- files/fr/web/html/element/input/radio/index.md | 353 ++++++++++ files/fr/web/html/element/input/range/index.html | 371 ---------- files/fr/web/html/element/input/range/index.md | 371 ++++++++++ files/fr/web/html/element/input/reset/index.html | 164 ----- files/fr/web/html/element/input/reset/index.md | 164 +++++ files/fr/web/html/element/input/search/index.html | 450 ------------ files/fr/web/html/element/input/search/index.md | 450 ++++++++++++ files/fr/web/html/element/input/submit/index.html | 271 -------- files/fr/web/html/element/input/submit/index.md | 271 ++++++++ files/fr/web/html/element/input/tel/index.html | 519 -------------- files/fr/web/html/element/input/tel/index.md | 519 ++++++++++++++ files/fr/web/html/element/input/text/index.html | 442 ------------ files/fr/web/html/element/input/text/index.md | 442 ++++++++++++ files/fr/web/html/element/input/time/index.html | 508 -------------- files/fr/web/html/element/input/time/index.md | 508 ++++++++++++++ files/fr/web/html/element/input/url/index.html | 388 ----------- files/fr/web/html/element/input/url/index.md | 388 +++++++++++ files/fr/web/html/element/input/week/index.html | 383 ----------- files/fr/web/html/element/input/week/index.md | 383 +++++++++++ files/fr/web/html/element/ins/index.html | 141 ---- files/fr/web/html/element/ins/index.md | 141 ++++ files/fr/web/html/element/kbd/index.html | 217 ------ files/fr/web/html/element/kbd/index.md | 217 ++++++ files/fr/web/html/element/keygen/index.html | 118 ---- files/fr/web/html/element/keygen/index.md | 118 ++++ files/fr/web/html/element/label/index.html | 206 ------ files/fr/web/html/element/label/index.md | 206 ++++++ files/fr/web/html/element/legend/index.html | 109 --- files/fr/web/html/element/legend/index.md | 109 +++ files/fr/web/html/element/li/index.html | 166 ----- files/fr/web/html/element/li/index.md | 166 +++++ files/fr/web/html/element/link/index.html | 306 --------- files/fr/web/html/element/link/index.md | 306 +++++++++ files/fr/web/html/element/main/index.html | 182 ----- files/fr/web/html/element/main/index.md | 182 +++++ files/fr/web/html/element/map/index.html | 121 ---- files/fr/web/html/element/map/index.md | 121 ++++ files/fr/web/html/element/mark/index.html | 155 ----- files/fr/web/html/element/mark/index.md | 155 +++++ files/fr/web/html/element/marquee/index.html | 125 ---- files/fr/web/html/element/marquee/index.md | 125 ++++ files/fr/web/html/element/menu/index.html | 215 ------ files/fr/web/html/element/menu/index.md | 215 ++++++ files/fr/web/html/element/menuitem/index.html | 153 ----- files/fr/web/html/element/menuitem/index.md | 153 +++++ files/fr/web/html/element/meta/index.html | 465 ------------- files/fr/web/html/element/meta/index.md | 465 +++++++++++++ files/fr/web/html/element/meter/index.html | 141 ---- files/fr/web/html/element/meter/index.md | 141 ++++ files/fr/web/html/element/nav/index.html | 109 --- files/fr/web/html/element/nav/index.md | 109 +++ files/fr/web/html/element/nobr/index.html | 50 -- files/fr/web/html/element/nobr/index.md | 50 ++ files/fr/web/html/element/noembed/index.html | 40 -- files/fr/web/html/element/noembed/index.md | 40 ++ files/fr/web/html/element/noframes/index.html | 80 --- files/fr/web/html/element/noframes/index.md | 80 +++ files/fr/web/html/element/noscript/index.html | 100 --- files/fr/web/html/element/noscript/index.md | 100 +++ files/fr/web/html/element/object/index.html | 158 ----- files/fr/web/html/element/object/index.md | 158 +++++ files/fr/web/html/element/ol/index.html | 219 ------ files/fr/web/html/element/ol/index.md | 219 ++++++ files/fr/web/html/element/optgroup/index.html | 123 ---- files/fr/web/html/element/optgroup/index.md | 123 ++++ files/fr/web/html/element/option/index.html | 116 ---- files/fr/web/html/element/option/index.md | 116 ++++ files/fr/web/html/element/output/index.html | 113 --- files/fr/web/html/element/output/index.md | 113 +++ files/fr/web/html/element/p/index.html | 134 ---- files/fr/web/html/element/p/index.md | 134 ++++ files/fr/web/html/element/param/index.html | 114 --- files/fr/web/html/element/param/index.md | 114 +++ files/fr/web/html/element/picture/index.html | 122 ---- files/fr/web/html/element/picture/index.md | 122 ++++ files/fr/web/html/element/plaintext/index.html | 47 -- files/fr/web/html/element/plaintext/index.md | 47 ++ files/fr/web/html/element/pre/index.html | 149 ---- files/fr/web/html/element/pre/index.md | 149 ++++ files/fr/web/html/element/progress/index.html | 114 --- files/fr/web/html/element/progress/index.md | 114 +++ files/fr/web/html/element/q/index.html | 114 --- files/fr/web/html/element/q/index.md | 114 +++ files/fr/web/html/element/rb/index.html | 138 ---- files/fr/web/html/element/rb/index.md | 138 ++++ files/fr/web/html/element/rp/index.html | 124 ---- files/fr/web/html/element/rp/index.md | 124 ++++ files/fr/web/html/element/rt/index.html | 93 --- files/fr/web/html/element/rt/index.md | 93 +++ files/fr/web/html/element/rtc/index.html | 118 ---- files/fr/web/html/element/rtc/index.md | 118 ++++ files/fr/web/html/element/ruby/index.html | 117 ---- files/fr/web/html/element/ruby/index.md | 117 ++++ files/fr/web/html/element/s/index.html | 129 ---- files/fr/web/html/element/s/index.md | 129 ++++ files/fr/web/html/element/samp/index.html | 163 ----- files/fr/web/html/element/samp/index.md | 163 +++++ files/fr/web/html/element/script/index.html | 203 ------ files/fr/web/html/element/script/index.md | 203 ++++++ files/fr/web/html/element/section/index.html | 119 ---- files/fr/web/html/element/section/index.md | 119 ++++ files/fr/web/html/element/select/index.html | 213 ------ files/fr/web/html/element/select/index.md | 213 ++++++ files/fr/web/html/element/shadow/index.html | 114 --- files/fr/web/html/element/shadow/index.md | 114 +++ files/fr/web/html/element/slot/index.html | 128 ---- files/fr/web/html/element/slot/index.md | 128 ++++ files/fr/web/html/element/small/index.html | 110 --- files/fr/web/html/element/small/index.md | 110 +++ files/fr/web/html/element/source/index.html | 142 ---- files/fr/web/html/element/source/index.md | 142 ++++ files/fr/web/html/element/spacer/index.html | 53 -- files/fr/web/html/element/spacer/index.md | 53 ++ files/fr/web/html/element/span/index.html | 105 --- files/fr/web/html/element/span/index.md | 105 +++ files/fr/web/html/element/strike/index.html | 82 --- files/fr/web/html/element/strike/index.md | 82 +++ files/fr/web/html/element/strong/index.html | 124 ---- files/fr/web/html/element/strong/index.md | 124 ++++ files/fr/web/html/element/style/index.html | 201 ------ files/fr/web/html/element/style/index.md | 201 ++++++ files/fr/web/html/element/sub/index.html | 132 ---- files/fr/web/html/element/sub/index.md | 132 ++++ files/fr/web/html/element/summary/index.html | 150 ---- files/fr/web/html/element/summary/index.md | 150 ++++ files/fr/web/html/element/sup/index.html | 152 ---- files/fr/web/html/element/sup/index.md | 152 ++++ files/fr/web/html/element/table/index.html | 382 ---------- files/fr/web/html/element/table/index.md | 382 ++++++++++ files/fr/web/html/element/tbody/index.html | 193 ------ files/fr/web/html/element/tbody/index.md | 193 ++++++ files/fr/web/html/element/td/index.html | 235 ------- files/fr/web/html/element/td/index.md | 235 +++++++ files/fr/web/html/element/template/index.html | 161 ----- files/fr/web/html/element/template/index.md | 161 +++++ files/fr/web/html/element/textarea/index.html | 240 ------- files/fr/web/html/element/textarea/index.md | 240 +++++++ files/fr/web/html/element/tfoot/index.html | 209 ------ files/fr/web/html/element/tfoot/index.md | 209 ++++++ files/fr/web/html/element/th/index.html | 192 ------ files/fr/web/html/element/th/index.md | 192 ++++++ files/fr/web/html/element/thead/index.html | 172 ----- files/fr/web/html/element/thead/index.md | 172 +++++ files/fr/web/html/element/time/index.html | 158 ----- files/fr/web/html/element/time/index.md | 158 +++++ files/fr/web/html/element/title/index.html | 129 ---- files/fr/web/html/element/title/index.md | 129 ++++ files/fr/web/html/element/tr/index.html | 532 -------------- files/fr/web/html/element/tr/index.md | 532 ++++++++++++++ files/fr/web/html/element/track/index.html | 170 ----- files/fr/web/html/element/track/index.md | 170 +++++ files/fr/web/html/element/tt/index.html | 151 ---- files/fr/web/html/element/tt/index.md | 151 ++++ files/fr/web/html/element/u/index.html | 189 ----- files/fr/web/html/element/u/index.md | 189 +++++ files/fr/web/html/element/ul/index.html | 191 ----- files/fr/web/html/element/ul/index.md | 191 +++++ files/fr/web/html/element/var/index.html | 136 ---- files/fr/web/html/element/var/index.md | 136 ++++ files/fr/web/html/element/video/index.html | 401 ----------- files/fr/web/html/element/video/index.md | 401 +++++++++++ files/fr/web/html/element/wbr/index.html | 109 --- files/fr/web/html/element/wbr/index.md | 109 +++ files/fr/web/html/element/xmp/index.html | 47 -- files/fr/web/html/element/xmp/index.md | 47 ++ .../html/global_attributes/accesskey/index.html | 140 ---- .../web/html/global_attributes/accesskey/index.md | 140 ++++ .../global_attributes/autocapitalize/index.html | 48 -- .../html/global_attributes/autocapitalize/index.md | 48 ++ .../html/global_attributes/autofocus/index.html | 32 - .../web/html/global_attributes/autofocus/index.md | 32 + .../fr/web/html/global_attributes/class/index.html | 60 -- files/fr/web/html/global_attributes/class/index.md | 60 ++ .../global_attributes/contenteditable/index.html | 82 --- .../global_attributes/contenteditable/index.md | 82 +++ .../html/global_attributes/contextmenu/index.html | 115 ---- .../html/global_attributes/contextmenu/index.md | 115 ++++ .../html/global_attributes/data-_star_/index.html | 80 --- .../html/global_attributes/data-_star_/index.md | 80 +++ files/fr/web/html/global_attributes/dir/index.html | 86 --- files/fr/web/html/global_attributes/dir/index.md | 86 +++ .../html/global_attributes/draggable/index.html | 70 -- .../web/html/global_attributes/draggable/index.md | 70 ++ .../html/global_attributes/enterkeyhint/index.html | 96 --- .../html/global_attributes/enterkeyhint/index.md | 96 +++ .../web/html/global_attributes/hidden/index.html | 66 -- .../fr/web/html/global_attributes/hidden/index.md | 66 ++ files/fr/web/html/global_attributes/id/index.html | 69 -- files/fr/web/html/global_attributes/id/index.md | 69 ++ files/fr/web/html/global_attributes/index.html | 195 ------ files/fr/web/html/global_attributes/index.md | 195 ++++++ .../html/global_attributes/inputmode/index.html | 64 -- .../web/html/global_attributes/inputmode/index.md | 64 ++ files/fr/web/html/global_attributes/is/index.html | 66 -- files/fr/web/html/global_attributes/is/index.md | 66 ++ .../web/html/global_attributes/itemid/index.html | 117 ---- .../fr/web/html/global_attributes/itemid/index.md | 117 ++++ .../web/html/global_attributes/itemprop/index.html | 437 ------------ .../web/html/global_attributes/itemprop/index.md | 437 ++++++++++++ .../web/html/global_attributes/itemref/index.html | 98 --- .../fr/web/html/global_attributes/itemref/index.md | 98 +++ .../html/global_attributes/itemscope/index.html | 226 ------ .../web/html/global_attributes/itemscope/index.md | 226 ++++++ .../web/html/global_attributes/itemtype/index.html | 112 --- .../web/html/global_attributes/itemtype/index.md | 112 +++ .../fr/web/html/global_attributes/lang/index.html | 83 --- files/fr/web/html/global_attributes/lang/index.md | 83 +++ .../fr/web/html/global_attributes/part/index.html | 25 - files/fr/web/html/global_attributes/part/index.md | 25 + .../fr/web/html/global_attributes/slot/index.html | 48 -- files/fr/web/html/global_attributes/slot/index.md | 48 ++ .../html/global_attributes/spellcheck/index.html | 150 ---- .../web/html/global_attributes/spellcheck/index.md | 150 ++++ .../fr/web/html/global_attributes/style/index.html | 89 --- files/fr/web/html/global_attributes/style/index.md | 89 +++ .../web/html/global_attributes/tabindex/index.html | 112 --- .../web/html/global_attributes/tabindex/index.md | 112 +++ .../fr/web/html/global_attributes/title/index.html | 126 ---- files/fr/web/html/global_attributes/title/index.md | 126 ++++ .../html/global_attributes/translate/index.html | 70 -- .../web/html/global_attributes/translate/index.md | 70 ++ .../x-ms-acceleratorkey/index.html | 46 -- .../global_attributes/x-ms-acceleratorkey/index.md | 46 ++ .../x-ms-format-detection/index.html | 61 -- .../x-ms-format-detection/index.md | 61 ++ files/fr/web/html/index.html | 98 --- files/fr/web/html/index.md | 98 +++ files/fr/web/html/index/index.html | 9 - files/fr/web/html/index/index.md | 9 + files/fr/web/html/inline_elements/index.html | 161 ----- files/fr/web/html/inline_elements/index.md | 161 +++++ .../fr/web/html/link_types/dns-prefetch/index.html | 17 - files/fr/web/html/link_types/dns-prefetch/index.md | 17 + files/fr/web/html/link_types/index.html | 342 --------- files/fr/web/html/link_types/index.md | 342 +++++++++ files/fr/web/html/link_types/manifest/index.html | 15 - files/fr/web/html/link_types/manifest/index.md | 15 + .../web/html/link_types/modulepreload/index.html | 15 - .../fr/web/html/link_types/modulepreload/index.md | 15 + files/fr/web/html/link_types/noopener/index.html | 23 - files/fr/web/html/link_types/noopener/index.md | 23 + files/fr/web/html/link_types/noreferrer/index.html | 15 - files/fr/web/html/link_types/noreferrer/index.md | 15 + files/fr/web/html/link_types/preconnect/index.html | 18 - files/fr/web/html/link_types/preconnect/index.md | 18 + files/fr/web/html/link_types/prefetch/index.html | 15 - files/fr/web/html/link_types/prefetch/index.md | 15 + files/fr/web/html/link_types/preload/index.html | 222 ------ files/fr/web/html/link_types/preload/index.md | 222 ++++++ files/fr/web/html/link_types/prerender/index.html | 15 - files/fr/web/html/link_types/prerender/index.md | 15 + files/fr/web/html/microdata/index.html | 169 ----- files/fr/web/html/microdata/index.md | 169 +++++ files/fr/web/html/microformats/index.html | 446 ------------ files/fr/web/html/microformats/index.md | 446 ++++++++++++ .../html/quirks_mode_and_standards_mode/index.html | 51 -- .../html/quirks_mode_and_standards_mode/index.md | 51 ++ files/fr/web/html/reference/index.html | 28 - files/fr/web/html/reference/index.md | 28 + files/fr/web/html/viewport_meta_tag/index.html | 100 --- files/fr/web/html/viewport_meta_tag/index.md | 100 +++ 458 files changed, 38286 insertions(+), 38286 deletions(-) delete mode 100644 files/fr/web/html/applying_color/index.html create mode 100644 files/fr/web/html/applying_color/index.md delete mode 100644 files/fr/web/html/attributes/accept/index.html create mode 100644 files/fr/web/html/attributes/accept/index.md delete mode 100644 files/fr/web/html/attributes/autocomplete/index.html create mode 100644 files/fr/web/html/attributes/autocomplete/index.md delete mode 100644 files/fr/web/html/attributes/capture/index.html create mode 100644 files/fr/web/html/attributes/capture/index.md delete mode 100644 files/fr/web/html/attributes/crossorigin/index.html create mode 100644 files/fr/web/html/attributes/crossorigin/index.md delete mode 100644 files/fr/web/html/attributes/disabled/index.html create mode 100644 files/fr/web/html/attributes/disabled/index.md delete mode 100644 files/fr/web/html/attributes/elementtiming/index.html create mode 100644 files/fr/web/html/attributes/elementtiming/index.md delete mode 100644 files/fr/web/html/attributes/for/index.html create mode 100644 files/fr/web/html/attributes/for/index.md delete mode 100644 files/fr/web/html/attributes/index.html create mode 100644 files/fr/web/html/attributes/index.md delete mode 100644 files/fr/web/html/attributes/max/index.html create mode 100644 files/fr/web/html/attributes/max/index.md delete mode 100644 files/fr/web/html/attributes/maxlength/index.html create mode 100644 files/fr/web/html/attributes/maxlength/index.md delete mode 100644 files/fr/web/html/attributes/min/index.html create mode 100644 files/fr/web/html/attributes/min/index.md delete mode 100644 files/fr/web/html/attributes/minlength/index.html create mode 100644 files/fr/web/html/attributes/minlength/index.md delete mode 100644 files/fr/web/html/attributes/multiple/index.html create mode 100644 files/fr/web/html/attributes/multiple/index.md delete mode 100644 files/fr/web/html/attributes/pattern/index.html create mode 100644 files/fr/web/html/attributes/pattern/index.md delete mode 100644 files/fr/web/html/attributes/readonly/index.html create mode 100644 files/fr/web/html/attributes/readonly/index.md delete mode 100644 files/fr/web/html/attributes/rel/index.html create mode 100644 files/fr/web/html/attributes/rel/index.md delete mode 100644 files/fr/web/html/attributes/required/index.html create mode 100644 files/fr/web/html/attributes/required/index.md delete mode 100644 files/fr/web/html/attributes/size/index.html create mode 100644 files/fr/web/html/attributes/size/index.md delete mode 100644 files/fr/web/html/attributes/step/index.html create mode 100644 files/fr/web/html/attributes/step/index.md delete mode 100644 files/fr/web/html/block-level_elements/index.html create mode 100644 files/fr/web/html/block-level_elements/index.md delete mode 100644 files/fr/web/html/cors_enabled_image/index.html create mode 100644 files/fr/web/html/cors_enabled_image/index.md delete mode 100644 files/fr/web/html/date_and_time_formats/index.html create mode 100644 files/fr/web/html/date_and_time_formats/index.md delete mode 100644 files/fr/web/html/element/a/index.html create mode 100644 files/fr/web/html/element/a/index.md delete mode 100644 files/fr/web/html/element/abbr/index.html create mode 100644 files/fr/web/html/element/abbr/index.md delete mode 100644 files/fr/web/html/element/acronym/index.html create mode 100644 files/fr/web/html/element/acronym/index.md delete mode 100644 files/fr/web/html/element/address/index.html create mode 100644 files/fr/web/html/element/address/index.md delete mode 100644 files/fr/web/html/element/applet/index.html create mode 100644 files/fr/web/html/element/applet/index.md delete mode 100644 files/fr/web/html/element/area/index.html create mode 100644 files/fr/web/html/element/area/index.md delete mode 100644 files/fr/web/html/element/article/index.html create mode 100644 files/fr/web/html/element/article/index.md delete mode 100644 files/fr/web/html/element/aside/index.html create mode 100644 files/fr/web/html/element/aside/index.md delete mode 100644 files/fr/web/html/element/audio/index.html create mode 100644 files/fr/web/html/element/audio/index.md delete mode 100644 files/fr/web/html/element/b/index.html create mode 100644 files/fr/web/html/element/b/index.md delete mode 100644 files/fr/web/html/element/base/index.html create mode 100644 files/fr/web/html/element/base/index.md delete mode 100644 files/fr/web/html/element/basefont/index.html create mode 100644 files/fr/web/html/element/basefont/index.md delete mode 100644 files/fr/web/html/element/bdi/index.html create mode 100644 files/fr/web/html/element/bdi/index.md delete mode 100644 files/fr/web/html/element/bdo/index.html create mode 100644 files/fr/web/html/element/bdo/index.md delete mode 100644 files/fr/web/html/element/bgsound/index.html create mode 100644 files/fr/web/html/element/bgsound/index.md delete mode 100644 files/fr/web/html/element/big/index.html create mode 100644 files/fr/web/html/element/big/index.md delete mode 100644 files/fr/web/html/element/blink/index.html create mode 100644 files/fr/web/html/element/blink/index.md delete mode 100644 files/fr/web/html/element/blockquote/index.html create mode 100644 files/fr/web/html/element/blockquote/index.md delete mode 100644 files/fr/web/html/element/body/index.html create mode 100644 files/fr/web/html/element/body/index.md delete mode 100644 files/fr/web/html/element/br/index.html create mode 100644 files/fr/web/html/element/br/index.md delete mode 100644 files/fr/web/html/element/button/index.html create mode 100644 files/fr/web/html/element/button/index.md delete mode 100644 files/fr/web/html/element/canvas/index.html create mode 100644 files/fr/web/html/element/canvas/index.md delete mode 100644 files/fr/web/html/element/caption/index.html create mode 100644 files/fr/web/html/element/caption/index.md delete mode 100644 files/fr/web/html/element/center/index.html create mode 100644 files/fr/web/html/element/center/index.md delete mode 100644 files/fr/web/html/element/cite/index.html create mode 100644 files/fr/web/html/element/cite/index.md delete mode 100644 files/fr/web/html/element/code/index.html create mode 100644 files/fr/web/html/element/code/index.md delete mode 100644 files/fr/web/html/element/col/index.html create mode 100644 files/fr/web/html/element/col/index.md delete mode 100644 files/fr/web/html/element/colgroup/index.html create mode 100644 files/fr/web/html/element/colgroup/index.md delete mode 100644 files/fr/web/html/element/content/index.html create mode 100644 files/fr/web/html/element/content/index.md delete mode 100644 files/fr/web/html/element/data/index.html create mode 100644 files/fr/web/html/element/data/index.md delete mode 100644 files/fr/web/html/element/datalist/index.html create mode 100644 files/fr/web/html/element/datalist/index.md delete mode 100644 files/fr/web/html/element/dd/index.html create mode 100644 files/fr/web/html/element/dd/index.md delete mode 100644 files/fr/web/html/element/del/index.html create mode 100644 files/fr/web/html/element/del/index.md delete mode 100644 files/fr/web/html/element/details/index.html create mode 100644 files/fr/web/html/element/details/index.md delete mode 100644 files/fr/web/html/element/dfn/index.html create mode 100644 files/fr/web/html/element/dfn/index.md delete mode 100644 files/fr/web/html/element/dialog/index.html create mode 100644 files/fr/web/html/element/dialog/index.md delete mode 100644 files/fr/web/html/element/dir/index.html create mode 100644 files/fr/web/html/element/dir/index.md delete mode 100644 files/fr/web/html/element/div/index.html create mode 100644 files/fr/web/html/element/div/index.md delete mode 100644 files/fr/web/html/element/dl/index.html create mode 100644 files/fr/web/html/element/dl/index.md delete mode 100644 files/fr/web/html/element/dt/index.html create mode 100644 files/fr/web/html/element/dt/index.md delete mode 100644 files/fr/web/html/element/em/index.html create mode 100644 files/fr/web/html/element/em/index.md delete mode 100644 files/fr/web/html/element/embed/index.html create mode 100644 files/fr/web/html/element/embed/index.md delete mode 100644 files/fr/web/html/element/fieldset/index.html create mode 100644 files/fr/web/html/element/fieldset/index.md delete mode 100644 files/fr/web/html/element/figcaption/index.html create mode 100644 files/fr/web/html/element/figcaption/index.md delete mode 100644 files/fr/web/html/element/figure/index.html create mode 100644 files/fr/web/html/element/figure/index.md delete mode 100644 files/fr/web/html/element/font/index.html create mode 100644 files/fr/web/html/element/font/index.md delete mode 100644 files/fr/web/html/element/footer/index.html create mode 100644 files/fr/web/html/element/footer/index.md delete mode 100644 files/fr/web/html/element/form/index.html create mode 100644 files/fr/web/html/element/form/index.md delete mode 100644 files/fr/web/html/element/frame/index.html create mode 100644 files/fr/web/html/element/frame/index.md delete mode 100644 files/fr/web/html/element/frameset/index.html create mode 100644 files/fr/web/html/element/frameset/index.md delete mode 100644 files/fr/web/html/element/head/index.html create mode 100644 files/fr/web/html/element/head/index.md delete mode 100644 files/fr/web/html/element/header/index.html create mode 100644 files/fr/web/html/element/header/index.md delete mode 100644 files/fr/web/html/element/heading_elements/index.html create mode 100644 files/fr/web/html/element/heading_elements/index.md delete mode 100644 files/fr/web/html/element/hgroup/index.html create mode 100644 files/fr/web/html/element/hgroup/index.md delete mode 100644 files/fr/web/html/element/hr/index.html create mode 100644 files/fr/web/html/element/hr/index.md delete mode 100644 files/fr/web/html/element/html/index.html create mode 100644 files/fr/web/html/element/html/index.md delete mode 100644 files/fr/web/html/element/i/index.html create mode 100644 files/fr/web/html/element/i/index.md delete mode 100644 files/fr/web/html/element/iframe/index.html create mode 100644 files/fr/web/html/element/iframe/index.md delete mode 100644 files/fr/web/html/element/image/index.html create mode 100644 files/fr/web/html/element/image/index.md delete mode 100644 files/fr/web/html/element/img/index.html create mode 100644 files/fr/web/html/element/img/index.md delete mode 100644 files/fr/web/html/element/index.html create mode 100644 files/fr/web/html/element/index.md delete mode 100644 files/fr/web/html/element/input/button/index.html create mode 100644 files/fr/web/html/element/input/button/index.md delete mode 100644 files/fr/web/html/element/input/checkbox/index.html create mode 100644 files/fr/web/html/element/input/checkbox/index.md delete mode 100644 files/fr/web/html/element/input/color/index.html create mode 100644 files/fr/web/html/element/input/color/index.md delete mode 100644 files/fr/web/html/element/input/date/index.html create mode 100644 files/fr/web/html/element/input/date/index.md delete mode 100644 files/fr/web/html/element/input/datetime-local/index.html create mode 100644 files/fr/web/html/element/input/datetime-local/index.md delete mode 100644 files/fr/web/html/element/input/datetime/index.html create mode 100644 files/fr/web/html/element/input/datetime/index.md delete mode 100644 files/fr/web/html/element/input/email/index.html create mode 100644 files/fr/web/html/element/input/email/index.md delete mode 100644 files/fr/web/html/element/input/file/index.html create mode 100644 files/fr/web/html/element/input/file/index.md delete mode 100644 files/fr/web/html/element/input/hidden/index.html create mode 100644 files/fr/web/html/element/input/hidden/index.md delete mode 100644 files/fr/web/html/element/input/image/index.html create mode 100644 files/fr/web/html/element/input/image/index.md delete mode 100644 files/fr/web/html/element/input/index.html create mode 100644 files/fr/web/html/element/input/index.md delete mode 100644 files/fr/web/html/element/input/month/index.html create mode 100644 files/fr/web/html/element/input/month/index.md delete mode 100644 files/fr/web/html/element/input/number/index.html create mode 100644 files/fr/web/html/element/input/number/index.md delete mode 100644 files/fr/web/html/element/input/password/index.html create mode 100644 files/fr/web/html/element/input/password/index.md delete mode 100644 files/fr/web/html/element/input/radio/index.html create mode 100644 files/fr/web/html/element/input/radio/index.md delete mode 100644 files/fr/web/html/element/input/range/index.html create mode 100644 files/fr/web/html/element/input/range/index.md delete mode 100644 files/fr/web/html/element/input/reset/index.html create mode 100644 files/fr/web/html/element/input/reset/index.md delete mode 100644 files/fr/web/html/element/input/search/index.html create mode 100644 files/fr/web/html/element/input/search/index.md delete mode 100644 files/fr/web/html/element/input/submit/index.html create mode 100644 files/fr/web/html/element/input/submit/index.md delete mode 100644 files/fr/web/html/element/input/tel/index.html create mode 100644 files/fr/web/html/element/input/tel/index.md delete mode 100644 files/fr/web/html/element/input/text/index.html create mode 100644 files/fr/web/html/element/input/text/index.md delete mode 100644 files/fr/web/html/element/input/time/index.html create mode 100644 files/fr/web/html/element/input/time/index.md delete mode 100644 files/fr/web/html/element/input/url/index.html create mode 100644 files/fr/web/html/element/input/url/index.md delete mode 100644 files/fr/web/html/element/input/week/index.html create mode 100644 files/fr/web/html/element/input/week/index.md delete mode 100644 files/fr/web/html/element/ins/index.html create mode 100644 files/fr/web/html/element/ins/index.md delete mode 100644 files/fr/web/html/element/kbd/index.html create mode 100644 files/fr/web/html/element/kbd/index.md delete mode 100644 files/fr/web/html/element/keygen/index.html create mode 100644 files/fr/web/html/element/keygen/index.md delete mode 100644 files/fr/web/html/element/label/index.html create mode 100644 files/fr/web/html/element/label/index.md delete mode 100644 files/fr/web/html/element/legend/index.html create mode 100644 files/fr/web/html/element/legend/index.md delete mode 100644 files/fr/web/html/element/li/index.html create mode 100644 files/fr/web/html/element/li/index.md delete mode 100644 files/fr/web/html/element/link/index.html create mode 100644 files/fr/web/html/element/link/index.md delete mode 100644 files/fr/web/html/element/main/index.html create mode 100644 files/fr/web/html/element/main/index.md delete mode 100644 files/fr/web/html/element/map/index.html create mode 100644 files/fr/web/html/element/map/index.md delete mode 100644 files/fr/web/html/element/mark/index.html create mode 100644 files/fr/web/html/element/mark/index.md delete mode 100644 files/fr/web/html/element/marquee/index.html create mode 100644 files/fr/web/html/element/marquee/index.md delete mode 100644 files/fr/web/html/element/menu/index.html create mode 100644 files/fr/web/html/element/menu/index.md delete mode 100644 files/fr/web/html/element/menuitem/index.html create mode 100644 files/fr/web/html/element/menuitem/index.md delete mode 100644 files/fr/web/html/element/meta/index.html create mode 100644 files/fr/web/html/element/meta/index.md delete mode 100644 files/fr/web/html/element/meter/index.html create mode 100644 files/fr/web/html/element/meter/index.md delete mode 100644 files/fr/web/html/element/nav/index.html create mode 100644 files/fr/web/html/element/nav/index.md delete mode 100644 files/fr/web/html/element/nobr/index.html create mode 100644 files/fr/web/html/element/nobr/index.md delete mode 100644 files/fr/web/html/element/noembed/index.html create mode 100644 files/fr/web/html/element/noembed/index.md delete mode 100644 files/fr/web/html/element/noframes/index.html create mode 100644 files/fr/web/html/element/noframes/index.md delete mode 100644 files/fr/web/html/element/noscript/index.html create mode 100644 files/fr/web/html/element/noscript/index.md delete mode 100644 files/fr/web/html/element/object/index.html create mode 100644 files/fr/web/html/element/object/index.md delete mode 100644 files/fr/web/html/element/ol/index.html create mode 100644 files/fr/web/html/element/ol/index.md delete mode 100644 files/fr/web/html/element/optgroup/index.html create mode 100644 files/fr/web/html/element/optgroup/index.md delete mode 100644 files/fr/web/html/element/option/index.html create mode 100644 files/fr/web/html/element/option/index.md delete mode 100644 files/fr/web/html/element/output/index.html create mode 100644 files/fr/web/html/element/output/index.md delete mode 100644 files/fr/web/html/element/p/index.html create mode 100644 files/fr/web/html/element/p/index.md delete mode 100644 files/fr/web/html/element/param/index.html create mode 100644 files/fr/web/html/element/param/index.md delete mode 100644 files/fr/web/html/element/picture/index.html create mode 100644 files/fr/web/html/element/picture/index.md delete mode 100644 files/fr/web/html/element/plaintext/index.html create mode 100644 files/fr/web/html/element/plaintext/index.md delete mode 100644 files/fr/web/html/element/pre/index.html create mode 100644 files/fr/web/html/element/pre/index.md delete mode 100644 files/fr/web/html/element/progress/index.html create mode 100644 files/fr/web/html/element/progress/index.md delete mode 100644 files/fr/web/html/element/q/index.html create mode 100644 files/fr/web/html/element/q/index.md delete mode 100644 files/fr/web/html/element/rb/index.html create mode 100644 files/fr/web/html/element/rb/index.md delete mode 100644 files/fr/web/html/element/rp/index.html create mode 100644 files/fr/web/html/element/rp/index.md delete mode 100644 files/fr/web/html/element/rt/index.html create mode 100644 files/fr/web/html/element/rt/index.md delete mode 100644 files/fr/web/html/element/rtc/index.html create mode 100644 files/fr/web/html/element/rtc/index.md delete mode 100644 files/fr/web/html/element/ruby/index.html create mode 100644 files/fr/web/html/element/ruby/index.md delete mode 100644 files/fr/web/html/element/s/index.html create mode 100644 files/fr/web/html/element/s/index.md delete mode 100644 files/fr/web/html/element/samp/index.html create mode 100644 files/fr/web/html/element/samp/index.md delete mode 100644 files/fr/web/html/element/script/index.html create mode 100644 files/fr/web/html/element/script/index.md delete mode 100644 files/fr/web/html/element/section/index.html create mode 100644 files/fr/web/html/element/section/index.md delete mode 100644 files/fr/web/html/element/select/index.html create mode 100644 files/fr/web/html/element/select/index.md delete mode 100644 files/fr/web/html/element/shadow/index.html create mode 100644 files/fr/web/html/element/shadow/index.md delete mode 100644 files/fr/web/html/element/slot/index.html create mode 100644 files/fr/web/html/element/slot/index.md delete mode 100644 files/fr/web/html/element/small/index.html create mode 100644 files/fr/web/html/element/small/index.md delete mode 100644 files/fr/web/html/element/source/index.html create mode 100644 files/fr/web/html/element/source/index.md delete mode 100644 files/fr/web/html/element/spacer/index.html create mode 100644 files/fr/web/html/element/spacer/index.md delete mode 100644 files/fr/web/html/element/span/index.html create mode 100644 files/fr/web/html/element/span/index.md delete mode 100644 files/fr/web/html/element/strike/index.html create mode 100644 files/fr/web/html/element/strike/index.md delete mode 100644 files/fr/web/html/element/strong/index.html create mode 100644 files/fr/web/html/element/strong/index.md delete mode 100644 files/fr/web/html/element/style/index.html create mode 100644 files/fr/web/html/element/style/index.md delete mode 100644 files/fr/web/html/element/sub/index.html create mode 100644 files/fr/web/html/element/sub/index.md delete mode 100644 files/fr/web/html/element/summary/index.html create mode 100644 files/fr/web/html/element/summary/index.md delete mode 100644 files/fr/web/html/element/sup/index.html create mode 100644 files/fr/web/html/element/sup/index.md delete mode 100644 files/fr/web/html/element/table/index.html create mode 100644 files/fr/web/html/element/table/index.md delete mode 100644 files/fr/web/html/element/tbody/index.html create mode 100644 files/fr/web/html/element/tbody/index.md delete mode 100644 files/fr/web/html/element/td/index.html create mode 100644 files/fr/web/html/element/td/index.md delete mode 100644 files/fr/web/html/element/template/index.html create mode 100644 files/fr/web/html/element/template/index.md delete mode 100644 files/fr/web/html/element/textarea/index.html create mode 100644 files/fr/web/html/element/textarea/index.md delete mode 100644 files/fr/web/html/element/tfoot/index.html create mode 100644 files/fr/web/html/element/tfoot/index.md delete mode 100644 files/fr/web/html/element/th/index.html create mode 100644 files/fr/web/html/element/th/index.md delete mode 100644 files/fr/web/html/element/thead/index.html create mode 100644 files/fr/web/html/element/thead/index.md delete mode 100644 files/fr/web/html/element/time/index.html create mode 100644 files/fr/web/html/element/time/index.md delete mode 100644 files/fr/web/html/element/title/index.html create mode 100644 files/fr/web/html/element/title/index.md delete mode 100644 files/fr/web/html/element/tr/index.html create mode 100644 files/fr/web/html/element/tr/index.md delete mode 100644 files/fr/web/html/element/track/index.html create mode 100644 files/fr/web/html/element/track/index.md delete mode 100644 files/fr/web/html/element/tt/index.html create mode 100644 files/fr/web/html/element/tt/index.md delete mode 100644 files/fr/web/html/element/u/index.html create mode 100644 files/fr/web/html/element/u/index.md delete mode 100644 files/fr/web/html/element/ul/index.html create mode 100644 files/fr/web/html/element/ul/index.md delete mode 100644 files/fr/web/html/element/var/index.html create mode 100644 files/fr/web/html/element/var/index.md delete mode 100644 files/fr/web/html/element/video/index.html create mode 100644 files/fr/web/html/element/video/index.md delete mode 100644 files/fr/web/html/element/wbr/index.html create mode 100644 files/fr/web/html/element/wbr/index.md delete mode 100644 files/fr/web/html/element/xmp/index.html create mode 100644 files/fr/web/html/element/xmp/index.md delete mode 100644 files/fr/web/html/global_attributes/accesskey/index.html create mode 100644 files/fr/web/html/global_attributes/accesskey/index.md delete mode 100644 files/fr/web/html/global_attributes/autocapitalize/index.html create mode 100644 files/fr/web/html/global_attributes/autocapitalize/index.md delete mode 100644 files/fr/web/html/global_attributes/autofocus/index.html create mode 100644 files/fr/web/html/global_attributes/autofocus/index.md delete mode 100644 files/fr/web/html/global_attributes/class/index.html create mode 100644 files/fr/web/html/global_attributes/class/index.md delete mode 100644 files/fr/web/html/global_attributes/contenteditable/index.html create mode 100644 files/fr/web/html/global_attributes/contenteditable/index.md delete mode 100644 files/fr/web/html/global_attributes/contextmenu/index.html create mode 100644 files/fr/web/html/global_attributes/contextmenu/index.md delete mode 100644 files/fr/web/html/global_attributes/data-_star_/index.html create mode 100644 files/fr/web/html/global_attributes/data-_star_/index.md delete mode 100644 files/fr/web/html/global_attributes/dir/index.html create mode 100644 files/fr/web/html/global_attributes/dir/index.md delete mode 100644 files/fr/web/html/global_attributes/draggable/index.html create mode 100644 files/fr/web/html/global_attributes/draggable/index.md delete mode 100644 files/fr/web/html/global_attributes/enterkeyhint/index.html create mode 100644 files/fr/web/html/global_attributes/enterkeyhint/index.md delete mode 100644 files/fr/web/html/global_attributes/hidden/index.html create mode 100644 files/fr/web/html/global_attributes/hidden/index.md delete mode 100644 files/fr/web/html/global_attributes/id/index.html create mode 100644 files/fr/web/html/global_attributes/id/index.md delete mode 100644 files/fr/web/html/global_attributes/index.html create mode 100644 files/fr/web/html/global_attributes/index.md delete mode 100644 files/fr/web/html/global_attributes/inputmode/index.html create mode 100644 files/fr/web/html/global_attributes/inputmode/index.md delete mode 100644 files/fr/web/html/global_attributes/is/index.html create mode 100644 files/fr/web/html/global_attributes/is/index.md delete mode 100644 files/fr/web/html/global_attributes/itemid/index.html create mode 100644 files/fr/web/html/global_attributes/itemid/index.md delete mode 100644 files/fr/web/html/global_attributes/itemprop/index.html create mode 100644 files/fr/web/html/global_attributes/itemprop/index.md delete mode 100644 files/fr/web/html/global_attributes/itemref/index.html create mode 100644 files/fr/web/html/global_attributes/itemref/index.md delete mode 100644 files/fr/web/html/global_attributes/itemscope/index.html create mode 100644 files/fr/web/html/global_attributes/itemscope/index.md delete mode 100644 files/fr/web/html/global_attributes/itemtype/index.html create mode 100644 files/fr/web/html/global_attributes/itemtype/index.md delete mode 100644 files/fr/web/html/global_attributes/lang/index.html create mode 100644 files/fr/web/html/global_attributes/lang/index.md delete mode 100644 files/fr/web/html/global_attributes/part/index.html create mode 100644 files/fr/web/html/global_attributes/part/index.md delete mode 100644 files/fr/web/html/global_attributes/slot/index.html create mode 100644 files/fr/web/html/global_attributes/slot/index.md delete mode 100644 files/fr/web/html/global_attributes/spellcheck/index.html create mode 100644 files/fr/web/html/global_attributes/spellcheck/index.md delete mode 100644 files/fr/web/html/global_attributes/style/index.html create mode 100644 files/fr/web/html/global_attributes/style/index.md delete mode 100644 files/fr/web/html/global_attributes/tabindex/index.html create mode 100644 files/fr/web/html/global_attributes/tabindex/index.md delete mode 100644 files/fr/web/html/global_attributes/title/index.html create mode 100644 files/fr/web/html/global_attributes/title/index.md delete mode 100644 files/fr/web/html/global_attributes/translate/index.html create mode 100644 files/fr/web/html/global_attributes/translate/index.md delete mode 100644 files/fr/web/html/global_attributes/x-ms-acceleratorkey/index.html create mode 100644 files/fr/web/html/global_attributes/x-ms-acceleratorkey/index.md delete mode 100644 files/fr/web/html/global_attributes/x-ms-format-detection/index.html create mode 100644 files/fr/web/html/global_attributes/x-ms-format-detection/index.md delete mode 100644 files/fr/web/html/index.html create mode 100644 files/fr/web/html/index.md delete mode 100644 files/fr/web/html/index/index.html create mode 100644 files/fr/web/html/index/index.md delete mode 100644 files/fr/web/html/inline_elements/index.html create mode 100644 files/fr/web/html/inline_elements/index.md delete mode 100644 files/fr/web/html/link_types/dns-prefetch/index.html create mode 100644 files/fr/web/html/link_types/dns-prefetch/index.md delete mode 100644 files/fr/web/html/link_types/index.html create mode 100644 files/fr/web/html/link_types/index.md delete mode 100644 files/fr/web/html/link_types/manifest/index.html create mode 100644 files/fr/web/html/link_types/manifest/index.md delete mode 100644 files/fr/web/html/link_types/modulepreload/index.html create mode 100644 files/fr/web/html/link_types/modulepreload/index.md delete mode 100644 files/fr/web/html/link_types/noopener/index.html create mode 100644 files/fr/web/html/link_types/noopener/index.md delete mode 100644 files/fr/web/html/link_types/noreferrer/index.html create mode 100644 files/fr/web/html/link_types/noreferrer/index.md delete mode 100644 files/fr/web/html/link_types/preconnect/index.html create mode 100644 files/fr/web/html/link_types/preconnect/index.md delete mode 100644 files/fr/web/html/link_types/prefetch/index.html create mode 100644 files/fr/web/html/link_types/prefetch/index.md delete mode 100644 files/fr/web/html/link_types/preload/index.html create mode 100644 files/fr/web/html/link_types/preload/index.md delete mode 100644 files/fr/web/html/link_types/prerender/index.html create mode 100644 files/fr/web/html/link_types/prerender/index.md delete mode 100644 files/fr/web/html/microdata/index.html create mode 100644 files/fr/web/html/microdata/index.md delete mode 100644 files/fr/web/html/microformats/index.html create mode 100644 files/fr/web/html/microformats/index.md delete mode 100644 files/fr/web/html/quirks_mode_and_standards_mode/index.html create mode 100644 files/fr/web/html/quirks_mode_and_standards_mode/index.md delete mode 100644 files/fr/web/html/reference/index.html create mode 100644 files/fr/web/html/reference/index.md delete mode 100644 files/fr/web/html/viewport_meta_tag/index.html create mode 100644 files/fr/web/html/viewport_meta_tag/index.md (limited to 'files/fr/web/html') diff --git a/files/fr/web/html/applying_color/index.html b/files/fr/web/html/applying_color/index.html deleted file mode 100644 index ea1e73ea67..0000000000 --- a/files/fr/web/html/applying_color/index.html +++ /dev/null @@ -1,509 +0,0 @@ ---- -title: Appliquer des couleurs sur des éléments HTML grâce à CSS -slug: Web/HTML/Applying_color -tags: - - Beginner - - CSS - - CSS Colors - - Débutant - - Guide - - HTML - - HTML Colors - - HTML Styles - - Styling HTML - - color -translation_of: Web/HTML/Applying_color -original_slug: Web/HTML/Appliquer_des_couleurs ---- -
{{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.

- -

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.

- -

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.

- -

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.

- -

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.

- -

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.

- -
-
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é).
-
- -

Boîtes

- -

Chaque élément est une boîte avec du contenu. Cette boîte possède un arrière-plan et une bordure, quel que soit le contenu qu'elle renferme

- -
-
Bordures
-
Voir la section Bordures pour la liste des propriétés CSS qui peuvent être utilisées pour colorer la bordure d'une boîte.
-
background-color
-
Cette propriété correspondra à la couleur d'arrière-plan, utilisée dans les zones où l'élément ne possède pas de contenu au premier plan.
-
column-rule-color
-
Cette propriété correspondra à la couleur utilisée pour dessiner la ligne qui sépare des colonnes de texte.
-
outline-color
-
Cette propriété correspondra à la couleur utilisée pour le contour de l'élément. Le contour est différent de la bordure, car il occupe un espace autour de la boîte et peut alors chevaucher le contenu d'une autre boîte. Le contour est généralement utilisé afin d'indiquer que l'élément a le focus et ainsi montrer quel élément reçoit les évènements de saisie.
-
- -

Bordures

- -

Tout élément possède une bordure dessinée autour. Une bordure simple est représentée par une ligne dessinant un rectangle autour du contenu de l'élément. Vous pouvez lire la mise en forme des bordures grâce à CSS afin d'approfondir ce sujet.

- -

Il est possible d'utiliser la propriété raccourcie border qui permet de configurer l'ensemble des caractéristiques d'une bordure en une seule règle (y compris les caractéristiques qui ne sont pas liées aux couleurs comme la largeur, le style (ligne pleine, pointillés, etc.) et ainsi de suite).

- -
-
border-color
-
Cette propriété correspondra à la couleur qui sera utilisée pour chacun des côtés de la bordure.
-
border-left-color, border-right-color, border-top-color, border-bottom-color
-
Ces propriétés permettent d'indiquer une couleur différente pour chaque côté de la bordure de l'élément.
-
border-block-start-color et border-block-end-color
-
Ces propriétés permettent de définir les couleurs utilisées pour les côtés de la bordure dans l'axe orthogonal au sens d'écriture. Ainsi, si le texte est écrit en français (de gauche à droite), border-block-start-color permettra de définir le côté haut de la bordure et border-block-end-color le côté bas. Ces propriétés sont complétées par les propriétés border-inline-* qui agissent sur l'autre axe.
-
border-inline-start-color et border-inline-end-color
-
Ces propriétés permettent de définir les couleurs utilisées pour les bordures pour les côtés sur l'axe du sens d'écriture. Les côtés impactés dépendent donc des propriétés writing-mode, direction, and text-orientation qui permettent, la plupart du temps, d'ajuster la directionnalité du texte en fonction de la langue utilisée. Si le texte est écrit de droite à gauche, border-inline-start-color correspondra à la couleur appliquée sur le côté droit.
-
- -

Autres méthodes pour utiliser de la couleur

- -

CSS n'est pas la seule technologie web qui gère des couleurs. Voici les autres technologies qui permettent d'apporter de la couleur sur une page web.

- -
-
L'API Canvas
-
Cette API permet de dessiner des graphiques matriciels en deux dimensions à l'intérieur d'un élément <canvas>. Vous pouvez lire le tutoriel sur l'API Canvas pour en savoir plus.
-
SVG (Scalable Vector Graphics)
-
Ce format permet de dessiner des images en indiquant des commandes pour dessiner des formes, des motifs et des lignes afin de composer une image. Les commandes SVG sont construites dans un fichier XML et peuvent être embarquées dans une page web grâce à un élément <img>.
-
WebGL
-
L'API Web Graphics Library est une API basée sur OpenGL ES qui permet de dessiner en deux ou trois dimensions sur le Web. Voir le tutoriel WebGL afin d'en savoir plus.
-
- -

Comment décrire une couleur

- -

Afin de représenter une couleur en CSS, il est nécessaire de trouver une méthode pour « traduire » le concept analogique de couleur dans un format numérique qu'un ordinateur pourra utiliser. Pour ce faire, on décompose la couleur en différentes composantes. Cela peut être la part de chaque couleur primaire ou bien la teinte et la luminosité de la couleur. Bref, il existe différentes façons de décrire une couleur en CSS.

- -

Pour des informations plus détaillées sur chaque type de valeur, vous pouvez consulter la page de la référence CSS à propos de l'unité <color>.

- -

Mots-clés

- -

Un ensemble standard de noms de couleurs a été défini et il est possible d'utiliser l'un de ces mots-clés plutôt qu'une représentation numérique s'il existe un mot-clé pour la valeur qu'on souhaite utiliser. Les mots-clés désignant les couleurs regroupent les couleurs primaires et secondaires (tels quered pour rouge, blue pour bleu, orange), les tons de gris (allant de black pour noir à white pour blanc et incluant des niveaux tels que darkgray (gris foncé) et lightgrey (gris clair)). D'autres couleurs sont également disponibles avec un mot-clé comme lightseagreen, cornflowerblue ou rebeccapurple.

- -

Vous pouvez consulter cette liste pour connaître l'ensemble des mots-clés disponibles.

- -

Valeurs RGB

- -

Il existe trois façons de représenter une couleur RGB en CSS.

- -

La notation hexadécimale

- -

On peut utiliser une chaîne de caractères avec des chiffres hexadécimaux afin de représenter chacune des composantes (rouge, verte, bleue) (soit, en anglais, red, green, blue qui donne l'acronyme RGB). On peut également décrire une quatrième composante pour l'opacité. Chaque composante est représentée par un nombre entre 0 et 255 (ce qui correspond à 0x00 et 0xFF en notation hexadécimale) ou par un nombre entre 0 et 15 (ce qui correspond à 0x0 et 0xF en notation hexadécimale). Toutes les composantes doivent être indiquées avec le même nombre de chiffres. Si c'est la notation à un seul chiffre qui est utilisée, la couleur finale sera calculée avec chaque composante doublée, autrement dit, "#D" sera converti en "#DD".

- -

Lorsqu'on utilise une chaîne de caractères avec un code hexadécimal, la chaîne de caractères commence toujours par le caractère "#". Le reste de la chaîne correspond aux chiffres hexadécimaux. L'utilisation des majuscules ou minuscules n'a pas d'importance.

- -
-
"#rrggbb"
-
Cette forme indique une couleur opaque dont les deux premiers chiffres hexadécimaux indiquent la composante rouge (0xrr), les deux chiffres suivants indiquent la composante verte (0xgg) et les deux derniers chiffres indiquent la composante bleue (0xbb).
-
"#rrggbbaa"
-
Cette forme indique une couleur dont les deux premiers chiffres hexadécimaux indiquent la composante rouge (0xrr), les deux chiffres suivants indiquent la composante verte (0xgg), les deux chiffres suivants indiquent la composante bleue (0xbb), enfin, les deux derniers chiffres indiquent la composante alpha (0xaa) utilisée pour indiquer l'opacité de la couleur (plus la valeur est faible, plus la couleur est transparente).
-
"#rgb"
-
Cette forme indique une couleur dont la composante rouge vaut 0xrr, la composante verte vaut 0xgg et dont la composante bleue vaut 0xbb.
-
"#rgba"
-
Cette forme indique une couleur dont la composante rouge vaut 0xrr, la composante verte vaut 0xgg et dont la composante bleue vaut 0xbb. Le canal alpha vaut 0xaa (plus la valeur est faible, plus la couleur sera transparente).
-
- -

Par exemple, on pourra représenter un bleu pur et opaque avec les chaînes de caractères "#0000ff" ou "#00f". Pour le rendre opaque à 25%, on utilisera "#0000ff44" ou "#00f4".

- -

La notation fonctionnelle RGB

- -

La notation fonctionnelle RGB permet, comme les chaînes de caractères hexadécimales, de représenter des couleurs avec leurs composantes rouge, verte, bleue et éventuellement avec une composante alpha pour l'opacité. Toutefois, au lieu d'utiliser une chaîne de caractères, on utilise ici la fonction CSS rgb(). Cette fonction prend trois arguments pour chacune des composantes (dans cet ordre) rouge, verte et bleue. Un quatrième paramètre, optionnel, permet d'indiquer la valeur du canal alpha.

- -

Voici les valeurs qui peuvent être utilisées pour chacun de ces paramètres :

- -
-
red, green et blue
-
Chaque composante doit être un entier (type <integer>) compris entre 0 et 255 (inclus) ou un pourcentage (type <percentage>) compris entre 0% et 100%.
-
alpha
-
Le canal alpha est un nombre entre 0.0 (la couleur est alors totalement transparente) et 1.0 (complètement opaque). On peut également utiliser un pourcentage où 0% correspondra à la valeur 0.0 et 100% correspondra à la valeur 1.0.
-
- -

Par exemple, on pourra représenter un rouge pur à moitié opaque grâce à rgb(255, 0, 0, 0.5) ou grâce à rgb(100%, 0, 0, 50%).

- -

La notation fonctionnelle HSL

- -

D'autres personnes préfèrent manipuler la notation HSL ou aussi appelée « Teinte saturation luminosité » (NDT : HSL signifie Hue Saturation Lightness en anglais). Sur le Web, les couleurs HSL sont représentées grâce à la notation fonctionnelle hsl() (qui fonctionne de façon analogue à la fonction rgb()).

- -

Le diagramme qui suit illustre un cylindre de couleur pour le modèle HSL : Hue (la teinte) définit la couleur sur un axe radial qui parcourt les couleurs du spectre visible. La saturation est un pourcentage de la teinte entre un gris total et la couleur de la teinte vive. Enfin, la luminosité permet d'avoir des couleurs plus sombres (noir pour une luminosité nulle ou blanc pour une luminosité maximale). Cette image a été créée par SharkD sur Wikipédia et est distribuée avec la licence CC BY-SA 3.0.

- -Cylindre de couleur HSL - -

La valeur de la teinte (H) est un angle qui commence au rouge, parcourt le jaune, le vert, le cyan, le bleu et le magenta (avant de revenir à rouge avec un angle de 360°). Cette valeur identifie la teinte de base. La valeur utilisée est de type <angle> et on peut utiliser différentes unités disponibles en CSS comme les degrés (deg), les radians (rad), les grades (grad) ou les tours (turn).

- -

Ensuite, la saturation (S) indique la force de la teinte dans la couleur. Enfin, la luminosité (L) indique le niveau de gris de la couleur.

- -

On peut faire une analogie avec la conception d'une couleur pour une peinture :

- -
    -
  1. On commence avec une peinture de base qui possède l'intensité la plus forte pour une couleur donnée (par exemple, le bleu le plus intense qui puisse être affiché) : c'est la teinte (hue) (H). En CSS, c'est un angle qui détermine la couleur parmi une roue de couleurs.
    2. -
  2. Ensuite, on choisit une peinture avec un niveau de gris qui la force de la couleur. Est-ce qu'on veut qu'elle soit claire ou sombre, voire complètement noire ? C'est la luminosité (L). En CSS, c'est un pourcentage, 0% indiquant une couleur noire et 100% une couleur blanche.
    3. -
  3. Enfin, avec ces deux peintures, on décide de la proportion de chacune pour le mélange final : c'est la saturation (S). Plus cette valeur est élevée, plus on utilise la couleur de base, plus cette valeur est faible et plus on utilise la peinture grise.
    4. -
- -

Il est également possible d'ajouter un canal alpha afin d'avoir une couleur partiellement (ou totalement) transparente.

- -

Exemples avec HSL

- -

Voici quelques exemples utilisant la notation HSL :

- - - - - -

{{EmbedLiveSample("Exemples_avec_HSL", 300, 260)}}

- -
-

Note : Il est possible d'omettre l'unité pour la valeur de la teinte (hue), l'unité par défaut utilisée sera alors les degrés (deg).

-
- -

Utiliser les couleurs

- -

Maintenant qu'on connaît les différentes propriétés CSS, comment décrire une couleur et dans quel format, on peut assembler cela pour utiliser les couleurs dans un document web. Comme on l'a vu précédemment, de nombreuses choses peuvent être colorées. Pour ce faire, on peut utiliser deux mécanismes : une « feuille de style » et du code JavaScript pour modifier et ajouter des couleurs dynamiquement.

- -

Indiquer les couleurs via une feuille de style

- -

La façon la plus simple (et la plus fréquemment utilisée) pour appliquer des couleurs est d'utiliser une feuille de style CSS qui sera traitée par le navigateur au moment d'afficher les éléments à l'écran. Par la suite, nous verrons plusieurs exemples (sans pour autant exploiter toutes ces propriétés).

- -

Prenons un exemple et commençons par le résultat :

- -
{{EmbedLiveSample("Specifying_colors_in_stylesheets", 650, 200)}}
- -

HTML

- -

Voici le fragment de code HTML utilisé pour cet exemple :

- -
<div class="conteneur">
-  <div class="boite boiteGauche">
-    <p>
-      Voici la première boîte.
-    </p>
-  </div>
-  <div class="boite boiteDroite">
-    <p>
-      Voici la seconde boîte.
-    </p>
-  </div>
-</div>
- -

Ce fragment est plutôt simple : on utilise un élément <div> qui enveloppe le contenu, constitué de deux <div>, chacun avec une classe différente et contenant chacun un paragraphe (c'est-à-dire un élément <p>).

- -

Voyons ensuite la feuille de style CSS appliquée au bloc HTML précédent.

- -

CSS

- -

Nous allons ici étudier la feuille de style en la décomposant, partie par partie.

- -
.conteneur {
-  width: 620px;
-  height: 110px;
-  margin: 0;
-  padding: 10px;
-  border: 6px solid mediumturquoise;
-}
- -

Le sélecteur de classe .conteneur permet d'appliquer des styles à l'élément <div> qui enveloppe le reste du contenu. Pour ce style, on indique une largeur avec la propriété width et une hauteur avec la propriété height, on définit aussi une marge et une zone de remplissage avec margin et padding.

- -

La règle la plus intéressante est celle où on manipule la propriété border afin de dessiner une bordure sur l'extérieur de l'élément. Cette bordure sera une ligne pleine de 6 pixels avec la couleur mediumturquoise.

- -

Les deux boîtes colorées possèdent un certain nombre de propriétés communes. On utilise donc une classe : .boite pour laquelle on définit ces propriétés qui seront appliquées sur les deux éléments :

- -
.boite {
-  width: 290px;
-  height: 100px;
-  margin: 0;
-  padding: 4px 6px;
-  font: 28px "Marker Felt", "Zapfino", cursive;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
- -

Pour résumer, les styles ciblés par .boite indiquent la taille de la boîte, la configuration de la police de caractères utilisée, centrent le contenu des boîtes grâce aux boîtes flexibles CSS. Pour cela, on utilise le mode d'affichage flex avec display: flex et on paramètre les propriétés justify-content et align-items avec la valeur center. Ensuite, on crée une classe pour chacune des deux boîtes dont chacune définit les propriétés qui diffèrent entre ces éléments.

- -
.boiteGauche {
-  float: left;
-  background-color: rgb(245, 130, 130);
-  outline: 2px solid darkred;
-}
- -

La classe .boiteGauche permet de mettre en forme la boîte située à gauche et on l'utilise pour définir certaines couleurs :

- - - -
.boiteDroite {
-  float: right;
-  background-color: hsl(270deg, 50%, 75%);
-  outline: 4px dashed rgb(110, 20, 120);
-  color: hsl(0deg, 100%, 100%);
-  text-decoration: underline wavy #88ff88;
-  text-shadow: 2px 2px 3px black;
-}
- -

Enfin, la classe .boiteDroite décrit les propriétés de la boîte dessinée à droite. On configure cette boîte afin qu'elle flotte à droite de la boîte précédente. Ensuite, on paramètre les couleurs suivantes :

- - - -

Permettre à l'utilisateur de choisir une couleur

- -

Il existe différentes situations où l'on peut/doit permettre à l'utilisateur de sélectionner une couleur. Il peut s'agir d'une interface personnalisable, d'une application de dessin, d'une application d'édition où on peut choisir la couleur du texte, etc. Bien que, par le passé, il fût nécessaire d'implémenter son propre sélecteur de couleur, HTML fournit désormais aux navigateurs une façon homogène de le faire avec un élément <input> dont l'attribut type vaut "color".

- -

Lorsqu'on choisit une couleur via un élément <input>, la valeur stockée dans le document et envoyée via le formulaire est représentée avec une chaîne de caractères hexadécimale.

- -

Exemple : sélectionner une couleur

- -

Prenons un exemple simple où l'utilisateur choisit une couleur qui est immédiatement appliquée sur la bordure de l'exemple. Une fois la couleur finale sélectionnée, la valeur du sélecteur de couleur est affichée.

- -

{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}

- -
-

Note : Sur macOS, pour indiquer qu'on a fini de choisir la couleur, il faut fermer la fenêtre du sélecteur de couleur.

-
- -

HTML

- -

Voici le fragment HTML qui permet de créer une boîte qui contient un sélecteur de couleur avec un libellé associé (l'élément <label>) ainsi qu'un paragraphe (<p>) vide dans lequel nous placerons plus tard du texte avec JavaScript.

- -
<div id="box">
-  <label for="colorPicker">Couleur de la bordure :</label>
-  <input type="color" value="#8888ff" id="colorPicker">
-  <p id="output"></p>
-</div>
- -

CSS

- -

La feuille CSS détermine la taille de la boîte et une mise en forme simple. La bordure mesure deux pixels de large (mais sera modifiée par le code JavaScript qui va suivre…).

- -
#box {
-  width: 500px;
-  height: 200px;
-  border: 2px solid rgb(245, 220, 225);
-  padding: 4px 6px;
-  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
-}
- -

JavaScript

- -

Le script est utilisé pour mettre à jour la couleur de la bordure afin que celle-ci corresponde à la valeur courante du sélecteur. On ajoute ensuite deux gestionnaires d'évènements pour « écouter » ce qui se passe avec l'élément <input type="color">.

- -
let colorPicker = document.getElementById("colorPicker");
-let box = document.getElementById("box");
-let output = document.getElementById("output");
-
-box.style.borderColor = colorPicker.value;
-
-colorPicker.addEventListener("input", function(event) {
-  box.style.borderColor = event.target.value;
-}, false);
-
-colorPicker.addEventListener("change", function(event) {
-  output.innerText = "Couleur choisie : " + colorPicker.value;
-}, false);
- -

L'évènement input est envoyé chaque fois que la valeur de l'élément change, c'est-à-dire chaque fois que l'utilisateur ajuste la couleur via le sélecteur. Pour chacun de ces évènements, on modifie la couleur de la bordure afin qu'elle corresponde à celle du sélecteur.

- -

L'évènement change est reçu lors de la finalisation du choix de la couleur via le sélecteur. Lorsque cet évènement suvient, on modifie le contenu de l'élément <p> (le paragraphe) qui possède l'identifiant "output" en y ajoutant une chaîne de caractères qui décrit la couleur choisie.

- -

L'art de choisir une couleur

- -

Choisir les bonnes couleurs lors de la conception d'un site web peut s'avérer plus compliqué qu'il n'y paraît. Un mauvais choix de couleur peut nuire à l'attractivité du site voire empêcher les utilisateurs de consulter le contenu si le contraste est trop faible ou les couleurs trop criardes. Dans le pire des cas, le site peut être inutilisable à cause des couleurs choisies pour les personnes qui ont des handicaps visuels.

- -

Trouver les bonnes couleurs

- -

Il existe des outils qui permettent de faciliter la sélection des couleurs. Bien qu'ils ne remplacent pas un bon designer, ils permettent au moins de commencer.

- -

La couleur de base

- -

La première étape consiste à choisir la couleur de base. C'est la couleur principale qui participe à la définition du site web ou du sujet dont il est question. Par exemple, on associe la couleur jaune à La Poste, le bleu au ciel ou à quelque chose de marin, etc. Voici quelques idées (parmi les nombreuses qui existent) pour choisir une couleur de base :

- - - -

Une fois la couleur de base sélectionnée, vous pouvez utiliser certaines extensions de navigateur pour « prélever » des couleurs existantes sur le web. Le site web ColorZilla, par exemple, propose une extension (Chrome / Firefox) qui permet d'utiliser une pipette pour identifier les couleurs utilisées à un endroit d'une page web. Cette extension permet également de mesurer la couleur moyenne des pixels d'une zone donnée.

- -
-

Note : On peut s'apercevoir qu'un site contient plusieurs couleurs très proches les unes des autres, utiliser une « moyenne » permet alors de récupérer le ton principal sous la forme d'une seule couleur.

-
- -

Agrémenter la palette

- -

Une fois la couleur de base sélectionnée et identifiée, il existe de nombreux outils qui permettent de construire une palette de couleurs qui pourront être utilisées avec cette couleur de base. Ces outils utilisent la théorie des couleurs pour déterminer les couleurs appropriées. Certains de ces outils permettent également de voir les couleurs « filtrées » afin de visualiser ce qu'une personne daltonienne verrait.

- -

Voici quelques exemples (libres d'accès et gratuits au moment où nous écrivons ces lignes) de tels outils :

- - - -

Lorsque vous concevez votre palette de couleurs, gardez à l'esprit qu'en plus des couleurs générées par ces outils, il faudra vraisemblablement prévoir des couleurs neutres (telles que le blanc ou un ton de blanc, du noir ou un ton de noir et certaines nuances de gris).

- -
-

Note : On utilise généralement le moins de couleurs possibles afin de garder une cohérence. En utilisant des couleurs afin d'accentuer certains éléments plutôt que d'en utiliser pour tous les éléments de la page, on rend le contenu plus facile à lire et à parcourir. De plus, les couleurs ont ainsi plus d'impact

-
- -

Quelques ressources sur la théorie des couleurs

- -

Décrire l'ensemble des notions liées à la théorie des couleurs dépasse le sujet de cet article. Toutefois, il existe de nombreux articles traitant de ce sujet ainsi que des cours pour apprendre ces notions. Voici quelques-unes des ressources disponibles en ligne à propos de la théorie des couleurs :

- -
-
La science des couleurs (en anglais) (Khan Academy en association avec Pixar)
-
Un cours en ligne qui introduit certains concepts : qu'est-ce qu'une couleur, comment est-elle perçue, comment utiliser les couleurs afin de véhiculer certaines idées.
-
La théorie des couleurs sur Wikipédia (en anglais)
-
La page Wikipédia qui traite de la théorie des couleurs et qui fournit de nombreuses informations techniques.
-
- -

Les couleurs et l'accessibilité

- -

Une couleur peut poser différents problèmes d'accessibilité. Une couleur mal choisie pourra empêcher certaines personnes d'utiliser l'interface du site, ce qui peut se traduire par une baisse de fréquentation, une mauvaise image (au sens propre comme au figuré), etc.

- -

Pour commencer, n'hésitez pas à vous renseigner sur le daltonisme et les différents types de daltonisme : confusion rouge/vert, confusion sur l'ensemble des couleurs.

- -
-

Note : Une règle d'or consiste à ne jamais utiliser une couleur comme seule façon d'indiquer une information. Si, par exemple, vous souhaitez indiquer une réussite ou un échec en changeant uniquement la couleur d'un symbole (un drapeau par exemple), les utilisateurs souffrant de daltonismes et avec une confusion rouge/vert ne pourront pas lire cette information. Il est sans doute préférable d'utiliser du texte et de la couleur afin que tout le monde puisse être en mesure de comprendre ce qui a changé.

-
- -

Pour plus d'informations sur le daltonisme, vous pouvez consulter les articles suivants (en anglais, n'hésitez pas à éditer la page pour ajouter des ressources francophones) :

- - - -

Un exemple de conception de palette

- -

Considérons un exemple rapide pour construire une palette. Imaginons qu'on souhaite construire un site web pour un jeu dont l'action se déroule sur Mars. On peut rechercher des images relatives à Mars sur Google ou sur un autre moteur de recherche. On utilise un sélecteur de couleur pour sélectionner un échantillon de couleur.

- -

Avec une pipette, on identifie la couleur de base : c'est la couleur de code D79C7A, qui correspond à un rouge orangé rouillé, typique de l'imaginaire collectif pour la surface martienne.

- -

Une fois la couleur de base sélectionnée, on construit la palette. Pour cela, nous avons choisi Paletteon afin de compléter avec d'autres couleurs. Lorsqu'on ouvre Palleton, on voit ceci :

- -

L'affichage du site Palleton après l'ouverture

- -

Ensuite, on saisit le code de la couleur (D79C7A) dans le champ "Base RGB" situé en bas à gauche de l'outil :

- -

After entering base color

- -

On obtient alors une palette monochromatique, basée sur la couleur sélectionnée. Si vous avez besoin d'un nuancier autour de cette couleur, la palette monochromatique pourra sans doute vous aider. Mais ici, on souhaite plutôt avoir une couleur qui ressorte, pour cela on clique sur la case "add complementary" sous le menu permettant de sélectionner le type de palette (et qui vaut "Monochromatic"). Paletteon calcule alors une couleur complémentaire appropriée et indique le code de cette nouvelle couleur dans le coin inférieur droit : #508D7C.

- -

Now with complementary colors included.

- -

Si vous n'êtes pas satisfait du résultat obtenu, vous pouvez faire varier le schéma de composition. Ainsi, on pourra utiliser le thème "Triad" qui fournira le résultat suivant :

- -

Triad color scheme selected

- -

On obtient alors un bleu gris en haut à droite. En cliquant dessus, on obtient le code #556E8D. On pourra utiliser cette couleur afin d'accentuer certains éléments tels que les titres ou les onglets mis en évidence ou bien d'autres indicateurs sur le site :

- -

Triad color scheme selected

- -

Maintenant, nous disposons d'une couleur de base, d'une couleur d'accentuation ainsi que de variations autour de celles-ci au cas où nous aurions besoin de dégradés. On peut exporter les couleurs sous différents formats afin de les utiliser.

- -

Avec ces couleurs, il faudra probablement sélectionner quelques couleurs neutres. Une pratique courante consiste à trouver le contraste suffisant pour que le texte soit pleinement lisible mais sans que ce contraste soit trop fort. Il est facile de s'égarer dans l'une ou l'autre des directions : n'hésitez pas à demander des retours sur les couleurs que vous avez sélectionnées. Si le contraste est trop faible, le texte sera illisible et on ne pourra pas le distinguer de l'arrière-plan, cela pourra également poser des problèmes d'accessibilité. Si le contraste est trop élevé, le site pourra paraître criard.

- -

Couleurs, arrière-plans, contraste et impression

- -

Le rendu d'un document peut être différent selon que ce dernier est affiché sur un écran ou sur du papier. De plus, sur papier, on peut chercher à économiser l'encre superflu. Lorsqu'un utilisateur imprime une page, il n'est par exemple peut-être pas nécessaire d'imprimer les arrière-plans. Par défaut, la plupart des navigateurs retirent les images d'arrière-plan à l'impression.

- -

Si les couleurs d'arrière-plan ou les images sont importantes pour l'ensemble du document, on peut utiliser la propriété color-adjust afin d'indiquer au navigateur qu'il ne faut pas modifier l'apparence du contenu.

- -

Par défaut, la propriété color-adjust vaut economy et indique au navigateur qu'il peut modifier l'apparence afin d'optimiser la lisibilité du contenu et d'économiser de l'encre selon le support d'imprimerie.

- -

color-adjust peut être paramétré avec la valeur exact afin d'indiquer au navigateur qu'un ou plusieurs éléments doivent être conservés tels quels afin que l'ensemble du document ne soit pas détérioré.

- -
-

Note : Il n'est pas garanti que le navigateur respecte exactement la feuille de style utilisée avec color-adjust: exact. En effet, si le navigateur fournit une option à l'utilisateur pour ne pas imprimer les arrière-plans, ce réglage prendra le pas sur la feuille de style.

-
- -

Voir aussi

- - diff --git a/files/fr/web/html/applying_color/index.md b/files/fr/web/html/applying_color/index.md new file mode 100644 index 0000000000..ea1e73ea67 --- /dev/null +++ b/files/fr/web/html/applying_color/index.md @@ -0,0 +1,509 @@ +--- +title: Appliquer des couleurs sur des éléments HTML grâce à CSS +slug: Web/HTML/Applying_color +tags: + - Beginner + - CSS + - CSS Colors + - Débutant + - Guide + - HTML + - HTML Colors + - HTML Styles + - Styling HTML + - color +translation_of: Web/HTML/Applying_color +original_slug: Web/HTML/Appliquer_des_couleurs +--- +
{{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.

+ +

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.

+ +

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.

+ +

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.

+ +

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.

+ +

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.

+ +
+
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é).
+
+ +

Boîtes

+ +

Chaque élément est une boîte avec du contenu. Cette boîte possède un arrière-plan et une bordure, quel que soit le contenu qu'elle renferme

+ +
+
Bordures
+
Voir la section Bordures pour la liste des propriétés CSS qui peuvent être utilisées pour colorer la bordure d'une boîte.
+
background-color
+
Cette propriété correspondra à la couleur d'arrière-plan, utilisée dans les zones où l'élément ne possède pas de contenu au premier plan.
+
column-rule-color
+
Cette propriété correspondra à la couleur utilisée pour dessiner la ligne qui sépare des colonnes de texte.
+
outline-color
+
Cette propriété correspondra à la couleur utilisée pour le contour de l'élément. Le contour est différent de la bordure, car il occupe un espace autour de la boîte et peut alors chevaucher le contenu d'une autre boîte. Le contour est généralement utilisé afin d'indiquer que l'élément a le focus et ainsi montrer quel élément reçoit les évènements de saisie.
+
+ +

Bordures

+ +

Tout élément possède une bordure dessinée autour. Une bordure simple est représentée par une ligne dessinant un rectangle autour du contenu de l'élément. Vous pouvez lire la mise en forme des bordures grâce à CSS afin d'approfondir ce sujet.

+ +

Il est possible d'utiliser la propriété raccourcie border qui permet de configurer l'ensemble des caractéristiques d'une bordure en une seule règle (y compris les caractéristiques qui ne sont pas liées aux couleurs comme la largeur, le style (ligne pleine, pointillés, etc.) et ainsi de suite).

+ +
+
border-color
+
Cette propriété correspondra à la couleur qui sera utilisée pour chacun des côtés de la bordure.
+
border-left-color, border-right-color, border-top-color, border-bottom-color
+
Ces propriétés permettent d'indiquer une couleur différente pour chaque côté de la bordure de l'élément.
+
border-block-start-color et border-block-end-color
+
Ces propriétés permettent de définir les couleurs utilisées pour les côtés de la bordure dans l'axe orthogonal au sens d'écriture. Ainsi, si le texte est écrit en français (de gauche à droite), border-block-start-color permettra de définir le côté haut de la bordure et border-block-end-color le côté bas. Ces propriétés sont complétées par les propriétés border-inline-* qui agissent sur l'autre axe.
+
border-inline-start-color et border-inline-end-color
+
Ces propriétés permettent de définir les couleurs utilisées pour les bordures pour les côtés sur l'axe du sens d'écriture. Les côtés impactés dépendent donc des propriétés writing-mode, direction, and text-orientation qui permettent, la plupart du temps, d'ajuster la directionnalité du texte en fonction de la langue utilisée. Si le texte est écrit de droite à gauche, border-inline-start-color correspondra à la couleur appliquée sur le côté droit.
+
+ +

Autres méthodes pour utiliser de la couleur

+ +

CSS n'est pas la seule technologie web qui gère des couleurs. Voici les autres technologies qui permettent d'apporter de la couleur sur une page web.

+ +
+
L'API Canvas
+
Cette API permet de dessiner des graphiques matriciels en deux dimensions à l'intérieur d'un élément <canvas>. Vous pouvez lire le tutoriel sur l'API Canvas pour en savoir plus.
+
SVG (Scalable Vector Graphics)
+
Ce format permet de dessiner des images en indiquant des commandes pour dessiner des formes, des motifs et des lignes afin de composer une image. Les commandes SVG sont construites dans un fichier XML et peuvent être embarquées dans une page web grâce à un élément <img>.
+
WebGL
+
L'API Web Graphics Library est une API basée sur OpenGL ES qui permet de dessiner en deux ou trois dimensions sur le Web. Voir le tutoriel WebGL afin d'en savoir plus.
+
+ +

Comment décrire une couleur

+ +

Afin de représenter une couleur en CSS, il est nécessaire de trouver une méthode pour « traduire » le concept analogique de couleur dans un format numérique qu'un ordinateur pourra utiliser. Pour ce faire, on décompose la couleur en différentes composantes. Cela peut être la part de chaque couleur primaire ou bien la teinte et la luminosité de la couleur. Bref, il existe différentes façons de décrire une couleur en CSS.

+ +

Pour des informations plus détaillées sur chaque type de valeur, vous pouvez consulter la page de la référence CSS à propos de l'unité <color>.

+ +

Mots-clés

+ +

Un ensemble standard de noms de couleurs a été défini et il est possible d'utiliser l'un de ces mots-clés plutôt qu'une représentation numérique s'il existe un mot-clé pour la valeur qu'on souhaite utiliser. Les mots-clés désignant les couleurs regroupent les couleurs primaires et secondaires (tels quered pour rouge, blue pour bleu, orange), les tons de gris (allant de black pour noir à white pour blanc et incluant des niveaux tels que darkgray (gris foncé) et lightgrey (gris clair)). D'autres couleurs sont également disponibles avec un mot-clé comme lightseagreen, cornflowerblue ou rebeccapurple.

+ +

Vous pouvez consulter cette liste pour connaître l'ensemble des mots-clés disponibles.

+ +

Valeurs RGB

+ +

Il existe trois façons de représenter une couleur RGB en CSS.

+ +

La notation hexadécimale

+ +

On peut utiliser une chaîne de caractères avec des chiffres hexadécimaux afin de représenter chacune des composantes (rouge, verte, bleue) (soit, en anglais, red, green, blue qui donne l'acronyme RGB). On peut également décrire une quatrième composante pour l'opacité. Chaque composante est représentée par un nombre entre 0 et 255 (ce qui correspond à 0x00 et 0xFF en notation hexadécimale) ou par un nombre entre 0 et 15 (ce qui correspond à 0x0 et 0xF en notation hexadécimale). Toutes les composantes doivent être indiquées avec le même nombre de chiffres. Si c'est la notation à un seul chiffre qui est utilisée, la couleur finale sera calculée avec chaque composante doublée, autrement dit, "#D" sera converti en "#DD".

+ +

Lorsqu'on utilise une chaîne de caractères avec un code hexadécimal, la chaîne de caractères commence toujours par le caractère "#". Le reste de la chaîne correspond aux chiffres hexadécimaux. L'utilisation des majuscules ou minuscules n'a pas d'importance.

+ +
+
"#rrggbb"
+
Cette forme indique une couleur opaque dont les deux premiers chiffres hexadécimaux indiquent la composante rouge (0xrr), les deux chiffres suivants indiquent la composante verte (0xgg) et les deux derniers chiffres indiquent la composante bleue (0xbb).
+
"#rrggbbaa"
+
Cette forme indique une couleur dont les deux premiers chiffres hexadécimaux indiquent la composante rouge (0xrr), les deux chiffres suivants indiquent la composante verte (0xgg), les deux chiffres suivants indiquent la composante bleue (0xbb), enfin, les deux derniers chiffres indiquent la composante alpha (0xaa) utilisée pour indiquer l'opacité de la couleur (plus la valeur est faible, plus la couleur est transparente).
+
"#rgb"
+
Cette forme indique une couleur dont la composante rouge vaut 0xrr, la composante verte vaut 0xgg et dont la composante bleue vaut 0xbb.
+
"#rgba"
+
Cette forme indique une couleur dont la composante rouge vaut 0xrr, la composante verte vaut 0xgg et dont la composante bleue vaut 0xbb. Le canal alpha vaut 0xaa (plus la valeur est faible, plus la couleur sera transparente).
+
+ +

Par exemple, on pourra représenter un bleu pur et opaque avec les chaînes de caractères "#0000ff" ou "#00f". Pour le rendre opaque à 25%, on utilisera "#0000ff44" ou "#00f4".

+ +

La notation fonctionnelle RGB

+ +

La notation fonctionnelle RGB permet, comme les chaînes de caractères hexadécimales, de représenter des couleurs avec leurs composantes rouge, verte, bleue et éventuellement avec une composante alpha pour l'opacité. Toutefois, au lieu d'utiliser une chaîne de caractères, on utilise ici la fonction CSS rgb(). Cette fonction prend trois arguments pour chacune des composantes (dans cet ordre) rouge, verte et bleue. Un quatrième paramètre, optionnel, permet d'indiquer la valeur du canal alpha.

+ +

Voici les valeurs qui peuvent être utilisées pour chacun de ces paramètres :

+ +
+
red, green et blue
+
Chaque composante doit être un entier (type <integer>) compris entre 0 et 255 (inclus) ou un pourcentage (type <percentage>) compris entre 0% et 100%.
+
alpha
+
Le canal alpha est un nombre entre 0.0 (la couleur est alors totalement transparente) et 1.0 (complètement opaque). On peut également utiliser un pourcentage où 0% correspondra à la valeur 0.0 et 100% correspondra à la valeur 1.0.
+
+ +

Par exemple, on pourra représenter un rouge pur à moitié opaque grâce à rgb(255, 0, 0, 0.5) ou grâce à rgb(100%, 0, 0, 50%).

+ +

La notation fonctionnelle HSL

+ +

D'autres personnes préfèrent manipuler la notation HSL ou aussi appelée « Teinte saturation luminosité » (NDT : HSL signifie Hue Saturation Lightness en anglais). Sur le Web, les couleurs HSL sont représentées grâce à la notation fonctionnelle hsl() (qui fonctionne de façon analogue à la fonction rgb()).

+ +

Le diagramme qui suit illustre un cylindre de couleur pour le modèle HSL : Hue (la teinte) définit la couleur sur un axe radial qui parcourt les couleurs du spectre visible. La saturation est un pourcentage de la teinte entre un gris total et la couleur de la teinte vive. Enfin, la luminosité permet d'avoir des couleurs plus sombres (noir pour une luminosité nulle ou blanc pour une luminosité maximale). Cette image a été créée par SharkD sur Wikipédia et est distribuée avec la licence CC BY-SA 3.0.

+ +Cylindre de couleur HSL + +

La valeur de la teinte (H) est un angle qui commence au rouge, parcourt le jaune, le vert, le cyan, le bleu et le magenta (avant de revenir à rouge avec un angle de 360°). Cette valeur identifie la teinte de base. La valeur utilisée est de type <angle> et on peut utiliser différentes unités disponibles en CSS comme les degrés (deg), les radians (rad), les grades (grad) ou les tours (turn).

+ +

Ensuite, la saturation (S) indique la force de la teinte dans la couleur. Enfin, la luminosité (L) indique le niveau de gris de la couleur.

+ +

On peut faire une analogie avec la conception d'une couleur pour une peinture :

+ +
    +
  1. On commence avec une peinture de base qui possède l'intensité la plus forte pour une couleur donnée (par exemple, le bleu le plus intense qui puisse être affiché) : c'est la teinte (hue) (H). En CSS, c'est un angle qui détermine la couleur parmi une roue de couleurs.
    2. +
  2. Ensuite, on choisit une peinture avec un niveau de gris qui la force de la couleur. Est-ce qu'on veut qu'elle soit claire ou sombre, voire complètement noire ? C'est la luminosité (L). En CSS, c'est un pourcentage, 0% indiquant une couleur noire et 100% une couleur blanche.
    3. +
  3. Enfin, avec ces deux peintures, on décide de la proportion de chacune pour le mélange final : c'est la saturation (S). Plus cette valeur est élevée, plus on utilise la couleur de base, plus cette valeur est faible et plus on utilise la peinture grise.
    4. +
+ +

Il est également possible d'ajouter un canal alpha afin d'avoir une couleur partiellement (ou totalement) transparente.

+ +

Exemples avec HSL

+ +

Voici quelques exemples utilisant la notation HSL :

+ + + + + +

{{EmbedLiveSample("Exemples_avec_HSL", 300, 260)}}

+ +
+

Note : Il est possible d'omettre l'unité pour la valeur de la teinte (hue), l'unité par défaut utilisée sera alors les degrés (deg).

+
+ +

Utiliser les couleurs

+ +

Maintenant qu'on connaît les différentes propriétés CSS, comment décrire une couleur et dans quel format, on peut assembler cela pour utiliser les couleurs dans un document web. Comme on l'a vu précédemment, de nombreuses choses peuvent être colorées. Pour ce faire, on peut utiliser deux mécanismes : une « feuille de style » et du code JavaScript pour modifier et ajouter des couleurs dynamiquement.

+ +

Indiquer les couleurs via une feuille de style

+ +

La façon la plus simple (et la plus fréquemment utilisée) pour appliquer des couleurs est d'utiliser une feuille de style CSS qui sera traitée par le navigateur au moment d'afficher les éléments à l'écran. Par la suite, nous verrons plusieurs exemples (sans pour autant exploiter toutes ces propriétés).

+ +

Prenons un exemple et commençons par le résultat :

+ +
{{EmbedLiveSample("Specifying_colors_in_stylesheets", 650, 200)}}
+ +

HTML

+ +

Voici le fragment de code HTML utilisé pour cet exemple :

+ +
<div class="conteneur">
+  <div class="boite boiteGauche">
+    <p>
+      Voici la première boîte.
+    </p>
+  </div>
+  <div class="boite boiteDroite">
+    <p>
+      Voici la seconde boîte.
+    </p>
+  </div>
+</div>
+ +

Ce fragment est plutôt simple : on utilise un élément <div> qui enveloppe le contenu, constitué de deux <div>, chacun avec une classe différente et contenant chacun un paragraphe (c'est-à-dire un élément <p>).

+ +

Voyons ensuite la feuille de style CSS appliquée au bloc HTML précédent.

+ +

CSS

+ +

Nous allons ici étudier la feuille de style en la décomposant, partie par partie.

+ +
.conteneur {
+  width: 620px;
+  height: 110px;
+  margin: 0;
+  padding: 10px;
+  border: 6px solid mediumturquoise;
+}
+ +

Le sélecteur de classe .conteneur permet d'appliquer des styles à l'élément <div> qui enveloppe le reste du contenu. Pour ce style, on indique une largeur avec la propriété width et une hauteur avec la propriété height, on définit aussi une marge et une zone de remplissage avec margin et padding.

+ +

La règle la plus intéressante est celle où on manipule la propriété border afin de dessiner une bordure sur l'extérieur de l'élément. Cette bordure sera une ligne pleine de 6 pixels avec la couleur mediumturquoise.

+ +

Les deux boîtes colorées possèdent un certain nombre de propriétés communes. On utilise donc une classe : .boite pour laquelle on définit ces propriétés qui seront appliquées sur les deux éléments :

+ +
.boite {
+  width: 290px;
+  height: 100px;
+  margin: 0;
+  padding: 4px 6px;
+  font: 28px "Marker Felt", "Zapfino", cursive;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+ +

Pour résumer, les styles ciblés par .boite indiquent la taille de la boîte, la configuration de la police de caractères utilisée, centrent le contenu des boîtes grâce aux boîtes flexibles CSS. Pour cela, on utilise le mode d'affichage flex avec display: flex et on paramètre les propriétés justify-content et align-items avec la valeur center. Ensuite, on crée une classe pour chacune des deux boîtes dont chacune définit les propriétés qui diffèrent entre ces éléments.

+ +
.boiteGauche {
+  float: left;
+  background-color: rgb(245, 130, 130);
+  outline: 2px solid darkred;
+}
+ +

La classe .boiteGauche permet de mettre en forme la boîte située à gauche et on l'utilise pour définir certaines couleurs :

+ + + +
.boiteDroite {
+  float: right;
+  background-color: hsl(270deg, 50%, 75%);
+  outline: 4px dashed rgb(110, 20, 120);
+  color: hsl(0deg, 100%, 100%);
+  text-decoration: underline wavy #88ff88;
+  text-shadow: 2px 2px 3px black;
+}
+ +

Enfin, la classe .boiteDroite décrit les propriétés de la boîte dessinée à droite. On configure cette boîte afin qu'elle flotte à droite de la boîte précédente. Ensuite, on paramètre les couleurs suivantes :

+ + + +

Permettre à l'utilisateur de choisir une couleur

+ +

Il existe différentes situations où l'on peut/doit permettre à l'utilisateur de sélectionner une couleur. Il peut s'agir d'une interface personnalisable, d'une application de dessin, d'une application d'édition où on peut choisir la couleur du texte, etc. Bien que, par le passé, il fût nécessaire d'implémenter son propre sélecteur de couleur, HTML fournit désormais aux navigateurs une façon homogène de le faire avec un élément <input> dont l'attribut type vaut "color".

+ +

Lorsqu'on choisit une couleur via un élément <input>, la valeur stockée dans le document et envoyée via le formulaire est représentée avec une chaîne de caractères hexadécimale.

+ +

Exemple : sélectionner une couleur

+ +

Prenons un exemple simple où l'utilisateur choisit une couleur qui est immédiatement appliquée sur la bordure de l'exemple. Une fois la couleur finale sélectionnée, la valeur du sélecteur de couleur est affichée.

+ +

{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}

+ +
+

Note : Sur macOS, pour indiquer qu'on a fini de choisir la couleur, il faut fermer la fenêtre du sélecteur de couleur.

+
+ +

HTML

+ +

Voici le fragment HTML qui permet de créer une boîte qui contient un sélecteur de couleur avec un libellé associé (l'élément <label>) ainsi qu'un paragraphe (<p>) vide dans lequel nous placerons plus tard du texte avec JavaScript.

+ +
<div id="box">
+  <label for="colorPicker">Couleur de la bordure :</label>
+  <input type="color" value="#8888ff" id="colorPicker">
+  <p id="output"></p>
+</div>
+ +

CSS

+ +

La feuille CSS détermine la taille de la boîte et une mise en forme simple. La bordure mesure deux pixels de large (mais sera modifiée par le code JavaScript qui va suivre…).

+ +
#box {
+  width: 500px;
+  height: 200px;
+  border: 2px solid rgb(245, 220, 225);
+  padding: 4px 6px;
+  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
+}
+ +

JavaScript

+ +

Le script est utilisé pour mettre à jour la couleur de la bordure afin que celle-ci corresponde à la valeur courante du sélecteur. On ajoute ensuite deux gestionnaires d'évènements pour « écouter » ce qui se passe avec l'élément <input type="color">.

+ +
let colorPicker = document.getElementById("colorPicker");
+let box = document.getElementById("box");
+let output = document.getElementById("output");
+
+box.style.borderColor = colorPicker.value;
+
+colorPicker.addEventListener("input", function(event) {
+  box.style.borderColor = event.target.value;
+}, false);
+
+colorPicker.addEventListener("change", function(event) {
+  output.innerText = "Couleur choisie : " + colorPicker.value;
+}, false);
+ +

L'évènement input est envoyé chaque fois que la valeur de l'élément change, c'est-à-dire chaque fois que l'utilisateur ajuste la couleur via le sélecteur. Pour chacun de ces évènements, on modifie la couleur de la bordure afin qu'elle corresponde à celle du sélecteur.

+ +

L'évènement change est reçu lors de la finalisation du choix de la couleur via le sélecteur. Lorsque cet évènement suvient, on modifie le contenu de l'élément <p> (le paragraphe) qui possède l'identifiant "output" en y ajoutant une chaîne de caractères qui décrit la couleur choisie.

+ +

L'art de choisir une couleur

+ +

Choisir les bonnes couleurs lors de la conception d'un site web peut s'avérer plus compliqué qu'il n'y paraît. Un mauvais choix de couleur peut nuire à l'attractivité du site voire empêcher les utilisateurs de consulter le contenu si le contraste est trop faible ou les couleurs trop criardes. Dans le pire des cas, le site peut être inutilisable à cause des couleurs choisies pour les personnes qui ont des handicaps visuels.

+ +

Trouver les bonnes couleurs

+ +

Il existe des outils qui permettent de faciliter la sélection des couleurs. Bien qu'ils ne remplacent pas un bon designer, ils permettent au moins de commencer.

+ +

La couleur de base

+ +

La première étape consiste à choisir la couleur de base. C'est la couleur principale qui participe à la définition du site web ou du sujet dont il est question. Par exemple, on associe la couleur jaune à La Poste, le bleu au ciel ou à quelque chose de marin, etc. Voici quelques idées (parmi les nombreuses qui existent) pour choisir une couleur de base :

+ + + +

Une fois la couleur de base sélectionnée, vous pouvez utiliser certaines extensions de navigateur pour « prélever » des couleurs existantes sur le web. Le site web ColorZilla, par exemple, propose une extension (Chrome / Firefox) qui permet d'utiliser une pipette pour identifier les couleurs utilisées à un endroit d'une page web. Cette extension permet également de mesurer la couleur moyenne des pixels d'une zone donnée.

+ +
+

Note : On peut s'apercevoir qu'un site contient plusieurs couleurs très proches les unes des autres, utiliser une « moyenne » permet alors de récupérer le ton principal sous la forme d'une seule couleur.

+
+ +

Agrémenter la palette

+ +

Une fois la couleur de base sélectionnée et identifiée, il existe de nombreux outils qui permettent de construire une palette de couleurs qui pourront être utilisées avec cette couleur de base. Ces outils utilisent la théorie des couleurs pour déterminer les couleurs appropriées. Certains de ces outils permettent également de voir les couleurs « filtrées » afin de visualiser ce qu'une personne daltonienne verrait.

+ +

Voici quelques exemples (libres d'accès et gratuits au moment où nous écrivons ces lignes) de tels outils :

+ + + +

Lorsque vous concevez votre palette de couleurs, gardez à l'esprit qu'en plus des couleurs générées par ces outils, il faudra vraisemblablement prévoir des couleurs neutres (telles que le blanc ou un ton de blanc, du noir ou un ton de noir et certaines nuances de gris).

+ +
+

Note : On utilise généralement le moins de couleurs possibles afin de garder une cohérence. En utilisant des couleurs afin d'accentuer certains éléments plutôt que d'en utiliser pour tous les éléments de la page, on rend le contenu plus facile à lire et à parcourir. De plus, les couleurs ont ainsi plus d'impact

+
+ +

Quelques ressources sur la théorie des couleurs

+ +

Décrire l'ensemble des notions liées à la théorie des couleurs dépasse le sujet de cet article. Toutefois, il existe de nombreux articles traitant de ce sujet ainsi que des cours pour apprendre ces notions. Voici quelques-unes des ressources disponibles en ligne à propos de la théorie des couleurs :

+ +
+
La science des couleurs (en anglais) (Khan Academy en association avec Pixar)
+
Un cours en ligne qui introduit certains concepts : qu'est-ce qu'une couleur, comment est-elle perçue, comment utiliser les couleurs afin de véhiculer certaines idées.
+
La théorie des couleurs sur Wikipédia (en anglais)
+
La page Wikipédia qui traite de la théorie des couleurs et qui fournit de nombreuses informations techniques.
+
+ +

Les couleurs et l'accessibilité

+ +

Une couleur peut poser différents problèmes d'accessibilité. Une couleur mal choisie pourra empêcher certaines personnes d'utiliser l'interface du site, ce qui peut se traduire par une baisse de fréquentation, une mauvaise image (au sens propre comme au figuré), etc.

+ +

Pour commencer, n'hésitez pas à vous renseigner sur le daltonisme et les différents types de daltonisme : confusion rouge/vert, confusion sur l'ensemble des couleurs.

+ +
+

Note : Une règle d'or consiste à ne jamais utiliser une couleur comme seule façon d'indiquer une information. Si, par exemple, vous souhaitez indiquer une réussite ou un échec en changeant uniquement la couleur d'un symbole (un drapeau par exemple), les utilisateurs souffrant de daltonismes et avec une confusion rouge/vert ne pourront pas lire cette information. Il est sans doute préférable d'utiliser du texte et de la couleur afin que tout le monde puisse être en mesure de comprendre ce qui a changé.

+
+ +

Pour plus d'informations sur le daltonisme, vous pouvez consulter les articles suivants (en anglais, n'hésitez pas à éditer la page pour ajouter des ressources francophones) :

+ + + +

Un exemple de conception de palette

+ +

Considérons un exemple rapide pour construire une palette. Imaginons qu'on souhaite construire un site web pour un jeu dont l'action se déroule sur Mars. On peut rechercher des images relatives à Mars sur Google ou sur un autre moteur de recherche. On utilise un sélecteur de couleur pour sélectionner un échantillon de couleur.

+ +

Avec une pipette, on identifie la couleur de base : c'est la couleur de code D79C7A, qui correspond à un rouge orangé rouillé, typique de l'imaginaire collectif pour la surface martienne.

+ +

Une fois la couleur de base sélectionnée, on construit la palette. Pour cela, nous avons choisi Paletteon afin de compléter avec d'autres couleurs. Lorsqu'on ouvre Palleton, on voit ceci :

+ +

L'affichage du site Palleton après l'ouverture

+ +

Ensuite, on saisit le code de la couleur (D79C7A) dans le champ "Base RGB" situé en bas à gauche de l'outil :

+ +

After entering base color

+ +

On obtient alors une palette monochromatique, basée sur la couleur sélectionnée. Si vous avez besoin d'un nuancier autour de cette couleur, la palette monochromatique pourra sans doute vous aider. Mais ici, on souhaite plutôt avoir une couleur qui ressorte, pour cela on clique sur la case "add complementary" sous le menu permettant de sélectionner le type de palette (et qui vaut "Monochromatic"). Paletteon calcule alors une couleur complémentaire appropriée et indique le code de cette nouvelle couleur dans le coin inférieur droit : #508D7C.

+ +

Now with complementary colors included.

+ +

Si vous n'êtes pas satisfait du résultat obtenu, vous pouvez faire varier le schéma de composition. Ainsi, on pourra utiliser le thème "Triad" qui fournira le résultat suivant :

+ +

Triad color scheme selected

+ +

On obtient alors un bleu gris en haut à droite. En cliquant dessus, on obtient le code #556E8D. On pourra utiliser cette couleur afin d'accentuer certains éléments tels que les titres ou les onglets mis en évidence ou bien d'autres indicateurs sur le site :

+ +

Triad color scheme selected

+ +

Maintenant, nous disposons d'une couleur de base, d'une couleur d'accentuation ainsi que de variations autour de celles-ci au cas où nous aurions besoin de dégradés. On peut exporter les couleurs sous différents formats afin de les utiliser.

+ +

Avec ces couleurs, il faudra probablement sélectionner quelques couleurs neutres. Une pratique courante consiste à trouver le contraste suffisant pour que le texte soit pleinement lisible mais sans que ce contraste soit trop fort. Il est facile de s'égarer dans l'une ou l'autre des directions : n'hésitez pas à demander des retours sur les couleurs que vous avez sélectionnées. Si le contraste est trop faible, le texte sera illisible et on ne pourra pas le distinguer de l'arrière-plan, cela pourra également poser des problèmes d'accessibilité. Si le contraste est trop élevé, le site pourra paraître criard.

+ +

Couleurs, arrière-plans, contraste et impression

+ +

Le rendu d'un document peut être différent selon que ce dernier est affiché sur un écran ou sur du papier. De plus, sur papier, on peut chercher à économiser l'encre superflu. Lorsqu'un utilisateur imprime une page, il n'est par exemple peut-être pas nécessaire d'imprimer les arrière-plans. Par défaut, la plupart des navigateurs retirent les images d'arrière-plan à l'impression.

+ +

Si les couleurs d'arrière-plan ou les images sont importantes pour l'ensemble du document, on peut utiliser la propriété color-adjust afin d'indiquer au navigateur qu'il ne faut pas modifier l'apparence du contenu.

+ +

Par défaut, la propriété color-adjust vaut economy et indique au navigateur qu'il peut modifier l'apparence afin d'optimiser la lisibilité du contenu et d'économiser de l'encre selon le support d'imprimerie.

+ +

color-adjust peut être paramétré avec la valeur exact afin d'indiquer au navigateur qu'un ou plusieurs éléments doivent être conservés tels quels afin que l'ensemble du document ne soit pas détérioré.

+ +
+

Note : Il n'est pas garanti que le navigateur respecte exactement la feuille de style utilisée avec color-adjust: exact. En effet, si le navigateur fournit une option à l'utilisateur pour ne pas imprimer les arrière-plans, ce réglage prendra le pas sur la feuille de style.

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributes/accept/index.html b/files/fr/web/html/attributes/accept/index.html deleted file mode 100644 index ab22f146ca..0000000000 --- a/files/fr/web/html/attributes/accept/index.html +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: 'Attribut HTML : accept' -slug: Web/HTML/Attributes/accept -tags: - - Accept - - Attribute - - File - - HTML - - Input - - Reference -translation_of: Web/HTML/Attributes/accept ---- -

{{HTMLSidebar}}

- -

L'attribut accept prend comme valeur une liste séparée par des virgules d'un ou plusieurs types de fichiers, ou d'une spécification de type de fichier unique, décrivant les types de fichiers à autoriser. La propriété accept est un attribut pour les éléments <input> de type file. Elle était prise en charge par l'élément <form>, mais a été supprimée au profit de file dans HTML5.

- -

Comme un type de fichier donné peut être identifié de plusieurs manières, il est utile de fournir un ensemble complet de spécificateurs de type lorsque vous avez besoin de fichiers d'un type spécifique, ou d'utiliser le joker pour indiquer qu'un type de n'importe quel format est accepté.

- -

Par exemple, il existe un certain nombre de façons d'identifier les fichiers Microsoft Word, de sorte qu'un site qui accepte les fichiers Word pourrait utiliser un <input> comme celui-ci :

- -
<input type="file" id="docpicker"
-  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
- -

En revanche, si vous acceptez un fichier multimédia, vous pouvez inclure tout format de ce type de média :

- -
<input type="file" id="soundFile" accept="audio/*">
-<input type="file" id="videoFile" accept="video/*">
-<input type="file" id="imageFile" accept="image/*">
- -

L'attribut accept ne valide pas les types de fichiers sélectionnés ; il fournit des indications aux navigateurs pour guider les utilisateurs vers la sélection des bons types de fichiers. Il est toujours possible (dans la plupart des cas) pour les utilisateurs de basculer une option dans le sélecteur de fichiers qui permet de passer outre et de sélectionner le fichier de leur choix, puis de choisir des types de fichiers incorrects.

- -

Pour cette raison, vous devez vous assurer que les exigences attendues sont validées côté serveur.

- -

Exemples

- -

Lorsque cet attribut est utilisé sur un champ permettant de sélectionner un fichier, le sélecteur de fichier natif qui s'ouvre devrait filtrer sur les seuls fichiers qui correspondent au(x) type(s) indiqués. La plupart des systèmes d'exploitation masquent ou grisent alors les fichiers qui ne correspondent pas et ne peuvent pas être sélectionnés.

- -
<p>
-  <label for="soundFile">Sélectionnez un fichier audio :</label>
-  <input type="file" id="soundFile" accept="audio/*">
-</p>
-<p>
-  <label for="videoFile">Sélectionnez un fichier vidéo :</label>
-  <input type="file" id="videoFile" accept="video/*">
-</p>
-<p>
-  <label for="imageFile">Sélectionner des images :</label>
-  <input type="file" id="imageFile" accept="image/*" multiple>
-</p>
- -

{{EmbedLiveSample('examples', '', 160)}}

- -

Notez que le dernier exemple vous permet de sélectionner plusieurs images. Voir l'attribut multiple pour plus d'informations.

- -

Spécification de type de fichier unique

- -

Un spécificateur de type de fichier unique est une chaîne qui décrit un type de fichier pouvant être sélectionné par l'utilisateur dans un élément <input> de type file. Chaque spécificateur unique de type de fichier peut prendre l'une des formes suivantes :

- - - -

L'attribut accept prend comme valeur une chaîne de caractères contenant une ou plusieurs de ces spécificateurs de type de fichier unique, séparées par des virgules. Par exemple, un sélecteur de fichiers qui a besoin d'un contenu pouvant être présenté comme une image, y compris les formats d'image standard et les fichiers PDF, pourrait ressembler à ceci :

- -
<input type="file" accept="image/*,.pdf">
- -

Utilisation des champs pour saisir des fichiers

- -

Un exemple de base

- -
<form method="post" enctype="multipart/form-data">
-  <div>
-    <label for="file">Choisissez le fichier à téléverser</label>
-    <input type="file" id="file" name="file" multiple>
-  </div>
-  <div>
-    <button>Soumettre</button>
-  </div>
-</form>
- -
div {
-  margin-bottom: 10px;
-}
- -

Cela produit le résultat suivant :

- -

{{EmbedLiveSample('a_basic_example', 650, 100)}}

- -
-

Note : Vous pouvez trouver cet exemple sur GitHub également - voir le code source, et aussi le fonctionnement en direct.

-
- -

Quel que soit le dispositif ou le système d'exploitation de l'utilisateur, l'entrée de fichier fournit un bouton qui ouvre une boîte de dialogue de sélection de fichier permettant à l'utilisateur de choisir un fichier.

- -

L'inclusion de l'attribut multiple, comme indiqué ci-dessus, spécifie que plusieurs fichiers peuvent être choisis en même temps. L'utilisateur peut choisir plusieurs fichiers dans le sélecteur de fichiers de n'importe quelle manière permise par la plateforme qu'il a choisie (par exemple, en maintenant la touche Maj ou Ctrl, puis en cliquant). Si vous souhaitez que l'utilisateur ne choisisse qu'un seul fichier par <input>, omettez l'attribut multiple.

- -

Restreindre les types de fichier acceptés

- -

Souvent, vous ne voudrez pas que l'utilisateur puisse choisir n'importe quel type de fichier arbitraire ; au contraire, vous voudrez souvent qu'il sélectionne des fichiers d'un ou plusieurs types spécifiques. Par exemple, si votre entrée de fichier permet aux utilisateurs de télécharger une photo de profil, vous voulez probablement qu'ils sélectionnent des formats d'image compatibles avec le Web, tels que JPEG ou PNG.

- -

Les types de fichiers acceptables peuvent être spécifiés avec l'attribut accept, qui prend une liste d'extensions de fichiers ou de types MIME autorisés séparés par des virgules. Quelques exemples :

- - - -

Examinons un exemple plus complet :

- -
<form method="post" enctype="multipart/form-data">
-  <div>
-    <label for="profile_pic">Choisissez le fichier à téléverser</label>
-    <input type="file" id="profile_pic" name="profile_pic"
-          accept=".jpg, .jpeg, .png">
-  </div>
-  <div>
-    <button>Soumettre</button>
-  </div>
-</form>
- - - -

{{EmbedLiveSample('limiting_accepted_file_types', 650, 100)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - -
SpécificationStatut
{{SpecName('HTML WHATWG', 'input.html#attr-input-accept', 'accept attribute')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'sec-forms.html#attr-input-accept', 'accept attribute')}}{{Spec2('HTML5.1')}}
- -

Compatibilité des navigateurs

- -

{{Compat("html.elements.attribute.accept")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributes/accept/index.md b/files/fr/web/html/attributes/accept/index.md new file mode 100644 index 0000000000..ab22f146ca --- /dev/null +++ b/files/fr/web/html/attributes/accept/index.md @@ -0,0 +1,163 @@ +--- +title: 'Attribut HTML : accept' +slug: Web/HTML/Attributes/accept +tags: + - Accept + - Attribute + - File + - HTML + - Input + - Reference +translation_of: Web/HTML/Attributes/accept +--- +

{{HTMLSidebar}}

+ +

L'attribut accept prend comme valeur une liste séparée par des virgules d'un ou plusieurs types de fichiers, ou d'une spécification de type de fichier unique, décrivant les types de fichiers à autoriser. La propriété accept est un attribut pour les éléments <input> de type file. Elle était prise en charge par l'élément <form>, mais a été supprimée au profit de file dans HTML5.

+ +

Comme un type de fichier donné peut être identifié de plusieurs manières, il est utile de fournir un ensemble complet de spécificateurs de type lorsque vous avez besoin de fichiers d'un type spécifique, ou d'utiliser le joker pour indiquer qu'un type de n'importe quel format est accepté.

+ +

Par exemple, il existe un certain nombre de façons d'identifier les fichiers Microsoft Word, de sorte qu'un site qui accepte les fichiers Word pourrait utiliser un <input> comme celui-ci :

+ +
<input type="file" id="docpicker"
+  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
+ +

En revanche, si vous acceptez un fichier multimédia, vous pouvez inclure tout format de ce type de média :

+ +
<input type="file" id="soundFile" accept="audio/*">
+<input type="file" id="videoFile" accept="video/*">
+<input type="file" id="imageFile" accept="image/*">
+ +

L'attribut accept ne valide pas les types de fichiers sélectionnés ; il fournit des indications aux navigateurs pour guider les utilisateurs vers la sélection des bons types de fichiers. Il est toujours possible (dans la plupart des cas) pour les utilisateurs de basculer une option dans le sélecteur de fichiers qui permet de passer outre et de sélectionner le fichier de leur choix, puis de choisir des types de fichiers incorrects.

+ +

Pour cette raison, vous devez vous assurer que les exigences attendues sont validées côté serveur.

+ +

Exemples

+ +

Lorsque cet attribut est utilisé sur un champ permettant de sélectionner un fichier, le sélecteur de fichier natif qui s'ouvre devrait filtrer sur les seuls fichiers qui correspondent au(x) type(s) indiqués. La plupart des systèmes d'exploitation masquent ou grisent alors les fichiers qui ne correspondent pas et ne peuvent pas être sélectionnés.

+ +
<p>
+  <label for="soundFile">Sélectionnez un fichier audio :</label>
+  <input type="file" id="soundFile" accept="audio/*">
+</p>
+<p>
+  <label for="videoFile">Sélectionnez un fichier vidéo :</label>
+  <input type="file" id="videoFile" accept="video/*">
+</p>
+<p>
+  <label for="imageFile">Sélectionner des images :</label>
+  <input type="file" id="imageFile" accept="image/*" multiple>
+</p>
+ +

{{EmbedLiveSample('examples', '', 160)}}

+ +

Notez que le dernier exemple vous permet de sélectionner plusieurs images. Voir l'attribut multiple pour plus d'informations.

+ +

Spécification de type de fichier unique

+ +

Un spécificateur de type de fichier unique est une chaîne qui décrit un type de fichier pouvant être sélectionné par l'utilisateur dans un élément <input> de type file. Chaque spécificateur unique de type de fichier peut prendre l'une des formes suivantes :

+ + + +

L'attribut accept prend comme valeur une chaîne de caractères contenant une ou plusieurs de ces spécificateurs de type de fichier unique, séparées par des virgules. Par exemple, un sélecteur de fichiers qui a besoin d'un contenu pouvant être présenté comme une image, y compris les formats d'image standard et les fichiers PDF, pourrait ressembler à ceci :

+ +
<input type="file" accept="image/*,.pdf">
+ +

Utilisation des champs pour saisir des fichiers

+ +

Un exemple de base

+ +
<form method="post" enctype="multipart/form-data">
+  <div>
+    <label for="file">Choisissez le fichier à téléverser</label>
+    <input type="file" id="file" name="file" multiple>
+  </div>
+  <div>
+    <button>Soumettre</button>
+  </div>
+</form>
+ +
div {
+  margin-bottom: 10px;
+}
+ +

Cela produit le résultat suivant :

+ +

{{EmbedLiveSample('a_basic_example', 650, 100)}}

+ +
+

Note : Vous pouvez trouver cet exemple sur GitHub également - voir le code source, et aussi le fonctionnement en direct.

+
+ +

Quel que soit le dispositif ou le système d'exploitation de l'utilisateur, l'entrée de fichier fournit un bouton qui ouvre une boîte de dialogue de sélection de fichier permettant à l'utilisateur de choisir un fichier.

+ +

L'inclusion de l'attribut multiple, comme indiqué ci-dessus, spécifie que plusieurs fichiers peuvent être choisis en même temps. L'utilisateur peut choisir plusieurs fichiers dans le sélecteur de fichiers de n'importe quelle manière permise par la plateforme qu'il a choisie (par exemple, en maintenant la touche Maj ou Ctrl, puis en cliquant). Si vous souhaitez que l'utilisateur ne choisisse qu'un seul fichier par <input>, omettez l'attribut multiple.

+ +

Restreindre les types de fichier acceptés

+ +

Souvent, vous ne voudrez pas que l'utilisateur puisse choisir n'importe quel type de fichier arbitraire ; au contraire, vous voudrez souvent qu'il sélectionne des fichiers d'un ou plusieurs types spécifiques. Par exemple, si votre entrée de fichier permet aux utilisateurs de télécharger une photo de profil, vous voulez probablement qu'ils sélectionnent des formats d'image compatibles avec le Web, tels que JPEG ou PNG.

+ +

Les types de fichiers acceptables peuvent être spécifiés avec l'attribut accept, qui prend une liste d'extensions de fichiers ou de types MIME autorisés séparés par des virgules. Quelques exemples :

+ + + +

Examinons un exemple plus complet :

+ +
<form method="post" enctype="multipart/form-data">
+  <div>
+    <label for="profile_pic">Choisissez le fichier à téléverser</label>
+    <input type="file" id="profile_pic" name="profile_pic"
+          accept=".jpg, .jpeg, .png">
+  </div>
+  <div>
+    <button>Soumettre</button>
+  </div>
+</form>
+ + + +

{{EmbedLiveSample('limiting_accepted_file_types', 650, 100)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + +
SpécificationStatut
{{SpecName('HTML WHATWG', 'input.html#attr-input-accept', 'accept attribute')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'sec-forms.html#attr-input-accept', 'accept attribute')}}{{Spec2('HTML5.1')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("html.elements.attribute.accept")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributes/autocomplete/index.html b/files/fr/web/html/attributes/autocomplete/index.html deleted file mode 100644 index a419111c3f..0000000000 --- a/files/fr/web/html/attributes/autocomplete/index.html +++ /dev/null @@ -1,269 +0,0 @@ ---- -title: 'Attribut HTML : autocomplete' -slug: Web/HTML/Attributes/autocomplete -tags: - - Addresses - - Attribute - - Email addresses - - Forms - - HTML - - Input - - Phone Numbers - - Reference - - Select - - Text - - Usernames - - autocomplete - - form - - passwords - - textarea -translation_of: Web/HTML/Attributes/autocomplete -original_slug: Web/HTML/Attributs/autocomplete ---- -
{{HTMLSidebar}}
- -

L'attribut autocomplete est disponible sur les éléments <input> qui prennent une valeur textuelle ou numérique en entrée, mais aussi pour les éléments <textarea>, <select> et <form>. autocomplete permet aux développeuses et développeurs web de spécifier quelle est l'autorisation éventuelle, pour l'agent utilisateur, de fournir une assistance automatisée afin de remplir les valeurs des champs de formulaire, ainsi que des indications au navigateur quant au type d'informations attendues dans le champ.

- -

La source fournissant les valeurs suggérées pour l'autocomplétion dépend du navigateur. Généralement, celle-ci est constituée des valeurs saisies précédemment par l'utilisateur. Des valeurs préconfigurées peuvent aussi être utilisées. Ainsi, un navigateur pourra permettre à un utilisateur d'enregistrer son nom, son adresse, son numéro de téléphone et des adresses électroniques pour l'aider lors de l'autocomplétion. Le navigateur pourrait également fournir le stockage chiffré des informations de cartes bancaires et déclencher une procédure d'authentification lorsque ces informations doivent être récupérées pour être utilisées.

- -

Si les éléments <input>, <select> ou <textarea> ne possèdent pas d'attribut autocomplete, le navigateur utilisera l'attribut autocomplete du formulaire associé (c-à-d. l'élément <form> qui est l'ancêtre de l'élément <input> ou l'élément <form> dont la valeur de l'attribut id correspond à celle indiquée, dans l'attribut form de l'élément <input>).

- -

Pour plus d'informations, voir la documentation de l'attribut autocomplete pour l'élément <form>.

- -
-

Note : Afin de fournir des fonctionnalités d'autocomplétion, un agent utilisateur pourra utiliser les prérequis suivants quant aux éléments <input>/<select>/<textarea>:

- -
    -
  1. Que ceux-ci aient un attribut name et/ou id
    2. -
  2. Que ceux-ci descendent d'un élément <form>
    3. -
  3. Que le formulaire associé ait un bouton submit
    4. -
-
- -

Valeurs

- -
-
off
-
Le navigateur n'est pas autorisé à saisir automatiquement des valeurs pour ce champ. Cette valeur peut être utilisée lorsque le document ou l'application fournit son propre mécanisme d'autocomplétion ou lorsque des raisons de sécurité imposent de ne pas pouvoir saisir la valeur automatiquement. -
-

Note : Pour la plupart des navigateurs modernes, utiliser autocomplete="off" n'empêchera pas un gestionnaire de mots de passe de demander à l'utilisateur s'il souhaite sauvegarder le nom d'utilisateur et le mot de passe ou de renseigner automatiquement les informations pour un formulaire de connexion. Voir l'article sur l'attribut autocomplete et les champs des formulaires de connexion.

-
-
-
on
-
Le navigateur est autorisé à compléter automatiquement le champ. Aucune indication supplémentaire n'est fournie quant au type de donnée attendu et c'est donc au navigateur d'utiliser une heuristique pour proposer des valeurs pertinentes.
-
name
-
Le champ correspondant doit recevoir le nom complet de la personne. Utiliser cette valeur plutôt que les différents composants est une méthode souvent privilégiée car on évite ainsi de gérer les différentes structures des différentes locales. Toutefois, on peut utiliser les composants suivants si on souhaite décomposer l'identité de la personne : -
-
honorific-prefix
-
Le préfixe ou le titre, par exemple « M. », « Mme. », « Me. » , etc.
-
given-name
-
Le prénom.
-
additional-name
-
Le deuxième prénom.
-
family-name
-
Le nom de famille.
-
honorific-suffix
-
Un suffixe (par exemple "Jr.").
-
nickname
-
Un surnom.
-
-
-
email
-
Une adresse électronique.
-
username
-
Un nom de compte ou un nom d'utilisateur.
-
new-password
-
Un nouveau mot de passe. Lors de la création d'un compte ou lors d'un changement de mot de passe, cette valeur pourra être utilisée pour le champ où saisir le nouveau mot de passe. Ainsi, on évitera au navigateur de saisir automatiquement le mot de passe actuel ou le navigateur pourra même proposer un outil permettant de créer un mot de passe sécurisé (voir aussi Empêcher le remplissage automatique avec autocomplete="new-password").
-
current-password
-
Le mot de passe actuel de l'utilisateur.
-
one-time-code
-
Un code à usage unique, utilisé pour vérifier l'identité de l'utilisateur.
-
organization-title
-
Un titre de poste tel que « Directeur général », « Assistant technique » ou « Ingénieur ».
-
organization
-
Le nom d'une entreprise ou d'une organisation.
-
street-address
-
Une adresse postale. Cette adresse peut être un texte sur plusieurs lignes et devrait permettre d'identifier complètement l'emplacement de l'adresse au sein d'une ville. Cette valeur n'inclut pas le nom de la ville, le code postal ou le nom du pays.
-
address-line1, address-line2, address-line3
-
Des lignes individuelles pour décrire l'adresse postale. Ces valeurs peuvent être utilisées seulement lorsque la valeur street-address est absente.
-
address-level4
-
Le niveau d'adresse le plus fin (niveau administratif) lorsque les adresses ont quatre niveaux.
-
address-level3
-
Le troisième niveau de précision d'une adresse de niveau administratif lorsque les adresses ont au moins trois niveaux administratifs.
-
address-level2
-
Le deuxième niveau de précision d'une adresse de niveau administratif lorsque les adresses ont au moins deux niveaux administratifs. Pour les pays avec deux niveaux administratifs, cela correspond généralement à la ville, au village ou à la localité de l'adresse.
-
address-level1
-
Le premier niveau de précision d'une adresse de niveau administratif. C'est généralement la région ou l'état dans lequel se situe l'adresse.
-
country
-
Un code de pays.
-
country-name
-
Un nom de pays.
-
postal-code
-
Un code postal.
-
cc-name
-
Le nom complet tel qu'indiqué sur une carte bancaire. On préfèrera généralement utiliser le nom complet plutôt que de le décomposer en fragments.
-
cc-given-name
-
Le prénom tel qu'indiqué sur une carte bancaire.
-
cc-additional-name
-
Le deuxième prénom tel qu'indiqué sur une carte bancaire.
-
cc-family-name
-
Le nom de famille tel qu'indiqué sur une carte bancaire.
-
cc-number
-
Le numéro de la carte bancaire ou tout autre numéro identifiant une méthode de paiement (ce peut être un numéro de compte par exemple).
-
cc-exp
-
La date d'expiration de la méthode de paiement telle qu'indiquée sur une carte bancaire (généralement sous la forme MM/YY ou sous la forme MM/YYYYY où MM correspond aux deux chiffres du mois et où YY ou YYYY correspondent aux chiffres de l'année).
-
cc-exp-month
-
Le mois d'expiration du moyen de paiement tel qu'indiqué sur une carte bancaire.
-
cc-exp-year
-
L'année d'expiration du moyen de paiement tel qu'indiqué sur une carte bancaire.
-
cc-csc
-
Le cryptogramme du moyen de paiement tel qu'indiqué sur une carte bancaire. Il s'agit généralement du code à trois chiffres de vérification situé au dos de la carte bancaire.
-
cc-type
-
Le type de moyen de paiement ("Visa" ou "Master Card").
-
transaction-currency
-
La devise utilisée pour la transaction courante.
-
transaction-amount
-
Le montant de la transaction, pour un formulaire de paiement, exprimé dans la devise fournie par transaction-currency.
-
language
-
La langue préférée, indiquée sous la forme d'une balise de langue valide selon BCP 47.
-
bday
-
Une date de naissance complète.
-
bday-day
-
Le jour du mois de la date de naissance.
-
bday-month
-
Le mois de l'année de la date de naissance.
-
bday-year
-
L'année de la date de naissance.
-
sex
-
Un genre (tel que « femme », « homme », « Fa'afafine » etc.) sous la forme d'un texte libre sans passage à la ligne.
-
tel
-
Un numéro de téléphone complet qui inclut l'identifiant du pays. Si le numéro de téléphone doit être décomposé en composants, on pourra utiliser les valeurs suivantes : -
-
tel-country-code
-
L'indicateur du pays pour le numéro de téléphone (33 pour la France ou 1 pour les États-Unis par exemple).
-
tel-national
-
Le numéro de téléphone complet sans l'indicateur du pays.
-
tel-area-code
-
Le code de la zone pour le numéro de téléphone avec un préfixe interne au pays si nécessaire.
-
tel-local
-
Le numéro de téléphone sans l'indicateur de pays ni l'indicateur de zone.
-
-
-
tel-extension
-
Une extension au numéro de téléphone qui permet par exemple d'indiquer le numéro de chambre dans un hôtel ou le numéro d'un bureau au sein d'une entreprise.
-
impp
-
Une URL pour un protocole de messagerie instantannée (par exemple "xmpp:username@example.net").
-
url
-
Une URL, pertinente dans le contexte du formulaire.
-
photo
-
L'URL d'une image représentant la personne, l'entreprise ou l'information de contact pour ce formulaire.
-
- -

Voir la spécification WHATWG pour plus de détails.

- -
-

Note : À la différence des autres navigateurs, pour Firefox, l'attribut autocomplete contrôlera également si l'état de désactivation ou de coche dynamique persiste lors d'un rechargement de la page pour un champ <input>. Par défaut, un élément reste désactivé ou coché/décoché lors des rechargements. En utilisant l'attribut autocomplete avec la valeur off, on désactive cette fonctionnalité. Cela fonctionne, y compris lorsque l'attribut autocomplete ne devrait pas s'appliquer à l'élément <input> d'après son type. Voir bug 654072.

-
- -

Exemples

- -
<div>
-  <label for="cc-number">Entrez votre numéro de carte de crédit</label>
-  <input name="cc-number" id="cc-number" autocomplete="off">
-</div>
- -

Les niveaux administratifs pour les adresses

- -

Les quatre niveaux administratifs pour les adresses (address-level1 jusqu'à address-level4) décrivent l'adresse avec un niveau de précision croissant au sein du pays dans lequel l'adresse est situé. Chaque pays possède son propre système de division administrative et peut donc organiser les niveaux selon un ordre différent pour l'écriture des adresses.

- -

address-level1 représente toujours le niveau le plus large : c'est la composante la moins spécifique de l'adresse après la maille du pays.

- -

Disposition du formulaire

- -

Étant donné qu'une adresse s'écrit différemment selon le pays, il peut être utile, si possible, de fournir différentes dispositions de formulaires pour les utilisateurs (éventuellement en fonction de leur locale) pour faciliter la saisie de leur adresse pour leur pays.

- -

Variations

- -

La façon d'utiliser les niveaux administratifs varie d'un pays à l'autre. Voici quelques exemples non exhaustifs.

- -

États-Unis

- -

Aux États-Unis, une adresse s'écrit généralement comme suit :

- -

432 Anywhere St
- Exampleville CA 95555

- -

Dans ce cas, la portion la moins précise est le code "CA" (qui correspond au code postal pour l'état de Californie) et on a donc address-level1 qui correspond à ce niveau (ici l'état et plus particulièrement : "CA").

- -

La deuxième partie de l'adresse la moins précise est le nom de la ville et c'est donc cette information (ici "Exampleville") qui sera utilisée pour address-level2.

- -

Les niveaux 3 et 4 ne sont pas utilisés aux États-Unis.

- -

Royaume-Uni

- -

Le Royaume-Uni utilise un ou deux niveaux d'adresse selon l'adresse. Il s'agit de la ville postale et, dans certains cas, de la localité. Une adresse complète ressemblerait à ceci :

- -

103 Frogmarch Street
-Upper-Wapping
-Winchelsea
-TN99 8ZZ

- -

Les niveaux d'adresse sont les suivants :

- - - -

Le code postal est séparé. Notez que vous pouvez en fait utiliser uniquement le code postal et address-line1 pour réussir à distribuer du courrier au Royaume-Uni, ils devraient donc être les seuls éléments obligatoires, mais les gens ont généralement tendance à fournir plus de détails.

- -

Chine

- -

La Chine utilise jusqu'à trois niveaux administratifs : la province, la ville et le district.

- -

Le code postal à 6 chiffres n'est pas toujours nécessaire mais lorsqu'il est fourni, il est placé séparément avec une étiquette pour plus de clarté. Par exemple :

- -

北京市东城区建国门北大街8号华润大厦17层1708单元
-邮编：100005

- -

Japon

- -

Une adresse au Japon est généralement écrite sur une ligne, dans un ordre allant des parties les moins spécifiques aux plus spécifiques (dans l'ordre inverse des États-Unis). Il y a deux ou trois niveaux administratifs dans une adresse. Une ligne supplémentaire peut être utilisée pour indiquer les noms des bâtiments et les numéros des pièces. Le code postal est séparé. Par exemple :

- -

〒381-0000
-長野県長野市某町123

- -

« 〒 » et les sept chiffres suivants indiquent le code postal.

- -

address-level1 est utilisé pour les préfectures ou la métropole de Tokyo ; « 長野県 » (préfecture de Nagano) dans ce cas. address-level2 est généralement utilisé pour les villes, les comtés, les communes et les villages ; « 長野市 » (ville de Nagano) dans ce cas. « 某町123 » estaddress-line1 qui se compose d'un nom de zone et d'un numéro de colis.

- -

Spécifications

- - - - - - - - - - - - -
Spécification
{{SpecName('HTML WHATWG', "#attr-fe-autocomplete", "autocomplete")}}
- -

Compatibilité des navigateurs

- -

{{Compat("html.global_attributes.autocomplete")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributes/autocomplete/index.md b/files/fr/web/html/attributes/autocomplete/index.md new file mode 100644 index 0000000000..a419111c3f --- /dev/null +++ b/files/fr/web/html/attributes/autocomplete/index.md @@ -0,0 +1,269 @@ +--- +title: 'Attribut HTML : autocomplete' +slug: Web/HTML/Attributes/autocomplete +tags: + - Addresses + - Attribute + - Email addresses + - Forms + - HTML + - Input + - Phone Numbers + - Reference + - Select + - Text + - Usernames + - autocomplete + - form + - passwords + - textarea +translation_of: Web/HTML/Attributes/autocomplete +original_slug: Web/HTML/Attributs/autocomplete +--- +
{{HTMLSidebar}}
+ +

L'attribut autocomplete est disponible sur les éléments <input> qui prennent une valeur textuelle ou numérique en entrée, mais aussi pour les éléments <textarea>, <select> et <form>. autocomplete permet aux développeuses et développeurs web de spécifier quelle est l'autorisation éventuelle, pour l'agent utilisateur, de fournir une assistance automatisée afin de remplir les valeurs des champs de formulaire, ainsi que des indications au navigateur quant au type d'informations attendues dans le champ.

+ +

La source fournissant les valeurs suggérées pour l'autocomplétion dépend du navigateur. Généralement, celle-ci est constituée des valeurs saisies précédemment par l'utilisateur. Des valeurs préconfigurées peuvent aussi être utilisées. Ainsi, un navigateur pourra permettre à un utilisateur d'enregistrer son nom, son adresse, son numéro de téléphone et des adresses électroniques pour l'aider lors de l'autocomplétion. Le navigateur pourrait également fournir le stockage chiffré des informations de cartes bancaires et déclencher une procédure d'authentification lorsque ces informations doivent être récupérées pour être utilisées.

+ +

Si les éléments <input>, <select> ou <textarea> ne possèdent pas d'attribut autocomplete, le navigateur utilisera l'attribut autocomplete du formulaire associé (c-à-d. l'élément <form> qui est l'ancêtre de l'élément <input> ou l'élément <form> dont la valeur de l'attribut id correspond à celle indiquée, dans l'attribut form de l'élément <input>).

+ +

Pour plus d'informations, voir la documentation de l'attribut autocomplete pour l'élément <form>.

+ +
+

Note : Afin de fournir des fonctionnalités d'autocomplétion, un agent utilisateur pourra utiliser les prérequis suivants quant aux éléments <input>/<select>/<textarea>:

+ +
    +
  1. Que ceux-ci aient un attribut name et/ou id
    2. +
  2. Que ceux-ci descendent d'un élément <form>
    3. +
  3. Que le formulaire associé ait un bouton submit
    4. +
+
+ +

Valeurs

+ +
+
off
+
Le navigateur n'est pas autorisé à saisir automatiquement des valeurs pour ce champ. Cette valeur peut être utilisée lorsque le document ou l'application fournit son propre mécanisme d'autocomplétion ou lorsque des raisons de sécurité imposent de ne pas pouvoir saisir la valeur automatiquement. +
+

Note : Pour la plupart des navigateurs modernes, utiliser autocomplete="off" n'empêchera pas un gestionnaire de mots de passe de demander à l'utilisateur s'il souhaite sauvegarder le nom d'utilisateur et le mot de passe ou de renseigner automatiquement les informations pour un formulaire de connexion. Voir l'article sur l'attribut autocomplete et les champs des formulaires de connexion.

+
+
+
on
+
Le navigateur est autorisé à compléter automatiquement le champ. Aucune indication supplémentaire n'est fournie quant au type de donnée attendu et c'est donc au navigateur d'utiliser une heuristique pour proposer des valeurs pertinentes.
+
name
+
Le champ correspondant doit recevoir le nom complet de la personne. Utiliser cette valeur plutôt que les différents composants est une méthode souvent privilégiée car on évite ainsi de gérer les différentes structures des différentes locales. Toutefois, on peut utiliser les composants suivants si on souhaite décomposer l'identité de la personne : +
+
honorific-prefix
+
Le préfixe ou le titre, par exemple « M. », « Mme. », « Me. » , etc.
+
given-name
+
Le prénom.
+
additional-name
+
Le deuxième prénom.
+
family-name
+
Le nom de famille.
+
honorific-suffix
+
Un suffixe (par exemple "Jr.").
+
nickname
+
Un surnom.
+
+
+
email
+
Une adresse électronique.
+
username
+
Un nom de compte ou un nom d'utilisateur.
+
new-password
+
Un nouveau mot de passe. Lors de la création d'un compte ou lors d'un changement de mot de passe, cette valeur pourra être utilisée pour le champ où saisir le nouveau mot de passe. Ainsi, on évitera au navigateur de saisir automatiquement le mot de passe actuel ou le navigateur pourra même proposer un outil permettant de créer un mot de passe sécurisé (voir aussi Empêcher le remplissage automatique avec autocomplete="new-password").
+
current-password
+
Le mot de passe actuel de l'utilisateur.
+
one-time-code
+
Un code à usage unique, utilisé pour vérifier l'identité de l'utilisateur.
+
organization-title
+
Un titre de poste tel que « Directeur général », « Assistant technique » ou « Ingénieur ».
+
organization
+
Le nom d'une entreprise ou d'une organisation.
+
street-address
+
Une adresse postale. Cette adresse peut être un texte sur plusieurs lignes et devrait permettre d'identifier complètement l'emplacement de l'adresse au sein d'une ville. Cette valeur n'inclut pas le nom de la ville, le code postal ou le nom du pays.
+
address-line1, address-line2, address-line3
+
Des lignes individuelles pour décrire l'adresse postale. Ces valeurs peuvent être utilisées seulement lorsque la valeur street-address est absente.
+
address-level4
+
Le niveau d'adresse le plus fin (niveau administratif) lorsque les adresses ont quatre niveaux.
+
address-level3
+
Le troisième niveau de précision d'une adresse de niveau administratif lorsque les adresses ont au moins trois niveaux administratifs.
+
address-level2
+
Le deuxième niveau de précision d'une adresse de niveau administratif lorsque les adresses ont au moins deux niveaux administratifs. Pour les pays avec deux niveaux administratifs, cela correspond généralement à la ville, au village ou à la localité de l'adresse.
+
address-level1
+
Le premier niveau de précision d'une adresse de niveau administratif. C'est généralement la région ou l'état dans lequel se situe l'adresse.
+
country
+
Un code de pays.
+
country-name
+
Un nom de pays.
+
postal-code
+
Un code postal.
+
cc-name
+
Le nom complet tel qu'indiqué sur une carte bancaire. On préfèrera généralement utiliser le nom complet plutôt que de le décomposer en fragments.
+
cc-given-name
+
Le prénom tel qu'indiqué sur une carte bancaire.
+
cc-additional-name
+
Le deuxième prénom tel qu'indiqué sur une carte bancaire.
+
cc-family-name
+
Le nom de famille tel qu'indiqué sur une carte bancaire.
+
cc-number
+
Le numéro de la carte bancaire ou tout autre numéro identifiant une méthode de paiement (ce peut être un numéro de compte par exemple).
+
cc-exp
+
La date d'expiration de la méthode de paiement telle qu'indiquée sur une carte bancaire (généralement sous la forme MM/YY ou sous la forme MM/YYYYY où MM correspond aux deux chiffres du mois et où YY ou YYYY correspondent aux chiffres de l'année).
+
cc-exp-month
+
Le mois d'expiration du moyen de paiement tel qu'indiqué sur une carte bancaire.
+
cc-exp-year
+
L'année d'expiration du moyen de paiement tel qu'indiqué sur une carte bancaire.
+
cc-csc
+
Le cryptogramme du moyen de paiement tel qu'indiqué sur une carte bancaire. Il s'agit généralement du code à trois chiffres de vérification situé au dos de la carte bancaire.
+
cc-type
+
Le type de moyen de paiement ("Visa" ou "Master Card").
+
transaction-currency
+
La devise utilisée pour la transaction courante.
+
transaction-amount
+
Le montant de la transaction, pour un formulaire de paiement, exprimé dans la devise fournie par transaction-currency.
+
language
+
La langue préférée, indiquée sous la forme d'une balise de langue valide selon BCP 47.
+
bday
+
Une date de naissance complète.
+
bday-day
+
Le jour du mois de la date de naissance.
+
bday-month
+
Le mois de l'année de la date de naissance.
+
bday-year
+
L'année de la date de naissance.
+
sex
+
Un genre (tel que « femme », « homme », « Fa'afafine » etc.) sous la forme d'un texte libre sans passage à la ligne.
+
tel
+
Un numéro de téléphone complet qui inclut l'identifiant du pays. Si le numéro de téléphone doit être décomposé en composants, on pourra utiliser les valeurs suivantes : +
+
tel-country-code
+
L'indicateur du pays pour le numéro de téléphone (33 pour la France ou 1 pour les États-Unis par exemple).
+
tel-national
+
Le numéro de téléphone complet sans l'indicateur du pays.
+
tel-area-code
+
Le code de la zone pour le numéro de téléphone avec un préfixe interne au pays si nécessaire.
+
tel-local
+
Le numéro de téléphone sans l'indicateur de pays ni l'indicateur de zone.
+
+
+
tel-extension
+
Une extension au numéro de téléphone qui permet par exemple d'indiquer le numéro de chambre dans un hôtel ou le numéro d'un bureau au sein d'une entreprise.
+
impp
+
Une URL pour un protocole de messagerie instantannée (par exemple "xmpp:username@example.net").
+
url
+
Une URL, pertinente dans le contexte du formulaire.
+
photo
+
L'URL d'une image représentant la personne, l'entreprise ou l'information de contact pour ce formulaire.
+
+ +

Voir la spécification WHATWG pour plus de détails.

+ +
+

Note : À la différence des autres navigateurs, pour Firefox, l'attribut autocomplete contrôlera également si l'état de désactivation ou de coche dynamique persiste lors d'un rechargement de la page pour un champ <input>. Par défaut, un élément reste désactivé ou coché/décoché lors des rechargements. En utilisant l'attribut autocomplete avec la valeur off, on désactive cette fonctionnalité. Cela fonctionne, y compris lorsque l'attribut autocomplete ne devrait pas s'appliquer à l'élément <input> d'après son type. Voir bug 654072.

+
+ +

Exemples

+ +
<div>
+  <label for="cc-number">Entrez votre numéro de carte de crédit</label>
+  <input name="cc-number" id="cc-number" autocomplete="off">
+</div>
+ +

Les niveaux administratifs pour les adresses

+ +

Les quatre niveaux administratifs pour les adresses (address-level1 jusqu'à address-level4) décrivent l'adresse avec un niveau de précision croissant au sein du pays dans lequel l'adresse est situé. Chaque pays possède son propre système de division administrative et peut donc organiser les niveaux selon un ordre différent pour l'écriture des adresses.

+ +

address-level1 représente toujours le niveau le plus large : c'est la composante la moins spécifique de l'adresse après la maille du pays.

+ +

Disposition du formulaire

+ +

Étant donné qu'une adresse s'écrit différemment selon le pays, il peut être utile, si possible, de fournir différentes dispositions de formulaires pour les utilisateurs (éventuellement en fonction de leur locale) pour faciliter la saisie de leur adresse pour leur pays.

+ +

Variations

+ +

La façon d'utiliser les niveaux administratifs varie d'un pays à l'autre. Voici quelques exemples non exhaustifs.

+ +

États-Unis

+ +

Aux États-Unis, une adresse s'écrit généralement comme suit :

+ +

432 Anywhere St
+ Exampleville CA 95555

+ +

Dans ce cas, la portion la moins précise est le code "CA" (qui correspond au code postal pour l'état de Californie) et on a donc address-level1 qui correspond à ce niveau (ici l'état et plus particulièrement : "CA").

+ +

La deuxième partie de l'adresse la moins précise est le nom de la ville et c'est donc cette information (ici "Exampleville") qui sera utilisée pour address-level2.

+ +

Les niveaux 3 et 4 ne sont pas utilisés aux États-Unis.

+ +

Royaume-Uni

+ +

Le Royaume-Uni utilise un ou deux niveaux d'adresse selon l'adresse. Il s'agit de la ville postale et, dans certains cas, de la localité. Une adresse complète ressemblerait à ceci :

+ +

103 Frogmarch Street
+Upper-Wapping
+Winchelsea
+TN99 8ZZ

+ +

Les niveaux d'adresse sont les suivants :

+ + + +

Le code postal est séparé. Notez que vous pouvez en fait utiliser uniquement le code postal et address-line1 pour réussir à distribuer du courrier au Royaume-Uni, ils devraient donc être les seuls éléments obligatoires, mais les gens ont généralement tendance à fournir plus de détails.

+ +

Chine

+ +

La Chine utilise jusqu'à trois niveaux administratifs : la province, la ville et le district.

+ +

Le code postal à 6 chiffres n'est pas toujours nécessaire mais lorsqu'il est fourni, il est placé séparément avec une étiquette pour plus de clarté. Par exemple :

+ +

北京市东城区建国门北大街8号华润大厦17层1708单元
+邮编：100005

+ +

Japon

+ +

Une adresse au Japon est généralement écrite sur une ligne, dans un ordre allant des parties les moins spécifiques aux plus spécifiques (dans l'ordre inverse des États-Unis). Il y a deux ou trois niveaux administratifs dans une adresse. Une ligne supplémentaire peut être utilisée pour indiquer les noms des bâtiments et les numéros des pièces. Le code postal est séparé. Par exemple :

+ +

〒381-0000
+長野県長野市某町123

+ +

« 〒 » et les sept chiffres suivants indiquent le code postal.

+ +

address-level1 est utilisé pour les préfectures ou la métropole de Tokyo ; « 長野県 » (préfecture de Nagano) dans ce cas. address-level2 est généralement utilisé pour les villes, les comtés, les communes et les villages ; « 長野市 » (ville de Nagano) dans ce cas. « 某町123 » estaddress-line1 qui se compose d'un nom de zone et d'un numéro de colis.

+ +

Spécifications

+ + + + + + + + + + + + +
Spécification
{{SpecName('HTML WHATWG', "#attr-fe-autocomplete", "autocomplete")}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("html.global_attributes.autocomplete")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributes/capture/index.html b/files/fr/web/html/attributes/capture/index.html deleted file mode 100644 index c55c1a05e9..0000000000 --- a/files/fr/web/html/attributes/capture/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: 'Attribut HTML : capture' -slug: Web/HTML/Attributes/capture -tags: - - API - - Attribute - - Attributes - - Capture - - Constraint validation - - HTML -translation_of: Web/HTML/Attributes/capture ---- -

{{HTMLSidebar}}

- -

L'attribut capture spécifie que, facultativement, un nouveau fichier doit être capturé, et le périphérique qui devrait être utilisé pour capturer ce nouveau média d'un type défini par l'attribut accept. Les valeurs comprennent user et environment. L'attribut capture est pris en charge sur les champs de formulaire de type file.

- -

L'attribut capture prend pour valeur une chaîne de caractères qui spécifie quelle caméra utiliser pour la capture des données d'image ou de vidéo, si l'attribut accept indique que l'entrée doit être de l'un de ces types.

- - - - - - - - - - - - - - - - - - -
ValeurDescription
userLa caméra et/ou le microphone faisant face à l'utilisateur devraient être utilisés.
environmentLa caméra et/ou le microphone orientés vers l'extérieur devraient être utilisés.
- -
-

Note : Capture était auparavant un attribut booléen qui, lorsqu'il était présent, indiqué que les périphériques de capture de l'appareil (comme la caméra ou le micro) devaient être utilisés plutôt que de demander à l'utilisateur de sélectionner un fichier.

-
- -

Exemples

- -

Lorsqu'ils sont définis sur un type d'entrée de fichier, les systèmes d'exploitation dotés de microphones et de caméras affichent une interface utilisateur permettant la sélection à partir d'un fichier existant ou la création d'un nouveau fichier.

- -
<p>
-  <label for="soundFile">Quel est le son de votre voix ?</label>
-  <input type="file" id="soundFile" capture="user" accept="audio/*">
-</p>
-<p>
-  <label for="videoFile">Téléchargez une vidéo :</label>
-  <input type="file" id="videoFile" capture="environment" accept="video/*">
-</p>
-<p>
-  <label for="imageFile">Téléchargez une photo de vous :</label>
-  <input type="file" id="imageFile" capture="user" accept="image/*">
-</p>
- -

{{EmbedLiveSample('examples', '', 200)}}

- -

Notez que ceux-ci fonctionnent mieux sur les appareils mobiles ; si votre appareil est un ordinateur de bureau, vous obtiendrez probablement un sélecteur de fichiers classique.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatut
{{SpecName('HTML Media Capture', '#the-capture-attribute','capture attribute')}}{{Spec2('HTML Media Capture')}}
- -

Compatibilité des navigateurs

- -

{{Compat("html.elements.attribute.capture")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributes/capture/index.md b/files/fr/web/html/attributes/capture/index.md new file mode 100644 index 0000000000..c55c1a05e9 --- /dev/null +++ b/files/fr/web/html/attributes/capture/index.md @@ -0,0 +1,90 @@ +--- +title: 'Attribut HTML : capture' +slug: Web/HTML/Attributes/capture +tags: + - API + - Attribute + - Attributes + - Capture + - Constraint validation + - HTML +translation_of: Web/HTML/Attributes/capture +--- +

{{HTMLSidebar}}

+ +

L'attribut capture spécifie que, facultativement, un nouveau fichier doit être capturé, et le périphérique qui devrait être utilisé pour capturer ce nouveau média d'un type défini par l'attribut accept. Les valeurs comprennent user et environment. L'attribut capture est pris en charge sur les champs de formulaire de type file.

+ +

L'attribut capture prend pour valeur une chaîne de caractères qui spécifie quelle caméra utiliser pour la capture des données d'image ou de vidéo, si l'attribut accept indique que l'entrée doit être de l'un de ces types.

+ + + + + + + + + + + + + + + + + + +
ValeurDescription
userLa caméra et/ou le microphone faisant face à l'utilisateur devraient être utilisés.
environmentLa caméra et/ou le microphone orientés vers l'extérieur devraient être utilisés.
+ +
+

Note : Capture était auparavant un attribut booléen qui, lorsqu'il était présent, indiqué que les périphériques de capture de l'appareil (comme la caméra ou le micro) devaient être utilisés plutôt que de demander à l'utilisateur de sélectionner un fichier.

+
+ +

Exemples

+ +

Lorsqu'ils sont définis sur un type d'entrée de fichier, les systèmes d'exploitation dotés de microphones et de caméras affichent une interface utilisateur permettant la sélection à partir d'un fichier existant ou la création d'un nouveau fichier.

+ +
<p>
+  <label for="soundFile">Quel est le son de votre voix ?</label>
+  <input type="file" id="soundFile" capture="user" accept="audio/*">
+</p>
+<p>
+  <label for="videoFile">Téléchargez une vidéo :</label>
+  <input type="file" id="videoFile" capture="environment" accept="video/*">
+</p>
+<p>
+  <label for="imageFile">Téléchargez une photo de vous :</label>
+  <input type="file" id="imageFile" capture="user" accept="image/*">
+</p>
+ +

{{EmbedLiveSample('examples', '', 200)}}

+ +

Notez que ceux-ci fonctionnent mieux sur les appareils mobiles ; si votre appareil est un ordinateur de bureau, vous obtiendrez probablement un sélecteur de fichiers classique.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatut
{{SpecName('HTML Media Capture', '#the-capture-attribute','capture attribute')}}{{Spec2('HTML Media Capture')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("html.elements.attribute.capture")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributes/crossorigin/index.html b/files/fr/web/html/attributes/crossorigin/index.html deleted file mode 100644 index 6d9a19c6c6..0000000000 --- a/files/fr/web/html/attributes/crossorigin/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: 'Attribut HTML : crossorigin' -slug: Web/HTML/Attributes/crossorigin -tags: - - Advanced - - Attribute - - CORS - - HTML - - NeedsContent - - Reference - - Security -translation_of: Web/HTML/Attributes/crossorigin -original_slug: Web/HTML/Reglages_des_attributs_CORS ---- -
{{HTMLSidebar}}
- -

L'attribut crossorigin, valable sur les éléments <audio>, <img>, <link>, <script> et <video>, fournit la prise en charge de CORS, définissant la manière dont l'élément traite les demandes d'origine croisée, permettant ainsi la configuration des demandes CORS pour les données extraites de l'élément. Selon l'élément, l'attribut peut être un attribut de paramètres CORS.

- -

L'attribut de contenu crossorigin sur les éléments médias est un attribut de paramétrage CORS.

- -

Ces attributs sont énumérés, et ont les valeurs possibles suivantes :

- - - - - - - - - - - - - - - - - - - - - - -
Mot-cléDescription
anonymousLes requêtes CORS pour cet élément auront le marqueur d'authentification (credentials flag) avec la valeur 'same-origin'.
use-credentialsLes requêtes CORS pour cet élément auront le marqueur d'authentification (credentials flag) avec la valeur 'include'.
""Utiliser la chaîne vide (crossorigin="") ou l'attribut seul (crossorigin) sera équivalent à l'utilisation de la valeur anonymous.
- -

Par défaut (quand l'attribut n'est pas spécifié), le CORS n'est pas du tout utilisé. Le mot-clé « anonymous » signifie que, lorsqu'il n'y a pas la même origine, il n'y aura ni échange d'informations d'authentification de l'utilisateur via des cookies, ni des certificats TLS côté client ou des authentifications HTTP comme détaillé dans la section terminologique de la spécification CORS.

- -

Un mot-clé invalide ou une chaîne de caractères vide seront interprétés comme le mot-clé anonymous.

- -
-

Note : Avant Firefox 83, l'attribut crossorigin n'était pas pris en charge pour rel="icon" ; il existe également un bug sur Chrome.

-
- -

Exemples

-

Utiliser crossorigin avec l'élément script

- -

On peut utiliser l'élément <script> afin d'indiquer au navigateur d'exécuter un script (ici, https://exemple.com/framework-exemple.js) sans envoyer les informations d'authentification de l'utilisateur.

- -
<script src="https://exemple.com/framework-exemple.js" crossorigin="anonymous"></script>
- -

Utiliser des informations d'authentification avec un manifeste

- -

La valeur use-credentials doit être utilisée lorsqu'on récupère un manifeste nécessitant des informations d'authentification, y compris lorsque le fichier provient de la même origine :

- -
<link rel="manifest" href="/app.manifest" crossorigin="use-credentials">
- -

Spécifications

- - - - - - - - - - - - - - - - - - -
SpécificationStatut
{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

Pour l'élément script

- -

{{Compat("html.elements.script.crossorigin")}}

- -

Pour l'élément video

- -

{{Compat("html.elements.video.crossorigin")}}

- - - -

{{Compat("html.elements.link.crossorigin")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributes/crossorigin/index.md b/files/fr/web/html/attributes/crossorigin/index.md new file mode 100644 index 0000000000..6d9a19c6c6 --- /dev/null +++ b/files/fr/web/html/attributes/crossorigin/index.md @@ -0,0 +1,107 @@ +--- +title: 'Attribut HTML : crossorigin' +slug: Web/HTML/Attributes/crossorigin +tags: + - Advanced + - Attribute + - CORS + - HTML + - NeedsContent + - Reference + - Security +translation_of: Web/HTML/Attributes/crossorigin +original_slug: Web/HTML/Reglages_des_attributs_CORS +--- +
{{HTMLSidebar}}
+ +

L'attribut crossorigin, valable sur les éléments <audio>, <img>, <link>, <script> et <video>, fournit la prise en charge de CORS, définissant la manière dont l'élément traite les demandes d'origine croisée, permettant ainsi la configuration des demandes CORS pour les données extraites de l'élément. Selon l'élément, l'attribut peut être un attribut de paramètres CORS.

+ +

L'attribut de contenu crossorigin sur les éléments médias est un attribut de paramétrage CORS.

+ +

Ces attributs sont énumérés, et ont les valeurs possibles suivantes :

+ + + + + + + + + + + + + + + + + + + + + + +
Mot-cléDescription
anonymousLes requêtes CORS pour cet élément auront le marqueur d'authentification (credentials flag) avec la valeur 'same-origin'.
use-credentialsLes requêtes CORS pour cet élément auront le marqueur d'authentification (credentials flag) avec la valeur 'include'.
""Utiliser la chaîne vide (crossorigin="") ou l'attribut seul (crossorigin) sera équivalent à l'utilisation de la valeur anonymous.
+ +

Par défaut (quand l'attribut n'est pas spécifié), le CORS n'est pas du tout utilisé. Le mot-clé « anonymous » signifie que, lorsqu'il n'y a pas la même origine, il n'y aura ni échange d'informations d'authentification de l'utilisateur via des cookies, ni des certificats TLS côté client ou des authentifications HTTP comme détaillé dans la section terminologique de la spécification CORS.

+ +

Un mot-clé invalide ou une chaîne de caractères vide seront interprétés comme le mot-clé anonymous.

+ +
+

Note : Avant Firefox 83, l'attribut crossorigin n'était pas pris en charge pour rel="icon" ; il existe également un bug sur Chrome.

+
+ +

Exemples

+

Utiliser crossorigin avec l'élément script

+ +

On peut utiliser l'élément <script> afin d'indiquer au navigateur d'exécuter un script (ici, https://exemple.com/framework-exemple.js) sans envoyer les informations d'authentification de l'utilisateur.

+ +
<script src="https://exemple.com/framework-exemple.js" crossorigin="anonymous"></script>
+ +

Utiliser des informations d'authentification avec un manifeste

+ +

La valeur use-credentials doit être utilisée lorsqu'on récupère un manifeste nécessitant des informations d'authentification, y compris lorsque le fichier provient de la même origine :

+ +
<link rel="manifest" href="/app.manifest" crossorigin="use-credentials">
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + +
SpécificationStatut
{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

Pour l'élément script

+ +

{{Compat("html.elements.script.crossorigin")}}

+ +

Pour l'élément video

+ +

{{Compat("html.elements.video.crossorigin")}}

+ + + +

{{Compat("html.elements.link.crossorigin")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributes/disabled/index.html b/files/fr/web/html/attributes/disabled/index.html deleted file mode 100644 index 7bc4989a26..0000000000 --- a/files/fr/web/html/attributes/disabled/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: 'Attribut HTML : disabled' -slug: Web/HTML/Attributes/disabled -tags: - - Attribute - - Attributes - - Constraint validation - - Forms - - required -translation_of: Web/HTML/Attributes/disabled ---- -

{{HTMLSidebar}}

- -

L'attribut booléen disabled, lorsqu'il est présent, rend l'élément non mutable, non focusable, ou même non soumis avec le formulaire. L'utilisateur ne peut ni modifier ni cibler le contrôle, ni les descendants du contrôle de formulaire. Si l'attribut disabled est spécifié sur un contrôle de formulaire, l'élément et ses descendants de contrôle de formulaire ne participent pas à la validation des contraintes. Souvent, les navigateurs grisent ces contrôles et ils ne reçoivent aucun événement de navigation, comme les clics de souris ou les événements liés au focus.

- -

L'attribut disabled est utilisé par <button>, <fieldset>, <keygen>, <optgroup>, <option>, <select>, <textarea> et <input>.

- -

Cet attribut booléen indique que l'utilisateur ne peut pas interagir avec le contrôle ou ses contrôles descendants. Si cet attribut n'est pas spécifié, le contrôle hérite ce paramètre de l'élément contenant, par exemple fieldset ; s'il n'y a pas d'élément contenant avec l'attribut disabled défini, et que le contrôle lui-même ne possède pas cet attribut, alors le contrôle est activé. S'il est déclaré sur un <optgroup>, le sélecteur est toujours interactif (sauf s'il est désactivé autrement), mais aucun des éléments du groupe d'options n'est sélectionnable.

- -
-

Note :Si un <fieldset> est désactivé, les contrôles de formulaire descendants sont tous désactivés, à l'exception des contrôles de formulaire dans la légende (<legend>).

-
- -

Lorsqu'un élément de support a l'attribut disabled est appliqué, la pseudo-classe :disabled s'y applique également. Inversement, les éléments qui prennent en charge l'attribut disabled mais qui n'ont pas l'attribut défini correspondent à la pseudo-classe :enabled.

- -

Cet attribut booléen empêche l'utilisateur d'interagir avec le bouton. Si cet attribut n'est pas défini, le bouton peut toujours être désactivé à partir d'un élément contenant, par exemple <fieldset> ; s'il n'y a pas d'élément contenant avec l'attribut disabled défini, alors le bouton est activé.

- -

Firefox va, contrairement aux autres navigateurs, faire persister l'état désactivé dynamique d'un <button> à travers les chargements de pages. Utilisez l'attribut autocomplete pour contrôler cette fonctionnalité.

- -

Interactions entre attributs

- -

La différence entre disabled et readonly est que les contrôles en lecture seule peuvent toujours fonctionner et sont toujours focusables, alors que les contrôles désactivés ne peuvent pas recevoir de focus et ne sont pas soumis avec le formulaire et ne fonctionnent généralement pas comme contrôles jusqu'à ce qu'ils soient activés.

- -

Étant donné qu'un champ désactivé ne peut pas voir sa valeur modifiée, required n'a aucun effet sur les entrées dont l'attribut disabled est également spécifié. De plus, puisque les éléments deviennent immuables, la plupart des autres attributs, tels que pattern, n'ont aucun effet, tant que le contrôle n'est pas activé.

- -
-

Note :L'attribut required n'est pas autorisé sur les entrées pour lesquelles l'attribut disabled est spécifié.

-
- -

Utilisation

- -

Les navigateurs affichent les contrôles de formulaire désactivés en grisé, car les contrôles de formulaire désactivés sont immuables, ne reçoivent pas de focus ou d'événements de navigation, comme les clics de souris ou les événements liés au focus, et ne sont pas soumis avec le formulaire.

- -

S'il est présent sur un élément de support, la pseudo-classe :disabled correspondra. Si l'attribut n'est pas inclus, la pseudo-classe :enabled correspondra. Si l'élément ne prend pas en charge l'attribut disabled, l'attribut n'aura aucun effet, y compris celui de ne pas être apparié par les pseudo-classes :disabled et :enabled.

- -

Validation des contraintes

- -

Si l'élément est disabled, alors la valeur de l'élément ne peut pas recevoir de focus et ne peut pas être mis à jour par l'utilisateur, et ne participe pas à la validation des contraintes.

- -

Exemples

- -

Lorsque les contrôles de formulaire sont désactivés, de nombreux navigateurs les affichent par défaut dans une couleur plus claire et grisée. Voici des exemples de case à cocher, bouton radio, <option> et <optgroup>, ainsi que certains contrôles de formulaire qui sont désactivés via l'attribut disabled défini sur l'élément ancêtre <fieldset>. Les <option> sont désactivés, mais le <select> lui-même ne l'est pas. Nous aurions pu désactiver l'ensemble de <select> en ajoutant l'attribut à cet élément plutôt qu'à ses descendants.

- -
<fieldset>
-  <legend>Cases à cocher</legend>
-  <p><label>
-    <input type="checkbox" name="chbox" value="regular"> Régulier
-  </label></p>
-  <p><label>
-    <input type="checkbox" name="chbox" value="disabled" disabled> désactivé
-  </label></p>
-</fieldset>
-
-<fieldset>
-  <legend>Boutons radio</legend>
-  <p><label>
-    <input type="radio" name="radio" value="regular"> Régulier
-  </label></p>
-  <p><label>
-    <input type="radio" name="radio" value="disabled" disabled> désactivé
-  </label></p>
-</fieldset>
-
-<p>
-  <label>Sélectionnez une option :
-    <select>
-      <optgroup label="Groupe 1">
-        <option>Option 1.1</option>
-      </optgroup>
-      <optgroup label="Groupe 2">
-        <option>Option 2.1</option>
-        <option disabled>Option 2.2</option>
-        <option>Option 2.3</option>
-      </optgroup>
-      <optgroup label="Groupe 3" disabled>
-        <option>Désactivé 3.1</option>
-        <option>Désactivé 3.2</option>
-        <option>Désactivé 3.3</option>
-      </optgroup>
-    </select>
-  </label>
-</p>
-
-<fieldset disabled>
-  <legend>Champ désactivé</legend>
-  <p>
-    <label>Nom : <input type="name" name="radio" value="régulier"> Régulier</label>
-  </p>
-  <p>
-    <label>Nombre : <input type="number"></label>
-  </p>
-</fieldset>
- -
{{EmbedLiveSample('examples', '', 460)}}
- -

Spécifications

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

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributes/disabled/index.md b/files/fr/web/html/attributes/disabled/index.md new file mode 100644 index 0000000000..7bc4989a26 --- /dev/null +++ b/files/fr/web/html/attributes/disabled/index.md @@ -0,0 +1,139 @@ +--- +title: 'Attribut HTML : disabled' +slug: Web/HTML/Attributes/disabled +tags: + - Attribute + - Attributes + - Constraint validation + - Forms + - required +translation_of: Web/HTML/Attributes/disabled +--- +

{{HTMLSidebar}}

+ +

L'attribut booléen disabled, lorsqu'il est présent, rend l'élément non mutable, non focusable, ou même non soumis avec le formulaire. L'utilisateur ne peut ni modifier ni cibler le contrôle, ni les descendants du contrôle de formulaire. Si l'attribut disabled est spécifié sur un contrôle de formulaire, l'élément et ses descendants de contrôle de formulaire ne participent pas à la validation des contraintes. Souvent, les navigateurs grisent ces contrôles et ils ne reçoivent aucun événement de navigation, comme les clics de souris ou les événements liés au focus.

+ +

L'attribut disabled est utilisé par <button>, <fieldset>, <keygen>, <optgroup>, <option>, <select>, <textarea> et <input>.

+ +

Cet attribut booléen indique que l'utilisateur ne peut pas interagir avec le contrôle ou ses contrôles descendants. Si cet attribut n'est pas spécifié, le contrôle hérite ce paramètre de l'élément contenant, par exemple fieldset ; s'il n'y a pas d'élément contenant avec l'attribut disabled défini, et que le contrôle lui-même ne possède pas cet attribut, alors le contrôle est activé. S'il est déclaré sur un <optgroup>, le sélecteur est toujours interactif (sauf s'il est désactivé autrement), mais aucun des éléments du groupe d'options n'est sélectionnable.

+ +
+

Note :Si un <fieldset> est désactivé, les contrôles de formulaire descendants sont tous désactivés, à l'exception des contrôles de formulaire dans la légende (<legend>).

+
+ +

Lorsqu'un élément de support a l'attribut disabled est appliqué, la pseudo-classe :disabled s'y applique également. Inversement, les éléments qui prennent en charge l'attribut disabled mais qui n'ont pas l'attribut défini correspondent à la pseudo-classe :enabled.

+ +

Cet attribut booléen empêche l'utilisateur d'interagir avec le bouton. Si cet attribut n'est pas défini, le bouton peut toujours être désactivé à partir d'un élément contenant, par exemple <fieldset> ; s'il n'y a pas d'élément contenant avec l'attribut disabled défini, alors le bouton est activé.

+ +

Firefox va, contrairement aux autres navigateurs, faire persister l'état désactivé dynamique d'un <button> à travers les chargements de pages. Utilisez l'attribut autocomplete pour contrôler cette fonctionnalité.

+ +

Interactions entre attributs

+ +

La différence entre disabled et readonly est que les contrôles en lecture seule peuvent toujours fonctionner et sont toujours focusables, alors que les contrôles désactivés ne peuvent pas recevoir de focus et ne sont pas soumis avec le formulaire et ne fonctionnent généralement pas comme contrôles jusqu'à ce qu'ils soient activés.

+ +

Étant donné qu'un champ désactivé ne peut pas voir sa valeur modifiée, required n'a aucun effet sur les entrées dont l'attribut disabled est également spécifié. De plus, puisque les éléments deviennent immuables, la plupart des autres attributs, tels que pattern, n'ont aucun effet, tant que le contrôle n'est pas activé.

+ +
+

Note :L'attribut required n'est pas autorisé sur les entrées pour lesquelles l'attribut disabled est spécifié.

+
+ +

Utilisation

+ +

Les navigateurs affichent les contrôles de formulaire désactivés en grisé, car les contrôles de formulaire désactivés sont immuables, ne reçoivent pas de focus ou d'événements de navigation, comme les clics de souris ou les événements liés au focus, et ne sont pas soumis avec le formulaire.

+ +

S'il est présent sur un élément de support, la pseudo-classe :disabled correspondra. Si l'attribut n'est pas inclus, la pseudo-classe :enabled correspondra. Si l'élément ne prend pas en charge l'attribut disabled, l'attribut n'aura aucun effet, y compris celui de ne pas être apparié par les pseudo-classes :disabled et :enabled.

+ +

Validation des contraintes

+ +

Si l'élément est disabled, alors la valeur de l'élément ne peut pas recevoir de focus et ne peut pas être mis à jour par l'utilisateur, et ne participe pas à la validation des contraintes.

+ +

Exemples

+ +

Lorsque les contrôles de formulaire sont désactivés, de nombreux navigateurs les affichent par défaut dans une couleur plus claire et grisée. Voici des exemples de case à cocher, bouton radio, <option> et <optgroup>, ainsi que certains contrôles de formulaire qui sont désactivés via l'attribut disabled défini sur l'élément ancêtre <fieldset>. Les <option> sont désactivés, mais le <select> lui-même ne l'est pas. Nous aurions pu désactiver l'ensemble de <select> en ajoutant l'attribut à cet élément plutôt qu'à ses descendants.

+ +
<fieldset>
+  <legend>Cases à cocher</legend>
+  <p><label>
+    <input type="checkbox" name="chbox" value="regular"> Régulier
+  </label></p>
+  <p><label>
+    <input type="checkbox" name="chbox" value="disabled" disabled> désactivé
+  </label></p>
+</fieldset>
+
+<fieldset>
+  <legend>Boutons radio</legend>
+  <p><label>
+    <input type="radio" name="radio" value="regular"> Régulier
+  </label></p>
+  <p><label>
+    <input type="radio" name="radio" value="disabled" disabled> désactivé
+  </label></p>
+</fieldset>
+
+<p>
+  <label>Sélectionnez une option :
+    <select>
+      <optgroup label="Groupe 1">
+        <option>Option 1.1</option>
+      </optgroup>
+      <optgroup label="Groupe 2">
+        <option>Option 2.1</option>
+        <option disabled>Option 2.2</option>
+        <option>Option 2.3</option>
+      </optgroup>
+      <optgroup label="Groupe 3" disabled>
+        <option>Désactivé 3.1</option>
+        <option>Désactivé 3.2</option>
+        <option>Désactivé 3.3</option>
+      </optgroup>
+    </select>
+  </label>
+</p>
+
+<fieldset disabled>
+  <legend>Champ désactivé</legend>
+  <p>
+    <label>Nom : <input type="name" name="radio" value="régulier"> Régulier</label>
+  </p>
+  <p>
+    <label>Nombre : <input type="number"></label>
+  </p>
+</fieldset>
+ +
{{EmbedLiveSample('examples', '', 460)}}
+ +

Spécifications

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

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributes/elementtiming/index.html b/files/fr/web/html/attributes/elementtiming/index.html deleted file mode 100644 index 36cf4b9628..0000000000 --- a/files/fr/web/html/attributes/elementtiming/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: 'Attribut HTML : elementtiming' -slug: Web/HTML/Attributes/elementtiming -tags: - - Attribute - - Attributes - - HTML - - elementtiming - - Performance - - Reference -translation_of: Web/HTML/Attributes/elementtiming ---- -

{{HTMLSidebar}}

- -

L'attribut elementtiming est utilisé pour indiquer qu'un élément est marqué pour le suivi par l'API Element Timing. Cet attribut peut être appliqué aux éléments <img>, <image> à l'intérieur d'un <svg>, aux vignettes des éléments <video>, aux éléments qui ont un background-image et aux éléments contenant des noeuds de texte, comme un paragraphe (<p>).

- -

Utilisation

- -

La valeur donnée pour elementtiming devient un identifiant pour l'élément observé.

- -
<img alt="alt" src="img.jpg" elementtiming="étiquette pour l'élément">
- -

De bons candidats pour les éléments que vous pourriez vouloir observer sont :

- - - -

Exemples

- -
<img alt="Alt pour l'image principale d'un article de blog"
-     src="my-massive-image.jpg"
-     elementtiming="Image principale">
-
-<p elementtiming="important-text">Quelques informations importantes.</p">
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatut
{{SpecName('Element Timing API', '#sec-modifications-DOM', 'elementtiming')}}{{Spec2('Element Timing API')}}
- -

Compatibilité des navigateurs

- -

{{Compat("html.elements.attribute.elementtiming")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributes/elementtiming/index.md b/files/fr/web/html/attributes/elementtiming/index.md new file mode 100644 index 0000000000..36cf4b9628 --- /dev/null +++ b/files/fr/web/html/attributes/elementtiming/index.md @@ -0,0 +1,65 @@ +--- +title: 'Attribut HTML : elementtiming' +slug: Web/HTML/Attributes/elementtiming +tags: + - Attribute + - Attributes + - HTML + - elementtiming + - Performance + - Reference +translation_of: Web/HTML/Attributes/elementtiming +--- +

{{HTMLSidebar}}

+ +

L'attribut elementtiming est utilisé pour indiquer qu'un élément est marqué pour le suivi par l'API Element Timing. Cet attribut peut être appliqué aux éléments <img>, <image> à l'intérieur d'un <svg>, aux vignettes des éléments <video>, aux éléments qui ont un background-image et aux éléments contenant des noeuds de texte, comme un paragraphe (<p>).

+ +

Utilisation

+ +

La valeur donnée pour elementtiming devient un identifiant pour l'élément observé.

+ +
<img alt="alt" src="img.jpg" elementtiming="étiquette pour l'élément">
+ +

De bons candidats pour les éléments que vous pourriez vouloir observer sont :

+ + + +

Exemples

+ +
<img alt="Alt pour l'image principale d'un article de blog"
+     src="my-massive-image.jpg"
+     elementtiming="Image principale">
+
+<p elementtiming="important-text">Quelques informations importantes.</p">
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatut
{{SpecName('Element Timing API', '#sec-modifications-DOM', 'elementtiming')}}{{Spec2('Element Timing API')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("html.elements.attribute.elementtiming")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributes/for/index.html b/files/fr/web/html/attributes/for/index.html deleted file mode 100644 index 4622351ac0..0000000000 --- a/files/fr/web/html/attributes/for/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: 'Attribut HTML : for' -slug: Web/HTML/Attributes/for -tags: - - Attribute - - Attributes - - HTML - - for - - Reference -translation_of: Web/HTML/Attributes/for ---- -

{{HTMLSidebar}}

- -

L'attribut for est un attribut autorisé pour <label> et <output>. Lorsqu'il est utilisé sur un élément <label>, il indique l'élément de formulaire que ce label décrit. Lorsqu'il est utilisé sur un élément <output>, il permet une relation explicite entre les éléments, qui représentent les valeurs, qui sont utilisées dans le résultat représenté par <output>.

- -

Utilisation

- -

Lorsqu'il est utilisé comme attribut de <label>, l'attribut for a une valeur qui est l'id de l'élément de formulaire, auquel il se rapporte.

- -
<label for="username">Votre nom</label>
-<input type="text" id="username">
- -

Lorsqu'il est utilisé comme attribut de <output>, l'attribut for a une valeur qui est une liste séparée, par des espaces, des valeurs id des éléments, qui sont utilisés pour créer l'output.

- -
<input type="range" id="b" name="b" value="50"> +
-<input type="number" id="a" name="a" value="10"> =
-<output name="result" for="a b">60</output>
- -

Exemples

- -

Voir des exemples d'utilisation sur les pages des éléments pour <label> et <output>.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatut
{{SpecName('HTML WHATWG', 'forms.html#attr-label-for', 'for as used with label')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML WHATWG', 'form-elements.html#attr-output-for', 'for as used with output')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'sec-forms.html#element-attrdef-label-for', 'for as used with label')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML5 W3C', 'sec-forms.html#element-attrdef-output-for', 'for as used with output')}}{{Spec2('HTML5 W3C')}}
- -

Compatibilité des navigateurs

- -

Prise en charge pour label

- -

{{Compat("html.elements.label.for")}}

- -

Prise en charge pour output

- -

{{Compat("html.elements.output.for")}}

diff --git a/files/fr/web/html/attributes/for/index.md b/files/fr/web/html/attributes/for/index.md new file mode 100644 index 0000000000..4622351ac0 --- /dev/null +++ b/files/fr/web/html/attributes/for/index.md @@ -0,0 +1,70 @@ +--- +title: 'Attribut HTML : for' +slug: Web/HTML/Attributes/for +tags: + - Attribute + - Attributes + - HTML + - for + - Reference +translation_of: Web/HTML/Attributes/for +--- +

{{HTMLSidebar}}

+ +

L'attribut for est un attribut autorisé pour <label> et <output>. Lorsqu'il est utilisé sur un élément <label>, il indique l'élément de formulaire que ce label décrit. Lorsqu'il est utilisé sur un élément <output>, il permet une relation explicite entre les éléments, qui représentent les valeurs, qui sont utilisées dans le résultat représenté par <output>.

+ +

Utilisation

+ +

Lorsqu'il est utilisé comme attribut de <label>, l'attribut for a une valeur qui est l'id de l'élément de formulaire, auquel il se rapporte.

+ +
<label for="username">Votre nom</label>
+<input type="text" id="username">
+ +

Lorsqu'il est utilisé comme attribut de <output>, l'attribut for a une valeur qui est une liste séparée, par des espaces, des valeurs id des éléments, qui sont utilisés pour créer l'output.

+ +
<input type="range" id="b" name="b" value="50"> +
+<input type="number" id="a" name="a" value="10"> =
+<output name="result" for="a b">60</output>
+ +

Exemples

+ +

Voir des exemples d'utilisation sur les pages des éléments pour <label> et <output>.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatut
{{SpecName('HTML WHATWG', 'forms.html#attr-label-for', 'for as used with label')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML WHATWG', 'form-elements.html#attr-output-for', 'for as used with output')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'sec-forms.html#element-attrdef-label-for', 'for as used with label')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML5 W3C', 'sec-forms.html#element-attrdef-output-for', 'for as used with output')}}{{Spec2('HTML5 W3C')}}
+ +

Compatibilité des navigateurs

+ +

Prise en charge pour label

+ +

{{Compat("html.elements.label.for")}}

+ +

Prise en charge pour output

+ +

{{Compat("html.elements.output.for")}}

diff --git a/files/fr/web/html/attributes/index.html b/files/fr/web/html/attributes/index.html deleted file mode 100644 index c77e29a6ed..0000000000 --- a/files/fr/web/html/attributes/index.html +++ /dev/null @@ -1,765 +0,0 @@ ---- -title: Référence des attributs HTML -slug: Web/HTML/Attributes -tags: - - Attribute - - Attributes - - Beginner - - Configuring - - Element Attributes - - Elements - - HTML - - Reference - - Settings - - Web -translation_of: Web/HTML/Attributes -original_slug: Web/HTML/Attributs ---- -
{{HTMLSidebar}}
- -

Les éléments HTML ont des attributs ; ce sont des valeurs supplémentaires qui configurent les éléments ou ajustent leur comportement de différentes manières pour répondre aux critères souhaités par les utilisateurs.

- -

Liste des attributs

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Nom de l'attributÉléments concernésDescription
accept<form>, <input>La liste des types acceptés par le serveur. Généralement, il s'agit de types de fichier.
accept-charset<form>La liste des jeux de caractères pris en charge.
accesskeyAttribut universelCet attribut permet de définir un raccourci clavier pour activer un élément ou lui passer le focus.
action<form>L'URI d'un programme qui traite les informations envoyées par le formulaire.
align<applet>, <caption>, <col>, <colgroup>, <hr>, <iframe>, <img>, <table>, <tbody>, <td>, <tfoot> , <th>, <thead>, <tr>Cet attribut définit l'alignement horizontal de l'élément.
allow<iframe>Cet attribut définit les règles des fonctionnalités pour cette iframe.
alt<applet>, <area>, <img>, <input>Un texte alternatif à afficher lorsque l'élément ne peut pas être affiché.
async<script>Cet attribut indique que le script devrait être exécuté de façon asynchrone.
autocapitalizeAttribut universelCet attribut contrôle la façon dont un champ texte est saisi en majuscules de façon automatique.
autocomplete -

<form>, <input>, <select>, <textarea>

- 		Cet attribut indique que ces contrôles ou que ce formulaire peuvent être remplis automatiquement par le navigateur.
autofocus<button>, <input>, <keygen>, <select>, <textarea>Cet attribut indique que l'élément doit recevoir le focus automatiquement une fois que la page est chargée.
autoplay<audio>, <video>Cet attribut indique que l'élément audio ou vidéo doit être lancé dès que possible.
background<body>, <table>, <td>, <th> -

Définit l'URL vers un fichier qui est une image.

- -
-

Note :Bien que les navigateurs et les clients e-mails prennent en charge cet attribut, cet attribut est obsolète. On utilisera plutôt la propriété background-image.

-
-
bgcolor<body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr> -

Cet attribut indique la couleur d'arrière-plan pour l'élément.

- -
-

Note :Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard background-color.

-
-
border<img>, <object>, <table> -

Cet attribut indique la largeur de la bordure.

- -
-

Note :Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard border.

-
-
buffered<audio>, <video>Cet attribut contient la valeur de l'intervalle de temps d'ores et déjà mis en mémoire tampon pour le média de l'élément.
capture<input>À partir de la spécification {{SpecName('HTML Media Capture', '#the-capture-attribute', 'media capture')}}, spécifie qu'un nouveau fichier peut être capturé.
challenge<keygen>Une chaîne de challenge qui est envoyée avec la clef publique.
charset<meta>, <script>Cet attribut déclare l'encodage de caractères utilisé pour la page ou le script.
checked<command>, <input>Cet attribut indique si l'élément doit être vérifié au chargement de la page.
cite<blockquote>, <del>, <ins>, <q>Cet attribut est une URI qui pointe vers la source de la citation ou de la modification.
classAttribut universelCet attribut permet de définir la ou les classes auxquelles appartient un élément afin de le manipuler en script ou de le mettre en forme avec CSS.
code<applet>Cet attribut définit l'URL du fichier de classe qui doit être utilisé pour le chargement et l'exécution de l'applet.
codebase<applet>Cet attribut fournit une URL absolue ou relative du dossier contenant les fichiers .class de l'applet.
color<basefont>, <font>, <hr> -

Cet attribut définit la couleur du texte grâce à un nom de couleur ou grâce à un code hexadécimal dans le format #RRGGBB.

- -
-

Note :Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard color.

-
-
cols<textarea>Cet attribut définit le nombre de colonnes pour le texte contenu dans un textarea.
colspan<td>, <th>Cet attribut définit le nombre de colonnes sur lequel une cellule doit s'étendre.
content<meta>Une valeur associée avec http-equiv ou name selon le contexte.
contenteditableAttribut universelCet attribut indique si le contenu de l'élément peut être édité.
contextmenuAttribut universelCet attribut fait référence à l'identifiant d'un élément <menu> qui sera utilisé comme menu contextuel pour l'élément.
controls<audio>, <video>Cet attribut indique si le navigateur doit afficher les contrôles de lecture du média pour l'utilisateur.
coords<area>Un ensemble de valeurs qui définit les coordonnées de la zone d'intérêt.
crossorigin<audio>, <img>, <link>, <script>, <video>Cet attribut gère les requêtes de différentes origines.
csp {{experimental_inline}}<iframe>Cet attribut définit la politique de sécurité de contenu que le document intégré doit respecter.
data<object>Cet attribut définit l'URL de la ressource.
data-*Attribut universelGrâce aux attributs de donnée, on peut associer des attributs personnalisés afin de transporter des informations spécifiques.
datetime<del>, <ins>, <time>Cet attribut indique la date et l'heure associées à l'élément.
decoding<img>Cet attribut indique la méthode préférée pour décoder l'image.
default<track>Cet attribut indique que la piste devrait être activée sauf si les préférences de l'utilisateur indiquent un autre choix.
defer<script>Cet attribut indique que le script doit être exécuté une fois que la page a été analysée.
dirAttribut universelCet attribut définit la direction du texte (gauche à droite ou droite à gauche).
dirname<input>, <textarea>
disabled<button>, <command>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea>Cet attribut indique si l'utilisateur peut interagir avec l'élément.
download<a>, <area>Cet attribut indique si l'hyperlien est utilisé afin de télécharger une ressource.
draggableAttribut universelCet attribut indique si l'élément peut être déplacé/glissé.
enctype<form>Cet attribut définit le type de contenu des données de formulaire envoyées lorsque la méthode utilisée est POST.
enterkeyhint {{experimental_inline}}<textarea>, contenteditableCet attribut indique le libellé ou l'icône à afficher sur la touche entrée des claviers virtuels. Cet attribut peut être utilisé sur les contrôles de formulaires ou sur les éléments qui sont éditables (par exemple avec l'attribut contenteditable).
for<label>, <output>Cet attribut décrit l'élément auquel se rapporte l'élément courant.
form<button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea>Cet attribut indique le formulaire auquel l'élément se rapporte.
formaction<input>, <button>Cet attribut est l'URI du programme qui traite les données pour ces champs du formulaire. Il prend le pas sur l'attribut action défini pour <form>.
formenctype<input>, <button>Si le bouton ou le champ sert à l'envoi (type="submit"), cet attribut indique l'encodage utilisé pour l'envoi des données. Si cet attribut est indiqué, il surcharge l'attribut enctype du formulaire auquel est rattaché le bouton/champ.
formmethod<input>, <button>Si le bouton ou le champ sert à l'envoi (type="submit"), cet attribut indique la méthode HTTP pour envoyer les données (GET, POST, etc.). Si cet attribut est indiqué, il surcharge l'attribut method du formulaire auquel est rattaché le bouton/champ.
formnovalidate<input>, <button>Si le bouton ou le champ sert à l'envoi (type="submit"), cet attribut booléen indique que le formulaire ne doit pas être validé à l'envoi. Si cet attribut est indiqué, il surcharge l'attribut novalidate du formulaire auquel est rattaché le bouton/champ.
formtarget<input>, <button>Si le bouton ou le champ sert à l'envoi (type="submit"), cet attribut indique le contexte de navigation (onglet, fenêtre ou iframe) dans lequel afficher la réponse après l'envoi du formulaire. Si cet attribut est indiqué, il surcharge l'attribut target du formulaire auquel est rattaché le bouton/champ.
headers<td>, <th>Les identifiants des éléments <th> qui s'appliquent à cet élément.
height<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> -

Pour ces éléments, cet attribut définit la hauteur occupée par l'élément. Pour les autres éléments, on utilisera height property.

- -
-

Note :Pour certains éléments comme <div>,cet attribut est un reliquat et ne devrait plus être utilisé. C'est la propriété CSS height qui est la méthode standard pour définir la hauteur d'un élément.

-
-
hiddenAttribut universelCet attribut empêche le rendu d'un élément sur une page tout en conservant les éléments fils actifs.
high<meter>Cet attribut indique la borne inférieure de l'intervalle haut.
href<a>, <area>, <base>, <link>L'URL de la ressource liée.
hreflang<a>, <area>, <link>Cet attribut indique la langue utilisée pour la ressource liée.
http-equiv<meta>Définit une directive Pragma.
icon<command>Cet attribut indique une image qui représente la commande.
idAttribut universelCet attribut permet d'identifier un élément d'un document de façon unique. Il est généralement utilisé pour manipuler l'élément avec des scripts ou pour le mettre en forme avec CSS.
importance {{experimental_inline}}<iframe>, <img>, <link>, <script>Cet attribut indique la priorité relative pour la récupération (fetch) des ressources.
integrity<link>, <script> -

Une fonctionnalité relative à la sécurité qui permet aux navigateurs de vérifier les fichiers qu'ils récupèrent.

-
intrinsicsize {{deprecated_inline}}<img>Cet attribut indique au navigateur qu'il faut ignorer la taille intrinsèque de l'image et qu'il faut utiliser la taille indiquée avec les attributs.
inputmode<textarea>, contenteditableCet attribut fournit une indication sur le type de donnée qui pourrait être saisi par l'utilisateur lors de l'édition du formulaire ou de l'élément. Cet attribut peut être utilisé sur les contrôles de formulaires ou sur les éléments qui sont éditables (par exemple avec l'attribut contenteditable).
ismap<img>Cet attribut indique que l'image contribue à une mosaïque d'images interactive côté serveur.
itempropAttribut universel
keytype<keygen>Cet attribut définit le type de clé qui est généré.
kind<track>Cet attribut définit le type de piste textuelle.
label<optgroup>, <option>, <track>Cet attribut définit un titre, lisible par un utilisateur, pour l'élément.
langAttribut universelCet attribut définit la langue utilisée dans l'élément.
language<script>Cet attribut définit le langage de script utilisé dans l'élément.
loading {{experimental_inline}}<img>, <iframe>Cet attribut indique que l'élément doit être chargé à la demande.
list<input>Cet attribut constitue une liste d'options prédéfinie qui est suggérée à l'utilisateur.
loop<audio>, <bgsound>, <marquee>, <video>Cet attribut indique si le média courant doit recommencer au début une fois que sa lecture est terminée.
low<meter>Cet attribut indique la borne supérieure de l'intervalle bas.
manifest {{obsolete_inline}}<html>Cet attribut définit l'URL du manifeste du document pour la gestion du cache. -
-

Note :Cet attribut est obsolète, utilisez <link rel="manifest"> à la place.

-
-
max<input>, <meter>, <progress>Cet attribut indique la valeur maximale autorisée.
maxlength<input>, <textarea>Cet attribut définit le nombre maximal de caractères autorisé dans l'élément.
minlength<input>, <textarea>Cet attribut définit le nombre minimal de caractères qui doivent être saisis dans l'élément.
media<a>, <area>, <link>, <source>, <style>Cet attribut est indication à propos du type de média pour la ressource liée.
method<form>Cet attribut définit la méthode HTTP à utiliser pour l'envoi des données du formulaire (GET par défaut ou POST)
min<input>, <meter>Cet attribut indique la valeur minimale autorisée.
multiple<input>, <select>Cet attribut indique si plusieurs valeurs peuvent être saisies pour des entrées de type email ou file.
muted<audio>, <video>Cet attribut indique si le son de la vidéo doit être coupé lorsque la page est chargée initialement.
name<button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param>Le nom de l'élément qui peut être utilisé par le serveur pour identifier le champ d'un formulaire.
novalidate<form>Cet attribut indique que les données du formulaire ne doivent pas être validées lors de l'envoi.
open<details>Cet attribut indique si les détails seront affichés lors du chargement de la page.
optimum<meter>Cet attribut indique la valeur numérique optimale.
pattern<input>Cet attribut définit une expression rationnelle contre laquelle valider la valeur de l'élément.
ping<a>, <area>
placeholder<input>, <textarea>Cet attribut fournit une indication à l'utilisateur sur ce qu'il peut saisir dans le champ.
poster<video>Cet attribut est une URL qui indique l'image à afficher tant que l'utilisateur n'a pas lancé la vidéo ou déplacé le curseur.
preload<audio>, <video>Cet attribut indique si toute ou partie, voire aucune partie de la ressource doit être téléchargée en avance.
radiogroup<command>
readonly<input>, <textarea>Cet attribut indique si l'élément peut être édité.
referrerpolicy<a>, <area>, <iframe>, <img>, <link>, <script>Définit le référent (referrer) envoyé lors de la récupération de la ressource.
rel<a>, <area>, <link>Cet attribut définit la relation entre l'objet cible et l'objet du lien.
required<input>, <select>, <textarea>Cet attribut indique si l'élément doit obligatoirement être renseigné dans le formulaire.
reversed<ol>Cet attribut indique si la liste doit être affichée dans un ordre décroissant plutôt que dans un ordre croissant.
rows<textarea>Cet attribut définit le nombre de lignes pour la zone de texte.
rowspan<td>, <th>Cet attribut définit le nombre de lignes sur lesquelles une cellule doit s'étendre.
sandbox<iframe>Empêche un élément chargé dans une iframe d'utiliser certaines fonctionnalités (envoyer des formulaires ou ouvrir de nouvelles fenêtres par exemples).
scope<th>Définit les cellules sur lesquelles porte la cellule d'en-tête.
scoped{{non-standard_inline}} {{deprecated_inline}}<style>
selected<option>Cet attribut définit la valeur qui sera sélectionnée au chargement de la page.
shape<a>, <area>
size<input>, <select>Cet attribut définit la largeur de l'élément en pixels, si l'attribut type de l'élément vaut text ou password, cela correspond au nombre de caractères du champ.
sizes<link>, <img>, <source>
slotAttribut universelCet attribut affecte un créneau pour un élément dans le shadow DOM.
span<col>, <colgroup>
spellcheckAttribut universelCet attribut indique si la vérification orthographique est activée pour l'élément courant.
src<audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video>Cet attribut indique l'URL du contenu embarqué.
srcdoc<iframe>
srclang<track>
srcset<img>, <source>Une ou plusieurs images candidates adaptatives.
start<ol>Cet attribut définit le premier nombre de la liste si celui-ci est différent de 1.
step<input>
styleAttribut universelCet attribut définit des styles CSS qui auront la priorité sur ceux définis précédemment. Il ne devrait être utilisé qu'à des fins de tests, car il est conseillé d'utiliser un/des fichier(s) à part pour gérer la mise en forme.
summary{{deprecated_inline}}<table>
tabindexAttribut universelCet attribut permet de modifier l'ordre dans la navigation à la tabulation.
target<a>, <area>, <base>, <form>
titleAttribut universelCet attribut définit un texte expliquant le contenu de l'élément et qui est généralement affiché sous la forme d'une bulle d'information au survol de l'élément.
translateAttribut universelCet attribut indique si le contenu textuel de l'élément doit être traduit ou non.
type<button>, <input>, <command>, <embed>, <object>, <script>, <source>, <style>, <menu>Cet attribut définit le type de l'élément.
usemap<img>, <input>, <object>
value<button>, <option>, <input>, <li>, <meter>, <progress>, <param>Cet attribut définit la valeur par défaut qui sera affichée dans l'élément au chargement de la page.
width<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>Pour ces éléments, cet attribut définit la largeur occupée sur l'écran. -
-

Note :Pour tous les autres éléments, comme <div>, il faut utiliser la propriété CSS standard width afin de définir la largeur.

-
-
wrap<textarea>Cet attribut indique l'utilisation du retour automatique à la ligne pour le texte de l'élément.
- -

Attribut de contenu ou attribut IDL ?

- -

En HTML, la plupart des attributs ont deux aspects : l'attribut de contenu et l'attribut IDL (pour Interface Definition Language ou langage de définition des interfaces).

- -

L'attribut de contenu est l'attribut qu'on définit via le contenu (le code HTML) et qu'on obtient et/ou définit via les méthodes element.setAttribute() et element.getAttribute(). L'attribut de contenu sera toujours une chaîne de caractères, y compris lorsque la valeur attendue est un entier. Ainsi, pour indiquer une maxlength d'un élément <input> à 42, on utilisera setAttribute("maxlength", "42") sur cet élément.

- -

L'attribut IDL est également connu sous la forme d'une propriété JavaScript. Ce sont les attributs qu'on peut obtenir ou modifier via JavaScript sous la forme élément.toto. L'attribut IDL utilisera toujours la valeur de l'attribut de contenu sous-jacent, éventuellement en la modifiant pour renvoyer une valeur ou pour la modifier. Autrement dit, les attributs IDL, reflètent les attributs de contenu.

- -

La plupart du temps, les attributs IDL renverront leurs valeurs, telles qu'elles sont utilisées. Par exemple, le type (l'attribut type) par défaut des éléments <input> vaut "text", et si on définit input.type="tototruc", l'élément <input> se comportera comme un élément de type text (en termes d'apparence et de comportement) mais le contenu de l'attribut type sera "tototruc". Cependant, l'attribut de type IDL renverra la chaîne "text".

- -

Les attributs IDL ne sont pas toujours des chaînes de caractères. input.maxlength est un nombre par exemple (un entier long signé pour être précis). Lorsqu'on manipule des attributs IDL on utilisera toujours le type défini pour l'interface. Ainsi, input.maxlength renverra toujours un nombre et si on souhaite le définir, il faudra le faire avec un nombre, si on passe une valeur d'un autre type, cette valeur sera convertie grâce aux mécanismes de conversion habituels de JavaScript.

- -

Les attributs IDL peuvent refléter d'autres types tels que les unsigned long, les URL, les booléens, etc. Malheureusement, il n'existe pas de règles claires et la façon dont les attributs IDL se comportent en conjonction avec leurs attributs de contenu correspondants, cela dépend de l'attribut. La plupart du temps, il suivra les règles énoncées dans la spécification, mais parfois, il ne le fera pas. Les spécifications HTML essaient de rendre cela aussi convivial que possible pour les développeurs, mais pour diverses raisons (principalement historiques), certains attributs se comportent bizarrement (select.size, par exemple) et vous devriez lire les spécifications pour comprendre comment ils se comportent exactement.

- -

Attributs booléens

- -

Certains attributs de contenu (ex. required, readonly, disabled) sont des attributs booléens. Si un attribut booléen est présent, sa valeur correspondra à vrai (true), s'il est absent, sa valeur correspondra à faux (false).

- -

HTML5 définit des restrictions sur les valeurs autorisées des attributs booléens : Si l'attribut est présent, sa valeur doit être soit la chaîne vide (équivalente, l'attribut peut avoir une valeur non attribuée), soit une valeur qui est une correspondance ASCII insensible à la casse pour le nom canonique de l'attribut, sans espace avant ou après. Les exemples suivants sont des façons valides de baliser un attribut booléen :

- -
<div itemscope>Ce fragment est du HTML valide mais du XML invalide.</div>
-<div itemscope=itemscope>Ce fragment est du HTML valide mais du XML invalide.</div>
-<div itemscope="">Ce fragment est du HTML valide et du XML valide.</div>
-<div itemscope="itemscope">Ce fragment est du HTML et du XML valide mais est plus verbeux.</div>
- -

Pour être tout à fait explicite, les valeurs "true" et "false" ne sont pas autorisées pour les attributs booléens. Pour représenter une valeur fausse, il faudra ne pas écrire l'attribut du tout. Cette règle peut entraîner quelques incompréhensions : si on écrit checked="false" l'attribut checked sera présent et donc considéré comme vrai (true).

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributes/index.md b/files/fr/web/html/attributes/index.md new file mode 100644 index 0000000000..c77e29a6ed --- /dev/null +++ b/files/fr/web/html/attributes/index.md @@ -0,0 +1,765 @@ +--- +title: Référence des attributs HTML +slug: Web/HTML/Attributes +tags: + - Attribute + - Attributes + - Beginner + - Configuring + - Element Attributes + - Elements + - HTML + - Reference + - Settings + - Web +translation_of: Web/HTML/Attributes +original_slug: Web/HTML/Attributs +--- +
{{HTMLSidebar}}
+ +

Les éléments HTML ont des attributs ; ce sont des valeurs supplémentaires qui configurent les éléments ou ajustent leur comportement de différentes manières pour répondre aux critères souhaités par les utilisateurs.

+ +

Liste des attributs

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nom de l'attributÉléments concernésDescription
accept<form>, <input>La liste des types acceptés par le serveur. Généralement, il s'agit de types de fichier.
accept-charset<form>La liste des jeux de caractères pris en charge.
accesskeyAttribut universelCet attribut permet de définir un raccourci clavier pour activer un élément ou lui passer le focus.
action<form>L'URI d'un programme qui traite les informations envoyées par le formulaire.
align<applet>, <caption>, <col>, <colgroup>, <hr>, <iframe>, <img>, <table>, <tbody>, <td>, <tfoot> , <th>, <thead>, <tr>Cet attribut définit l'alignement horizontal de l'élément.
allow<iframe>Cet attribut définit les règles des fonctionnalités pour cette iframe.
alt<applet>, <area>, <img>, <input>Un texte alternatif à afficher lorsque l'élément ne peut pas être affiché.
async<script>Cet attribut indique que le script devrait être exécuté de façon asynchrone.
autocapitalizeAttribut universelCet attribut contrôle la façon dont un champ texte est saisi en majuscules de façon automatique.
autocomplete +

<form>, <input>, <select>, <textarea>

+ 		Cet attribut indique que ces contrôles ou que ce formulaire peuvent être remplis automatiquement par le navigateur.
autofocus<button>, <input>, <keygen>, <select>, <textarea>Cet attribut indique que l'élément doit recevoir le focus automatiquement une fois que la page est chargée.
autoplay<audio>, <video>Cet attribut indique que l'élément audio ou vidéo doit être lancé dès que possible.
background<body>, <table>, <td>, <th> +

Définit l'URL vers un fichier qui est une image.

+ +
+

Note :Bien que les navigateurs et les clients e-mails prennent en charge cet attribut, cet attribut est obsolète. On utilisera plutôt la propriété background-image.

+
+
bgcolor<body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr> +

Cet attribut indique la couleur d'arrière-plan pour l'élément.

+ +
+

Note :Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard background-color.

+
+
border<img>, <object>, <table> +

Cet attribut indique la largeur de la bordure.

+ +
+

Note :Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard border.

+
+
buffered<audio>, <video>Cet attribut contient la valeur de l'intervalle de temps d'ores et déjà mis en mémoire tampon pour le média de l'élément.
capture<input>À partir de la spécification {{SpecName('HTML Media Capture', '#the-capture-attribute', 'media capture')}}, spécifie qu'un nouveau fichier peut être capturé.
challenge<keygen>Une chaîne de challenge qui est envoyée avec la clef publique.
charset<meta>, <script>Cet attribut déclare l'encodage de caractères utilisé pour la page ou le script.
checked<command>, <input>Cet attribut indique si l'élément doit être vérifié au chargement de la page.
cite<blockquote>, <del>, <ins>, <q>Cet attribut est une URI qui pointe vers la source de la citation ou de la modification.
classAttribut universelCet attribut permet de définir la ou les classes auxquelles appartient un élément afin de le manipuler en script ou de le mettre en forme avec CSS.
code<applet>Cet attribut définit l'URL du fichier de classe qui doit être utilisé pour le chargement et l'exécution de l'applet.
codebase<applet>Cet attribut fournit une URL absolue ou relative du dossier contenant les fichiers .class de l'applet.
color<basefont>, <font>, <hr> +

Cet attribut définit la couleur du texte grâce à un nom de couleur ou grâce à un code hexadécimal dans le format #RRGGBB.

+ +
+

Note :Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard color.

+
+
cols<textarea>Cet attribut définit le nombre de colonnes pour le texte contenu dans un textarea.
colspan<td>, <th>Cet attribut définit le nombre de colonnes sur lequel une cellule doit s'étendre.
content<meta>Une valeur associée avec http-equiv ou name selon le contexte.
contenteditableAttribut universelCet attribut indique si le contenu de l'élément peut être édité.
contextmenuAttribut universelCet attribut fait référence à l'identifiant d'un élément <menu> qui sera utilisé comme menu contextuel pour l'élément.
controls<audio>, <video>Cet attribut indique si le navigateur doit afficher les contrôles de lecture du média pour l'utilisateur.
coords<area>Un ensemble de valeurs qui définit les coordonnées de la zone d'intérêt.
crossorigin<audio>, <img>, <link>, <script>, <video>Cet attribut gère les requêtes de différentes origines.
csp {{experimental_inline}}<iframe>Cet attribut définit la politique de sécurité de contenu que le document intégré doit respecter.
data<object>Cet attribut définit l'URL de la ressource.
data-*Attribut universelGrâce aux attributs de donnée, on peut associer des attributs personnalisés afin de transporter des informations spécifiques.
datetime<del>, <ins>, <time>Cet attribut indique la date et l'heure associées à l'élément.
decoding<img>Cet attribut indique la méthode préférée pour décoder l'image.
default<track>Cet attribut indique que la piste devrait être activée sauf si les préférences de l'utilisateur indiquent un autre choix.
defer<script>Cet attribut indique que le script doit être exécuté une fois que la page a été analysée.
dirAttribut universelCet attribut définit la direction du texte (gauche à droite ou droite à gauche).
dirname<input>, <textarea>
disabled<button>, <command>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea>Cet attribut indique si l'utilisateur peut interagir avec l'élément.
download<a>, <area>Cet attribut indique si l'hyperlien est utilisé afin de télécharger une ressource.
draggableAttribut universelCet attribut indique si l'élément peut être déplacé/glissé.
enctype<form>Cet attribut définit le type de contenu des données de formulaire envoyées lorsque la méthode utilisée est POST.
enterkeyhint {{experimental_inline}}<textarea>, contenteditableCet attribut indique le libellé ou l'icône à afficher sur la touche entrée des claviers virtuels. Cet attribut peut être utilisé sur les contrôles de formulaires ou sur les éléments qui sont éditables (par exemple avec l'attribut contenteditable).
for<label>, <output>Cet attribut décrit l'élément auquel se rapporte l'élément courant.
form<button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea>Cet attribut indique le formulaire auquel l'élément se rapporte.
formaction<input>, <button>Cet attribut est l'URI du programme qui traite les données pour ces champs du formulaire. Il prend le pas sur l'attribut action défini pour <form>.
formenctype<input>, <button>Si le bouton ou le champ sert à l'envoi (type="submit"), cet attribut indique l'encodage utilisé pour l'envoi des données. Si cet attribut est indiqué, il surcharge l'attribut enctype du formulaire auquel est rattaché le bouton/champ.
formmethod<input>, <button>Si le bouton ou le champ sert à l'envoi (type="submit"), cet attribut indique la méthode HTTP pour envoyer les données (GET, POST, etc.). Si cet attribut est indiqué, il surcharge l'attribut method du formulaire auquel est rattaché le bouton/champ.
formnovalidate<input>, <button>Si le bouton ou le champ sert à l'envoi (type="submit"), cet attribut booléen indique que le formulaire ne doit pas être validé à l'envoi. Si cet attribut est indiqué, il surcharge l'attribut novalidate du formulaire auquel est rattaché le bouton/champ.
formtarget<input>, <button>Si le bouton ou le champ sert à l'envoi (type="submit"), cet attribut indique le contexte de navigation (onglet, fenêtre ou iframe) dans lequel afficher la réponse après l'envoi du formulaire. Si cet attribut est indiqué, il surcharge l'attribut target du formulaire auquel est rattaché le bouton/champ.
headers<td>, <th>Les identifiants des éléments <th> qui s'appliquent à cet élément.
height<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> +

Pour ces éléments, cet attribut définit la hauteur occupée par l'élément. Pour les autres éléments, on utilisera height property.

+ +
+

Note :Pour certains éléments comme <div>,cet attribut est un reliquat et ne devrait plus être utilisé. C'est la propriété CSS height qui est la méthode standard pour définir la hauteur d'un élément.

+
+
hiddenAttribut universelCet attribut empêche le rendu d'un élément sur une page tout en conservant les éléments fils actifs.
high<meter>Cet attribut indique la borne inférieure de l'intervalle haut.
href<a>, <area>, <base>, <link>L'URL de la ressource liée.
hreflang<a>, <area>, <link>Cet attribut indique la langue utilisée pour la ressource liée.
http-equiv<meta>Définit une directive Pragma.
icon<command>Cet attribut indique une image qui représente la commande.
idAttribut universelCet attribut permet d'identifier un élément d'un document de façon unique. Il est généralement utilisé pour manipuler l'élément avec des scripts ou pour le mettre en forme avec CSS.
importance {{experimental_inline}}<iframe>, <img>, <link>, <script>Cet attribut indique la priorité relative pour la récupération (fetch) des ressources.
integrity<link>, <script> +

Une fonctionnalité relative à la sécurité qui permet aux navigateurs de vérifier les fichiers qu'ils récupèrent.

+
intrinsicsize {{deprecated_inline}}<img>Cet attribut indique au navigateur qu'il faut ignorer la taille intrinsèque de l'image et qu'il faut utiliser la taille indiquée avec les attributs.
inputmode<textarea>, contenteditableCet attribut fournit une indication sur le type de donnée qui pourrait être saisi par l'utilisateur lors de l'édition du formulaire ou de l'élément. Cet attribut peut être utilisé sur les contrôles de formulaires ou sur les éléments qui sont éditables (par exemple avec l'attribut contenteditable).
ismap<img>Cet attribut indique que l'image contribue à une mosaïque d'images interactive côté serveur.
itempropAttribut universel
keytype<keygen>Cet attribut définit le type de clé qui est généré.
kind<track>Cet attribut définit le type de piste textuelle.
label<optgroup>, <option>, <track>Cet attribut définit un titre, lisible par un utilisateur, pour l'élément.
langAttribut universelCet attribut définit la langue utilisée dans l'élément.
language<script>Cet attribut définit le langage de script utilisé dans l'élément.
loading {{experimental_inline}}<img>, <iframe>Cet attribut indique que l'élément doit être chargé à la demande.
list<input>Cet attribut constitue une liste d'options prédéfinie qui est suggérée à l'utilisateur.
loop<audio>, <bgsound>, <marquee>, <video>Cet attribut indique si le média courant doit recommencer au début une fois que sa lecture est terminée.
low<meter>Cet attribut indique la borne supérieure de l'intervalle bas.
manifest {{obsolete_inline}}<html>Cet attribut définit l'URL du manifeste du document pour la gestion du cache. +
+

Note :Cet attribut est obsolète, utilisez <link rel="manifest"> à la place.

+
+
max<input>, <meter>, <progress>Cet attribut indique la valeur maximale autorisée.
maxlength<input>, <textarea>Cet attribut définit le nombre maximal de caractères autorisé dans l'élément.
minlength<input>, <textarea>Cet attribut définit le nombre minimal de caractères qui doivent être saisis dans l'élément.
media<a>, <area>, <link>, <source>, <style>Cet attribut est indication à propos du type de média pour la ressource liée.
method<form>Cet attribut définit la méthode HTTP à utiliser pour l'envoi des données du formulaire (GET par défaut ou POST)
min<input>, <meter>Cet attribut indique la valeur minimale autorisée.
multiple<input>, <select>Cet attribut indique si plusieurs valeurs peuvent être saisies pour des entrées de type email ou file.
muted<audio>, <video>Cet attribut indique si le son de la vidéo doit être coupé lorsque la page est chargée initialement.
name<button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param>Le nom de l'élément qui peut être utilisé par le serveur pour identifier le champ d'un formulaire.
novalidate<form>Cet attribut indique que les données du formulaire ne doivent pas être validées lors de l'envoi.
open<details>Cet attribut indique si les détails seront affichés lors du chargement de la page.
optimum<meter>Cet attribut indique la valeur numérique optimale.
pattern<input>Cet attribut définit une expression rationnelle contre laquelle valider la valeur de l'élément.
ping<a>, <area>
placeholder<input>, <textarea>Cet attribut fournit une indication à l'utilisateur sur ce qu'il peut saisir dans le champ.
poster<video>Cet attribut est une URL qui indique l'image à afficher tant que l'utilisateur n'a pas lancé la vidéo ou déplacé le curseur.
preload<audio>, <video>Cet attribut indique si toute ou partie, voire aucune partie de la ressource doit être téléchargée en avance.
radiogroup<command>
readonly<input>, <textarea>Cet attribut indique si l'élément peut être édité.
referrerpolicy<a>, <area>, <iframe>, <img>, <link>, <script>Définit le référent (referrer) envoyé lors de la récupération de la ressource.
rel<a>, <area>, <link>Cet attribut définit la relation entre l'objet cible et l'objet du lien.
required<input>, <select>, <textarea>Cet attribut indique si l'élément doit obligatoirement être renseigné dans le formulaire.
reversed<ol>Cet attribut indique si la liste doit être affichée dans un ordre décroissant plutôt que dans un ordre croissant.
rows<textarea>Cet attribut définit le nombre de lignes pour la zone de texte.
rowspan<td>, <th>Cet attribut définit le nombre de lignes sur lesquelles une cellule doit s'étendre.
sandbox<iframe>Empêche un élément chargé dans une iframe d'utiliser certaines fonctionnalités (envoyer des formulaires ou ouvrir de nouvelles fenêtres par exemples).
scope<th>Définit les cellules sur lesquelles porte la cellule d'en-tête.
scoped{{non-standard_inline}} {{deprecated_inline}}<style>
selected<option>Cet attribut définit la valeur qui sera sélectionnée au chargement de la page.
shape<a>, <area>
size<input>, <select>Cet attribut définit la largeur de l'élément en pixels, si l'attribut type de l'élément vaut text ou password, cela correspond au nombre de caractères du champ.
sizes<link>, <img>, <source>
slotAttribut universelCet attribut affecte un créneau pour un élément dans le shadow DOM.
span<col>, <colgroup>
spellcheckAttribut universelCet attribut indique si la vérification orthographique est activée pour l'élément courant.
src<audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video>Cet attribut indique l'URL du contenu embarqué.
srcdoc<iframe>
srclang<track>
srcset<img>, <source>Une ou plusieurs images candidates adaptatives.
start<ol>Cet attribut définit le premier nombre de la liste si celui-ci est différent de 1.
step<input>
styleAttribut universelCet attribut définit des styles CSS qui auront la priorité sur ceux définis précédemment. Il ne devrait être utilisé qu'à des fins de tests, car il est conseillé d'utiliser un/des fichier(s) à part pour gérer la mise en forme.
summary{{deprecated_inline}}<table>
tabindexAttribut universelCet attribut permet de modifier l'ordre dans la navigation à la tabulation.
target<a>, <area>, <base>, <form>
titleAttribut universelCet attribut définit un texte expliquant le contenu de l'élément et qui est généralement affiché sous la forme d'une bulle d'information au survol de l'élément.
translateAttribut universelCet attribut indique si le contenu textuel de l'élément doit être traduit ou non.
type<button>, <input>, <command>, <embed>, <object>, <script>, <source>, <style>, <menu>Cet attribut définit le type de l'élément.
usemap<img>, <input>, <object>
value<button>, <option>, <input>, <li>, <meter>, <progress>, <param>Cet attribut définit la valeur par défaut qui sera affichée dans l'élément au chargement de la page.
width<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>Pour ces éléments, cet attribut définit la largeur occupée sur l'écran. +
+

Note :Pour tous les autres éléments, comme <div>, il faut utiliser la propriété CSS standard width afin de définir la largeur.

+
+
wrap<textarea>Cet attribut indique l'utilisation du retour automatique à la ligne pour le texte de l'élément.
+ +

Attribut de contenu ou attribut IDL ?

+ +

En HTML, la plupart des attributs ont deux aspects : l'attribut de contenu et l'attribut IDL (pour Interface Definition Language ou langage de définition des interfaces).

+ +

L'attribut de contenu est l'attribut qu'on définit via le contenu (le code HTML) et qu'on obtient et/ou définit via les méthodes element.setAttribute() et element.getAttribute(). L'attribut de contenu sera toujours une chaîne de caractères, y compris lorsque la valeur attendue est un entier. Ainsi, pour indiquer une maxlength d'un élément <input> à 42, on utilisera setAttribute("maxlength", "42") sur cet élément.

+ +

L'attribut IDL est également connu sous la forme d'une propriété JavaScript. Ce sont les attributs qu'on peut obtenir ou modifier via JavaScript sous la forme élément.toto. L'attribut IDL utilisera toujours la valeur de l'attribut de contenu sous-jacent, éventuellement en la modifiant pour renvoyer une valeur ou pour la modifier. Autrement dit, les attributs IDL, reflètent les attributs de contenu.

+ +

La plupart du temps, les attributs IDL renverront leurs valeurs, telles qu'elles sont utilisées. Par exemple, le type (l'attribut type) par défaut des éléments <input> vaut "text", et si on définit input.type="tototruc", l'élément <input> se comportera comme un élément de type text (en termes d'apparence et de comportement) mais le contenu de l'attribut type sera "tototruc". Cependant, l'attribut de type IDL renverra la chaîne "text".

+ +

Les attributs IDL ne sont pas toujours des chaînes de caractères. input.maxlength est un nombre par exemple (un entier long signé pour être précis). Lorsqu'on manipule des attributs IDL on utilisera toujours le type défini pour l'interface. Ainsi, input.maxlength renverra toujours un nombre et si on souhaite le définir, il faudra le faire avec un nombre, si on passe une valeur d'un autre type, cette valeur sera convertie grâce aux mécanismes de conversion habituels de JavaScript.

+ +

Les attributs IDL peuvent refléter d'autres types tels que les unsigned long, les URL, les booléens, etc. Malheureusement, il n'existe pas de règles claires et la façon dont les attributs IDL se comportent en conjonction avec leurs attributs de contenu correspondants, cela dépend de l'attribut. La plupart du temps, il suivra les règles énoncées dans la spécification, mais parfois, il ne le fera pas. Les spécifications HTML essaient de rendre cela aussi convivial que possible pour les développeurs, mais pour diverses raisons (principalement historiques), certains attributs se comportent bizarrement (select.size, par exemple) et vous devriez lire les spécifications pour comprendre comment ils se comportent exactement.

+ +

Attributs booléens

+ +

Certains attributs de contenu (ex. required, readonly, disabled) sont des attributs booléens. Si un attribut booléen est présent, sa valeur correspondra à vrai (true), s'il est absent, sa valeur correspondra à faux (false).

+ +

HTML5 définit des restrictions sur les valeurs autorisées des attributs booléens : Si l'attribut est présent, sa valeur doit être soit la chaîne vide (équivalente, l'attribut peut avoir une valeur non attribuée), soit une valeur qui est une correspondance ASCII insensible à la casse pour le nom canonique de l'attribut, sans espace avant ou après. Les exemples suivants sont des façons valides de baliser un attribut booléen :

+ +
<div itemscope>Ce fragment est du HTML valide mais du XML invalide.</div>
+<div itemscope=itemscope>Ce fragment est du HTML valide mais du XML invalide.</div>
+<div itemscope="">Ce fragment est du HTML valide et du XML valide.</div>
+<div itemscope="itemscope">Ce fragment est du HTML et du XML valide mais est plus verbeux.</div>
+ +

Pour être tout à fait explicite, les valeurs "true" et "false" ne sont pas autorisées pour les attributs booléens. Pour représenter une valeur fausse, il faudra ne pas écrire l'attribut du tout. Cette règle peut entraîner quelques incompréhensions : si on écrit checked="false" l'attribut checked sera présent et donc considéré comme vrai (true).

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributes/max/index.html b/files/fr/web/html/attributes/max/index.html deleted file mode 100644 index 2db1bd554b..0000000000 --- a/files/fr/web/html/attributes/max/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: 'Attribut HTML : max' -slug: Web/HTML/Attributes/max -tags: - - Attribute - - Attributes - - Constraint validation - - HTML - - max - - Reference -translation_of: Web/HTML/Attributes/max ---- -

{{HTMLSidebar}}

- -

L'attribut max définit la valeur maximale acceptable et valide pour le champ de saisie contenant l'attribut. Si la valeur de l'élément est supérieure à cette valeur, l'élément échoue à la validation des contraintes. Cette valeur doit être supérieure ou égale à la valeur de l'attribut min. Si l'attribut max est présent mais n'est pas spécifié ou est invalide, aucune valeur max n'est appliquée. Si l'attribut max est valide et qu'une valeur non vide est supérieure au maximum autorisé par l'attribut max, la validation des contraintes empêchera la soumission du formulaire.

- -

Valable pour les types de saisie numérique, y compris les date, month, week, time, datetime-local, number et range, ainsi que les deux éléments <progress> et <meter>, l'attribut max est un nombre qui spécifie la valeur la plus positive qu'un contrôle de formulaire doit considérer comme valide.

- -

Si la valeur dépasse la valeur maximale autorisée, l'attribut JavaScript validityState.rangeOverflow sera vrai, et le contrôle sera assorti des pseudo-classes :out-of-range et :invalid.

- -

Syntaxe

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Syntaxe pour les valeurs max par type de saisie.
Type de saisieSyntaxeExemple
date
yyyy-mm-dd
<input type="date" max="2019-12-25" step="1">
month
yyyy-mm
<input type="month" max="2019-12" step="12">
week
yyyy-W##
<input type="week" max="2019-W23" step="">
time
hh:mm
<input type="time" max="17:00" step="900">
datetime-localyyyy-mm-ddThh:mm
<input type="datetime-local" max="2019-12-25T23:59">
number<number>
<input type="number" min="0" step="5" max="100">
range<number>
<input type="range" min="60" step="5" max="100">
- -
-

Note :Lorsque les données saisies par l'utilisateur ne respectent pas la valeur maximale fixée, la valeur est considérée comme invalide dans la validation des contraintes et correspondra aux pseudo-classes :invalid et :out-of-range.

-
- -

Voir la validation côté client et rangeOverflow pour plus d'informations.

- -

Pour l'élément <progress>, l'attribut max décrit la quantité de travail que nécessite la tâche indiquée par l'élément progress. S'il est présent, il doit avoir une valeur supérieure à zéro et être un nombre à virgule flottante valide. Pour l'élément <meter>, l'attribut max définit la limite numérique supérieure de la plage mesurée. Celle-ci doit être supérieure à la valeur minimale (code>min attribut), si elle est spécifiée. Dans les deux cas, si elle est omise, la valeur est égale à 1 par défaut.

- - - - - - - - - - - - - - - - - - - - - - -
Syntaxe des valeurs max pour les autres éléments
Type d'entréeSyntaxeExemple
<progress><number><progress id="file" max="100" value="70"> 70% </progress>
<meter><number><meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"> à 40/100</meter>
- -

Accessibilité

- -

Fournissez des instructions pour aider les utilisateurs à comprendre comment remplir le formulaire et utiliser les contrôles individuels du formulaire. Indiquez toute entrée obligatoire et facultative, les formats de données et toute autre information pertinente. Lorsque vous utilisez l'attribut max, assurez-vous que cette exigence maximale est comprise par l'utilisateur. Fournir des instructions dans le <label> peut être suffisant. Si vous fournissez des instructions en dehors des étiquettes, ce qui permet un positionnement et une conception plus flexibles, envisagez d'utiliser aria-labelledby ou aria-describedby.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatut
{{SpecName('HTML WHATWG', 'input.html#the-min-and-max-attributes', 'max attribute')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'input.html#the-min-and-max-attributes', 'max attribute')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML WHATWG', 'forms.html#the-progress-element', 'progress element')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#the-progress-element', 'progress element')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML WHATWG', 'forms.html#the-meter-element', 'meter element')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#the-meter-element', 'meter element')}}{{Spec2('HTML5 W3C')}}
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributes/max/index.md b/files/fr/web/html/attributes/max/index.md new file mode 100644 index 0000000000..2db1bd554b --- /dev/null +++ b/files/fr/web/html/attributes/max/index.md @@ -0,0 +1,159 @@ +--- +title: 'Attribut HTML : max' +slug: Web/HTML/Attributes/max +tags: + - Attribute + - Attributes + - Constraint validation + - HTML + - max + - Reference +translation_of: Web/HTML/Attributes/max +--- +

{{HTMLSidebar}}

+ +

L'attribut max définit la valeur maximale acceptable et valide pour le champ de saisie contenant l'attribut. Si la valeur de l'élément est supérieure à cette valeur, l'élément échoue à la validation des contraintes. Cette valeur doit être supérieure ou égale à la valeur de l'attribut min. Si l'attribut max est présent mais n'est pas spécifié ou est invalide, aucune valeur max n'est appliquée. Si l'attribut max est valide et qu'une valeur non vide est supérieure au maximum autorisé par l'attribut max, la validation des contraintes empêchera la soumission du formulaire.

+ +

Valable pour les types de saisie numérique, y compris les date, month, week, time, datetime-local, number et range, ainsi que les deux éléments <progress> et <meter>, l'attribut max est un nombre qui spécifie la valeur la plus positive qu'un contrôle de formulaire doit considérer comme valide.

+ +

Si la valeur dépasse la valeur maximale autorisée, l'attribut JavaScript validityState.rangeOverflow sera vrai, et le contrôle sera assorti des pseudo-classes :out-of-range et :invalid.

+ +

Syntaxe

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Syntaxe pour les valeurs max par type de saisie.
Type de saisieSyntaxeExemple
date
yyyy-mm-dd
<input type="date" max="2019-12-25" step="1">
month
yyyy-mm
<input type="month" max="2019-12" step="12">
week
yyyy-W##
<input type="week" max="2019-W23" step="">
time
hh:mm
<input type="time" max="17:00" step="900">
datetime-localyyyy-mm-ddThh:mm
<input type="datetime-local" max="2019-12-25T23:59">
number<number>
<input type="number" min="0" step="5" max="100">
range<number>
<input type="range" min="60" step="5" max="100">
+ +
+

Note :Lorsque les données saisies par l'utilisateur ne respectent pas la valeur maximale fixée, la valeur est considérée comme invalide dans la validation des contraintes et correspondra aux pseudo-classes :invalid et :out-of-range.

+
+ +

Voir la validation côté client et rangeOverflow pour plus d'informations.

+ +

Pour l'élément <progress>, l'attribut max décrit la quantité de travail que nécessite la tâche indiquée par l'élément progress. S'il est présent, il doit avoir une valeur supérieure à zéro et être un nombre à virgule flottante valide. Pour l'élément <meter>, l'attribut max définit la limite numérique supérieure de la plage mesurée. Celle-ci doit être supérieure à la valeur minimale (code>min attribut), si elle est spécifiée. Dans les deux cas, si elle est omise, la valeur est égale à 1 par défaut.

+ + + + + + + + + + + + + + + + + + + + + + +
Syntaxe des valeurs max pour les autres éléments
Type d'entréeSyntaxeExemple
<progress><number><progress id="file" max="100" value="70"> 70% </progress>
<meter><number><meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"> à 40/100</meter>
+ +

Accessibilité

+ +

Fournissez des instructions pour aider les utilisateurs à comprendre comment remplir le formulaire et utiliser les contrôles individuels du formulaire. Indiquez toute entrée obligatoire et facultative, les formats de données et toute autre information pertinente. Lorsque vous utilisez l'attribut max, assurez-vous que cette exigence maximale est comprise par l'utilisateur. Fournir des instructions dans le <label> peut être suffisant. Si vous fournissez des instructions en dehors des étiquettes, ce qui permet un positionnement et une conception plus flexibles, envisagez d'utiliser aria-labelledby ou aria-describedby.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatut
{{SpecName('HTML WHATWG', 'input.html#the-min-and-max-attributes', 'max attribute')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'input.html#the-min-and-max-attributes', 'max attribute')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML WHATWG', 'forms.html#the-progress-element', 'progress element')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#the-progress-element', 'progress element')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML WHATWG', 'forms.html#the-meter-element', 'meter element')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#the-meter-element', 'meter element')}}{{Spec2('HTML5 W3C')}}
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributes/maxlength/index.html b/files/fr/web/html/attributes/maxlength/index.html deleted file mode 100644 index 5ad331ca73..0000000000 --- a/files/fr/web/html/attributes/maxlength/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: 'Attribut HTML : maxlength' -slug: Web/HTML/Attributes/maxlength -tags: - - Attribute - - Attributes - - Constraint validation - - HTML - - Input - - Reference - - maxlength - - textarea -translation_of: Web/HTML/Attributes/maxlength ---- -

{{HTMLSidebar}}

- -

L'attribut maxlength définit le nombre maximal de caractères (en unités de code UTF-16) que l'utilisateur peut saisir dans un <input> ou un <textarea>. Il doit s'agir d'un nombre entier égal ou supérieur à 0. Si aucune longueur maximale n'est spécifiée, ou si une valeur non valide est spécifiée, l'entrée ou la zone de texte n'a pas de longueur maximale.

- -

Toute valeur de maxlength doit être supérieure ou égale à la valeur de minlength, si elle est présente et valide. L'entrée échoue à la validation des contraintes si la longueur de la valeur textuelle du champ est supérieure à la longueur maximale des unités de code UTF-16. La validation des contraintes n'est appliquée que lorsque la valeur est modifiée par l'utilisateur.

- -

Validation des contraintes

- -

Bien que le navigateur empêche généralement l'utilisateur de saisir plus de texte que ne l'autorise l'attribut maxlength, si la longueur est supérieure à ce dernier, la propriété en lecture seule tooLong d'un objet ValidityState sera vraie.

- -

Exemple

- -
<input type="password" maxlength="4"/>
- -
{{EmbedLiveSample('examples', '', 100)}}
- -

Spécifications

- - - - - - - - - - - - - - - - - - -
SpécificationStatut
{{SpecName('HTML WHATWG', 'input.html#attr-input-maxlength', 'maxlength attribute')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'input.html#attr-maxlength-accept', 'maxlength attribute')}}{{Spec2('HTML5.1')}}
- -

Compatibilité des navigateurs

- -

{{Compat("html.elements.attribute.maxlength")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributes/maxlength/index.md b/files/fr/web/html/attributes/maxlength/index.md new file mode 100644 index 0000000000..5ad331ca73 --- /dev/null +++ b/files/fr/web/html/attributes/maxlength/index.md @@ -0,0 +1,65 @@ +--- +title: 'Attribut HTML : maxlength' +slug: Web/HTML/Attributes/maxlength +tags: + - Attribute + - Attributes + - Constraint validation + - HTML + - Input + - Reference + - maxlength + - textarea +translation_of: Web/HTML/Attributes/maxlength +--- +

{{HTMLSidebar}}

+ +

L'attribut maxlength définit le nombre maximal de caractères (en unités de code UTF-16) que l'utilisateur peut saisir dans un <input> ou un <textarea>. Il doit s'agir d'un nombre entier égal ou supérieur à 0. Si aucune longueur maximale n'est spécifiée, ou si une valeur non valide est spécifiée, l'entrée ou la zone de texte n'a pas de longueur maximale.

+ +

Toute valeur de maxlength doit être supérieure ou égale à la valeur de minlength, si elle est présente et valide. L'entrée échoue à la validation des contraintes si la longueur de la valeur textuelle du champ est supérieure à la longueur maximale des unités de code UTF-16. La validation des contraintes n'est appliquée que lorsque la valeur est modifiée par l'utilisateur.

+ +

Validation des contraintes

+ +

Bien que le navigateur empêche généralement l'utilisateur de saisir plus de texte que ne l'autorise l'attribut maxlength, si la longueur est supérieure à ce dernier, la propriété en lecture seule tooLong d'un objet ValidityState sera vraie.

+ +

Exemple

+ +
<input type="password" maxlength="4"/>
+ +
{{EmbedLiveSample('examples', '', 100)}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + +
SpécificationStatut
{{SpecName('HTML WHATWG', 'input.html#attr-input-maxlength', 'maxlength attribute')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'input.html#attr-maxlength-accept', 'maxlength attribute')}}{{Spec2('HTML5.1')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("html.elements.attribute.maxlength")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributes/min/index.html b/files/fr/web/html/attributes/min/index.html deleted file mode 100644 index 9a142deaeb..0000000000 --- a/files/fr/web/html/attributes/min/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: 'Attribut HTML : min' -slug: Web/HTML/Attributes/min -tags: - - Attribute - - Attributes - - Constraint validation - - HTML - - min - - Reference -translation_of: Web/HTML/Attributes/min ---- -

{{HTMLSidebar}}

- -

L'attribut min définit la valeur minimale qui est acceptable et valide pour l'entrée contenant l'attribut. Si la valeur de l'élément est inférieure à cette valeur, l'élément échoue lors de la validation des contraintes. Cette valeur doit être inférieure ou égale à la valeur de l'attribut max. Si une valeur est spécifiée pour min qui n'est pas un nombre valide, l'entrée n'a pas de valeur minimale.

- -

Valable pour les types de saisie numérique, y compris les types date, month, week, time, datetime-local, number et range, et l'élément <meter>, l'attribut min est un nombre qui spécifie la valeur la plus négative qu'un contrôle de formulaire doit considérer comme valide.

- -

Syntaxe

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Syntaxe pour les valeurs min par type de saisie.
Type de saisieSyntaxeExemple
date
yyyy-mm-dd
<input type="date" min="2019-12-25" step="1">
month
yyyy-mm
<input type="month" min="2019-12" step="12">
week
yyyy-W##
<input type="week" min="2019-W23" step="">
time
hh:mm
<input type="time" min="09:00" step="900">
datetime-localyyyy-mm-ddThh:mm
<input type="datetime-local" min="2019-12-25T19:30">
number<number>
<input type="number" min="0" step="5" max="100">
range<number>
<input type="range" min="60" step="5" max="100">
- -
-

Note :Lorsque les données saisies par l'utilisateur ne respectent pas la valeur minimale définie, la valeur est considérée comme non valide dans la validation des contraintes et correspondra aux pseudo-classes :invalid et :out-of-range.

-
- -

Voir la validation côté client et rangeUnderflow pour plus d'informations.

- -

Pour l'élément <meter>, l'attribut min définit la limite numérique inférieure de la plage mesurée. Celle-ci doit être inférieure à la valeur minimale (attribut max), si elle est spécifiée. Dans les deux cas, si elle est omise, la valeur est égale à 1 par défaut.

- - - - - - - - - - - - - - - - - -
Syntaxe de min pour les autres éléments
ÉlémentSyntaxeExemple
<meter><number><meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"> at 40/100</meter>
- -

Impact sur step

- -

Les valeurs de min et step définissent ce que sont les valeurs valides, même si l'attribut step n'est pas inclus, car step a par défaut la valeur 0.

- -

Nous ajoutons une grande bordure rouge autour des entrées invalides :

- -
input:invalid {
-  border: solid red 3px;
-}
- -

Nous définissons ensuite une entrée avec une valeur minimale de 7,2, en omettant l'attribut « step », qui a la valeur 1 par défaut.

- -
<input id="myNumber" name="myNumber" type="number" min="7.2" value="8">
- -

Comme step a pour valeur 1 par défaut, les valeurs valides comprennent 7,2, 8,2, 9,2, et ainsi de suite. La valeur 8 n'est pas valide. Comme nous avons inclus une valeur non valide, les navigateurs compatibles afficheront la valeur comme non valide.

- -
{{EmbedLiveSample("impact_on_step", "", 55)}}
- -

S'il n'est pas explicitement inclus, step prend par défaut la valeur 1 pour number et range, et 1 type d'unité (seconde, semaine, mois, jour) pour les types d'entrée date/heure.

- -

Accessibilité

- -

Fournissez des instructions pour aider les utilisateurs à comprendre comment remplir le formulaire et utiliser les contrôles individuels du formulaire. Indiquez toute entrée obligatoire et facultative, les formats de données et toute autre information pertinente. Lorsque vous utilisez l'attribut min, assurez-vous que cette exigence minimale est comprise par l'utilisateur. Fournir des instructions à l'intérieur des <label> peut être suffisant. Si vous fournissez des instructions en dehors des étiquettes, ce qui permet un positionnement et une conception plus souples, envisagez d'utiliser aria-labelledby ou aria-describedby.

- -

Spécifications

- - - - - - - - - - - - - - - - - - -
SpécificationStatut
{{SpecName('HTML WHATWG', 'input.html#the-min-and-max-attributes', 'min attribute')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'input.html#the-min-and-max-attributes', 'min attribute')}}{{Spec2('HTML5 W3C')}}
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributes/min/index.md b/files/fr/web/html/attributes/min/index.md new file mode 100644 index 0000000000..9a142deaeb --- /dev/null +++ b/files/fr/web/html/attributes/min/index.md @@ -0,0 +1,156 @@ +--- +title: 'Attribut HTML : min' +slug: Web/HTML/Attributes/min +tags: + - Attribute + - Attributes + - Constraint validation + - HTML + - min + - Reference +translation_of: Web/HTML/Attributes/min +--- +

{{HTMLSidebar}}

+ +

L'attribut min définit la valeur minimale qui est acceptable et valide pour l'entrée contenant l'attribut. Si la valeur de l'élément est inférieure à cette valeur, l'élément échoue lors de la validation des contraintes. Cette valeur doit être inférieure ou égale à la valeur de l'attribut max. Si une valeur est spécifiée pour min qui n'est pas un nombre valide, l'entrée n'a pas de valeur minimale.

+ +

Valable pour les types de saisie numérique, y compris les types date, month, week, time, datetime-local, number et range, et l'élément <meter>, l'attribut min est un nombre qui spécifie la valeur la plus négative qu'un contrôle de formulaire doit considérer comme valide.

+ +

Syntaxe

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Syntaxe pour les valeurs min par type de saisie.
Type de saisieSyntaxeExemple
date
yyyy-mm-dd
<input type="date" min="2019-12-25" step="1">
month
yyyy-mm
<input type="month" min="2019-12" step="12">
week
yyyy-W##
<input type="week" min="2019-W23" step="">
time
hh:mm
<input type="time" min="09:00" step="900">
datetime-localyyyy-mm-ddThh:mm
<input type="datetime-local" min="2019-12-25T19:30">
number<number>
<input type="number" min="0" step="5" max="100">
range<number>
<input type="range" min="60" step="5" max="100">
+ +
+

Note :Lorsque les données saisies par l'utilisateur ne respectent pas la valeur minimale définie, la valeur est considérée comme non valide dans la validation des contraintes et correspondra aux pseudo-classes :invalid et :out-of-range.

+
+ +

Voir la validation côté client et rangeUnderflow pour plus d'informations.

+ +

Pour l'élément <meter>, l'attribut min définit la limite numérique inférieure de la plage mesurée. Celle-ci doit être inférieure à la valeur minimale (attribut max), si elle est spécifiée. Dans les deux cas, si elle est omise, la valeur est égale à 1 par défaut.

+ + + + + + + + + + + + + + + + + +
Syntaxe de min pour les autres éléments
ÉlémentSyntaxeExemple
<meter><number><meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"> at 40/100</meter>
+ +

Impact sur step

+ +

Les valeurs de min et step définissent ce que sont les valeurs valides, même si l'attribut step n'est pas inclus, car step a par défaut la valeur 0.

+ +

Nous ajoutons une grande bordure rouge autour des entrées invalides :

+ +
input:invalid {
+  border: solid red 3px;
+}
+ +

Nous définissons ensuite une entrée avec une valeur minimale de 7,2, en omettant l'attribut « step », qui a la valeur 1 par défaut.

+ +
<input id="myNumber" name="myNumber" type="number" min="7.2" value="8">
+ +

Comme step a pour valeur 1 par défaut, les valeurs valides comprennent 7,2, 8,2, 9,2, et ainsi de suite. La valeur 8 n'est pas valide. Comme nous avons inclus une valeur non valide, les navigateurs compatibles afficheront la valeur comme non valide.

+ +
{{EmbedLiveSample("impact_on_step", "", 55)}}
+ +

S'il n'est pas explicitement inclus, step prend par défaut la valeur 1 pour number et range, et 1 type d'unité (seconde, semaine, mois, jour) pour les types d'entrée date/heure.

+ +

Accessibilité

+ +

Fournissez des instructions pour aider les utilisateurs à comprendre comment remplir le formulaire et utiliser les contrôles individuels du formulaire. Indiquez toute entrée obligatoire et facultative, les formats de données et toute autre information pertinente. Lorsque vous utilisez l'attribut min, assurez-vous que cette exigence minimale est comprise par l'utilisateur. Fournir des instructions à l'intérieur des <label> peut être suffisant. Si vous fournissez des instructions en dehors des étiquettes, ce qui permet un positionnement et une conception plus souples, envisagez d'utiliser aria-labelledby ou aria-describedby.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + +
SpécificationStatut
{{SpecName('HTML WHATWG', 'input.html#the-min-and-max-attributes', 'min attribute')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'input.html#the-min-and-max-attributes', 'min attribute')}}{{Spec2('HTML5 W3C')}}
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributes/minlength/index.html b/files/fr/web/html/attributes/minlength/index.html deleted file mode 100644 index 2e3960b93f..0000000000 --- a/files/fr/web/html/attributes/minlength/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: 'Attribut HTML : minlength' -slug: Web/HTML/Attributes/minlength -tags: - - Attribute - - Attributes - - Constraint validation - - HTML - - Input - - Reference - - minlength - - textarea -translation_of: Web/HTML/Attributes/minlength ---- -

{{HTMLSidebar}}

- -

L'attribut minlength définit le nombre minimal de caractères (sous forme d'unités de code UTF-16) que l'utilisateur peut saisir dans un élément <input> ou <textarea>. Il doit s'agir d'une valeur entière égale ou supérieure à 0. Si aucune longueur minimale n'est spécifiée, ou si une valeur invalide est spécifiée, l'entrée n'a pas de longueur minimale. Cette valeur doit être inférieure ou égale à la valeur de maxlength, sinon la valeur ne sera jamais valide, car il est impossible de satisfaire aux deux critères.

- -

L'entrée échouera à la validation des contraintes si la longueur de la valeur textuelle du champ est inférieure à minlength unités de code UTF-16, avec validityState.tooShort retournant true. La validation des contraintes n'est appliquée que lorsque la valeur est modifiée par l'utilisateur. En cas d'échec de la soumission, certains navigateurs affichent un message d'erreur indiquant la longueur minimale requise et la longueur actuelle.

- -

Exemples

- -

En ajoutant minlength="5", la valeur doit soit être vide, soit comporter cinq caractères ou plus pour être valide.

- -
<label for="fruit">Entrez un nom de fruit d'au moins 5 lettres.</label>
-<input type="text" minlength="5" id="fruit">
- -

Nous pouvons utiliser des pseudo-classes pour donner un style à l'élément en fonction de la validité de la valeur. La valeur sera valide tant qu'elle sera soit nulle (vide), soit longue de cinq caractères ou plus. Vert est invalide, Citron est valide.

- -
input {
-  border: 2px solid currentcolor;
-}
-input:invalid {
-  border: 2px dashed red;
-}
-input:invalid:focus {
-  background-image: linear-gradient(pink, lightgreen);
-}
- -
{{EmbedLiveSample('examples', '', 40)}}
- -

Spécifications

- - - - - - - - - - - - - - - - - - -
SpécificationStatut
{{SpecName('HTML WHATWG', 'input.html#attr-input-minlength', 'l\'attribut minlength')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'input.html#attr-minlength-accept', 'l\'attribut minlength')}}{{Spec2('HTML5.1')}}
- -

Compatibilité des navigateurs

- -

{{Compat("html.elements.attribute.minlength")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributes/minlength/index.md b/files/fr/web/html/attributes/minlength/index.md new file mode 100644 index 0000000000..2e3960b93f --- /dev/null +++ b/files/fr/web/html/attributes/minlength/index.md @@ -0,0 +1,76 @@ +--- +title: 'Attribut HTML : minlength' +slug: Web/HTML/Attributes/minlength +tags: + - Attribute + - Attributes + - Constraint validation + - HTML + - Input + - Reference + - minlength + - textarea +translation_of: Web/HTML/Attributes/minlength +--- +

{{HTMLSidebar}}

+ +

L'attribut minlength définit le nombre minimal de caractères (sous forme d'unités de code UTF-16) que l'utilisateur peut saisir dans un élément <input> ou <textarea>. Il doit s'agir d'une valeur entière égale ou supérieure à 0. Si aucune longueur minimale n'est spécifiée, ou si une valeur invalide est spécifiée, l'entrée n'a pas de longueur minimale. Cette valeur doit être inférieure ou égale à la valeur de maxlength, sinon la valeur ne sera jamais valide, car il est impossible de satisfaire aux deux critères.

+ +

L'entrée échouera à la validation des contraintes si la longueur de la valeur textuelle du champ est inférieure à minlength unités de code UTF-16, avec validityState.tooShort retournant true. La validation des contraintes n'est appliquée que lorsque la valeur est modifiée par l'utilisateur. En cas d'échec de la soumission, certains navigateurs affichent un message d'erreur indiquant la longueur minimale requise et la longueur actuelle.

+ +

Exemples

+ +

En ajoutant minlength="5", la valeur doit soit être vide, soit comporter cinq caractères ou plus pour être valide.

+ +
<label for="fruit">Entrez un nom de fruit d'au moins 5 lettres.</label>
+<input type="text" minlength="5" id="fruit">
+ +

Nous pouvons utiliser des pseudo-classes pour donner un style à l'élément en fonction de la validité de la valeur. La valeur sera valide tant qu'elle sera soit nulle (vide), soit longue de cinq caractères ou plus. Vert est invalide, Citron est valide.

+ +
input {
+  border: 2px solid currentcolor;
+}
+input:invalid {
+  border: 2px dashed red;
+}
+input:invalid:focus {
+  background-image: linear-gradient(pink, lightgreen);
+}
+ +
{{EmbedLiveSample('examples', '', 40)}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + +
SpécificationStatut
{{SpecName('HTML WHATWG', 'input.html#attr-input-minlength', 'l\'attribut minlength')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'input.html#attr-minlength-accept', 'l\'attribut minlength')}}{{Spec2('HTML5.1')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("html.elements.attribute.minlength")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributes/multiple/index.html b/files/fr/web/html/attributes/multiple/index.html deleted file mode 100644 index f5dbe76289..0000000000 --- a/files/fr/web/html/attributes/multiple/index.html +++ /dev/null @@ -1,180 +0,0 @@ ---- -title: 'Attribut HTML : multiple' -slug: Web/HTML/Attributes/multiple -tags: - - Attribute - - Attributes - - Constraint validation - - HTML -translation_of: Web/HTML/Attributes/multiple ---- -

{{HTMLSidebar}}

- -

L'attribut booléen multiple, s'il est défini, signifie que le contrôle de formulaire accepte une ou plusieurs valeurs. Valable pour les types de saisie email et file et l'élément <select>, la manière dont l'utilisateur opte pour plusieurs valeurs dépend du contrôle de formulaire.

- -

Selon le type, le contrôle de formulaire peut avoir une apparence différente si l'attribut multiple est défini. Pour le type de saisie de fichier, la messagerie native fournie par le navigateur diffère. Dans Firefox, l'entrée de fichier indique « Aucun fichier sélectionné » lorsque l'attribut est présent et « Aucun fichier sélectionné » dans le cas contraire, lorsqu'aucun fichier n'est sélectionné. La plupart des navigateurs affichent une zone de liste déroulante pour un contrôle <select> avec l'attribut multiple défini contre une liste déroulante à une ligne lorsque l'attribut est omis. L'entrée email s'affiche de la même manière, mais correspondra à la pseudo-classe :invalid si plus d'une adresse électronique séparée par des virgules est incluse en l'absence de l'attribut.

- -

Lorsque multiple est défini sur le type de saisie email, l'utilisateur peut inclure zéro (si ce n'est pas également required), une ou plusieurs adresses électroniques séparées par des virgules.

- -
<input type="email" multiple name="emails" id="emails">
- -

Si et seulement si l'attribut multiple est spécifié, la valeur peut être une liste d'adresses électroniques correctement formées et séparées par des virgules. Tout espace blanc de queue et de tête est supprimé de chaque adresse de la liste.

- -

Lorsque multiple est défini sur le type d'entrée file, l'utilisateur peut sélectionner un ou plusieurs fichiers. L'utilisateur peut choisir plusieurs fichiers dans le sélecteur de fichiers de n'importe quelle manière que la plateforme qu'il a choisie permet (par exemple, en maintenant la touche Maj ou Ctrl enfoncée, puis en cliquant).

- -
<input type="file" multiple name="uploads" id="uploads">
- -

Lorsque l'attribut est omis, l'utilisateur ne peut sélectionner qu'un seul fichier par <input>.

- -

L'attribut multiple de l'élément <select> représente un contrôle permettant de sélectionner zéro ou plusieurs options dans la liste d'options. Sinon, l'élément <select> représente un contrôle permettant de sélectionner une seule <option> dans la liste d'options.

- -
<select multiple name="dwarfs" id="dwarfs">
-  <option>Grincheux</option>
-  <option>Joyeux</option>
-  <option>Dormeur</option>
-  <option>Timide</option>
-  <option>Atchoum</option>
-  <option>Simplet</option>
-  <option>Doc</option>
-</select>
- -

Lorsque multiple est spécifié, la plupart des navigateurs affichent une boîte de liste défilante au lieu d'une liste déroulante à ligne unique.

- -

Exemples

- -

Saisie d'adresses électroniques

- -
<label for="emails">A qui voulez-vous adresser un courriel ?</label>
-<input type="email" multiple name="emails" id="emails" list="dwarfemails" required size="64">
-
-<datalist id="dwarfemails">
-  <option value="grincheux@menuisiers.fr">Grincheux</option>
-  <option value="joyeux@menuisiers.fr">Joyeux</option>
-  <option value="dormeur@menuisiers.fr">Dormeur</option>
-  <option value="timide@menuisiers.fr">Timide</option>
-  <option value="atchoum@menuisiers.fr">Atchoum</option>
-  <option value="simplet@menuisiers.fr">Simplet</option>
-  <option value="doc@menuisiers.fr">Doc</option>
-</datalist>
- -
input:invalid {border: red solid 3px;}
- -

Si et seulement si l'attribut multiple est spécifié, la valeur peut être une liste d'adresses électroniques correctement formées et séparées par des virgules. Tout espace blanc de queue et de tête est supprimé de chaque adresse de la liste. Si l'attribut required est présent, au moins une adresse électronique est requise.

- -

Certains navigateurs prennent en charge l'apparition de la liste d'options de la <datalist> pour les adresses électroniques ultérieures lorsque multiple est présent. D'autres ne le font pas.

- -
{{EmbedLiveSample("email_input", '', 80)}}
- -

Saisie de fichiers

- -

Lorsque multiple est défini sur le type de saisie file, l'utilisateur peut sélectionner un ou plusieurs fichiers :

- -
<form method="post" enctype="multipart/form-data">
-  <p>
-    <label for="uploads">
-      Choisissez les images que vous voulez télécharger :
-    </label>
-    <input type="file" id="uploads" name="uploads" accept=".jpg, .jpeg, .png, .svg, .gif" multiple>
-  </p>
-  <p>
-    <label for="text">Choisissez un fichier texte à télécharger :</label>
-    <input type="file" id="text" name="text" accept=".txt">
- </p>
-  <p>
-    <input type="submit" value="Soumettre">
-  </p>
-</form>
- -
{{EmbedLiveSample("file_input", '', 160)}}
- -

Notez la différence d'aspect entre l'exemple avec multiple défini et l'autre entrée file sans.

- -

Lorsque le formulaire est soumis, si nous avions utilisé method="get" le nom de chaque fichier sélectionné aurait été ajouté aux paramètres de l'URL sous la forme ?uploads=img1.jpg&uploads=img2.svg. Cependant, étant donné que nous sommes en train d'additionner les données du formulaire multipart, nous devons utiliser POST. Voir l'élément <form> et l'envoi de données de formulaire pour plus d'informations.

- -

Saisir plusieurs options

- -

L'attribut multiple de l'élément <select> représente un contrôle permettant de sélectionner zéro ou plusieurs options dans la liste d'options. Sinon, l'élément <select> représente un contrôle permettant de sélectionner une seule <option> dans la liste des options. L'apparence du contrôle varie généralement en fonction de la présence de l'attribut multiple, la plupart des navigateurs affichant une liste déroulante à défilement au lieu d'une liste déroulante à ligne unique lorsque l'attribut est présent.

- -
<form method="get" action="#">
-<p>
- <label for="dwarfs">Sélectionnez les menuisiers que vous aimez :</label>
-  <select multiple name="dwarfs" id="dwarfs">
-    <option>grincheux@menuisiers.fr</option>
-    <option>joyeux@menuisiers.fr</option>
-    <option>dormeur@menuisiers.fr</option>
-    <option>timide@menuisiers.fr</option>
-    <option>atchoum@menuisiers.fr</option>
-    <option>simplet@menuisiers.fr</option>
-    <option>doc@menuisiers.fr</option>
-  </select>
-</p>
-<p>
- <label for="favoriteOnly">Sélectionnez votre préféré :</label>
-  <select name="favoriteOnly" id="favoriteOnly">
-    <option>grincheux@menuisiers.fr</option>
-    <option>joyeux@menuisiers.fr</option>
-    <option>dormeur@menuisiers.fr</option>
-    <option>timide@menuisiers.fr</option>
-    <option>atchoum@menuisiers.fr</option>
-    <option>simplet@menuisiers.fr</option>
-    <option>doc@menuisiers.fr</option>
-  </select>
-</p>
-<p>
-  <input type="submit" value="Soumettre">
-</p>
-</form>
- -
{{EmbedLiveSample("select", '', 220)}}
- -

Notez la différence d'apparence entre les deux contrôles de formulaire.

- -
/* Décommentez ce CSS pour que le sélecteur multiple ait la même hauteur que le simple. */
-
-/*
-select[multiple] {
-  height: 1.5em;
-  vertical-align: top;
-}
-select[multiple]:focus,
-select[multiple]:active {
-  height: auto;
-}
-*/
- -

Il existe plusieurs façons de sélectionner plusieurs options dans un élément <select> avec un attribut multiple. Selon le système d'exploitation, les utilisateurs de souris peuvent maintenir les touches Ctrl, Commande ou Maj enfoncées, puis cliquer sur plusieurs options pour les sélectionner/désélectionner. Les utilisateurs du clavier peuvent sélectionner plusieurs éléments contigus en ciblant l'élément <select>, en sélectionnant un élément en haut ou en bas de la plage qu'ils souhaitent sélectionner à l'aide des touches de curseur Haut et Bas pour monter et descendre dans les options. La sélection de non-contigus n'est pas aussi bien supportée : les éléments devraient pouvoir être sélectionnés et désélectionnés en appuyant sur Espace , mais le support varie selon les navigateurs.

- -

Accessibilité

- -

Fournissez des instructions pour aider les utilisateurs à comprendre comment remplir le formulaire et utiliser les contrôles individuels du formulaire. Indiquez toute entrée obligatoire et facultative, les formats de données et toute autre information pertinente. Lorsque vous utilisez l'attribut multiple, informez l'utilisateur que plusieurs valeurs sont autorisées et donnez des indications sur la manière de fournir plusieurs valeurs, par exemple « séparez les adresses électroniques par une virgule ».

- -

Définir size="1" sur une sélection multiple peut la faire apparaître comme une sélection unique dans certains navigateurs, mais elle ne s'étend alors pas au focus, ce qui nuit à la convivialité. Ne faites pas cela. Si vous modifiez l'apparence d'une sélection, et même si vous ne le faites pas, veillez à informer l'utilisateur que plusieurs options peuvent être sélectionnées par une autre méthode.

- -

Spécifications

- - - - - - - - - - - - - - - - - - -
SpécificationStatut
{{SpecName('HTML WHATWG', 'input.html#attr-input-multiple', 'l\'attribut multiple')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'input.html#attr-input-multiple', 'l\'attribut multiple')}}{{Spec2('HTML5 W3C')}}
- -

Voir aussi

- - diff --git a/files/fr/web/html/attributes/multiple/index.md b/files/fr/web/html/attributes/multiple/index.md new file mode 100644 index 0000000000..f5dbe76289 --- /dev/null +++ b/files/fr/web/html/attributes/multiple/index.md @@ -0,0 +1,180 @@ +--- +title: 'Attribut HTML : multiple' +slug: Web/HTML/Attributes/multiple +tags: + - Attribute + - Attributes + - Constraint validation + - HTML +translation_of: Web/HTML/Attributes/multiple +--- +

{{HTMLSidebar}}

+ +

L'attribut booléen multiple, s'il est défini, signifie que le contrôle de formulaire accepte une ou plusieurs valeurs. Valable pour les types de saisie email et file et l'élément <select>, la manière dont l'utilisateur opte pour plusieurs valeurs dépend du contrôle de formulaire.

+ +

Selon le type, le contrôle de formulaire peut avoir une apparence différente si l'attribut multiple est défini. Pour le type de saisie de fichier, la messagerie native fournie par le navigateur diffère. Dans Firefox, l'entrée de fichier indique « Aucun fichier sélectionné » lorsque l'attribut est présent et « Aucun fichier sélectionné » dans le cas contraire, lorsqu'aucun fichier n'est sélectionné. La plupart des navigateurs affichent une zone de liste déroulante pour un contrôle <select> avec l'attribut multiple défini contre une liste déroulante à une ligne lorsque l'attribut est omis. L'entrée email s'affiche de la même manière, mais correspondra à la pseudo-classe :invalid si plus d'une adresse électronique séparée par des virgules est incluse en l'absence de l'attribut.

+ +

Lorsque multiple est défini sur le type de saisie email, l'utilisateur peut inclure zéro (si ce n'est pas également required), une ou plusieurs adresses électroniques séparées par des virgules.

+ +
<input type="email" multiple name="emails" id="emails">
+ +

Si et seulement si l'attribut multiple est spécifié, la valeur peut être une liste d'adresses électroniques correctement formées et séparées par des virgules. Tout espace blanc de queue et de tête est supprimé de chaque adresse de la liste.

+ +

Lorsque multiple est défini sur le type d'entrée file, l'utilisateur peut sélectionner un ou plusieurs fichiers. L'utilisateur peut choisir plusieurs fichiers dans le sélecteur de fichiers de n'importe quelle manière que la plateforme qu'il a choisie permet (par exemple, en maintenant la touche Maj ou Ctrl enfoncée, puis en cliquant).

+ +
<input type="file" multiple name="uploads" id="uploads">
+ +

Lorsque l'attribut est omis, l'utilisateur ne peut sélectionner qu'un seul fichier par <input>.

+ +

L'attribut multiple de l'élément <select> représente un contrôle permettant de sélectionner zéro ou plusieurs options dans la liste d'options. Sinon, l'élément <select> représente un contrôle permettant de sélectionner une seule <option> dans la liste d'options.

+ +
<select multiple name="dwarfs" id="dwarfs">
+  <option>Grincheux</option>
+  <option>Joyeux</option>
+  <option>Dormeur</option>
+  <option>Timide</option>
+  <option>Atchoum</option>
+  <option>Simplet</option>
+  <option>Doc</option>
+</select>
+ +

Lorsque multiple est spécifié, la plupart des navigateurs affichent une boîte de liste défilante au lieu d'une liste déroulante à ligne unique.

+ +

Exemples

+ +

Saisie d'adresses électroniques

+ +
<label for="emails">A qui voulez-vous adresser un courriel ?</label>
+<input type="email" multiple name="emails" id="emails" list="dwarfemails" required size="64">
+
+<datalist id="dwarfemails">
+  <option value="grincheux@menuisiers.fr">Grincheux</option>
+  <option value="joyeux@menuisiers.fr">Joyeux</option>
+  <option value="dormeur@menuisiers.fr">Dormeur</option>
+  <option value="timide@menuisiers.fr">Timide</option>
+  <option value="atchoum@menuisiers.fr">Atchoum</option>
+  <option value="simplet@menuisiers.fr">Simplet</option>
+  <option value="doc@menuisiers.fr">Doc</option>
+</datalist>
+ +
input:invalid {border: red solid 3px;}
+ +

Si et seulement si l'attribut multiple est spécifié, la valeur peut être une liste d'adresses électroniques correctement formées et séparées par des virgules. Tout espace blanc de queue et de tête est supprimé de chaque adresse de la liste. Si l'attribut required est présent, au moins une adresse électronique est requise.

+ +

Certains navigateurs prennent en charge l'apparition de la liste d'options de la <datalist> pour les adresses électroniques ultérieures lorsque multiple est présent. D'autres ne le font pas.

+ +
{{EmbedLiveSample("email_input", '', 80)}}
+ +

Saisie de fichiers

+ +

Lorsque multiple est défini sur le type de saisie file, l'utilisateur peut sélectionner un ou plusieurs fichiers :

+ +
<form method="post" enctype="multipart/form-data">
+  <p>
+    <label for="uploads">
+      Choisissez les images que vous voulez télécharger :
+    </label>
+    <input type="file" id="uploads" name="uploads" accept=".jpg, .jpeg, .png, .svg, .gif" multiple>
+  </p>
+  <p>
+    <label for="text">Choisissez un fichier texte à télécharger :</label>
+    <input type="file" id="text" name="text" accept=".txt">
+ </p>
+  <p>
+    <input type="submit" value="Soumettre">
+  </p>
+</form>
+ +
{{EmbedLiveSample("file_input", '', 160)}}
+ +

Notez la différence d'aspect entre l'exemple avec multiple défini et l'autre entrée file sans.

+ +

Lorsque le formulaire est soumis, si nous avions utilisé method="get" le nom de chaque fichier sélectionné aurait été ajouté aux paramètres de l'URL sous la forme ?uploads=img1.jpg&uploads=img2.svg. Cependant, étant donné que nous sommes en train d'additionner les données du formulaire multipart, nous devons utiliser POST. Voir l'élément <form> et l'envoi de données de formulaire pour plus d'informations.

+ +

Saisir plusieurs options

+ +

L'attribut multiple de l'élément <select> représente un contrôle permettant de sélectionner zéro ou plusieurs options dans la liste d'options. Sinon, l'élément <select> représente un contrôle permettant de sélectionner une seule <option> dans la liste des options. L'apparence du contrôle varie généralement en fonction de la présence de l'attribut multiple, la plupart des navigateurs affichant une liste déroulante à défilement au lieu d'une liste déroulante à ligne unique lorsque l'attribut est présent.

+ +
<form method="get" action="#">
+<p>
+ <label for="dwarfs">Sélectionnez les menuisiers que vous aimez :</label>
+  <select multiple name="dwarfs" id="dwarfs">
+    <option>grincheux@menuisiers.fr</option>
+    <option>joyeux@menuisiers.fr</option>
+    <option>dormeur@menuisiers.fr</option>
+    <option>timide@menuisiers.fr</option>
+    <option>atchoum@menuisiers.fr</option>
+    <option>simplet@menuisiers.fr</option>
+    <option>doc@menuisiers.fr</option>
+  </select>
+</p>
+<p>
+ <label for="favoriteOnly">Sélectionnez votre préféré :</label>
+  <select name="favoriteOnly" id="favoriteOnly">
+    <option>grincheux@menuisiers.fr</option>
+    <option>joyeux@menuisiers.fr</option>
+    <option>dormeur@menuisiers.fr</option>
+    <option>timide@menuisiers.fr</option>
+    <option>atchoum@menuisiers.fr</option>
+    <option>simplet@menuisiers.fr</option>
+    <option>doc@menuisiers.fr</option>
+  </select>
+</p>
+<p>
+  <input type="submit" value="Soumettre">
+</p>
+</form>
+ +
{{EmbedLiveSample("select", '', 220)}}
+ +

Notez la différence d'apparence entre les deux contrôles de formulaire.

+ +
/* Décommentez ce CSS pour que le sélecteur multiple ait la même hauteur que le simple. */
+
+/*
+select[multiple] {
+  height: 1.5em;
+  vertical-align: top;
+}
+select[multiple]:focus,
+select[multiple]:active {
+  height: auto;
+}
+*/
+ +

Il existe plusieurs façons de sélectionner plusieurs options dans un élément <select> avec un attribut multiple. Selon le système d'exploitation, les utilisateurs de souris peuvent maintenir les touches Ctrl, Commande ou Maj enfoncées, puis cliquer sur plusieurs options pour les sélectionner/désélectionner. Les utilisateurs du clavier peuvent sélectionner plusieurs éléments contigus en ciblant l'élément <select>, en sélectionnant un élément en haut ou en bas de la plage qu'ils souhaitent sélectionner à l'aide des touches de curseur Haut et Bas pour monter et descendre dans les options. La sélection de non-contigus n'est pas aussi bien supportée : les éléments devraient pouvoir être sélectionnés et désélectionnés en appuyant sur Espace , mais le support varie selon les navigateurs.

+ +

Accessibilité

+ +

Fournissez des instructions pour aider les utilisateurs à comprendre comment remplir le formulaire et utiliser les contrôles individuels du formulaire. Indiquez toute entrée obligatoire et facultative, les formats de données et toute autre information pertinente. Lorsque vous utilisez l'attribut multiple, informez l'utilisateur que plusieurs valeurs sont autorisées et donnez des indications sur la manière de fournir plusieurs valeurs, par exemple « séparez les adresses électroniques par une virgule ».

+ +

Définir size="1" sur une sélection multiple peut la faire apparaître comme une sélection unique dans certains navigateurs, mais elle ne s'étend alors pas au focus, ce qui nuit à la convivialité. Ne faites pas cela. Si vous modifiez l'apparence d'une sélection, et même si vous ne le faites pas, veillez à informer l'utilisateur que plusieurs options peuvent être sélectionnées par une autre méthode.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + +
SpécificationStatut
{{SpecName('HTML WHATWG', 'input.html#attr-input-multiple', 'l\'attribut multiple')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'input.html#attr-input-multiple', 'l\'attribut multiple')}}{{Spec2('HTML5 W3C')}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributes/pattern/index.html b/files/fr/web/html/attributes/pattern/index.html deleted file mode 100644 index c5e53db9ef..0000000000 --- a/files/fr/web/html/attributes/pattern/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: 'Attribut HTML : pattern' -slug: Web/HTML/Attributes/pattern -tags: - - Attribute - - Attributes - - Constraint Validation API - - HTML - - Reference -translation_of: Web/HTML/Attributes/pattern -original_slug: Web/HTML/Attributs/pattern ---- -
{{HTMLSidebar}}
- -

L'attribut pattern indique une expression rationnelle que doit respecter la valeur du contrôle du formulaire. Si une valeur non nulle (qui n'est pas null) ne respecte pas les contraintes portées par pattern, la propriété patternMismatch en lecture seule, rattachée à l'objet ValidityState, vaudra true.

- -

L'attribut pattern peut être utilisé pour les champs de type text, tel, email, url, password, search.

- -

La valeur de cet attribut doit être une expression rationnelle JavaScript valide (voir la documentation de RegExp et le guide sur les expressions rationnelles). Le marqueur (flag) 'u' pour être utilisé afin d'indiquer que l'expression rationnelle est une séquence de codets Unicode et non ASCII. On n'utilisera pas de barres obliques (slashes) autour du texte du motif de l'expression rationnelle.

- -

Si le motif n'est pas indiqué ou est invalide, aucune expression rationnelle ne sera appliquée et l'attribut sera ignoré.

- -
-

Note :On pourra utiliser l'attribut title afin de fournir aux utilisateurs des explications quant aux règles à respecter pour que la valeur soit valide. Attention, on ne doit pas utiliser uniquement cet attribut pour fournir ces explications. Voir ci-après quant à l'utilisabilité.

-
- -

Certains types d'<input> qui prennent en charge l'attribut pattern (notamment email et url) ont des contraintes particulières qui doivent également être respectées. Si l'attribut pattern n'est pas présent et que la valeur saisie ne respecte pas la syntaxe attendue pour ce type de champ, la propriété en lecture seule typeMismatch vaudra true.

- -

Utilisabilité

- -

Lorsqu'on utilise l'attribut pattern, il est nécessaire de fournir une description du format attendu avec un texte visible près du contrôle. On pourra en plus utiliser l'attribut title afin de fournir une description. Les agents utilisateurs peuvent utiliser la valeur de title lors de la validation des contraintes afin d'indiquer à l'utilisateur que le motif n'est pas respecté. Certains navigateurs pourront afficher une bulle d'information et certains outils d'assistance pourront énoncer le contenu de title à voix haute lorsque le focus arrive sur le contrôle. Toutefois, l'utilisation seule de cet attribut ne suffit pas pour fournir une accessibilité suffisante.

- -

Validation des contraintes

- -

Si la valeur du champ n'est pas la chaîne vide et que la valeur ne respecte pas l'expression rationnelle, on aura une incohérence, portée par patternMismatch.
- L'expression rationnelle indiquée doit correspondre pour toute la chaîne (depuis son début jusqu'à la fin. Autrement dit, c'est comme si on enveloppait l'expression entre ^(?: et )$ afin d'indiquer que c'est toute la chaîne qui est considérée (et pas une de ses sous-partie).

- -

Exemples

- -

Exemple 1

-

Avec le fragment de code HTML suivant :

- -
<p>
- <label>Veuillez saisir votre numéro de téléphone au format (123)456-7890
-  (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)-
-   <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> -
-   <input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/>
- </label>
-</p>
- -

Ici, nous avons 3 sections pour un numéro de téléphone nord-américain avec une étiquette implicite englobant les trois composants du numéro de téléphone, s'attendant respectivement à 3 chiffres, 3 chiffres et 4 chiffres, comme défini par l'attribut pattern défini sur chacun.

- -

Si les valeurs saisies sont trop longues ou trop courtes ou si elles contiennent des caractères qui ne sont pas des chiffres, la valeur de l'attribut patternMismatch sera true. On aura également l'activation de la pseudo-classe CSS :invalid.

- -
input:invalid {
-  border: red solid 3px;
-}
- -
{{EmbedLiveSample("Exemple_1", 300, 80)}}
- -

En utilisant les attributs minlength et maxlength à la place, on aurait eu les propriétés validityState.tooLong ou validityState.tooShort qui auraient valu true.

- -

Indiquer un motif

- -

On pourra utiliser l'attribut pattern afin d'indiquer une expression rationnelle qui devra être respectée par la valeur saisie pour que celle-ci soit considérée comme valide (voir ce guide sur la validation avec les expressions rationnelles pour une introduction).

- -

L'exemple qui suit permet de restreindre les valeurs saisies entre 4 et 8 caractères qui doivent également être des lettres minuscules.

- -
<form>
-  <div>
-    <label for="uname">Veuillez choisir un nom d'utilisateur : </label>
-    <input type="text" id="uname" name="name" required size="45"
-           pattern="[a-z]{4,8}" title="4 à 8 lettres en minuscules">
-    <span class="validity"></span>
-    <p>Les noms d'utilisateurs doivent être en minuscules et contenir 4 à 8 caractères.</p>
-  </div>
-  <div>
-    <button>Envoyer</button>
-  </div>
-</form>
- - - -

Cela donne le résultat suivant :

- -
{{EmbedLiveSample('specifying_a_pattern', '', 130)}}
- -

Accessibilité

- -

Lorsqu'un contrôle dispose de l'attribut pattern, l'attribut title, s'il est utilisé, doit décrire le motif souhaité. Attention, reposer uniquement sur l'attribut title pour fournir une aide visuelle n'est pas souhaitable, car la plupart des agents utilisateurs n'exposent pas cet attribut de façon accessible. Certains navigateurs affichent une bulle d'information lorsqu'on survole l'élément avec un pointeur mais cela laisse de côté les utilisateurs qui naviguent avec le clavier ou ceux qui utilisent une interface tactile. Il faut donc inclure au moins autrement des informations sur la façon de saisir des valeurs qui respectent les contraintes.

- -

L'attribut title est utilisé par certains navigateurs pour écrire les messages d'erreur. Attention toutefois, car les navigateurs affichent également le contenu de cet attribut au survol de l'élément y compris lorsqu'il n'y a pas d'erreur. La formulation doit être choisie avec précaution pour ne pas induire l'utilisateur en erreur.

- -

Spécifications

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

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributes/pattern/index.md b/files/fr/web/html/attributes/pattern/index.md new file mode 100644 index 0000000000..c5e53db9ef --- /dev/null +++ b/files/fr/web/html/attributes/pattern/index.md @@ -0,0 +1,153 @@ +--- +title: 'Attribut HTML : pattern' +slug: Web/HTML/Attributes/pattern +tags: + - Attribute + - Attributes + - Constraint Validation API + - HTML + - Reference +translation_of: Web/HTML/Attributes/pattern +original_slug: Web/HTML/Attributs/pattern +--- +
{{HTMLSidebar}}
+ +

L'attribut pattern indique une expression rationnelle que doit respecter la valeur du contrôle du formulaire. Si une valeur non nulle (qui n'est pas null) ne respecte pas les contraintes portées par pattern, la propriété patternMismatch en lecture seule, rattachée à l'objet ValidityState, vaudra true.

+ +

L'attribut pattern peut être utilisé pour les champs de type text, tel, email, url, password, search.

+ +

La valeur de cet attribut doit être une expression rationnelle JavaScript valide (voir la documentation de RegExp et le guide sur les expressions rationnelles). Le marqueur (flag) 'u' pour être utilisé afin d'indiquer que l'expression rationnelle est une séquence de codets Unicode et non ASCII. On n'utilisera pas de barres obliques (slashes) autour du texte du motif de l'expression rationnelle.

+ +

Si le motif n'est pas indiqué ou est invalide, aucune expression rationnelle ne sera appliquée et l'attribut sera ignoré.

+ +
+

Note :On pourra utiliser l'attribut title afin de fournir aux utilisateurs des explications quant aux règles à respecter pour que la valeur soit valide. Attention, on ne doit pas utiliser uniquement cet attribut pour fournir ces explications. Voir ci-après quant à l'utilisabilité.

+
+ +

Certains types d'<input> qui prennent en charge l'attribut pattern (notamment email et url) ont des contraintes particulières qui doivent également être respectées. Si l'attribut pattern n'est pas présent et que la valeur saisie ne respecte pas la syntaxe attendue pour ce type de champ, la propriété en lecture seule typeMismatch vaudra true.

+ +

Utilisabilité

+ +

Lorsqu'on utilise l'attribut pattern, il est nécessaire de fournir une description du format attendu avec un texte visible près du contrôle. On pourra en plus utiliser l'attribut title afin de fournir une description. Les agents utilisateurs peuvent utiliser la valeur de title lors de la validation des contraintes afin d'indiquer à l'utilisateur que le motif n'est pas respecté. Certains navigateurs pourront afficher une bulle d'information et certains outils d'assistance pourront énoncer le contenu de title à voix haute lorsque le focus arrive sur le contrôle. Toutefois, l'utilisation seule de cet attribut ne suffit pas pour fournir une accessibilité suffisante.

+ +

Validation des contraintes

+ +

Si la valeur du champ n'est pas la chaîne vide et que la valeur ne respecte pas l'expression rationnelle, on aura une incohérence, portée par patternMismatch.
+ L'expression rationnelle indiquée doit correspondre pour toute la chaîne (depuis son début jusqu'à la fin. Autrement dit, c'est comme si on enveloppait l'expression entre ^(?: et )$ afin d'indiquer que c'est toute la chaîne qui est considérée (et pas une de ses sous-partie).

+ +

Exemples

+ +

Exemple 1

+

Avec le fragment de code HTML suivant :

+ +
<p>
+ <label>Veuillez saisir votre numéro de téléphone au format (123)456-7890
+  (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)-
+   <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> -
+   <input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/>
+ </label>
+</p>
+ +

Ici, nous avons 3 sections pour un numéro de téléphone nord-américain avec une étiquette implicite englobant les trois composants du numéro de téléphone, s'attendant respectivement à 3 chiffres, 3 chiffres et 4 chiffres, comme défini par l'attribut pattern défini sur chacun.

+ +

Si les valeurs saisies sont trop longues ou trop courtes ou si elles contiennent des caractères qui ne sont pas des chiffres, la valeur de l'attribut patternMismatch sera true. On aura également l'activation de la pseudo-classe CSS :invalid.

+ +
input:invalid {
+  border: red solid 3px;
+}
+ +
{{EmbedLiveSample("Exemple_1", 300, 80)}}
+ +

En utilisant les attributs minlength et maxlength à la place, on aurait eu les propriétés validityState.tooLong ou validityState.tooShort qui auraient valu true.

+ +

Indiquer un motif

+ +

On pourra utiliser l'attribut pattern afin d'indiquer une expression rationnelle qui devra être respectée par la valeur saisie pour que celle-ci soit considérée comme valide (voir ce guide sur la validation avec les expressions rationnelles pour une introduction).

+ +

L'exemple qui suit permet de restreindre les valeurs saisies entre 4 et 8 caractères qui doivent également être des lettres minuscules.

+ +
<form>
+  <div>
+    <label for="uname">Veuillez choisir un nom d'utilisateur : </label>
+    <input type="text" id="uname" name="name" required size="45"
+           pattern="[a-z]{4,8}" title="4 à 8 lettres en minuscules">
+    <span class="validity"></span>
+    <p>Les noms d'utilisateurs doivent être en minuscules et contenir 4 à 8 caractères.</p>
+  </div>
+  <div>
+    <button>Envoyer</button>
+  </div>
+</form>
+ + + +

Cela donne le résultat suivant :

+ +
{{EmbedLiveSample('specifying_a_pattern', '', 130)}}
+ +

Accessibilité

+ +

Lorsqu'un contrôle dispose de l'attribut pattern, l'attribut title, s'il est utilisé, doit décrire le motif souhaité. Attention, reposer uniquement sur l'attribut title pour fournir une aide visuelle n'est pas souhaitable, car la plupart des agents utilisateurs n'exposent pas cet attribut de façon accessible. Certains navigateurs affichent une bulle d'information lorsqu'on survole l'élément avec un pointeur mais cela laisse de côté les utilisateurs qui naviguent avec le clavier ou ceux qui utilisent une interface tactile. Il faut donc inclure au moins autrement des informations sur la façon de saisir des valeurs qui respectent les contraintes.

+ +

L'attribut title est utilisé par certains navigateurs pour écrire les messages d'erreur. Attention toutefois, car les navigateurs affichent également le contenu de cet attribut au survol de l'élément y compris lorsqu'il n'y a pas d'erreur. La formulation doit être choisie avec précaution pour ne pas induire l'utilisateur en erreur.

+ +

Spécifications

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

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributes/readonly/index.html b/files/fr/web/html/attributes/readonly/index.html deleted file mode 100644 index 9eba1c737c..0000000000 --- a/files/fr/web/html/attributes/readonly/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: 'Attribut HTML : readonly' -slug: Web/HTML/Attributes/readonly -tags: - - Attribute - - Attributes - - Constraint validation - - Forms - - required -translation_of: Web/HTML/Attributes/readonly ---- -
{{HTMLSidebar}}
- -

L'attribut booléen readonly, lorsqu'il est présent, rend l'élément non mutable, ce qui signifie que l'utilisateur ne peut pas modifier le contrôle. Si l'attribut readonly est spécifié sur un élément de saisie, comme l'utilisateur ne peut pas modifier la saisie, l'élément ne participe pas à la validation des contraintes.

- -

L'attribut readonly est pris en charge par les types text, search, url, tel, email, password, date, mois, week, time, datetime-local, et number de <input> et les éléments de contrôle de formulaire <textarea>. S'il est présent sur l'un de ces types de saisie et éléments, la pseudo-classe :read-only correspondra. Si l'attribut n'est pas inclus, la pseudo-classe :read-write correspondra.

- -

L'attribut n'est pas pris en charge ou pertinent pour <select> ou les types d'entrée qui ne sont déjà pas mutables, comme checkbox et radio ou ne peuvent pas, par définition, commencer par une valeur, comme le type d'entrée file. range et color, car tous deux ont des valeurs par défaut. Il n'est pas non plus pris en charge sur hidden, car on ne peut pas s'attendre à ce qu'un utilisateur remplisse un formulaire qui est caché. Il n'est pas non plus supporté sur des types de boutons, y compris image.

- -
-

Note :Seuls les contrôles de texte peuvent être rendus en lecture seule, car pour les autres contrôles (comme les cases à cocher et les boutons), il n'y a pas de distinction utile entre être en lecture seule et être désactivé, donc l'attribut readonly ne s'applique pas.

-
- -

Lorsqu'une entrée possède l'attribut readonly, la pseudo-classe :read-only s'y applique également. Inversement, les entrées qui prennent en charge l'attribut readonly mais qui n'ont pas l'attribut défini correspondent à la pseudo-classe :read-write.

- -

Interactions entre attributs

- -

La différence entre disabled et readonly est que les contrôles en lecture seule peuvent toujours fonctionner et sont toujours focusables, alors que les contrôles désactivés ne peuvent pas recevoir de focus et ne sont pas soumis avec le formulaire et ne fonctionnent généralement pas comme contrôles jusqu'à ce qu'ils soient activés.

- -

Comme un champ en lecture seule ne peut pas voir sa valeur modifiée par une interaction avec l'utilisateur, required n'a aucun effet sur les entrées pour lesquelles l'attribut readonly est également spécifié.

- -

Le seul moyen de modifier dynamiquement la valeur de l'attribut readonly est d'utiliser un script.

- -
-

Note :L'attribut required n'est pas autorisé sur les entrées pour lesquelles l'attribut readonly est spécifié.

-
- -

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

- - diff --git a/files/fr/web/html/attributes/readonly/index.md b/files/fr/web/html/attributes/readonly/index.md new file mode 100644 index 0000000000..9eba1c737c --- /dev/null +++ b/files/fr/web/html/attributes/readonly/index.md @@ -0,0 +1,107 @@ +--- +title: 'Attribut HTML : readonly' +slug: Web/HTML/Attributes/readonly +tags: + - Attribute + - Attributes + - Constraint validation + - Forms + - required +translation_of: Web/HTML/Attributes/readonly +--- +
{{HTMLSidebar}}
+ +

L'attribut booléen readonly, lorsqu'il est présent, rend l'élément non mutable, ce qui signifie que l'utilisateur ne peut pas modifier le contrôle. Si l'attribut readonly est spécifié sur un élément de saisie, comme l'utilisateur ne peut pas modifier la saisie, l'élément ne participe pas à la validation des contraintes.

+ +

L'attribut readonly est pris en charge par les types text, search, url, tel, email, password, date, mois, week, time, datetime-local, et number de <input> et les éléments de contrôle de formulaire <textarea>. S'il est présent sur l'un de ces types de saisie et éléments, la pseudo-classe :read-only correspondra. Si l'attribut n'est pas inclus, la pseudo-classe :read-write correspondra.

+ +

L'attribut n'est pas pris en charge ou pertinent pour <select> ou les types d'entrée qui ne sont déjà pas mutables, comme checkbox et radio ou ne peuvent pas, par définition, commencer par une valeur, comme le type d'entrée file. range et color, car tous deux ont des valeurs par défaut. Il n'est pas non plus pris en charge sur hidden, car on ne peut pas s'attendre à ce qu'un utilisateur remplisse un formulaire qui est caché. Il n'est pas non plus supporté sur des types de boutons, y compris image.

+ +
+

Note :Seuls les contrôles de texte peuvent être rendus en lecture seule, car pour les autres contrôles (comme les cases à cocher et les boutons), il n'y a pas de distinction utile entre être en lecture seule et être désactivé, donc l'attribut readonly ne s'applique pas.

+
+ +

Lorsqu'une entrée possède l'attribut readonly, la pseudo-classe :read-only s'y applique également. Inversement, les entrées qui prennent en charge l'attribut readonly mais qui n'ont pas l'attribut défini correspondent à la pseudo-classe :read-write.

+ +

Interactions entre attributs

+ +

La différence entre disabled et readonly est que les contrôles en lecture seule peuvent toujours fonctionner et sont toujours focusables, alors que les contrôles désactivés ne peuvent pas recevoir de focus et ne sont pas soumis avec le formulaire et ne fonctionnent généralement pas comme contrôles jusqu'à ce qu'ils soient activés.

+ +

Comme un champ en lecture seule ne peut pas voir sa valeur modifiée par une interaction avec l'utilisateur, required n'a aucun effet sur les entrées pour lesquelles l'attribut readonly est également spécifié.

+ +

Le seul moyen de modifier dynamiquement la valeur de l'attribut readonly est d'utiliser un script.

+ +
+

Note :L'attribut required n'est pas autorisé sur les entrées pour lesquelles l'attribut readonly est spécifié.

+
+ +

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

+ + diff --git a/files/fr/web/html/attributes/rel/index.html b/files/fr/web/html/attributes/rel/index.html deleted file mode 100644 index c2f3fbde6d..0000000000 --- a/files/fr/web/html/attributes/rel/index.html +++ /dev/null @@ -1,427 +0,0 @@ ---- -title: 'Attribut HTML : rel' -slug: Web/HTML/Attributes/rel -tags: - - Attribute - - Attributes - - Constraint validation - - Link - - form - - rel -translation_of: Web/HTML/Attributes/rel ---- -
{{HTMLSidebar}}
- -

L'attribut rel définit la relation entre une ressource liée et le document actuel. Valable sur <link>, <a>, <area>, et <form>, les valeurs supportées dépendent de l'élément sur lequel se trouve l'attribut.

- -

Le type de relations est donné par la valeur de l'attribut rel, qui, s'il est présent, doit avoir une valeur qui est un ensemble non ordonné de mots-clés uniques séparés par des espaces. À la différence d'un nom de class, qui n'exprime pas de sémantique, l'attribut rel doit exprimer des mots-clés qui sont sémantiquement valides pour les machines et les humains. Les registres actuels des valeurs possibles de l'attribut rel sont le registre de relations de liens de l'IANA, le HTML Living Standard, et la page existing-rel-values librement modifiable dans le wiki microformats, comme suggéré par le Living Standard. Si un attribut rel non présent dans l'une des trois sources ci-dessus est utilisé, certains validateurs HTML (tels que le W3C Markup Validation Service) généreront un avertissement.

- -

Le tableau suivant énumère quelques-uns des principaux mots-clés existants. Chaque mot-clé dans une valeur séparée par un espace doit être unique dans cette valeur.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Valeurs de l'attribut rel, et les éléments pour lesquels chacun est pertinent.
Valeur pour relDescription<link><a> et <area><form>
alternateReprésentations alternatives du document actuel.LienLienNon autorisé
authorAuteur du document ou de l'article en cours.LienLienNon autorisé
bookmarkLien permanent pour la section de l'ancêtre le plus proche.Non autoriséLienNon autorisé
canonicalURL préférée pour le document actuel.LienNon autoriséNon autorisé
dns-prefetchIndique au navigateur d'effectuer de manière préemptive la résolution DNS pour l'origine de la ressource cible.Ressource externeNon autoriséNon autorisé
externalLe document référencé ne fait pas partie du même site que le document actuel.Non autoriséAnnotationAnnotation
helpLien vers l'aide contextuelle.LienLienLien
iconUne icône représentant le document actuel.Ressource externeNon autoriséNon autorisé
licenseIndique que le contenu principal du document actuel est couvert par la licence de copyright décrite par le document référencé.LienLienLien
manifestManifeste de l'application web.LienNon autoriséNon autorisé
modulepreloadIndique au navigateur de récupérer le script de manière préemptive et de le stocker dans la carte des modules du document pour une évaluation ultérieure. En option, les dépendances du module peuvent également être récupérées.Ressource externeNon autoriséNon autorisé
nextIndique que le document actuel fait partie d'une série et que le document suivant dans la série est le document référencé.LienLienLien
nofollowIndique que l'auteur ou l'éditeur original du document actuel n'approuve pas le document référencé.Non autoriséAnnotationAnnotation
noopenerCrée un contexte de navigation de haut niveau qui n'est pas un contexte de navigation auxiliaire si l'hyperlien créerait l'un ou l'autre, pour commencer (c'est-à-dire qu'il a une valeur d'attribut target appropriée).Non autoriséAnnotationAnnotation
noreferrerAucun en-tête Referer ne sera inclus. En outre, a le même effet que noopener.Non autoriséAnnotationAnnotation
openerCrée un contexte de navigation auxiliaire si l'hyperlien créerait autrement un contexte de navigation de premier niveau qui n'est pas un contexte de navigation auxiliaire (c'est-à-dire qui a « _blank » comme valeur d'attribut target).Non autoriséAnnotationAnnotation
pingbackDonne l'adresse du serveur de retour d'appel qui gère les retours d'appel pour le document actuel.Ressource externeNon autoriséNon autorisé
preconnectSpécifie que l'agent utilisateur doit se connecter de manière préemptive à l'origine de la ressource cible.Ressource externeNon autoriséNon autorisé
prefetchIndique que l'agent utilisateur doit récupérer et mettre en cache de manière préemptive la ressource cible, car elle est susceptible d'être requise pour une navigation ultérieure.Ressource externeNon autoriséNon autorisé
preloadSpécifie que l'agent utilisateur doit récupérer et mettre en cache de manière préemptive la ressource cible pour la navigation actuelle en fonction de la destination potentielle donnée par l'attribut as (et la priorité associée à la destination correspondante).Ressource externeNon autoriséNon autorisé
prerenderSpécifie que l'agent utilisateur doit récupérer de manière préemptive la ressource cible et la traiter de manière à fournir une réponse plus rapide à l'avenir.Ressource externeNon autoriséNon autorisé
prevIndique que le document actuel fait partie d'une série et que le document précédent dans la série est le document référencé.LienLienLien
searchDonne un lien vers une ressource qui peut être utilisée pour effectuer une recherche dans le document actuel et ses pages connexes.LienLienLien
stylesheetImporte une feuille de style.Ressource externeNon autoriséNon autorisé
tagDonne une balise (identifiée par l'adresse donnée) qui s'applique au document actuel.Non autoriséLienNon autorisé
- -

L'attribut rel concerne les éléments <link>, <a>, <area> et <form>, mais certaines valeurs ne concernent qu'un sous-ensemble de ces éléments. Comme toutes les valeurs d'attributs de mots-clés HTML, ces valeurs sont insensibles à la casse.

- -

L'attribut rel n'a pas de valeur par défaut. Si l'attribut est omis ou si aucune des valeurs de l'attribut n'est prise en charge, alors le document n'a pas de relation particulière avec la ressource de destination autre que l'existence d'un lien hypertexte entre les deux. Dans ce cas, sur <link> et <form>, si l'attribut rel est absent, n'a pas de mots-clés, ou s'il ne s'agit pas d'un ou plusieurs des mots-clés séparés par des espaces ci-dessus, alors l'élément ne crée aucun lien. <a> et <area> créeront quand même des liens, mais sans relation définie.

- -

Valeurs

- -

S'il existe plusieurs <link rel="icon">, le navigateur utilise leur attribut media, type et sizes pour sélectionner l'icône la plus appropriée. Si plusieurs icônes sont également appropriées, la dernière est utilisée. Si l'icône la plus appropriée s'avère ultérieurement inappropriée, par exemple parce qu'elle utilise un format non pris en charge, le navigateur passe à l'icône suivante la plus appropriée, et ainsi de suite.

- -

Note : L'iOS d'Apple n'utilise pas ce type de lien, ni l'attribut sizes, comme le font d'autres navigateurs mobiles, pour sélectionner une icône de page Web pour Web Clip ou un espace réservé au démarrage. Au lieu de cela, il utilise les attributs non standard apple-touch-icon et apple-touch-startup-image respectivement.

- -
-

Note :Le type de lien shortcut est souvent vu avant icon, mais ce type de lien est non conforme, ignoré et les auteurs web ne doivent plus l'utiliser.

-
- -
-
alternate
-
Indique une représentation alternative du document actuel. Valable pour <link>, <a>, et <area>, la signification dépend des valeurs des autres attributs. -
    -
  • Avec le mot clé stylesheet sur un <link>, il crée une feuille de style alternative. - 
    <!-- une feuille de style persistante -->
-<link rel="stylesheet" href="default.css">
-<!-- feuilles de style alternativement -->
-<link rel="alternate stylesheet" href="highcontrast.css" title="Contraste élevé">
    -
    • -
  • Avec un attribut hreflang qui diffère de la langue du document, cela indique une traduction.
    • -
  • Avec l'attribut type, il indique que le document référencé est le même contenu dans un format différent. Par exemple, avec type="application/rss+xml", il crée un lien hypertexte référençant un flux de syndication. - 
    <link rel="alternate" type="application/atom+xml" href="posts.xml" title="Blog">
    -
    • -
  • Les attributs hreflang et type spécifient des liens vers des versions du document dans un format et une langue alternatifs, destinés à d'autres médias : - 
    <link rel="alternate" href="/fr/html/print" hreflang="fr" type="text/html" media="print" title="HTML français (pour l'impression)">
-<link rel="alternate" href="/fr/pdf" hreflang="fr" type=application/pdf title="PDF Français">
    -
    • -
-
-

Note :L'attribut obsolète rev="made" est traité comme rel="alternate".

-
-
-
author
-
Indique l'auteur du document ou de l'article en cours. Pertinent pour les éléments <link>, <a> et <area>, le mot-clé author crée un lien hypertexte. Avec <a> et <area>, il indique que le document lié (ou mailto:) fournit des informations sur l'auteur de l'ancêtre le plus proche d'un élément <article> s'il en existe un, sinon le document entier. Pour <link>, il représente l'auteur du document entier.
-
bookmark
-
Pertinent comme valeur de l'attribut rel pour les éléments <a> et <area>, le signet fournit un permalien pour la section ancêtre, qui est l'ancêtre le plus proche d'un élément <article> ou <section>, s'il y en a au moins un, sinon, le parent le plus proche de l'en-tête ou l'ancêtre descendant, jusqu'au suivant.
-
canonical
-
Valable pour <link>, elle définit l'URL préférée du document actuel, ce qui est utile pour les moteurs de recherche.
-
dns-prefetch
-
Pertinent pour l'élément <link> à la fois dans les éléments <body> et <head>, il indique au navigateur d'effectuer de manière préemptive la résolution DNS pour l'origine de la ressource cible. Utile pour les ressources dont l'utilisateur aura probablement besoin, elle permet de réduire la latence et donc d'améliorer les performances lorsque l'utilisateur accède effectivement aux ressources car le navigateur a effectué de manière préemptive la résolution DNS pour l'origine de la ressource spécifiée. Voir dns-prefetch décrit dans les conseils.
-
external
-
S'appliquant à <form>, <a> et <area>, elle indique que le document référencé ne fait pas partie du site actuel. Il peut être utilisé avec des sélecteurs d'attributs pour donner un style aux liens externes d'une manière qui indique à l'utilisateur qu'il va quitter le site actuel.
-
help
-
Concerne les éléments <form>, <link>, <a> et <area>, le mot clé help indique que le contenu lié fournit une aide contextuelle, fournissant des informations pour le parent de l'élément définissant l'hyperlien, et ses enfants. Lorsqu'il est utilisé dans <link>, l'aide concerne l'ensemble du document. Lorsqu'elle est incluse avec <a> et <area> et qu'elle est prise en charge, le cursor par défaut sera help au lieu de pointer.
-
icon
-
-

Valable avec <link>, la ressource liée représente l'icône, ressource de représentation de la page dans l'interface utilisateur, pour le document courant.

- -

L'utilisation la plus courante de la valeur icon est le favicon :

- - 
<link rel="icon" href="favicon.ico">
- -

S'il existe plusieurs <link rel="icon">, le navigateur utilise leurs attributs media, type, et sizes pour sélectionner l'icône la plus appropriée. Si plusieurs icônes sont également appropriées, la dernière est utilisée. Si l'icône la plus appropriée s'avère ultérieurement inappropriée, par exemple parce qu'elle utilise un format non pris en charge, le navigateur passe à l'icône suivante la plus appropriée, et ainsi de suite.

- -
-

Note :Avant Firefox 83, l'attribut crossorigin n'était pas pris en charge pour rel="icon" ; il existe également un problème pour Chrome.

- -

L'iOS d'Apple n'utilise pas ce type de lien, ni l'attribut sizes, comme le font d'autres navigateurs mobiles, pour sélectionner une icône de page Web pour Web Clip ou un espace réservé au démarrage. Au lieu de cela, il utilise respectivement le type non standard apple-touch-icon et apple-touch-startup-image.

- -

Le type de lien shortcut est souvent vu avant icon, mais ce type de lien est non conforme, ignoré et les auteurs web ne doivent plus l'utiliser.

-
-
-
license
-
-

Valable sur les éléments <a>, <area>, <form> et <link>, la valeur license indique que l'hyperlien mène à un document décrivant les informations relatives à la licence ; que le contenu principal du document actuel est couvert par la licence de droit d'auteur décrite par le document référencé. Si elle ne se trouve pas à l'intérieur de l'élément <head>, la norme ne fait pas de distinction entre un hyperlien s'appliquant à une partie spécifique du document ou au document dans son ensemble. Seules les données de la page peuvent l'indiquer.

- - 
<link rel="license" href="#license">
- -
-

Note :Bien que reconnu, le synonyme copyright est incorrect et doit être évité.

-
-
-
manifest
-
Manifeste de l'application Web. Nécessite l'utilisation du protocole CORS pour le « fetching cross-origin ».
-
modulepreload
-
Utile pour améliorer les performances, et pertinent pour l'élément <link> n'importe où dans le document, la définition de rel="modulepreload" indique au navigateur de récupérer de manière préemptive le script (et les dépendances) et de le stocker dans la carte des modules du document pour une évaluation ultérieure. Les liens modulepreload peuvent garantir que la récupération du réseau se fait avec le module prêt (mais non évalué) dans la carte des modules avant qu'il ne soit nécessairement nécessaire. Voir aussi Types de liens : modulepreload.
-
next
-
Pertinent pour les éléments <form>, <link>, <a> et <area>, les valeurs next indiquent que le document actuel fait partie d'une série, et que le document suivant dans la série est le document référencé. Lorsqu'elles sont incluses dans un <link>, les navigateurs peuvent supposer que le document sera récupéré ensuite, et le traiter comme une indication de ressource.
-
nofollow
-
Pertinent pour les éléments <form>, <a> et <area>, le mot clé nofollow indique aux robots des moteurs de recherche d'ignorer la relation de lien. La relation nofollow peut indiquer que le propriétaire du document actuel ne cautionne pas le document référencé. Elle est souvent incluse par les optimiseurs de moteurs de recherche qui prétendent que leurs fermes de liens ne sont pas des pages de spam.
-
noopener
-
Cela concerne <form>, <a> et <area>, elle crée un contexte de navigation de haut niveau qui n'est pas un contexte de navigation auxiliaire si l'hyperlien créait l'un ou l'autre pour commencer (c.-à-d. a une valeur appropriée de l'attribut target). En d'autres termes, il fait en sorte que le lien se comporte comme si window.opener était nul et que target="_parent" était défini.
-
- C'est le contraire de opener.
-
noreferrer
-
Pertinent pour <form>, <a> et <area>, l'inclusion de cette valeur rend le référent inconnu (aucun en-tête Referer ne sera inclus), et crée un contexte de navigation de haut niveau comme si noopener était également défini.
-
opener
-
Crée un contexte de navigation auxiliaire si l'hyperlien créerait autrement un contexte de navigation de haut niveau qui n'est pas un contexte de navigation auxiliaire (c.-à-d. a « _blank » comme valeur d'attribut target). Effectivement, c'est le contraire de noopener.
-
pingback
-
Donne l'adresse du serveur de retour d'appel qui gère les retours d'appel pour le document actuel.
-
preconnect
-
Spécifie que l'agent utilisateur doit se connecter de manière préemptive à l'origine de la ressource cible.
-
prefetch
-
Indique que l'agent utilisateur doit récupérer et mettre en cache de manière préemptive la ressource cible, car elle est susceptible d'être requise pour une navigation ultérieure.
-
preload
-
Spécifie que l'agent utilisateur doit récupérer et mettre en cache de manière préemptive la ressource cible pour la navigation actuelle en fonction de la destination potentielle donnée par l'attribut as (et la priorité associée à la destination correspondante).
-
prerender
-
Spécifie que l'agent utilisateur doit récupérer de manière préemptive la ressource cible et la traiter de manière à fournir une réponse plus rapide à l'avenir.
-
prev
-
-

Similaire au mot-clé next, pertinent pour les éléments <form>, <link>, <a> et <area>, les valeurs prev indiquent que le document actuel fait partie d'une série, et que le lien renvoie à un document précédent de la série est le document référencé.

- -
-

Note :Le synonyme previous est incorrect et ne doit pas être utilisé.

-
-
-
search
-
-

Concerne les éléments <form>, <link>, <a> et < area>, les mots-clés search indiquent que l'hyperlien fait référence à un document dont l'interface est spécialement conçue pour effectuer des recherches dans le document actuel, le site et les ressources connexes, en fournissant un lien vers une ressource qui peut être utilisée pour effectuer une recherche.

- -

Si l'attribut type est défini à application/opensearchdescription+xml, la ressource est un prolongateur OpenSearch qui peut être facilement ajouté à l'interface de certains navigateurs comme Firefox ou Internet Explorer.

-
-
stylesheet
-
-

Valable pour l'élément <link>, il importe une ressource externe à utiliser comme feuille de style. L'attribut type n'est pas nécessaire, car il s'agit d'une feuille de style text/css, puisque c'est la valeur par défaut. S'il ne s'agit pas d'une feuille de style de type text/css, il est préférable de déclarer le type.

- -

Bien que cet attribut définisse le lien comme étant une feuille de style, l'interaction avec d'autres attributs et d'autres termes clés dans la valeur rel ont un impact sur le téléchargement et/ou l'utilisation de la feuille de style.

- -

Lorsqu'il est utilisé avec le mot-clé alternate, il définit une feuille de style alternative. Dans ce cas, incluez un title non vide.

- -

La feuille de style externe ne sera pas utilisée ni même téléchargée si le média ne correspond pas à la valeur de l'attribut media.

- -

Nécessite l'utilisation du protocole CORS pour la récupération inter-origine.

-
-
tag
-
Valable pour les éléments <a> et <area>, il donne une balise (identifiée par l'adresse donnée) qui s'applique au document actuel. La valeur de la balise indique que le lien renvoie à un document, décrivant une balise s'appliquant au document sur lequel il se trouve. Ce type de lien n'est pas destiné aux balises, dans un nuage de balises, car elles s'appliquent à un groupe de pages, alors que la valeur tag de l'attribut rel concerne un seul document.
-
- -

Valeurs non standard

- -
-
apple-touch-icon-precomposed
-

Exemple d'utilisation

- 
<!-- iPad de troisième génération avec écran Retina haute résolution : -->
-  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/static/img/favicon144.e7e21ca263ca.png">
-  <!-- iPhone avec écran Retina haute résolution : -->
-  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/static/img/favicon114.d526f38b09c5.png">
-  <!-- première et deuxième génération d'iPad: -->
-  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/static/img/favicon72.cc65d1d762a0.png">
-  <!-- Appareils iPhone non Retina, iPod Touch et Android 2.1+ : -->
-  <link rel="apple-touch-icon-precomposed" href="/static/img/favicon57.de33179910ae.png">
-  <!-- favicône de base -->
-  <link rel="shortcut icon" href="/static/img/favicon32.7f3da72dcea1.png">
-
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'links.html#linkTypes', 'l\'attribut rel')}}{{Spec2('HTML WHATWG')}}Ajout de opener. Mise en place de noopener par défaut pour target="_blank".
{{SpecName('HTML5 W3C', 'links.html#linkTypes', 'l\'attribut rel')}}{{Spec2('HTML5 W3C')}}Ajout de tag, search, prefetch, noreferrer, nofollow, icon et author.
- Renommage de copyright en license.
- Suppression de start, chapitre, section, subsection et appendice.
{{SpecName("Preload", "#x2.link-type-preload", "preload")}}{{Spec2("Preload")}}Ajout de preload.
{{SpecName("Resource Hints", "#dfn-preconnect", "preconnect")}}{{Spec2("Resource Hints")}}Ajout des valeurs dns-prefetch, preconnect et prerender.
{{SpecName("HTML4.01", "types.html#type-links", "link types")}}{{Spec2("HTML4.01")}}Ajout de alternate, stylesheet, start, chapter, section, subsection, appendix et bookmark.
- Renommage de previous par prev.
- Suppression de top et search.
{{SpecName("HTML3.2", "#link", "<link>")}} -

Obsolète

- 		Ajout de top, contents, index, glossary, copyright, next, previous, help et search.
{{RFC(1866, "HTML 2.0")}}ObsolèteDéfinition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("html.elements.link.rel")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributes/rel/index.md b/files/fr/web/html/attributes/rel/index.md new file mode 100644 index 0000000000..c2f3fbde6d --- /dev/null +++ b/files/fr/web/html/attributes/rel/index.md @@ -0,0 +1,427 @@ +--- +title: 'Attribut HTML : rel' +slug: Web/HTML/Attributes/rel +tags: + - Attribute + - Attributes + - Constraint validation + - Link + - form + - rel +translation_of: Web/HTML/Attributes/rel +--- +
{{HTMLSidebar}}
+ +

L'attribut rel définit la relation entre une ressource liée et le document actuel. Valable sur <link>, <a>, <area>, et <form>, les valeurs supportées dépendent de l'élément sur lequel se trouve l'attribut.

+ +

Le type de relations est donné par la valeur de l'attribut rel, qui, s'il est présent, doit avoir une valeur qui est un ensemble non ordonné de mots-clés uniques séparés par des espaces. À la différence d'un nom de class, qui n'exprime pas de sémantique, l'attribut rel doit exprimer des mots-clés qui sont sémantiquement valides pour les machines et les humains. Les registres actuels des valeurs possibles de l'attribut rel sont le registre de relations de liens de l'IANA, le HTML Living Standard, et la page existing-rel-values librement modifiable dans le wiki microformats, comme suggéré par le Living Standard. Si un attribut rel non présent dans l'une des trois sources ci-dessus est utilisé, certains validateurs HTML (tels que le W3C Markup Validation Service) généreront un avertissement.

+ +

Le tableau suivant énumère quelques-uns des principaux mots-clés existants. Chaque mot-clé dans une valeur séparée par un espace doit être unique dans cette valeur.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Valeurs de l'attribut rel, et les éléments pour lesquels chacun est pertinent.
Valeur pour relDescription<link><a> et <area><form>
alternateReprésentations alternatives du document actuel.LienLienNon autorisé
authorAuteur du document ou de l'article en cours.LienLienNon autorisé
bookmarkLien permanent pour la section de l'ancêtre le plus proche.Non autoriséLienNon autorisé
canonicalURL préférée pour le document actuel.LienNon autoriséNon autorisé
dns-prefetchIndique au navigateur d'effectuer de manière préemptive la résolution DNS pour l'origine de la ressource cible.Ressource externeNon autoriséNon autorisé
externalLe document référencé ne fait pas partie du même site que le document actuel.Non autoriséAnnotationAnnotation
helpLien vers l'aide contextuelle.LienLienLien
iconUne icône représentant le document actuel.Ressource externeNon autoriséNon autorisé
licenseIndique que le contenu principal du document actuel est couvert par la licence de copyright décrite par le document référencé.LienLienLien
manifestManifeste de l'application web.LienNon autoriséNon autorisé
modulepreloadIndique au navigateur de récupérer le script de manière préemptive et de le stocker dans la carte des modules du document pour une évaluation ultérieure. En option, les dépendances du module peuvent également être récupérées.Ressource externeNon autoriséNon autorisé
nextIndique que le document actuel fait partie d'une série et que le document suivant dans la série est le document référencé.LienLienLien
nofollowIndique que l'auteur ou l'éditeur original du document actuel n'approuve pas le document référencé.Non autoriséAnnotationAnnotation
noopenerCrée un contexte de navigation de haut niveau qui n'est pas un contexte de navigation auxiliaire si l'hyperlien créerait l'un ou l'autre, pour commencer (c'est-à-dire qu'il a une valeur d'attribut target appropriée).Non autoriséAnnotationAnnotation
noreferrerAucun en-tête Referer ne sera inclus. En outre, a le même effet que noopener.Non autoriséAnnotationAnnotation
openerCrée un contexte de navigation auxiliaire si l'hyperlien créerait autrement un contexte de navigation de premier niveau qui n'est pas un contexte de navigation auxiliaire (c'est-à-dire qui a « _blank » comme valeur d'attribut target).Non autoriséAnnotationAnnotation
pingbackDonne l'adresse du serveur de retour d'appel qui gère les retours d'appel pour le document actuel.Ressource externeNon autoriséNon autorisé
preconnectSpécifie que l'agent utilisateur doit se connecter de manière préemptive à l'origine de la ressource cible.Ressource externeNon autoriséNon autorisé
prefetchIndique que l'agent utilisateur doit récupérer et mettre en cache de manière préemptive la ressource cible, car elle est susceptible d'être requise pour une navigation ultérieure.Ressource externeNon autoriséNon autorisé
preloadSpécifie que l'agent utilisateur doit récupérer et mettre en cache de manière préemptive la ressource cible pour la navigation actuelle en fonction de la destination potentielle donnée par l'attribut as (et la priorité associée à la destination correspondante).Ressource externeNon autoriséNon autorisé
prerenderSpécifie que l'agent utilisateur doit récupérer de manière préemptive la ressource cible et la traiter de manière à fournir une réponse plus rapide à l'avenir.Ressource externeNon autoriséNon autorisé
prevIndique que le document actuel fait partie d'une série et que le document précédent dans la série est le document référencé.LienLienLien
searchDonne un lien vers une ressource qui peut être utilisée pour effectuer une recherche dans le document actuel et ses pages connexes.LienLienLien
stylesheetImporte une feuille de style.Ressource externeNon autoriséNon autorisé
tagDonne une balise (identifiée par l'adresse donnée) qui s'applique au document actuel.Non autoriséLienNon autorisé
+ +

L'attribut rel concerne les éléments <link>, <a>, <area> et <form>, mais certaines valeurs ne concernent qu'un sous-ensemble de ces éléments. Comme toutes les valeurs d'attributs de mots-clés HTML, ces valeurs sont insensibles à la casse.

+ +

L'attribut rel n'a pas de valeur par défaut. Si l'attribut est omis ou si aucune des valeurs de l'attribut n'est prise en charge, alors le document n'a pas de relation particulière avec la ressource de destination autre que l'existence d'un lien hypertexte entre les deux. Dans ce cas, sur <link> et <form>, si l'attribut rel est absent, n'a pas de mots-clés, ou s'il ne s'agit pas d'un ou plusieurs des mots-clés séparés par des espaces ci-dessus, alors l'élément ne crée aucun lien. <a> et <area> créeront quand même des liens, mais sans relation définie.

+ +

Valeurs

+ +

S'il existe plusieurs <link rel="icon">, le navigateur utilise leur attribut media, type et sizes pour sélectionner l'icône la plus appropriée. Si plusieurs icônes sont également appropriées, la dernière est utilisée. Si l'icône la plus appropriée s'avère ultérieurement inappropriée, par exemple parce qu'elle utilise un format non pris en charge, le navigateur passe à l'icône suivante la plus appropriée, et ainsi de suite.

+ +

Note : L'iOS d'Apple n'utilise pas ce type de lien, ni l'attribut sizes, comme le font d'autres navigateurs mobiles, pour sélectionner une icône de page Web pour Web Clip ou un espace réservé au démarrage. Au lieu de cela, il utilise les attributs non standard apple-touch-icon et apple-touch-startup-image respectivement.

+ +
+

Note :Le type de lien shortcut est souvent vu avant icon, mais ce type de lien est non conforme, ignoré et les auteurs web ne doivent plus l'utiliser.

+
+ +
+
alternate
+
Indique une représentation alternative du document actuel. Valable pour <link>, <a>, et <area>, la signification dépend des valeurs des autres attributs. +
    +
  • Avec le mot clé stylesheet sur un <link>, il crée une feuille de style alternative. + 
    <!-- une feuille de style persistante -->
+<link rel="stylesheet" href="default.css">
+<!-- feuilles de style alternativement -->
+<link rel="alternate stylesheet" href="highcontrast.css" title="Contraste élevé">
    +
    • +
  • Avec un attribut hreflang qui diffère de la langue du document, cela indique une traduction.
    • +
  • Avec l'attribut type, il indique que le document référencé est le même contenu dans un format différent. Par exemple, avec type="application/rss+xml", il crée un lien hypertexte référençant un flux de syndication. + 
    <link rel="alternate" type="application/atom+xml" href="posts.xml" title="Blog">
    +
    • +
  • Les attributs hreflang et type spécifient des liens vers des versions du document dans un format et une langue alternatifs, destinés à d'autres médias : + 
    <link rel="alternate" href="/fr/html/print" hreflang="fr" type="text/html" media="print" title="HTML français (pour l'impression)">
+<link rel="alternate" href="/fr/pdf" hreflang="fr" type=application/pdf title="PDF Français">
    +
    • +
+
+

Note :L'attribut obsolète rev="made" est traité comme rel="alternate".

+
+
+
author
+
Indique l'auteur du document ou de l'article en cours. Pertinent pour les éléments <link>, <a> et <area>, le mot-clé author crée un lien hypertexte. Avec <a> et <area>, il indique que le document lié (ou mailto:) fournit des informations sur l'auteur de l'ancêtre le plus proche d'un élément <article> s'il en existe un, sinon le document entier. Pour <link>, il représente l'auteur du document entier.
+
bookmark
+
Pertinent comme valeur de l'attribut rel pour les éléments <a> et <area>, le signet fournit un permalien pour la section ancêtre, qui est l'ancêtre le plus proche d'un élément <article> ou <section>, s'il y en a au moins un, sinon, le parent le plus proche de l'en-tête ou l'ancêtre descendant, jusqu'au suivant.
+
canonical
+
Valable pour <link>, elle définit l'URL préférée du document actuel, ce qui est utile pour les moteurs de recherche.
+
dns-prefetch
+
Pertinent pour l'élément <link> à la fois dans les éléments <body> et <head>, il indique au navigateur d'effectuer de manière préemptive la résolution DNS pour l'origine de la ressource cible. Utile pour les ressources dont l'utilisateur aura probablement besoin, elle permet de réduire la latence et donc d'améliorer les performances lorsque l'utilisateur accède effectivement aux ressources car le navigateur a effectué de manière préemptive la résolution DNS pour l'origine de la ressource spécifiée. Voir dns-prefetch décrit dans les conseils.
+
external
+
S'appliquant à <form>, <a> et <area>, elle indique que le document référencé ne fait pas partie du site actuel. Il peut être utilisé avec des sélecteurs d'attributs pour donner un style aux liens externes d'une manière qui indique à l'utilisateur qu'il va quitter le site actuel.
+
help
+
Concerne les éléments <form>, <link>, <a> et <area>, le mot clé help indique que le contenu lié fournit une aide contextuelle, fournissant des informations pour le parent de l'élément définissant l'hyperlien, et ses enfants. Lorsqu'il est utilisé dans <link>, l'aide concerne l'ensemble du document. Lorsqu'elle est incluse avec <a> et <area> et qu'elle est prise en charge, le cursor par défaut sera help au lieu de pointer.
+
icon
+
+

Valable avec <link>, la ressource liée représente l'icône, ressource de représentation de la page dans l'interface utilisateur, pour le document courant.

+ +

L'utilisation la plus courante de la valeur icon est le favicon :

+ + 
<link rel="icon" href="favicon.ico">
+ +

S'il existe plusieurs <link rel="icon">, le navigateur utilise leurs attributs media, type, et sizes pour sélectionner l'icône la plus appropriée. Si plusieurs icônes sont également appropriées, la dernière est utilisée. Si l'icône la plus appropriée s'avère ultérieurement inappropriée, par exemple parce qu'elle utilise un format non pris en charge, le navigateur passe à l'icône suivante la plus appropriée, et ainsi de suite.

+ +
+

Note :Avant Firefox 83, l'attribut crossorigin n'était pas pris en charge pour rel="icon" ; il existe également un problème pour Chrome.

+ +

L'iOS d'Apple n'utilise pas ce type de lien, ni l'attribut sizes, comme le font d'autres navigateurs mobiles, pour sélectionner une icône de page Web pour Web Clip ou un espace réservé au démarrage. Au lieu de cela, il utilise respectivement le type non standard apple-touch-icon et apple-touch-startup-image.

+ +

Le type de lien shortcut est souvent vu avant icon, mais ce type de lien est non conforme, ignoré et les auteurs web ne doivent plus l'utiliser.

+
+
+
license
+
+

Valable sur les éléments <a>, <area>, <form> et <link>, la valeur license indique que l'hyperlien mène à un document décrivant les informations relatives à la licence ; que le contenu principal du document actuel est couvert par la licence de droit d'auteur décrite par le document référencé. Si elle ne se trouve pas à l'intérieur de l'élément <head>, la norme ne fait pas de distinction entre un hyperlien s'appliquant à une partie spécifique du document ou au document dans son ensemble. Seules les données de la page peuvent l'indiquer.

+ + 
<link rel="license" href="#license">
+ +
+

Note :Bien que reconnu, le synonyme copyright est incorrect et doit être évité.

+
+
+
manifest
+
Manifeste de l'application Web. Nécessite l'utilisation du protocole CORS pour le « fetching cross-origin ».
+
modulepreload
+
Utile pour améliorer les performances, et pertinent pour l'élément <link> n'importe où dans le document, la définition de rel="modulepreload" indique au navigateur de récupérer de manière préemptive le script (et les dépendances) et de le stocker dans la carte des modules du document pour une évaluation ultérieure. Les liens modulepreload peuvent garantir que la récupération du réseau se fait avec le module prêt (mais non évalué) dans la carte des modules avant qu'il ne soit nécessairement nécessaire. Voir aussi Types de liens : modulepreload.
+
next
+
Pertinent pour les éléments <form>, <link>, <a> et <area>, les valeurs next indiquent que le document actuel fait partie d'une série, et que le document suivant dans la série est le document référencé. Lorsqu'elles sont incluses dans un <link>, les navigateurs peuvent supposer que le document sera récupéré ensuite, et le traiter comme une indication de ressource.
+
nofollow
+
Pertinent pour les éléments <form>, <a> et <area>, le mot clé nofollow indique aux robots des moteurs de recherche d'ignorer la relation de lien. La relation nofollow peut indiquer que le propriétaire du document actuel ne cautionne pas le document référencé. Elle est souvent incluse par les optimiseurs de moteurs de recherche qui prétendent que leurs fermes de liens ne sont pas des pages de spam.
+
noopener
+
Cela concerne <form>, <a> et <area>, elle crée un contexte de navigation de haut niveau qui n'est pas un contexte de navigation auxiliaire si l'hyperlien créait l'un ou l'autre pour commencer (c.-à-d. a une valeur appropriée de l'attribut target). En d'autres termes, il fait en sorte que le lien se comporte comme si window.opener était nul et que target="_parent" était défini.
+
+ C'est le contraire de opener.
+
noreferrer
+
Pertinent pour <form>, <a> et <area>, l'inclusion de cette valeur rend le référent inconnu (aucun en-tête Referer ne sera inclus), et crée un contexte de navigation de haut niveau comme si noopener était également défini.
+
opener
+
Crée un contexte de navigation auxiliaire si l'hyperlien créerait autrement un contexte de navigation de haut niveau qui n'est pas un contexte de navigation auxiliaire (c.-à-d. a « _blank » comme valeur d'attribut target). Effectivement, c'est le contraire de noopener.
+
pingback
+
Donne l'adresse du serveur de retour d'appel qui gère les retours d'appel pour le document actuel.
+
preconnect
+
Spécifie que l'agent utilisateur doit se connecter de manière préemptive à l'origine de la ressource cible.
+
prefetch
+
Indique que l'agent utilisateur doit récupérer et mettre en cache de manière préemptive la ressource cible, car elle est susceptible d'être requise pour une navigation ultérieure.
+
preload
+
Spécifie que l'agent utilisateur doit récupérer et mettre en cache de manière préemptive la ressource cible pour la navigation actuelle en fonction de la destination potentielle donnée par l'attribut as (et la priorité associée à la destination correspondante).
+
prerender
+
Spécifie que l'agent utilisateur doit récupérer de manière préemptive la ressource cible et la traiter de manière à fournir une réponse plus rapide à l'avenir.
+
prev
+
+

Similaire au mot-clé next, pertinent pour les éléments <form>, <link>, <a> et <area>, les valeurs prev indiquent que le document actuel fait partie d'une série, et que le lien renvoie à un document précédent de la série est le document référencé.

+ +
+

Note :Le synonyme previous est incorrect et ne doit pas être utilisé.

+
+
+
search
+
+

Concerne les éléments <form>, <link>, <a> et < area>, les mots-clés search indiquent que l'hyperlien fait référence à un document dont l'interface est spécialement conçue pour effectuer des recherches dans le document actuel, le site et les ressources connexes, en fournissant un lien vers une ressource qui peut être utilisée pour effectuer une recherche.

+ +

Si l'attribut type est défini à application/opensearchdescription+xml, la ressource est un prolongateur OpenSearch qui peut être facilement ajouté à l'interface de certains navigateurs comme Firefox ou Internet Explorer.

+
+
stylesheet
+
+

Valable pour l'élément <link>, il importe une ressource externe à utiliser comme feuille de style. L'attribut type n'est pas nécessaire, car il s'agit d'une feuille de style text/css, puisque c'est la valeur par défaut. S'il ne s'agit pas d'une feuille de style de type text/css, il est préférable de déclarer le type.

+ +

Bien que cet attribut définisse le lien comme étant une feuille de style, l'interaction avec d'autres attributs et d'autres termes clés dans la valeur rel ont un impact sur le téléchargement et/ou l'utilisation de la feuille de style.

+ +

Lorsqu'il est utilisé avec le mot-clé alternate, il définit une feuille de style alternative. Dans ce cas, incluez un title non vide.

+ +

La feuille de style externe ne sera pas utilisée ni même téléchargée si le média ne correspond pas à la valeur de l'attribut media.

+ +

Nécessite l'utilisation du protocole CORS pour la récupération inter-origine.

+
+
tag
+
Valable pour les éléments <a> et <area>, il donne une balise (identifiée par l'adresse donnée) qui s'applique au document actuel. La valeur de la balise indique que le lien renvoie à un document, décrivant une balise s'appliquant au document sur lequel il se trouve. Ce type de lien n'est pas destiné aux balises, dans un nuage de balises, car elles s'appliquent à un groupe de pages, alors que la valeur tag de l'attribut rel concerne un seul document.
+
+ +

Valeurs non standard

+ +
+
apple-touch-icon-precomposed
+

Exemple d'utilisation

+ 
<!-- iPad de troisième génération avec écran Retina haute résolution : -->
+  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/static/img/favicon144.e7e21ca263ca.png">
+  <!-- iPhone avec écran Retina haute résolution : -->
+  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/static/img/favicon114.d526f38b09c5.png">
+  <!-- première et deuxième génération d'iPad: -->
+  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/static/img/favicon72.cc65d1d762a0.png">
+  <!-- Appareils iPhone non Retina, iPod Touch et Android 2.1+ : -->
+  <link rel="apple-touch-icon-precomposed" href="/static/img/favicon57.de33179910ae.png">
+  <!-- favicône de base -->
+  <link rel="shortcut icon" href="/static/img/favicon32.7f3da72dcea1.png">
+
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'links.html#linkTypes', 'l\'attribut rel')}}{{Spec2('HTML WHATWG')}}Ajout de opener. Mise en place de noopener par défaut pour target="_blank".
{{SpecName('HTML5 W3C', 'links.html#linkTypes', 'l\'attribut rel')}}{{Spec2('HTML5 W3C')}}Ajout de tag, search, prefetch, noreferrer, nofollow, icon et author.
+ Renommage de copyright en license.
+ Suppression de start, chapitre, section, subsection et appendice.
{{SpecName("Preload", "#x2.link-type-preload", "preload")}}{{Spec2("Preload")}}Ajout de preload.
{{SpecName("Resource Hints", "#dfn-preconnect", "preconnect")}}{{Spec2("Resource Hints")}}Ajout des valeurs dns-prefetch, preconnect et prerender.
{{SpecName("HTML4.01", "types.html#type-links", "link types")}}{{Spec2("HTML4.01")}}Ajout de alternate, stylesheet, start, chapter, section, subsection, appendix et bookmark.
+ Renommage de previous par prev.
+ Suppression de top et search.
{{SpecName("HTML3.2", "#link", "<link>")}} +

Obsolète

+ 		Ajout de top, contents, index, glossary, copyright, next, previous, help et search.
{{RFC(1866, "HTML 2.0")}}ObsolèteDéfinition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("html.elements.link.rel")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributes/required/index.html b/files/fr/web/html/attributes/required/index.html deleted file mode 100644 index 56e487c081..0000000000 --- a/files/fr/web/html/attributes/required/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: 'Attribut HTML : required' -slug: Web/HTML/Attributes/required -tags: - - Attribute - - Attributes - - Constraint validation - - Forms - - required -translation_of: Web/HTML/Attributes/required ---- -
{{HTMLSidebar}}
- -

L'attribut booléen required, s'il est présent, indique que l'utilisateur doit spécifier une valeur pour l'entrée avant que le formulaire propriétaire puisse être soumis. L'attribut required est pris en charge pour les éléments text, search, url, tel, email, password, date, month, week, time, datetime-local, number, checkbox, radio, les éléments file, <input>, <select> et <textarea> de contrôle de formulaire. Si elle est présente sur l'un de ces types de saisie et éléments, la pseudo-classe :required s'appliquera. Si l'attribut n'est pas inclus, la pseudo-classe :optional s'appliquera.

- -

L'attribut n'est pas pris en charge ou n'est pas pertinent pour range et color, car les deux ont des valeurs par défaut. Il n'est pas non plus pris en charge sur hidden car on ne peut pas s'attendre à ce qu'un utilisateur remplisse un formulaire qui est caché. Il n'est pas non plus supporté sur aucun des types de boutons, y compris image.

- -

Notez que color et range ne supportent pas required, mais le type color est par défaut #000000, et range prend par défaut le point médian entre min et max — avec min et max prenant par défaut les valeurs 0 et 100 respectivement dans la plupart des navigateurs s'ils ne sont pas déclarés — donc a toujours une valeur.

- -

Dans le cas d'un groupe de boutons radio de même nom, si un seul bouton radio dans le groupe a l'attribut required, un bouton radio dans ce groupe doit être vérifié, bien que ce ne soit pas nécessairement celui où l'attribut est appliqué. Ainsi, pour améliorer la maintenance du code, il est recommandé d'inclure l'attribut required dans chaque bouton radio de même nom dans le groupe, ou bien dans aucun.

- -

Dans le cas d'un même groupe nommé de types d'entrée checkbox, seules les cases à cocher avec l'attribut required sont obligatoires.

- -
-

Note :Le réglage aria-required="true" indique à un lecteur d'écran qu'un élément (n'importe lequel) est requis, mais n'a aucune incidence sur le caractère facultatif de l'élément.

-
- -

Interactions entre attributs

- -

Comme un champ en lecture seule ne peut pas avoir de valeur, required n'a aucun effet sur les entrées dont l'attribut readonly est également spécifié.

- -

Utilisabilité

- -

Lorsque vous incluez l'attribut required, fournissez une indication visible à proximité du contrôle informant l'utilisateur que les éléments <input>, <select> ou <textarea> sont obligatoires. En outre, ciblez les contrôles de formulaire requis avec la pseudo-classe :required, en les stylisant de manière à indiquer qu'ils sont requis. Cela améliore la convivialité pour les utilisateurs voyants. Les technologies d'assistance doivent informer l'utilisateur que le contrôle de formulaire est obligatoire sur la base de l'attribut required, mais l'ajout de aria-required="true" ne fait pas de mal, au cas où la combinaison navigateur / lecteur d'écran ne prendrait pas encore en charge required.

- -

Validation des contraintes

- -

Si l'élément est requis et que la valeur de l'élément est la chaîne vide, alors l'élément souffre de valueMissing et l'élément correspondra à la pseudo classe :invalid.

- -

Exemple

- -

HTML

- -
<form>
-  <div class="group">
-    <input type="text">
-    <label>Normal</label>
-  </div>
-  <div class="group">
-    <input type="text" required="required">
-    <label>Requis</label>
-  </div>
-  <input type="submit">
-</form>
- -

Résultat

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

Accessibilité

- -

Fournissez une indication aux utilisateurs pour les informer que le contrôle de formulaire est requis. Veillez à ce que le message soit multiforme (texte, couleur, marquage, attribut, etc.) afin que tous les utilisateurs comprennent les exigences, qu'ils soient daltoniens, qu'ils présentent des différences cognitives ou qu'ils utilisent un lecteur d'écran.

- - -

Spécifications

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

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributes/required/index.md b/files/fr/web/html/attributes/required/index.md new file mode 100644 index 0000000000..56e487c081 --- /dev/null +++ b/files/fr/web/html/attributes/required/index.md @@ -0,0 +1,101 @@ +--- +title: 'Attribut HTML : required' +slug: Web/HTML/Attributes/required +tags: + - Attribute + - Attributes + - Constraint validation + - Forms + - required +translation_of: Web/HTML/Attributes/required +--- +
{{HTMLSidebar}}
+ +

L'attribut booléen required, s'il est présent, indique que l'utilisateur doit spécifier une valeur pour l'entrée avant que le formulaire propriétaire puisse être soumis. L'attribut required est pris en charge pour les éléments text, search, url, tel, email, password, date, month, week, time, datetime-local, number, checkbox, radio, les éléments file, <input>, <select> et <textarea> de contrôle de formulaire. Si elle est présente sur l'un de ces types de saisie et éléments, la pseudo-classe :required s'appliquera. Si l'attribut n'est pas inclus, la pseudo-classe :optional s'appliquera.

+ +

L'attribut n'est pas pris en charge ou n'est pas pertinent pour range et color, car les deux ont des valeurs par défaut. Il n'est pas non plus pris en charge sur hidden car on ne peut pas s'attendre à ce qu'un utilisateur remplisse un formulaire qui est caché. Il n'est pas non plus supporté sur aucun des types de boutons, y compris image.

+ +

Notez que color et range ne supportent pas required, mais le type color est par défaut #000000, et range prend par défaut le point médian entre min et max — avec min et max prenant par défaut les valeurs 0 et 100 respectivement dans la plupart des navigateurs s'ils ne sont pas déclarés — donc a toujours une valeur.

+ +

Dans le cas d'un groupe de boutons radio de même nom, si un seul bouton radio dans le groupe a l'attribut required, un bouton radio dans ce groupe doit être vérifié, bien que ce ne soit pas nécessairement celui où l'attribut est appliqué. Ainsi, pour améliorer la maintenance du code, il est recommandé d'inclure l'attribut required dans chaque bouton radio de même nom dans le groupe, ou bien dans aucun.

+ +

Dans le cas d'un même groupe nommé de types d'entrée checkbox, seules les cases à cocher avec l'attribut required sont obligatoires.

+ +
+

Note :Le réglage aria-required="true" indique à un lecteur d'écran qu'un élément (n'importe lequel) est requis, mais n'a aucune incidence sur le caractère facultatif de l'élément.

+
+ +

Interactions entre attributs

+ +

Comme un champ en lecture seule ne peut pas avoir de valeur, required n'a aucun effet sur les entrées dont l'attribut readonly est également spécifié.

+ +

Utilisabilité

+ +

Lorsque vous incluez l'attribut required, fournissez une indication visible à proximité du contrôle informant l'utilisateur que les éléments <input>, <select> ou <textarea> sont obligatoires. En outre, ciblez les contrôles de formulaire requis avec la pseudo-classe :required, en les stylisant de manière à indiquer qu'ils sont requis. Cela améliore la convivialité pour les utilisateurs voyants. Les technologies d'assistance doivent informer l'utilisateur que le contrôle de formulaire est obligatoire sur la base de l'attribut required, mais l'ajout de aria-required="true" ne fait pas de mal, au cas où la combinaison navigateur / lecteur d'écran ne prendrait pas encore en charge required.

+ +

Validation des contraintes

+ +

Si l'élément est requis et que la valeur de l'élément est la chaîne vide, alors l'élément souffre de valueMissing et l'élément correspondra à la pseudo classe :invalid.

+ +

Exemple

+ +

HTML

+ +
<form>
+  <div class="group">
+    <input type="text">
+    <label>Normal</label>
+  </div>
+  <div class="group">
+    <input type="text" required="required">
+    <label>Requis</label>
+  </div>
+  <input type="submit">
+</form>
+ +

Résultat

+ +
{{EmbedLiveSample('examples')}}
+ +

Accessibilité

+ +

Fournissez une indication aux utilisateurs pour les informer que le contrôle de formulaire est requis. Veillez à ce que le message soit multiforme (texte, couleur, marquage, attribut, etc.) afin que tous les utilisateurs comprennent les exigences, qu'ils soient daltoniens, qu'ils présentent des différences cognitives ou qu'ils utilisent un lecteur d'écran.

+ + +

Spécifications

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

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributes/size/index.html b/files/fr/web/html/attributes/size/index.html deleted file mode 100644 index aac800a452..0000000000 --- a/files/fr/web/html/attributes/size/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: 'Attribut HTML : size' -slug: Web/HTML/Attributes/size -tags: - - Attribute - - HTML - - Input - - Reference - - Select -translation_of: Web/HTML/Attributes/size ---- -
{{HTMLSidebar}}
- -

L'attribut size définit la largeur de l'élément <input> et la hauteur de l'élément <select>. Pour input, si l'attribut type est text ou password alors c'est le nombre de caractères. Il doit s'agir d'un nombre entier de valeur 0 ou supérieure. Si aucun size n'est spécifié, ou si une valeur invalide est spécifiée, l'entrée n'a pas de taille déclarée, et le contrôle de formulaire aura la largeur par défaut basée sur l'agent utilisateur. Si CSS cible l'élément avec des propriétés ayant un impact sur la largeur, CSS a la priorité.

- -

L'attribut size n'a aucun impact sur la validation des contraintes.

- -

Exemples

- -

En ajoutant size sur certains types d'entrée, la largeur de l'entrée peut être contrôlée. L'ajout de la taille sur une sélection modifie la hauteur, définissant le nombre d'options visibles à l'état fermé.

- -
<label for="fruit">Entrez un fruit</label> <input type="text" size="15" id="fruit">
-<label for="vegetable">Entrez un légume</label> <input type="text" id="vegetable">
-
-<select name="fruits" size="5">
-  <option>banane</option>
-  <option>cerise</option>
-  <option>fraise</option>
-  <option>durian</option>
-  <option>myrtille</option>
-</select>
-
-<select name="vegetables" size="5">
-  <option>carotte</option>
-  <option>concombre</option>
-  <option>chou-fleur</option>
-  <option>céleri</option>
-  <option>feuilles de collard</option>
-</select>
- -

{{EmbedLiveSample('examples')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - -
SpécificationStatut
{{SpecName('HTML WHATWG', 'input.html#attr-input-size', 'size attribute')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'input.html#attr-size-accept', 'size attribute')}}{{Spec2('HTML5.1')}}
- -

Compatibilité des navigateurs

- -

{{Compat("html.elements.attribute.size")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributes/size/index.md b/files/fr/web/html/attributes/size/index.md new file mode 100644 index 0000000000..aac800a452 --- /dev/null +++ b/files/fr/web/html/attributes/size/index.md @@ -0,0 +1,74 @@ +--- +title: 'Attribut HTML : size' +slug: Web/HTML/Attributes/size +tags: + - Attribute + - HTML + - Input + - Reference + - Select +translation_of: Web/HTML/Attributes/size +--- +
{{HTMLSidebar}}
+ +

L'attribut size définit la largeur de l'élément <input> et la hauteur de l'élément <select>. Pour input, si l'attribut type est text ou password alors c'est le nombre de caractères. Il doit s'agir d'un nombre entier de valeur 0 ou supérieure. Si aucun size n'est spécifié, ou si une valeur invalide est spécifiée, l'entrée n'a pas de taille déclarée, et le contrôle de formulaire aura la largeur par défaut basée sur l'agent utilisateur. Si CSS cible l'élément avec des propriétés ayant un impact sur la largeur, CSS a la priorité.

+ +

L'attribut size n'a aucun impact sur la validation des contraintes.

+ +

Exemples

+ +

En ajoutant size sur certains types d'entrée, la largeur de l'entrée peut être contrôlée. L'ajout de la taille sur une sélection modifie la hauteur, définissant le nombre d'options visibles à l'état fermé.

+ +
<label for="fruit">Entrez un fruit</label> <input type="text" size="15" id="fruit">
+<label for="vegetable">Entrez un légume</label> <input type="text" id="vegetable">
+
+<select name="fruits" size="5">
+  <option>banane</option>
+  <option>cerise</option>
+  <option>fraise</option>
+  <option>durian</option>
+  <option>myrtille</option>
+</select>
+
+<select name="vegetables" size="5">
+  <option>carotte</option>
+  <option>concombre</option>
+  <option>chou-fleur</option>
+  <option>céleri</option>
+  <option>feuilles de collard</option>
+</select>
+ +

{{EmbedLiveSample('examples')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + +
SpécificationStatut
{{SpecName('HTML WHATWG', 'input.html#attr-input-size', 'size attribute')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'input.html#attr-size-accept', 'size attribute')}}{{Spec2('HTML5.1')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("html.elements.attribute.size")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributes/step/index.html b/files/fr/web/html/attributes/step/index.html deleted file mode 100644 index c87e0ddc44..0000000000 --- a/files/fr/web/html/attributes/step/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: 'Attribut HTML : step' -slug: Web/HTML/Attributes/step -tags: - - Attribute - - Attributes - - Constraint validation - - HTML - - Reference - - step -translation_of: Web/HTML/Attributes/step ---- -
{{HTMLSidebar}}
- -

L'attribut step est un nombre qui indique l'incrément que la valeur doit suivre ou le mot-clé any. Il est valable pour les types de saisie numérique, notamment les date, month, week, time, datetime-local, number et range.

- -

step définit l'incrément obtenu lors du clic sur les boutons déroulants haut et bas, du déplacement d'un curseur vers la gauche et la droite sur une plage, et de la validation des différents types de date. S'il n'est pas explicitement inclus, step prend par défaut la valeur 1 pour number et range, et 1 type d'unité (minute, semaine, mois, jour) pour les types d'entrée date/heure. La valeur doit être un nombre positif - entier ou flottant - ou la valeur spéciale any, ce qui signifie qu'aucun incrément n'est impliqué et que toute valeur est autorisée (sauf autres contraintes, comme min et max).

- -

La valeur des incréments par défaut pour les entrées number est 1, ce qui permet de ne saisir que des nombres entiers, à moins que la valeur initiale ne soit pas un nombre entier. La valeur de pas par défaut pour les entrées time est de 1 seconde, 900 étant égal à 15 minutes.

- -

Syntaxe

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Valeurs d'incrémentation par défaut
Type d'entréeValeurExemple
date1 (jour)
<input type="date" min="2019-12-25" step="1">
month1 (mois)
<input type="month" min="2019-12" step="12">
week1 (semaine)
<input type="week" min="2019-W23" step="2">
time60 (secondes)
<input type="time" min="09:00" step="900">
datetime-local1 (jour)
<input type="datetime-local" min="019-12-25T19:30" step="7">
number1
<input type="number" min="0" step="0.1" max="10">
range1
<input type="range" min="0" step="2" max="10">
- -

Si any n'est pas explicitement défini, les valeurs valides pour les types de saisie number, date/heure, et les types d'entrée range sont égales à la base du pas — la valeur min et les incréments de la valeur du pas, jusqu'à la valeur max, si spécifiée. Par exemple, si on a <input type="number" min="10" step="2"> tout entier pair, 10 ou grand, est valide. S'il est omis, <input type="number">, tout entier est valide, mais les flottants, comme 4,2, ne le sont pas, car step est par défaut à 1. Pour que 4,2 soit valide, step aurait dû être défini à any, 0,1, 0,2, et la valeur min aurait dû être un nombre se terminant par .2, comme <input type="number" min="-5.2">.

- -

L'impact de min sur step

- -

Les valeurs de min et step définissent ce que sont les valeurs valides, même si l'attribut step n'est pas inclus, car step a par défaut la valeur 0.

- -

Nous ajoutons une grande bordure rouge autour des entrées invalides :

- -
input:invalid {
-  border: solid red 3px;
-}
- -

Nous définissons ensuite un champ avec une valeur minimale de 7,2, en omettant l'attribut "step", qui a la valeur 1 par défaut.

- -
<input id="myNumber" name="myNumber" type="number" step="2" min="1.2">
- -

Les valeurs valides comprennent 1,2, 3,2, 5,2, 7,2, 9,2, 11,2, et ainsi de suite. Les nombres entiers et les nombres pairs suivis de .2 ne sont pas valides. Comme nous avons inclus une valeur non valide, les navigateurs qui prennent en charge cette valeur l'afficheront comme non valide. Le compteur de nombres, s'il est présent, n'affichera que les valeurs flottantes valides de 1,2 et plus.

- -
{{EmbedLiveSample("min_impact_on_step","",50)}}
- -
-

Note :Lorsque les données saisies par l'utilisateur ne respectent pas la configuration indiquée par l'incrément, la valeur est considérée comme non valide dans la validation des contraintes et correspondra aux pseudoclasses :invalid et :out-of-range.

-
- -

Voir Validation côté client et stepMismatch pour plus d'informations.

- -

Accessibilité

- -

Fournissez des instructions pour aider les utilisateurs à comprendre comment remplir le formulaire et utiliser les contrôles individuels du formulaire. Indiquez toute entrée obligatoire et facultative, les formats de données et toute autre information pertinente. Lorsque vous utilisez l'attribut min, assurez-vous que cette exigence minimale est comprise par l'utilisateur. Fournir des instructions dans l'élément <label> peut être suffisant. Si vous fournissez des instructions en dehors des étiquettes, ce qui permet un positionnement et une conception plus souples, envisagez d'utiliser aria-labelledby ou aria-describedby.

- -

Spécifications

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

Voir aussi

- - diff --git a/files/fr/web/html/attributes/step/index.md b/files/fr/web/html/attributes/step/index.md new file mode 100644 index 0000000000..c87e0ddc44 --- /dev/null +++ b/files/fr/web/html/attributes/step/index.md @@ -0,0 +1,133 @@ +--- +title: 'Attribut HTML : step' +slug: Web/HTML/Attributes/step +tags: + - Attribute + - Attributes + - Constraint validation + - HTML + - Reference + - step +translation_of: Web/HTML/Attributes/step +--- +
{{HTMLSidebar}}
+ +

L'attribut step est un nombre qui indique l'incrément que la valeur doit suivre ou le mot-clé any. Il est valable pour les types de saisie numérique, notamment les date, month, week, time, datetime-local, number et range.

+ +

step définit l'incrément obtenu lors du clic sur les boutons déroulants haut et bas, du déplacement d'un curseur vers la gauche et la droite sur une plage, et de la validation des différents types de date. S'il n'est pas explicitement inclus, step prend par défaut la valeur 1 pour number et range, et 1 type d'unité (minute, semaine, mois, jour) pour les types d'entrée date/heure. La valeur doit être un nombre positif - entier ou flottant - ou la valeur spéciale any, ce qui signifie qu'aucun incrément n'est impliqué et que toute valeur est autorisée (sauf autres contraintes, comme min et max).

+ +

La valeur des incréments par défaut pour les entrées number est 1, ce qui permet de ne saisir que des nombres entiers, à moins que la valeur initiale ne soit pas un nombre entier. La valeur de pas par défaut pour les entrées time est de 1 seconde, 900 étant égal à 15 minutes.

+ +

Syntaxe

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Valeurs d'incrémentation par défaut
Type d'entréeValeurExemple
date1 (jour)
<input type="date" min="2019-12-25" step="1">
month1 (mois)
<input type="month" min="2019-12" step="12">
week1 (semaine)
<input type="week" min="2019-W23" step="2">
time60 (secondes)
<input type="time" min="09:00" step="900">
datetime-local1 (jour)
<input type="datetime-local" min="019-12-25T19:30" step="7">
number1
<input type="number" min="0" step="0.1" max="10">
range1
<input type="range" min="0" step="2" max="10">
+ +

Si any n'est pas explicitement défini, les valeurs valides pour les types de saisie number, date/heure, et les types d'entrée range sont égales à la base du pas — la valeur min et les incréments de la valeur du pas, jusqu'à la valeur max, si spécifiée. Par exemple, si on a <input type="number" min="10" step="2"> tout entier pair, 10 ou grand, est valide. S'il est omis, <input type="number">, tout entier est valide, mais les flottants, comme 4,2, ne le sont pas, car step est par défaut à 1. Pour que 4,2 soit valide, step aurait dû être défini à any, 0,1, 0,2, et la valeur min aurait dû être un nombre se terminant par .2, comme <input type="number" min="-5.2">.

+ +

L'impact de min sur step

+ +

Les valeurs de min et step définissent ce que sont les valeurs valides, même si l'attribut step n'est pas inclus, car step a par défaut la valeur 0.

+ +

Nous ajoutons une grande bordure rouge autour des entrées invalides :

+ +
input:invalid {
+  border: solid red 3px;
+}
+ +

Nous définissons ensuite un champ avec une valeur minimale de 7,2, en omettant l'attribut "step", qui a la valeur 1 par défaut.

+ +
<input id="myNumber" name="myNumber" type="number" step="2" min="1.2">
+ +

Les valeurs valides comprennent 1,2, 3,2, 5,2, 7,2, 9,2, 11,2, et ainsi de suite. Les nombres entiers et les nombres pairs suivis de .2 ne sont pas valides. Comme nous avons inclus une valeur non valide, les navigateurs qui prennent en charge cette valeur l'afficheront comme non valide. Le compteur de nombres, s'il est présent, n'affichera que les valeurs flottantes valides de 1,2 et plus.

+ +
{{EmbedLiveSample("min_impact_on_step","",50)}}
+ +
+

Note :Lorsque les données saisies par l'utilisateur ne respectent pas la configuration indiquée par l'incrément, la valeur est considérée comme non valide dans la validation des contraintes et correspondra aux pseudoclasses :invalid et :out-of-range.

+
+ +

Voir Validation côté client et stepMismatch pour plus d'informations.

+ +

Accessibilité

+ +

Fournissez des instructions pour aider les utilisateurs à comprendre comment remplir le formulaire et utiliser les contrôles individuels du formulaire. Indiquez toute entrée obligatoire et facultative, les formats de données et toute autre information pertinente. Lorsque vous utilisez l'attribut min, assurez-vous que cette exigence minimale est comprise par l'utilisateur. Fournir des instructions dans l'élément <label> peut être suffisant. Si vous fournissez des instructions en dehors des étiquettes, ce qui permet un positionnement et une conception plus souples, envisagez d'utiliser aria-labelledby ou aria-describedby.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + +
SpécificationStatut
{{SpecName('HTML WHATWG', 'input.html#the-step-attribute', 'l\'attribut step')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'input.html#the-step-attribute', 'l\'attribut step')}}{{Spec2('HTML5 W3C')}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/html/block-level_elements/index.html b/files/fr/web/html/block-level_elements/index.html deleted file mode 100644 index 7b1944d421..0000000000 --- a/files/fr/web/html/block-level_elements/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: Éléments de bloc -slug: Web/HTML/Block-level_elements -tags: - - Beginner - - Development - - Débutant - - HTML - - HTML5 - - Web -translation_of: Web/HTML/Block-level_elements -original_slug: Web/HTML/Éléments_en_bloc ---- -

Les éléments HTML (Hypertext Markup Language) étaient historiquement catégorisés comme des éléments de type "block" ou de type "inline". Comme il s'agit d'une caractéristique de présentation, elle est aujourd'hui spécifiée par CSS dans la disposition en flux. Un élément de type bloc occupe tout l'espace horizontal de son élément parent (conteneur), et un espace vertical égal à la hauteur de son contenu, créant ainsi un bloc. Dans cet article, nous examinerons les éléments HTML de type bloc et comment ils diffèrent des éléments en ligne.

- -

Les navigateurs affichent généralement un élément de type bloc avec une nouvelle ligne avant et après l'élément. Vous pouvez les visualiser comme une pile de boîtes.

- -
-

Note : Un élément de bloc commence toujours sur une nouvelle ligne et prend toute la largeur disponible (autrement dit, il s'étend le plus possible vers la droite et vers la gauche).

-
- -

Éléments de type bloc

- -

HTML

- -
<p>Ce paragraphe est un élément de bloc.
-Son fond a été coloré pour illustrer son conteneur.</p>
- -

CSS

- -
p {
-  background-color: #8ABB55;
-}
- -

Résultat

- -

{{EmbedLiveSample('Block-level_Example','100%',100)}}

- -

Utilisation

- -

Les éléments de bloc ne peuvent apparaître qu'au sein d'un élément <body>.

- -

Éléments blocs vs éléments en ligne

- -

Les éléments de bloc diffèrent des éléments en ligne par :

- -
-
La mise en forme par défaut
-
Par défaut, les éléments de bloc commencent sur des nouvelles lignes.
-
Le modèle de contenu
-
De façon générale, les éléments de bloc peuvent contenir des éléments en ligne et d'autres éléments de bloc. L'idée structurelle sous-jacente est que les éléments de bloc créent de plus grandes structures que les éléments en ligne.
-
- -

La distinction entre bloc et ligne est utilisée dans les spécifications HTML jusqu'à la version 4.01. En HTML5, cette distinction binaire est remplacée par un ensemble plus complexe de catégories de contenu. La catégorie des éléments en bloc correspond approximativement à la catégorie de contenu de flux en HTML5, celle des éléments en ligne correspond à la catégorie de contenu phrasé. Il y a également d'autres catégories (le contenu interactif par exemple).

- -

Éléments

- -

La liste qui suit contient tous les éléments HTML de type bloc (cette catégorie n'est pas strictement applicable pour les éléments apparus avec HTML5).

- -
-
<address>
-
Information de contact.
-
<article>
-
Contenu d'un article.
-
<aside>
-
Contenu tangentiel.
-
<blockquote>
-
Long bloc de citation.
-
<details>
-
Outil permettant de révéler des informations sur la page.
-
<dialog>
-
Boîte de dialogue.
-
<dd>
-
Description d'une définition.
-
<div>
-
Division d'un document.
-
<dl>
-
Liste de définitions.
-
<dt>
-
Définition/description d'un terme.
-
<fieldset>
-
Ensemble de champs.
-
<figcaption>
-
Légende d'une image.
-
<figure>
-
Permet de grouper des médias avec une légende (voir <figcaption>).
-
<footer>
-
Bas de page ou de section.
-
<form>
-
Formulaire.
-
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
-
Éléments de titre de niveau 1 à 6.
-
<header>
-
En-tête de page ou de section.
-
<hgroup>
-
Information d'en-tête de groupe.
-
<hr>
-
Ligne de division horizontale.
-
<li>
-
Élément d'une liste.
-
<main>
-
Contient le contenu central unique au document.
-
<nav>
-
Contient des liens de navigation.
-
<ol>
-
Liste ordonnée.
-
<p>
-
Paragraphe.
-
<pre>
-
Texte pré-formaté.
-
<section>
-
Section d'une page web.
-
<table>
-
Tableau.
-
<ul>
-
Liste non-ordonnée.
-
- - -

Voir aussi

- - - -
{{QuickLinksWithSubpages("/fr/docs/Web/HTML/")}}
diff --git a/files/fr/web/html/block-level_elements/index.md b/files/fr/web/html/block-level_elements/index.md new file mode 100644 index 0000000000..7b1944d421 --- /dev/null +++ b/files/fr/web/html/block-level_elements/index.md @@ -0,0 +1,128 @@ +--- +title: Éléments de bloc +slug: Web/HTML/Block-level_elements +tags: + - Beginner + - Development + - Débutant + - HTML + - HTML5 + - Web +translation_of: Web/HTML/Block-level_elements +original_slug: Web/HTML/Éléments_en_bloc +--- +

Les éléments HTML (Hypertext Markup Language) étaient historiquement catégorisés comme des éléments de type "block" ou de type "inline". Comme il s'agit d'une caractéristique de présentation, elle est aujourd'hui spécifiée par CSS dans la disposition en flux. Un élément de type bloc occupe tout l'espace horizontal de son élément parent (conteneur), et un espace vertical égal à la hauteur de son contenu, créant ainsi un bloc. Dans cet article, nous examinerons les éléments HTML de type bloc et comment ils diffèrent des éléments en ligne.

+ +

Les navigateurs affichent généralement un élément de type bloc avec une nouvelle ligne avant et après l'élément. Vous pouvez les visualiser comme une pile de boîtes.

+ +
+

Note : Un élément de bloc commence toujours sur une nouvelle ligne et prend toute la largeur disponible (autrement dit, il s'étend le plus possible vers la droite et vers la gauche).

+
+ +

Éléments de type bloc

+ +

HTML

+ +
<p>Ce paragraphe est un élément de bloc.
+Son fond a été coloré pour illustrer son conteneur.</p>
+ +

CSS

+ +
p {
+  background-color: #8ABB55;
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Block-level_Example','100%',100)}}

+ +

Utilisation

+ +

Les éléments de bloc ne peuvent apparaître qu'au sein d'un élément <body>.

+ +

Éléments blocs vs éléments en ligne

+ +

Les éléments de bloc diffèrent des éléments en ligne par :

+ +
+
La mise en forme par défaut
+
Par défaut, les éléments de bloc commencent sur des nouvelles lignes.
+
Le modèle de contenu
+
De façon générale, les éléments de bloc peuvent contenir des éléments en ligne et d'autres éléments de bloc. L'idée structurelle sous-jacente est que les éléments de bloc créent de plus grandes structures que les éléments en ligne.
+
+ +

La distinction entre bloc et ligne est utilisée dans les spécifications HTML jusqu'à la version 4.01. En HTML5, cette distinction binaire est remplacée par un ensemble plus complexe de catégories de contenu. La catégorie des éléments en bloc correspond approximativement à la catégorie de contenu de flux en HTML5, celle des éléments en ligne correspond à la catégorie de contenu phrasé. Il y a également d'autres catégories (le contenu interactif par exemple).

+ +

Éléments

+ +

La liste qui suit contient tous les éléments HTML de type bloc (cette catégorie n'est pas strictement applicable pour les éléments apparus avec HTML5).

+ +
+
<address>
+
Information de contact.
+
<article>
+
Contenu d'un article.
+
<aside>
+
Contenu tangentiel.
+
<blockquote>
+
Long bloc de citation.
+
<details>
+
Outil permettant de révéler des informations sur la page.
+
<dialog>
+
Boîte de dialogue.
+
<dd>
+
Description d'une définition.
+
<div>
+
Division d'un document.
+
<dl>
+
Liste de définitions.
+
<dt>
+
Définition/description d'un terme.
+
<fieldset>
+
Ensemble de champs.
+
<figcaption>
+
Légende d'une image.
+
<figure>
+
Permet de grouper des médias avec une légende (voir <figcaption>).
+
<footer>
+
Bas de page ou de section.
+
<form>
+
Formulaire.
+
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
+
Éléments de titre de niveau 1 à 6.
+
<header>
+
En-tête de page ou de section.
+
<hgroup>
+
Information d'en-tête de groupe.
+
<hr>
+
Ligne de division horizontale.
+
<li>
+
Élément d'une liste.
+
<main>
+
Contient le contenu central unique au document.
+
<nav>
+
Contient des liens de navigation.
+
<ol>
+
Liste ordonnée.
+
<p>
+
Paragraphe.
+
<pre>
+
Texte pré-formaté.
+
<section>
+
Section d'une page web.
+
<table>
+
Tableau.
+
<ul>
+
Liste non-ordonnée.
+
+ + +

Voir aussi

+ + + +
{{QuickLinksWithSubpages("/fr/docs/Web/HTML/")}}
diff --git a/files/fr/web/html/cors_enabled_image/index.html b/files/fr/web/html/cors_enabled_image/index.html deleted file mode 100644 index 0e839a8c73..0000000000 --- a/files/fr/web/html/cors_enabled_image/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Autoriser les images et canevas provenant d'autres origines -slug: Web/HTML/CORS_enabled_image -tags: - - Advanced - - CORS - - Canvas - - HTML - - Image - - Reference - - Security - - Storage - - data -translation_of: Web/HTML/CORS_enabled_image -original_slug: Web/HTML/Images_avec_le_contrôle_d_accès_HTTP ---- -

HTML permet d'utiliser l'attribut crossorigin sur les images. Utilisé avec un en-tête CORS adéquat, les images définies par <img> provenant d'origines étrangères pourront être utilisées au sein d'un élément <canvas> comme si elles avaient été chargées depuis l'origine courante.

- -

Pour plus de détails sur l'attribut crossorigin, voir les attributs de paramétrage du CORS.

- -

Canevas corrompu et sécurité

- -

Les pixels composant un canevas pouvant venir de différentes sources, notamment d'images ou de vidéos récupérées depuis des hôtes tiers, il est nécessaire de se prémunir contre certains problèmes de sécurité.

- -

Dès que des données sont chargées dans le canevas depuis une autre origine sans avoir été « approuvées » par le CORS, le canevas devient corrompu (tainted). Dès qu'un canevas est corrompu, il n'est plus considéré comme sécurisé et toute tentative de récupérer des données depuis les données de l'image résultera en une exception.

- -

Si la source du contenu tiers est un élément HTML <img> ou SVG <svg>, il n'est plus permis de récupérer le contenu du canevas.

- -

Si la source du contenu tiers est une image obtenue à partir d'un HTMLCanvasElement ou d'une ImageBitMap et que la source de l'image ne respecte pas les règles quant à l'unicité de l'origine, il ne sera pas possible de lire le contenu du canevas.

- -

Appeler l'une des méthodes suivantes sur un canevas corrompu déclenchera une erreur :

- - - -

L'exception levée par de tels appels sera une exception SecurityError. Cette mesure protège les utilisateurs contre l'exposition de données privées via des images provenant de sites tiers sans permission.

- -

Stocker une image provenant d'une origine tierce

- -

Dans cet exemple, on souhaite autoriser la récupération et l'enregistrement d'images provenant d'une autre origine. Pour parvenir à ce résultat, il faudra configurer le serveur et également écrire du code pour le site web.

- -

Configuration serveur

- -

Pour commencer, configurons le serveur stockant les images avec un en-tête Access-Control-Allow-Origin qui permet un accès multi-origines aux fichiers images.

- -

Dans la suite de cet exemple, on prendra le cas d'un site est servi via Apache. On pourra utiliser le fragment de configuration serveur Apache pour les images CORS :

- -
<IfModule mod_setenvif.c>
-  <IfModule mod_headers.c>
-    <FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)$">
-      SetEnvIf Origin ":" IS_CORS
-      Header set Access-Control-Allow-Origin "*" env=IS_CORS
-    </FilesMatch>
-  </IfModule>
-</IfModule>
- -

Pour résumer, cela permet de configurer le serveur afin de pouvoir accéder aux fichiers graphiques (ceux avec les extensions ".bmp", ".cur", ".gif", ".ico", ".jpg", ".jpeg", ".png", ".svg", ".svgz", and ".webp") depuis d'autres origines, d'où qu'elles soient sur Internet.

- -

Implémenter l'enregistrement

- -

Maintenant que le serveur est configuré pour permettre la récupération d'image depuis plusieurs origines, on peut écrire le code qui permet à l'utilisateur d'enregistrer les images en stockage local comme si elles étaient servies depuis le même domaine que le code.

- -

Pour cela, on utilise l'attribut crossorigin en définissant crossOrigin sur l'élément HTMLImageElement sur lequel l'image sera chargée. Ainsi, on indique au navigateur de demander un accès multi-origine lors du téléchargement de l'image.

- -

Démarrer le téléchargement

- -

Voici le code qui démarre le téléchargement (déclenché par exemple lorsque l'utilisateur clique sur un bouton « Télécharger ») :

- -
function startDownload() {
-  let imageURL = "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn_logo-only_color.svg?1535749917189";
-
-  downloadedImg = new Image;
-  downloadedImg.crossOrigin = "Anonymous";
-  downloadedImg.addEventListener("load", imageReceived, false);
-  downloadedImg.src = imageURL;
-}
- -

Ici, l'URL de l'image à télécharger est codée en dur mais cette valeur pourrait très bien provenir d'un argument passé à la fonction. Pour démarrer le téléchargement, on crée un nouvel objet HTMLImageElement grâce au constructeur Image(). L'image est ensuite configurée afin de permettre un téléchargement multi-origine grâce à l'attribut crossOrigin paramétré avec "Anonymous" (qui permet le téléchargement, non-authentifié, d'une image multi-origine). Un gestionnaire d'évènement est ajouté afin de réagir à l'évènement load lorsque l'image a été reçue.

- -

Enfin, l'attribut src de l'image est défini avec l'URL de l'image à télécharger et le téléchargement démarre.

- -

Recevoir et enregistrer l'image

- -

Voici le fragment de code exécuté lorsque l'image a été téléchargée :

- -
function imageReceived() {
-  let canvas = document.createElement("canvas");
-  let context = canvas.getContext("2d");
-
-  canvas.width = downloadedImg.width;
-  canvas.height = downloadedImg.height;
-
-  context.drawImage(downloadedImg, 0, 0);
-  imageBox.appendChild(canvas);
-
-  try {
-    localStorage.setItem("saved-image-example", canvas.toDataURL("image/png"));
-  }
-  catch(err) {
-    console.log("Error: " + err);
-  }
-}
- -

imageReceived() est invoquée lorsque l'évènement "load" est déclenché sur l'élément HTMLImageElement qui reçoit l'image téléchargée. Cet évènement se produit lorsque l'ensemble des données téléchargées est disponible. Cette fonction commence par créer un nouvel élément <canvas> qui sera utilisé afin de convertir l'image en une URL de donnée. On récupère également un accès au contexte du canevas pour dessiner en 2D (CanvasRenderingContext2D) dans la variable context.

- -

La taille du canevas est ajustée afin que ses dimensions correspondent à celles de l'image. L'image est ensuite dessinée dans le canevas grâce à drawImage(). Le canevas est alors inséré dans le document et l'image y devient visible.

- -

Enfin, on enregistre l'image dans le stockage local. Pour cela, on utilise les méthodes de l'API Web Storage en passant par la variable globale localStorage. La méthode toDataURL() est utilisée afin de convertir l'image en une URL de données représentant une image PNG qui est enregistrée dans l'espace local grâce à la méthode setItem().

- -

Vous pouvez essayer ou adapter cet exemple sur Glitch.

- -

Voir aussi

- - - -
{{QuickLinksWithSubpages("/fr/docs/Web/HTML/")}}
diff --git a/files/fr/web/html/cors_enabled_image/index.md b/files/fr/web/html/cors_enabled_image/index.md new file mode 100644 index 0000000000..0e839a8c73 --- /dev/null +++ b/files/fr/web/html/cors_enabled_image/index.md @@ -0,0 +1,123 @@ +--- +title: Autoriser les images et canevas provenant d'autres origines +slug: Web/HTML/CORS_enabled_image +tags: + - Advanced + - CORS + - Canvas + - HTML + - Image + - Reference + - Security + - Storage + - data +translation_of: Web/HTML/CORS_enabled_image +original_slug: Web/HTML/Images_avec_le_contrôle_d_accès_HTTP +--- +

HTML permet d'utiliser l'attribut crossorigin sur les images. Utilisé avec un en-tête CORS adéquat, les images définies par <img> provenant d'origines étrangères pourront être utilisées au sein d'un élément <canvas> comme si elles avaient été chargées depuis l'origine courante.

+ +

Pour plus de détails sur l'attribut crossorigin, voir les attributs de paramétrage du CORS.

+ +

Canevas corrompu et sécurité

+ +

Les pixels composant un canevas pouvant venir de différentes sources, notamment d'images ou de vidéos récupérées depuis des hôtes tiers, il est nécessaire de se prémunir contre certains problèmes de sécurité.

+ +

Dès que des données sont chargées dans le canevas depuis une autre origine sans avoir été « approuvées » par le CORS, le canevas devient corrompu (tainted). Dès qu'un canevas est corrompu, il n'est plus considéré comme sécurisé et toute tentative de récupérer des données depuis les données de l'image résultera en une exception.

+ +

Si la source du contenu tiers est un élément HTML <img> ou SVG <svg>, il n'est plus permis de récupérer le contenu du canevas.

+ +

Si la source du contenu tiers est une image obtenue à partir d'un HTMLCanvasElement ou d'une ImageBitMap et que la source de l'image ne respecte pas les règles quant à l'unicité de l'origine, il ne sera pas possible de lire le contenu du canevas.

+ +

Appeler l'une des méthodes suivantes sur un canevas corrompu déclenchera une erreur :

+ + + +

L'exception levée par de tels appels sera une exception SecurityError. Cette mesure protège les utilisateurs contre l'exposition de données privées via des images provenant de sites tiers sans permission.

+ +

Stocker une image provenant d'une origine tierce

+ +

Dans cet exemple, on souhaite autoriser la récupération et l'enregistrement d'images provenant d'une autre origine. Pour parvenir à ce résultat, il faudra configurer le serveur et également écrire du code pour le site web.

+ +

Configuration serveur

+ +

Pour commencer, configurons le serveur stockant les images avec un en-tête Access-Control-Allow-Origin qui permet un accès multi-origines aux fichiers images.

+ +

Dans la suite de cet exemple, on prendra le cas d'un site est servi via Apache. On pourra utiliser le fragment de configuration serveur Apache pour les images CORS :

+ +
<IfModule mod_setenvif.c>
+  <IfModule mod_headers.c>
+    <FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)$">
+      SetEnvIf Origin ":" IS_CORS
+      Header set Access-Control-Allow-Origin "*" env=IS_CORS
+    </FilesMatch>
+  </IfModule>
+</IfModule>
+ +

Pour résumer, cela permet de configurer le serveur afin de pouvoir accéder aux fichiers graphiques (ceux avec les extensions ".bmp", ".cur", ".gif", ".ico", ".jpg", ".jpeg", ".png", ".svg", ".svgz", and ".webp") depuis d'autres origines, d'où qu'elles soient sur Internet.

+ +

Implémenter l'enregistrement

+ +

Maintenant que le serveur est configuré pour permettre la récupération d'image depuis plusieurs origines, on peut écrire le code qui permet à l'utilisateur d'enregistrer les images en stockage local comme si elles étaient servies depuis le même domaine que le code.

+ +

Pour cela, on utilise l'attribut crossorigin en définissant crossOrigin sur l'élément HTMLImageElement sur lequel l'image sera chargée. Ainsi, on indique au navigateur de demander un accès multi-origine lors du téléchargement de l'image.

+ +

Démarrer le téléchargement

+ +

Voici le code qui démarre le téléchargement (déclenché par exemple lorsque l'utilisateur clique sur un bouton « Télécharger ») :

+ +
function startDownload() {
+  let imageURL = "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn_logo-only_color.svg?1535749917189";
+
+  downloadedImg = new Image;
+  downloadedImg.crossOrigin = "Anonymous";
+  downloadedImg.addEventListener("load", imageReceived, false);
+  downloadedImg.src = imageURL;
+}
+ +

Ici, l'URL de l'image à télécharger est codée en dur mais cette valeur pourrait très bien provenir d'un argument passé à la fonction. Pour démarrer le téléchargement, on crée un nouvel objet HTMLImageElement grâce au constructeur Image(). L'image est ensuite configurée afin de permettre un téléchargement multi-origine grâce à l'attribut crossOrigin paramétré avec "Anonymous" (qui permet le téléchargement, non-authentifié, d'une image multi-origine). Un gestionnaire d'évènement est ajouté afin de réagir à l'évènement load lorsque l'image a été reçue.

+ +

Enfin, l'attribut src de l'image est défini avec l'URL de l'image à télécharger et le téléchargement démarre.

+ +

Recevoir et enregistrer l'image

+ +

Voici le fragment de code exécuté lorsque l'image a été téléchargée :

+ +
function imageReceived() {
+  let canvas = document.createElement("canvas");
+  let context = canvas.getContext("2d");
+
+  canvas.width = downloadedImg.width;
+  canvas.height = downloadedImg.height;
+
+  context.drawImage(downloadedImg, 0, 0);
+  imageBox.appendChild(canvas);
+
+  try {
+    localStorage.setItem("saved-image-example", canvas.toDataURL("image/png"));
+  }
+  catch(err) {
+    console.log("Error: " + err);
+  }
+}
+ +

imageReceived() est invoquée lorsque l'évènement "load" est déclenché sur l'élément HTMLImageElement qui reçoit l'image téléchargée. Cet évènement se produit lorsque l'ensemble des données téléchargées est disponible. Cette fonction commence par créer un nouvel élément <canvas> qui sera utilisé afin de convertir l'image en une URL de donnée. On récupère également un accès au contexte du canevas pour dessiner en 2D (CanvasRenderingContext2D) dans la variable context.

+ +

La taille du canevas est ajustée afin que ses dimensions correspondent à celles de l'image. L'image est ensuite dessinée dans le canevas grâce à drawImage(). Le canevas est alors inséré dans le document et l'image y devient visible.

+ +

Enfin, on enregistre l'image dans le stockage local. Pour cela, on utilise les méthodes de l'API Web Storage en passant par la variable globale localStorage. La méthode toDataURL() est utilisée afin de convertir l'image en une URL de données représentant une image PNG qui est enregistrée dans l'espace local grâce à la méthode setItem().

+ +

Vous pouvez essayer ou adapter cet exemple sur Glitch.

+ +

Voir aussi

+ + + +
{{QuickLinksWithSubpages("/fr/docs/Web/HTML/")}}
diff --git a/files/fr/web/html/date_and_time_formats/index.html b/files/fr/web/html/date_and_time_formats/index.html deleted file mode 100644 index 95aebbdca4..0000000000 --- a/files/fr/web/html/date_and_time_formats/index.html +++ /dev/null @@ -1,469 +0,0 @@ ---- -title: Formats de date et d'heure utilisés en HTML -slug: Web/HTML/Date_and_time_formats -tags: - - Date - - Element - - Format - - HTML - - ISO 8601 - - Input - - Reference - - String - - Time - - Week - - datetime - - datetime-local - - del - - ins - - month - - month-year - - week-year -translation_of: Web/HTML/Date_and_time_formats -original_slug: Web/HTML/Formats_date_heure_HTML ---- -
{{HTMLRef}}
- -

Certains éléments HTML manipulent des valeurs temporelles pour des dates ou des heures. Les formats utilisés pour les chaînes de caractères qui définissent ces valeurs sont décrits dans cet article. Les éléments qui utilisent ces données sont notamment les éléments <input> qui permettent de choisir une date, une heure ou les deux, les éléments <ins> et <del> dont l'attribut ins indique la date (ou la date et l'heure) à laquelle l'ajout ou la suppression de contenu a eu lieu.

- -

Pour les éléments <input>, voici les différents type (cf. input) pour lesquels l'attribut value contient une chaîne de caractères représentant une date ou une heure :

- - - -

Exemples

- -

Avant de détailler plus, voyons quelques exemples de chaînes de caractères utilisées en HTML et qui représentent des valeurs temporelles.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Exemple de chaînes de caractères utilisées en HTML pour représenter des dates et des heures
Chaîne de caractèresDate/heure
2005-06-077 juin 2005[détails]
08:4508h45m (le matin)[détails]
08:45:2508h45m25s[détails]
0033-08-04T03:4003h40 (du matin), le 04 août 33[détails]
1977-04-01T14:00:3030 secondes après 14h00, le premier avril 1977[détails]
1901-01-01T00:00ZMinuit, UTC, le 1er janvier 1901[détails]
1901-01-01T00:00:01-04:00Minuit passé d'une seconde sur l'heure de l'Est (EST), le 1er janvier 1901[détails]
- -

Notions essentielles

- -

Avant de s'intéresser aux différents formats pour la représentation textuelle des valeurs temporelles en HTML, commençons par décrire comment ces valeurs sont définies formellement. HTML utilise une variation du standard ISO 8601 pour les chaînes de caractères représentant les dates et les heures. Il est toujours utile de vérifier que le format utilisé est compatible avec HTML, car la spécification HTML utilise des algorithmes pour analyser ces chaînes qui sont plus précis que le standard ISO 8601 (il peut donc y avoir quelques fines différences).

- -

Jeu de caractères

- -

En HTML, les chaînes qui représentent des dates et des heures manipulent uniquement des caractères ASCII.

- -

Numérotation des années

- -

La spécification HTML indique que les années doivent être exprimées selon le calendrier grégorien. Bien que les interfaces utilisateur permettent éventuellement de saisir des dates grâce à d'autres calendriers, la valeur sous-jacente est toujours représentée à l'aide du calendrier grégorien.

- -

Bien que le calendrier grégorien ait été créé en 1582 afin de remplacer le calendrier julien, la notation grégorienne est « étendue » en HTML jusqu'à 1 après J.C. Aussi, si vous manipulez des dates antérieures à 1582, assurez-vous qu'elles soient bien exprimées selon le calendrier grégorien.

- -

En HTML, les années sont toujours écrites avec au moins 4 chiffres. Aussi, les années antérieures à l'an 1000 sont complétées avec des zéros : l'an 72 est donc écrit 0072. Les années antérieures à l'an 1 ne sont pas prises en charge par HTML.

- -

Une année est normalement constituée de 365 jours, sauf pendant les années bissextiles.

- -

Années bissextiles

- -

Une année bissextile est une année dont le numéro est :

- - - -

Bien qu'une année calendaire s'étende sur 365 jours, la Terre met environ 365,2422 jours avant d'effectuer une orbite complète autour du soleil. Les années bissextiles permettent d'ajuster le calendrier et de le synchroniser avec la position de la planète le long de l'orbite. Ajouter un jour tous les 4 ans (environ) permet d'avoir une année moyenne longue de 365,25 jours, ce qui est relativement correct.

- -

En ajustant l'algorithme avec les contraintes ci-avant (divisible par 400 ou divisible par 4 mais pas par 100), on s'approche plus précisément du nombre correct de jours (365,2425). Des secondes intercalaires sont parfois ajoutées au calendrier afin de compenser les trois millièmes restant et le ralentissement naturel de la rotation de la Terre.

- -

Le deuxième mois de l'année (février) possède 28 jours pendant les années non-bissextiles et 29 jours pendant les années bissextiles.

- -

Mois de l'année

- -

Une année comporte 12 mois, numérotés de 1 à 12. Les valeurs des mois sont toujours représentées par une chaîne de caractères se composant de deux chiffres : des valeurs entre 01 et 12. Voir le tableau ci-après pour les numéros des mois et le nombre de jours correspondant.

- -

Jours du mois

- -

Les mois numérotés 1, 3, 5, 7, 8, 10 et 12 possèdent 31 jours. Les mois 4, 6, 9 et 11 possèdent 30 jours. Le deuxième mois, février, possède 28 jours sauf pendant les années bissextiles où il possède 29 jours. Le tableau ci-après détaille les mois et leurs noms, ainsi que leur durée en jours.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Les mois de l'année et leur durée en jours
Numéro du moisNom (en français)Durée du mois (en nombre de jours)
01Janvier31
02Février28 (29 pour les années bissextiles)
03Mars31
04Avril30
05Mai31
06Juin30
07Juillet31
o8Août31
09Septembre30
10Octobre31
11Novembre30
12Décembre31
- -

Représentation des semaines

- -

Une chaîne de caractères représentant une semaine correspondra à une semaine d'une année donnée. Aussi, une chaîne de caractères valide pour représenter une semaine se compose de 4 chiffres représentant l'année, suivis d'un tiret ("-" ou U+002D), suivi de la lettre majuscule "W" (U+0057), suivie d'un numéro de semaine sur deux chiffres.

- -

Le numéro de la semaine est une chaîne de caractères, avec deux chiffres, entre 01 et 53. Chaque semaine commence un lundi et se termine un dimanche. Il est ainsi possible que les premiers jours de janvier fassent partie de la dernière semaine de l'année précédente et que les derniers jours fassent partie de la première semaine de l'année suivante. La première semaine de l'année est celle qui contient le premier jeudi de l'année. Ainsi, le premier jeudi de 1953 était le 1er janvier et la semaine contenant ce jour est donc considérée la première semaine de l'année. Ainsi, le 30 décembre 1952 appartient à la semaine 1953-W01.

- -

Une année aura 53 semaines si :

- - - -

Les autres années contiennent 52 semaines.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Exemples de chaînes de caractères valides pour représenter des semaines
Chaîne de caractèresSemaine et année (intervalle de dates)
2001-W37Semaine 37 de l'année 2001 (entre le 10 et le 16 septembre 2001)
1953-W01Semaine 1 de l'année 1953 (entre le 29 décembre 1952 et le 4 janvier 1953)
1948-W53Semaine 53 de l'année 1948 (entre le 27 décembre 1948 et le 2 janvier 1949)
1949-W01Semaine 1 de l'année 1949 (entre le 3 janvier et le 9 janvier 1949)
0531-W16Semaine 16 de l'année 531 (entre le 13 avril et le 19 avril 531)
0042-W04Semaine 4 de l'année 42 (entre le 21 et le 27 janvier 42)
- -

On notera que les deux composantes pour l'année et pour la semaine sont complétées avec des zéros à gauche afin que l'année soit exprimée sur 4 chiffres et que la semaine soit exprimée sur 2 chiffres.

- -

Représentation des mois

- -

Une chaîne de caractères pour un mois représente un mois d'une année donnée (plutôt qu'un mois « générique »). Aussi, on ne représentera pas simplement le mois de janvier mais le mois de janvier de l'année 1972.

- -

Une chaîne de caractères représentant un mois est valide si elle commence par un numéro d'année valide (une chaîne de caractères composée de quatre chiffres), suivie d'un tiret ("-", ou U+002D), suivi d'un nombre sur deux chiffres où 01 représente janvier et où 12 représente décembre.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Exemples de chaînes de caractères valides pour la représentation d'un mois
Chaîne de caractèresLe mois et l'année
17310-09Le mois de septembre de l'année 17310
2019-01Le mois de janvier de l'année 2019
1993-11Le mois de novembre de l'année 1993
0571-04Le mois d'avril de l'année 571
0001-07Le mois de juillet de l'an 1
- -

On notera que les années sont exprimées sur au moins 4 chiffres et que les années antérieures à 1000 sont préfixées de 0.

- -

Représentation des dates

- -

Une chaîne de caractères représentant une date est valide si elle contient : une année (cf. ci-avant) suivie d'un tiret, suivi d'un mois, suivi d'un tiret ("-" ou U+002D) suivi du numéro du jour dans le mois sur deux chiffres.

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Exemples de chaînes de caractères valides pour représenter des dates
Chaîne de caractèresDate complète
1993-11-011er novembre 1993
1066-10-1414 octobre 1066
0571-04-2222 avril 571
0062-02-055 février 62
- -

Représentation des heures

- -

Une chaîne de caractères représentant une heure peut décrire différentes précisions : minute, seconde ou milliseconde. Il n'est pas possible d'indiquer uniquement l'heure ou les minutes. Une chaîne valide se compose a minima d'une valeur sur deux chiffres représentant une heure, suivi de deux-points (":", U+003A) puis d'une valeur sur deux chiffres exprimant les minutes. La valeur des minutes peut ensuite être suivie d'un autre deux-points puis d'une valeur sur deux chiffres pour les secondes. Il est possible d'indiquer les millisecondes en ajoutant un point (".", U+002E) après les secondes, suivi d'une valeur sur un, deux ou trois chiffres.

- -

Voici quelques règles supplémentaires :

- - - - - - - - - - - - - - - - - - - - - - - - - -
Exemples de chaînes de caractères valides pour exprimer une heure
Chaîne de caractèresHeure
00:00:30.75Minuit passé de 30 secondes et 750 millisecondes
12:15Midi passé de quinze minutes
13:44:2513 heures 44 et 25 secondes
- -

Représentation des dates et heures locales

- -

Une chaîne de caractères valide pour un élément de saisie datetime-local se compose d'une chaîne de caractères représentant une date, suivie de la lettre "T" ou d'une espace puis d'une chaîne de caractères représentant une heure. La représentation ne contient aucune information quant au fuseau horaire dont il est question et on présume que la valeur temporelle indiquée est relative au fuseau horaire de l'utilisateur.

- -

Lorsqu'on définit la valeur de l'attribut value d'un champ <input> de type datetime-local, la chaîne de caractères est normalisée. Les formes normalisées utilisent toujours la lettre T comme séparateur entre la date et l'heure. De plus, les formes normalisées utilisent toujours la forme la plus courte pour exprimer l'heure (les secondes sont omises si leur valeur est :00).

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Exemples de chaînes de caractères valides pour l'expression de dates/heures
Chaîne de caractèresVersion normaliséeDate et heure correspondantes
1986-01-28T11:38:00.011986-01-28T11:38:00.0128 janvier 1986 à 11 heures et 38 minutes passées de 10 millisecondes
1986-01-28 11:38:00.0101986-01-28T11:38:00.0128 janvier 1986 à 11 heures et 38 minutes passées de 10 millisecondes
0170-07-31T22:00:000170-07-31T22:0031 juillet 170 à 22 heures
- -
    -
  1. On notera qu'après la normalisation, on obtient la même chaîne que sur l'exemple précédent : l'espace séparateur a été remplacé par un "T" et le zéro de terminaison a été supprimé pour raccourcir la chaîne de l'heure.
    2. -
  2. On notera que la forme normalisée de cette date ne contient pas l'expression des secondes.
    3. -
- -

Représentation des dates et heures universelles

- -

Une valeur de date/heure universelle exprime la date et l'heure mais aussi le fuseau horaire de l'instant. Une chaîne de caractères représentant une telle valeur commence de la même façon qu'une chaîne de caractère représentant une date/heure locale, suivie d'une chaîne de caractères indiquant le décalage horaire.

- -

Chaîne de caractères exprimant le décalage horaire

- -

La chaîne de caractères qui décrit le décalage horaire contient un décalage positif d'heures et de minutes, relativement à un fuseau de base. Il existe deux points de référence qui sont très proches sans être identiques :

- - - -

La chaîne de caractères indiquant le décalage est directement ajoutée après la valeur pour la date et l'heure. Si la date et l'heure sont déjà exprimées relativement à UTC, on pourra simplement suffixer "Z", sinon, on construira le complément de la façon suivante :

- -
    -
  1. Un caractère indiquant le signe du décalage : le plus ("+" ou U+002B) pour les fuseaux situés à l'est du méridien ou le moins ("-" ou U+002D) pour les fuseaux situés à l'ouest.
    2. -
  2. Deux chiffres indiquant le nombre d'heures de décalage par rapport au méridien. Cette valeur doit être comprise entre 00 et 23.
    3. -
  3. Deux-points (":") (nécessaires uniquement si le décalage contient des minutes)
    4. -
  4. Deux chiffres indiquant les minutes de décalage. Cette valeur doit être comprise entre 00 et 59.
    5. -
- -

Bien que ces règles permettent d'exprimer des fuseaux horaires entre -23:59 et +23:59, l'intervalle actuel des décalages horaires est -12:00 à +14:00 et il n'y a pas de fuseau horaire pour lequel le décalage en minutes est différent de 00, 30 ou 45. Cela peut en théorie évoluer à tout moment car les pays sont libres de modifier leur fuseau horaire quand ils le souhaitent.

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Exemples de chaînes de caractères valides pour l'expression de dates/heures universelles
Chaîne de caractèresDate/heure universelleDate/heure sur le méridien solaire
2005-06-07T00:00Z7 juin 2005 à minuit UTC7 juin 2005 à minuit
1789-08-22T12:30:00.1-04:0022 août 1789 à midi trente (passé d'un dixième de seconde) selon l'heure avancée de l'Est (Eastern Daylight Time (EDT))22 août 1789 à 16 heures trente passées d'un dixième de seconde
3755-01-01 00:00+10:001er janvier 3755 à minuit pour le fuseau AEST (Australian Eastern Standard Time)31 décembre 3754 à 14h
- -

Voir aussi

- - diff --git a/files/fr/web/html/date_and_time_formats/index.md b/files/fr/web/html/date_and_time_formats/index.md new file mode 100644 index 0000000000..95aebbdca4 --- /dev/null +++ b/files/fr/web/html/date_and_time_formats/index.md @@ -0,0 +1,469 @@ +--- +title: Formats de date et d'heure utilisés en HTML +slug: Web/HTML/Date_and_time_formats +tags: + - Date + - Element + - Format + - HTML + - ISO 8601 + - Input + - Reference + - String + - Time + - Week + - datetime + - datetime-local + - del + - ins + - month + - month-year + - week-year +translation_of: Web/HTML/Date_and_time_formats +original_slug: Web/HTML/Formats_date_heure_HTML +--- +
{{HTMLRef}}
+ +

Certains éléments HTML manipulent des valeurs temporelles pour des dates ou des heures. Les formats utilisés pour les chaînes de caractères qui définissent ces valeurs sont décrits dans cet article. Les éléments qui utilisent ces données sont notamment les éléments <input> qui permettent de choisir une date, une heure ou les deux, les éléments <ins> et <del> dont l'attribut ins indique la date (ou la date et l'heure) à laquelle l'ajout ou la suppression de contenu a eu lieu.

+ +

Pour les éléments <input>, voici les différents type (cf. input) pour lesquels l'attribut value contient une chaîne de caractères représentant une date ou une heure :

+ + + +

Exemples

+ +

Avant de détailler plus, voyons quelques exemples de chaînes de caractères utilisées en HTML et qui représentent des valeurs temporelles.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Exemple de chaînes de caractères utilisées en HTML pour représenter des dates et des heures
Chaîne de caractèresDate/heure
2005-06-077 juin 2005[détails]
08:4508h45m (le matin)[détails]
08:45:2508h45m25s[détails]
0033-08-04T03:4003h40 (du matin), le 04 août 33[détails]
1977-04-01T14:00:3030 secondes après 14h00, le premier avril 1977[détails]
1901-01-01T00:00ZMinuit, UTC, le 1er janvier 1901[détails]
1901-01-01T00:00:01-04:00Minuit passé d'une seconde sur l'heure de l'Est (EST), le 1er janvier 1901[détails]
+ +

Notions essentielles

+ +

Avant de s'intéresser aux différents formats pour la représentation textuelle des valeurs temporelles en HTML, commençons par décrire comment ces valeurs sont définies formellement. HTML utilise une variation du standard ISO 8601 pour les chaînes de caractères représentant les dates et les heures. Il est toujours utile de vérifier que le format utilisé est compatible avec HTML, car la spécification HTML utilise des algorithmes pour analyser ces chaînes qui sont plus précis que le standard ISO 8601 (il peut donc y avoir quelques fines différences).

+ +

Jeu de caractères

+ +

En HTML, les chaînes qui représentent des dates et des heures manipulent uniquement des caractères ASCII.

+ +

Numérotation des années

+ +

La spécification HTML indique que les années doivent être exprimées selon le calendrier grégorien. Bien que les interfaces utilisateur permettent éventuellement de saisir des dates grâce à d'autres calendriers, la valeur sous-jacente est toujours représentée à l'aide du calendrier grégorien.

+ +

Bien que le calendrier grégorien ait été créé en 1582 afin de remplacer le calendrier julien, la notation grégorienne est « étendue » en HTML jusqu'à 1 après J.C. Aussi, si vous manipulez des dates antérieures à 1582, assurez-vous qu'elles soient bien exprimées selon le calendrier grégorien.

+ +

En HTML, les années sont toujours écrites avec au moins 4 chiffres. Aussi, les années antérieures à l'an 1000 sont complétées avec des zéros : l'an 72 est donc écrit 0072. Les années antérieures à l'an 1 ne sont pas prises en charge par HTML.

+ +

Une année est normalement constituée de 365 jours, sauf pendant les années bissextiles.

+ +

Années bissextiles

+ +

Une année bissextile est une année dont le numéro est :

+ + + +

Bien qu'une année calendaire s'étende sur 365 jours, la Terre met environ 365,2422 jours avant d'effectuer une orbite complète autour du soleil. Les années bissextiles permettent d'ajuster le calendrier et de le synchroniser avec la position de la planète le long de l'orbite. Ajouter un jour tous les 4 ans (environ) permet d'avoir une année moyenne longue de 365,25 jours, ce qui est relativement correct.

+ +

En ajustant l'algorithme avec les contraintes ci-avant (divisible par 400 ou divisible par 4 mais pas par 100), on s'approche plus précisément du nombre correct de jours (365,2425). Des secondes intercalaires sont parfois ajoutées au calendrier afin de compenser les trois millièmes restant et le ralentissement naturel de la rotation de la Terre.

+ +

Le deuxième mois de l'année (février) possède 28 jours pendant les années non-bissextiles et 29 jours pendant les années bissextiles.

+ +

Mois de l'année

+ +

Une année comporte 12 mois, numérotés de 1 à 12. Les valeurs des mois sont toujours représentées par une chaîne de caractères se composant de deux chiffres : des valeurs entre 01 et 12. Voir le tableau ci-après pour les numéros des mois et le nombre de jours correspondant.

+ +

Jours du mois

+ +

Les mois numérotés 1, 3, 5, 7, 8, 10 et 12 possèdent 31 jours. Les mois 4, 6, 9 et 11 possèdent 30 jours. Le deuxième mois, février, possède 28 jours sauf pendant les années bissextiles où il possède 29 jours. Le tableau ci-après détaille les mois et leurs noms, ainsi que leur durée en jours.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Les mois de l'année et leur durée en jours
Numéro du moisNom (en français)Durée du mois (en nombre de jours)
01Janvier31
02Février28 (29 pour les années bissextiles)
03Mars31
04Avril30
05Mai31
06Juin30
07Juillet31
o8Août31
09Septembre30
10Octobre31
11Novembre30
12Décembre31
+ +

Représentation des semaines

+ +

Une chaîne de caractères représentant une semaine correspondra à une semaine d'une année donnée. Aussi, une chaîne de caractères valide pour représenter une semaine se compose de 4 chiffres représentant l'année, suivis d'un tiret ("-" ou U+002D), suivi de la lettre majuscule "W" (U+0057), suivie d'un numéro de semaine sur deux chiffres.

+ +

Le numéro de la semaine est une chaîne de caractères, avec deux chiffres, entre 01 et 53. Chaque semaine commence un lundi et se termine un dimanche. Il est ainsi possible que les premiers jours de janvier fassent partie de la dernière semaine de l'année précédente et que les derniers jours fassent partie de la première semaine de l'année suivante. La première semaine de l'année est celle qui contient le premier jeudi de l'année. Ainsi, le premier jeudi de 1953 était le 1er janvier et la semaine contenant ce jour est donc considérée la première semaine de l'année. Ainsi, le 30 décembre 1952 appartient à la semaine 1953-W01.

+ +

Une année aura 53 semaines si :

+ + + +

Les autres années contiennent 52 semaines.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Exemples de chaînes de caractères valides pour représenter des semaines
Chaîne de caractèresSemaine et année (intervalle de dates)
2001-W37Semaine 37 de l'année 2001 (entre le 10 et le 16 septembre 2001)
1953-W01Semaine 1 de l'année 1953 (entre le 29 décembre 1952 et le 4 janvier 1953)
1948-W53Semaine 53 de l'année 1948 (entre le 27 décembre 1948 et le 2 janvier 1949)
1949-W01Semaine 1 de l'année 1949 (entre le 3 janvier et le 9 janvier 1949)
0531-W16Semaine 16 de l'année 531 (entre le 13 avril et le 19 avril 531)
0042-W04Semaine 4 de l'année 42 (entre le 21 et le 27 janvier 42)
+ +

On notera que les deux composantes pour l'année et pour la semaine sont complétées avec des zéros à gauche afin que l'année soit exprimée sur 4 chiffres et que la semaine soit exprimée sur 2 chiffres.

+ +

Représentation des mois

+ +

Une chaîne de caractères pour un mois représente un mois d'une année donnée (plutôt qu'un mois « générique »). Aussi, on ne représentera pas simplement le mois de janvier mais le mois de janvier de l'année 1972.

+ +

Une chaîne de caractères représentant un mois est valide si elle commence par un numéro d'année valide (une chaîne de caractères composée de quatre chiffres), suivie d'un tiret ("-", ou U+002D), suivi d'un nombre sur deux chiffres où 01 représente janvier et où 12 représente décembre.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Exemples de chaînes de caractères valides pour la représentation d'un mois
Chaîne de caractèresLe mois et l'année
17310-09Le mois de septembre de l'année 17310
2019-01Le mois de janvier de l'année 2019
1993-11Le mois de novembre de l'année 1993
0571-04Le mois d'avril de l'année 571
0001-07Le mois de juillet de l'an 1
+ +

On notera que les années sont exprimées sur au moins 4 chiffres et que les années antérieures à 1000 sont préfixées de 0.

+ +

Représentation des dates

+ +

Une chaîne de caractères représentant une date est valide si elle contient : une année (cf. ci-avant) suivie d'un tiret, suivi d'un mois, suivi d'un tiret ("-" ou U+002D) suivi du numéro du jour dans le mois sur deux chiffres.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Exemples de chaînes de caractères valides pour représenter des dates
Chaîne de caractèresDate complète
1993-11-011er novembre 1993
1066-10-1414 octobre 1066
0571-04-2222 avril 571
0062-02-055 février 62
+ +

Représentation des heures

+ +

Une chaîne de caractères représentant une heure peut décrire différentes précisions : minute, seconde ou milliseconde. Il n'est pas possible d'indiquer uniquement l'heure ou les minutes. Une chaîne valide se compose a minima d'une valeur sur deux chiffres représentant une heure, suivi de deux-points (":", U+003A) puis d'une valeur sur deux chiffres exprimant les minutes. La valeur des minutes peut ensuite être suivie d'un autre deux-points puis d'une valeur sur deux chiffres pour les secondes. Il est possible d'indiquer les millisecondes en ajoutant un point (".", U+002E) après les secondes, suivi d'une valeur sur un, deux ou trois chiffres.

+ +

Voici quelques règles supplémentaires :

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Exemples de chaînes de caractères valides pour exprimer une heure
Chaîne de caractèresHeure
00:00:30.75Minuit passé de 30 secondes et 750 millisecondes
12:15Midi passé de quinze minutes
13:44:2513 heures 44 et 25 secondes
+ +

Représentation des dates et heures locales

+ +

Une chaîne de caractères valide pour un élément de saisie datetime-local se compose d'une chaîne de caractères représentant une date, suivie de la lettre "T" ou d'une espace puis d'une chaîne de caractères représentant une heure. La représentation ne contient aucune information quant au fuseau horaire dont il est question et on présume que la valeur temporelle indiquée est relative au fuseau horaire de l'utilisateur.

+ +

Lorsqu'on définit la valeur de l'attribut value d'un champ <input> de type datetime-local, la chaîne de caractères est normalisée. Les formes normalisées utilisent toujours la lettre T comme séparateur entre la date et l'heure. De plus, les formes normalisées utilisent toujours la forme la plus courte pour exprimer l'heure (les secondes sont omises si leur valeur est :00).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Exemples de chaînes de caractères valides pour l'expression de dates/heures
Chaîne de caractèresVersion normaliséeDate et heure correspondantes
1986-01-28T11:38:00.011986-01-28T11:38:00.0128 janvier 1986 à 11 heures et 38 minutes passées de 10 millisecondes
1986-01-28 11:38:00.0101986-01-28T11:38:00.0128 janvier 1986 à 11 heures et 38 minutes passées de 10 millisecondes
0170-07-31T22:00:000170-07-31T22:0031 juillet 170 à 22 heures
+ +
    +
  1. On notera qu'après la normalisation, on obtient la même chaîne que sur l'exemple précédent : l'espace séparateur a été remplacé par un "T" et le zéro de terminaison a été supprimé pour raccourcir la chaîne de l'heure.
    2. +
  2. On notera que la forme normalisée de cette date ne contient pas l'expression des secondes.
    3. +
+ +

Représentation des dates et heures universelles

+ +

Une valeur de date/heure universelle exprime la date et l'heure mais aussi le fuseau horaire de l'instant. Une chaîne de caractères représentant une telle valeur commence de la même façon qu'une chaîne de caractère représentant une date/heure locale, suivie d'une chaîne de caractères indiquant le décalage horaire.

+ +

Chaîne de caractères exprimant le décalage horaire

+ +

La chaîne de caractères qui décrit le décalage horaire contient un décalage positif d'heures et de minutes, relativement à un fuseau de base. Il existe deux points de référence qui sont très proches sans être identiques :

+ + + +

La chaîne de caractères indiquant le décalage est directement ajoutée après la valeur pour la date et l'heure. Si la date et l'heure sont déjà exprimées relativement à UTC, on pourra simplement suffixer "Z", sinon, on construira le complément de la façon suivante :

+ +
    +
  1. Un caractère indiquant le signe du décalage : le plus ("+" ou U+002B) pour les fuseaux situés à l'est du méridien ou le moins ("-" ou U+002D) pour les fuseaux situés à l'ouest.
    2. +
  2. Deux chiffres indiquant le nombre d'heures de décalage par rapport au méridien. Cette valeur doit être comprise entre 00 et 23.
    3. +
  3. Deux-points (":") (nécessaires uniquement si le décalage contient des minutes)
    4. +
  4. Deux chiffres indiquant les minutes de décalage. Cette valeur doit être comprise entre 00 et 59.
    5. +
+ +

Bien que ces règles permettent d'exprimer des fuseaux horaires entre -23:59 et +23:59, l'intervalle actuel des décalages horaires est -12:00 à +14:00 et il n'y a pas de fuseau horaire pour lequel le décalage en minutes est différent de 00, 30 ou 45. Cela peut en théorie évoluer à tout moment car les pays sont libres de modifier leur fuseau horaire quand ils le souhaitent.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Exemples de chaînes de caractères valides pour l'expression de dates/heures universelles
Chaîne de caractèresDate/heure universelleDate/heure sur le méridien solaire
2005-06-07T00:00Z7 juin 2005 à minuit UTC7 juin 2005 à minuit
1789-08-22T12:30:00.1-04:0022 août 1789 à midi trente (passé d'un dixième de seconde) selon l'heure avancée de l'Est (Eastern Daylight Time (EDT))22 août 1789 à 16 heures trente passées d'un dixième de seconde
3755-01-01 00:00+10:001er janvier 3755 à minuit pour le fuseau AEST (Australian Eastern Standard Time)31 décembre 3754 à 14h
+ +

Voir aussi

+ + diff --git a/files/fr/web/html/element/a/index.html b/files/fr/web/html/element/a/index.html deleted file mode 100644 index 786964fa38..0000000000 --- a/files/fr/web/html/element/a/index.html +++ /dev/null @@ -1,431 +0,0 @@ ---- -title: ' : l''élément d''ancre' -slug: Web/HTML/Element/a -tags: - - Content - - Element - - HTML - - HTML text-level semantics - - HTML:Flow content - - HTML:Interactive content - - HTML:Palpable Content - - HTML:Phrasing content - - Inline element - - Reference - - Web -translation_of: Web/HTML/Element/a -browser-compat: html.elements.a ---- -
{{HTMLRef}}
- -

L'élément HTML <a> (pour ancre ou anchor en anglais), avec son attribut href, crée un lien hypertexte vers des pages web, des fichiers, des adresses e-mail, des emplacements se trouvant dans la même page, ou tout ce qu'une URL peut adresser. Le contenu de chaque élément <a> doit indiquer la destination du lien. Si l'attribut href est présent, appuyer sur la touche entrée en se concentrant sur l'élément <a> l'activera.

- -
{{EmbedInteractiveExample("pages/tabbed/a.html")}}
- -

Attributs

- -

Cet élément inclut les attributs universels.

- -
-
download
-
-

Sans valeur, le navigateur proposera un nom de fichier/extension, généré à partir de diverses sources :

- -

La définition d'une valeur la suggère comme nom de fichier. Les caractères / et \ sont convertis en caractères de soulignement (_). Les systèmes de fichiers peuvent interdire d'autres caractères dans les noms de fichiers, les navigateurs ajusteront donc le nom suggéré si nécessaire.

-
-

Note :

-
    -
  • download ne fonctionne que pour les URLs de même origine, ou les schémas blob: et data:.
    • -
  • -

    Si l'en-tête Content-Disposition comporte des informations différentes de celles de l'attribut download, le comportement résultant peut différer :

    -
      -
    • Si l'en-tête spécifie un nom de fichier, il a priorité sur un nom de fichier spécifié dans l'attribut download.
      • -
    • Si l'en-tête spécifie une disposition de inline, Chrome, et Firefox 82+, donnent la priorité à l'attribut et le traitent comme un téléchargement. Les versions de Firefox antérieures à 82 donnent la priorité à l'en-tête et affichent le contenu en ligne.
      • -
    -
    • -
-
-
-
href
-
-

L'URL vers laquelle pointe l'hyperlien. Les liens ne sont pas limités aux URL basées sur HTTP - ils peuvent utiliser n'importe quel schéma d'URL pris en charge par les navigateurs :

-
    -
  • Sections d'une page avec des fragments d'URL
    • -
  • Des morceaux de fichiers médias avec des fragments de médias
    • -
  • Les numéros de téléphone avec l'URL tel:.
    • -
  • Les adresses électroniques avec l'URL mailto:.
    • -
  • Bien que les navigateurs web puissent ne pas prendre en charge d'autres schémas d'URL, les sites web le peuvent avec registerProtocolHandler().
    • -
-
-
hreflang
-
Donne des indications sur le langage humain de l'URL liée. Aucune fonctionnalité intégrée. Les valeurs autorisées sont les mêmes que l'attribut global lang.
-
ping
-
Contient une liste d'URL séparées par des espaces vers lesquelles sont envoyées des requêtes POST avec le corps PING lorsque l'utilisateur suit le lien. Cet attribut est généralement utilisé pour tracer un utilisateur.
-
referrerpolicy {{experimental_inline}}
-
La portion du referrer envoyer lors du suivi du lien. Voir Referrer-Policy pour les valeurs possibles et leurs effets.
-
rel
-
Cet attribut indique la relation entre la cible du lien et l'objet faisant le lien. La valeur est une liste de types de liens séparés par des espaces.
-
target
-
Où afficher l'URL liée, comme nom d'un contexte de navigation (un onglet, une fenêtre ou un <iframe>). Les mots-clés suivants ont des significations spéciales pour l'endroit où charger l'URL : -
    -
  • _self : le contexte de navigation actuel. (Par défaut)
    • -
  • _blank : généralement un nouvel onglet, mais les utilisateurs peuvent configurer les navigateurs pour ouvrir une nouvelle fenêtre à la place.
    • -
  • _parent : le contexte de navigation parent de celui en cours. S'il n'y a pas de parent, il se comporte comme _self.
    • -
  • _top : le contexte de navigation le plus haut (le contexte "le plus haut" qui est un ancêtre du contexte actuel). S'il n'a aucun ancêtre, il se comporte comme _self.
    • -
-
-

Note :Définir target="_blank" sur les éléments <a> fournit implicitement le même comportement rel que définir rel="noopener" qui ne définit pas window.opener. Voir la compatibilité des navigateurs pour le support.

-
-
-
type
-
Donne des indications sur le format de l'URL liée avec un Type MIME. Aucune fonctionnalité intégrée.
-
- -

Attributs obsolètes

- -
-
charset {{Deprecated_Inline}}
-
Fait allusion aux encodages des caractères de l'URL liée. -
-

Note :Cet attribut est déprécié et ne doit pas être utilisé par les auteurs. Utilisez l'en-tête HTTP Content-Type sur l'URL liée.

-
-
-
coords {{Deprecated_Inline}}
-
Utilisé avec l'attribut shape. Une liste de coordonnées séparées par des virgules.
-
name {{Deprecated_Inline}}
-
Était nécessaire pour définir un emplacement cible possible dans une page. En HTML 4.01, id et name pouvaient tous deux être utilisés sur <a>, pour autant qu'ils aient des valeurs identiques. -
-

Note :Utilisez l'attribut universel id à la place.

-
-
-
rev {{Deprecated_Inline}}
-
Spécifiait un lien inverse ; l'opposé de l'attribut rel. Déprécié pour avoir été très confus.
-
shape {{Deprecated_Inline}}
-
La forme de la région de l'hyperlien dans une carte d'image. -
-

Note :Utilisez plutôt l'élément <area> pour les cartes d'images.

-
-
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Catégories de contenuContenu du flux, contenu phrasé, contenu interactif, contenu palpable.
Contenu autoriséTransparent, contenant soit le contenu du flux (à l'exclusion du contenu interactif), soit contenu phrasé.
Omission de balisesAucune, la balise d'ouverture et la balise de fermeture sont obligatoires.
Parents autorisésTout élément qui accepte la formulation du contenu, ou tout élément qui accepte le contenu du flux, mais pas les autres éléments <a>.
Rôle ARIA implicitelien lorsque l'attribut href est présent, sinon pas de rôle correspondant.
Rôles ARIA autorisés -

Lorsque l'attribut href est présent :

- -

Lorsque l'attribut href n'est pas présent :

-
    -
  • tout
    • -
-
Interface DOMHTMLAnchorElement
- -

Exemples

- -

Créer un lien vers une URL absolue

- -

HTML

- -
<a href="https://www.mozilla.com">
-  Mozilla
-</a>
- -

Résultat

- -

{{EmbedLiveSample("linking_to_an_absolute_url", "100%", 50)}}

- -

Créer des liens vers des URL relatives

- -

HTML

- -
<a href="//example.com">URL relative au schéma</a>
-<a href="/fr/docs/Web/HTML">URL relative à l'origine</a>
-<a href="./p">URL relative au répertoire</a>
- - - -

Résultat

- -

{{EmbedLiveSample("linking_to_relative_urls", "100%", 120)}}

- -

Créer un lien vers un élément de la même page

- -
<!-- <a> élément liens vers la section ci-dessous -->
-<p><a href="#section_further_down">
-  Passez à la rubrique ci-dessous
-</a></p>
-
-<!-- Rubrique à relier -->
-<h2 id="section_further_down">Section plus bas</h2>
- -
-

Note :Vous pouvez utiliser href="#top" ou le fragment vide (href="#") pour créer un lien vers le haut de la page actuelle, comme défini dans la spécification HTML.

-
- -

Créer un lien avec une adresse électronique

- -

Pour créer des liens qui s'ouvrent dans le programme de messagerie de l'utilisateur, pour lui permettre d'envoyer un nouveau message, utilisez le schéma mailto: :

- -
<a href="mailto:nowhere@mozilla.org">Envoyer un courriel nulle part</a>
- -

Pour plus de détails sur les URL mailto:, comme l'inclusion d'un sujet ou d'un corps de message, voir Liens de courrier électronique ou RFC 6068.

- -

Créer un lien avec les numéros de téléphone

- -
<a href="tel:+49.157.0156">+49 157 0156</a>
-<a href="tel:+1(555)5309">(555) 5309</a>
- -

tel: le comportement du lien varie en fonction des capacités du périphérique :

- - - -

Voir RFC 3966 pour la syntaxe, les fonctionnalités supplémentaires et d'autres détails sur le schéma URL tel:.

- -

Utilisation de l'attribut de téléchargement pour enregistrer un <canvas> au format PNG.

- -

Pour enregistrer le contenu d'un élément <canvas> sous forme d'image, vous pouvez créer un lien avec un attribut download et les données du canvas sous forme d'une URL data: :

- - - -
HTML
- -
<p>
-  Peignez en maintenant le bouton de la souris enfoncé et en le déplaçant.
-  <a href="" download="my_painting.png">Télécharger ma peinture</a>
-</p>
-
-<canvas width="300" height="300"></canvas>
- -
CSS
- -
html {
-  font-family: sans-serif;
-}
-canvas {
-  background: #fff;
-  border: 1px dashed;
-}
-a {
-  display: inline-block;
-  background: #69c;
-  color: #fff;
-  padding: 5px 10px;
-}
- -
JavaScript
- -
var canvas = document.querySelector('canvas'),
-    c = canvas.getContext('2d');
-c.fillStyle = 'hotpink';
-
-function draw(x, y) {
-  if (isDrawing) {
-    c.beginPath();
-    c.arc(x, y, 10, 0, Math.PI*2);
-    c.closePath();
-    c.fill();
-  }
-}
-
-canvas.addEventListener('mousemove', event =>
-  draw(event.offsetX, event.offsetY)
-);
-canvas.addEventListener('mousedown', () => isDrawing = true);
-canvas.addEventListener('mouseup', () => isDrawing = false);
-
-document.querySelector('a').addEventListener('click', event =>
-  event.target.href = canvas.toDataURL()
-);
- -
Résultat
- -

{{EmbedLiveSample('example_painting_app_with_save_link', '100%', '420')}}

- -

Sécurité et vie privée

- -

Les éléments <a> peuvent avoir des conséquences sur la sécurité et la vie privée des utilisateurs. Voir Referer header : privacy and security concerns pour plus d'informations.

- -

L'utilisation de target="_blank" sans rel="noreferrer" et rel="noopener" rend le site web vulnérable aux attaques d'exploitation de l'API window.opener (description de la vulnérabilité), bien qu'il faille noter que, dans les versions plus récentes du navigateur, la définition de target="_blank" fournit implicitement la même protection que la définition de rel="noopener". Voir la compatibilité des navigateurs pour plus de détails.

- -

Accessibilité

- -

Texte de lien fort

- -

Le contenu d'un lien doit indiquer où va le lien, même hors contexte.

- -

Texte inaccessible, lien faible

- -

Une erreur tristement courante consiste à ne relier que les mots « cliquez ici » ou « ici » :

- -
<p>
-  En savoir plus sur nos produits <a href="/products">ici</a>.
-</p>
-
- -

Texte de lien fort

- -

Heureusement, il s'agit d'une solution facile, et elle est en fait plus courte que la version inaccessible !

- -
<p>
-  En savoir plus <a href="/products">à propos de nos produits</a>.
-</p>
- -

Les logiciels d'assistance disposent de raccourcis permettant de lister tous les liens d'une page. Cependant, un texte de lien fort profite à tous les utilisateurs − le raccourci « liste de tous les liens » imite la façon dont les utilisateurs voyants parcourent rapidement les pages.

- -

Évènements onclick

- -

Les ancres sont souvent détournées avec l'évènement onclick afin de créer des pseudo-boutons avec l'attribut href qui vaut "#" ou "javascript:void(0)" pour empêcher le rafraîchissement de la page.

- -

Ces valeurs produisent des résultats inadéquats lorsqu'on copie/déplace des liens, qu'on ouvre des liens dans de nouveaux onglets ou fenêtres, qu'on ajoute des marque-pages ou lorsque le JavaScript est encore en train d'être téléchargé. De plus, la sémantique exposée par le document, utilisée par les outils d'assistance, est incorrecte.

- -

Dans ces cas, on privilégiera plutôt l'utilisation d'un bouton <button>. De façon générale, une ancre ne doit être utilisée que pour naviguer vers une URL correcte.

- - - -

Les liens qui ouvrent un nouvel onglet ou une nouvelle fenêtre grâce à target="_blank", ainsi que les liens qui ouvrent des fichiers devraient fournir une indication sur ce qui se produira lorsqu'on cliquera sur ces liens.

- -

Les personnes qui utilisent des outils d'assistance à la navigation comme des lecteurs d'écran et/ou qui souffrent de troubles de la vision, cognitifs peuvent être confuses lorsqu'un nouvel onglet, fichier ou une nouvelle fenêtre s'ouvre de façon inattendue. Les anciennes versions des lecteurs d'écran peuvent également ne pas annoncer ce comportement.

- - - -
<a target="_blank" href="https://www.wikipedia.org/">
-  Wikipédia (s'ouvre dans une nouvelle fenêtre)
-</a>
- - - -
<a target="_blank" href="2017-rapport-annuel.ppt">
-  Rapport annuel 2017 (PowerPoint)
-</a>
- -

Si une icône est utilisée en lieu et place du texte pour indiquer ce comportement, on s'assurera qu'elle contient bien une description alternative.

- -
<a  target="_blank" href="https://www.wikipedia.org">
-  Wikipédia
-  <img alt="(s'ouvre dans un nouvel onglet)" src="newtab.svg">
-</a>
-
-<a href="2017-annual-report.ppt">
-  Rapport annuel 2017 (PowerPoint)
-  <img alt="(fichier PowerPoint)" src="ppt-icon.svg">
-</a>
- - - - - -

Un skip link (aussi appelé skipnav en anglais) est un élément a qui est placé le plus près possible de l'élément <body> et qui renvoie au début du contenu principal de la page.

- -
<body>
-  <a href="#content">Skip to main content</a>
-
-  <header>
-    …
-  </header>
-
-  <main id="content"> <!-- Le lien "skip" renvoie vers ici -->
- -

Ce lien permet alors de passer plus facilement le contenu qui se répète sur l'ensemble des pages (l'en-tête et la barre de navigation par exemple).

- -

Les skip links sont particulièrement utiles pour les personnes qui naviguent à l'aide d'outils d'assistance (commande vocale, stylets buccal ou frontal) pour lesquels devoir passer par des liens répétés peut freiner la lecture du document.

- - - -

Dimensionnement et proximité

- -

La taille

- -

Les éléments interactifs tels que les liens doivent fournir une surface suffisamment grande pour qu'il soit facile de les activer. Cela facilitera la tâche à une variété de personnes : celles qui ont des problèmes moteur, celles qui utilisent des dispositifs de pointage peu précis (doigt ou stylet). La taille interactive minimale recommandée est de 44x44 pixels CSS.

- -

Les liens en texte seul dans le contenu en prose sont exemptés de cette exigence, mais il est toujours bon de s'assurer qu'il y a suffisamment de texte hyperlié pour être facilement activé.

- - - -

La proximité

- -

Lorsque plusieurs contenus interactifs (y compris les ancres) sont placés les uns à côté des autres, il est nécessaire de les espacer suffisamment pour minimiser le risque d'activer le mauvais contenu lors de la navigation.

- -

Un tel espacement peut être obtenu grâce à la propriété CSS margin.

- - - -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/element/a/index.md b/files/fr/web/html/element/a/index.md new file mode 100644 index 0000000000..786964fa38 --- /dev/null +++ b/files/fr/web/html/element/a/index.md @@ -0,0 +1,431 @@ +--- +title: ' : l''élément d''ancre' +slug: Web/HTML/Element/a +tags: + - Content + - Element + - HTML + - HTML text-level semantics + - HTML:Flow content + - HTML:Interactive content + - HTML:Palpable Content + - HTML:Phrasing content + - Inline element + - Reference + - Web +translation_of: Web/HTML/Element/a +browser-compat: html.elements.a +--- +
{{HTMLRef}}
+ +

L'élément HTML <a> (pour ancre ou anchor en anglais), avec son attribut href, crée un lien hypertexte vers des pages web, des fichiers, des adresses e-mail, des emplacements se trouvant dans la même page, ou tout ce qu'une URL peut adresser. Le contenu de chaque élément <a> doit indiquer la destination du lien. Si l'attribut href est présent, appuyer sur la touche entrée en se concentrant sur l'élément <a> l'activera.

+ +
{{EmbedInteractiveExample("pages/tabbed/a.html")}}
+ +

Attributs

+ +

Cet élément inclut les attributs universels.

+ +
+
download
+
+

Sans valeur, le navigateur proposera un nom de fichier/extension, généré à partir de diverses sources :

+ +

La définition d'une valeur la suggère comme nom de fichier. Les caractères / et \ sont convertis en caractères de soulignement (_). Les systèmes de fichiers peuvent interdire d'autres caractères dans les noms de fichiers, les navigateurs ajusteront donc le nom suggéré si nécessaire.

+
+

Note :

+
    +
  • download ne fonctionne que pour les URLs de même origine, ou les schémas blob: et data:.
    • +
  • +

    Si l'en-tête Content-Disposition comporte des informations différentes de celles de l'attribut download, le comportement résultant peut différer :

    +
      +
    • Si l'en-tête spécifie un nom de fichier, il a priorité sur un nom de fichier spécifié dans l'attribut download.
      • +
    • Si l'en-tête spécifie une disposition de inline, Chrome, et Firefox 82+, donnent la priorité à l'attribut et le traitent comme un téléchargement. Les versions de Firefox antérieures à 82 donnent la priorité à l'en-tête et affichent le contenu en ligne.
      • +
    +
    • +
+
+
+
href
+
+

L'URL vers laquelle pointe l'hyperlien. Les liens ne sont pas limités aux URL basées sur HTTP - ils peuvent utiliser n'importe quel schéma d'URL pris en charge par les navigateurs :

+
    +
  • Sections d'une page avec des fragments d'URL
    • +
  • Des morceaux de fichiers médias avec des fragments de médias
    • +
  • Les numéros de téléphone avec l'URL tel:.
    • +
  • Les adresses électroniques avec l'URL mailto:.
    • +
  • Bien que les navigateurs web puissent ne pas prendre en charge d'autres schémas d'URL, les sites web le peuvent avec registerProtocolHandler().
    • +
+
+
hreflang
+
Donne des indications sur le langage humain de l'URL liée. Aucune fonctionnalité intégrée. Les valeurs autorisées sont les mêmes que l'attribut global lang.
+
ping
+
Contient une liste d'URL séparées par des espaces vers lesquelles sont envoyées des requêtes POST avec le corps PING lorsque l'utilisateur suit le lien. Cet attribut est généralement utilisé pour tracer un utilisateur.
+
referrerpolicy {{experimental_inline}}
+
La portion du referrer envoyer lors du suivi du lien. Voir Referrer-Policy pour les valeurs possibles et leurs effets.
+
rel
+
Cet attribut indique la relation entre la cible du lien et l'objet faisant le lien. La valeur est une liste de types de liens séparés par des espaces.
+
target
+
Où afficher l'URL liée, comme nom d'un contexte de navigation (un onglet, une fenêtre ou un <iframe>). Les mots-clés suivants ont des significations spéciales pour l'endroit où charger l'URL : +
    +
  • _self : le contexte de navigation actuel. (Par défaut)
    • +
  • _blank : généralement un nouvel onglet, mais les utilisateurs peuvent configurer les navigateurs pour ouvrir une nouvelle fenêtre à la place.
    • +
  • _parent : le contexte de navigation parent de celui en cours. S'il n'y a pas de parent, il se comporte comme _self.
    • +
  • _top : le contexte de navigation le plus haut (le contexte "le plus haut" qui est un ancêtre du contexte actuel). S'il n'a aucun ancêtre, il se comporte comme _self.
    • +
+
+

Note :Définir target="_blank" sur les éléments <a> fournit implicitement le même comportement rel que définir rel="noopener" qui ne définit pas window.opener. Voir la compatibilité des navigateurs pour le support.

+
+
+
type
+
Donne des indications sur le format de l'URL liée avec un Type MIME. Aucune fonctionnalité intégrée.
+
+ +

Attributs obsolètes

+ +
+
charset {{Deprecated_Inline}}
+
Fait allusion aux encodages des caractères de l'URL liée. +
+

Note :Cet attribut est déprécié et ne doit pas être utilisé par les auteurs. Utilisez l'en-tête HTTP Content-Type sur l'URL liée.

+
+
+
coords {{Deprecated_Inline}}
+
Utilisé avec l'attribut shape. Une liste de coordonnées séparées par des virgules.
+
name {{Deprecated_Inline}}
+
Était nécessaire pour définir un emplacement cible possible dans une page. En HTML 4.01, id et name pouvaient tous deux être utilisés sur <a>, pour autant qu'ils aient des valeurs identiques. +
+

Note :Utilisez l'attribut universel id à la place.

+
+
+
rev {{Deprecated_Inline}}
+
Spécifiait un lien inverse ; l'opposé de l'attribut rel. Déprécié pour avoir été très confus.
+
shape {{Deprecated_Inline}}
+
La forme de la région de l'hyperlien dans une carte d'image. +
+

Note :Utilisez plutôt l'élément <area> pour les cartes d'images.

+
+
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Catégories de contenuContenu du flux, contenu phrasé, contenu interactif, contenu palpable.
Contenu autoriséTransparent, contenant soit le contenu du flux (à l'exclusion du contenu interactif), soit contenu phrasé.
Omission de balisesAucune, la balise d'ouverture et la balise de fermeture sont obligatoires.
Parents autorisésTout élément qui accepte la formulation du contenu, ou tout élément qui accepte le contenu du flux, mais pas les autres éléments <a>.
Rôle ARIA implicitelien lorsque l'attribut href est présent, sinon pas de rôle correspondant.
Rôles ARIA autorisés +

Lorsque l'attribut href est présent :

+ +

Lorsque l'attribut href n'est pas présent :

+
    +
  • tout
    • +
+
Interface DOMHTMLAnchorElement
+ +

Exemples

+ +

Créer un lien vers une URL absolue

+ +

HTML

+ +
<a href="https://www.mozilla.com">
+  Mozilla
+</a>
+ +

Résultat

+ +

{{EmbedLiveSample("linking_to_an_absolute_url", "100%", 50)}}

+ +

Créer des liens vers des URL relatives

+ +

HTML

+ +
<a href="//example.com">URL relative au schéma</a>
+<a href="/fr/docs/Web/HTML">URL relative à l'origine</a>
+<a href="./p">URL relative au répertoire</a>
+ + + +

Résultat

+ +

{{EmbedLiveSample("linking_to_relative_urls", "100%", 120)}}

+ +

Créer un lien vers un élément de la même page

+ +
<!-- <a> élément liens vers la section ci-dessous -->
+<p><a href="#section_further_down">
+  Passez à la rubrique ci-dessous
+</a></p>
+
+<!-- Rubrique à relier -->
+<h2 id="section_further_down">Section plus bas</h2>
+ +
+

Note :Vous pouvez utiliser href="#top" ou le fragment vide (href="#") pour créer un lien vers le haut de la page actuelle, comme défini dans la spécification HTML.

+
+ +

Créer un lien avec une adresse électronique

+ +

Pour créer des liens qui s'ouvrent dans le programme de messagerie de l'utilisateur, pour lui permettre d'envoyer un nouveau message, utilisez le schéma mailto: :

+ +
<a href="mailto:nowhere@mozilla.org">Envoyer un courriel nulle part</a>
+ +

Pour plus de détails sur les URL mailto:, comme l'inclusion d'un sujet ou d'un corps de message, voir Liens de courrier électronique ou RFC 6068.

+ +

Créer un lien avec les numéros de téléphone

+ +
<a href="tel:+49.157.0156">+49 157 0156</a>
+<a href="tel:+1(555)5309">(555) 5309</a>
+ +

tel: le comportement du lien varie en fonction des capacités du périphérique :

+ + + +

Voir RFC 3966 pour la syntaxe, les fonctionnalités supplémentaires et d'autres détails sur le schéma URL tel:.

+ +

Utilisation de l'attribut de téléchargement pour enregistrer un <canvas> au format PNG.

+ +

Pour enregistrer le contenu d'un élément <canvas> sous forme d'image, vous pouvez créer un lien avec un attribut download et les données du canvas sous forme d'une URL data: :

+ + + +
HTML
+ +
<p>
+  Peignez en maintenant le bouton de la souris enfoncé et en le déplaçant.
+  <a href="" download="my_painting.png">Télécharger ma peinture</a>
+</p>
+
+<canvas width="300" height="300"></canvas>
+ +
CSS
+ +
html {
+  font-family: sans-serif;
+}
+canvas {
+  background: #fff;
+  border: 1px dashed;
+}
+a {
+  display: inline-block;
+  background: #69c;
+  color: #fff;
+  padding: 5px 10px;
+}
+ +
JavaScript
+ +
var canvas = document.querySelector('canvas'),
+    c = canvas.getContext('2d');
+c.fillStyle = 'hotpink';
+
+function draw(x, y) {
+  if (isDrawing) {
+    c.beginPath();
+    c.arc(x, y, 10, 0, Math.PI*2);
+    c.closePath();
+    c.fill();
+  }
+}
+
+canvas.addEventListener('mousemove', event =>
+  draw(event.offsetX, event.offsetY)
+);
+canvas.addEventListener('mousedown', () => isDrawing = true);
+canvas.addEventListener('mouseup', () => isDrawing = false);
+
+document.querySelector('a').addEventListener('click', event =>
+  event.target.href = canvas.toDataURL()
+);
+ +
Résultat
+ +

{{EmbedLiveSample('example_painting_app_with_save_link', '100%', '420')}}

+ +

Sécurité et vie privée

+ +

Les éléments <a> peuvent avoir des conséquences sur la sécurité et la vie privée des utilisateurs. Voir Referer header : privacy and security concerns pour plus d'informations.

+ +

L'utilisation de target="_blank" sans rel="noreferrer" et rel="noopener" rend le site web vulnérable aux attaques d'exploitation de l'API window.opener (description de la vulnérabilité), bien qu'il faille noter que, dans les versions plus récentes du navigateur, la définition de target="_blank" fournit implicitement la même protection que la définition de rel="noopener". Voir la compatibilité des navigateurs pour plus de détails.

+ +

Accessibilité

+ +

Texte de lien fort

+ +

Le contenu d'un lien doit indiquer où va le lien, même hors contexte.

+ +

Texte inaccessible, lien faible

+ +

Une erreur tristement courante consiste à ne relier que les mots « cliquez ici » ou « ici » :

+ +
<p>
+  En savoir plus sur nos produits <a href="/products">ici</a>.
+</p>
+
+ +

Texte de lien fort

+ +

Heureusement, il s'agit d'une solution facile, et elle est en fait plus courte que la version inaccessible !

+ +
<p>
+  En savoir plus <a href="/products">à propos de nos produits</a>.
+</p>
+ +

Les logiciels d'assistance disposent de raccourcis permettant de lister tous les liens d'une page. Cependant, un texte de lien fort profite à tous les utilisateurs − le raccourci « liste de tous les liens » imite la façon dont les utilisateurs voyants parcourent rapidement les pages.

+ +

Évènements onclick

+ +

Les ancres sont souvent détournées avec l'évènement onclick afin de créer des pseudo-boutons avec l'attribut href qui vaut "#" ou "javascript:void(0)" pour empêcher le rafraîchissement de la page.

+ +

Ces valeurs produisent des résultats inadéquats lorsqu'on copie/déplace des liens, qu'on ouvre des liens dans de nouveaux onglets ou fenêtres, qu'on ajoute des marque-pages ou lorsque le JavaScript est encore en train d'être téléchargé. De plus, la sémantique exposée par le document, utilisée par les outils d'assistance, est incorrecte.

+ +

Dans ces cas, on privilégiera plutôt l'utilisation d'un bouton <button>. De façon générale, une ancre ne doit être utilisée que pour naviguer vers une URL correcte.

+ + + +

Les liens qui ouvrent un nouvel onglet ou une nouvelle fenêtre grâce à target="_blank", ainsi que les liens qui ouvrent des fichiers devraient fournir une indication sur ce qui se produira lorsqu'on cliquera sur ces liens.

+ +

Les personnes qui utilisent des outils d'assistance à la navigation comme des lecteurs d'écran et/ou qui souffrent de troubles de la vision, cognitifs peuvent être confuses lorsqu'un nouvel onglet, fichier ou une nouvelle fenêtre s'ouvre de façon inattendue. Les anciennes versions des lecteurs d'écran peuvent également ne pas annoncer ce comportement.

+ + + +
<a target="_blank" href="https://www.wikipedia.org/">
+  Wikipédia (s'ouvre dans une nouvelle fenêtre)
+</a>
+ + + +
<a target="_blank" href="2017-rapport-annuel.ppt">
+  Rapport annuel 2017 (PowerPoint)
+</a>
+ +

Si une icône est utilisée en lieu et place du texte pour indiquer ce comportement, on s'assurera qu'elle contient bien une description alternative.

+ +
<a  target="_blank" href="https://www.wikipedia.org">
+  Wikipédia
+  <img alt="(s'ouvre dans un nouvel onglet)" src="newtab.svg">
+</a>
+
+<a href="2017-annual-report.ppt">
+  Rapport annuel 2017 (PowerPoint)
+  <img alt="(fichier PowerPoint)" src="ppt-icon.svg">
+</a>
+ + + + + +

Un skip link (aussi appelé skipnav en anglais) est un élément a qui est placé le plus près possible de l'élément <body> et qui renvoie au début du contenu principal de la page.

+ +
<body>
+  <a href="#content">Skip to main content</a>
+
+  <header>
+    …
+  </header>
+
+  <main id="content"> <!-- Le lien "skip" renvoie vers ici -->
+ +

Ce lien permet alors de passer plus facilement le contenu qui se répète sur l'ensemble des pages (l'en-tête et la barre de navigation par exemple).

+ +

Les skip links sont particulièrement utiles pour les personnes qui naviguent à l'aide d'outils d'assistance (commande vocale, stylets buccal ou frontal) pour lesquels devoir passer par des liens répétés peut freiner la lecture du document.

+ + + +

Dimensionnement et proximité

+ +

La taille

+ +

Les éléments interactifs tels que les liens doivent fournir une surface suffisamment grande pour qu'il soit facile de les activer. Cela facilitera la tâche à une variété de personnes : celles qui ont des problèmes moteur, celles qui utilisent des dispositifs de pointage peu précis (doigt ou stylet). La taille interactive minimale recommandée est de 44x44 pixels CSS.

+ +

Les liens en texte seul dans le contenu en prose sont exemptés de cette exigence, mais il est toujours bon de s'assurer qu'il y a suffisamment de texte hyperlié pour être facilement activé.

+ + + +

La proximité

+ +

Lorsque plusieurs contenus interactifs (y compris les ancres) sont placés les uns à côté des autres, il est nécessaire de les espacer suffisamment pour minimiser le risque d'activer le mauvais contenu lors de la navigation.

+ +

Un tel espacement peut être obtenu grâce à la propriété CSS margin.

+ + + +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/element/abbr/index.html b/files/fr/web/html/element/abbr/index.html deleted file mode 100644 index 178a8835df..0000000000 --- a/files/fr/web/html/element/abbr/index.html +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: " : l'élément d'abréviation" -slug: Web/HTML/Element/abbr -tags: - - Acronym - - Definitions - - Element - - HTML - - HTML text-level semantics - - HTML:Flow content - - HTML:Palpable Content - - HTML:Phrasing content - - Reference - - Web - - abbr - - abbreviation - - semantics -translation_of: Web/HTML/Element/abbr -browser-compat: html.elements.abbr ---- -
{{HTMLRef}}
- -

L'élément HTML <abbr> (abréviation en français) représente une abréviation ou un acronyme ; l'attribut facultatif title peut fournir une explication ou une description de l'abréviation. S'il est présent, title doit contenir cette description complète et rien d'autre.

- -
{{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Catégories de contenuContenu de flux, contenu phrasé, contenu tangible.
Contenu autoriséContenu phrasé.
Omission de balisesAucune, la balise d'ouverture et la balise de fermeture sont obligatoires.
Parents autorisésTout élément acceptant du contenu phrasé.
Rôles ARIA autorisésTous les rôles sont autorisés.
Interface DOMHTMLElement
- -

Attributs

- -

Cet élément n'a pas d'autres attributs que les attributs universels.

- -

On notera que l'attribut title possède ici une sémantique spécifique et il représente la description complète de l'abréviation. Souvent, mais pas nécessairement, il s'affiche comme une info-bulle au survol de la souris.

- -

Chaque élément <abbr> est indépendant, rattacher un titre à l'un ne l'associe pas aux abréviations identiques qui suivent.

- -

Notes d'utilisation

- -

Cas d'usage généraux

- -

Il n'est pas obligatoire d'utiliser <abbr> pour toutes les abréviations d'un document mais voici quelques cas où cet élément s'avère pertinent :

- - - -

Grammaire

- -

Lorsqu'il est présent, le nombre (grammatical) du texte de l'attribut title devrait correspondre à celui du contenu de l'élément abbr. C'est également le cas dans les langues avec plus de deux genres grammaticaux (par exemple, l'arabe, en plus des catégories pour le singulier et le pluriel, possède également une catégorie double).

- -

Mise en forme par défaut

- -

Le but de cet élément est purement explicatif. Tous les navigateurs l'affichent en ligne (display: inline) par défaut mais le reste de la mise en forme par défaut peut varier d'un navigateur à l'autre :

- - - -

Exemples

- -

Baliser une abréviation pour marquer la sémantique

- -

On peut baliser une abréviation sans fournir de description ou de définition, il suffit d'utiliser <abbr> sans attribut.

- -

HTML

- -
<p>
-  Nous allons voir le <abbr>HTML</abbr> qui sert à construire
-  des pages web.
-</p>
- -

Résultat

- -

{{EmbedLiveSample("marking_up_an_abbreviation_semantically", "100%", 80)}}

- -

Mettre en forme des abréviations

- -

CSS peut être utilisé pour appliquer une mise en forme particulière sur les abréviations.

- -

HTML

- -
<p>Avec <abbr>CSS</abbr>, on peut mettre en forme les éléments.</p>
- -

CSS

- -
abbr {
-  font-variant: all-small-caps;
-}
- -

Résultat

- -

{{EmbedLiveSample("styling_abbreviations", "100%", 80)}}

- -

Fournir une description

- -

On peut ajouter un attribut title afin de fournir une description de l'abréviation ou de l'acronyme.

- -

HTML

- -
<p>Et là je lui ai répondu <abbr title="Laugh Out Loud">LOL</abbr>.</p>
- -

Résultat

- -

{{EmbedLiveSample("providing_an_expansion", "100%", 80)}}

- -

Définir une abréviation

- -

Il est possible d'utiliser l'élément <abbr> avec <dfn> afin de formellement définir une abréviation.

- -

HTML

- -
<p><dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr>
-</dfn> est un langage de balise qui permet de créer la structure
-et d'organiser la sémantique d'une page web.</p>
-
-<p>Une <dfn id="spec">spécification</dfn>
-(<abbr title="spécification">spec</abbr>) est un document qui décrit,
-de façon détaillée comme une technologie ou une API fonctionne et comment
-l'utiliser.</p>
- -

Résultat

- -

{{EmbedLiveSample("defining_an_abbreviation", "100%", 160)}}

- -

Accessibilité

- -

C'est une bonne pratique que d'épeler l'acronyme ou l'abréviation lorsqu'elle est utilisée pour la première fois. Cela permet au lecteur de mieux comprendre le terme, notamment si celui-ci est technique ou appartient à un jargon spécifique.

- -

Exemple

- -
<p>JavaScript Object Notation (<abbr>JSON</abbr>) est un format léger
-  d'échange de données.</p>
-
- -

Cela peut servir aux personnes qui découvrent ces concepts pour la première fois ou pour les personnes souffrant de troubles cognitifs.

- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/element/abbr/index.md b/files/fr/web/html/element/abbr/index.md new file mode 100644 index 0000000000..178a8835df --- /dev/null +++ b/files/fr/web/html/element/abbr/index.md @@ -0,0 +1,181 @@ +--- +title: " : l'élément d'abréviation" +slug: Web/HTML/Element/abbr +tags: + - Acronym + - Definitions + - Element + - HTML + - HTML text-level semantics + - HTML:Flow content + - HTML:Palpable Content + - HTML:Phrasing content + - Reference + - Web + - abbr + - abbreviation + - semantics +translation_of: Web/HTML/Element/abbr +browser-compat: html.elements.abbr +--- +
{{HTMLRef}}
+ +

L'élément HTML <abbr> (abréviation en français) représente une abréviation ou un acronyme ; l'attribut facultatif title peut fournir une explication ou une description de l'abréviation. S'il est présent, title doit contenir cette description complète et rien d'autre.

+ +
{{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Catégories de contenuContenu de flux, contenu phrasé, contenu tangible.
Contenu autoriséContenu phrasé.
Omission de balisesAucune, la balise d'ouverture et la balise de fermeture sont obligatoires.
Parents autorisésTout élément acceptant du contenu phrasé.
Rôles ARIA autorisésTous les rôles sont autorisés.
Interface DOMHTMLElement
+ +

Attributs

+ +

Cet élément n'a pas d'autres attributs que les attributs universels.

+ +

On notera que l'attribut title possède ici une sémantique spécifique et il représente la description complète de l'abréviation. Souvent, mais pas nécessairement, il s'affiche comme une info-bulle au survol de la souris.

+ +

Chaque élément <abbr> est indépendant, rattacher un titre à l'un ne l'associe pas aux abréviations identiques qui suivent.

+ +

Notes d'utilisation

+ +

Cas d'usage généraux

+ +

Il n'est pas obligatoire d'utiliser <abbr> pour toutes les abréviations d'un document mais voici quelques cas où cet élément s'avère pertinent :

+ +
    +
  • Lorsqu'une abréviation est utilisée et qu'on souhaite fournir une définition ou une explication en dehors du contenu du document, on utilisera <abbr> avec un attribut title adéquat.
    • +
  • Lorsqu'une abréviation fait partie d'un jargon ou d'un vocabulaire qui risque d'être inconnu du lecteur, un élément <abbr> avec un attribut title explicatif pourra être utilisé.
    • +
  • Lorsqu'on souhaite bénéficier de la sémantique liée à l'abréviation (par exemple pour les manipuler en script ou les mettre en forme avec des feuilles de style), on pourra utiliser <abbr> pour identifier ces contenus.
    • +
  • Lorsqu'on souhaite définir des termes qui sont des abréviations, on pourra utiliser une combinaison de <abbr> et de <dfn>. Voir ci-après pour un exemple.
    • +
+ +

Grammaire

+ +

Lorsqu'il est présent, le nombre (grammatical) du texte de l'attribut title devrait correspondre à celui du contenu de l'élément abbr. C'est également le cas dans les langues avec plus de deux genres grammaticaux (par exemple, l'arabe, en plus des catégories pour le singulier et le pluriel, possède également une catégorie double).

+ +

Mise en forme par défaut

+ +

Le but de cet élément est purement explicatif. Tous les navigateurs l'affichent en ligne (display: inline) par défaut mais le reste de la mise en forme par défaut peut varier d'un navigateur à l'autre :

+ +
    +
  • Certains navigateurs tels qu'Internet Explore lui appliquent la même mise en forme qu'à un élément <span>.
    • +
  • Opera, Firefox et d'autres navigateurs souligne l'abréviation avec une ligne de points.
    • +
  • D'autres navigateurs ne soulignent pas le texte mais l'écrivent en petites majuscules. Pour éviter ce comportement, on pourra utiliser la règle CSS font-variant: none.
    • +
+ +

Exemples

+ +

Baliser une abréviation pour marquer la sémantique

+ +

On peut baliser une abréviation sans fournir de description ou de définition, il suffit d'utiliser <abbr> sans attribut.

+ +

HTML

+ +
<p>
+  Nous allons voir le <abbr>HTML</abbr> qui sert à construire
+  des pages web.
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("marking_up_an_abbreviation_semantically", "100%", 80)}}

+ +

Mettre en forme des abréviations

+ +

CSS peut être utilisé pour appliquer une mise en forme particulière sur les abréviations.

+ +

HTML

+ +
<p>Avec <abbr>CSS</abbr>, on peut mettre en forme les éléments.</p>
+ +

CSS

+ +
abbr {
+  font-variant: all-small-caps;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("styling_abbreviations", "100%", 80)}}

+ +

Fournir une description

+ +

On peut ajouter un attribut title afin de fournir une description de l'abréviation ou de l'acronyme.

+ +

HTML

+ +
<p>Et là je lui ai répondu <abbr title="Laugh Out Loud">LOL</abbr>.</p>
+ +

Résultat

+ +

{{EmbedLiveSample("providing_an_expansion", "100%", 80)}}

+ +

Définir une abréviation

+ +

Il est possible d'utiliser l'élément <abbr> avec <dfn> afin de formellement définir une abréviation.

+ +

HTML

+ +
<p><dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr>
+</dfn> est un langage de balise qui permet de créer la structure
+et d'organiser la sémantique d'une page web.</p>
+
+<p>Une <dfn id="spec">spécification</dfn>
+(<abbr title="spécification">spec</abbr>) est un document qui décrit,
+de façon détaillée comme une technologie ou une API fonctionne et comment
+l'utiliser.</p>
+ +

Résultat

+ +

{{EmbedLiveSample("defining_an_abbreviation", "100%", 160)}}

+ +

Accessibilité

+ +

C'est une bonne pratique que d'épeler l'acronyme ou l'abréviation lorsqu'elle est utilisée pour la première fois. Cela permet au lecteur de mieux comprendre le terme, notamment si celui-ci est technique ou appartient à un jargon spécifique.

+ +

Exemple

+ +
<p>JavaScript Object Notation (<abbr>JSON</abbr>) est un format léger
+  d'échange de données.</p>
+
+ +

Cela peut servir aux personnes qui découvrent ces concepts pour la première fois ou pour les personnes souffrant de troubles cognitifs.

+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/element/acronym/index.html b/files/fr/web/html/element/acronym/index.html deleted file mode 100644 index 68ac02fa39..0000000000 --- a/files/fr/web/html/element/acronym/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: " : l'élément d'acronyme" -slug: Web/HTML/Element/acronym -tags: - - Element - - HTML - - HTML:Flow content - - Deprecated - - Reference - - Web -translation_of: Web/HTML/Element/acronym -browser-compat: html.elements.acronym ---- -
{{HTMLRef}}
- -
-

Attention : Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

-
- -

L'élément HTML <acronym>, pour les acronymes, permet aux auteurs de pages d'indiquer une suite de caractères composant un acronyme ou l'abréviation d'un mot.

- -
-

Note :Cet élément n'existe plus en HTML5 et ne devrait plus être utilisé. Les développeuses et développeurs web devraient utiliser l'élément <abbr> à la place.

-
- -

Attributs

- -

Cet élément n'a pas d'autres attributs que les attributs universels, communs à tous les éléments.

- -

Interface DOM

- -

Cet élément implémente l'interface HTMLElement.

- -
-

Note :Jusqu'à Gecko 1.9.2 (inclus), Firefox implémente l'interface HTMLSpanElement pour cet élément.

-
- -

Exemple

- -
<p>
-   Le <acronym title="World Wide Web" lang="en">WWW</acronym>
-   n'est qu'une facette d'Internet.
-</p>
-
- -

Style par défaut

- -

Bien que le but de cette balise ne soit simplement qu'un avantage pratique pour l'auteur, son style par défaut varie selon les navigateurs :

- -
    -
  • Certains navigateurs comme Internet Explorer lui attribuent le même style qu'un élément <span>.
    • -
  • Opera, Firefox, et quelques autres ajoutent une ligne pointillée sous le contenu de l'élément.
    • -
  • Quelques navigateurs ajoutent une ligne pointillée en dessous et mettent le contenu en petites majuscules. Pour éviter ce comportement, il est possible d'ajouter font-variant: none à la feuille de style CSS.
    • -
- -

Il est donc fortement recommandé que les développeurs web ne s'attendent pas à un comportement uniforme concernant ce style par défaut.

- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/element/acronym/index.md b/files/fr/web/html/element/acronym/index.md new file mode 100644 index 0000000000..68ac02fa39 --- /dev/null +++ b/files/fr/web/html/element/acronym/index.md @@ -0,0 +1,70 @@ +--- +title: " : l'élément d'acronyme" +slug: Web/HTML/Element/acronym +tags: + - Element + - HTML + - HTML:Flow content + - Deprecated + - Reference + - Web +translation_of: Web/HTML/Element/acronym +browser-compat: html.elements.acronym +--- +
{{HTMLRef}}
+ +
+

Attention : Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

+
+ +

L'élément HTML <acronym>, pour les acronymes, permet aux auteurs de pages d'indiquer une suite de caractères composant un acronyme ou l'abréviation d'un mot.

+ +
+

Note :Cet élément n'existe plus en HTML5 et ne devrait plus être utilisé. Les développeuses et développeurs web devraient utiliser l'élément <abbr> à la place.

+
+ +

Attributs

+ +

Cet élément n'a pas d'autres attributs que les attributs universels, communs à tous les éléments.

+ +

Interface DOM

+ +

Cet élément implémente l'interface HTMLElement.

+ +
+

Note :Jusqu'à Gecko 1.9.2 (inclus), Firefox implémente l'interface HTMLSpanElement pour cet élément.

+
+ +

Exemple

+ +
<p>
+   Le <acronym title="World Wide Web" lang="en">WWW</acronym>
+   n'est qu'une facette d'Internet.
+</p>
+
+ +

Style par défaut

+ +

Bien que le but de cette balise ne soit simplement qu'un avantage pratique pour l'auteur, son style par défaut varie selon les navigateurs :

+ +
    +
  • Certains navigateurs comme Internet Explorer lui attribuent le même style qu'un élément <span>.
    • +
  • Opera, Firefox, et quelques autres ajoutent une ligne pointillée sous le contenu de l'élément.
    • +
  • Quelques navigateurs ajoutent une ligne pointillée en dessous et mettent le contenu en petites majuscules. Pour éviter ce comportement, il est possible d'ajouter font-variant: none à la feuille de style CSS.
    • +
+ +

Il est donc fortement recommandé que les développeurs web ne s'attendent pas à un comportement uniforme concernant ce style par défaut.

+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/element/address/index.html b/files/fr/web/html/element/address/index.html deleted file mode 100644 index 45ca70e4b9..0000000000 --- a/files/fr/web/html/element/address/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: '
: l''élément d''adresse de contact' -slug: Web/HTML/Element/address -tags: - - Address - - Author - - Contact - - Contact Information - - Element - - Email - - Email Address - - HTML - - HTML sections - - HTML:Flow content - - HTML:Palpable Content - - Reference - - Web -translation_of: Web/HTML/Element/address -browser-compat: html.elements.address ---- -
{{HTMLRef}}
- -

L'élément HTML <address> indique des informations de contact pour une personne, un groupe de personnes ou une organisation.

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

L'information de contact fournie via cet élément peut prendre n'importe quelle forme pertinente : ce peut être une adresse physique, une URL, une adresse électronique, un numéro de téléphone, des coordonnées géographiques, etc. Ces informations devraient contenir le nom de la personne, du groupe de personne ou de l'organisation à laquelle le contact fait référence.

- -

Cet élément peut être employé dans un élément <article> pour indiquer la personne qui écrit l'article ou être utilisé dans l'en-tête de la page pour fournir une adresse d'entreprise.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Catégories de contenuContenu de flux, contenu tangible.
Contenu autoriséContenu de flux, mais sans élément <address> inclus, sans contenu de titre (<hgroup>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>), sans contenu de section (<article>, <aside>, <section>, <nav>), et sans <header> ou élément <footer>.
Omission de balisesAucune, la balise d'ouverture et la balise de fermeture sont obligatoires.
Parents autorisésTout élément qui accepte un contenu de flux mais pas d'éléments <address>.
Rôle ARIA impliciteAucun rôle correspondant
Rôles ARIA autorisésAucun.
Interface DOMHTMLElement. Avant Gecko 2.0 (Firefox 4), Gecko implémentait cet élément en utilisant l'interface HTMLSpanElement.
- -

Attributs

- -

Cet élément n'a pas d'autres attributs que les attributs universels, communs à tous les éléments.

- -

Notes d'utilisation

- -
    -
  • Pour représenter une adresse arbitraire, qui n'est pas relative à l'information de contact, on utilisera l'élément <p> plutôt que l'élément <address>.
    • -
  • Cet élément ne doit pas contenir plus d'informations que l'information de contact, par exemple une date de publication (qui appartiendrait à l'élément <time>).
    • -
  • Typiquement un élément <address> peut être placé dans l'élément <footer> de la section courante, s'il y en a une.
    • -
- -

Exemple

- -
<address>
-  Vous pouvez contacter l'auteur à l'adresse
-  <a href="http://www.undomaine.com/contact">www.undomaine.com</a>.<br>
-  Si vous relevez quelques bogues que ce soient, merci de contacter
-  <a href="mailto:webmaster@somedomain.com">le webmaster</a>.<br>
-  Vous pouvez aussi venir nous voir :<br>
-  Mozilla Foundation<br>
-  1981 Landings Drive<br>
-  Building K<br>
-  Mountain View, CA 94043-0801<br>
-  USA
-</address>
-
- -

Résultat

- -

{{EmbedLiveSample("example", "100%", 190)}}

- -

Bien que le rendu par défaut du texte de l'élément <address> utilise le même style par défaut que les éléments <i> ou <em>, il est plus approprié d'utiliser cet élément lorsque l'on traite d'informations de contact, étant donné qu'il apporte des informations sémantiques supplémentaires.

- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/element/address/index.md b/files/fr/web/html/element/address/index.md new file mode 100644 index 0000000000..45ca70e4b9 --- /dev/null +++ b/files/fr/web/html/element/address/index.md @@ -0,0 +1,111 @@ +--- +title: '
: l''élément d''adresse de contact' +slug: Web/HTML/Element/address +tags: + - Address + - Author + - Contact + - Contact Information + - Element + - Email + - Email Address + - HTML + - HTML sections + - HTML:Flow content + - HTML:Palpable Content + - Reference + - Web +translation_of: Web/HTML/Element/address +browser-compat: html.elements.address +--- +
{{HTMLRef}}
+ +

L'élément HTML <address> indique des informations de contact pour une personne, un groupe de personnes ou une organisation.

+ +
{{EmbedInteractiveExample("pages/tabbed/address.html", "tabbed-standard")}}
+ +

L'information de contact fournie via cet élément peut prendre n'importe quelle forme pertinente : ce peut être une adresse physique, une URL, une adresse électronique, un numéro de téléphone, des coordonnées géographiques, etc. Ces informations devraient contenir le nom de la personne, du groupe de personne ou de l'organisation à laquelle le contact fait référence.

+ +

Cet élément peut être employé dans un élément <article> pour indiquer la personne qui écrit l'article ou être utilisé dans l'en-tête de la page pour fournir une adresse d'entreprise.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Catégories de contenuContenu de flux, contenu tangible.
Contenu autoriséContenu de flux, mais sans élément <address> inclus, sans contenu de titre (<hgroup>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>), sans contenu de section (<article>, <aside>, <section>, <nav>), et sans <header> ou élément <footer>.
Omission de balisesAucune, la balise d'ouverture et la balise de fermeture sont obligatoires.
Parents autorisésTout élément qui accepte un contenu de flux mais pas d'éléments <address>.
Rôle ARIA impliciteAucun rôle correspondant
Rôles ARIA autorisésAucun.
Interface DOMHTMLElement. Avant Gecko 2.0 (Firefox 4), Gecko implémentait cet élément en utilisant l'interface HTMLSpanElement.
+ +

Attributs

+ +

Cet élément n'a pas d'autres attributs que les attributs universels, communs à tous les éléments.

+ +

Notes d'utilisation

+ +
    +
  • Pour représenter une adresse arbitraire, qui n'est pas relative à l'information de contact, on utilisera l'élément <p> plutôt que l'élément <address>.
    • +
  • Cet élément ne doit pas contenir plus d'informations que l'information de contact, par exemple une date de publication (qui appartiendrait à l'élément <time>).
    • +
  • Typiquement un élément <address> peut être placé dans l'élément <footer> de la section courante, s'il y en a une.
    • +
+ +

Exemple

+ +
<address>
+  Vous pouvez contacter l'auteur à l'adresse
+  <a href="http://www.undomaine.com/contact">www.undomaine.com</a>.<br>
+  Si vous relevez quelques bogues que ce soient, merci de contacter
+  <a href="mailto:webmaster@somedomain.com">le webmaster</a>.<br>
+  Vous pouvez aussi venir nous voir :<br>
+  Mozilla Foundation<br>
+  1981 Landings Drive<br>
+  Building K<br>
+  Mountain View, CA 94043-0801<br>
+  USA
+</address>
+
+ +

Résultat

+ +

{{EmbedLiveSample("example", "100%", 190)}}

+ +

Bien que le rendu par défaut du texte de l'élément <address> utilise le même style par défaut que les éléments <i> ou <em>, il est plus approprié d'utiliser cet élément lorsque l'on traite d'informations de contact, étant donné qu'il apporte des informations sémantiques supplémentaires.

+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/element/applet/index.html b/files/fr/web/html/element/applet/index.html deleted file mode 100644 index fd69f43973..0000000000 --- a/files/fr/web/html/element/applet/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: " : l'élément d'applet Java embarqué" -slug: Web/HTML/Element/applet -tags: - - Element - - HTML - - Java - - Deprecated - - Reference - - Web - - applet -translation_of: Web/HTML/Element/applet ---- -
{{HTMLRef}}
- -
-

Attention : Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

-
- -
-

Attention : Cet élément a été retiré à partir de Gecko 56, de Chrome 47 et le retrait est à l'étude pour WebKit et Edge.

-
- -

L'élément <applet>, pour les applets, définit l'intégration d'un applet Java. Cet élément est désormais déprécié en faveur de <object>.

- -

L'utilisation d'applets Java sur le Web est dépréciée, la plupart des navigateurs ne prennent plus en charge les plugins Java.

- - - - - - - - - - - - - - - - - - - - - - - - -
Catégories de contenuContenu de flux, contenu phrasé, contenu intégré, contenu interactif, contenu tangible.
Contenu autoriséZéro ou plusieurs <param> suivi d'un contenu transparent.
Omission de balisesAucune, la balise d'ouverture et la balise de fermeture sont obligatoires.
Parents autorisésTout élément qui accepte du contenu intégré.
Interface DOMHTMLAppletElement (supprimé)
- -

Attributs

- -

Cet élément peut utiliser les attributs universels.

- -
-
align {{deprecated_inline}}
-
Cet attribut est utilisé pour positionner l'applet sur la page en fonction du contenu qui l'entoure. La spécification HTML 4.01 définit l'utilisation des valeurs bottom (en bas), left (à gauche), middle (au milieu), right (à droite), et top (en haut), tandis que Microsoft et Netscape supporteraient également les valeurs absbottom, absmiddle, baseline, center, et texttop.
-
alt {{deprecated_inline}}
-
Cet attribut génère un texte alternatif à afficher pour les navigateurs ne supportant pas Java. Il est à noter que le contenu de l'élément <applet> peut être également restitué comme du texte alternatif dans certains cas.
-
archive {{deprecated_inline}}
-
Cet attribut fait référence à une version archivée ou compressée de l'applet et des fichiers classes associés, ce qui peut aider à réduire le temps de téléchargement.
-
code {{deprecated_inline}}
-
Cet attribut définit l'URL du fichier classe de l'applet qui doit être chargé et exécuté. Les noms de fichiers pour les applets sont définis avec une extension en .class. L'URL définie par cet attribut peut être relative par rapport à l'attribut codebase.
-
codebase {{deprecated_inline}}
-
Cet attribut donne une URL absolue ou relative du répertoire où les fichiers classes de l'applet (déclarés dans l'attribut code) doivent être placés.
-
datafld {{deprecated_inline}}
-
Cet attribut, supporté par Internet Explorer à partir de sa version 4, définit le nom de colonne attribué aux objets de données fournis par les données attachées. Cet attribut peut être utilisé pour définir les différents éléments <param> envoyés à l'applet Java.
-
datasrc {{deprecated_inline}}
-
Comme l'attribut datafld, cet attribut est utilisé pour les données attachées sous Internet Explorer 4. Il indique un identifiant pour l'objet définissant la source des données qui seront attachées aux éléments <param> associés à l'applet.
-
height {{deprecated_inline}}
-
Cet attribut définit la hauteur dont l'applet à besoin, en pixels.
-
hspace {{deprecated_inline}}
-
Cet attribut définit l'espace horizontal supplémentaire qui doit être réservé à côté de l'applet, en pixels.
-
mayscript {{deprecated_inline}}
-
Cet attribut, concerné par l'implémentation effectuée dans Netscape, permet l'accès à l'applet par les scripts contenus dans le document.
-
name {{deprecated_inline}}
-
Cet attribut donne un nom à l'applet afin qu'elle soit possiblement identifiée par d'autres ressources, notamment les scripts.
-
object {{deprecated_inline}}
-
Cet attribut définit l'URL d'une représentation de l'applet.
-
src {{deprecated_inline}}
-
Dans Internet Explorer 4 et ses versions ultérieures, cet attribut définit une URL pour le fichier associé à l'applet. La signification de cet attribut n'est pas claire et ne fait pas partie du standard HTML.
-
vspace {{deprecated_inline}}
-
Cet attribut définit l'espace supplémentaire qui doit être réservé en haut et en bas de l'applet, en pixels.
-
width {{deprecated_inline}}
-
Cet attribut définit la largeur, en pixels, dont l'applet a besoin
-
- -

Exemple

- -

HTML

- -
<applet code="game.class" align="left" archive="game.zip" height="250" width="350">
-  <param name="difficulte" value="facile">
-  <b>Vous avez besoin de Java pour activer cela.</b>
-</applet>
-
- -

Résultat

- -

{{EmbedLiveSample("example","100%", 30)}}

- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Notes

- -

La spécification W3C désapprouve l'utilisation de l'élément <applet> et conseille l'utilisation de l'élément <object>. Pour HTML 4.01 cet élément est déprécié et est devenu entièrement obsolète sous HTML5.

diff --git a/files/fr/web/html/element/applet/index.md b/files/fr/web/html/element/applet/index.md new file mode 100644 index 0000000000..fd69f43973 --- /dev/null +++ b/files/fr/web/html/element/applet/index.md @@ -0,0 +1,114 @@ +--- +title: " : l'élément d'applet Java embarqué" +slug: Web/HTML/Element/applet +tags: + - Element + - HTML + - Java + - Deprecated + - Reference + - Web + - applet +translation_of: Web/HTML/Element/applet +--- +
{{HTMLRef}}
+ +
+

Attention : Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

+
+ +
+

Attention : Cet élément a été retiré à partir de Gecko 56, de Chrome 47 et le retrait est à l'étude pour WebKit et Edge.

+
+ +

L'élément <applet>, pour les applets, définit l'intégration d'un applet Java. Cet élément est désormais déprécié en faveur de <object>.

+ +

L'utilisation d'applets Java sur le Web est dépréciée, la plupart des navigateurs ne prennent plus en charge les plugins Java.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Catégories de contenuContenu de flux, contenu phrasé, contenu intégré, contenu interactif, contenu tangible.
Contenu autoriséZéro ou plusieurs <param> suivi d'un contenu transparent.
Omission de balisesAucune, la balise d'ouverture et la balise de fermeture sont obligatoires.
Parents autorisésTout élément qui accepte du contenu intégré.
Interface DOMHTMLAppletElement (supprimé)
+ +

Attributs

+ +

Cet élément peut utiliser les attributs universels.

+ +
+
align {{deprecated_inline}}
+
Cet attribut est utilisé pour positionner l'applet sur la page en fonction du contenu qui l'entoure. La spécification HTML 4.01 définit l'utilisation des valeurs bottom (en bas), left (à gauche), middle (au milieu), right (à droite), et top (en haut), tandis que Microsoft et Netscape supporteraient également les valeurs absbottom, absmiddle, baseline, center, et texttop.
+
alt {{deprecated_inline}}
+
Cet attribut génère un texte alternatif à afficher pour les navigateurs ne supportant pas Java. Il est à noter que le contenu de l'élément <applet> peut être également restitué comme du texte alternatif dans certains cas.
+
archive {{deprecated_inline}}
+
Cet attribut fait référence à une version archivée ou compressée de l'applet et des fichiers classes associés, ce qui peut aider à réduire le temps de téléchargement.
+
code {{deprecated_inline}}
+
Cet attribut définit l'URL du fichier classe de l'applet qui doit être chargé et exécuté. Les noms de fichiers pour les applets sont définis avec une extension en .class. L'URL définie par cet attribut peut être relative par rapport à l'attribut codebase.
+
codebase {{deprecated_inline}}
+
Cet attribut donne une URL absolue ou relative du répertoire où les fichiers classes de l'applet (déclarés dans l'attribut code) doivent être placés.
+
datafld {{deprecated_inline}}
+
Cet attribut, supporté par Internet Explorer à partir de sa version 4, définit le nom de colonne attribué aux objets de données fournis par les données attachées. Cet attribut peut être utilisé pour définir les différents éléments <param> envoyés à l'applet Java.
+
datasrc {{deprecated_inline}}
+
Comme l'attribut datafld, cet attribut est utilisé pour les données attachées sous Internet Explorer 4. Il indique un identifiant pour l'objet définissant la source des données qui seront attachées aux éléments <param> associés à l'applet.
+
height {{deprecated_inline}}
+
Cet attribut définit la hauteur dont l'applet à besoin, en pixels.
+
hspace {{deprecated_inline}}
+
Cet attribut définit l'espace horizontal supplémentaire qui doit être réservé à côté de l'applet, en pixels.
+
mayscript {{deprecated_inline}}
+
Cet attribut, concerné par l'implémentation effectuée dans Netscape, permet l'accès à l'applet par les scripts contenus dans le document.
+
name {{deprecated_inline}}
+
Cet attribut donne un nom à l'applet afin qu'elle soit possiblement identifiée par d'autres ressources, notamment les scripts.
+
object {{deprecated_inline}}
+
Cet attribut définit l'URL d'une représentation de l'applet.
+
src {{deprecated_inline}}
+
Dans Internet Explorer 4 et ses versions ultérieures, cet attribut définit une URL pour le fichier associé à l'applet. La signification de cet attribut n'est pas claire et ne fait pas partie du standard HTML.
+
vspace {{deprecated_inline}}
+
Cet attribut définit l'espace supplémentaire qui doit être réservé en haut et en bas de l'applet, en pixels.
+
width {{deprecated_inline}}
+
Cet attribut définit la largeur, en pixels, dont l'applet a besoin
+
+ +

Exemple

+ +

HTML

+ +
<applet code="game.class" align="left" archive="game.zip" height="250" width="350">
+  <param name="difficulte" value="facile">
+  <b>Vous avez besoin de Java pour activer cela.</b>
+</applet>
+
+ +

Résultat

+ +

{{EmbedLiveSample("example","100%", 30)}}

+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Notes

+ +

La spécification W3C désapprouve l'utilisation de l'élément <applet> et conseille l'utilisation de l'élément <object>. Pour HTML 4.01 cet élément est déprécié et est devenu entièrement obsolète sous HTML5.

diff --git a/files/fr/web/html/element/area/index.html b/files/fr/web/html/element/area/index.html deleted file mode 100644 index 2061200c14..0000000000 --- a/files/fr/web/html/element/area/index.html +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: ' : l''élément de zone' -slug: Web/HTML/Element/area -tags: - - Content - - Element - - HTML - - HTML:Flow content - - HTML:Phrasing content - - Multimedia - - Reference - - Web -translation_of: Web/HTML/Element/area -browser-compat: html.elements.area ---- -
{{HTMLRef}}
- -

L'élément HTML <area> définit une zone particulière d'une image et peut lui associer un lien hypertexte. Cet élément n'est utilisé qu'au sein d'un élément <map>.

- -
{{EmbedInteractiveExample("pages/tabbed/area.html", "tabbed-taller")}}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Catégories de contenuContenu de flux, contenu phrasé
Contenu autoriséAucun, cet élément est un élément vide.
Omission de balisesAucune, la balise d'ouverture et la balise de fermeture sont obligatoires.
Parents autorisésTout élément acceptant du contenu phrasé. L'élément <area> doit avoir un élément <map> parmi ses ancêtres mais ce dernier n'a pas besoin d'être son parent direct.
Rôle ARIA implicitelink lorsque l'attribut href est présent, sinon aucun rôle correspondant.
Rôles ARIA autorisésAucun.
Interface DOMHTMLAreaElement
- -

Attributs

- -

Cet élément inclut les attributs universels.

- -
-
alt
-
Une chaîne de texte alternative à afficher sur les navigateurs qui n'affichent pas les images. Le texte doit être formulé de manière à offrir à l'utilisateur le même type de choix que l'image lorsqu'elle est affichée sans le texte alternatif. Cet attribut est requis uniquement si l'attribut href est utilisé.
-
coords
-
L'attribut coords détaille les coordonnées de l'attribut shape en taille, forme et placement d'un élément <area>. -
    -
  • rect : la valeur est x1,y1,x2,y2. La valeur spécifie les coordonnées du coin supérieur gauche et inférieur droit du rectangle. -

    Par exemple : <area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="Mozilla"> Les coordonnées dans l'exemple ci-dessus spécifient : 0,0 comme le coin supérieur gauche et 253,27 comme le coin inférieur droit du rectangle.

    -
    • -
  • cercle : la valeur est x,y,radius. La valeur spécifie les coordonnées du centre du cercle et du rayon. -

    Par exemple : <area shape="circle" coords="130,136,60" href="#" target="_blank" alt="MDN">.

    -
    • -
  • poly : la valeur est x1,y1,x2,y2,...,xn,yn. La valeur spécifie les coordonnées des bords du polygone. Si la première et la dernière paire de coordonnées ne sont pas les mêmes, le navigateur ajoutera la dernière paire de coordonnées pour fermer le polygone.
    • -
  • default : définit la région entière.
    • -
- Les valeurs sont exprimées en nombre de pixels CSS.
-
download
-
Cet attribut, s'il est présent, indique que l'auteur souhaite que l'hyperlien soit utilisé pour télécharger une ressource. Voir <a> pour une description complète de l'attribut download.
-
href
-
Le lien hypertexte porté par la zone d'intérêt. Ce doit être une URL valide. Cet attribut peut être absent et dans ce cas, la zone d'intérêt ne représente pas de lien hypertexte.
-
hreflang
-
Cet attribut indique la langue du contenu vers lequel le lien renvoie. Les valeurs autorisées pour cet attribut sont définies par BCP47. Cet attribut doit uniquement être utilisé lorsque href est présent.
-
ping
-
Cet attribut contient une liste d'URL séparées par des espaces vers lesquelles sont envoyées des requêtes HTTP POST dont le corps vaut PING lors du clic sur le lien. Les requêtes sont envoyées en arrière-plan. Cet attribut est généralement utilisé à des fins de pistage.
-
referrerpolicy {{experimental_inline}}
-
Une chaîne de caractères qui indique le référent (referrer) à utiliser lors de la récupération de la ressource : -
    -
  • « no-referrer » indique que l'en-tête Referer ne sera pas envoyé.
    • -
  • « no-referrer-when-downgrade » indique que l'en-tête Referer ne sera pas envoyé lorsque l'utilisateur navigue depuis une origine sans TLS/HTTPS. C'est le comportement par défaut de l'agent utilisateur si aucune autre politique n'est spécifiée.
    • -
  • « origin » indique que le référent sera l'origine de la page (ce qui correspond au schéma utilisé, à l'hôte et au port).
    • -
  • « origin-when-cross-origin » indique que lorsqu'on navigue sur d'autres origines, seule l'origine du document sera envoyée. Lorsqu'on navigue sur la même origine, le chemin de la ressource sera inclus dans le référent.
    • -
  • « unsafe-url » indique que le référent envoyé inclura l'origine et le chemin (mais pas le fragment, le mot de passe ou le nom d'utilisateur). Ce cas n'est pas considéré comme sûr, car il peut laisser fuiter des origines et des chemins de ressources protégées par TLS vers des origines non-sécurisées.
    • -
-
-
rel
-
Pour les ancres contenant l'attribut href, cet attribut définit la relation entre l'objet ciblé et l'objet lié. La valeur est une liste des différentes relations dont les valeurs sont séparées par des espaces. Les valeurs et leurs significations peuvent être enregistrées par une autorité jugée utile par l'auteur du document. La valeur par défaut est la relation vide. Cet attribut doit uniquement être utilisé si l'attribut href est présent.
-
shape
-
La forme de la zone d'intérêt. Les spécifications HTML5 et HTML4 définissent les valeurs rect (zone rectangulaire), circle (zone circulaire), poly (zone polygonale) et default (indiquant toute la zone). Beacuoup de navigateurs, comme Internet Explorer 4 et ultérieur, supportent les valeurs circ, polygon et rectangle pour l'attribut shape, mais ces valeurs ne sont pas standard.
-
target
-
Cet attribut dans quel contexte de navigation afficher la ressource liée. Les mots-clés peuvent avoir les significations suivantes : -
    -
  • _self (valeur par défaut) : Charge la réponse dans le contexte de navigation actuel.
    • -
  • _blank : Charge la réponse dans un nouveau contexte de navigation (sans nom).
    • -
  • _parent : Charge la réponse dans le contexte de navigation parent. Si la page courante n'est pas incluse via une frame, cette valeur agit comme _self.
    • -
  • _top : Charge la réponse dans le contexte de navigation avec le plus haut niveau (autrement dit l'ancêtre du contexte actuel qui n'a pas de parent). Si le contexte actuel n'a pas de parent alors cette valeur aura le même effet que la valeur _self.
    • -
- -

Cet attribut doit uniquement être utilisé si l'attribut href est présent.

-
-

Note :La définition de target="_blank" sur les éléments <area> fournit implicitement le même comportement rel que la définition de rel="noopener" qui ne définit pas window.opener. Voir la compatibilité des navigateurs pour les informations sur son support.

-
-
-
- -

Attributs dépréciés ou obsolètes

- -
-
name {{deprecated_inline}}
-
Définit un nom pour la zone sur laquelle on peut cliquer afin que cet élément puisse être interprété par les navigateurs plus anciens.
-
nohref {{deprecated_inline}}
-
Indique une absence d'hyperlien pour la zone d'intérêt. Cet attribut doit être présent si href ne l'est pas et vice versa. -
-

Note :Cet attribut est obsolète en HTML5, ne pas utiliser l'attribut href suffit.

-
-
-
tabindex {{deprecated_inline}}
-
Une valeur numérique définissant l'ordre de la zone d'intérêt parmi les différentes étiquettes. Cet attribut est un attribut universel avec HTML5.
-
type {{deprecated_inline}}
-
Sans effet car ignoré par les navigateurs.
-
- -

Exemple

- -

Dans cet exemple, la partie gauche est un lien vers une page et la partie droite est inactive.

- -
<map name="exemple-map-1">
-  <area shape="rect" coords="0,0 200,200" href="https://developer.mozilla.org" target="_blank" alt="Page d'accueil MDN" />
-  <area shape="default" />
-</map>
-<img usemap="#exemple-map-1" src="https://via.placeholder.com/350x150">
-
- -

Résultat

- -

{{EmbedLiveSample("example", "100%", "230")}}

- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

diff --git a/files/fr/web/html/element/area/index.md b/files/fr/web/html/element/area/index.md new file mode 100644 index 0000000000..2061200c14 --- /dev/null +++ b/files/fr/web/html/element/area/index.md @@ -0,0 +1,151 @@ +--- +title: ' : l''élément de zone' +slug: Web/HTML/Element/area +tags: + - Content + - Element + - HTML + - HTML:Flow content + - HTML:Phrasing content + - Multimedia + - Reference + - Web +translation_of: Web/HTML/Element/area +browser-compat: html.elements.area +--- +
{{HTMLRef}}
+ +

L'élément HTML <area> définit une zone particulière d'une image et peut lui associer un lien hypertexte. Cet élément n'est utilisé qu'au sein d'un élément <map>.

+ +
{{EmbedInteractiveExample("pages/tabbed/area.html", "tabbed-taller")}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Catégories de contenuContenu de flux, contenu phrasé
Contenu autoriséAucun, cet élément est un élément vide.
Omission de balisesAucune, la balise d'ouverture et la balise de fermeture sont obligatoires.
Parents autorisésTout élément acceptant du contenu phrasé. L'élément <area> doit avoir un élément <map> parmi ses ancêtres mais ce dernier n'a pas besoin d'être son parent direct.
Rôle ARIA implicitelink lorsque l'attribut href est présent, sinon aucun rôle correspondant.
Rôles ARIA autorisésAucun.
Interface DOMHTMLAreaElement
+ +

Attributs

+ +

Cet élément inclut les attributs universels.

+ +
+
alt
+
Une chaîne de texte alternative à afficher sur les navigateurs qui n'affichent pas les images. Le texte doit être formulé de manière à offrir à l'utilisateur le même type de choix que l'image lorsqu'elle est affichée sans le texte alternatif. Cet attribut est requis uniquement si l'attribut href est utilisé.
+
coords
+
L'attribut coords détaille les coordonnées de l'attribut shape en taille, forme et placement d'un élément <area>. +
    +
  • rect : la valeur est x1,y1,x2,y2. La valeur spécifie les coordonnées du coin supérieur gauche et inférieur droit du rectangle. +

    Par exemple : <area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="Mozilla"> Les coordonnées dans l'exemple ci-dessus spécifient : 0,0 comme le coin supérieur gauche et 253,27 comme le coin inférieur droit du rectangle.

    +
    • +
  • cercle : la valeur est x,y,radius. La valeur spécifie les coordonnées du centre du cercle et du rayon. +

    Par exemple : <area shape="circle" coords="130,136,60" href="#" target="_blank" alt="MDN">.

    +
    • +
  • poly : la valeur est x1,y1,x2,y2,...,xn,yn. La valeur spécifie les coordonnées des bords du polygone. Si la première et la dernière paire de coordonnées ne sont pas les mêmes, le navigateur ajoutera la dernière paire de coordonnées pour fermer le polygone.
    • +
  • default : définit la région entière.
    • +
+ Les valeurs sont exprimées en nombre de pixels CSS.
+
download
+
Cet attribut, s'il est présent, indique que l'auteur souhaite que l'hyperlien soit utilisé pour télécharger une ressource. Voir <a> pour une description complète de l'attribut download.
+
href
+
Le lien hypertexte porté par la zone d'intérêt. Ce doit être une URL valide. Cet attribut peut être absent et dans ce cas, la zone d'intérêt ne représente pas de lien hypertexte.
+
hreflang
+
Cet attribut indique la langue du contenu vers lequel le lien renvoie. Les valeurs autorisées pour cet attribut sont définies par BCP47. Cet attribut doit uniquement être utilisé lorsque href est présent.
+
ping
+
Cet attribut contient une liste d'URL séparées par des espaces vers lesquelles sont envoyées des requêtes HTTP POST dont le corps vaut PING lors du clic sur le lien. Les requêtes sont envoyées en arrière-plan. Cet attribut est généralement utilisé à des fins de pistage.
+
referrerpolicy {{experimental_inline}}
+
Une chaîne de caractères qui indique le référent (referrer) à utiliser lors de la récupération de la ressource : +
    +
  • « no-referrer » indique que l'en-tête Referer ne sera pas envoyé.
    • +
  • « no-referrer-when-downgrade » indique que l'en-tête Referer ne sera pas envoyé lorsque l'utilisateur navigue depuis une origine sans TLS/HTTPS. C'est le comportement par défaut de l'agent utilisateur si aucune autre politique n'est spécifiée.
    • +
  • « origin » indique que le référent sera l'origine de la page (ce qui correspond au schéma utilisé, à l'hôte et au port).
    • +
  • « origin-when-cross-origin » indique que lorsqu'on navigue sur d'autres origines, seule l'origine du document sera envoyée. Lorsqu'on navigue sur la même origine, le chemin de la ressource sera inclus dans le référent.
    • +
  • « unsafe-url » indique que le référent envoyé inclura l'origine et le chemin (mais pas le fragment, le mot de passe ou le nom d'utilisateur). Ce cas n'est pas considéré comme sûr, car il peut laisser fuiter des origines et des chemins de ressources protégées par TLS vers des origines non-sécurisées.
    • +
+
+
rel
+
Pour les ancres contenant l'attribut href, cet attribut définit la relation entre l'objet ciblé et l'objet lié. La valeur est une liste des différentes relations dont les valeurs sont séparées par des espaces. Les valeurs et leurs significations peuvent être enregistrées par une autorité jugée utile par l'auteur du document. La valeur par défaut est la relation vide. Cet attribut doit uniquement être utilisé si l'attribut href est présent.
+
shape
+
La forme de la zone d'intérêt. Les spécifications HTML5 et HTML4 définissent les valeurs rect (zone rectangulaire), circle (zone circulaire), poly (zone polygonale) et default (indiquant toute la zone). Beacuoup de navigateurs, comme Internet Explorer 4 et ultérieur, supportent les valeurs circ, polygon et rectangle pour l'attribut shape, mais ces valeurs ne sont pas standard.
+
target
+
Cet attribut dans quel contexte de navigation afficher la ressource liée. Les mots-clés peuvent avoir les significations suivantes : +
    +
  • _self (valeur par défaut) : Charge la réponse dans le contexte de navigation actuel.
    • +
  • _blank : Charge la réponse dans un nouveau contexte de navigation (sans nom).
    • +
  • _parent : Charge la réponse dans le contexte de navigation parent. Si la page courante n'est pas incluse via une frame, cette valeur agit comme _self.
    • +
  • _top : Charge la réponse dans le contexte de navigation avec le plus haut niveau (autrement dit l'ancêtre du contexte actuel qui n'a pas de parent). Si le contexte actuel n'a pas de parent alors cette valeur aura le même effet que la valeur _self.
    • +
+ +

Cet attribut doit uniquement être utilisé si l'attribut href est présent.

+
+

Note :La définition de target="_blank" sur les éléments <area> fournit implicitement le même comportement rel que la définition de rel="noopener" qui ne définit pas window.opener. Voir la compatibilité des navigateurs pour les informations sur son support.

+
+
+
+ +

Attributs dépréciés ou obsolètes

+ +
+
name {{deprecated_inline}}
+
Définit un nom pour la zone sur laquelle on peut cliquer afin que cet élément puisse être interprété par les navigateurs plus anciens.
+
nohref {{deprecated_inline}}
+
Indique une absence d'hyperlien pour la zone d'intérêt. Cet attribut doit être présent si href ne l'est pas et vice versa. +
+

Note :Cet attribut est obsolète en HTML5, ne pas utiliser l'attribut href suffit.

+
+
+
tabindex {{deprecated_inline}}
+
Une valeur numérique définissant l'ordre de la zone d'intérêt parmi les différentes étiquettes. Cet attribut est un attribut universel avec HTML5.
+
type {{deprecated_inline}}
+
Sans effet car ignoré par les navigateurs.
+
+ +

Exemple

+ +

Dans cet exemple, la partie gauche est un lien vers une page et la partie droite est inactive.

+ +
<map name="exemple-map-1">
+  <area shape="rect" coords="0,0 200,200" href="https://developer.mozilla.org" target="_blank" alt="Page d'accueil MDN" />
+  <area shape="default" />
+</map>
+<img usemap="#exemple-map-1" src="https://via.placeholder.com/350x150">
+
+ +

Résultat

+ +

{{EmbedLiveSample("example", "100%", "230")}}

+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

diff --git a/files/fr/web/html/element/article/index.html b/files/fr/web/html/element/article/index.html deleted file mode 100644 index ebc68dab68..0000000000 --- a/files/fr/web/html/element/article/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: '
: l''élément de contenu d''un article' -slug: Web/HTML/Element/article -tags: - - Element - - HTML - - HTML sections - - Reference - - Web -translation_of: Web/HTML/Element/article -browser-compat: html.elements.article ---- -
{{HTMLRef}}
- -

L'élément <article> représente une composition autonome dans un document, une page, une application ou un site, destinée à être distribuée ou réutilisée de manière indépendante (par exemple, dans le cadre d'une syndication). Exemples : un message de forum, un article de magazine ou de journal, ou un article de blog, une fiche produit, un commentaire soumis par un utilisateur, un widget ou gadget interactif, ou tout autre élément de contenu indépendant.

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

Un document donné peut contenir plusieurs articles ; par exemple, sur un blog qui affiche le texte de chaque article l'un après l'autre au fur et à mesure que le lecteur fait défiler, chaque message sera contenu dans un élément <article>, avec éventuellement une ou plusieurs <section> à l'intérieur.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Catégories de contenuContenu de flux, contenu de section, contenu tangible.
Contenu autoriséContenu de flux.
Omission de balisesAucune, la balise d'ouverture et la balise de fermeture sont obligatoires.
Parents autorisésTout élément acceptant du contenu de flux. Un élément <article> ne doit pas être un descendant d'un élément <address>.
Rôle ARIA implicitearticle
Rôles ARIA autorisésapplication, document, feed, main, none, presentation, region.
Interface DOMHTMLElement.
- -

Attributs

- -

Cet élément n'a pas d'autres attributs que les attributs universels, communs à tous les éléments.

- -

Notes d'utilisation

- -
    -
  • Chaque <article> autonome, qui n'est pas imbriqué dans un autre élément <article>, devrait être identifié typiquement, en incluant un élément de titre <h1> à <h6>.
    • -
  • Quand un élément <article> est imbriqué dans un autre, l'élément contenu représente un article relatif à l'élément contenant. Par exemple, les commentaires d'une parution de blog peuvent être un élément <article> inclus dans l'<article> représentant la parution en elle-même.
    • -
  • Des informations à propos de l'auteur d'un élément <article> peuvent être fournies au travers de l'élément <address>, mais cela ne s'applique pas aux éléments <article> imbriqués.
    • -
  • La date et l'heure de publication d'un élément <article> peuvent être donnés en utilisant l'attribut datetime d'un élément <time>. Notez que l'attribut pubdate de <time> ne fait plus partie de la norme W3C HTML 5.
    • -
- -

Exemple

- -
<article class="film_review">
-  <header>
-    <h2>Jurassic Park</h2>
-  </header>
-  <section class="main_review">
-    <p>Les dinosaures étaient super !</p>
-  </section>
-  <section class="user_reviews">
-    <article class="user_review">
-      <p>Beaucoup trop effrayant pour moi</p>
-      <footer>
-        <p>
-          Posté le
-          <time datetime="2015-05-16 19:00">16 mai</time>
-          par Lisa.
-        </p>
-      </footer>
-    </article>
-    <article class="user_review">
-      <p>Je suis d'accord, les dinosaures sont mes préférés</p>
-      <footer>
-        <p>
-          Posté le
-          <time datetime="2015-05-17 19:00">17 mai</time>
-          par Gilles Stella.
-        </p>
-      </footer>
-    </article>
-  </section>
-  <footer>
-    <p>
-      Posté le
-      <time datetime="2015-05-15 19:00">15 mai</time>
-      par Staff.
-    </p>
-  </footer>
-</article>
- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/element/article/index.md b/files/fr/web/html/element/article/index.md new file mode 100644 index 0000000000..ebc68dab68 --- /dev/null +++ b/files/fr/web/html/element/article/index.md @@ -0,0 +1,120 @@ +--- +title: '
: l''élément de contenu d''un article' +slug: Web/HTML/Element/article +tags: + - Element + - HTML + - HTML sections + - Reference + - Web +translation_of: Web/HTML/Element/article +browser-compat: html.elements.article +--- +
{{HTMLRef}}
+ +

L'élément <article> représente une composition autonome dans un document, une page, une application ou un site, destinée à être distribuée ou réutilisée de manière indépendante (par exemple, dans le cadre d'une syndication). Exemples : un message de forum, un article de magazine ou de journal, ou un article de blog, une fiche produit, un commentaire soumis par un utilisateur, un widget ou gadget interactif, ou tout autre élément de contenu indépendant.

+ +
{{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}}
+ +

Un document donné peut contenir plusieurs articles ; par exemple, sur un blog qui affiche le texte de chaque article l'un après l'autre au fur et à mesure que le lecteur fait défiler, chaque message sera contenu dans un élément <article>, avec éventuellement une ou plusieurs <section> à l'intérieur.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Catégories de contenuContenu de flux, contenu de section, contenu tangible.
Contenu autoriséContenu de flux.
Omission de balisesAucune, la balise d'ouverture et la balise de fermeture sont obligatoires.
Parents autorisésTout élément acceptant du contenu de flux. Un élément <article> ne doit pas être un descendant d'un élément <address>.
Rôle ARIA implicitearticle
Rôles ARIA autorisésapplication, document, feed, main, none, presentation, region.
Interface DOMHTMLElement.
+ +

Attributs

+ +

Cet élément n'a pas d'autres attributs que les attributs universels, communs à tous les éléments.

+ +

Notes d'utilisation

+ +
    +
  • Chaque <article> autonome, qui n'est pas imbriqué dans un autre élément <article>, devrait être identifié typiquement, en incluant un élément de titre <h1> à <h6>.
    • +
  • Quand un élément <article> est imbriqué dans un autre, l'élément contenu représente un article relatif à l'élément contenant. Par exemple, les commentaires d'une parution de blog peuvent être un élément <article> inclus dans l'<article> représentant la parution en elle-même.
    • +
  • Des informations à propos de l'auteur d'un élément <article> peuvent être fournies au travers de l'élément <address>, mais cela ne s'applique pas aux éléments <article> imbriqués.
    • +
  • La date et l'heure de publication d'un élément <article> peuvent être donnés en utilisant l'attribut datetime d'un élément <time>. Notez que l'attribut pubdate de <time> ne fait plus partie de la norme W3C HTML 5.
    • +
+ +

Exemple

+ +
<article class="film_review">
+  <header>
+    <h2>Jurassic Park</h2>
+  </header>
+  <section class="main_review">
+    <p>Les dinosaures étaient super !</p>
+  </section>
+  <section class="user_reviews">
+    <article class="user_review">
+      <p>Beaucoup trop effrayant pour moi</p>
+      <footer>
+        <p>
+          Posté le
+          <time datetime="2015-05-16 19:00">16 mai</time>
+          par Lisa.
+        </p>
+      </footer>
+    </article>
+    <article class="user_review">
+      <p>Je suis d'accord, les dinosaures sont mes préférés</p>
+      <footer>
+        <p>
+          Posté le
+          <time datetime="2015-05-17 19:00">17 mai</time>
+          par Gilles Stella.
+        </p>
+      </footer>
+    </article>
+  </section>
+  <footer>
+    <p>
+      Posté le
+      <time datetime="2015-05-15 19:00">15 mai</time>
+      par Staff.
+    </p>
+  </footer>
+</article>
+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/element/aside/index.html b/files/fr/web/html/element/aside/index.html deleted file mode 100644 index 07961c0af4..0000000000 --- a/files/fr/web/html/element/aside/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: '