diff options
19 files changed, 2115 insertions, 2175 deletions
diff --git a/files/fr/web/html/element/img/index.md b/files/fr/web/html/element/img/index.md index 5e52eeefc8..be4dd243dd 100644 --- a/files/fr/web/html/element/img/index.md +++ b/files/fr/web/html/element/img/index.md @@ -1,312 +1,319 @@ --- title: '<img> : l''élément d''image embarquée' slug: Web/HTML/Element/Img -tags: - - Content - - Element - - Graphics - - HTML - - HTML Graphics - - HTML Images - - HTML Photos - - HTML Pictures - - HTML embedded content - - Image - - Image Element - - Media - - Multimedia - - Photos - - Pictures - - Reference - - Web translation_of: Web/HTML/Element/img browser-compat: html.elements.img --- {{HTMLRef}} -L'élément HTML **`<img>`** intègre une image dans le document. +L'élément [HTML](/fr/docs/Web/HTML) **`<img>`** permet d'intégrer une image dans un document. {{EmbedInteractiveExample("pages/tabbed/img.html", "tabbed-standard")}} -Dans l'exemple qui précède, on utilise l'élément `<img>` simplement. +L'exemple qui précède illustre l'utilisation de l'élément `<img>` : -- L'attribut `src` est obligatoire et contient le chemin de l'image qu'on souhaite afficher. -- L'attribut `alt` contient une description textuelle de l'image, qui n'est pas obligatoire mais qui est **incroyablement utile** pour l'accessibilité — les lecteurs d'écran lisent cette description à leurs utilisateurs pour qu'ils sachent ce que signifie l'image. Le texte Alt est également affiché sur la page si l'image ne peut pas être chargée pour une raison quelconque : par exemple, erreurs de réseau, blocage du contenu ou linkrot. +- L'attribut `src` est **obligatoire**, et contient le chemin vers l'image qu'on veut intégrer. +- L'attribut `alt` contient une description textuelle de l'image, ce qui n'est pas obligatoire mais **extrêmement utile** pour l'accessibilité. En effet, les outils de lecture d'écran utilisent cette description pour la lire afin que les personnes sachent ce que l'image représente. Ce texte alternatif sera également affiché sur la page si l'image ne peut pas être chargée (par exemple s'il y a des erreurs réseau, du blocage de contenu ou un lien périmé). -Il existe d'autres attributs qui peuvent être utilisés dans différents cas. Ces attributs sont détaillés ci-après. Entre autres, on pourra utiliser : +Il existe de nombreux autres attributs : -- [Referrer](/fr/docs/Web/HTTP/Headers/Referrer-Policy)/[CORS](/fr/docs/Glossary/CORS) contrôle pour la sécurité et la confidentialité : voir [`crossorigin`](#attr-crossorigin) et [`referrerpolicy`](#attr-referrerpolicy). -- [`width`](#attr-width) et [`height`](#attr-height) pour définir la taille intrinsèque de l'image, ce qui lui permet d'occuper de l'espace avant son chargement, afin d'atténuer les décalages de présentation du contenu. -- Des indications d'images adaptatives avec [`sizes`](#attr-sizes) et [`srcset`](#attr-srcset). (voir aussi l'élément [`<picture>`](/fr/docs/Web/HTML/Element/picture) et notre [Tutoriel sur les images adaptatives](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)). +- Le contrôle du [référent](/fr/docs/Web/HTTP/Headers/Referrer-Policy) et de la politique de gestion des ressources d'origines multiples ([CORS](/fr/docs/Glossary/CORS)) avec les attributs `crossorigin` et `referrerpolicy`. +- `width` et `height` qui permettent de définir la taille intrinsèque de l'image, lui permettant ainsi de prendre l'espace nécessaire avant son chargement (évitant ainsi d'avoir des décalages indésirables lors du chargement de la page). +- Des indications <i lang="en">responsives</i> avec `sizes` et `srcset` (voir également l'élément [`<picture>`](/fr/docs/Web/HTML/Element/picture) et [le tutoriel sur les images adaptatives](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)). ## Formats d'image pris en charge -La norme HTML ne donne pas de liste des formats d'image qui doivent être pris en charge, de sorte que chaque [agent utilisateur](/fr/docs/Glossary/User_agent) prend en charge un ensemble différent de formats. +Le standard HTML n'indique pas les formats d'image qui doivent être pris en charge, les agents utilisateurs peuvent prendre en charge différents formats. -{{page("/fr/docs/Web/Media/Formats/Types_des_images", "table-of-image-file-types")}} +> **Note :** [Le guide sur les types de fichier et formats d'image](/fr/docs/Web/Media/Formats/Image_types) contient de nombreuses informations sur les formats d'image et leur prise en charge dans les navigateurs. La section qui suit n'est qu'un résumé ! -> **Note :** Voir le [Guide des types et formats de fichiers image](/fr/docs/Web/Media/Formats/Image_types) pour des informations plus complètes sur les formats d'image pris en charge par les navigateurs web. Cela inclut les formats d'image pris en charge mais non recommandés pour le contenu web (par exemple, ICO, BMP, etc.). +Les formats d'image qu'on rencontre le plus fréquemment sur le Web sont : -## Erreurs de chargement des images +- [APNG (<i lang="en">Animated Portable Network Graphics</i>)](/fr/docs/Web/Media/Formats/Image_types#apng_animated_portable_network_graphics) pour les séquences animées avec une compression sans perte (le format GIF est moins performant) +- [AVIF (<i lang="en">AV1 Image File Format</i>)](/fr/docs/Web/Media/Formats/Image_types#avif) pour les images et les images animées avec de hautes performances +- [GIF (<i lang="en">Graphics Interchange Format</i>)](/fr/docs/Web/Media/Formats/Image_types#gif_graphics_interchange_format) pour les images et animations _simples_ +- [JPEG (<i lang="en">Joint Photographic Expert Group image</i>)](/fr/docs/Web/Media/Formats/Image_types#jpeg_joint_photographic_experts_group_image) pour une compression avec pertes d'images statiques, il s'agit du format le plus utilisé +- [PNG (<i lang="en">Portable Network Graphics</i>)](/fr/docs/Web/Media/Formats/Image_types#png_portable_network_graphics) pour une compression avec pertes d'images statiques, de meilleure qualité que le JPEG +- [SVG (<i lang="en">Scalable Vector Graphics</i>)](/fr/docs/Web/Media/Formats/Image_types#svg_scalable_vector_graphics) pour un format d'image vectorielle (qui permet de dessiner une image précisément à différentes échelles) +- [WebP (<i lang="en">Web Picture format</i>)](/fr/docs/Web/Media/Formats/Image_types#webp) pour les images statiques et animées -Si une erreur se produit lors du chargement ou de l'affichage de l'image et qu'un gestionnaire d'événement [`onerror`](/fr/docs/Web/HTML/Global_attributes#attr-onerror) a été paramétré afin d'écouter l'événement [error](/fr/docs/Web/Reference/Events/error), le gestionnaire d'événement sera invoqué. Cela peut se produire lorsque : +Les formats comme [WebP](/fr/docs/Web/Media/Formats/Image_types#webp) et [AVIF](/fr/docs/Web/Media/Formats/Image_types#avif) sont recommandés, car avec de meilleures performances que PNG, JPEG, GIF tant pour les images animées que statiques. WebP dispose d'une large prise en charge tandis qu'AVIF n'est pas pris en charge par Safari. -- L'attribut [`src`](#attr-src) est vide (`""`) ou vaut `null`. -- L'[URL](/fr/docs/Glossary/URL) indiquée dans l'attribut `src` est la même URL que celle de la page sur laquelle se trouve l'utilisateur. -- L'image indiquée est corrompue et ne peut pas être chargée. -- Les métadonnées de l'image sont corrompues et il est impossible de récupérer ses dimensions et aucune dimension n'est indiquée dans les attributs de l'élément `<img>`. -- Le format de l'image n'est pas pris en charge par l'agent utilisateur. +SVG reste le format recommandé pour les images qui doivent être dessinées avec précision quelle que soit la taille. + +## Erreur de chargement d'une image + +Si une erreur se produit lors du chargement ou du rendu de l'image et qu'un gestionnaire d'évènement [`onerror`](/fr/docs/Web/HTML/Global_attributes#onerror) a été défini pour intercepter l'évènement [`error`](/fr/docs/Web/API/Element/error_event), le gestionnaire sera appelé. Cela peut arriver pour plusieurs raisons : + +- L'attribut `src` est vide (`""`) ou absent (`null` pour le DOM). +- L'URL utilisée pour l'attribut `src` est la même que celle de la page courante. +- L'image est corrompue et ne peut être chargée ainsi. +- Les métadonnées associées à l'image sont corrompues de telle façon qu'il est impossible de connaître ses dimensions et qu'aucune dimension n'a été fournie pour les attributs de l'élément `<img>`. +- Le format de l'image n'est pas pris en charge par l'agent utilisateur (généralement le navigateur). ## Attributs -Cet élément inclut les [attributs globaux](/fr/docs/Web/HTML/Global_attributes). +On peut utiliser [les attributs universels](/fr/docs/Web/HTML/Global_attributes) sur cet élément. - `alt` - - : Cet attribut définit le texte alternatif utilisé lorsqu'il est impossible d'afficher l'image (par exemple si l'URL est incorrecte ou si l'image n'est pas encore téléchargée). + - : Définit une description textuelle alternative pour l'image. - > **Note :** - > - > Les navigateurs n'affichent pas toujours les images. Il existe un certain nombre de situations dans lesquelles un navigateur peut ne pas afficher les images, par exemple : + > **Note :** Il se peut que les navigateurs n'affichent pas l'image, cela peut se produire si : > - > - Navigateurs non visuels (tels que ceux utilisés par les personnes souffrant de déficiences visuelles) - > - L'utilisateur choisit de ne pas afficher les images (économie de bande passante, raisons de confidentialité). - > - L'image n'est pas valide ou le [type n'est pas pris en charge](#supported_image_formats). + > - Le navigateur n'est pas doté d'une interface visuelle + > - La personne a configuré son navigateur pour ne pas afficher les images (afin d'économiser de la bande passante ou pour des raisons de vie privée) + > - L'image est invalide ou son format n'est pas pris en charge > - > Dans ces cas, le navigateur peut remplacer l'image par le texte de l'attribut `alt` de l'élément. Pour ces raisons et d'autres, fournissez une valeur utile pour `alt` dans la mesure du possible. + > Dans ces situations, le navigateur peut remplacer l'image avec le texte fourni par cet attribut. Aussi, il est grandement préférable de fournir une valeur utile pour `alt` dès que possible. - Omettre complètement `alt` indique que l'image est un élément clé du contenu et qu'aucun équivalent textuel n'est disponible. Définir cet attribut sur une chaîne vide (`alt=""`) indique que cette image n'est _pas_ un élément clé du contenu (il s'agit d'une décoration ou d'un pixel de suivi), et que les navigateurs non visuels peuvent l'omettre au [rendu](/fr/docs/Glossary/Rendering_engine). Les navigateurs visuels masqueront également l'icône d'image brisée si le `alt` est vide et que l'image n'a pas réussi à s'afficher. + L'absence totale d'attribut `alt` indique que l'image n'est pas importante pour le contenu et qu'aucun équivalent textuel n'est disponible. Utiliser la chaîne de caractères vide comme valeur pour cet attribut (`alt=""`) indique que cette image _n'est pas_ importante pour le contenu (par exemple une décoration ou un pixel de pistage), dans ce cas, les navigateurs non-visuels peuvent ne pas la traiter pour le rendu. Les navigateurs visuels masqueront l'icône de l'image cassée si `alt` est vide et que le chargement de l'image a échoué. - Cet attribut est également utilisé pour copier et coller l'image dans du texte, ou pour enregistrer une image liée dans un signet. + Cet attribut est également utilisé pour copier/coller l'image vers du texte ou pour enregistrer un marque-page avec l'image associée. - `crossorigin` - - : Indique si la récupération de l'image doit être effectuée à l'aide d'une requête [CORS](/fr/docs/Glossary/CORS). Les données d'image d'une [image compatible avec le système CORS](/fr/docs/Web/HTML/CORS_enabled_image) renvoyées par une requête CORS peuvent être réutilisées dans l'élément [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) sans être marquées « [corrompu](/fr/docs/Web/HTML/CORS_enabled_image#what_is_a_tainted_canvas) ». + - : Indique que la récupération de l'image doit être effectuée avec une requête CORS. Les données provenant d'une [image chargée via une requête CORS](/fr/docs/Web/HTML/CORS_enabled_image) peuvent être réutilisées dans un élément [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) sans que celui-ci soit considéré comme [corrompu (<i lang="en">tainted</i>)](/fr/docs/Web/HTML/CORS_enabled_image#canevas_corrompu_et_sécurité). - Si l'attribut `crossorigin` _n'est pas_ spécifié, une requête non-CORS est envoyée (sans l'en-tête de requête [`Origin`](/fr/docs/Web/HTTP/Headers/Origin)), et le navigateur marque l'image comme étant corrompue et restreint l'accès à ses données d'image, empêchant son utilisation dans les éléments [`<canvas>`](/fr/docs/Web/HTML/Element/canvas). + Si l'attribut `crossorigin` _n'est pas_ indiqué, une requête sans CORS sera effectuée (c'est-à -dire sans l'en-tête de requête [`Origin`](/fr/docs/Web/HTTP/Headers/Origin)) et le navigateur marquera la page comme potentiellement corrompue, empêchant d'accéder aux données de l'image et empêchant son utilisation dans les éléments [`<canvas>`](/fr/docs/Web/HTML/Element/canvas). - Si l'attribut `crossorigin` _est_ spécifié, alors une requête CORS est envoyée (avec l'en-tête de requête [`Origin`](/fr/docs/Web/HTTP/Headers/Origin)) ; mais si le serveur n'autorise pas l'accès croisé aux données de l'image par le site d'origine (en n'envoyant pas d'en-tête de réponse [`Access-Control-Allow-Origin`](/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin) ou en n'incluant pas l'origine du site dans l'en-tête de réponse [`Access-Control-Allow-Origin`](/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin) qu'il envoie), le navigateur bloque le chargement de l'image et enregistre une erreur CORS dans la console devtools. + Si l'attribut `crossorigin` _est présent_, une requête CORS est envoyée (avec l'en-tête de requête [`Origin`](/fr/docs/Web/HTTP/Headers/Origin)) ; si le serveur ne gère pas l'accès depuis les origines tierces (c'est-à -dire qu'il n'envoie aucun en-tête de réponse [`Access-Control-Allow-Origin`](/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin) ou qu'il n'inclut pas l'origine du site dans l'en-tête `Access-Control-Allow-Origin`), le navigateur bloquera le chargement de l'image et affichera une erreur CORS dans la console de développement. - Valeurs autorisées : + Les valeurs autorisées pour cet attribut sont : - `anonymous` - - : Une requête entre deux origines est effectuée (avec l'en-tête [`Origin`](/fr/docs/Web/HTTP/Headers/Origin)) mais aucune information d'authentification n'est transmise (aucun cookie, aucun certificat X.5090, aucune authentification simple par HTTP). Si le serveur ne fournit pas d'informations d'authentification pour le site d'origine (en n'utilisant pas l'en-tête HTTP [`Access-Control-Allow-Origin`](/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin)), l'image sera corrompue et son utilisation sera restreinte. + - : Une requête CORS est envoyée sans informations d'authentification (c'est-à -dire sans cookie, [certificat X.509](https://datatracker.ietf.org/doc/html/rfc5280), ou en-tête de requête [`Authorization`](/fr/docs/Web/HTTP/Headers/Authorization)). - `use-credentials` - - : Une requête entre deux origines est effectuée (avec l'en-tête [`Origin`](/fr/docs/Web/HTTP/Headers/Origin)) avec des informations d'authentification qui sont envoyées (par exemple un cookie, un certificat et une authentification HTTP). Si le serveur ne fournit pas d'informations d'authentification au site d'origine (via l'en-tête HTTP [`Access-Control-Allow-Origin`](/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin)), l'image sera corrompue et son utilisation sera restreinte. + - : La requête CORS est envoyée avec les informations d'authentification (cookies, certificat X.509 et/ou en-tête `Authorization`). Si le serveur ne permet pas le partage des informations d'authentification avec le site d'origine (avec `Access-Control-Allow-Credentials: true` comme en-tête de réponse), le navigateur marque l'image comme potentiellement corrompue et restreint l'accès à ses données. - Lorsque cet attribut est absent, la ressource est récupérée sans requête _CORS_ (c'est-à -dire sans envoyer l'en-tête HTTP [`origin`](/fr/docs/Web/HTTP/Headers/Origin)) ce qui empêche de l'utiliser dans un [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) sans qu'elle soit considérée comme corrompue. Si la valeur de l'attribut est invalide, elle sera considérée comme **`anonymous`**. Voir la page [réglage des attributs CORS](/fr/docs/Web/HTML/Attributes/crossorigin) pour plus d'informations. + Si la valeur de l'attribut est invalide, les navigateurs considèrent que la valeur `anonymous` a été utilisée. Voir [les attributs de paramétrage du CORS](/fr/docs/Web/HTML/Attributes/crossorigin) pour plus d'informations. - `decoding` - - : Cet attribut fournit une indication à l'agent utilisateur pour le décodage de l'information. Les valeurs possibles sont : + - : Fournit au navigateur une indication pour décoder l'image. Les valeurs autorisées sont : - `sync` - : L'image est décodée de façon synchrone afin d'être présentée de façon atomique avec le reste du contenu. - `async` - - : L'image est décodée de façon asynchrone afin de réduire le temps nécessaire à la présentation du reste du contenu. + - : L'image est décodée de façon asynchrone afin de réduire le temps nécessaire à l'affichage du reste du contenu. - `auto` - - : Le mode par défaut qui indique l'absence de préférence pour le mode de décodage. Dans ce cas, l'agent utilisateur décide de la meilleure stratégie. + - : La valeur par défaut qui indique qu'il n'y a pas de préférence. C'est le navigateur qui décide alors ce qui est le mieux. - `height` - - : La hauteur intrinsèque de l'image, en pixels. Doit être un nombre entier sans unité. -- `intrinsicsize` {{deprecated_inline}} - - : Cet attribut indique au navigateur d'ignorer la taille intrinsèque réelle de l'image et d'utiliser la taille fournie par les attributs. La matrice contenant l'image aurait donc ces dimensions et calculer `naturalWidth`/`naturalHeight` sur de telles images renverrait les valeurs de cet attribut. [Explications](https://github.com/ojanvafai/intrinsicsize-attribute), [exemples](https://googlechrome.github.io/samples/intrinsic-size/index.html). + - : La hauteur intrinsèque de l'image, exprimée en pixels. Cette valeur doit être un nombre entier, sans unité. + - `ismap` - - : Un attribut booléen dont la valeur indique si l'image fait partie d'une carte cliquable. Si c'est le cas, les coordonnées du clic seront envoyées au serveur. + - : Cet attribut booléen indique que l'image fait partie d'une [carte côté serveur](https://en.wikipedia.org/wiki/Image_map#Server-side). Dans ce cas, les coordonnées du clic sur l'image sont envoyés au serveur. - > **Note :** Cet attribut est uniquement autorisé si l'élément `<img>` descend d'un élément [`<a>`](/fr/docs/Web/HTML/Element/a) dont l'attribut [`href`](/fr/docs/Web/HTML/Element/a#attr-href) est valide. + > **Note :** Cet attribut est uniquement autorisé lorsque l'élément `<img>` est un descendant d'un élément [`<a>`](/fr/docs/Web/HTML/Element/a) disposant d'un attribut `href` valide. Cela fournit une alternative lorsque la navigation se fait sans dispositif de pointage. - `loading` {{experimental_inline}} - - : Indique comment le navigateur doit charger l'image : + - : Indique comment le navigateur devrait charger l'image : - - `eager` : Charge l'image immédiatement, que l'image se trouve ou non dans le viewport visible (c'est la valeur par défaut). - - `lazy` : Diffère le chargement de l'image au moment où elle atteint une certaine distance de la fenêtre de visualisation, telle que définie par le navigateur. Le but est d'éviter que le réseau et la zone de stockage nécessaires à la manipulation de l'image ne soient utilisés tant qu'il n'est pas relativement sûr que celle-ci sera nécessaire. Cela permet généralement d'améliorer les performances du contenu dans la plupart des cas d'utilisation typiques. + - `eager` + - : L'image est chargée immédiatement, que l'image soit située dans la zone d'affichage (<i lang="en">viewport</i>) visible ou non. Il s'agit de la valeur par défaut. + - `lazy` + - : Le chargement de l'image est retardé jusqu'à ce que celle-ci soit située à une certaine distance, définie par le navigateur, de la zone d'affichage. L'idée est d'éviter de consommer de la bande passante et des ressources réseaux avant d'être relativement certain que l'image est nécessaire. Pour la plupart des cas d'usage, cela permet d'améliorer les performances. - > **Note :** Le chargement n'est différé que lorsque JavaScript est activé. Il s'agit d'une mesure anti-pistage, car si un agent utilisateur prenait en charge le chargement différé lorsque les scripts sont désactivés, il serait toujours possible pour un site de suivre la position de défilement approximative d'un utilisateur tout au long d'une session, en plaçant stratégiquement des images dans le balisage d'une page de sorte qu'un serveur puisse suivre le nombre d'images demandées et le moment où elles le sont. + > **Note :** Le retardement du chargement est uniquement activé lorsque JavaScript est activé dans le navigateur. Il s'agit d'une mesure pour limiter le pistage. En effet, si les scripts sont désactivés pour le navigateur et que le chargement retardé est actif, le pistage d'un utilisateur en fonction de sa position sur la page serait toujours possible (via des images placées à intervalle régulier sur la page). -- `referrerpolicy` {{experimental_inline}} +- `referrerpolicy` - - : Une chaîne de caractères indiquant le référent à utiliser lors de la récupération de la ressource : + - : Une chaîne de caractères qui indique le référent à utiliser lors de la récupération de la ressource : - - `no-referrer` : l'en-tête HTTP [`Referer`](/fr/docs/Web/HTTP/Headers/Referer) ne sera pas envoyé. - - `no-referrer-when-downgrade` : aucun en-tête HTTP [`Referer`](/fr/docs/Web/HTTP/Headers/Referer) n'est envoyé lorsqu'on navigue vers une origine sans [HTTPS](/fr/docs/Glossary/https). Cette valeur est le comportement par défaut de l'agent utilisateur si aucune valeur n'est fournie. - - `origin` : l'en-tête HTTP [`Referer`](/fr/docs/Web/HTTP/Headers/Referer) contiendra le schéma, l'[hôte](/fr/docs/Glossary/Host) et le [port](/fr/docs/Glossary/Port) de la page d'origine. - - `origin-when-cross-origin` : lorsque la navigation se fait vers d'autres origines, les données du référent se limiteront au schéma, à l'hôte et au part. Si on navigue sur la même origine, le chemin complet de la ressource sera indiqué. - - `unsafe-url` : l'en-tête HTTP [`Referer`](/fr/docs/Web/HTTP/Headers/Referer) incluera l'origine et le chemin mais aucun fragment, mot de passe ou nom d'utilisateur. Ce cas de figure n'est pas sécurisé, car il peut laisser fuire des origines et des chemins de ressources protégées par TLS vers des origines non-sécurisées. + - `no-referrer` + - : L'en-tête [`Referer`](/fr/docs/Web/HTTP/Headers/Referer) n'est pas envoyé. + - `no-referrer-when-downgrade` + - : L'en-tête [`Referer`](/fr/docs/Web/HTTP/Headers/Referer) ne sera pas envoyé aux origines dans TLS/HTTPS. + - `origin`: + - : Le référent envoyé sera limité à l'origine de la page référente, c'est-à -dire qu'il ne contiendra que le [schéma, l'hôte et le port](/fr/docs/Learn/Common_questions/What_is_a_URL). + - `origin-when-cross-origin` + - : Le référent envoyé aux autres origines sera limité au schéma, à l'hôte et au port. La navigation vers la même origine contiendra le chemin. + - `same-origin` + - : Un référent sera envoyé vers les mêmes origines mais les requêtes vers d'autres origines ne contiendront pas de référent. + - `strict-origin` + - : N'envoie l'origine du document comme référent que lorsque le niveau de sécurité du protocole reste le même (HTTPS→HTTPS) et pas lorsque la destination est moins sécurisée (HTTPS→HTTP). + - `strict-origin-when-cross-origin` (la valeur par défaut) + - : Envoie l'URL complète lors d'une requête vers la même origine, n'envoie que l'origine pour les requêtes vers d'autres origines si le niveau de sécurité du protocole reste le même (HTTPS→HTTPS), n'envoie aucun en-tête correspondant vers une destination moins sécurisée (HTTPS→HTTP). + - `unsafe-url` + - : Le référent inclut l'origine _et_ le chemin (mais pas le [fragment](/fr/docs/Web/API/HTMLAnchorElement/hash), [le mot de passe](/fr/docs/Web/API/HTMLAnchorElement/password) ou [le nom d'utilisateur](/fr/docs/Web/API/HTMLAnchorElement/username)). **Cette valeur n'est pas sécurisée**, car elle diffuse l'origine et les chemins de ressources protégées par TLS vers des origines non-sécurisées. - `sizes` - - : Une ou plusieurs chaînes de caractères séparées par des virgules, indiquant un ensemble de tailles sources. Chaque taille source est composée de : + - : Une ou plusieurs chaînes de caractères séparées par des virgules et qui indiquent un ensemble de tailles de source possible. Chaque taille de source consiste en : - 1. D'une [condition sur le média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries#syntax). Qui doit être absente pour le dernier élément de la liste. - 2. Une valeur de taille de la source. + 1. Une [condition de média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries). Celle-ci doit être absente pour le dernier élément de la liste. + 2. Une valeur de taille de source. - Les conditions de média décrivent les propriétés de la _fenêtre de visualisation_ (ou « viewport »), et non de l'_image_. Par exemple, `(max-height : 500px) 1000px` propose d'utiliser une source de 1000px de largeur, si la _fenêtre de visualisation_ n'est pas supérieure à 500px. + La condition de média décrit les propriétés de _la zone d'affichage_ et pas de _l'image_. Ainsi, `(max-height: 500px) 1000px` proposera d'utiliser une source de largeur 1000px, si _la zone d'affichage_ n'est pas plus haute que 500px. - Les valeurs de taille de la source spécifient la taille d'affichage prévue de l'image. [Les agents utilisateurs](/fr/docs/Glossary/User_agent) utilisent la taille actuelle de la source pour sélectionner l'une des sources fournies par l'attribut `srcset`, lorsque ces sources sont décrites à l'aide de descripteurs de largeur (`w`). La taille de la source sélectionnée affecte la [taille intrinsèque](/fr/docs/Glossary/Intrinsic_size) de l'image (la taille d'affichage de l'image si aucun style [CSS](/fr/docs/Glossary/CSS) n'est appliqué). Si l'attribut `srcset` est absent, ou ne contient aucune valeur avec un descripteur de largeur, alors l'attribut `sizes` n'a aucun effet. + Les valeurs pour les tailles de source indiquent la taille d'affichage souhaitée de l'image. Le navigateur utilise la taille de source courante correspondante pour sélectionner une des sources fournies par l'attribut `srcset` lorsque les sources y sont décrites avec un descripteur de largeur (`w`). La taille de source sélectionnée affecte la taille intrinsèque de l'image (c'est-à -dire la taille occupée à l'écran si aucun style CSS n'est appliqué). Si l'attribut `srcset` est absent ou qu'il ne contient pas de valeur avec un descripteur de largeur, l'attribut `sizes` aura aucun effet. - `src` - - : L'[URL](/fr/docs/Glossary/URL) de l'image. Cet attribut est obligatoire pour l'élément `<img>`. Pour les [navigateurs](/fr/docs/Glossary/Browser) qui prennent en charge `srcset`, `src` est considéré comme une image candidate dont la densité de pixel vaut `1x` si aucune autre image avec cette densité n'est définie via `srcset` ou si `srcset` contient des descripteurs « `w` ». + - : L'URL de l'image. Cet attribut est obligatoire. Pour les navigateurs qui prennent en charge `srcset`, l'image fourni par `src` est considérée comme une candidate avec un descripteur de densité de pixel à `1x`, sauf si une image avec un tel descripteur est déjà définie dans `srcset`, ou si `srcset` contient des descripteurs `w`. + - `srcset` - - : Une liste de une ou plusieurs chaînes de caractères, séparées par des virgules, qui indiquent un ensemble d'images sources parmi lequel l'agent utilisateur pourra choisir la meilleure image à afficher. Chaque chaîne de caractères se compose : + - : Une ou plusieurs chaînes de caractères séparées par des virgules, qui indiquent des sources possibles pour l'image que le navigateur pourra utiliser. Chaque chaîne de caractères se compose : - 1. D'une [URL](/fr/docs/Glossary/URL) vers une image, - 2. Éventuellement d'un espace suivi : + 1. D'une URL vers l'image + 2. Éventuellement, d'un espace suivi : - - D'un descripteur de largeur ou un entier positif directement suivi par « `w` ». Le descripteur de largeur est divisé par la taille de la condition de taille définie dans l'attribut `sizes` afin de calculer la densité de pixel réelle. - - D'un descripteur de densité de pixel qui est un nombre décimal directement suivi par « `x` ». + - D'un descripteur de largeur (un entier positif suivi par `w`). Le descripteur de largeur est divisé par la taille de source fournie par l'attribut `sizes` afin de calculer la densité de pixel effective. + - D'un descripteur de densité de pixel (un nombre décimal positif suivi par `x`). - Si aucun descripteur n'est utilisé, la source aura un descripteur par défaut qui vaut `1x`. + Si aucun descripteur n'est indiqué, la source se voit affecter un descripteur par défaut de `1x`. - Au sein d'un même attribut `srcset`, on ne peut pas mélanger des descripteurs exprimés en densité de pixels et des descripteurs exprimés en largeur. Il est également invalide d'avoir deux sources pour lesquelles le descripteur est le même (par exemple, deux sources décrites par « `2x` »). + Toute combinaison des deux types de descripteur sera invalide. De même, indiquer deux sources avec le même descripteur sera invalide. - L'agent utilisateur sélectionne l'une des sources disponibles à sa discrétion. Il dispose ainsi d'une marge de manœuvre importante pour adapter sa sélection en fonction de choses comme les préférences de l'utilisateur ou les conditions de [bande passante](/fr/docs/Glossary/Bandwidth). Voir notre [Tutoriel sur les images responsives](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) pour un exemple. + L'agent utilisateur sélectionne une des sources disponibles comme il l'entend. Cette liberté permet de baser le choix sur d'autres facteurs comme les préférences de l'utilisateur ou les conditions réseau. Voir [le tutoriel sur les images adaptatives](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) pour un exemple. - `width` - - : La largeur intrinsèque de l'image en pixels. Doit être un nombre entier sans unité. + - : La largeur intrinsèque de l'image, exprimée en pixels. La valeur doit être un nombre entier sans unité. + - `usemap` - - : Le fragment d'URL (commençant avec #) d'une [carte d'images](/fr/docs/Web/HTML/Element/map) associée à cet élément. + - : L'URL partielle (commençant par `#`) d'une [carte d'image](/fr/docs/Web/HTML/Element/map) associée à l'élément. - > **Note :** Cet attribut ne peut pas être utilisé si l'élément `<img>` est un descendant d'un élément [`<a>`](/fr/docs/Web/HTML/Element/a) ou d'un élément [`<button>`](/fr/docs/Web/HTML/Element/Button). + > **Note :** Cet attribut est invalide si l'élément `<img>` est à l'intérieur d'un élément [`<a>`](/fr/docs/Web/HTML/Element/a) ou d'un élément [`<button>`](/fr/docs/Web/HTML/Element/Button). -### Attributs obsolètes +### Attributs dépréciés - `align` {{deprecated_inline}} - - : L'alignement de l'image selon le contexte qui l'entoure. En HTML5, on privilégiera les propriétés CSS [`float`](/fr/docs/Web/CSS/float) et/ou [`vertical-align`](/fr/docs/Web/CSS/vertical-align) voire la propriété [`object-position`](/fr/docs/Web/CSS/object-position) qui permet de positionner l'image au sein de la boîte de l'élément. Les valeurs autorisées sont : + - : Aligne l'image au sein de son contexte englobant. À la place de cet attribut, on privilégiera les propriétés CSS [`float`](/fr/docs/Web/CSS/float) et/ou [`vertical-align`](/fr/docs/Web/CSS/vertical-align). Les valeurs autorisées pour cet attribut sont : - `top` - - : Équivalent à `vertical-align: top;` ou à `vertical-align: text-top;` + - : Équivalent à `vertical-align: top` ou `vertical-align: text-top` - `middle` - - : Équivalent à `vertical-align: -moz-middle-with-baseline;` + - : Équivalent à `vertical-align: -moz-middle-with-baseline` - `bottom` - - : La valeur utilisée par défaut. Équivalent à `vertical-align: unset;` ou à `vertical-align: initial;` + - : La valeur par défaut, équivalent à `vertical-align: unset` ou `vertical-align: initial` - `left` - - : Équivalent à `float: left;` + - : Équivalent à `float: left` - `right` - - : Équivalent à `float: right;` + - : Équivalent à `float: right` - `border` {{deprecated_inline}} - - : La largeur d'une bordure autour de l'image. Utilisez plutôt la propriété [CSS](/fr/docs/Glossary/CSS) [`border`](/fr/docs/Web/CSS/border). + - : La largeur de la bordure autour de l'image. La propriété CSS [`border`](/fr/docs/Web/CSS/border) doit être utilisée à la place. + - `hspace` {{deprecated_inline}} - - : Le nombre de pixels blancs à insérer à droite et à gauche de l'image. En HTML5, on privilégiera la propriété CSS [`margin`](/fr/docs/Web/CSS/margin). + - : Le nombre de pixels d'espace blanc à droite et à gauche de l'image. La propriété [`margin`](/fr/docs/Web/CSS/margin) doit être utilisée à la place. + +- `intrinsicsize` {{deprecated_inline}} + - : Cet attribut indique au navigateur d'ignorer la taille intrinsèque de l'image pour prendre en compte celle fournie par l'attribut. + - `longdesc` {{deprecated_inline}} - - : Un lien vers une description plus détaillée de l'image. Les valeurs possibles sont une URL ou un identifiant ([`id`](/fr/docs/Web/HTML/Global_attributes#attr-id)) d'un élément. + - : Un lien vers une description plus détaillée de l'image. Les valeurs pouvaient être une URL ou l'identifiant d'un autre élément. - > **Note :** Cet attribut est mentionné dans la dernière version du [W3C](/fr/docs/Glossary/W3C), [HTML 5.2](https://www.w3.org/TR/html52/obsolete.html#element-attrdef-img-longdesc), mais a été supprimé du [HTML Living Standard](https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element) du [WHATWG](/fr/docs/Glossary/WHATWG). Son avenir est incertain ; les auteurs devraient utiliser une alternative [WAI](/fr/docs/Glossary/WAI)-[ARIA](/fr/docs/Glossary/ARIA) telle que [`aria-describedby`](https://www.w3.org/TR/wai-aria-1.1/#aria-describedby) ou [`aria-details`](https://www.w3.org/TR/wai-aria-1.1/#aria-details). + > **Note :** Cet attribut est mentionné dans la spécification [HTML 5.2 du W3C](https://www.w3.org/TR/html52/obsolete.html#element-attrdef-img-longdesc), mais a été retiré [du standard évolutif HTML du WHATWG](https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element). Son avenir est incertain et mieux vaut utiliser une alternative WAI-ARIA comme [`aria-describedby`](https://www.w3.org/TR/wai-aria-1.1/#aria-describedby) ou [`aria-details`](https://www.w3.org/TR/wai-aria-1.1/#aria-details). - `name` {{deprecated_inline}} - - : Un nom pour l'élément. Utilisez plutôt l'attribut [`id`](/fr/docs/Web/HTML/Global_attributes#attr-id). + - : Un nom pour l'élément, l'attribut universel `id` doit être utilisé à la place. + - `vspace` {{deprecated_inline}} - - : Le nombre de pixels blancs à insérer en dessous et au-dessus de l'image. En HTML5, on privilégiera la propriété CSS [`margin`](/fr/docs/Web/CSS/margin). + - : Le nombre de pixels d'espace blanc en haut et en bas de l'image. La propriété CSS [`margin`](/fr/docs/Web/CSS/margin) doit être utilisée à la place. ## Mettre en forme avec CSS -`<img>` est un [élément remplacé](/fr/docs/Web/CSS/Replaced_element) ; il a une valeur [`display`](/fr/docs/Web/CSS/display) de `inline` par défaut, mais ses dimensions par défaut sont définies par les valeurs intrinsèques de l'image intégrée, comme s'il s'agissait de `inline-block`. Vous pouvez définir des propriétés comme [`border`](/fr/docs/Web/CSS/border)/[`border-radius`](/fr/docs/Web/CSS/border-radius), [`padding`](/fr/docs/Web/CSS/padding)/[`margin`](/fr/docs/Web/CSS/margin), [`width`](/fr/docs/Web/CSS/width), [`height`](/fr/docs/Web/CSS/height), etc. sur une image. +`<img>` est [un élément remplacé](/fr/docs/Web/CSS/Replaced_element). Sa propriété [`display`](/fr/docs/Web/CSS/display) par défaut vaut `inline`, mais ses dimensions par défaut sont définies par les valeurs intrinsèques de l'image, à la façon de `inline-block`. Il est tout à fait possible d'utiliser les propriétés [`border`](/fr/docs/Web/CSS/border)/[`border-radius`](/fr/docs/Web/CSS/border-radius), [`padding`](/fr/docs/Web/CSS/padding)/[`margin`](/fr/docs/Web/CSS/margin), [`width`](/fr/docs/Web/CSS/width), et [`height`](/fr/docs/Web/CSS/height) sur une image. `<img>` n'a pas de ligne de base, donc lorsque les images sont utilisées dans un contexte de mise en forme en ligne avec [`vertical-align`](/fr/docs/Web/CSS/vertical-align)`: baseline`, le bas de l'image sera placé sur la ligne de base du texte. -Vous pouvez utiliser la propriété [`object-position`](/fr/docs/Web/CSS/object-position) pour positionner l'image dans la boîte de l'élément, et la propriété [`object-fit`](/fr/docs/Web/CSS/object-fit) pour ajuster la taille de l'image dans la boîte (par exemple, si l'image doit s'adapter à la boîte ou la remplir même si un découpage est nécessaire). +La propriété [`object-position`](/fr/docs/Web/CSS/object-position) peut être utilisée afin de positionner l'image au sein de la boîte fournie par l'élément. La propriété [`object-fit`](/fr/docs/Web/CSS/object-fit) peut être utilisée pour ajuster le dimensionnement de l'image au sein de la boîte (par exemple pour étirer ou rogner l'image dans la boîte si nécessaire). -En fonction de son type, une image peut avoir une largeur et une hauteur intrinsèques. Pour certains types d'images, cependant, les dimensions intrinsèques sont inutiles. Les images [SVG](/fr/docs/Glossary/SVG), par exemple, n'ont pas de dimensions intrinsèques si leur élément [`<svg>`](/fr/docs/Web/SVG/Element/svg) n'a pas de `width` ou de `height` défini sur lui. +Selon son type, une image peut avoir une largeur et une hauteur intrinsèque. Pour certains types d'image en revanche, de telles dimensions intrinsèques ne sont pas nécessaires. Ainsi, les images vectorielles (en SVG par exemple) n'ont pas de dimensions intrinsèques si leur racine (l'élément [`<svg>`](/fr/docs/Web/SVG/Element/svg)) n'a pas d'attribut `width` ou `height` défini. ## Exemples -### Texte alternatif +### Fournir un texte alternatif -L'exemple suivant intègre une image dans la page et inclut un texte alternatif pour l'accessibilité. +Dans l'exemple qui suit, l'image est accompagnée d'un texte alternatif qui sert l'accessibilité. ```html -<img src="favicon144.png" - alt="MDN logo"> +<img src="favicon144.png" alt="Logo de MDN"> ``` -{{EmbedLiveSample('Texte_alternatif', '100%', '160')}} +{{EmbedLiveSample('', '100%', '160')}} -### Lien image +### Créer un lien avec une image -Cet exemple s'appuie sur le précédent, en montrant comment transformer l'image en lien. Pour ce faire, immergez la balise `<img>` à l'intérieur de l'élément [`<a>`](/fr/docs/Web/HTML/Element/a). Vous devez faire en sorte que le texte alternatif décrive la ressource vers laquelle le lien pointe, comme si vous utilisiez un lien texte à la place. +Cet exemple intègre l'image précédente et la transforme en lien. Pour cela, l'élément `<img>` est placé au sein d'un élément [`<a>`](/fr/docs/Web/HTML/Element/a). Ici, le texte alternatif devrait décrire la ressource vers laquelle pointe le lien. ```html <a href="https://developer.mozilla.org"> - <img src="favicon144.png" alt="Visitez le site du MDN"> + <img src="favicon144.png" alt="Visiter le site MDN"> </a> ``` -{{EmbedLiveSample('Lien_image', '100%', '160')}} +{{EmbedLiveSample('', '100%', '160')}} -### Créer un lien avec une image +### Utiliser l'attribut `srcset` -Dans cet exemple, nous incluons un attribut `srcset` avec une référence à une version haute résolution du logo ; celle-ci sera chargée à la place de l'image `src` sur les appareils haute résolution. L'image référencée dans l'attribut `src` est comptée comme un candidat `1x` dans [agent utilisateur](/fr/docs/Glossary/User_agent) qui supporte `srcset`. +Dans cet exemple, on utilise l'attribut `srcset` avec une référence vers une version du logo en haute résolution. Pour les appareils avec une haute résolution, celle-ci sera chargée à la place à la place de l'image indiquée par `src`. Pour les agents utilisateurs qui prennent en charge l'attribut `srcset`, l'image référencée par l'attribut `src` sera considérée comme une candidate avec le descripteur `1x`. ```html -<img src="favicon72.png" - alt="Logo MDN" - srcset="favicon144.png 2x"> +<img src="favicon72.png" alt="Logo MDN" srcset="favicon144.png 2x"> ``` -{{EmbedLiveSample('Créer_un_lien_avec_une_image', '100%', '160')}} +{{EmbedLiveSample("", "100%", "160")}} ### Utiliser les attributs `srcset` et `sizes` -L'attribut `src` est ignoré lorsque l'agent utilisateur prend en charge `srcset` et que ce dernier contient des descripteurs avec '`w`'. Dans cet exemple, lorsque la condition `(min-width: 600px)` est vérifiée pour le média utilisé, la largeur de l'image sera 200px, sinon, elle occupera `50vw` (ce qui correspond à 50% de la largeur de la zone d'affichage (_viewport_)). +L'attribut `src` est ignoré par les agents utilisateurs qui le prennent en charge lorsque les descripteurs `w` sont présents. Lorsque la condition `(max-width: 600px)` est respectée, l'image large de 200 pixels sera chargée (car c'est celle qui est la plus proche de `200px`). Dans les autres cas, c'est l'autre image qui est chargée. ```html <img src="clock-demo-200px.png" - alt="Clock" - srcset="clock-demo-200px.png 200w, - clock-demo-400px.png 400w" - sizes="(min-width: 600px) 200px, 50vw"> + alt="Clock" + srcset="clock-demo-200px.png 200w, + clock-demo-400px.png 400w" + sizes="(max-width: 600px) 200px, 50vw"> ``` -{{EmbedLiveSample("Utiliser_les_attributs_srcset_et_sizes", "100%", 450)}} - -> **Note :** Pour observer l'effet du redimensionnement, vous devrez consulter [l'exemple sur une page séparée](/fr/docs/Web/HTML/Element/img/Using_the_srcset_and_sizes_attributes) afin de pouvoir modifier la taille de la zone. +{{EmbedLiveSample("", "100%", 350)}} ## Sécurité et vie privée -Bien que les éléments `<img>` soient la plupart du temps utilisés respectueusement, ils peuvent permettre de récupérer des informations précises, parfois utilisées pour pister les utilisateurs. Voir la page [sur l'en-tête referer](/fr/docs/Web/Security/Referer_header:_privacy_and_security_concerns) pour plus d'informations et des façons de résoudre ces problèmes. +Bien que les éléments `<img>` puissent être utilisés innocemment, ils peuvent également avoir des effets indésirables en termes de sécurité et de vie privée. Voir [cet article quant à l'en-tête `Referer`](/fr/docs/Web/Security/Referer_header:_privacy_and_security_concerns) pour plus de détails. -## Problèmes d'accessibilité +## Accessibilité -### Création de descriptions alternatives significatives +### Écrire des descriptions alternatives significatives -L'attribut `alt` doit décrire le contenu de l'image de façon claire et concise. L'attribut ne doit pas décrire la présence même de l'image ou le nom du fichier. Si l'attribut `alt` n'est pas utilisé, car l'image ne possède pas d'équivalent textuel, il faudra utiliser d'autres méthodes alternatives pour présenter le contenu que l'image doit véhiculer. +La valeur d'un attribut `alt` devrait toujours décrire le contenu de l'image de façon claire et concise. Elle ne doit pas décrire la présence de l'image ou le nom du fichier de l'image. Si l'attribut `alt` est omis volontairement, car l'image n'a pas d'équivalent textuel, utilisez d'autres méthodes afin d'indiquer le message véhiculé par l'image. -#### Ce qu'il ne faut pas faire +#### Mauvaise pratique ```html example-bad -<img alt="image" src="manchot.jpg"> +<img alt="image" src="pingouin.jpg"> ``` -#### Ce qu'il faut faire +#### Bonne pratique ```html example-good -<img alt="Un manchot Rockhopper se tenant sur une plage." src="manchot.jpg"> +<img alt="Un manchot Rockhopper sur une plage." src="pingouin.jpg"> ``` -Lorsque l'attribut `alt` n'est pas présent, certains lecteurs d'écran peuvent énoncer le nom du fichier. Cela peut être source de confusion, car le nom du fichier n'est pas représentatif du contenu de l'image. +Lorsque l'attribut `alt` n'est pas présent sur une image, certains lecteurs d'écran pourront annoncer le nom du fichier de l'image. Cela peut être source de confusion si le nom du fichier n'est pas représentatif du contenu de l'image. -- [_An alt Decision Tree • Images • WAI Web Accessibility Tutorials_ (en anglais)](https://www.w3.org/WAI/tutorials/images/decision-tree/) -- [_Alt-texts: The Ultimate Guide — Axess Lab_ (en anglais)](https://axesslab.com/alt-texts/) -- [_How to Design Great Alt Text: An Introduction - Deque_ (en anglais)](https://www.deque.com/blog/great-alt-text-introduction/) -- [Comprendre les règles WCAG 1.1](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_—_providing_text_alternatives_for_non-text_content) -- [_Understanding Success Criterion 1.1.1 - W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html) +- [Un arbre de décision pour `alt` • Images • Tutoriel WAI sur l'accessibilité web (en anglais)](https://www.w3.org/WAI/tutorials/images/decision-tree/) +- [Texte alternatif : le guide ultime — <i lang="en">Axess Lab</i> (en anglais)](https://axesslab.com/alt-texts/) +- [Comment optimiser votre texte alternatif : une introduction — Deque (en anglais)](https://www.deque.com/blog/great-alt-text-introduction/) +- [MDN Comprendre les règles WCAG 1.1](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_—_providing_text_alternatives_for_non-text_content) +- [Comprendre les critères de succès 1.1.1 | W3C Comprendre WCAG 2.0 (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html) ### L'attribut `title` -L'attribut [`title`](/fr/docs/Web/HTML/Global_attributes#attr-title) n'a pas vocation à remplacer l'attribut `alt`. De plus, on évitera d'utiliser la même valeur pour `alt` et `title`, car certains lecteurs d'écran répèteraient deux fois la description, entraînant une certaine confusion. +L'attribut [`title`](/fr/docs/Web/HTML/Global_attributes/title) n'est pas un remplaçant acceptable pour l'attribut `alt`. Il vaut également mieux éviter de dupliquer la valeur de l'attribut `alt` dans un attribut `title` pour la même image. En effet, un tel doublon entraînera les lecteurs d'écran à annoncer deux fois la description, ce qui pourra être une source de confusion. -L'attribut `title` ne doit pas non plus être utilisé comme une source d'information complémentaire à la description fournie par `alt`. Si l'image nécessite une légende, on utilisera plutôt les éléments [`<figure>`](/fr/docs/Web/HTML/Element/figure) et [`<figcaption>`](/fr/docs/Web/HTML/Element/figcaption). +L'attribut `title` ne devrait pas être utilisé afin de compléter les informations de légende de l'image pour accompagner la description fournie par `alt`. Si une image a besoin d'une légende, on utilisera les éléments [`figure`](/fr/docs/Web/HTML/Element/figure) et [`figcaption`](/fr/docs/Web/HTML/Element/figcaption). -La valeur de l'attribut `title` est généralement présentée sous la forme d'une bulle d'information lorsqu'on immobilise le curseur au-dessus de l'image. Bien que cette méthode puisse être utilisée pour fournir des informations supplémentaires, on ne doit pas partir du principe que ce contenu sera nécessairement vu. Si les informations présentées par `title` sont importantes, il faudra les présenter d'une autre façon (cf. ci-avant) pour que les utilisateurs puissent réellement en bénéficier. +La valeur de l'attribut `title` est généralement affichée via une bulle d'information qui apparaît au survol du curseur sur l'image. Bien que cet attribut _puisse_ fournir des informations supplémentaires, on ne doit pas s'attendre à ce que toute personne le voit : par exemple lorsque la navigation est effectuée au clavier ou sur un écran tactile. Si les informations à afficher sont particulièrement importantes ou utiles, on utilisera les méthodes évoquées ci-avant plutôt que `title`. -- [_Utiliser l'attribut HTML `title` - The Paciello Group_ (en anglais)](https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/) +- [Utiliser l'attribut HTML `title` — mis à jour | <i lang="en">The Paciello Group</i> (en anglais)](https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/) ## Résumé technique @@ -314,67 +321,30 @@ La valeur de l'attribut `title` est généralement présentée sous la forme d'u <tbody> <tr> <th scope="row"> - <a href="/fr/docs/Web/Guide/HTML/Content_categories" - >Catégories de contenu</a - > + <a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a> </th> <td> - <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content" - >Contenu de flux</a - >, - <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content" - >contenu phrasé</a - >, - <a href="/fr/docs/Web/Guide/HTML/Content_categories#embedded_content" - >contenu intégré</a - >, - <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content" - >contenu tangible</a - >. Si l'élément possède un attribut - <a href="#attr-usemap"><code>usemap</code></a - >, c'est également un - <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content" - >contenu interactif</a - >. + <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_intégré">contenu intégré</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_tangible">contenu tangible</a>. Si l'élément utilise l'attribut <code>usemap</code>, il fait également partie de la catégorie de contenu interactif. </td> </tr> <tr> <th scope="row">Contenu autorisé</th> - <td> - Aucun, cet élément est un - <a href="/fr/docs/Glossary/Empty_element">élément vide</a>. - </td> + <td>Aucun, il s'agit d'un élément vide.</td> </tr> <tr> - <th scope="row">Omission de balise</th> - <td> - Cet élément doit avoir une balise de début et ne doit pas avoir de - balise de fin. - </td> + <th scope="row">Omission de balises</th> + <td>La balise ouvrante doit être présente et il ne doit pas y avoir de balise fermante.</td> </tr> <tr> - <th scope="row">Parents autorisés</th> + <th scope="row">Éléments parents autorisés</th> <td>Tout élément qui accepte du contenu intégré.</td> </tr> <tr> <th scope="row">Rôle ARIA implicite</th> <td> <ul> - <li> - avec un attribut <code>alt</code> non vide ou sans attribut - <code>alt</code> : - <code - ><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Role_Img" - >img</a - ></code - > - </li> - <li> - avec un attribut <code>alt</code> vide : - <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" - >pas de rôle correspondant</a - > - </li> + <li>Avec un attribut <code>alt</code> non vide ou aucun attribut <code>alt</code> : <code><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Role_Img">img</a></code></li> + <li>Avec un attribut <code>alt</code> vide : <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">pas de rôle correspondant</a></li> </ul> </td> </tr> @@ -382,87 +352,32 @@ La valeur de l'attribut `title` est généralement présentée sous la forme d'u <th scope="row">Rôles ARIA autorisés</th> <td> <ul> - <li> - avec un attribut <code>alt</code> non vide : + <li>Avec un attribut <code>alt</code> non-vide : <ul> - <li> - <code - ><a href="/fr/docs/Web/Accessibility/ARIA/Roles/button_role" - >button</a - ></code - > - </li> - <li> - <code - ><a href="/fr/docs/Web/Accessibility/ARIA/Roles/checkbox_role" - >checkbox</a - ></code - > - </li> - <li><a href="https://w3c.github.io/aria/#link">link</a></li> - <li> - <a href="https://w3c.github.io/aria/#menuitem">menuitem</a> - </li> - <li> - <a href="https://w3c.github.io/aria/#menuitemcheckbox" - >menuitemcheckbox</a - > - </li> - <li> - <a href="https://w3c.github.io/aria/#menuitemradio" - >menuitemradio</a - > - </li> - <li><a href="https://w3c.github.io/aria/#option">option</a></li> - <li> - <a href="https://w3c.github.io/aria/#progressbar" - >progressbar</a - > - </li> - <li> - <a href="https://w3c.github.io/aria/#scrollbar">scrollbar</a> - </li> - <li> - <a href="https://w3c.github.io/aria/#separator">separator</a> - </li> - <li><a href="https://w3c.github.io/aria/#slider">slider</a></li> - <li> - <code - ><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Switch_role" - >switch</a - ></code - > - </li> - <li> - <code - ><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Tab_Role" - >tab</a - ></code - > - </li> - <li> - <a href="https://w3c.github.io/aria/#treeitem">treeitem</a> - </li> + <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/button_role"><code>button</code></a></li> + <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/checkbox_role"><code>checkbox</code></a></li> + <li><a href="https://w3c.github.io/aria/#link"><code>link</code></a></li> + <li><a href="https://w3c.github.io/aria/#menuitem"><code>menuitem</code></a></li> + <li><a href="https://w3c.github.io/aria/#menuitemcheckbox"><code>menuitemcheckbox</code></a></li> + <li><a href="https://w3c.github.io/aria/#menuitemradio"><code>menuitemradio</code></a></li> + <li><a href="https://w3c.github.io/aria/#option"><code>option</code></a></li> + <li><a href="https://w3c.github.io/aria/#progressbar"><code>progressbar</code></a></li> + <li><a href="https://w3c.github.io/aria/#scrollbar"><code>scrollbar</code></a></li> + <li><a href="https://w3c.github.io/aria/#separator"><code>separator</code></a></li> + <li><a href="https://w3c.github.io/aria/#slider"><code>slider</code></a></li> + <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Switch_role"><code>switch</code></a></li> + <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Tab_Role"><code>tab</code></a></li> + <li><a href="https://w3c.github.io/aria/#treeitem"><code>treeitem</code></a></li> </ul> </li> - <li> - avec un attribut <code>alt</code> vide, - <a href="https://w3c.github.io/aria/#none">none</a> ou - <a href="https://w3c.github.io/aria/#presentation">presentation</a> - </li> - <li> - sans attribut <code>alt</code>, aucun <code>role</code> autorisé - </li> + <li>Avec un attribut <code>alt</code> vide, <a href="https://w3c.github.io/aria/#none"><code>none</code></a> ou <a href="https://w3c.github.io/aria/#presentation"><code>presentation</code></a></li> + <li>Sans attribut <code>alt</code>, aucun rôle autorisé</li> </ul> </td> </tr> <tr> <th scope="row">Interface DOM</th> - <td> - <a href="/fr/docs/Web/API/HTMLImageElement" - ><code>HTMLImageElement</code></a - > - </td> + <td><a href="/fr/docs/Web/API/HTMLImageElement"><code>HTMLImageElement</code></a></td> </tr> </tbody> </table> @@ -477,8 +392,16 @@ La valeur de l'attribut `title` est généralement présentée sous la forme d'u ## Voir aussi -- [Images en HTML](/fr/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML) -- [Guide des types et formats de fichiers image](/fr/docs/Web/Media/Formats/Image_types) -- [Images responsives](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) -- Les éléments [`<picture>`](/fr/docs/Web/HTML/Element/picture), [`<object>`](/fr/docs/Web/HTML/Element/object) et [`<embed>`](/fr/docs/Web/HTML/Element/embed) -- Autres propriétés CSS relatives aux images : [`object-fit`](/fr/docs/Web/CSS/object-fit), [`object-position`](/fr/docs/Web/CSS/object-position), [`image-orientation`](/fr/docs/Web/CSS/image-orientation), [`image-rendering`](/fr/docs/Web/CSS/Image-rendering) et [`image-resolution`](/fr/docs/Web/CSS/image-resolution). +- [Apprendre — Les images en HTML](/fr/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML) +- [Guide sur les formats et types de fichier pour les images](/fr/docs/Web/Media/Formats/Image_types) +- [Les images adaptatives](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) +- Les éléments HTML : + - [`<picture>`](/fr/docs/Web/HTML/Element/picture), + - [`<object>`](/fr/docs/Web/HTML/Element/object), + - [`<embed>`](/fr/docs/Web/HTML/Element/embed). +- Les propriétés CSS relatives aux images : + - [`object-fit`](/fr/docs/Web/CSS/object-fit), + - [`object-position`](/fr/docs/Web/CSS/object-position), + - [`image-orientation`](/fr/docs/Web/CSS/image-orientation), + - [`image-rendering`](/fr/docs/Web/CSS/Image-rendering), + - [`image-resolution`](/fr/docs/Web/CSS/image-resolution). diff --git a/files/fr/web/html/element/input/date/index.md b/files/fr/web/html/element/input/date/index.md index a41d265409..25b3fc26eb 100644 --- a/files/fr/web/html/element/input/date/index.md +++ b/files/fr/web/html/element/input/date/index.md @@ -1,170 +1,191 @@ --- title: <input type="date"> -slug: Web/HTML/Element/Input/date -tags: - - Element - - HTML - - Input - - Reference - - Web +slug: Web/HTML/Element/input/date translation_of: Web/HTML/Element/input/date +browser-compat: html.elements.input.input-date --- {{HTMLRef}} -Les éléments {{htmlelement("input")}} dont l'attribut `type` vaut **`date`** permettent de créer des champs permettant de saisir des dates (composées d'une année, d'un mois et d'un jour mais pas d'une heure , cf. [`time`](/fr/docs/Web/HTML/Element/input/time)). +Les éléments [`<input>`](/fr/docs/Web/HTML/Element/Input) dont l'attribut `type` vaut **`date`** permettent de créer des champs où saisir des dates, via un champ texte dont la valeur est validée ou avec un sélecteur de date. + +La valeur fournie par un tel contrôle contiendra l'année, le mois et le jour mais _pas_ l'heure et les minutes. Les éléments [`<input type="time">`](/fr/docs/Web/HTML/Element/input/time) et [`<input type="datetime-local">`](/fr/docs/Web/HTML/Element/input/datetime-local) permettent respectivement de saisir des heures et des combinaisons de dates et heures. {{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}} -L'apparence du contrôle affiché dépend du navigateur utilisé et la prise en charge de cette fonctionnalité est hétérogène (cf. la section {{anch("Compatibilité des navigateurs")}} pour plus de détails). Pour les navigateurs qui ne prennent pas en charge ce type d'élément `<input>`, c'est un simple [`<input type="text">`](/fr/docs/Web/HTML/Element/input/text) qui sera affiché. +L'apparence du contrôle affiché dépend du navigateur utilisé et la prise en charge de cette fonctionnalité est hétérogène (cf. la section en fin d'article sur la compatibilité des navigateurs pour plus de détails). Pour les navigateurs qui ne prennent pas en charge ce type d'élément `<input>`, c'est un simple [`<input type="text">`](/fr/docs/Web/HTML/Element/Input/text) qui sera affiché. + +<table class="properties"> + <tbody> + <tr> + <td><strong>Valeur</strong></td> + <td>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui représente une date au format <code>yyyy-mm-dd</code> (quatre chiffres pour l'année, un tiret, deux chiffres pour le mois, un tiret, deux chiffres pour le jour) ou qui est vide.</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td><a href="/fr/docs/Web/API/HTMLElement/change_event"><code>change</code></a> et <a href="/fr/docs/Web/API/HTMLElement/Input_event"><code>input</code></a></td> + </tr> + <tr> + <td><strong>Attributs communs pris en charge</strong></td> + <td><a href="/fr/docs/Web/HTML/Element/Input#attr-autocomplete"><code>autocomplete</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-list"><code>list</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-readonly"><code>readonly</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-step"><code>step</code></a></td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>list</code>, <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>.</td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td><a href="/fr/docs/Web/API/HTMLInputElement/select"><code>select()</code></a>, <a href="/fr/docs/Web/API/HTMLInputElement/stepDown"><code>stepDown()</code></a>, <a href="/fr/docs/Web/API/HTMLInputElement/stepUp"><code>stepUp()</code></a> + </td> + </tr> + </tbody> +</table> ## Valeur -Une chaîne de caractères qui représente la valeur de la date saisie dans le contrôle. Le format à respecter est décrit dans dans [cette section de l'article sur les formats](/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates). Il est possible de fournir une valeur par défaut en renseignant l'attribut {{htmlattrxref("value", "input")}} : +Une chaîne de caractères ([`DOMString`](/fr/docs/Web/API/DOMString)) qui représente la valeur de la date saisie dans le contrôle. La date est dans le format ISO8601, décrit dans [cette section de l'article sur les formats](/fr/docs/Web/HTML/Date_and_time_formats). + +Il est possible de fournir une valeur par défaut en renseignant l'attribut [`value`](/fr/docs/Web/HTML/Element/Input#attr-value) : ```html <input id="date" type="date" value="2017-06-01"> ``` -{{EmbedLiveSample('Valeur', 600, 40) }} +{{EmbedLiveSample('', 600, 40)}} -On notera que le format d'affichage est différent de la valeur réelle de l'attribut `value` — le format de la date affichée sera déterminé en fonction de la langue utilisée par le navigateur alors que la valeur de l'attribut `value` aura toujours la forme `yyyy-mm-dd` (c'est-à -dire les quatres chiffres de l'année, suivi d'un tiret, suivi des deux chiffres pour le mois, suivi d'un tiret puis des deux chiffres pour le jour). +> **Note :** Le format d'affichage est différent de la valeur réelle de l'attribut `value` — le format de la date affichée sera déterminé en fonction de la langue utilisée par le navigateur alors que la valeur de l'attribut `value` aura toujours la forme `yyyy-mm-dd` (c'est-à -dire les quatre chiffres de l'année, suivi d'un tiret, suivi des deux chiffres pour le mois, suivi d'un tiret puis des deux chiffres pour le jour). -On peut également récupérer la valeur de la date en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}} : +On peut également récupérer la valeur de la date en JavaScript grâce à la propriété [`HTMLInputElement.value`](/fr/docs/Web/API/HTMLInputElement) : ```js -var dateControl = document.querySelector('input[type="date"]'); +let dateControl = document.querySelector('input[type="date"]'); dateControl.value = '2017-06-01'; +console.log(dateControl.value); // affiche "2017-06-01" +console.log(dateControl.valueAsNumber); // affiche 1496275200000, un timestamp JavaScript (exprimé en ms) ``` -## Utiliser les contrôles de saisie de date - -Les contrôles de date semblent pratiques : ils fournissent une interface utilisateur simple afin de sélectionner des dates et normalisent la donnée saisie dans un format unique pour l'envoyer au serveur, quelle que soit la locale de l'utilisateur. Malheureusement, il y a certains problèmes de prise en charge par les navigateurs pour `<input type="date">`. - -Nous verrons ici différents cas d'utilisation de `<input type="date">`, simples et complexes. Puis nous verrons comment parer aux problèmes de support des navigateurs. +Dans l'exemple qui précède, on récupère le premier élément `<input>` dont l'attribut `type` vaut `date` et on définit sa valeur à `2017-06-01` (ce qui correspond au premier juin 2017). On lit ensuite cette valeur sous la forme d'une chaîne de caractères puis sous forme numérique. ## Attributs supplémentaires -En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de type `"date"` gèrent les attributs suivants : +En complément des attributs communs à l'ensemble des éléments [`<input>`](/fr/docs/Web/HTML/Element/Input), les champs de type `"date"` gèrent les attributs suivants : -| Attribut | Description | -| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | -| `{{anch("max")}}` | La date la plus avancée qui peut être saisie. | -| `{{anch("min")}}` | La date la plus reculée qui peut être saisie. | -| `{{anch("step")}}` | Le pas à utiliser pour l'incrément quand on utilise les boutons d'augmentation/diminution. Cet incrément est également utilisé pour la validation. | +### `max` -### {{htmlattrdef("max")}} - -La date la plus avancée qui peut être saisie dans le contrôle. Si la valeur de {{htmlattrxref("value", "input")}} est supérieure à la date indiquée par cet attribut, l'élément ne respectera pas [les contraintes de validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur de l'attribut `max` n'est pas une chaîne de caractères qui suit le format `yyyy-MM-dd`, il n'y aura pas de valeur maximale. +La date la plus avancée qui peut être saisie dans le contrôle. Si la valeur de [`value`](/fr/docs/Web/HTML/Element/Input#attr-value) est supérieure à la date indiquée par cet attribut, l'élément ne respectera pas [les contraintes de validation](/fr/docs/Web/Guide/HTML/Constraint_validation). Si la valeur de l'attribut `max` n'est pas une chaîne de caractères qui suit le format `yyyy-mm-dd`, il n'y aura pas de valeur maximale. La valeur de cet attribut doit être une date supérieure ou égale à celle indiquée par l'attribut `min`. -### {{htmlattrdef("min")}} +### `min` -La date minimale qui peut être saisie dans le contrôle. Toute date saisie antérieure à celle-ci ne respectera pas [les contraintes de validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur de l'attribut `min` n'est pas une chaîne de caractères qui suit le format `yyyy-MM-dd`, il n'y aura pas de valeur minimale. +La date minimale qui peut être saisie dans le contrôle. Toute date saisie antérieure à celle-ci ne respectera pas [les contraintes de validation](/fr/docs/Web/Guide/HTML/Constraint_validation). Si la valeur de l'attribut `min` n'est pas une chaîne de caractères qui suit le format `yyyy-mm-dd`, il n'y aura pas de valeur minimale. La valeur de cet attribut doit être une date antérieure ou égale à celle indiquée par l'attribut `max`. -### {{htmlattrdef("step")}} +### `step` + +L'attribut `step` est un nombre qui indique le « pas » suivi par le compteur. Il peut également prendre la valeur spéciale `any` (décrite ci-après). Seules les valeurs qui suivent cette progression (à partir de `min` ou de `value` si ces attributs sont fournis) seront considérées comme valides. + +Une chaîne de caractères `any` indique qu'aucune contrainte de pas n'est appliquée et que n'importe quelle valeur (sous réserve qu'elle respecte les autres contraintes potentiellement indiquées par `min` ou `max`) est valide. -{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}} +> **Note :** Lorsque les données saisies par l'utilisatrice ou l'utilisateur ne respectent pas cette contrainte, l'agent utilisateur pourra arrondir à la valeur valide la plus proche, avec une préférence pour les dates les plus avancées quand deux dates sont aussi proches de la valeur saisie. -Pour les champs `date`, la valeur de `step` est exprimée en jours avec un facteur de multiplication de 86 400 000 (soit le nombre de millisecondes en une journée). La valeur par défaut de `step` est 1. +Pour les champs `date`, la valeur de `step` est exprimée en jours et est traité comme un nombre de millisecondes égal à 86 400 000 fois la valeur de `step`. La valeur par défaut de `step` est 1 (ce qui correspond à un jour). > **Note :** Utiliser `any` comme valeur pour `step` produira le même effet que la valeur `1` pour les champs `date`. ## Utilisation des contrôles de saisie des dates -Les champs date paraissent pratiques de prime abord : ils fournissent une interface utilisateur simple qui permet de sélectionner des dates et normalisent le format des données envoyées au serveur quelle que soit la locale de l'utilisateur. Toutefois, il existe certains problèmes avec `<input type="date">` en raison de la prise en charge limitée des navigateurs. +Les champs date paraissent pratiques de prime abord : ils fournissent une interface utilisateur simple qui permet de sélectionner des dates et normalisent le format des données envoyées au serveur quelle que soit la locale de l'utilisatrice ou l'utilisateur. Toutefois, il existe certains problèmes avec `<input type="date">` en raison de la prise en charge limitée des navigateurs. Dans les exemples qui suivent, nous verrons comment utiliser `<input type="date">` dans des cas simples et complexes en ajoutant des conseils quant à la prise en charge des navigateurs (en espérant que celle-ci s'améliore au fur et à mesure). ### Utilisation simple -Dans son expression la plus simple `<input type="date">` s'utilise avec un élément `<input>` et un élément {{htmlelement("label")}} : +Dans son expression la plus simple `<input type="date">` s'utilise avec un élément `<input>` et un élément [`<label>`](/fr/docs/Web/HTML/Element/Label) : ```html -<form> - <div> - <label for="bday">Veuillez saisir votre date de naissance :</label> - <input type="date" id="bday" name="bday"> - </div> +<form action="https://example.com"> + <label> + Veuillez saisir votre date de naissance : + <input type="date" name="bday"> + </label> + + <p><button>Envoyer</button></p> </form> ``` -{{EmbedLiveSample('Utilisation_simple', 600, 40)}} +{{EmbedLiveSample('', 600, 40)}} + +Ce fragment de HTML envoie la date saisie avec la clé `bday` vers `https://example.com`, ce qui donne une URL résultante comme `https://example.com/?bday=1955-06-08`. ### Paramétrer une date maximale et une date minimale -On peut utiliser les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} afin de restreindre les dates qui peuvent être saisies par l'utilisateur. Dans l'exemple suivant, on indique un date minimum au premier avril 2017 (`2017-04-01`) et une date maximale au 30 avril 2017 (`2017-04-30`) : +On peut utiliser les attributs [`min`](/fr/docs/Web/HTML/Element/Input#attr-min) et [`max`](/fr/docs/Web/HTML/Element/Input#attr-max) afin de restreindre les dates qui peuvent être saisies par l'utilisatrice ou l'utilisateur. Dans l'exemple suivant, on indique une date minimum au premier avril 2017 (`2017-04-01`) et une date maximale au 30 avril 2017 (`2017-04-30`) : ```html <form> - <div> - <label for="party">Veuillez choisir la meilleure date pour la soirée :</label> - <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-30"> - </div> + <label>Veuillez choisir la meilleure date pour la soirée : + <input type="date" name="party" min="2017-04-01" max="2017-04-30"> + </label> </form> ``` -{{EmbedLiveSample('Paramétrer_une_date_maximale_et_une_date_minimale', 600, 40)}} +{{EmbedLiveSample('', 600, 40)}} -On ne peut donc ici que sélectionner une date en avril 2017. Seule la partie du contrôle consacrée aux jours sera éditable et on ne pourra pas sélectionner d'autres mois ou années.. +On ne peut donc ici que sélectionner une date en avril 2017. Seule la partie du contrôle consacrée aux jours sera éditable et on ne pourra pas sélectionner d'autres mois ou années. -> **Note :** On devrait également pouvoir utiliser l'attribut {{htmlattrxref("step", "input")}} afin de faire varier le nombre de jours pour l'incrément de la date (par exemple afin de ne pouvoir sélectionner que les samedis). Cependant, cette fonctionnalité ne semble être présente dans aucune implémentation au moment où nous écrivons ces lignes. +> **Note :** On devrait également pouvoir utiliser l'attribut [`step`](/fr/docs/Web/HTML/Element/Input#attr-step) afin de faire varier le nombre de jours pour l'incrément de la date (par exemple afin de ne pouvoir sélectionner que les samedis). Cependant, cette fonctionnalité ne semble être présente dans aucune implémentation au moment où nous écrivons ces lignes. ### Contrôler la taille du champ de saisie -`<input type="date">` ne permet pas d'utiliser des attributs de dimensionnement tels que {{htmlattrxref("size", "input")}}. Il est nécessaire d'utiliser [CSS](/fr/docs/Web/CSS) pour adresser ces aspects de mise en forme. +`<input type="date">` ne permet pas d'utiliser des attributs de dimensionnement tels que [`size`](/fr/docs/Web/HTML/Element/Input#attr-size). Il est nécessaire d'utiliser [CSS](/fr/docs/Web/CSS) pour adresser ces aspects de mise en forme. ## Validation Par défaut `<input type="date">` n'applique pas de validation particulière aux valeurs saisies. Les interfaces utilisateur ne permettent généralement pas de saisir une valeur qui n'est pas une date ou qui est une date invalide (par exemple un 32 avril 2017). -Si on utilise les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} afin de restreindre les dates possibles, les navigateurs qui prennent en charge cette fonctionnalité afficheront une erreur si la valeur saisie est en dehors de cet intervalle. +Si on utilise les attributs [`min`](/fr/docs/Web/HTML/Element/Input#attr-min) et [`max`](/fr/docs/Web/HTML/Element/Input#attr-max) afin de restreindre les dates possibles, les navigateurs qui prennent en charge cette fonctionnalité afficheront une erreur si la valeur saisie est en dehors de cet intervalle. -De plus, si l'attribut {{htmlattrxref("required", "input")}} est actif, il sera obligatoire de saisir ce champ. Une erreur sera affichée si on essaie d'envoyer le formulaire avec un tel champ vide. +De plus, si l'attribut [`required`](/fr/docs/Web/HTML/Element/Input#attr-required) est actif, il sera obligatoire de saisir ce champ. Une erreur sera affichée si on essaie d'envoyer le formulaire avec un tel champ vide. -Prenons un exemple où la date est contrainte entre deux dates et que le champ est obligatoire : +Prenons un exemple où la date est contrainte entre deux dates et que le champ est obligatoire : ```html <form> - <div> - <label for="party">Sélectionner la meilleure date (entre le premier et le 20 avril) :</label> - <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-20" required> + <label> + Sélectionner la meilleure date (entre le premier et le 20 avril) : + <input type="date" name="party" min="2017-04-01" max="2017-04-20" required> <span class="validity"></span> - </div> - <div> - <input type="submit"> - </div> + </label> + + <p> + <button>Envoyer</button> + </p> </form> ``` -Si on essaie de soumettre le formulaire avec une date incomplète (ou en dehors de l'intervalle indiqué), le message affichera une erreur. Vous pouvez essayer ici : +Si on essaie de soumettre le formulaire avec une date incomplète (ou en dehors de l'intervalle indiqué), le message affichera une erreur. Vous pouvez essayer ici : -{{EmbedLiveSample('Validation', 600, 100)}} +{{EmbedLiveSample('', 600, 100)}} -Voici la feuille de style utilisée pour l'exemple. On utilise les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme un indicateur selon que la valeur est valide ou non. On place cet indicateur dans un élément {{htmlelement("span")}} séparé car pour Chrome, le contenu généré dans les pseudo-classes est intégré dans le contrôle du formulaire et ne peut être mis en forme ou affiché correctement. +Voici la feuille de style utilisée pour l'exemple. On utilise les pseudo-classes [`:valid`](/fr/docs/Web/CSS/:valid) et [`:invalid`](/fr/docs/Web/CSS/:invalid) afin de mettre en forme un indicateur selon que la valeur est valide ou non. On place cet indicateur dans un élément [`<span>`](/fr/docs/Web/HTML/Element/span) séparé car pour Chrome, le contenu généré dans les pseudo-classes est intégré dans le contrôle du formulaire et ne peut être mis en forme ou affiché correctement. ```css -div { - margin-bottom: 10px; +label { display: flex; align-items: center; } -label { - display: inline-block; - width: 300px; +span::after { + padding-left: 5px; } -input:invalid+span:after { +input:invalid + span:after { content: '✖'; - padding-left: 5px; } input:valid+span:after { content: '✓'; - padding-left: 5px; } ``` @@ -174,9 +195,9 @@ input:valid+span:after { Comme indiqué ci-avant, le principal problème qu'on rencontre avec ces contrôles est l'hétérogénéité de la prise en charge par les différents navigateurs. -Les navigateurs qui ne prennent pas en charge ces contrôles utiliseront à la place des champs texte. Toutefois, cette solution de contournement entraîne deux problèmes : le premier concerne l'homogénéité de l'interface utilisateur (le contrôle affiché ne sera pas le même) et le second concerne la gestion des données. +Les navigateurs qui ne prennent pas en charge ces contrôles utiliseront à la place des champs texte. Toutefois, cette solution de contournement entraîne deux problèmes : le premier concerne l'homogénéité de l'interface utilisateur (le contrôle affiché ne sera pas le même) et le second concerne la gestion des données. -C'est sur ce second point qu'il y a le plus de risques. Comme nous l'avons mentionné avant, un champ date est toujours normalisé sous la forme `yyyy-mm-dd` (les chiffres de l'année, un tiret, les chiffres du mois, un tiret, les chiffres du jour). Toutefois, pour un champ texte, les navigateurs ne reconnaissant pas le format dans lequel la date doit être écrite. Or, selon les langues, régions, pays, les personnes écrivent les dates de différentes façons. On pourrait ainsi avoir des dates écrites comme : +C'est sur ce second point qu'il y a le plus de risques. Comme nous l'avons mentionné avant, un champ date est toujours normalisé sous la forme `yyyy-mm-dd` (les chiffres de l'année, un tiret, les chiffres du mois, un tiret, les chiffres du jour). Toutefois, pour un champ texte, les navigateurs ne reconnaissant pas le format dans lequel la date doit être écrite. Or, selon les langues, régions, pays, les personnes écrivent les dates de différentes façons. On pourrait ainsi avoir des dates écrites comme : - `ddmmyyyy` - `dd/mm/yyyy` @@ -184,126 +205,120 @@ C'est sur ce second point qu'il y a le plus de risques. Comme nous l'avons menti - `dd-mm-yyyy` - `mm-dd-yyyy` -Une méthode permettant de parer à cette éventualité est d'utiliser l'attribut {{htmlattrxref("pattern", "input")}}. Bien que celui-ci ne soit pas utilisé pour les contrôles de saisie des dates, il peut être utilisé pour le champ texte. Voici un exemple que vous pouvez consulter dans un navigateur qui ne prend pas en charge cette fonctionnalité : +Une méthode permettant de parer à cette éventualité est d'utiliser l'attribut [`pattern`](/fr/docs/Web/HTML/Element/Input#attr-pattern). Bien que celui-ci ne soit pas utilisé pour les contrôles de saisie des dates, il peut être utilisé pour le champ texte. Voici un exemple que vous pouvez consulter dans un navigateur qui ne prend pas en charge cette fonctionnalité : ```html <form> - <div> - <label for="bday">Veuillez saisir votre date de naissance :</label> - <input type="date" id="bday" name="bday" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"> + <label>Veuillez saisir votre date de naissance : + <input type="date" name="bday" required pattern="\d{4}-\d{2}-\d{2}"> <span class="validity"></span> - </div> - <div> - <input type="submit"> - </div> + </label> + <p> + <button>Envoyer</button> + </p> </form> ``` -{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}} +{{EmbedLiveSample('', 600, 100)}} Si vous tentez d'envoyer ce formulaire, vous pourrez voir que le navigateur affiche un message d'erreur et met en évidence la valeur invalide si la valeur saisie ne correspond pas au motif `nnnn-nn-nn` (avec `n` un chiffre entre 0 et 9). Bien entendu, cela n'empêche pas de saisir des dates invalides ou mal formatées (par exemple avec le motif `yyyy-dd-mm` alors qu'on souhaiterait avoir `yyyy-mm-dd`). Il reste donc un problème. ```css hidden -div { - margin-bottom: 10px; -} - -input:invalid + span { +span { position: relative; } -input:invalid + span:after { - content: '✖'; - position: absolute; +span::after { right: -18px; + position: absolute; } -input:valid + span { - position: relative; +input:invalid + span::after { + content: '✖'; } -input:valid + span:after { +input:valid + span::after { content: '✓'; - position: absolute; - right: -18px; } ``` -C'est pour cela que la meilleure solution consiste à avoir trois champs de saisie distincts à destination de l'utilisateur : un pour saisir les jours, le deuxième pour les mois et un troisième pour l'année (chacun avec un élément ({{htmlelement("select")}}). On peut également opter pour l'utilisation d'un bibliothèque JavaScript telle que [le sélecteur de date jQuery (jQuery date picker)](https://jqueryui.com/datepicker/). +C'est pour cela que la meilleure solution consiste à avoir trois champs de saisie distincts à destination de l'utilisatrice ou l'utilisateur : un pour saisir les jours, le deuxième pour les mois et un troisième pour l'année (chacun avec un élément ([`<select>`](/fr/docs/Web/HTML/Element/select)). On peut également opter pour l'utilisation d'une bibliothèque JavaScript telle que [le sélecteur de date jQuery (<i lang="en">jQuery date picker</i>)](https://jqueryui.com/datepicker/). ## Exemples -Dans l'exemple qui suit, on crée deux éléments d'interface utilisateur afin de choisir une date : le premier qui utilise un sélecteur natif `<input type="date">` et un second qui utilise trois éléments {{htmlelement("select")}} qui permettra de choisir une date pour les anciens navigateurs qui ne prendraient pas en charge le contrôle natif. +Dans l'exemple qui suit, on crée deux éléments d'interface utilisateur afin de choisir une date : le premier qui utilise un sélecteur natif `<input type="date">` et un second qui utilise trois éléments [`<select>`](/fr/docs/Web/HTML/Element/select) qui permettra de choisir une date pour les anciens navigateurs qui ne prendraient pas en charge le contrôle natif. -{{EmbedLiveSample('Exemples', 600, 100)}} +{{EmbedLiveSample('', 600, 100)}} -Voici le code HTML utilisé : +Voici le code HTML utilisé : ```html <form> - <div class="nativeDatePicker"> - <label for="bday">Veuillez saisir votre date de naissance :</label> - <input type="date" id="bday" name="bday"> - <span class="validity"></span> - </div> - <p class="fallbackLabel">Veuillez saisir votre date de naissance :</p> - <div class="fallbackDatePicker"> - <span> - <label for="day">Jour :</label> - <select id="day" name="day"> - </select> - </span> - <span> - <label for="month">Mois :</label> - <select id="month" name="month"> - <option selected>Janvier</option> - <option>Février</option> - <option>Mars</option> - <option>Avril</option> - <option>Mai</option> - <option>Juin</option> - <option>Juillet</option> - <option>Août</option> - <option>Septembre</option> - <option>Octobre</option> - <option>Novembre</option> - <option>Décembre</option> - </select> - </span> - <span> - <label for="year">Année :</label> - <select id="year" name="year"> - </select> - </span> - </div> + <div class="nativeDatePicker"> + <label for="bday">Veuillez saisir votre date de naissance :</label> + <input type="date" id="bday" name="bday"> + <span class="validity"></span> + </div> + <p class="fallbackLabel">Veuillez saisir votre date de naissance :</p> + <div class="fallbackDatePicker"> + <span> + <label for="day">Jour :</label> + <select id="day" name="day"> + </select> + </span> + <span> + <label for="month">Mois :</label> + <select id="month" name="month"> + <option selected>Janvier</option> + <option>Février</option> + <option>Mars</option> + <option>Avril</option> + <option>Mai</option> + <option>Juin</option> + <option>Juillet</option> + <option>Août</option> + <option>Septembre</option> + <option>Octobre</option> + <option>Novembre</option> + <option>Décembre</option> + </select> + </span> + <span> + <label for="year">Année :</label> + <select id="year" name="year"> + </select> + </span> + </div> </form> ``` -Les mois sont écrits « en dur » (ce sont toujours les mêmes) alors que les valeurs pour les jours et les années sont générées dynamiquement en fonction du mois et de l'année sélectionnées (voir les commentaires ci-après qui expliquent le détail des fonctions). +Les mois sont écrits « en dur » (ce sont toujours les mêmes) alors que les valeurs pour les jours et les années sont générées dynamiquement en fonction du mois et de l'année sélectionnées (voir les commentaires ci-après qui expliquent le détail des fonctions). ```css hidden -input:invalid+span:after { - content: '✖'; +span { padding-left: 5px; } -input:valid+span:after { +input:invalid + span::after { + content: '✖'; +} + +input:valid + span::after { content: '✓'; - padding-left: 5px; } ``` -Une autre partie intéressante est celle où on détecte si le navigateur prend charge la fonctionnalité native `<input type="date">`. Pour cela, on crée un nouvelle élément {{htmlelement("input")}} et on change son type en `date` puis ensuite, on vérifie immédiatement la valeur de son type : pour les navigateurs qui ne prennent pas en charge l'élément natif, ils renverront la valeur `text` car l'élément natif aura été « converti ». Dans ce cas, on masque le sélecteur natif et on affiche le sélecteur alternatif (celui qui contient les éléments {{htmlelement("select")}}). +Une autre partie intéressante est celle où on détecte si le navigateur prend charge la fonctionnalité native `<input type="date">`. Pour cela, on crée un nouvel élément [`<input>`](/fr/docs/Web/HTML/Element/Input) et on change son type en `date`, puis on vérifie immédiatement la valeur de son type : pour les navigateurs qui ne prennent pas en charge l'élément natif, ils renverront la valeur `text`, car l'élément natif aura été « converti ». Dans ce cas, on masque le sélecteur natif et on affiche le sélecteur alternatif (celui qui contient les éléments [`<select>`](/fr/docs/Web/HTML/Element/select)). ```js // On définit les différentes variables -var nativePicker = document.querySelector('.nativeDatePicker'); -var fallbackPicker = document.querySelector('.fallbackDatePicker'); -var fallbackLabel = document.querySelector('.fallbackLabel'); +let nativePicker = document.querySelector('.nativeDatePicker'); +let fallbackPicker = document.querySelector('.fallbackDatePicker'); +let fallbackLabel = document.querySelector('.fallbackLabel'); -var yearSelect = document.querySelector('#year'); -var monthSelect = document.querySelector('#month'); -var daySelect = document.querySelector('#day'); +let yearSelect = document.querySelector('#year'); +let monthSelect = document.querySelector('#month'); +let daySelect = document.querySelector('#day'); // Initialement, on masque le sélecteur non-natif fallbackPicker.style.display = 'none'; @@ -311,8 +326,14 @@ fallbackLabel.style.display = 'none'; // On teste si l'élément <input type="date"> // se transforme en <input type="text"> -var test = document.createElement('input'); -test.type = 'date'; +let test = document.createElement('input'); + +try { + test.type = 'date'; +} catch (e) { + console.log(e.description); +} + // Si c'est le cas, cela signifie que l'élément // n'est pas pris en charge et if(test.type === 'text') { @@ -337,7 +358,7 @@ function populateDays(month) { // On crée une variable afin de contenir le nombre // de jours à afficher - var dayNum; + let dayNum; // 31 ou 30 jours ? if(month === 'Janvier' || month === 'Mars' || month === 'Mai' || month === 'Juillet' || month === 'Août' || month === 'Octobre' || month === 'Décembre') { @@ -346,8 +367,8 @@ function populateDays(month) { dayNum = 30; } else { // Si le mois est février, on calcule si l'année est bissextile - var year = yearSelect.value; - var leap = new Date(year, 1, 29).getMonth() == 1; + let year = yearSelect.value; + let leap = new Date(year, 1, 29).getMonth() == 1; dayNum = leap ? 29 : 28; } @@ -355,7 +376,7 @@ function populateDays(month) { // d'éléments <option> pour l'élément <select> // pour la journée for(i = 1; i <= dayNum; i++) { - var option = document.createElement('option'); + let option = document.createElement('option'); option.textContent = i; daySelect.appendChild(option); } @@ -385,14 +406,14 @@ function populateDays(month) { function populateYears() { // On obtient l'année courante - var date = new Date(); - var year = date.getFullYear(); + let date = new Date(); + let year = date.getFullYear(); // On affiche l'année courante et les 100 années // précédentes pour l'élément <select> destiné à // stocker l'année - for(var i = 0; i <= 100; i++) { - var option = document.createElement('option'); + for(let i = 0; i <= 100; i++) { + let option = document.createElement('option'); option.textContent = year-i; yearSelect.appendChild(option); } @@ -409,9 +430,9 @@ monthSelect.onchange = function() { } // On conserve le jour sélectionné -var previousDay; +let previousDay; -// On met à jour la journée utilisé précédemment +// On met à jour la journée utilisée précédemment // (voir la fin de populateDays() pour voir où // est utilisée cette valeur) daySelect.onchange = function() { @@ -419,63 +440,19 @@ daySelect.onchange = function() { } ``` -> **Note :** Attention, certaines années peuvent contenir 53 semaines ! (cf. [cet article Wikipédia](https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year)) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles. - -## Résumé technique - -<table class="properties"> - <tbody> - <tr> - <td><strong>{{anch("Valeur")}}</strong></td> - <td> - Une chaîne de caractères ({{domxref("DOMString")}}) qui - représente une date ou qui est vide. - </td> - </tr> - <tr> - <td><strong>Évènements</strong></td> - <td>{{event("change")}} et {{event("input")}}</td> - </tr> - <tr> - <td><strong>Attributs pris en charge</strong></td> - <td> - {{htmlattrxref("autocomplete", "input")}}, - {{htmlattrxref("list", "input")}}, - {{htmlattrxref("readonly", "input")}} et - {{htmlattrxref("step", "input")}} - </td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td> - <code>list</code>, <code>value</code>, <code>valueAsDate</code>, - <code>valueAsNumber</code>. - </td> - </tr> - <tr> - <td><strong>Méthodes</strong></td> - <td> - {{domxref("HTMLInputElement.select", "select()")}}, - {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, - {{domxref("HTMLInputElement.stepUp", "stepUp()")}} - </td> - </tr> - </tbody> -</table> +> **Note :** Attention, certaines années peuvent contenir 53 semaines ! (cf. [cet article Wikipédia (en anglais)](https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year)) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles. ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'forms.html#date-state-(type=date)', '<input type="date">')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'forms.html#date-state-(type=date)', '<input type="date">')}} | {{Spec2('HTML5 W3C')}} | | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("html.elements.input.input-date")}} +{{Compat}} ## Voir aussi -- L'élément générique {{HTMLElement("input")}} et l'interface DOM qu'il implémente : {{domxref("HTMLInputElement")}} -- [Un tutoriel sur les sélecteurs de date et d'heure](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#date) -- [Les formats de date et d'heure utilisés en HTML](/fr/docs/Web/HTML/Formats_date_heure_HTML) +- L'élément générique [`<input>`](/fr/docs/Web/HTML/Element/Input) et l'interface DOM qui le porte : [`HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement) +- [Un tutoriel sur les sélecteurs de date et d'heure](/fr/docs/Learn/Forms/Basic_native_form_controls#sélection_de_date_et_heure) +- [Les formats de date et d'heure utilisés en HTML](/fr/docs/Web/HTML/Date_and_time_formats) +- [La compatibilité des propriétés CSS pour les éléments de formulaire](/fr/docs/Learn/Forms/Property_compatibility_table_for_form_controls) diff --git a/files/fr/web/html/element/input/datetime-local/index.md b/files/fr/web/html/element/input/datetime-local/index.md index a5d22bfb05..840721237f 100644 --- a/files/fr/web/html/element/input/datetime-local/index.md +++ b/files/fr/web/html/element/input/datetime-local/index.md @@ -1,190 +1,199 @@ --- title: <input type="datetime-local"> -slug: Web/HTML/Element/Input/datetime-local -tags: - - Date - - Element - - Formulaires - - HTML - - Input - - Reference +slug: Web/HTML/Element/input/datetime-local translation_of: Web/HTML/Element/input/datetime-local +browser-compat: html.elements.input.input-datetime-local --- -{{HTMLRef}} +{{HTMLRef("Input_types")}} -Les éléments {{htmlelement("input")}} dont l'attribut `type` vaut **`"datetime-local"`** permettent de créer des champs destinés à saisir simplement une date (définie par une année, un mois, et un jour) et une heure (définie par une heure et une minute). Il n'y a pas de secondes dans ce contrôle. +Les éléments [`<input>`](/fr/docs/Web/HTML/Element/Input) dont l'attribut `type` vaut **`"datetime-local"`** permettent de créer des champs destinés à saisir simplement une date (définie par une année, un mois, et un jour) et une heure (définie par une heure et une minute). Il n'y a pas de secondes dans ce contrôle. {{EmbedInteractiveExample("pages/tabbed/input-datetime-local.html", "tabbed-shorter")}} -L'interface utilisateur du contrôle varie selon les navigateurs. La prise en charge de cette fonctionnalité est hétérogène : Chrome/Opera et Edge l'implémentent pour les navigateurs de bureau et la plupart des navigateurs mobiles l'implémentent. Pour les navigateurs qui n'implémentent pas cette fonctionnalité, le contrôle utilisé est celui de [`<input type="text">`](/fr/docs/Web/HTML/Element/input/text). +L'interface utilisateur du contrôle varie selon les navigateurs. La prise en charge de cette fonctionnalité est hétérogène : Chrome/Opera et Edge l'implémentent pour les navigateurs de bureau et la plupart des navigateurs mobiles l'implémentent. Pour les navigateurs qui n'implémentent pas cette fonctionnalité, le contrôle utilisé est celui de [`<input type="text">`](/fr/docs/Web/HTML/Element/Input/text). -Les secondes ne sont pas prises en charge. - -Le contrôle est spécifié afin de pouvoir représenter une heure et une date locales et _pas nécessairement la date et l'heure locale de l'utilisateur_. Autrement dit, une implémentation devrait autoriser toute combinaison valide (d'année / mois / jour / heure / minutes) même si cette combinaison n'est pas valide pour le fuseau horaire de l'utilisateur (par exemple pour les fuseaux horaires qui ne gèrent pas les heures d'été). Certains navigateurs mobiles (sur iOS par exemple) n'implémentent pas cette règle correctement. +Le contrôle est spécifié afin de pouvoir représenter une heure et une date locales et _pas nécessairement la date et l'heure locale de l'utilisatrice ou l'utilisateur_. Autrement dit, une implémentation devrait autoriser toute combinaison valide (d'année / mois / jour / heure / minutes) même si cette combinaison n'est pas valide pour le fuseau horaire de l'utilisatrice ou l'utilisateur (par exemple pour les fuseaux horaires qui ne gèrent pas les heures d'été). Certains navigateurs mobiles (sur iOS par exemple) n'implémentent pas cette règle correctement. En raison du faible support pour `datetime-local` et des variations dans ses implémentations, mieux vaudra peut-être encore (juillet 2019) utiliser un _framework_ ou une bibliothèque pour une telle saisie. Une autre option consiste à séparer les champs pour la date (`type="date"`) et pour l'heure (`type="time"`) qui sont mieux pris en charge. Certains navigateurs pourront utiliser un contrôle avec un texte simple et vérifier que la valeur date/heure est correcte avant de l'envoyer au serveur. Toutefois, ce contrôle ayant lieu côté client, vous devrez nécessairement vérifier le bon format de la donnée côté serveur. +<table class="properties"> + <tbody> + <tr> + <td><strong>Valeur<strong></td> + <td>Une chaîne de caractères (<a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>) qui représente une date et une heure (selon le fuseau horaire local) ou bien une chaîne de caractères vide.</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td><a href="/fr/docs/Web/API/HTMLElement/change_event"><code>change</code></a>, <a href="/fr/docs/Web/API/HTMLElement/Input_event"><code>input</code></a></td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td><a href="/fr/docs/Web/HTML/Element/Input#attr-autocomplete"><code>autocomplete</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-list"><code>list</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-readonly"><code>readonly</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-step"><code>step</code></a></td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code>.</td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td><a href="/fr/docs/Web/API/HTMLInputElement/select"><code>select()</code></a>, <a href="/fr/docs/Web/API/HTMLInputElement/stepDown"><code>stepDown()</code></a>, <a href="/fr/docs/Web/API/HTMLInputElement/stepUp"><code>stepUp()</code></a>.</td> + </tr> + </tbody> +</table> + ## Valeur -Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de la date saisie dans le contrôle. Le format utilisable est décrit dans [cette section de l'article sur les formats](/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates_et_heures_locales). Il est possible d'indiquer une date par défaut grâce à l'attribut {{htmlattrxref("value", "input")}} : +Une chaîne de caractères ([`DOMString`](/fr/docs/Web/API/DOMString)) qui représente la valeur de la date saisie dans le contrôle. Le format utilisable est décrit dans [cette section de l'article sur les formats](/fr/docs/Web/HTML/Date_and_time_formats). Il est possible d'indiquer une date par défaut grâce à l'attribut [`value`](/fr/docs/Web/HTML/Element/Input#attr-value) : ```html <label for="party">Veuillez saisir une date et une heure pour la fête :</label> <input id="party" type="datetime-local" name="partydate" value="2017-06-01T08:30"> ``` -{{EmbedLiveSample('Valeur', 600, 60)}} +{{EmbedLiveSample('', 600, 60)}} -On notera ici que le format de la date affichée n'est pas celui utilisé pour écrire la valeur de l'attribut `value`. Le format d'affichage de la date sera choisi en fonction de la locale du système d'exploitation de l'utilisateur. En revanche, l'attribut `value` sera toujours formaté de la façon suivante : `yyyy-MM-ddThh:mm`. Lorsque la valeur est envoyée au serveur, elle aura donc ce format : `partydate=2017-06-01T08:30`. +On notera ici que le format de la date affichée n'est pas celui utilisé pour écrire la valeur de l'attribut `value`. Le format d'affichage de la date sera choisi en fonction de la locale du système d'exploitation de l'utilisatrice ou l'utilisateur. En revanche, l'attribut `value` sera toujours formaté de la façon suivante : `yyyy-MM-ddThh:mm`. Lorsque la valeur est envoyée au serveur, elle aura donc ce format : `partydate=2017-06-01T08:30`. -> **Note :** Attention si les données sont envoyées avec la méthode HTTP [`GET`](/fr/docs/HTTP/Méthode/GET), les deux points (:) devront être échappés pour être intégrés dans les paramètres de l'URL. Avec l'exemple précédent, cela signifie qu'on enverra `partydate=2017-06-01T08%3A30`. Si on souhaite échapper une chaîne de caractères de la même façon en JavaScript, on pourra utiliser {{jsxref("Objets_globaux/encodeURI", "encodeURI()")}}. +> **Note :** Attention si les données sont envoyées avec la méthode HTTP [`GET`](/fr/docs/Web/HTTP/Methods/GET), les deux points (`:`) devront être échappés pour être intégrés dans les paramètres de l'URL. Avec l'exemple précédent, cela signifie qu'on enverra `partydate=2017-06-01T08%3A30`. Si on souhaite échapper une chaîne de caractères de la même façon en JavaScript, on pourra utiliser [`encodeURI()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/encodeURI). -En JavaScript, Il est également possible de définir la valeur de la date utilisée dans le contrôle via la propriété {{domxref("HTMLInputElement.value")}}. Par exemple : +En JavaScript, Il est également possible de définir la valeur de la date utilisée dans le contrôle via la propriété `value` rattachée à [l'interface `HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement). Par exemple : ```js -var dateControl = document.querySelector('input[type="datetime-local"]'); -date.value = '2017-06-01T08:30'; +let dateControl = document.querySelector('input[type="datetime-local"]'); +dateControl.value = '2017-06-01T08:30'; ``` -Plusieurs méthodes, fournies par JavaScript (cf. {{jsxref("Date")}}), peuvent être utilisée afin de convertir des informations numériques en une telle chaîne de caractères (par exemple la méthode {{jsxref("Date.toISOString()")}}). +Plusieurs méthodes, fournies par JavaScript (cf. [`Date`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date)), peuvent être utilisées afin de convertir des informations numériques en une telle chaîne de caractères (par exemple la méthode [`Date.toISOString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)). ## Attributs supplémentaires -En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de type `"date"` gèrent les attributs suivants : - -| Attribut | Description | -| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | -| `{{anch("max")}}` | La date la plus avancée qui peut être saisie. | -| `{{anch("min")}}` | La date la plus reculée qui peut être saisie. | -| `{{anch("step")}}` | Le pas à utiliser pour l'incrément quand on utilise les boutons d'augmentation/diminution. Cet incrément est également utilisé pour la validation. | +En complément des attributs communs à l'ensemble des éléments [`<input>`](/fr/docs/Web/HTML/Element/Input), les champs de type `"date"` gèrent les attributs suivants. -### {{htmlattrdef("max")}} +### `max` -La date/heure la plus avancée qui peut être saisie dans le contrôle. Si la valeur de {{htmlattrxref("value", "input")}} est supérieure à la date indiquée par cet attribut, l'élément ne respectera pas [les contraintes de validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur de l'attribut `max` n'est pas une chaîne de caractères qui suit le format `"yyyy-MM-ddThh:mm"`, il n'y aura pas de valeur maximale. +La date/heure la plus avancée qui peut être saisie dans le contrôle. Si la valeur de [`value`](/fr/docs/Web/HTML/Element/Input#attr-value) est supérieure à la date indiquée par cet attribut, l'élément ne respectera pas [les contraintes de validation](/fr/docs/Web/Guide/HTML/Constraint_validation). Si la valeur de l'attribut `max` n'est pas une chaîne de caractères qui suit le format `"yyyy-MM-ddThh:mm"`, il n'y aura pas de valeur maximale. La valeur de cet attribut doit être une date supérieure ou égale à celle indiquée par l'attribut `min`. -### {{htmlattrdef("min")}} +### `min` -La date/heure minimale qui peut être saisie dans le contrôle. Toute date/heure saisie antérieure à celle-ci ne respectera pas [les contraintes de validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur de l'attribut `min` n'est pas une chaîne de caractères qui suit le format `"yyyy-MM-ddThh:mm"`, il n'y aura pas de valeur minimale. +La date/heure minimale qui peut être saisie dans le contrôle. Toute date/heure saisie antérieure à celle-ci ne respectera pas [les contraintes de validation](/fr/docs/Web/Guide/HTML/Constraint_validation). Si la valeur de l'attribut `min` n'est pas une chaîne de caractères qui suit le format `"yyyy-MM-ddThh:mm"`, il n'y aura pas de valeur minimale. La valeur de cet attribut doit être une date antérieure ou égale à celle indiquée par l'attribut `max`. -### {{htmlattrdef("step")}} +### `step` -{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}} +L'attribut `step` est un nombre qui indique le « pas » suivi par le compteur. Il peut également prendre la valeur spéciale `any` (décrite ci-après). Seules les valeurs qui suivent cette progression (à partir de `min` ou de `value` si ces attributs sont fournis) seront considérées comme valides. -Pour les champs `datetime-local`, la valeur de l'attribut `step` est exprimée en secondes avec un facteur d'amplification de 1000 (pour passer des millisecondes aux secondes). La valeur par défaut de `step` est 60 (soit 1 minute ou 60 000 millisecondes). +Une chaîne de caractères `any` indique qu'aucune contrainte de pas n'est appliquée et que n'importe quelle valeur (sous réserve qu'elle respecte les autres contraintes potentiellement indiquées par `min` ou `max`) est valide. + +> **Note :** Lorsque les données saisies par l'utilisatrice ou l'utilisateur ne respectent pas cette contrainte, l'agent utilisateur pourra arrondir à la valeur valide la plus proche, avec une préférence pour les dates les plus avancées quand deux dates sont aussi proches de la valeur saisie. + +Pour les champs `datetime-local`, la valeur de l'attribut `step` est exprimée en secondes avec un facteur d'amplification de 1000 (pour passer des millisecondes aux secondes). La valeur par défaut de `step` est 60 (soit 1 minute ou 60 000 millisecondes). _À l'heure où ces lignes sont écrites, la signification de la valeur `any` pour l'attribut `step` pour les champs `datetime-local` n'est pas certaine. Cette information sera mise à jour dès que possible._ ## Utiliser les contrôles `datetime-local` -Ces contrôles sont pratiques : ils permettent d'utiliser une interface simple pour sélectionner une date et une heure et en plus, ils normalisent la valeur saisie avant de l'envoyer au sereveur, quelle que soit la locale de l'utilisateur. Toutefois, il existe actuellement des problèmes liés à la prise en charge partielle de `<input type="datetime-local">` dans les différents navigateurs. +Ces contrôles sont pratiques : ils permettent d'utiliser une interface simple pour sélectionner une date et une heure et en plus, ils normalisent la valeur saisie avant de l'envoyer au serveur, quelle que soit la locale de l'utilisatrice ou l'utilisateur. Toutefois, il existe actuellement des problèmes liés à la prise en charge partielle de `<input type="datetime-local">` dans les différents navigateurs. Dans les exemples suivants, nous verrons certains cas d'utilisation plus complexes puis nous traiterons de l'adaptation nécessaire en fonction de la prise en charge des navigateurs. ### Utilisation simple de `datetime-local` -Dans sa forme la plus simple, `<input type="datetime-local">` peut s'utilisere avec un élément `<input>` et un élément {{htmlelement("label")}} comme ceci : +Dans sa forme la plus simple, `<input type="datetime-local">` peut s'utiliser avec un élément `<input>` et un élément [`<label>`](/fr/docs/Web/HTML/Element/Label) comme ceci : ```html <form> - <label for="party">Veuillez choisir une date et une heure pour la fête :</label> - <input id="party" type="datetime-local" name="partydate"> + <label for="party">Veuillez choisir une date et une heure pour la fête :</label> + <input id="party" type="datetime-local" name="partydate"> </form> ``` -{{EmbedLiveSample('Utilisation_simple_de_datetime-local', 600, 40)}} +{{EmbedLiveSample('', 600, 40)}} ### Paramétrer des dates et heures minimales/maximales -Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de restreindre la fenêtre de dates qu'il est possible de choisir. Dans l'exemple qui suit, on indique une date/heure minimale au `2017-06-01T08:30` et une date maximale au `2017-06-30T16:30`: +Les attributs `min` et `max` permettent de restreindre la fenêtre de dates qu'il est possible de choisir. Dans l'exemple qui suit, on indique une date/heure minimale au `2017-06-01T08:30` et une date maximale au `2017-06-30T16:30` : ```html - <form> - <label for="party">Veuillez choisir une date et une heure pour la fête :</label> - <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30"> - </form> +<form> + <label for="party">Veuillez choisir une date et une heure pour la fête :</label> + <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30"> +</form> ``` -{{EmbedLiveSample('Paramétrer_des_dates_et_heures_minimales/maximales', 600, 40)}} +{{EmbedLiveSample('', 600, 40)}} -Par conséquent : +Par conséquent : -- Seuls les jours de juin 2017 peuvent être sélectionnés et seules les heures entre 08h30 et 16h30 pourront être sélectionnées.. -- Selon le navigateur utilisé, il est possible ou non de sélectionner des heures invalides (cf. {{anch("Validation")}}). +- Seuls les jours de juin 2017 peuvent être sélectionnés et seules les heures entre 08h30 et 16h30 pourront être sélectionnées. +- Selon le navigateur utilisé, il est possible ou non de sélectionner des heures invalides (cf. [Validation](#validation)). -> **Note :** L'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être utilisé afin de faire varier l'incrément, en jours, pour sélectionner la date (par exemple afin de ne pouvoir sélectionner que les samedi). En revanche, à l'heure où nous rédigeons cet article, aucune implémentation ne semble proposer cette fonctionnalité. +> **Note :** L'attribut `step` devrait pouvoir être utilisé afin de faire varier l'incrément, en jours, pour sélectionner la date (par exemple afin de ne pouvoir sélectionner que les samedi). En revanche, à l'heure où nous rédigeons cet article, aucune implémentation ne semble proposer cette fonctionnalité. ### Contrôler la taille du champ -`<input type="datetime-local">` ne prend pas en charge des attributs tels que {{htmlattrxref("size", "input")}}. Il est nécessaire d'utiliser [CSS](/fr/docs/Web/CSS) pour les problèmes relatifs au dimensionnement. +`<input type="datetime-local">` ne prend pas en charge des attributs tels que `size`. Il est nécessaire d'utiliser [CSS](/fr/docs/Web/CSS) pour les problèmes relatifs au dimensionnement. ### Paramétrer le fuseau horaire -Les champs `datetime-local` ne permettent pas d'indiquer le fuseau horaire de la date/heure utilisée. Cette caractéristique était disponible pour les champs de type [`datetime`](/fr/docs/Web/HTML/Element/input/datetime) qui est désormais obsolète (retiré de la spécification). Ce type de champ a été retiré en raison d'un manque d'implémentation de la part des navigateurs et des problèmes relatifs à l'ergonomie. Il est plus simple d'avoir un contrôle séparé pour indiquer le fuseau horaire. +Les champs `datetime-local` ne permettent pas d'indiquer le fuseau horaire de la date/heure utilisée. Cette caractéristique était disponible pour les champs de type [`datetime`](/fr/docs/Web/HTML/Element/Input/datetime) qui est désormais obsolète (retiré de la spécification). Ce type de champ a été retiré en raison d'un manque d'implémentation de la part des navigateurs et des problèmes relatifs à l'ergonomie. Il est plus simple d'avoir un contrôle séparé pour indiquer le fuseau horaire. -Ainsi, si vous créez un système où l'utilisateur est déjà connecté et que le fuseau horaire est déjà connu, celui-ci peut être fourni via un champ de type [`hidden`](/fr/docs/Web/HTML/Element/input/hidden). Par exemple : +Ainsi, si vous créez un système où l'utilisatrice ou l'utilisateur est déjà connecté et que le fuseau horaire est déjà connu, celui-ci peut être fourni via un champ de type [`hidden`](/fr/docs/Web/HTML/Element/Input/hidden). Par exemple : ```html <input type="hidden" id="timezone" name="timezone" value="-08:00"> ``` -Sinon, on peut proposer la sélection d'un fuseau horaire grâce à un élément {{htmlelement("select")}} : +Sinon, on peut proposer la sélection d'un fuseau horaire grâce à un élément [`<select>`](/fr/docs/Web/HTML/Element/select) : ```html -<select name="timezone_offset" id="timezone-offset" class="span5"> - <option value="-12:00">(GMT -12:00) Eniwetok, Kwajalein</option> - <option value="-11:00">(GMT -11:00) Midway Island, Samoa</option> - <option value="-10:00">(GMT -10:00) Hawaii</option> - <option value="-09:50">(GMT -9:30) Taiohae</option> - <option value="-09:00">(GMT -9:00) Alaska</option> - <option value="-08:00">(GMT -8:00) Pacific Time (US & Canada)</option> - - ... - +<select name="timezone" id="timezone"> + <option value="Pacific/Kwajalein">Eniwetok, Kwajalein</option> + <option value="Pacific/Midway">Midway Island, Samoa</option> + <option value="Pacific/Honolulu">Hawaii</option> + <option value="Pacific/Marquesas">Taiohae</option> + <!-- et ainsi de suite --> </select> ``` Dans ces deux situations, le fuseau horaire et la date sont transmis au serveur séparément (c'est côté serveur que le choix de la représentation pour le stockage est effectué). -> **Note :** Le fragment de code précédent est tiré de [Tous les fuseaux horaires du monde dans un élément `<select>`](https://gist.github.com/nodesocket/3919205). - ## Validation Par défaut, `<input type="datetime-local">` n'applique pas de validation aux valeurs saisies. C'est l'interface utilisateur du contrôle qui ne permet pas de saisir autre chose qu'une date et une heure (ce qui est utile) mais il est toujours possible de ne saisir aucune valeur ou de saisir une valeur invalide (le 32 avril par exemple). -Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de restreindre les dates disponibles et {{htmlattrxref("required", "input")}} rend la date obligatoire. Dans ces cas, les navigateurs afficheront un message d'erreur si on essaie d'envoyer une date en dehors de l'intervalle ou une date vide. +Les attributs `min` et `max` permettent de restreindre les dates disponibles et `required` rend la date obligatoire. Dans ces cas, les navigateurs afficheront un message d'erreur si on essaie d'envoyer une date en dehors de l'intervalle ou une date vide. -Prenons un exemple avec des dates mini/maxi et le champ obligatoire : +Prenons un exemple avec des dates mini/maxi et le champ obligatoire : ```html <form> - <div> - <label for="party">Veuillez choisir une date et une heure pour la fête (obligatoire, entre le 1er juin, 8h30 et le 30 juin, 16h30) :</label> - <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30" required> - <span class="validity"></span> - </div> - <div> - <input type="submit" value="Réserver !"> - </div> + <div> + <label for="party">Veuillez choisir une date et une heure pour la fête (obligatoire, entre le 1er juin, 8h30 et le 30 juin, 16h30) :</label> + <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30" required> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="Réserver !"> + </div> </form> ``` -Si vous essayez d'envoyer le formulaire avec une date incomplète ou en dehors de l'intervalle indiqué, le navigateur affichera une erreur. Voici le résultat : +Si vous essayez d'envoyer le formulaire avec une date incomplète ou en dehors de l'intervalle indiqué, le navigateur affichera une erreur. Voici le résultat : -{{EmbedLiveSample('Validation', 600, 120)}} +{{EmbedLiveSample('', 600, 120)}} -Vous trouverez ensuite la feuille de style CSS utilisée pour l'exemple. On utilise les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que sa valeur est valide ou non. Les icônes indicatives sont placées dans un élément {{htmlelement("span")}} séparé car, sous Chrome, le contenu généré automatiquement est placé à l'intériur du contrôle et ne peut pas être affiché/mis en forme efficacement. +Vous trouverez ensuite la feuille de style CSS utilisée pour l'exemple. On utilise les pseudo-classes [`:valid`](/fr/docs/Web/CSS/:valid) et [`:invalid`](/fr/docs/Web/CSS/:invalid) afin de mettre en forme le contrôle selon que sa valeur est valide ou non. Les icônes indicatives sont placées dans un élément [`<span>`](/fr/docs/Web/HTML/Element/span) séparé car, sous Chrome, le contenu généré automatiquement est placé à l'intérieur du contrôle et ne peut pas être affiché/mis en forme efficacement. ```css div { - margin-bottom: 10px; - display: flex; - align-items: center; + margin-bottom: 10px; + display: flex; + align-items: center; } label { @@ -193,44 +202,44 @@ label { } input:invalid+span:after { - content: '✖'; - padding-left: 5px; + content: '✖'; + padding-left: 5px; } input:valid+span:after { - content: '✓'; - padding-left: 5px; + content: '✓'; + padding-left: 5px; } ``` -> **Attention :** La validation des données du formulaire HTML par le navigateur ne doit pas remplacer la validation des données reçues sur le serveur ! En effet, il est tout à fait possible pour quelqu'un de modifier le document HTML afin d'outrepasser ces contraintes (voire d'envoyer directement des données au serveur sans passer par le formulaire HTML). Si les mécanismes, côté serveur, échouent à valider les données, cela pourrait avoir des conséquences néfastes sur le stockage ou la sécurité de l'application. +> **Attention :** La validation des données du formulaire HTML par le navigateur ne doit pas remplacer la validation des données reçues sur le serveur ! En effet, il est tout à fait possible pour quelqu'un de modifier le document HTML afin d'outrepasser ces contraintes (voire d'envoyer directement des données au serveur sans passer par le formulaire HTML). Si les mécanismes, côté serveur, échouent à valider les données, cela pourrait avoir des conséquences néfastes sur le stockage ou la sécurité de l'application. ## Gérer la prise en charge des navigateurs -Comme indiqué ci-avant, le principal problème qu'on rencontre avec ces contrôles est la prise en charge hétérogène des différents navigateurs : seuls Opera et Chrome implémentent cette fonctionnalité parmi les navigateurs de bureau et la plupart des navigateurs mobiles la prennent en charge. +Comme indiqué ci-avant, le principal problème qu'on rencontre avec ces contrôles est la prise en charge hétérogène des différents navigateurs : seuls Opera et Chrome implémentent cette fonctionnalité parmi les navigateurs de bureau et la plupart des navigateurs mobiles la prennent en charge. -Les navigateurs qui n'implémentent pas cette fonctionnalité afficheront un contrôle de saisie textuelle. Toutefois, cela entraîne des problème de cohérence d'interface graphique d'une part et de représentation des données d'autre part. +Les navigateurs qui n'implémentent pas cette fonctionnalité afficheront un contrôle de saisie textuelle. Toutefois, cela entraîne des problèmes de cohérence d'interface graphique d'une part et de représentation des données d'autre part. -C'est ce second problème qui est le plus important. Comme nous l'avons mentionné avant, la valeur d'un contrôle `datetime-local` est toujours normalisée sous la forme `yyyy-mm-ddThh:mm`. En revanche, avec un champ texte, le navigateur n'utilise pas de formatage particulier et il existe différentes façon d'écrire des dates et heures selon les langues et les régions. On peut par exemple avoir les formats suivants : +C'est ce second problème qui est le plus important. Comme nous l'avons mentionné avant, la valeur d'un contrôle `datetime-local` est toujours normalisée sous la forme `YYYY-MM-DDThh:mm`. En revanche, avec un champ texte, le navigateur n'utilise pas de formatage particulier et il existe différentes façon d'écrire des dates et heures selon les langues et les régions. On peut par exemple avoir les formats suivants : -- `ddmmyyyy` -- `dd/mm/yyyy` -- `mm/dd/yyyy` -- `dd-mm-yyyy` -- `mm-dd-yyyy` -- `mm-dd-yyyy hh:mm` (heure exprimée sur 12 heures) -- `mm-dd-yyyy HH:mm` (heure exprimée sur 24 heures) +- `DDMMYYYY` +- `DD/MM/YYYY` +- `MM/DD/YYYY` +- `DD-MM-YYYY` +- `MM-DD-YYYY` +- `MM-DD-YYYY hh:mm` (heure exprimée sur 12 heures) +- `MM-DD-YYYY HH:mm` (heure exprimée sur 24 heures) - etc. -Une façon de contourner ce problème est de placer un attribut {{htmlattrxref("pattern", "input")}} dans l'élément ` <input type="``datetime-local"> `. Bien que cet élément n'utilise pas cet attribut, s'il est converti en `<input type="text">` par le navigateur, le motif sera alors utilisé. Vous pouvez par exemple essayer le code suivant dans un navigateur qui ne prend pas en charge `<input type="datetime-local">` : +Une façon de contourner ce problème est de placer un attribut `pattern` dans l'élément `<input type="datetime-local">`. Bien que cet élément n'utilise pas cet attribut, s'il est converti en `<input type="text">` par le navigateur, le motif sera alors utilisé. Vous pouvez par exemple essayer le code suivant dans un navigateur qui ne prend pas en charge `<input type="datetime-local">` : ```html <form> <div> - <label for="party">Veuillez choisir une date et une heure pour la fête (obligatoire, entre le 1er juin, 8h30 et le 30 juin, 16h30) :</label> + <label for="party">Veuillez choisir une date et une heure pour la fête (obligatoire, entre le 1er juin, 8h30 et le 30 juin, 16h30) :</label> <input id="party" type="datetime-local" name="partydate" - min="2017-06-01T08:30" max="2017-06-30T16:30" - pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" required> + min="2017-06-01T08:30" max="2017-06-30T16:30" + pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" required> <span class="validity"></span> </div> <div> @@ -240,11 +249,11 @@ Une façon de contourner ce problème est de placer un attribut {{htmlattrxref(" </form> ``` -{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}} +{{EmbedLiveSample('', 600, 100)}} Si vous essayer de soumettre ce formulaire, vous pourrez voir que le navigateur affiche un message d'erreur et met en avant le champ invalide si la valeur saisie ne respecte pas la forme `nnnn-nn-nnTnn:nn` avec `n` qui est un chiffre entre 0 et 9. Bien entendu, cela n'empêche pas de saisir des dates/heures invalides ou mal formatées. -De plus, comment l'utilisateur doit-il comprendre la règle de format qui lui est imposée pour saisir une date et une heure ? +De plus, comment la personne remplissant le formulaire doit-elle comprendre la règle de format qui lui est imposée pour saisir une date et une heure ? Bref, il y a toujours un problème. @@ -274,15 +283,15 @@ input:valid + span:after { } ``` -Actuellement, la meilleure façon de gérer les dates/heures d'une façon homogène pour les différents navigateurs est d'utiliser différents contrôles (via des éléments {{htmlelement("select")}}) pour sélectionner l'année, le jour, le mois, la date et l'heure. Il existe également des bibliothèques JavaScript telles que [le sélecteur de date jQuery](https://jqueryui.com/datepicker/) et [le sélecteur d'heure jQuery](https://timepicker.co/). +Actuellement, la meilleure façon de gérer les dates/heures d'une façon homogène pour les différents navigateurs est d'utiliser différents contrôles (via des éléments [`<select>`](/fr/docs/Web/HTML/Element/select)) pour sélectionner l'année, le jour, le mois, la date et l'heure. Il existe également des bibliothèques JavaScript telles que [le sélecteur de date jQuery](https://jqueryui.com/datepicker/) et [le sélecteur d'heure jQuery](https://timepicker.co/). ## Exemples -Dans cet exemple, on crée deux ensembles d'éléments pour sélectionner une date et une heure : un sélecteur natif `<input type="datetime-local">` d'une part et un ensemble de cinq éléments {{htmlelement("select")}} d'autre part pour les navigateurs qui ne prennent pas en charge le contrôle natif. +Dans cet exemple, on crée deux ensembles d'éléments pour sélectionner une date et une heure : un sélecteur natif `<input type="datetime-local">` d'une part et un ensemble de cinq éléments [`<select>`](/fr/docs/Web/HTML/Element/select) d'autre part pour les navigateurs qui ne prennent pas en charge le contrôle natif. -{{EmbedLiveSample('Exemples', 600, 140)}} +{{EmbedLiveSample('', 600, 140)}} -Voici le fragment de code HTML utilisé : +Voici le fragment de code HTML utilisé : ```html <form> @@ -367,19 +376,19 @@ input:valid+span:after { } ``` -Une partie intéressante du code est celle où on détecte la prise en charge de la fonctionnalité. Pour cela, dans le script, on crée un nouvel élément {{htmlelement("input")}} auquel on attribut le type `datetime-local` puis on vérifie son type juste après. Pour les navigateurs qui ne prennent pas en charge ce type de contrôle, le type aura changé et sera `text`. Si c'est le cas, on masque le contrôle natif et on utilise l'interface utilisateur alternative (composée avec les éléments ({{htmlelement("select")}})). +Une partie intéressante du code est celle où on détecte la prise en charge de la fonctionnalité. Pour cela, dans le script, on crée un nouvel élément [`<input>`](/fr/docs/Web/HTML/Element/Input) auquel on attribue le type `datetime-local` puis on vérifie son type juste après. Pour les navigateurs qui ne prennent pas en charge ce type de contrôle, le type aura changé et sera `text`. Si c'est le cas, on masque le contrôle natif et on utilise l'interface utilisateur alternative (composée avec les éléments [`<select>`](/fr/docs/Web/HTML/Element/select)). ```js // On définit les différentes variables -var nativePicker = document.querySelector('.nativeDateTimePicker'); -var fallbackPicker = document.querySelector('.fallbackDateTimePicker'); -var fallbackLabel = document.querySelector('.fallbackLabel'); +let nativePicker = document.querySelector('.nativeDateTimePicker'); +let fallbackPicker = document.querySelector('.fallbackDateTimePicker'); +let fallbackLabel = document.querySelector('.fallbackLabel'); -var yearSelect = document.querySelector('#year'); -var monthSelect = document.querySelector('#month'); -var daySelect = document.querySelector('#day'); -var hourSelect = document.querySelector('#hour'); -var minuteSelect = document.querySelector('#minute'); +let yearSelect = document.querySelector('#year'); +let monthSelect = document.querySelector('#month'); +let daySelect = document.querySelector('#day'); +let hourSelect = document.querySelector('#hour'); +let minuteSelect = document.querySelector('#minute'); // Initialement, on masque le sélecteur non-natif fallbackPicker.style.display = 'none'; @@ -387,8 +396,13 @@ fallbackLabel.style.display = 'none'; // On teste si l'élément <input type="date"> // se transforme en <input type="text"> -var test = document.createElement('input'); -test.type = 'date'; +let test = document.createElement('input'); + +try { + test.type = 'datetime-local'; +} catch (e) { + console.log(e.description); +} // Si c'est le cas, cela signifie que l'élément // n'est pas pris en charge et if(test.type === 'text') { @@ -415,7 +429,7 @@ function populateDays(month) { // On crée une variable afin de contenir le nombre // de jours à afficher - var dayNum; + let dayNum; // 31 ou 30 jours ? if(month === 'Janvier' || month === 'Mars' || month === 'Mai' || month === 'Juillet' || month === 'Août' || month === 'Octobre' || month === 'Décembre') { @@ -424,16 +438,16 @@ function populateDays(month) { dayNum = 30; } else { // Si le mois est février, on calcule si l'année est bissextile - var year = yearSelect.value; - var leap = new Date(year, 1, 29).getMonth() == 1; + let year = yearSelect.value; + let leap = new Date(year, 1, 29).getMonth() == 1; leap ? dayNum = 29 : dayNum = 28; } // on ajoute le bon nombre de jours dans autant // d'éléments <option> pour l'élément <select> // pour la journée - for(i = 1; i <= dayNum; i++) { - var option = document.createElement('option'); + for(let i = 1; i <= dayNum; i++) { + let option = document.createElement('option'); option.textContent = i; daySelect.appendChild(option); } @@ -463,14 +477,14 @@ function populateDays(month) { function populateYears() { // On obtient l'année courante - var date = new Date(); - var year = date.getFullYear(); + let date = new Date(); + let year = date.getFullYear(); // On affiche l'année courante et les 100 années // précédentes pour l'élément <select> destiné à // stocker l'année - for(var i = 0; i <= 100; i++) { - var option = document.createElement('option'); + for(let i = 0; i <= 100; i++) { + let option = document.createElement('option'); option.textContent = year-i; yearSelect.appendChild(option); } @@ -479,8 +493,8 @@ function populateYears() { function populateHours() { // on crée 24 valeurs pour l'élément <select> // associé aux heures - for(var i = 0; i <= 23; i++) { - var option = document.createElement('option'); + for(let i = 0; i <= 23; i++) { + let option = document.createElement('option'); option.textContent = (i < 10) ? ("0" + i) : i; hourSelect.appendChild(option); } @@ -489,8 +503,8 @@ function populateHours() { function populateMinutes() { // On crée 60 valeurs pour l'élément <select> // associé aux minutes - for(var i = 0; i <= 59; i++) { - var option = document.createElement('option'); + for(let i = 0; i <= 59; i++) { + let option = document.createElement('option'); option.textContent = (i < 10) ? ("0" + i) : i; minuteSelect.appendChild(option); } @@ -507,9 +521,9 @@ monthSelect.onchange = function() { } // On conserve le jour sélectionné -var previousDay; +let previousDay; -// On met à jour la journée utilisé précédemment +// On met à jour la journée utilisée précédemment // (voir la fin de populateDays() pour voir où // est utilisée cette valeur) daySelect.onchange = function() { @@ -517,67 +531,21 @@ daySelect.onchange = function() { } ``` -> **Note :** Attention, certaines années peuvent contenir 53 semaines ! (cf. [cet article Wikipédia](https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year)) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles. - -## Résumé technique - -<table class="properties"> - <tbody> - <tr> - <td><strong>{{anch("Valeur")}}</strong></td> - <td> - Une chaîne de caractères ({{domxref("DOMString")}}) qui - représente une date et une heure (selon le fuseau horaire local) ou bien - une chaîne de caractères vide. - </td> - </tr> - <tr> - <td><strong>Évènements</strong></td> - <td> - {{domxref("HTMLElement/change_event", "change")}} et - {{domxref("HTMLElement/input_event", "input")}} - </td> - </tr> - <tr> - <td><strong>Attributs pris en charge</strong></td> - <td> - {{htmlattrxref("autocomplete", "input")}}, - {{htmlattrxref("list", "input")}}, - {{htmlattrxref("readonly", "input")}} et - {{htmlattrxref("step", "input")}}. - </td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td> - <code>list</code>, <code>value</code>, <code>valueAsNumber</code>. - </td> - </tr> - <tr> - <td><strong>Méthodes</strong></td> - <td> - {{domxref("HTMLInputElement.select", "select()")}}, - {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, - {{domxref("HTMLInputElement.stepUp", "stepUp()")}}. - </td> - </tr> - </tbody> -</table> +> **Note :** Attention, certaines années peuvent contenir 53 semaines ! (cf. [cet article Wikipédia (en anglais)](https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year)) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles. ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'forms.html#local-date-and-time-state-(type=datetime-local)', '<input type="datetime-local">')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'forms.html##local-date-and-time-state-(type=datetime-local)', '<input type="datetime-local">')}} | {{Spec2('HTML5 W3C')}} | | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("html.elements.input.input-datetime-local")}} +{{Compat}} ## Voir aussi -- L'élément générique {{HTMLElement("input")}} ainsi que l'interface DOM qu'il implémente : {{domxref("HTMLInputElement")}} -- [`<input type="date">`](/fr/docs/Web/HTML/Element/input/date) and [`<input type="time">`](/fr/docs/Web/HTML/Element/input/time) -- [Un tutoriel sur les sélecteurs de date et d'heure](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#Sélection_de_date_et_d'horaire) -- [Les formats de date et d'heure utilisés en HTML](/fr/docs/Web/HTML/Formats_date_heure_HTML) +- L'élément générique [`<input>`](/fr/docs/Web/HTML/Element/Input) ainsi que l'interface DOM qui le porte : [`HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement) +- [`<input type="date">`](/fr/docs/Web/HTML/Element/input/date) +- [`<input type="time">`](/fr/docs/Web/HTML/Element/input/time) +- [Un tutoriel sur les sélecteurs de date et d'heure](/fr/docs/Learn/Forms/Basic_native_form_controls#sélection_de_date_et_heure) +- [Les formats de date et d'heure utilisés en HTML](/fr/docs/Web/HTML/Date_and_time_formats) +- [La compatibilité des propriétés CSS pour les éléments de formulaire](/fr/docs/Learn/Forms/Property_compatibility_table_for_form_controls) diff --git a/files/fr/web/html/element/input/email/adresse-electronique-mauvais-motif.png b/files/fr/web/html/element/input/email/adresse-electronique-mauvais-motif.png Binary files differnew file mode 100644 index 0000000000..065205c005 --- /dev/null +++ b/files/fr/web/html/element/input/email/adresse-electronique-mauvais-motif.png diff --git a/files/fr/web/html/element/input/email/index.md b/files/fr/web/html/element/input/email/index.md index 769f4ae2d2..258419df98 100644 --- a/files/fr/web/html/element/input/email/index.md +++ b/files/fr/web/html/element/input/email/index.md @@ -1,127 +1,145 @@ --- title: <input type="email"> -slug: Web/HTML/Element/Input/email -tags: - - HTML - - Input - - Reference +slug: Web/HTML/Element/input/email translation_of: Web/HTML/Element/input/email +browser-compat: html.elements.input.input-email --- {{HTMLRef}} -Les éléments {{HTMLElement("input")}} dont l'attribut `type` vaut **`"email"`** permettent à un utilisateur de saisir et d'éditer une adresse mail ou, si l'attribut {{htmlattrxref("multiple", "input")}} est indiqué, une liste d'adresses mail. La valeur saisie est automatiquement validée afin de vérifier que le champ est vide ou que l'adresse (ou la liste d'adresses) est correcte. Les pseudo-classes CSS {{cssxref(":valid")}} et {{cssxref(":invalid")}} sont appliquées automatiquement selon le cas. +Les éléments [`<input>`](/fr/docs/Web/HTML/Element/Input) dont l'attribut `type` vaut **`email`** permettent à une utilisatrice ou un utilisateur de saisir et d'éditer une adresse mail ou, si l'attribut [`multiple`](/fr/docs/Web/HTML/Attributes/multiple) est indiqué, une liste d'adresses mail. La valeur saisie est automatiquement validée afin de vérifier que le champ est vide ou que l'adresse (ou la liste d'adresses) est correcte. Les pseudo-classes CSS [`:valid`](/fr/docs/Web/CSS/:valid) et [`:invalid`](/fr/docs/Web/CSS/:invalid) sont appliquées automatiquement selon le cas. {{EmbedInteractiveExample("pages/tabbed/input-email.html", "tabbed-shorter")}} -> **Note :** Les navigateurs qui ne prennent pas en charge le type `"email"` emploieront un élément `<input>` [`"text"`](/fr/docs/Web/HTML/Element/input/text) à la place. +La valeur saisie dans le champ est automatiquement validée pour vérifier s'il s'agit d'une chaîne de caractères vide ou d'une adresse mail valide (ou une liste de telles adresses) avant que le formulaire soit envoyé. Les pseudo-classes CSS [`:valid`](/fr/docs/Web/CSS/:valid) et [`:invalid`](/fr/docs/Web/CSS/:invalid) sont automatiquement appliquées selon la validité des champs afin d'indiquer visuellement si la valeur courante du champ est une adresse mail valide ou non. + +> **Note :** Les navigateurs qui ne prennent pas en charge le type `email` emploieront un élément `<input>` [`"text"`](/fr/docs/Web/HTML/Element/Input/text) à la place. + +<table class="properties"> + <tbody> + <tr> + <td><strong>Valeur</strong></td> + <td>Une chaîne de caractères (<a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>) représentant une adresse électronique ou une chaîne vide.</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td><a href="/fr/docs/Web/API/HTMLElement/change_event"><code>change</code></a> et <a href="/fr/docs/Web/API/HTMLElement/Input_event"><code>input</code></a></td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td> + <a href="/fr/docs/Web/HTML/Element/Input#attr-autocomplete"><code>autocomplete</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-list"><code>list</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-maxlength"><code>maxlength</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-minlength"><code>minlength</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-multiple"><code>multiple</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-name"><code>name</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-pattern"><code>pattern</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-placeholder"><code>placeholder</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-readonly"><code>readonly</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-required"><code>required</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-size"><code>size</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-type"><code>type</code></a></td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>list</code> et <code>value</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td><a href="/fr/docs/Web/API/HTMLInputElement/select"><code>select()</code></a> + </td> + </tr> + </tbody> +</table> ## Valeur -La valeur d'un tel élément {{HTMLElement("input")}}, contenue dans l'attribut {{htmlattrxref("value", "input")}}, contient une chaîne de caractères qui est automatiquement validée afin de vérifier que c'est une adresse électronique valide. Pour être plus précis, trois formes sont considérées valides : +La valeur d'un tel élément [`<input>`](/fr/docs/Web/HTML/Element/Input), contenue dans l'attribut [`value`](/fr/docs/Web/HTML/Element/Input#attr-value), contient une chaîne de caractères qui est automatiquement validée afin de vérifier que c'est une adresse électronique valide. Pour être plus précis, trois formes sont considérées valides : -1. Une chaîne de caractères vide ("") qui indique que l'utilisateur n'a saisi aucune valeur ou que la valeur a été retirée. -2. Une adresse électronique bien-formée. Cela ne signifie pas que l'adresse en question existe mais qu'elle est correctement formatée. Autrement dit, elle respecte une structure `"nom@domaine.tld"`. Cette règle est un peu plus complexe (cf. {{anch("Validation")}} pour l'algorithme exact). -3. Si et seulement si l'attribut {{htmlattrxref("multiple", "input")}} est indiqué, la valeur peut être une liste d'adresses électroniques correctes, séparées par des virgules. Chaque blanc situé avant et après chaque adresse sera retiré. +1. Une chaîne de caractères vide (`""`) qui indique que l'utilisatrice ou l'utilisateur n'a saisi aucune valeur ou que la valeur a été retirée. +2. Une adresse électronique bien formée. Cela ne signifie pas que l'adresse en question existe mais qu'elle est correctement formatée. Autrement dit, elle respecte une structure `"nom@domaine.tld"`. Cette règle est un peu plus complexe (cf. la section [Validation](#validation) pour l'algorithme exact). +3. Si et seulement si l'attribut [`multiple`](/fr/docs/Web/HTML/Attributes/multiple) est indiqué, la valeur peut être une liste d'adresses électroniques correctes, séparées par des virgules. Chaque blanc situé avant et après chaque adresse sera retiré. -Pour plus de détails, se référer à la section {{anch("Validation")}} sur la façon dont les adresses mails sont validées. +Pour plus de détails, se référer à la section [Validation](#validation) sur la façon dont les adresses mails sont validées. ## Attributs supplémentaires -En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de type `email` prennent en charge les attributs suivants : +En complément des attributs communs à l'ensemble des éléments [`<input>`](/fr/docs/Web/HTML/Element/Input), les champs de type `email` prennent en charge les attributs suivants : + +### `list` -| Attribut | Description | -| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `{{anch("maxlength")}}` | Le nombre de caractères maximal qui peut être écrit dans ce champ. | -| `{{anch("minlength")}}` | Le nombre de caractères minimal qui peut être écrit dans ce champ pour qu'il soit considéré comme valide. | -| `{{anch("multiple")}}` | Un attribut booléen qui indique si plusieurs adresses électroniques peuvent être saisies et séparées par des virgules. | -| `{{anch("pattern")}}` | Une expression rationnelle à laquelle doit correspondre le texte saisi pour être valide. | -| `{{anch("placeholder")}}` | Une valeur d'exemple qui sera affichée lorsqu'aucune valeur n'est saisie. | -| `{{anch("readonly")}}` | Un attribut booléen qui indique si le contenu du champ est en lecture seule. | -| `{{anch("size")}}` | Un nombre qui indique le nombre de caractères affichés par le champ. | -| `{{anch("spellcheck")}}` | Cet attribut contrôle l'activation de la vérification orthographique sur le champ ou si la vérification orthographique par défaut doit être appliquée. | +La valeur de cet attribut est l'identifiant d'un élément [`<datalist>`](/fr/docs/Web/HTML/Element/datalist) situé dans le même document. L'élément [`<datalist>`](/fr/docs/Web/HTML/Element/datalist) fournit la liste de valeurs prédéfinies à suggérer à l'utilisatrice ou à l'utilisateur. Toute valeur de la liste qui n'est pas compatible avec ce type de champ n'est pas incluse dans les options suggérées. Les valeurs fournies sont des suggestions et pas des valeurs imposées : il reste possible de sélectionner des valeurs en dehors de cette liste. -### {{htmlattrdef("maxlength")}} +### `maxlength` -Le nombre maximum de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour `maxlength` ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à `minlength`. +Le nombre maximum de caractères (exprimé en nombre de points de code UTF-16) que l'utilisatrice ou l'utilisateur peut saisir dans le champ. Cette valeur doit être un entier positif ou nul. Si aucune valeur n'est fournie pour `maxlength` ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à `minlength`. -Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) si la longueur du texte dépasse `maxlength` en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur. +Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/Constraint_validation) si la longueur du texte dépasse `maxlength` en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisatrice ou l'utilisateur. -### {{htmlattrdef("minlength")}} +### `minlength` -Le nombre minimal de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour `minlength` ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieur à `maxlength`. +Le nombre minimal de caractères (exprimé en nombre de points de code UTF-16) que l'utilisatrice ou l'utilisateur peut saisir dans le champ. Cette valeur doit être un entier positif ou nul. Si aucune valeur n'est fournie pour `minlength` ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieure à `maxlength`. -Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) si la longueur du texte est inférieure à `minlength` en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur. +Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/Constraint_validation) si la longueur du texte est inférieure à `minlength` en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisatrice ou l'utilisateur. -### {{htmlattrdef("multiple")}} +### `multiple` -A Boolean attribute which, if present, indicates that the user can enter a list of multiple e-mail addresses, separated by commas and, optionally, whitespace characters. See {{anch("Allowing multiple e-mail addresses")}} for details. +Un attribut booléen qui indique, s'il est présent, que plusieurs adresses électroniques peuvent être saisies en étant séparées par des virgules (et éventuellement des espaces). Voir la section sur la saisie de plusieurs adresses ci-après. -> **Note :** Normally, if you specify the {{htmlattrxref("required", "input")}} attribute, the user must enter a valid e-mail address for the field to be considered valid. However, if you add the `multiple` attribute, a list of zero e-mail addresses (an empty string, or one which is entirely whitespace) is a valid value. In other words, the user does not have to enter even one e-mail address when `multiple` is specified, regardless of the value of `required`. +> **Note :** Normalement, lorsque l'attribut [`required`](/fr/docs/Web/HTML/Element/Input#attr-required) est indiqué, la personne remplissant le formulaire doit saisir une adresse mail valide pour que le champ soit considéré valide. Toutefois, si l'attribut `multiple` est ajouté, une liste de zéro adresses (une chaîne de caractères vide ou un texte constitué uniquement d'espaces) sera une valeur valide. Autrement dit, la personne remplissant le formulaire n'est pas obligée de saisir une adresse lorsque `multiple` est présent, quelle que soit la valeur de `required`. -### {{htmlattrdef("pattern")}} +### `pattern` -{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}} +L'attribut `pattern` est une expression rationnelle que doit respecter la valeur du champ afin d'être [valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Cette expression rationnelle doit être une expression rationnelle valide pour JavaScript (telle qu'utilisée par [`RegExp`](/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp) et telle que documentée dans [ce guide](/fr/docs/Web/JavaScript/Guide/Regular_Expressions)). Le marqueur `'u'` est fourni par le navigateur lors de la compilation de l'expression rationnelle afin que le motif soit traité comme une séquence de points de code Unicode plutôt que comme des caractères ASCII. Aucune barre oblique (`/`) ne devrait être utilisée autour du motif. -Voir la section sur la validation d'un motif ci-après pour plus de détails. +Si l'expression rationnelle est invalide ou que cet attribut n'est pas défini, l'attribut est ignoré. -{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}} +> **Note :** L'attribut [`title`](/fr/docs/Web/HTML/Element/Input#attr-title) pourra être utilisé afin d'afficher une bulle d'informations qui explique les conditions à respecter. Il est également conseillé d'inclure un texte explicatif à proximité du champ. -{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}} +Voir [la section sur l'utilisation de cet attribut ci-après](#validation_grâce_à _une_expression_rationnelle) pour plus d'exemples. -{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}} +### `placeholder` -{{page("/fr/docs/Web/HTML/Element/input/text", "spellcheck", 0, 1, 2)}} +L'attribut `placeholder` est une chaîne de caractères fournissant une courte indication à l'utilisatrice ou l'utilisateur quant à l'information attendue dans le champ. Cet attribut devrait être un mot ou une phrase courte qui illustre le type de donnée attendu plutôt qu'un message explicatif. Le texte ne doit pas contenir de saut à la ligne. -## Attributs non-standard +Si le contenu du contrôle respecte une directionnalité donnée ([LTR](/fr/docs/Glossary/ltr) ou [RTL](/fr/docs/Glossary/rtl)) et que le texte indicatif doit être présenté dans l'autre sens, il est possible d'utiliser l'algorithme de formatage bidirectionnel Unicode : voir [Comment utiliser les contrôles Unicode pour le texte bidirectionnel (en anglais)](https://www.w3.org/International/questions/qa-bidi-unicode-controls). -Les attributs non-standard suivant sont disponibles pour les champs d'email dans certains navigateurs mais devraient ne pas être utilisés. +> **Note :** On évitera, tant que faire se peut, d'utiliser l'attribut `placeholder`, car il n'est pas sémantiquement très utile pour expliquer le formulaire, et car il peut causer certains problèmes avec le contenu. Voir [la page sur `<input>`](/fr/docs/Web/HTML/Element/Input) pour plus d'informations. -| Attribute | Description | -| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `{{anch("autocorrect")}}` | Une chaîne de caractères qui indique si la correction automatique doit être appliquée à ce champ texte. **Uniquement pris en charge par Safari.** | -| `{{anch("mozactionhint")}}` | Une chaîne de caractères qui indique le type d'action qui sera effectuée lorsque l'utilisateur appuiera sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition du champ. La valeur de cet attribut est utilisée comme libellé pour la touche adéquate du clavier virtuel. **Uniquement pris en charge par Firefox pour Android.** | +### `readonly` -### {{htmlattrdef("autocorrect")}} {{non-standard_inline}} +Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisatrice ou l'utilisateur. Toutefois, la valeur de l'attribut `value` peut toujours être modifiée via du code JavaScript, qui définirait la propriété `value` rattachée à [l'interface `HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement). -{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}} +> **Note :** Un champ en lecture seule ne pouvant pas avoir de valeur, l'attribut `required` n'aura pas d'effet si l'attribut `readonly` est également présent. -### {{htmlattrdef("mozactionhint")}} {{non-standard_inline}} +### `size` -{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}} +L'attribut `size` est un nombre positif qui indique le nombre de caractères affichés à l'écran et qui définit donc la largeur du champ. La valeur par défaut de cet attribut est 20. Étant donné que la largeur des caractères peut varier cet attribut ne permet de définir une largeur exacte mais approximative. + +Cet attribut ne définit pas la limite du nombre de caractères saisissables dans le champ mais uniquement, et approximativement, le nombre de caractères qui peuvent être affichés à l'écran simultanément. Pour fixer une taille maximale sur la valeur du champ, on utilisera plutôt l'attribut `maxlength`. ## Utiliser les champs de saisie d'adresses électroniques -Les adresses mails font partie des informations les plus fréquentes dans les formulaires web : elles sont utilisées pour se connecter, demander des informations, confirmer une commande, envoyer un email, etc. Le type `"email"` permet de simplifier le travail de construction de l'interface utilisateur et la logique associée pour les adresses électroniques. Lorsqu'on crée un champ dont l'attribut `type` vaut `"email"`, le navigateur valide ou non le texte saisi afin de vérifier qu'il s'agit d'une adresse correcte. Cela permet d'éviter les cas où l'utilisateur a fait une faute de saisie ou lorsqu'il a fourni une adresse invalide. +Les adresses mails font partie des informations les plus fréquentes dans les formulaires web : elles sont utilisées pour se connecter, demander des informations, confirmer une commande, envoyer un email, etc. Le type `email` permet de simplifier le travail de construction de l'interface utilisateur et la logique associée pour les adresses électroniques. Lorsqu'on crée un champ dont l'attribut `type` vaut `email`, le navigateur valide ou non le texte saisi afin de vérifier qu'il s'agit d'une adresse correcte. Cela permet d'éviter les cas où la personne remplissant le formulaire a fait une faute de saisie ou lorsqu'elle a fourni une adresse invalide. -On notera toutefois que le navigateur ne vérifie pas si l'adresse saisie existe réellement ou correspond à un utilisateur existant du site ou si elle respecte quelque autre critère. Autrement dit, le navigateur vérifie uniquement que l'adresse fournie est bien formée. +On notera toutefois que le navigateur ne vérifie pas si l'adresse saisie existe réellement ou correspond à une utilisatrice existante ou un utilisateur existant du site, ou si elle respecte quelque autre critère. Autrement dit, le navigateur vérifie uniquement que l'adresse fournie est bien formée. -> **Note :** Il est également important de rappeler qu'un utilisateur peut modifier le HTML de la page grâce aux outils de développement. Votre site _ne doit pas_ reposer sur les mécanismes de validation du navigateur. Il est crucial de vérifier l'adresse électronique _côté serveur_ dès que le texte fournit est impliqué, d'une façon ou d'une autre, dans une fonctionnalité sensible (par exemple la connexion à un site, un achat, etc.). +> **Note :** Il est également important de rappeler qu'une utilisatrice ou un utilisateur peut modifier le HTML de la page grâce aux outils de développement. Votre site _ne doit pas_ reposer sur les mécanismes de validation du navigateur. Il est crucial de vérifier l'adresse électronique _côté serveur_ dès que le texte fournit est impliqué, d'une façon ou d'une autre, dans une fonctionnalité sensible (par exemple la connexion à un site, un achat, etc.). -### Un champ email simple +### Un champ `email` simple -À l'heure actuelle, l'ensemble des navigateurs qui implémentent cet élément le gèrent comme un champ texte standard auquel certaines fonctionnalités de validation sont ajoutées. La spécification laisse toutefois une marge de manœuvre pour cette validation (l'élément pourrait par exemple consulter le répertoire de l'appareil pour choisir une adresse parmi cette liste). Dans sa forme la plus simple, un champ email peut être écrit de cette façon : +À l'heure actuelle, l'ensemble des navigateurs qui implémentent cet élément le gèrent comme un champ texte standard auquel certaines fonctionnalités de validation sont ajoutées. La spécification laisse toutefois une marge de manœuvre pour cette validation (l'élément pourrait, par exemple, consulter le répertoire de l'appareil pour choisir une adresse parmi cette liste). Dans sa forme la plus simple, un champ `email` peut être écrit de cette façon : ```html <input id="emailAddress" type="email"> ``` -{{EmbedLiveSample('Un_champ_email_simple', 600, 40)}} +{{EmbedLiveSample('', 600, 40)}} -Un tel champ est considéré comme valide lorsqu'il est vide ou lorsqu'une adresse électronique bien formée est saisie. Dans les autres cas,, la valeur est considérée comme invalide. Si on ajoute l'attribut {{htmlattrxref("required", "input")}}, seuls les adresses électroniques bien formées sont autorisées, il n'est plus possible de laisser la valeur vide. +Un tel champ est considéré comme valide lorsqu'il est vide ou lorsqu'une adresse électronique bien formée est saisie. Dans les autres cas, la valeur est considérée comme invalide. Si on ajoute l'attribut [`required`](/fr/docs/Web/HTML/Element/Input#attr-required), seules les adresses électroniques bien formées sont autorisées, il n'est plus possible de laisser la valeur vide. ### Gérer plusieurs adresses mail -Grâce à l'attribut {{htmlattrxref("multiple", "input")}}, on peut configurer le champ afin de saisir plusieurs adresses mail. +Grâce à l'attribut [`multiple`](/fr/docs/Web/HTML/Attributes/multiple), on peut configurer le champ afin de saisir plusieurs adresses mail. ```html <input id="emailAddress" type="email" multiple> ``` -{{EmbedLiveSample('Gérer_plusieurs_adresses_mail', 600, 40)}} +{{EmbedLiveSample('', 600, 40)}} Avec cet attribut, la valeur saisie est valide quand on saisit zéro, une ou plusieurs adresses électroniques bien formées, séparées par des virgules et éventuellement entourées de blancs. -Voici certains exemples de chaînes de caractères valides lorsque `"multiple"` est utilisé : +Voici certains exemples de chaînes de caractères valides lorsque `"multiple"` est utilisé : - `""` - `"me@example"` @@ -130,23 +148,23 @@ Voici certains exemples de chaînes de caractères valides lorsque `"multiple"` - `"me@example.org, you@example.org"` - `"me@example.org,you@example.org, us@example.org"` -En revanche, les exemples suivants sont considérés invalides : +En revanche, les exemples suivants sont considérés invalides : - `","` - `"me"` - `"me@example.org you@example.org"` -### Textes indicatifs (_placeholders_) +### Textes indicatifs (<i lang="en">placeholders</i>) -Il est parfois utile de fournir une indication contextuelle quant à la valeur qui doit être saisie. C'est notamment pertinent quand la disposition de la page ne permet pas d'utiliser des étiquettes suffisamment descriptives (ou longues) pour chaque élément {{HTMLElement("input")}}. Pour fournir une telle indication, on peut fournir un _placeholder_ qui sera affiché dans le champ lorsque la valeur est vide et qui disparaît dès que des données sont saisies. +Il est parfois utile de fournir une indication contextuelle quant à la valeur qui doit être saisie. C'est notamment pertinent quand la disposition de la page ne permet pas d'utiliser des étiquettes suffisamment descriptives (ou longues) pour chaque élément [`<input>`](/fr/docs/Web/HTML/Element/Input). Pour fournir une telle indication, on peut fournir un texte indicatif (<i lang="en">placeholder</i>) qui sera affiché dans le champ lorsque la valeur est vide et qui disparaît dès que des données sont saisies. -Dans l'exemple qui suit, on utilise un élément `<input>` de type `"email"` avec le texte indicatif `"sophie@example.com"`. Vous pouvez manipuler l'exemple afin de voir comment ce texte disparaît/réapparaît lorsqu'on édite la valeur du champ. +Dans l'exemple qui suit, on utilise un élément `<input>` de type `email` avec le texte indicatif `sophie@example.com`. Vous pouvez manipuler l'exemple afin de voir comment ce texte disparaît/réapparaît lorsqu'on édite la valeur du champ. ```html <input type="email" placeholder="sophie@example.com"> ``` -{{EmbedLiveSample('Textes_indicatifs_(placeholders)', 600, 40)}} +{{EmbedLiveSample('', 600, 40)}} ### Contrôler la taille du champ @@ -154,17 +172,17 @@ Il est possible de contrôler la taille physique de la boîte de saisie et égal #### Contrôler la taille physique -La taille physique de la boîte de saisie peut être paramétrée grâce à l'attribut {{htmlattrxref("size", "input")}}. Grâce à cet attribut, on peut indiquer le nombre de caractères que le champ peut afficher. Dans l'exemple qui suit, la boîte d'édition pourra contenir jusqu'à 15 caractères : +La taille physique de la boîte de saisie peut être paramétrée grâce à l'attribut [`size`](/fr/docs/Web/HTML/Element/Input#attr-size). Grâce à cet attribut, on peut indiquer le nombre de caractères que le champ peut afficher. Dans l'exemple qui suit, la boîte d'édition pourra contenir jusqu'à 15 caractères : ```html <input type="email" size="15"> ``` -{{ EmbedLiveSample('Contrôler_la_taille_physique', 600, 40)}} +{{EmbedLiveSample('', 600, 40)}} #### Contrôler la taille de la valeur -L'attribut `size` ne contraint pas la longueur de l'adresse qu'on pourra saisir. On peut donc avoir de petits champs qui permettent de saisir de longues adresses. Pour borner la taille de l'adresse mail à saisir, on pourra utiliser l'attribut {{htmlattrxref("minlength", "input")}} pour indiquer le nombre minimal de caractères et l'attribut {{htmlattrxref("maxlength", "input")}} pour indiquer le nombre maximal de caractères contenus dans l'adresse électronique. +L'attribut `size` ne contraint pas la longueur de l'adresse qu'on pourra saisir. On peut donc avoir de petits champs qui permettent de saisir de longues adresses. Pour borner la taille de l'adresse mail à saisir, on pourra utiliser l'attribut [`minlength`](/fr/docs/Web/HTML/Element/Input#attr-minlength) pour indiquer le nombre minimal de caractères et l'attribut [`maxlength`](/fr/docs/Web/HTML/Element/Input#attr-maxlength) pour indiquer le nombre maximal de caractères contenus dans l'adresse électronique. Dans l'exemple qui suit, on affiche une boîte de saisie qui mesure 32 caractères de large et dans laquelle on ne peut saisir des adresses qui ont au moins 3 caractères et au plus 64 caractères. @@ -172,21 +190,23 @@ Dans l'exemple qui suit, on affiche une boîte de saisie qui mesure 32 caractèr <input type="email" size="32" minlength="3" maxlength="64"> ``` -{{EmbedLiveSample("Contrôler_la_taille_de_la_valeur", 600, 40)}} +{{EmbedLiveSample("", 600, 40)}} + +### Fournir des options par défaut -### Fournir une option par défaut +#### Fournir une seule option par défaut avec value -On peut également fournir une valeur par défaut en remplissant l'attribut {{htmlattrxref("value", "input")}} de l'élément : +On peut également fournir une valeur par défaut en remplissant l'attribut [`value`](/fr/docs/Web/HTML/Element/Input#attr-value) de l'élément : ```html <input type="email" value="default@example.com"> ``` -{{EmbedLiveSample("Fournir_une_option_par_défaut", 600, 40)}} +{{EmbedLiveSample("", 600, 40)}} #### Proposer des suggestions -Pour améliorer encore l'ergonomie, on peut fournir une liste d'options par défaut parmi laquelle l'utilisateur peut choisir. Cela fonctionne en utilisant l'attribut {{htmlattrxref("list", "input")}} dont la valeur est un identifiant d'un élément {{HTMLElement("datalist")}} qui contient différents éléments {{HTMLElement("option")}} dont les valeurs des attributs `value` fournissent les adresses suggérées. L'utilisateur n'est pas contraint à saisir une valeur parmi celles-ci, elles sont uniquement fournies à titre indicatif. +Pour améliorer encore l'ergonomie, on peut fournir une liste d'options par défaut parmi laquelle l'utilisatrice ou l'utilisateur peut choisir. Cela fonctionne en utilisant l'attribut [`list`](/fr/docs/Web/HTML/Element/Input#attr-list) dont la valeur est un identifiant d'un élément [`<datalist>`](/fr/docs/Web/HTML/Element/datalist) qui contient différents éléments [`<option>`](/fr/docs/Web/HTML/Element/Option) dont les valeurs des attributs `value` fournissent les adresses suggérées. L'utilisatrice ou l'utilisateur n'est pas contraint à saisir une valeur parmi celles-ci, elles sont uniquement fournies à titre indicatif. ```html <input type="email" size="40" list="defaultEmails"> @@ -200,31 +220,36 @@ Pour améliorer encore l'ergonomie, on peut fournir une liste d'options par déf </datalist> ``` -{{EmbedLiveSample("Proposer_des_suggestions", 600, 40)}} +{{EmbedLiveSample("", 600, 40)}} -Lorsqu'on utilise l'élément {{HTMLElement("datalist")}} et l'élément {{HTMLElement("option")}}, le navigateur affichera les adresses suggérées lors de la saisie, généralement sous la forme d'une liste déroulante ou d'une popup. Bien que les détails d'interface puissent dépendre de chaque navigateur, cliquer sur le champ d'édition affichera généralement la liste sous forme d'un volet déroulant. Ensuite, la liste est restreinte au fur et à mesure des caractères saisis. +Lorsqu'on utilise l'élément [`<datalist>`](/fr/docs/Web/HTML/Element/datalist) et l'élément [`<option>`](/fr/docs/Web/HTML/Element/Option), le navigateur affichera les adresses suggérées lors de la saisie, généralement sous la forme d'une liste déroulante ou d'une popup. Bien que les détails d'interface puissent dépendre de chaque navigateur, cliquer sur le champ d'édition affichera généralement la liste sous forme d'un volet déroulant. Ensuite, la liste est restreinte au fur et à mesure des caractères saisis. ## Validation -Il existe deux niveaux de validation pour les champs de saisie de type `"email"`. Tout d'abord, on a le niveau standard qui permet de vérifier automatiquement si l'adresse électronique est bien formatée. Ensuite, il est possible d'ajouter un filtre spécifique si besoin de répondre à des contraintes plus spécifiques. +Il existe deux niveaux de validation pour les champs de saisie de type `email`. Tout d'abord, on a le niveau standard qui permet de vérifier automatiquement si l'adresse électronique est bien formatée. Ensuite, il est possible d'ajouter un filtre spécifique si besoin de répondre à des contraintes plus spécifiques. > **Attention :** La validation du formulaire HTML par l'agent utilisateur ne saurait remplacer la vérification des données saisies côté serveur. En effet, il est relativement simple de modifier le document HTML avec son navigateur pour outrepasser les contraintes exprimées ici (quitte à les transmettre directement au serveur). Si les données ne sont pas vérifiées côté serveur, cela pourra entraîner des erreurs (valeurs trop grande, au mauvais format) voire des failles de sécurité. ### Validation simple -Les navigateurs qui implémentent le type `"email"` fournissent une validation automatique afin de vérifier que la valeur saisie respecte le format d'une adresse électronique valide. Les navigateurs utilisent [un algorithme](https://dxr.mozilla.org/mozilla-central/source/dom/html/input/SingleLineTextInputTypes.cpp?q=%2Bfunction%3A%22EmailInputType%3A%3AIsValidEmailAddressList%28const+nsAString+%26%29%22&redirect_type=single#184) pour respecter [la spécification](https://w3c.github.io/html/sec-forms.html#email-state-typeemail). +Les navigateurs qui implémentent le type `email` fournissent une validation automatique afin de vérifier que la valeur saisie respecte le format d'une adresse électronique valide. Les navigateurs qui implémentent la spécification devraient utiliser un algorithme équivalent à l'expression régulière suivante : -Les pseudo-classes CSS {{cssxref(":valid")}} et {{cssxref(":invalid")}} peuvent être utilisées afin de mettre en forme la valeur selon qu'elle est valide ou non. +```js +/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61} +[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/ +``` + +Les pseudo-classes CSS [`:valid`](/fr/docs/Web/CSS/:valid) et [`:invalid`](/fr/docs/Web/CSS/:invalid) peuvent être utilisées afin de mettre en forme la valeur selon qu'elle est valide ou non — voir [Validation des données de formulaires](/fr/docs/Learn/Forms/Form_validation) pour en apprendre davantage. -> **Note :** La spécification comporte certains problèmes relatifs aux noms de domaines internationaux et à la validation des adresses électroniques en HTML. Pour plus d'informations, lire [le bug n°15489 du W3C](https://www.w3.org/Bugs/Public/show_bug.cgi?id=15489). +> **Note :** La spécification comporte certains problèmes relatifs aux noms de domaines internationaux et à la validation des adresses électroniques en HTML. Pour plus d'informations, voir [le bug 15489 du W3C](https://www.w3.org/Bugs/Public/show_bug.cgi?id=15489). ### Validation grâce à une expression rationnelle -S'il est nécessaire que l'adresse saisie respecte plus de critères, il est possible d'utiliser l'attribut {{htmlattrxref("pattern", "input")}} afin d'indiquer [une expression rationnelle](/fr/docs/Web/JavaScript/Guide/Expressions_régulières) contre laquelle la valeur sera vérifiée. Si l'attribut {{htmlattrxref("multiple", "input")}} est actif, chaque élément de la liste devra respecter cette expression rationnelle. +S'il est nécessaire que l'adresse saisie respecte plus de critères, il est possible d'utiliser l'attribut [`pattern`](/fr/docs/Web/HTML/Element/Input#attr-pattern) afin d'indiquer [une expression rationnelle](/fr/docs/Web/JavaScript/Guide/Regular_Expressions) contre laquelle la valeur sera vérifiée. Si l'attribut [`multiple`](/fr/docs/Web/HTML/Element/Input#attr-multiple) est actif, chaque élément de la liste devra respecter cette expression rationnelle. Prenons comme exemple l'intranet d'une entreprise avec un site web qui permet de contacter le département du support technique en cas de besoin. Un formulaire simplifier permet de saisir une adresse électronique et un message. Dans ce cas, on souhaite vérifier que l'adresse électronique est saisie mais également que c'est une adresse respectant le format de celles utilisées dans l'entreprise. -Le navigateur vérifie d'une part que l'adresse électronique est une adresse correctement formatée _et_ que celle-ci respecte l'expression rationnelle indiquée avec {{htmlattrxref("pattern", "input")}}. Voici un exemple d'application : +Le navigateur vérifie d'une part que l'adresse électronique est une adresse correctement formatée _et_ que celle-ci respecte l'expression rationnelle indiquée avec [`pattern`](/fr/docs/Web/HTML/Element/Input#attr-pattern). Voici un exemple d'application : ```css hidden body { @@ -244,14 +269,14 @@ label { } label::after { - content: ":"; + content: " :"; } ``` ```html <form> <div class="emailBox"> - <label for="emailAddress">Votre adresse email</label><br> + <label for="emailAddress">Votre adresse mail</label><br> <input id="emailAddress" type="email" size="64" maxLength="64" required placeholder="nomutilisateur@beststartupever.com" pattern=".+@beststartupever.com" title="Merci de fournir uniquement une adresse Best Startup Ever"> @@ -266,36 +291,36 @@ label::after { </form> ``` -{{EmbedLiveSample("Validation_grâce_à _une_expression_rationnelle", 700, 275)}} +{{EmbedLiveSample("", 700, 275)}} -Le formulaire ({{HTMLElement("form")}}) contient un élément {{HTMLElement("input")}} de type `"email"` pour saisir l'adresse de l'utilisateur, un élément {{HTMLElement("textarea")}} permettant de saisir le message et un élément `<input>` de type [`"submit"`](/fr/docs/Web/HTML/Element/input/submit) qui formera un bouton permettant d'envoyer le formulaire. Chaque champ possède un élément {{HTMLElement("label")}} associé qui permet d'indiquer ce qui est attendu. +Le formulaire ([`<form>`](/fr/docs/Web/HTML/Element/Form)) contient un élément [`<input>`](/fr/docs/Web/HTML/Element/Input) de type `email` pour saisir l'adresse de l'utilisatrice ou l'utilisateur, un élément [`<textarea>`](/fr/docs/Web/HTML/Element/Textarea) permettant de saisir le message et un élément `<input>` de type [`"submit"`](/fr/docs/Web/HTML/Element/Input/submit) qui formera un bouton permettant d'envoyer le formulaire. Chaque champ possède un élément [`<label>`](/fr/docs/Web/HTML/Element/Label) associé qui permet d'indiquer ce qui est attendu. -Si on regarde le champ de saisie pour l'adresse électronique, on voit que les deux attributs {{htmlattrxref("size", "input")}} et {{htmlattrxref("maxlength", "input")}} ont la valeur 64 (on affiche une boîte de saisie large de 64 caractères et on ne peut saisir une adresse électronique d'au plus 64 caractères). L'attribut {{htmlattrxref("required", "input")}} est présent et l'adresse électronique est donc obligatoire pour l'envoi du formulaire. +Si on regarde le champ de saisie pour l'adresse électronique, on voit que les deux attributs [`size`](/fr/docs/Web/HTML/Element/Input#attr-size) et [`maxlength`](/fr/docs/Web/HTML/Element/Input#attr-maxlength) ont la valeur 64 (on affiche une boîte de saisie large de 64 caractères et on ne peut saisir une adresse électronique d'au plus 64 caractères). L'attribut [`required`](/fr/docs/Web/HTML/Element/Input#attr-required) est présent et l'adresse électronique est donc obligatoire pour l'envoi du formulaire. -L'attribut {{htmlattrxref("placeholder", "input")}} indique qu'une valeur semblable à `"nomutilisateur@beststartupever.com"` est attendue. L'intérêt de cette valeur est double : on indique qu'il faut saisir une adresse mail et on suggère que cette adresse provient d'un compte beststartupever.com. Le type `"email"` permet de valider le texte saisi afin de vérifier qu'il s'agit d'une adresse électronique valide. Si la valeur saisie n'est pas une adresse valide, un message d'erreur sera affiché : +L'attribut [`placeholder`](/fr/docs/Web/HTML/Element/Input#attr-placeholder) indique qu'une valeur semblable à `"nomutilisateur@beststartupever.com"` est attendue. L'intérêt de cette valeur est double : on indique qu'il faut saisir une adresse mail et on suggère que cette adresse provient d'un compte `beststartupever.com`. Le type `email` permet de valider le texte saisi afin de vérifier qu'il s'agit d'une adresse électronique valide. Si la valeur saisie n'est pas une adresse valide, un message d'erreur sera affiché : - + -Si on utilise uniquement les attributs qu'on vient de décrire, on restreint les valeurs saisissables aux adresses électroniques valides de 64 caractères. Or, on veut également valider le fait que l'adresse respecte le format "_nomutilisateur_@beststartupever.com". C'est pourquoi on utilise l'attribut {{htmlattrxref("pattern", "input")}} avec la valeur `".+@beststartupever.com"`. Cette valeur est une expression rationnelle qui permet de vérifier que la chaîne de caractère contient un ou plusieurs caractères quelconques, ensuite suivi d'une arobase (@) puis du nom de domaine "beststartupever.com". +Si on utilise uniquement les attributs qu'on vient de décrire, on restreint les valeurs saisissables aux adresses électroniques valides de 64 caractères. Or, on veut également valider le fait que l'adresse respecte le format `_nomutilisateur_@beststartupever.com`. C'est pourquoi on utilise l'attribut [`pattern`](/fr/docs/Web/HTML/Element/Input#attr-pattern) avec la valeur `".+@beststartupever.com"`. Cette valeur est une expression rationnelle qui permet de vérifier que la chaîne de caractère contient un ou plusieurs caractères quelconques, ensuite suivi d'une arobase (`@`) puis du nom de domaine `beststartupever.com`. -On notera que cette expression rationnelle ne permet pas de vérifier que l'adresse électronique est valide (on pourra par exemple avoir " @beststartupever.com" (avec un espace en début de chaîne) ou encore "@@beststartupever.com" qui ne sont pas valides). En fait, le navigateur vérifie que l'adresse respecte l'expression rationnelle fournie **et** que l'adresse est valide. Autrement dit, avec le type `"email"` et cette valeur pour l'attribut `pattern`, on s'assure que l'adresse est une adresse électronique valide et que c'est une bien une adresse avec le nom de domaine "beststartupever.com". +On notera que cette expression rationnelle ne permet pas de vérifier que l'adresse électronique est valide (on pourra par exemple avoir ` @beststartupever.com` (avec une espace en début de chaîne) ou encore `@@beststartupever.com` qui ne sont pas valides). En fait, le navigateur vérifie que l'adresse respecte l'expression rationnelle fournie **et** que l'adresse est valide. Autrement dit, avec le type `email` et cette valeur pour l'attribut `pattern`, on s'assure que l'adresse est une adresse électronique valide et que c'est une bien une adresse avec le nom de domaine `beststartupever.com`. -Lorsqu'on utilise l'attribut `pattern` Il est conseillé d'utilisé l'attribut {{htmlattrxref("title")}} afin de décrire le motif de l'expression ratioennelle. Autrement dit, dans ce cas, l'attribut `title` doit décrire le format souhaité plutôt que contenir une autre information. En effet, cet attribut sera affiché ou prononcé en cas d'erreur. Par exemple, le navigateur pourrait afficher le message "Le texte saisi ne correspond pas au motif requis." suivi du texte indiqué dans la valeur de `title`. Par exemple si l'attribut `title` vaut "Adresse email", le message affiché serait "Le texte saisi ne correspond pas au motif requis. Adresse email" ce qui n'est pas correct. +Lorsqu'on utilise l'attribut `pattern`. il est conseillé d'utiliser l'attribut [`title`](/fr/docs/Web/HTML/Global_attributes#attr-title) afin de décrire le motif de l'expression rationnelle. Autrement dit, dans ce cas, l'attribut `title` doit décrire le format souhaité plutôt que contenir une autre information. En effet, cet attribut sera affiché ou prononcé en cas d'erreur. Par exemple, le navigateur pourrait afficher le message « Le texte saisi ne correspond pas au motif requis. » suivi du texte indiqué dans la valeur de `title`. Par exemple si l'attribut `title` vaut « Adresse mail », le message affiché serait « Le texte saisi ne correspond pas au motif requis. Adresse mail » ce qui n'est pas correct. -C'est pour cela qu'on indique la chaîne de caractères "Merci de fournir uniquement une adresse Best Startup Ever". Le message complet obtenu sera donc : "Le texte saisi ne correspond pas au motif requis. Merci de fournir uniquement une adresse Best Startup Ever." +C'est pour cela qu'on indique la chaîne de caractères « Merci de fournir uniquement une adresse Best Startup Ever ». Le message complet obtenu sera donc : « Le texte saisi ne correspond pas au motif requis. Merci de fournir uniquement une adresse Best Startup Ever. » - + > **Note :** Si vous rencontrez des problèmes à propos de l'expression rationnelle, n'hésitez pas à ouvrir la console du navigateur. Cette dernière peut contenir des messages d'erreur aidant à diagnostiquer et résoudre le problème. ## Exemples -Dans l'exemple qui suit, on peut saisir une adresse électronique qui contient au plus 256 caractères. La boîte de saisie affichera au plus 64 caractères et contiendra le texte `"user@example.gov"` comme indication lorsque le champ est vide. On trouve également l'attribut {{htmlattrxref("multiple", "input")}} qui permet de saisir zéro ou plusieurs adresses séparées par des virgules (cf. ci-avant). Enfin, l'attribut {{htmlattrxref("list", "input")}} utilisé indique un identifiant d'un élément {{HTMLElement("datalist")}} dont les éléments {{HTMLElement("option")}} déterminent les valeurs suggérées qui peuvent être sélectionnées par l'utilisateur. +Dans l'exemple qui suit, on peut saisir une adresse électronique qui contient au plus 256 caractères. La boîte de saisie affichera au plus 64 caractères et contiendra le texte `"user@example.gov"` comme indication lorsque le champ est vide. On trouve également l'attribut [`multiple`](/fr/docs/Web/HTML/Attributes/multiple) qui permet de saisir zéro ou plusieurs adresses séparées par des virgules (cf. ci-avant). Enfin, l'attribut [`list`](/fr/docs/Web/HTML/Element/Input#attr-list) utilisé indique un identifiant d'un élément [`<datalist>`](/fr/docs/Web/HTML/Element/datalist) dont les éléments [`<option>`](/fr/docs/Web/HTML/Element/Option) déterminent les valeurs suggérées qui peuvent être sélectionnées par l'utilisatrice ou l'utilisateur. -L'élément {{HTMLElement("label")}} qui précède l'élément `<input>` permettra d'afficher un libellé avant la boîte de saisie. Le lien entre les deux est fait grâce à l'attribut `for` qui contient `"emailAddress"` qui est l'identifiant de l'élément {{HTMLElement("input")}}. Grâce à cette association, cliquer sur l'étiquette permettra de placer le focus sur le champ de saisie. +L'élément [`<label>`](/fr/docs/Web/HTML/Element/Label) qui précède l'élément `<input>` permettra d'afficher un libellé avant la boîte de saisie. Le lien entre les deux est fait grâce à l'attribut `for` qui contient `"emailAddress"` qui est l'identifiant de l'élément [`<input>`](/fr/docs/Web/HTML/Element/Input). Grâce à cette association, cliquer sur l'étiquette permettra de placer le focus sur le champ de saisie. ```html -<label for="emailAddress">Email</label><br/> +<label for="emailAddress">Adresse mail</label><br/> <input id="emailAddress" type="email" placeholder="user@example.gov" list="defaultEmails" size="64" maxlength="256" multiple> @@ -308,66 +333,31 @@ L'élément {{HTMLElement("label")}} qui précède l'élément `<input>` permett </datalist> ``` -{{EmbedLiveSample('Exemples', 600, 50)}} - -## Résumé technique - -<table class="properties"> - <tbody> - <tr> - <td><strong>{{anch("Valeur")}}</strong></td> - <td> - Une chaîne de caractères ({{domxref("DOMString")}}) représentant - une adresse électronique ou une chaîne vide. - </td> - </tr> - <tr> - <td><strong>Évènements</strong></td> - <td> - {{domxref("HTMLElement/change_event", "change")}} et - {{domxref("HTMLElement/input_event", "input")}} - </td> - </tr> - <tr> - <td><strong>Attributs pris en charge</strong></td> - <td> - {{htmlattrxref("autocomplete", "input")}}, - {{htmlattrxref("list", "input")}}, - {{htmlattrxref("maxlength", "input")}}, - {{htmlattrxref("minlength", "input")}}, - {{htmlattrxref("multiple", "input")}}, - {{htmlattrxref("pattern", "input")}}, - {{htmlattrxref("placeholder", "input")}}, - {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} - et {{htmlattrxref("size", "input")}} - </td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td><code>list</code> et <code>value</code></td> - </tr> - <tr> - <td><strong>Méthodes</strong></td> - <td> - {{domxref("HTMLInputElement.select", "select()")}} - </td> - </tr> - </tbody> -</table> +{{EmbedLiveSample('', 600, 80)}} ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName('HTML WHATWG', 'forms.html#e-mail-state-(type=email)', '<input type="email">')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. | -| {{SpecName('HTML5.1', 'sec-forms.html#email-state-typeemail', '<input type="email">')}} | {{Spec2('HTML5.1')}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("html.elements.input.input-email")}} +{{Compat}} ## Voir aussi -- [Le guide relatif aux formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires) -- {{HTMLElement("input")}} -- [`<input type="tel">`](/fr/docs/Web/HTML/Element/input) +- [Le guide relatif aux formulaires HTML](/fr/docs/Learn/Forms) +- [`<input>`](/fr/docs/Web/HTML/Element/Input) +- [`<input type="tel">`](/fr/docs/Web/HTML/Element/Input) +- [`<input type="url">`](/fr/docs/Web/HTML/Element/input/url) +- Les attributs : + + - [`list`](/fr/docs/Web/HTML/Element/Input#attr-list) + - [`minlength`](/fr/docs/Web/HTML/Attributes/minlength) + - [`maxlength`](/fr/docs/Web/HTML/Attributes/maxlength) + - [`multiple`](/fr/docs/Web/HTML/Attributes/multiple) + - [`pattern`](/fr/docs/Web/HTML/Attributes/pattern) + - [`placeholder`](/fr/docs/Web/HTML/Element/Input#attr-placeholder) + - [`readonly`](/fr/docs/Web/HTML/Attributes/readonly) + - [`size`](/fr/docs/Web/HTML/Attributes/size) + +- [La compatibilité des propriétés CSS pour les éléments de formulaire](/fr/docs/Learn/Forms/Property_compatibility_table_for_form_controls) diff --git a/files/fr/web/html/element/input/email/saisir-une-adresse-electronique-valide.png b/files/fr/web/html/element/input/email/saisir-une-adresse-electronique-valide.png Binary files differnew file mode 100644 index 0000000000..fc8983865d --- /dev/null +++ b/files/fr/web/html/element/input/email/saisir-une-adresse-electronique-valide.png diff --git a/files/fr/web/html/element/input/month/champ-mois-requis.png b/files/fr/web/html/element/input/month/champ-mois-requis.png Binary files differnew file mode 100644 index 0000000000..7637b008b7 --- /dev/null +++ b/files/fr/web/html/element/input/month/champ-mois-requis.png diff --git a/files/fr/web/html/element/input/month/index.md b/files/fr/web/html/element/input/month/index.md index e09147781e..c0afa2de8e 100644 --- a/files/fr/web/html/element/input/month/index.md +++ b/files/fr/web/html/element/input/month/index.md @@ -1,107 +1,132 @@ --- title: <input type="month"> -slug: Web/HTML/Element/Input/month -tags: - - Element - - Input - - Reference +slug: Web/HTML/Element/input/month translation_of: Web/HTML/Element/input/month +browser-compat: html.elements.input.input-month --- -{{HTMLRef}} +{{HTMLRef("Input_types")}} -Les éléments {{htmlelement("input")}} dont l'attribut `type` vaut **`"month"`** permettent de créer des contrôles où l'utilisateur peut saisir un mois et année. La valeur associée à un tel élément suit le format `"YYYY-MM"`, où `YYYY` représente l'année sur quatre chiffre et `MM` le mois sur deux chiffres. +Les éléments [`<input>`](/fr/docs/Web/HTML/Element/Input) dont l'attribut `type` vaut **`month`** permettent de créer des contrôles où l'utilisatrice ou l'utilisateur peut saisir un mois et année. La valeur associée à un tel élément suit le format `YYYY-MM`, où `YYYY` représente l'année sur quatre chiffre et `MM` le mois sur deux chiffres. {{EmbedInteractiveExample("pages/tabbed/input-month.html", "tabbed-shorter")}} -L'interface utilisateur associée à ce contrôle varie d'un navigateur à l'autre et la prise en charge de cette fonctionnalité reste encore hétérogène : seuls Chrome, Opéra et Edge implémentent cette fonctionnalité sur ordinateur et la plupart des navigateurs mobiles possèdent une implémentation. Pour les navigateurs qui ne prennent pas en charge cette fonctionnalité, l'élément sera transformé en un simple [`<input type="text">`](/fr/docs/Web/HTML/Element/input/text). +L'interface utilisateur associée à ce contrôle varie d'un navigateur à l'autre et la prise en charge de cette fonctionnalité reste encore hétérogène : seuls Chrome, Opéra et Edge implémentent cette fonctionnalité sur ordinateur et la plupart des navigateurs mobiles possèdent une implémentation. Pour les navigateurs qui ne prennent pas en charge cette fonctionnalité, l'élément sera transformé en un simple [`<input type="text">`](/fr/docs/Web/HTML/Element/Input/text). -Si votre navigateur ne prend pas en charge ce type d'élément, voici ensuite une capture d'écran de Chrome : cliquer sur la flèche vers le bas permettra de faire apparaître un sélecteur de date qui permettra de choisir le mois et l'année. +Si votre navigateur ne prend pas en charge ce type d'élément, voici ensuite une capture d'écran de Chrome : cliquer sur la flèche vers le bas permettra de faire apparaître un sélecteur de date qui permettra de choisir le mois et l'année. - + -Voici un aperçu du contrôle sous Edge : +Voici un aperçu du contrôle sous Edge : - + + +## Résumé technique + +<table class="properties"> + <tbody> + <tr> + <td><strong>Valeur</strong></td> + <td>Une chaîne de caractères (<a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>) qui représente un mois et une année ou bien la chaîne vide.</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td><a href="/fr/docs/Web/API/HTMLElement/change_event"><code>change</code></a> et <a href="/fr/docs/Web/API/HTMLElement/Input_event"><code>input</code></a></td> + </tr> + <tr> + <td><strong>Attributs communs pris en charge</strong></td> + <td><a href="/fr/docs/Web/HTML/Element/Input#attr-autocomplete"><code>autocomplete</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-list"><code>list</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-readonly"><code>readonly</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-step"><code>step</code></a></td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td><a href="/fr/docs/Web/API/HTMLInputElement/select"><code>select()</code></a>, <a href="/fr/docs/Web/API/HTMLInputElement/stepDown"><code>stepDown()</code></a>, <a href="/fr/docs/Web/API/HTMLInputElement/stepUp"><code>stepUp()</code></a></td> + </tr> + </tbody> +</table> ## Valeur -Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur du mois et de l'année saisies via le contrôle, au format YYYY-MM (c'est-à -dire une année sur 4 chiffres suivi d'un tiret (`"-"`) suivi du mois sur deux chiffres. Le format détaillé est [décrit dans l'article sur les formats des dates/heures](/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_mois). +Une chaîne de caractères ([`DOMString`](/fr/docs/Web/API/DOMString)) qui représente la valeur du mois et de l'année saisies via le contrôle, au format `YYYY-MM` (c'est-à -dire une année sur 4 chiffres suivi d'un tiret (`-`) suivi du mois sur deux chiffres). Le format détaillé est [décrit dans l'article sur les formats des dates/heures](/fr/docs/Web/HTML/Date_and_time_formats#représentation_des_mois). -Il est possible de définir une valeur par défaut pour le contrôle en utilisant l'attribut {{htmlattrxref("value", "input")}} de la façon suivante : +Il est possible de définir une valeur par défaut pour le contrôle en utilisant l'attribut [`value`](/fr/docs/Web/HTML/Element/Input#attr-value) de la façon suivante : -### Exemple 1 +### Fournir une valeur par défaut ```html <label for="bday-month">Quel est le mois de votre naissance ?</label> <input id="bday-month" type="month" name="bday-month" value="2017-06"> ``` -{{EmbedLiveSample('Exemple_1', 600, 60)}} +{{EmbedLiveSample('', 600, 60)}} -On notera que la façon dont la date est affichée peut varier selon la locale de l'utilisateur et être présentée sous un format différent. En revanche, d'un point de vue technique, la valeur de l'attribut `value` suivra toujours le format `YYYY-MM`. +On notera que la façon dont la date est affichée peut varier selon la locale de l'utilisatrice ou l'utilisateur et être présentée sous un format différent. En revanche, d'un point de vue technique, la valeur de l'attribut `value` suivra toujours le format `YYYY-MM`. -Par exemple, lorsque le formulaire précédent sera envoyé vers le serveur, l'information sera transmise de cette façon : `bday-month=1978-06`. +Par exemple, lorsque le formulaire précédent sera envoyé vers le serveur, l'information sera transmise de cette façon : `bday-month=1978-06`. -Il est également possible de manipuler la date en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}}. Par exemple : +### Définir la valeur en JavaScript -### Exemple 2 +Il est également possible de manipuler la date en JavaScript grâce à la propriété `value` rattachée à [l'interface `HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement). -```html hidden +```html <label for="bday-month">Quel est le mois de votre naissance ?</label> <input id="bday-month" type="month" name="bday-month" value="2017-06"> ``` -```js hidden -var monthControl = document.querySelector('input[type="month"]'); +```js +let monthControl = document.querySelector('input[type="month"]'); monthControl.value = '1978-06'; ``` -{{EmbedLiveSample("Exemple_2", 600, 60)}} +{{EmbedLiveSample("", 600, 60)}} ## Attributs supplémentaires -En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les champs pour les mois gèrent les attributs suivants : +En complément des attributs pris en charge par l'ensemble des éléments [`<input>`](/fr/docs/Web/HTML/Element/Input), les champs pour les mois gèrent les attributs suivants : + +### `list` -| Attribut | Description | -| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `{{anch("max")}}` | Le mois (et l'année) le plus tardif qui est considéré comme valide. | -| `{{anch("min")}}` | Le mois (et l'année) le plus tôt qui est considéré comme valide. | -| `{{anch("readonly")}}` | Un booléen qui indique si l'utilisateur peut modifier la valeur du champ. | -| `{{anch("step")}}` | Le pas qui est utilisé pour incrémenter la valeur du champ. Cet incrément est utilisé par l'interface utilisateur et également pour vérifier la valeur. | +La valeur de cet attribut est l'identifiant d'un élément [`<datalist>`](/fr/docs/Web/HTML/Element/datalist) situé dans le même document. L'élément [`<datalist>`](/fr/docs/Web/HTML/Element/datalist) fournit la liste de valeurs prédéfinies à suggérer à l'utilisatrice ou à l'utilisateur. Toute valeur de la liste qui n'est pas compatible avec ce type de champ n'est pas incluse dans les options suggérées. Les valeurs fournies sont des suggestions et pas des valeurs imposées : il reste possible de sélectionner des valeurs en dehors de cette liste. -### {{htmlattrdef("max")}} +### `max` -Le mois le plus tardif, indiqué avec l'année, sous la forme d'une chaîne de caractères au format `"yyyy-MM"`. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est supérieure à cette date, [la validation échouera](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur fournie n'est pas une chaîne de caractères au format correct, aucun maximum ne sera fixé pour la valeur du contrôle. +Le mois le plus tardif, indiqué avec l'année, sous la forme d'une chaîne de caractères au format `yyyy-MM`. Si la valeur saisie dans le champ (représentée par l'attribut [`value`](/fr/docs/Web/HTML/Element/Input#attr-value)) est supérieure à cette date, [la validation échouera](/fr/docs/Web/Guide/HTML/Constraint_validation). Si la valeur fournie n'est pas une chaîne de caractères au format correct, aucun maximum ne sera fixé pour la valeur du contrôle. Cette valeur doit être supérieure ou égale à celle indiquée par l'attribut `min`. -### {{htmlattrdef("min")}} +### `min` -Le mois le plus tôt, indiqué avec l'année, sous la forme d'une chaîne de caractères au format `"yyyy-MM"`. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est antérieure à cette date, [la validation échouera](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur fournie pour cet attribut n'est pas une chaîne de caractères au format correct, aucun minimum ne sera fixé pour la valeur du contrôle. +Le mois le plus tôt, indiqué avec l'année, sous la forme d'une chaîne de caractères au format `yyyy-MM`. Si la valeur saisie dans le champ (représentée par l'attribut [`value`](/fr/docs/Web/HTML/Element/Input#attr-value)) est antérieure à cette date, [la validation échouera](/fr/docs/Web/Guide/HTML/Constraint_validation). Si la valeur fournie pour cet attribut n'est pas une chaîne de caractères au format correct, aucun minimum ne sera fixé pour la valeur du contrôle. Cette valeur doit être inférieure ou égale à celle indiquée par l'attribut `max`. -### {{htmlattrdef("readonly")}} +### `readonly` -Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisateur. La valeur de l'attribut `value` peut toutefois être modifiée grâce à du code JavaScript qui changerait la propriété {{domxref("HTMLInputElement.value")}}. +Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisatrice ou l'utilisateur. La valeur de l'attribut `value` peut toutefois être modifiée grâce à du code JavaScript, qui changerait la propriété `value` rattachée à [l'interface `HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement). > **Note :** Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut `required` n'aura aucun effet si l'attribut `readonly` est défini. -### {{htmlattrdef("step")}} +### `step` -{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}} +L'attribut `step` est un nombre qui indique le « pas » suivi par le compteur. Il peut également prendre la valeur spéciale `any` (décrite ci-après). Seules les valeurs qui suivent cette progression (à partir de `min` ou de `value` si ces attributs sont fournis) seront considérées comme valides. + +Une chaîne de caractères `any` indique qu'aucune contrainte de pas n'est appliquée et que n'importe quelle valeur (sous réserve qu'elle respecte les autres contraintes potentiellement indiquées par `min` ou `max`) est valide. + +> **Note :** Lorsque les données saisies par l'utilisatrice ou l'utilisateur ne respectent pas cette contrainte, l'agent utilisateur pourra arrondir à la valeur valide la plus proche, avec une préférence pour les dates les plus avancées quand deux dates sont aussi proches de la valeur saisie. Pour les champs `month`, la valeur de l'attribut `step` est exprimée en mois et le facteur d'amplification est égal à 1 (la valeur sous-jacente est également exprimée en mois). La valeur par défaut pour cet attribut est 1. ## Utiliser `<input type="month">` -Un élément `<input>` de type `month` permet d'avoir une interface utilisateur simple d'utilisation pour choisir un mois et également de respecter un même format, quelle que soit la locale de l'utilisateur. Toutefois, `<input type="month">` n'est pas pris en charge par l'ensemble des navigateurs ce qui peut poser problème. +Un élément `<input>` de type `month` permet d'avoir une interface utilisateur simple d'utilisation pour choisir un mois et également de respecter un même format, quelle que soit la locale de l'utilisatrice ou l'utilisateur. Toutefois, `<input type="month">` n'est pas pris en charge par l'ensemble des navigateurs ce qui peut poser problème. Nous verrons ici quelques cas d'utilisation, simples puis complexes et nous aborderons ensuite comment gérer l'absence de prise en charge. ### Utilisation simple -Dans son expression la plus simple, il suffit d'employer un élément `<input>` ainsi qu'un élément {{htmlelement("label")}} : +Dans son expression la plus simple, il suffit d'employer un élément `<input>` ainsi qu'un élément [`<label>`](/fr/docs/Web/HTML/Element/Label) : ```html <form> @@ -110,11 +135,11 @@ Dans son expression la plus simple, il suffit d'employer un élément `<input>` </form> ``` -{{EmbedLiveSample('Utilisation_simple', 600, 40)}} +{{EmbedLiveSample('', 600, 40)}} ### Indiquer une date maximale et une date minimale -On peut utiliser les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} afin de restreindre la période pendant laquelle l'utilisateur peut choisir un mois. Dans l'exemple qui suit, on définit une date au plus tôt avec `1900-01` et une date au plus tard avec `2017-08`: +On peut utiliser les attributs [`min`](/fr/docs/Web/HTML/Element/Input#attr-min) et [`max`](/fr/docs/Web/HTML/Element/Input#attr-max) afin de restreindre la période pendant laquelle l'utilisatrice ou l'utilisateur peut choisir un mois. Dans l'exemple qui suit, on définit une date au plus tôt avec `1900-01` et une date au plus tard avec `2017-08` : ```html <form> @@ -124,26 +149,24 @@ On peut utiliser les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxre </form> ``` -{{EmbedLiveSample('Indiquer_une_date_maximale_et_une_date_minimale', 600, 40)}} +{{EmbedLiveSample('', 600, 40)}} -Grâce ce fragment de code : +Grâce ce fragment de code : - Seuls les mois entre janvier 1900 et août 2017 peuvent être sélectionnés (le contrôle ne doit pas permettre de sélectionner un mois en dehors de cette période) - Selon le navigateur, les mois en dehors de la période ne peuvent pas être sélectionnés (Edge) ou sont invalides mais toujours disponibles (Chrome). -> **Note :** L'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être utilisé afin d'ajuster le pas d'incrémentation (par exemple si on ne veut pouvoir sélectionner que les mois de début de trimestre). Toutefois, à l'heure où nous écrivons ces lignes, aucun navigateur ne semble prendre correctement en charge cette fonctionnalité. - ### Contrôler la taille du champ -`<input type="month">` ne peut pas être dimensionné grâce à {{htmlattrxref("size", "input")}}, il vous faudra utiliser [CSS](/fr/docs/Web/CSS) si besoin. +`<input type="month">` ne peut pas être dimensionné grâce à `size`, il vous faudra utiliser [CSS](/fr/docs/Web/CSS) si besoin. ## Validation Par défaut, `<input type="month">` n'applique pas de validation particulière sur la valeur saisie. C'est l'interface utilisateur qui ne permet pas de choisir autre chose qu'un mois. -Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de limiter la période valide et l'attribut {{htmlattrxref("required", "input")}} rend le champ obligatoire. Avec ces attributs, les navigateurs afficheront un message d'erreur si la date choisie est hors de la période ou si la valeur est vide. +Les attributs [`min`](/fr/docs/Web/HTML/Element/Input#attr-min) et [`max`](/fr/docs/Web/HTML/Element/Input#attr-max) permettent de limiter la période valide et l'attribut [`required`](/fr/docs/Web/HTML/Element/Input#attr-required) rend le champ obligatoire. Avec ces attributs, les navigateurs afficheront un message d'erreur si la date choisie est hors de la période ou si la valeur est vide. -Prenons un exemple avec une période délimitée et un champ obligatoire : +Prenons un exemple avec une période délimitée et un champ obligatoire : ```html <form> @@ -159,15 +182,15 @@ Prenons un exemple avec une période délimitée et un champ obligatoire : </form> ``` -Si vous tentez d'envoyer le formulaire avec une date incomplète ou en dehors de cette période, le navigateur doit afficher un message d'erreur. Voici le résultat _live_ : +Si vous tentez d'envoyer le formulaire avec une date incomplète ou en dehors de cette période, le navigateur doit afficher un message d'erreur. Voici le résultat en direct : -{{EmbedLiveSample('Validation', 600, 120)}} +{{EmbedLiveSample('', 600, 120)}} -Voici une capture d'écran qui illustre le résultat obtenu avec un navigateur prenant en charge cette fonctionnalité : +Voici une capture d'écran qui illustre le résultat obtenu avec un navigateur prenant en charge cette fonctionnalité : - + -Voici ensuite la feuille de style CSS utilisée dans l'exemple précédent. On utilise {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que la valeur saisie est invalide. Les icônes ajoutées sont placées dans un élément {{htmlelement("span")}} à part car Chrome ne permet pas de gérer du contenu généré à même le contrôle ni de mettre en forme ce contenu généré. +Voici ensuite la feuille de style CSS utilisée dans l'exemple précédent. On utilise [`:valid`](/fr/docs/Web/CSS/:valid) et [`:invalid`](/fr/docs/Web/CSS/:invalid) afin de mettre en forme le contrôle selon que la valeur saisie est invalide. Les icônes ajoutées sont placées dans un élément [`<span>`](/fr/docs/Web/HTML/Element/span) à part car Chrome ne permet pas de gérer du contenu généré à même le contrôle ni de mettre en forme ce contenu généré. ```css div { @@ -196,25 +219,25 @@ input:valid+span:after { } ``` -> **Attention :** Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses. +> **Attention :** Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour la personne naviguant le site de modifier le code HTML ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses. ## Gérer la prise en charge des navigateurs -Comme évoqué plus haut, le problème principal relatif à ces contrôles est l'absence partielle de prise en charge des navigateurs. Seuls Chrome, Opera et Edge supportent ce type de contrôle sur ordinateurs et la plupart des navigateurs mobiles le prennent en charge. À titre d'exemple, voici une capture d'écran du contrôle sous Chrome pour Android : +Comme évoqué plus haut, le problème principal relatif à ces contrôles est l'absence partielle de prise en charge des navigateurs. Seuls Chrome, Opera et Edge supportent ce type de contrôle sur ordinateurs et la plupart des navigateurs mobiles le prennent en charge. À titre d'exemple, voici une capture d'écran du contrôle sous Chrome pour Android : - + Les navigateurs qui ne prennent pas en charge cette fonctionnalité basculent sur un contrôle textuel classique mais cela pose problème à la fois en termes de cohérence de l'interface utilisateur et aussi par rapport à la gestion des données. -C'est ce deuxième aspect qui est le plus problématique. Comme nous l'avons mentionné, la valeur d'une date saisie dans un contrôle `<input type="month">` est toujours normalisée au format `"YYYY-MM"`. En revanche, avec un champ textuel, le navigateur ne convertit pas la valeur saisie et les personnes peuvent très bien écrire un mois sous plusieurs formes : +C'est ce deuxième aspect qui est le plus problématique. Comme nous l'avons mentionné, la valeur d'une date saisie dans un contrôle `<input type="month">` est toujours normalisée au format `YYYY-MM`. En revanche, avec un champ textuel, le navigateur ne convertit pas la valeur saisie et les personnes peuvent très bien écrire un mois sous plusieurs formes : - `MMYYYY` - `MM/YYYY` - `MM-YYYY` - `YYYY-MM` -- etc. +- …et ainsi de suite. -Une façon de contourner ce problème consiste à utiliser l'attribut {{htmlattrxref("pattern", "input")}} sur l'élément `<input type="month">`. Bien que le contrôle de type `month` ne gère pas cet attribut, ce dernier sera pris en charge par le champ texte. Vous pouvez essayer l'exemple suivant dans un navigateur qui ne prend pas en charge le contrôle de saisie des mois : +Une façon de contourner ce problème consiste à utiliser l'attribut [`pattern`](/fr/docs/Web/HTML/Element/Input#attr-pattern) sur l'élément `<input type="month">`. Bien que le contrôle de type `month` ne gère pas cet attribut, ce dernier sera pris en charge par le champ texte. Vous pouvez essayer l'exemple suivant dans un navigateur qui ne prend pas en charge le contrôle de saisie des mois : ```html <form> @@ -231,11 +254,11 @@ Une façon de contourner ce problème consiste à utiliser l'attribut {{htmlattr </form> ``` -{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}} +{{EmbedLiveSample('', 600, 100)}} Si vous tentez d'envoyer ce formulaire, vous verrez un message d'erreur si la valeur saisie ne respecte pas le format `nnnn-nn`, où `n` est un chiffre entre 0 et 9. Bien entendu, cela n'empêche pas de saisir des dates inexistantes ou au mauvais format. -De plus, cela présage que l'utilisateur comprenne le format dans lequel il faut saisir la valeur. Bref, le problème subsiste. +De plus, cela présage que l'utilisatrice ou l'utilisateur comprenne le format dans lequel il faut saisir la valeur. Bref, le problème subsiste. ```css hidden div { @@ -264,15 +287,15 @@ input:valid+span:after { } ``` -La meilleure façon de gérer la saisie de mois pour l'ensemble des navigateurs consiste actuellement à saisir le mois et l'année dans deux contrôles séparés, représentés chacun par un élément {{htmlelement("select")}}. On peut également utiliser certaines bibliothèques JavaScript telles que [jQuery date picker](https://jqueryui.com/datepicker/) ou le plugin [jQuery timepicker](http://timepicker.co/). +La meilleure façon de gérer la saisie de mois pour l'ensemble des navigateurs consiste actuellement à saisir le mois et l'année dans deux contrôles séparés, représentés chacun par un élément [`<select>`](/fr/docs/Web/HTML/Element/select). On peut également utiliser certaines bibliothèques JavaScript telles que [le sélecteur de date (<i lang="en">jQuery date picker</i>)](https://jqueryui.com/datepicker/) ou le plugin de [sélecteur d'heure jQuery (<i lang="en">jQuery timepicker</i>)](https://timepicker.co/). ## Exemples -Dans l'exemple qui suit, on crée deux ensembles d'éléments pour choisir un mois : un sélecteur natif `<input type="month">` d'une part et un ensemble de deux éléments {{htmlelement("select")}} pour choisir le mois et l'année d'autre part (ce sont ces deux éléments qui seront utilisés lorsque le navigateur ne prend pas en charge le contrôle natif). +Dans l'exemple qui suit, on crée deux ensembles d'éléments pour choisir un mois : un sélecteur natif `<input type="month">` d'une part et un ensemble de deux éléments [`<select>`](/fr/docs/Web/HTML/Element/select) pour choisir le mois et l'année d'autre part (ce sont ces deux éléments qui seront utilisés lorsque le navigateur ne prend pas en charge le contrôle natif). -{{EmbedLiveSample('Exemples', 600, 140)}} +{{EmbedLiveSample('', 600, 140)}} -Voici le fragment de code HTML utilisé : +Voici le fragment de code HTML utilisé : ```html <form> @@ -340,16 +363,16 @@ input:valid+span:after { } ``` -Une partie intéressante du code est celle qui permet de détecter la prise en charge de fonctionnalité. Pour détecter si le navigateur prend en charge ce contrôle, on crée un nouvel élément {{htmlelement("input")}} dont on modifie le type afin qu'il vaille `month` puis on vérifie immédiatement la valeur associée au type : les navigateurs qui ne prennent pas en charge la fonctionnalité renverront `text` car le champ `month` a automatiquement transformé en `text`. Si c'est le cas, on masque le sélecteur natif et on affiche le sélecteur alternatif (celui construit avec les éléments {{htmlelement("select")}}). +Une partie intéressante du code est celle qui permet de détecter la prise en charge de fonctionnalité. Pour détecter si le navigateur prend en charge ce contrôle, on crée un nouvel élément [`<input>`](/fr/docs/Web/HTML/Element/Input) dont on modifie le type afin qu'il vaille `month` puis on vérifie immédiatement la valeur associée au type : les navigateurs qui ne prennent pas en charge la fonctionnalité renverront `text`, car le champ `month` a automatiquement transformé en `text`. Si c'est le cas, on masque le sélecteur natif et on affiche le sélecteur alternatif (celui construit avec les éléments [`<select>`](/fr/docs/Web/HTML/Element/select)). ```js // On définit des variables -var nativePicker = document.querySelector('.nativeDatePicker'); -var fallbackPicker = document.querySelector('.fallbackDatePicker'); -var fallbackLabel = document.querySelector('.fallbackLabel'); +let nativePicker = document.querySelector('.nativeDatePicker'); +let fallbackPicker = document.querySelector('.fallbackDatePicker'); +let fallbackLabel = document.querySelector('.fallbackLabel'); -var yearSelect = document.querySelector('#year'); -var monthSelect = document.querySelector('#month'); +let yearSelect = document.querySelector('#year'); +let monthSelect = document.querySelector('#month'); // Par défaut on masque le sélecteur alternatif fallbackPicker.style.display = 'none'; @@ -357,7 +380,7 @@ fallbackLabel.style.display = 'none'; // On teste si un nouveau contrôle est automatiquement // converti en un champ texte -var test = document.createElement('input'); +let test = document.createElement('input'); test.type = 'month'; // Si c'est le cas, on exécute le code dans ce bloc if if(test.type === 'text') { @@ -372,76 +395,36 @@ if(test.type === 'text') { function populateYears() { // On récupère l'année courante - var date = new Date(); - var year = date.getFullYear(); + let date = new Date(); + let year = date.getFullYear(); // On ajoute l'année courante et les 100 années à venir // dans l'élément <select> pour l'année - for(var i = 0; i <= 100; i++) { - var option = document.createElement('option'); + for(let i = 0; i <= 100; i++) { + let option = document.createElement('option'); option.textContent = year-i; yearSelect.appendChild(option); } } ``` -> **Note :** Attention, certaines années peuvent contenir 53 semaines ! (cf. [cet article Wikipédia](https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year)) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles. - -## Résumé technique - -<table class="properties"> - <tbody> - <tr> - <td><strong>{{anch("Valeur")}}</strong></td> - <td> - Une chaîne de caractères ({{domxref("DOMString")}}) qui - représente un mois et une année ou bien la chaîne vide. - </td> - </tr> - <tr> - <td><strong>Évènements</strong></td> - <td> - {{domxref("HTMLElement/change_event", "change")}} et - {{domxref("HTMLElement/input_event", "input")}}. - </td> - </tr> - <tr> - <td><strong>Attributs pris en charge</strong></td> - <td> - {{htmlattrxref("autocomplete", "input")}}, - {{htmlattrxref("list", "input")}}, - {{htmlattrxref("readonly", "input")}} et - {{htmlattrxref("step", "input")}}. - </td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td><code>value</code></td> - </tr> - <tr> - <td><strong>Méthodes</strong></td> - <td> - {{domxref("HTMLInputElement.select", "select()")}}, - {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, - {{domxref("HTMLInputElement.stepUp", "stepUp()")}}. - </td> - </tr> - </tbody> -</table> +> **Note :** Attention, certaines années peuvent contenir 53 semaines ! (cf. [cet article Wikipédia](https://fr.wikipedia.org/wiki/Numérotation_ISO_des_semaines#Années_longues)) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles. -## Specifications +## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'forms.html#month-state-(type=month)', '<input type="month">')}} | {{Spec2('HTML WHATWG')}} | | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("html.elements.input.input-month")}} +{{Compat}} ## Voir aussi -- L'élément générique {{HTMLElement("input")}} et l'interface DOM qui permet de le manipuler : {{domxref("HTMLInputElement")}} -- [Les formats de date et d'heure utilisés en HTML](/fr/docs/Web/HTML/Formats_date_heure_HTML) -- [Un tutoriel à propos des sélecteurs de dates et d'heures](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#Sélection_de_date_et_d'horaire) -- [`<input type="datetime-local">`](/fr/docs/Web/HTML/Element/input/datetime-local), [`<input type="date">`](/fr/docs/Web/HTML/Element/input/date), [`<input type="time">`](/fr/docs/Web/HTML/Element/input/time), and [`<input type="week">`](/fr/docs/Web/HTML/Element/input/week) +- L'élément générique [`<input>`](/fr/docs/Web/HTML/Element/Input) et l'interface DOM qui permet de le manipuler : [`HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement) +- [Les formats de date et d'heure utilisés en HTML](/fr/docs/Web/HTML/Date_and_time_formats) +- [Un tutoriel à propos des sélecteurs de dates et d'heures](/fr/docs/Learn/Forms/Basic_native_form_controls#sélection_de_date_et_heure) +- [`<input type="datetime-local">`](/fr/docs/Web/HTML/Element/input/datetime-local) +- [`<input type="date">`](/fr/docs/Web/HTML/Element/input/date) +- [`<input type="time">`](/fr/docs/Web/HTML/Element/input/time) +- [`<input type="week">`](/fr/docs/Web/HTML/Element/input/week) +- [La compatibilité des propriétés CSS pour les contrôles de formulaires](/fr/docs/Learn/Forms/Property_compatibility_table_for_form_controls) diff --git a/files/fr/web/html/element/input/number/index.md b/files/fr/web/html/element/input/number/index.md index b352c2265f..4edc423f38 100644 --- a/files/fr/web/html/element/input/number/index.md +++ b/files/fr/web/html/element/input/number/index.md @@ -1,153 +1,183 @@ --- title: <input type="number"> -slug: Web/HTML/Element/Input/number -tags: - - Element - - HTML - - Input - - Reference +slug: Web/HTML/Element/input/number translation_of: Web/HTML/Element/input/number +browser-compat: html.elements.input.input-number --- -{{HTMLRef}} +{{HTMLRef("Input_types")}} -Les éléments {{HTMLElement("input")}} dont l'attribut `type` vaut **`number`** permettent à un utilisateur de saisir des nombres dans un formulaires. De tels contrôles incluent des mécanismes de validation natifs afin de rejeter les valeurs non-numériques. Le navigateur peut agrémenter le contrôle avec des flèches afin d'incrémenter/décrémenter la valeur grâce à la souris ou avec le doigt. +Les éléments [`<input>`](/fr/docs/Web/HTML/Element/Input) dont l'attribut `type` vaut **`number`** permettent à une utilisatrice ou un utilisateur de saisir des nombres dans un formulaire. De tels contrôles incluent des mécanismes de validation natifs afin de rejeter les valeurs non-numériques. + +Le navigateur peut agrémenter le contrôle avec des flèches afin d'incrémenter/décrémenter la valeur grâce à la souris ou avec le doigt. {{EmbedInteractiveExample("pages/tabbed/input-number.html", "tabbed-shorter")}} -> **Note :** Si un navigateur ne prend pas en charge le type `number`, le contrôle affiché sera le contrôle standard pour la saisie d'un texte (cf. [`text`](/fr/docs/Web/HTML/Element/input/text)). +> **Note :** Si un navigateur ne prend pas en charge le type `number`, le contrôle affiché sera le contrôle standard pour la saisie d'un texte (cf. [`text`](/fr/docs/Web/HTML/Element/Input/text)). + +<table class="properties"> + <tbody> + <tr> + <td><strong>Valeur</strong></td> + <td>Un nombre ou une valeur vide.</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td><a href="/fr/docs/Web/API/HTMLElement/change_event"><code>change</code></a> et <a href="/fr/docs/Web/API/HTMLElement/Input_event"><code>input</code></a></td> + </tr> + <tr> + <td><strong>Attributs pris en charges</strong></td> + <td><a href="/fr/docs/Web/HTML/Element/Input#attr-autocomplete"><code>autocomplete</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-list"><code>list</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-placeholder"><code>placeholder</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-readonly"><code>readonly</code></a></td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td><a href="/fr/docs/Web/API/HTMLInputElement/select"><code>select()</code></a>, <a href="/fr/docs/Web/API/HTMLInputElement/stepUp"><code>stepUp()</code></a>, <a href="/fr/docs/Web/API/HTMLInputElement/stepDown"><code>stepDown()</code></a></td> + </tr> + </tbody> +</table> ## Valeur -Un nombre (cf. {{jsxref("Number")}}) qui représente la valeur saisie dans le contrôle. Il est possible d'indiquer une valeur par défaut en utilisant l'attribut {{htmlattrxref("value", "input")}} : +Un nombre qui représente la valeur saisie dans le contrôle. Il est possible d'indiquer une valeur par défaut en utilisant l'attribut [`value`](/fr/docs/Web/HTML/Element/Input#attr-value) : ```html <input id="number" type="number" value="42"> ``` -{{EmbedLiveSample('Valeur', 600, 40)}} +{{EmbedLiveSample('', 600, 40)}} ## Attributs supplémentaires -En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les champs de type `"number"` peuvent utiliser les attributs suivants : +En complément des attributs pris en charge par l'ensemble des éléments [`<input>`](/fr/docs/Web/HTML/Element/Input), les champs de type `number` peuvent utiliser les attributs suivants. -| Attribut | Description | -| ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `{{anch("max")}}` | La valeur maximale qui peut être acceptée. | -| `{{anch("min")}}` | La valeur minimale qui peut être acceptée. | -| `{{anch("placeholder")}}` | Une valeur fournie comme exemple affiché lorsque le champ est vide. | -| `{{anch("readonly")}}` | Un attribut booléen qui contrôle si le champ est en lecture seule. | -| `{{anch("step")}}` | Le pas à utiliser pour incrémenter la valeur à l'aide du contrôle fourni par l'agent utilisateur. Cet incrément est également utilisé pour la validation de la valeur. | +### `list` -### {{htmlattrdef("max")}} +La valeur de cet attribut est l'identifiant d'un élément [`<datalist>`](/fr/docs/Web/HTML/Element/datalist) situé dans le même document. +L'élément [`<datalist>`](/fr/docs/Web/HTML/Element/datalist) fournit la liste de valeurs prédéfinies à suggérer à l'utilisatrice ou à l'utilisateur. Toute valeur de la liste qui n'est pas compatible avec ce type de champ n'est pas incluse dans les options suggérées. Les valeurs fournies sont des suggestions et pas des valeurs imposées : il reste possible de sélectionner des valeurs en dehors de cette liste. -La valeur maximale qui peut être acceptée pour ce champ. Si la valeur du champ (portée par l'attribut {{htmlattrxref("value", "input")}}) dépasse ce seuil, l'élément [ne pourra être validé](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur de l'attribut `max` n'est pas un nombre, l'élément n'aura pas de maximum. +### `max` + +La valeur maximale qui peut être acceptée pour ce champ. Si la valeur du champ (portée par l'attribut [`value`](/fr/docs/Web/HTML/Element/Input#attr-value) dépasse ce seuil, l'élément [ne pourra être validé](/fr/docs/Web/Guide/HTML/Constraint_validation). Si la valeur de l'attribut `max` n'est pas un nombre, l'élément n'aura pas de maximum. Cette valeur doit être supérieure ou égale à l'attribut `min`. -### {{htmlattrdef("min")}} +### `min` -La valeur minimale qui peut être acceptée pour ce champ. Si la valeur du champ (portée par l'attribut {{htmlattrxref("value", "input")}}) est inférieure à ce seuil, l'élément [ne pourra être validé](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur de l'attribut `min` n'est pas un nombre, l'élément n'aura pas de minimum. +La valeur minimale qui peut être acceptée pour ce champ. Si la valeur du champ (portée par l'attribut [`value`](/fr/docs/Web/HTML/Element/Input#attr-value) est inférieure à ce seuil, l'élément [ne pourra être validé](/fr/docs/Web/Guide/HTML/Constraint_validation). Si la valeur de l'attribut `min` n'est pas un nombre, l'élément n'aura pas de minimum. Cette valeur doit être inférieure ou égale à l'attribut `max`. -{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}} +### `placeholder` + +L'attribut `placeholder` est une chaîne de caractères fournissant une courte indication à l'utilisatrice ou l'utilisateur quant à l'information attendue dans le champ. Cet attribut devrait être un mot ou une phrase courte qui illustre le type de donnée attendu plutôt qu'un message explicatif. Le texte _ne doit pas_ contenir de saut à la ligne. -{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}} +Si le contenu du contrôle respecte une directionnalité donnée ([LTR](/fr/docs/Glossary/ltr) ou [RTL](/fr/docs/Glossary/rtl)) et que le texte indicatif doit être présenté dans l'autre sens, il est possible d'utiliser l'algorithme de formatage bidirectionnel Unicode — voir [Comment utiliser les contrôles Unicode pour le texte bidirectionnel (en anglais)](https://www.w3.org/International/questions/qa-bidi-unicode-controls) pour plus de détails. -### {{htmlattrdef("step")}} +> **Note :** On évitera, tant que faire se peut, d'utiliser l'attribut `placeholder`, car il n'est pas sémantiquement très utile pour expliquer le formulaire et car il peut causer certains problèmes avec le contenu. Voir [Utilisation de libellés](/fr/docs/Web/HTML/Element/Input#utilisation_de_libellés) pour plus d'informations. -L'attribut `step` est un nombre qui définit la granularité de la valeur ou le mot-clé `any`. Seule les valeurs qui sont des multiples de cet attribut depuis le seuil `{{anch("min")}}` sont valides. +### `readonly` -Lorsque la chaîne de caractères `any` est utilisée, cela indique qu'aucun incrément spécifique n'est défini et que toute valeur (comprise entre `{{anch("min")}}` et `{{anch("max")}}`) est valide. +Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisatrice ou l'utilisateur. Toutefois, la valeur de l'attribut `value` peut toujours être modifiée via du code JavaScript, qui définirait la propriété `value` rattachée à [l'interface `HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement). -> **Note :** Lorsque les données saisies par l'utilisateur ne correspondent pas à l'incrément indiqué, l'agent utilisateur pourra arrondir à la valeur valide la plus proche (en choisissant les nombres les plus grands lorsque deux sont équidistants. +> **Note :** Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut `required` n'aura pas d'effet si l'attribut `readonly` est également présent. -Pour les champs `number`, l'incrément par défaut est 1 et ne permet donc que de saisir des entiers si la valeur de base est entière. Ainsi, si on a `min` qui vaut -10 et `value` qui vaut 1.5, si on a `step` qui vaut 1, seules les valeurs 1.5, 2.5, 3.5,... -0.5, -1.5, -2.5,... seront valides. +### `step` + +L'attribut `step` est un nombre qui définit la granularité de la valeur ou le mot-clé `any`. Seules les valeurs qui sont des multiples de cet attribut depuis le seuil `min` sont valides. + +Lorsque la chaîne de caractères `any` est utilisée, cela indique qu'aucun incrément spécifique n'est défini et que toute valeur (comprise entre `min` et `max`) est valide. + +> **Note :** Lorsque les données saisies par l'utilisatrice ou l'utilisateur ne correspondent pas à l'incrément indiqué, l'agent utilisateur pourra arrondir à la valeur valide la plus proche (en choisissant les nombres les plus grands lorsque deux sont équidistants). + +Pour les champs de type `number`, l'incrément par défaut est 1 et ne permet donc que de saisir des entiers si la valeur de base est entière. Ainsi, si on a `min` qui vaut -10 et `value` qui vaut 1.5, si on a `step` qui vaut 1, seules les valeurs 1.5, 2.5, 3.5,…, -0.5, -1.5, -2.5,… seront valides. ## Utiliser les contrôles de saisie numérique -Les éléments `<input type="number">` simplifient la saisie de valeurs numériques dans un formulaire. Lorsqu'on crée un tel contrôle, des mécanismes de validation automatiques sont appliqués afin de vérifier que le texte saisi est bien un nombre. Généralement un contrôle de saisie numérique incluera des boutons avec des curseurs pour augmenter/réduire la valeur. +Les éléments `<input type="number">` simplifient la saisie de valeurs numériques dans un formulaire. Lorsqu'on crée un tel contrôle, des mécanismes de validation automatiques sont appliqués afin de vérifier que le texte saisi est bien un nombre. Généralement un contrôle de saisie numérique inclura des boutons avec des curseurs pour augmenter/réduire la valeur. -> **Attention :** On notera qu'un utilisateur peut toujours saisir des valeurs qui ne sont pas numériques dans de tels champs (par exemple avec un navigateur de bureau). Toutefois, ce comportement semble différer selon les navigateurs (voir {{bug(1398528)}}). Les valeurs non-numériques seront considérées comme invalide (cf. {{anch("Validation")}} ci-après). +> **Attention :** On notera qu'une utilisatrice ou un utilisateur peut toujours saisir des valeurs qui ne sont pas numériques dans de tels champs (par exemple avec un navigateur de bureau). Toutefois, ce comportement semble différer selon les navigateurs (voir [le bug 1398528](https://bugzilla.mozilla.org/show_bug.cgi?id=1398528)). -> **Note :** Il est important de rappeler qu'un utilisateur peut tout à fait modifier le code HTML qui est utilisé. Le site ne doit donc pas se reposer sur les mécanismes de validation qui existent côté client pour considérer qu'une valeur est saine. Pour des raisons de contrôle et de sécurité, les valeurs envoyées via un formulaire doivent être vérifiées côté serveur. +> **Note :** Il est important de rappeler qu'une utilisatrice ou un utilisateur peut tout à fait modifier le code HTML qui est utilisé. Le site ne doit donc pas se reposer sur les mécanismes de validation qui existent côté client pour considérer qu'une valeur est saine. Pour des raisons de contrôle et de sécurité, les valeurs envoyées via un formulaire doivent être vérifiées côté serveur. -De plus, les navigateurs mobiles peuvent adapter leur ergonomie en affichant un clavier adapté à la saisie de valeur numérique lorsque l'utilisateur appuie sur un tel contrôle. Voici le résultat qu'on obtient par exemple avec Firefox pour Android : +De plus, les navigateurs mobiles peuvent adapter leur ergonomie en affichant un clavier adapté à la saisie de valeur numérique lorsque l'utilisatrice ou l'utilisateur appuie sur un tel contrôle. ### Un contrôle simple -Dans sa forme la plus simple, on peut implémenter un contrôle de saisie numérique avec le fragment HTML suivant : +Dans sa forme la plus simple, on peut implémenter un contrôle de saisie numérique avec le fragment HTML suivant : ```html <label for="ticketNum">Nombre de tickets à acheter :</label> <input id="ticketNum" type="number" name="ticketNum" value="0"> ``` -{{EmbedLiveSample('Un_contrôle_simple', 600, 40)}} +{{EmbedLiveSample('', 600, 40)}} -Un contrôle de saisie numérique considère que la valeur est valide si elle est vide ou quand un nombre est saisi. Dans les autres cas, la valeur est considérée invalide. Si l'attribut {{htmlattrxref("required", "input")}} est utilisé, la valeur vide n'est plus considérée valide. +Un contrôle de saisie numérique considère que la valeur est valide si elle est vide ou quand un nombre est saisi. Dans les autres cas, la valeur est considérée invalide. Si l'attribut [`required`](/fr/docs/Web/HTML/Element/Input#attr-required) est utilisé, la valeur vide n'est plus considérée valide. -> **Note :** N'importe quel nombre est valide tant que c'est un nombre qui peut être représenté [comme un nombre à virgule flottante](https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number) (autrement dit, un nombre qui n'est pas {{jsxref("NaN")}} ou {{jsxref("Infinity")}}). +> **Note :** N'importe quel nombre est valide tant que c'est un nombre qui peut être représenté [comme un nombre à virgule flottante](https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number) (autrement dit, un nombre qui n'est pas [`NaN`](/fr/docs/Web/JavaScript/Reference/Global_Objects/NaN) ou [`Infinity`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Infinity)). -### Indicateurs de saisie - _placeholders_ +### Indicateurs de saisie — <i lang="en">placeholders</i> -Il est parfois utile de fournir une indication quant à la valeur qui devrait être saisie. C'est notamment le cas lorsque la disposition de la page ne permet pas d'avoir d'étiquettes suffisamment descriptives pour chaque {{HTMLElement("input")}}. Dans ces cas, on peut utiliser l'attribut `placeholder` afin de fournir une indication et qui sera le texte affiché dans le contrôle avant toute saisie ou quand la valeur est vide. +Il est parfois utile de fournir une indication quant à la valeur qui devrait être saisie. C'est notamment le cas lorsque la disposition de la page ne permet pas d'avoir d'étiquettes suffisamment descriptives pour chaque [`<input>`](/fr/docs/Web/HTML/Element/Input). Dans ces cas, on peut utiliser l'attribut `placeholder` afin de fournir une indication et qui sera le texte affiché dans le contrôle avant toute saisie ou quand la valeur est vide. -Dans l'exemples qui suit, on utilise un élément ` <input``> ` de type `"number"` avec le texte indicatif `"Multiple de 10"`. Vous pouvez noter la façon dont le texte disparaît/réapparaît à selon la présence ou l'absence de valeur dans le champ. +Dans l'exemple qui suit, on utilise un élément `<input>` de type `number` avec le texte indicatif `Multiple de 10`. Vous pouvez noter la façon dont le texte disparaît/réapparaît à selon la présence ou l'absence de valeur dans le champ. ```html <input type="number" placeholder="Multiple de 10"> ``` -{{ EmbedLiveSample('Indicateurs_de_saisie_-_placeholders', 600, 40) }} +{{EmbedLiveSample('', 600, 40)}} -### Paramétrer la taille de l’incrément +### Paramétrer la taille de l'incrément -Par défaut, les curseurs fournis pour incrémenter/décrémenter la valeur utilisent un pas de 1. Ce comportement par défaut peut être changé en utilisant l'attribut {{htmlattrxref("step", "input")}} dont la valeur représente le pas d'incrémentation. Dans l'exemple qui suit et parce que le texte informatif indique "Multiple de 10", on utilise un pas de 10 grâce à l'attribut `step` : +Par défaut, les curseurs fournis pour incrémenter/décrémenter la valeur utilisent un pas de 1. Ce comportement par défaut peut être changé en utilisant l'attribut [`step`](/fr/docs/Web/HTML/Element/Input#attr-step) dont la valeur représente le pas d'incrémentation. Dans l'exemple qui suit et parce que le texte informatif indique "Multiple de 10", on utilise un pas de 10 grâce à l'attribut `step` : ```html <input type="number" placeholder="Multiple de 10" step="10"> ``` -{{EmbedLiveSample("Paramétrer_la_taille_de_l’incrément", 600, 40)}} +{{EmbedLiveSample("", 600, 40)}} Dans cet exemple, on peut voir que les curseurs permettent d'augmenter ou de réduire la valeur de 10 (et non de 1). Il est toujours possible de saisir manuellement un nombre qui n'est pas un multiple de 10 mais la valeur sera alors considérée invalide. ### Indiquer un minimum et un maximum -Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} peuvent être employés afin d'indiquer les bornes de l'intervalle dans lequel doit se situer la valeur. Par exemple, avec le fragment HTML suivant, on indique que le minimum vaut 0 et que le maximum vaut 100 : +Les attributs `min` et `max` peuvent être employés afin d'indiquer les bornes de l'intervalle dans lequel doit se situer la valeur. Par exemple, avec le fragment HTML suivant, on indique que le minimum vaut 0 et que le maximum vaut 100 : ```html <input type="number" placeholder="Multiple de 10" step="10" min="0" max="100"> ``` -{{EmbedLiveSample('Indiquer_un_minimum_et_un_maximum', 600, 40)}} +{{EmbedLiveSample('', 600, 40)}} Dans cet exemple, les curseurs ne permettent pas de dépasser 100 ou de saisir une valeur inférieure à 0. Il est toujours possible de saisir manuellement un nombre en dehors de ces bornes mais la valeur sera alors considérée invalide. ### Autoriser les valeurs décimales -Par défaut, l'incrément d'un tel contrôle vaut 1 et si on saisit la valeur `1.0`, elle sera considérée invalide. Si on souhaite pouvoir saisir une valeur qui contient une partie décimale, on pourra utiliser l'attribut `step` (par exemple, on pourra utiliser `step="0.01"` pour autoriser des nombres avec deux chiffres après la virgules) : +Par défaut, l'incrément d'un tel contrôle vaut 1 et si on saisit la valeur `1.0`, elle sera considérée invalide. Si on souhaite pouvoir saisir une valeur qui contient une partie décimale, on pourra utiliser l'attribut `step` (par exemple, on pourra utiliser `step="0.01"` pour autoriser des nombres avec deux chiffres après la virgule) : ```html <input type="number" placeholder="1.0" step="0.01" min="0" max="10"> ``` -{{EmbedLiveSample("Autoriser_les_valeurs_décimales", 600, 40)}} +{{EmbedLiveSample("", 600, 40)}} -Dans cet exemple, on peut saisir des valeurs comprises entre 0 et 10 et qui ont au plus deux chiffres après la virgule, "9.52" sera considérée comme valide mais pas "9.521". +Dans cet exemple, on peut saisir des valeurs comprises entre 0 et 10 et qui ont au plus deux chiffres après la virgule, `9.52` sera considérée comme valide mais pas `9.521`. ### Paramétrer la taille du contrôle -Les éléments {{HTMLElement("input")}} de type `"number"` ne prennent pas en charge l'attribut {{htmlattrxref("size", "input")}} et il est donc nécessaire d'utiliser CSS afin de modifier la taille des contrôles. +Les éléments [`<input>`](/fr/docs/Web/HTML/Element/Input) de type `number` ne prennent pas en charge l'attribut [`size`](/fr/docs/Web/HTML/Element/Input#attr-size) et il est donc nécessaire d'utiliser CSS afin de modifier la taille des contrôles. -Par exemple, si on souhaite réduire la largeur du contrôle car il ne permet que de saisir un nombre à trois chiffres, on ajoute un identifiant sur l'élément et on réduit le texte indicatif afin qu'il ne soit pas tronqué : +Par exemple, si on souhaite réduire la largeur du contrôle, car il ne permet que de saisir un nombre à trois chiffres, on ajoute un identifiant sur l'élément et on réduit le texte indicatif afin qu'il ne soit pas tronqué : ```html <input type="number" placeholder="x10" step="10" min="0" max="100" id="number"> ``` -On ajoute ensuite une déclaration CSS dans la feuille de style pour l'élément avec un identifiant `"number"` : +On ajoute ensuite une déclaration CSS dans la feuille de style pour l'élément avec un identifiant `number` : ```css #number { @@ -155,13 +185,13 @@ On ajoute ensuite une déclaration CSS dans la feuille de style pour l'élément } ``` -Le résultat ressemblera à : +Le résultat ressemblera à : -{{EmbedLiveSample('Paramétrer_la_taille_du_contrôle', 600, 40)}} +{{EmbedLiveSample('', 600, 40)}} ### Ajouter des valeurs suggérées -Il est possible de fournir une liste d'options par défaut parmi lesquelles l'utilisateur pourra choisir. Pour cela, on renseignera l'attribut {{htmlattrxref("list", "input")}} dont la valeur est l'identifiant (attribut `id`) d'un élément {{HTMLElement("datalist")}} contenant autant d'éléments {{HTMLElement("option")}} que de valeurs suggéréees. La valeur de l'attribut `value` de chaque élément `<option>` sera utilisée comme suggestion pour la saisie dans le contrôle. +Il est possible de fournir une liste d'options par défaut parmi lesquelles l'utilisatrice ou l'utilisateur pourra choisir. Pour cela, on renseignera l'attribut [`list`](/fr/docs/Web/HTML/Element/Input#attr-list) dont la valeur est l'identifiant (attribut `id`) d'un élément [`<datalist>`](/fr/docs/Web/HTML/Element/datalist) contenant autant d'éléments [`<option>`](/fr/docs/Web/HTML/Element/Option) que de valeurs suggérées. La valeur de l'attribut `value` de chaque élément `<option>` sera utilisée comme suggestion pour la saisie dans le contrôle. ```html <input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers"> @@ -176,19 +206,18 @@ Il est possible de fournir une liste d'options par défaut parmi lesquelles l'ut </datalist> ``` -{{EmbedLiveSample("Ajouter_des_valeurs_suggérées", 600, 40)}} - -> **Note :** L'attribut {{htmlattrxref("list", "input")}} pour les éléments `<input>` de type `"number"` n'est pas pris en charge pour tous les navigateurs (cela fonctionne pour Chrome et Opera mais pas pour Firefox par exemple). +{{EmbedLiveSample("", 600, 40)}} ## Validation -Plusieurs mécanismes de validation sont mis en place par le navigateur pour les contrôles de saisie numérique : +Plusieurs mécanismes de validation sont mis en place par le navigateur pour les contrôles de saisie numérique : - Toute valeur qui n'est pas un nombre est considérée comme invalide (la valeur vide est uniquement considérée comme valide si l'attribut `required` est absent). -- Toute valeur qui n'est pas un multiple de {{htmlattrxref("step", "input")}} est considérée comme invalide. -- Toute valeur qui est inférieure à {{htmlattrxref("min", "input")}} ou supérieure à {{htmlattrxref("max", "input")}} est considérée comme invalide. +- L'attribut [`required`](/fr/docs/Web/HTML/Element/Input#attr-required) peut être utilisé afin qu'une valeur vide soit invalide (autrement dit, le champ devra être renseigné pour être correct). +- Toute valeur qui n'est pas un multiple de [`step`](/fr/docs/Web/HTML/Element/Input#attr-step) est considérée comme invalide. +- Toute valeur qui est inférieure à `min` ou supérieure à `max` est considérée comme invalide. -L'exemple suivant illustre l'ensemble de ces fonctionnalités et quelques règles CSS ont été ajoutées afin d'afficher des icônes pour indiquer si la valeur saisie est valide ou invalide : +L'exemple suivant illustre l'ensemble de ces fonctionnalités et quelques règles CSS ont été ajoutées afin d'afficher des icônes pour indiquer si la valeur saisie est valide ou invalide : ```html <form> @@ -203,11 +232,11 @@ L'exemple suivant illustre l'ensemble de ces fonctionnalités et quelques règle </form> ``` -{{EmbedLiveSample("Validation", 600, 80)}} +{{EmbedLiveSample("", 600, 80)}} Vous pouvez essayer d'envoyer des données invalides (pas de valeur, une valeur inférieure à 0 ou supérieure à 100 ou une valeur qui n'est pas un multiple de 10) afin de voir les messages d'erreur fournis par le navigateur. -Voici les règles CSS appliquées : +Voici les règles CSS appliquées : ```css div { @@ -225,53 +254,52 @@ input:valid+span:after { } ``` -Ici, on a utilisé les pseudo-classes {{cssxref(":invalid")}} et {{cssxref(":valid")}} afin d'afficher une icône selon le cas, à côté de l'élément {{htmlelement("span")}} ajdacent. On utilise un élément `<span>` séparé pour plus de flexibilité : certains navigateurs n'affichent pas le contenu généré par les pseudo-classes pour certains types de contrôle (cf. [`<input type="date">`](/fr/docs/Web/HTML/Element/input/date#Validation)). +Ici, on a utilisé les pseudo-classes [`:invalid`](/fr/docs/Web/CSS/:invalid) et [`:valid`](/fr/docs/Web/CSS/:valid) afin d'afficher une icône selon le cas, à côté de l'élément [`<span>`](/fr/docs/Web/HTML/Element/span) adjacent. On utilise un élément `<span>` séparé pour plus de flexibilité : certains navigateurs n'affichent pas le contenu généré par les pseudo-classes pour certains types de contrôle (cf. [`<input type="date">`](/fr/docs/Web/HTML/Element/input/date#validation)). -> **Attention :** la validation des données des formulaires par le navigateur (côté client) doit toujours être complétée d'une validation des données côté serveur (l'utilisateur peut toujours modifier le HTML et envoyer les données au serveur). +> **Attention :** la validation des données des formulaires par le navigateur (côté client) doit toujours être complétée d'une validation des données côté serveur (l'utilisatrice ou l'utilisateur peut toujours modifier le HTML et envoyer les données au serveur). ### Utilisation d'un motif de validation -Les éléments `<input type="number">` ne prennent pas en charge l'attribut {{htmlattrxref("pattern", "input")}} qui permet de restreindre les valeurs selon une expression rationnelle. En effet, les contrôles de saisie numérique sont destinés à contenir des nombres plutôt que des chaînes de caractères et les autres attributs permettent de paramétrer les valeurs recevables (cf. ci-avant). +Les éléments `<input type="number">` ne prennent pas en charge l'attribut [`pattern`](/fr/docs/Web/HTML/Element/Input#attr-pattern) qui permet de restreindre les valeurs selon une expression rationnelle. -## Exemples +En effet, les contrôles de saisie numérique sont destinés à contenir des nombres plutôt que des chaînes de caractères et les autres attributs permettent de paramétrer les valeurs recevables (cf. ci-avant). -Dans l'exemple suivant, on crée un formulaire qui permet de saisir la taille d'un personne, par défaut exprimée en mètres et pour laquelle un bouton permet de la saisir en pieds (_feet_/_inches_). +## Exemples -{{EmbedLiveSample("Exemples", 600, 100)}} +Dans l'exemple suivant, on crée un formulaire qui permet de saisir la taille d'un personne, par défaut exprimée en mètres et pour laquelle un bouton permet de la saisir en pieds et en pouces (<i lang="en">feet</i> / <i lang="en">inches</i>). -### HTML +{{EmbedLiveSample("", 600, 150)}} ```html <form> - <div class="metersInputGroup"> - <label for="meters">Saisir votre taille — en mètres :</label> - <input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="e.g. 1.78" required> - <span class="validity"></span> - </div> - <span>Saisir votre taille — </span> - <label for="feet">feet :</label> - <input id="feet" type="number" name="feet" min="0" step="1"> - <span class="validity"></span> - <label for="inches">inches :</label> - <input id="inches" type="number" name="inches" min="0" max="11" step="1"> - <span class="validity"></span> - </div> - <div> - <input type="button" class="meters" value="Saisir la taille en feet/inches"> - </div> - <div> - <input type="submit" value="Envoyer"> - </div> + <div class="metersInputGroup"> + <label for="meters">Saisir votre taille — en mètres :</label> + <input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="p. ex. 1.78" required> + <span class="validity"></span> + </div> + <div class="feetInputGroup" style="display: none;"> + <span>Saisir votre taille — </span> + <label for="feet">pieds :</label> + <input id="feet" type="number" name="feet" min="0" step="1"> + <span class="validity"></span> + <label for="inches">pouces :</label> + <input id="inches" type="number" name="inches" min="0" max="11" step="1"> + <span class="validity"></span> + </div> + <div> + <input type="button" class="meters" value="Saisir la taille en pieds/pouces"> + </div> + <div> + <input type="submit" value="Envoyer"> + </div> </form> ``` Ici on utilise l'attribut `step` avec la valeur `0.01` afin d'accepter une taille en centimètres. On fournit également un texte indicatif via `placeholder`. -Par défaut on masque la saisie en pieds avec `class="hidden"`. +Par défaut on masque la saisie en pieds avec `style="display: none;"`. -### CSS - -La feuille CSS ressemble de près à celle vue précédemment : +La feuille CSS ressemble de près à celle vue précédemment : ```css div { @@ -300,17 +328,15 @@ input:valid+span:after { } ``` -### JavaScript - -Enfin, voici le code JavaScript utilisé : +Enfin, voici le code JavaScript utilisé : ```js -var metersInputGroup = document.querySelector('.metersInputGroup'); -var feetInputGroup = document.querySelector('.feetInputGroup'); -var metersInput = document.querySelector('#meters'); -var feetInput = document.querySelector('#feet'); -var inchesInput = document.querySelector('#inches'); -var switchBtn = document.querySelector('input[type="button"]'); +let metersInputGroup = document.querySelector('.metersInputGroup'); +let feetInputGroup = document.querySelector('.feetInputGroup'); +let metersInput = document.querySelector('#meters'); +let feetInput = document.querySelector('#feet'); +let inchesInput = document.querySelector('#inches'); +let switchBtn = document.querySelector('input[type="button"]'); switchBtn.addEventListener('click', function() { if(switchBtn.getAttribute('class') === 'meters') { @@ -342,62 +368,21 @@ switchBtn.addEventListener('click', function() { }); ``` -Après avoir déclaré quelques variables, on ajoute un gestionnaire d'évènements au bouton afin de gérer le changement d'unités. Lors de ce changement, on modifiera la classe du bouton et l'étiquette associée et on mettr à jour les valeurs affichées lorsque l'utilisateur appuie sur le bouton. On notera qu'il n'y a pas de mécanisme de conversion entre les mètres et les pieds (ce qui serait vraisemblablement implémenté dans une application réelle). +Après avoir déclaré quelques variables, on ajoute un gestionnaire d'évènements au bouton afin de gérer le changement d'unités. Lors de ce changement, on modifiera la classe du bouton et l'étiquette associée et on mettra à jour les valeurs affichées lorsque l'utilisatrice ou l'utilisateur appuie sur le bouton. On notera qu'il n'y a pas de mécanisme de conversion entre les mètres et les pieds (ce qui serait vraisemblablement implémenté dans une application réelle). > **Note :** Lorsqu'on clique sur le bouton, on retire l'attribut `required` du champ de saisie masqué et on vide l'attribut `value` afin de pouvoir envoyer le formulaire si un des deux champs n'est pas renseigné. -## Résumé technique - -<table class="properties"> - <tbody> - <tr> - <td><strong>{{anch("Valeur")}}</strong></td> - <td>Un nombre ou une valeur vide.</td> - </tr> - <tr> - <td><strong>Évènements</strong></td> - <td> - {{domxref("HTMLElement/change_event", "change")}} et - {{domxref("HTMLElement/input_event", "input")}} - </td> - </tr> - <tr> - <td><strong>Attributs pris en charges</strong></td> - <td> - {{htmlattrxref("autocomplete", "input")}}, - {{htmlattrxref("list", "input")}}, - {{htmlattrxref("placeholder", "input")}}, - {{htmlattrxref("readonly", "input")}} - </td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code></td> - </tr> - <tr> - <td><strong>Méthodes</strong></td> - <td> - {{domxref("HTMLInputElement.select", "select()")}}, - {{domxref("HTMLInputElement.stepUp", "stepUp()")}}, - {{domxref("HTMLInputElement.stepDown", "stepDown()")}} - </td> - </tr> - </tbody> -</table> - ## Spécifications -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | -| {{SpecName('HTML WHATWG', 'forms.html#number-state-(type=number)', '<input type="number">')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. | -| {{SpecName('HTML5.1', 'sec-forms.html#number-state-typenumber', '<input type="number">')}} | {{Spec2('HTML5.1')}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("html.elements.input.input-number")}} +{{Compat}} ## Voir aussi -- [Guide sur les formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires) -- {{HTMLElement("input")}} +- [Guide sur les formulaires HTML](/fr/docs/Learn/Forms) +- [`<input>`](/fr/docs/Web/HTML/Element/Input) - [`<input type="tel">`](/fr/docs/Web/HTML/Element/input/tel) +- [La compatibilité des propriétés CSS pour les contrôles de formulaires](/fr/docs/Learn/Forms/Property_compatibility_table_for_form_controls) diff --git a/files/fr/web/html/element/input/password/index.md b/files/fr/web/html/element/input/password/index.md index b4e3a11e68..7342190417 100644 --- a/files/fr/web/html/element/input/password/index.md +++ b/files/fr/web/html/element/input/password/index.md @@ -1,72 +1,101 @@ --- title: <input type="password"> -slug: Web/HTML/Element/Input/password -tags: - - Formulaires - - HTML - - Input - - Reference - - Web +slug: Web/HTML/Element/input/password translation_of: Web/HTML/Element/input/password +browser-compat: html.elements.input.input-password --- {{HTMLRef}} -Les éléments {{HTMLElement("input")}} de type **`"password"`** permettent à utilisateur de saisir un mot de passe sans que celui-ci ne soit lisible à l'écran. Un tel élément se présente comme un contrôle de saisie de texte sur une ligne et dans lequel chaque caractère est remplacé par un symbole (un astérisque ("\*") ou un point ("•")) afin que le texte saisi ne puisse être lu. Le caractère utilisé pour obfusquer dépend de l'agent utilisateur (du navigateur) et du système d'exploitation utilisé. +Les éléments [`<input>`](/fr/docs/Web/HTML/Element/Input) de type **`password`** permettent à l'utilisatrice ou l'utilisateur de saisir un mot de passe sans que celui-ci ne soit lisible à l'écran. + +Un tel élément se présente comme un contrôle de saisie de texte sur une ligne et dans lequel chaque caractère est remplacé par un symbole (un astérisque (`*`) ou un point (`•`)) afin que le texte saisi ne puisse être lu. Le caractère utilisé pour masquer dépend de l'agent utilisateur et du système d'exploitation utilisé. {{EmbedInteractiveExample("pages/tabbed/input-password.html", "tabbed-standard")}} -La façon dont le texte saisi est traité dépend du navigateur utilisé. Sur les appareils mobiles, par exemple, le caractère tapé est souvent laissé affiché un court instant afin que l'utilisateur puisse contrôler que c'est bien le bon caractère. Ainsi, même si le clavier est petit et viruel, on peut éviter de faire trop d'erreurs. +La façon dont le texte saisi est traité dépend du navigateur utilisé. Sur les appareils mobiles, par exemple, le caractère tapé est souvent laissé affiché un court instant afin que l'utilisatrice ou l'utilisateur puisse contrôler que c'est bien le bon caractère. Ainsi, même si le clavier est petit et virtuel, on peut éviter de faire trop d'erreurs. + +> **Note :** Les différents formulaires qui permettent d'envoyer des données sensibles (telles que des mots de passe) doivent être servis sur HTTPS. Firefox, Chrome et les autres navigateurs implémentent désormais différents mécanismes afin d'avertir l'utilisatrice ou l'utilisateur lorsqu'il saisit un mot de passe sur une connexion HTTP (cf. l'article [mots de passe non sécurisés](/fr/docs/Web/Security/Insecure_passwords) pour Firefox). -> **Note :** les différents formulaires qui permettent d'envoyer des données sensibles (tels que des mots de passe) doivent être servis sur HTTPS. Firefox, Chrome et les autres navigateurs implémentent désormais différents mécanismes afin d'avertir l'utilisateur lorsqu'il saisit un mot de passe sur une connexion HTTP (cf. l'article [mots de passe non sécurisés](/fr/docs/Web/Security/Insecure_passwords) pour Firefox). +<table class="properties"> + <tbody> + <tr> + <td><strong>Valeur</strong></td> + <td>Une chaîne de caractères qui représente un mot de passe (la chaîne peut éventuellement être vide).</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td><a href="/fr/docs/Web/API/HTMLElement/change_event"><code>change</code></a> et <a href="/fr/docs/Web/API/HTMLElement/Input_event"><code>input</code></a></td> + </tr> + <tr> + <td><strong>Attributs pris en charges</strong></td> + <td><a href="/fr/docs/Web/HTML/Element/Input#attr-autocomplete"><code>autocomplete</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-inputmode"><code>inputmode</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-maxlength"><code>maxlength</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-minlength"><code>minlength</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-pattern"><code>pattern</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-placeholder"><code>placeholder</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-readonly"><code>readonly</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-required"><code>required</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-size"><code>size</code></a></td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>selectionStart</code>, <code>selectionEnd</code>, <code>selectionDirection</code> et <code>value</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td><a href="/fr/docs/Web/API/HTMLInputElement/select"><code>select()</code></a>, <a href="/fr/docs/Web/API/HTMLInputElement/setRangeText"><code>setRangeText()</code></a>, <a href="/fr/docs/Web/API/HTMLInputElement/setSelectionRange"><code>setSelectionRange()</code></a></td> + </tr> + </tbody> +</table> ## Valeur -La valeur de l'attribut {{htmlattrxref("value", "input")}} d'un tel élément contient une chaîne de caractères ({{domxref("DOMString")}}) dont la valeur est le texte qui est en cours de saisie dans le contrôle. Si l'utilisateur n'a pas encore saisi d'information, la valeur est une chaîne vide. Si l'attribut booléen {{htmlattrxref("required")}} est utilisé, le mot de passe doit contenir une valeur non vide afin que le formulaire puisse être envoyé. +La valeur de l'attribut [`value`](/fr/docs/Web/HTML/Element/Input#attr-value) d'un tel élément contient une chaîne de caractères ([`DOMString`](/fr/docs/Web/API/DOMString)) dont la valeur est le texte qui est en cours de saisie dans le contrôle. Si l'utilisatrice ou l'utilisateur n'a pas encore saisi d'information, la valeur est une chaîne vide. Si l'attribut booléen `required` est utilisé, le mot de passe doit contenir une valeur non vide afin que le formulaire puisse être envoyé. -Si l'attribut {{htmlattrxref("pattern", "input")}} est indiqué, le contenu du contrôle doit respecter l'expression rationnelle indiquée par l'attribut. Pour plus d'informations, voir la section {{anch("Validation")}} ci-après. +Si l'attribut [`pattern`](/fr/docs/Web/HTML/Element/Input#attr-pattern) est indiqué, le contenu du contrôle doit respecter l'expression rationnelle indiquée par l'attribut. Pour plus d'informations, voir la section Validation ci-après. -> **Note :** Il n'est pas possible d'utiliser les caractères de fin de ligne (_Line Feed_) (code U+000A) et de retour chariot (_Carriage Return_) (code U+000D) dans la valeur d'un champ `"password"`. Lorsqu'on saisit la valeur, ces caractères sont retirés si besoin. +> **Note :** Il n'est pas possible d'utiliser les caractères de fin de ligne (<i lang="en">line feed</i>) (code U+000A) et de retour chariot (<i lang="en">carriage return</i>) (code U+000D) dans la valeur d'un champ `password`. Lorsqu'on saisit la valeur, ces caractères sont retirés si besoin. ## Attributs supplémentaires -En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs pour les mots de passe prennent en charge les attributs suivants : +En complément des attributs communs à l'ensemble des éléments [`<input>`](/fr/docs/Web/HTML/Element/Input), les champs pour les mots de passe prennent en charge les attributs suivants. + +### `maxlength` + +Le nombre maximum de caractères (exprimé en nombre d'unités de code UTF-16) que l'utilisatrice ou l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour `maxlength` ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à `minlength`. + +Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/Constraint_validation) si la longueur du texte dépasse `maxlength` en nombre d'unités de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisatrice ou l'utilisateur. + +### `minlength` + +Le nombre minimal de caractères (exprimé en nombre d'unités de code UTF-16) que l'utilisatrice ou l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour `minlength` ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieure à `maxlength`. -| Attribut | Description | -| ---------------------------------- | --------------------------------------------------------------------------------------------------------- | -| `{{anch("maxlength")}}` | Le nombre de caractères maximal qui peut être écrit dans ce champ. | -| `{{anch("minlength")}}` | Le nombre de caractères minimal qui peut être écrit dans ce champ pour qu'il soit considéré comme valide. | -| `{{anch("pattern")}}` | Une expression rationnelle à laquelle doit correspondre le texte saisi pour être valide. | -| `{{anch("placeholder")}}` | Une valeur d'exemple qui sera affichée lorsqu'aucune valeur n'est saisie. | -| `{{anch("readonly")}}` | Un attribut booléen qui indique si le contenu du champ est en lecture seule. | -| `{{anch("size")}}` | Un nombre qui indique le nombre de caractères affichés par le champ. | +Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/Constraint_validation) si la longueur du texte est inférieure à `minlength` en nombre d'unités de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisatrice et l'utilisateur. -### {{htmlattrdef("maxlength")}} +### `pattern` -Le nombre maximum de caractères (exprimé en nombre d'unité de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour `maxlength` ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à `minlength`. +L'attribut `pattern` est une expression rationnelle que doit respecter la valeur ([`value`](/fr/docs/Web/HTML/Element/Input#attr-value)) du champ afin d'être [valide](/fr/docs/Web/Guide/HTML/Constraint_validation). Cette expression rationnelle doit être une expression rationnelle valide pour JavaScript (telle qu'utilisée par [`RegExp`](/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp) et telle que documentée dans [ce guide](/fr/docs/Web/JavaScript/Guide/Regular_Expressions)). Le marqueur `'u'` est fourni par le navigateur lors de la compilation de l'expression rationnelle afin que le motif soit traité comme une séquence de points de code Unicode plutôt que comme des caractères ASCII. Aucune barre oblique (`/`) ne devrait être utilisée autour du motif. -Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) si la longueur du texte dépasse `maxlength` en nombre d'unité de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur. +Si l'expression rationnelle est invalide ou que cet attribut n'est pas défini, l'attribut est ignoré. -### {{htmlattrdef("minlength")}} +> **Note :** L'attribut [`title`](/fr/docs/Web/HTML/Element/Input#attr-title) pourra être utilisé afin d'afficher une bulle d'informations qui explique les conditions à respecter. Il est également conseillé d'inclure un texte explicatif à proximité du champ. -Le nombre minimal de caractères (exprimé en nombre d'unité de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour `minlength` ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieur à `maxlength`. +Voir [la section sur l'utilisation de cet attribut ci-après](#validation) pour plus d'exemples. -Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) si la longueur du texte est inférieure à `minlength` en nombre d'unité de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur. +L'utilisation d'un motif pour les mots de passe est fortement recommandée. Elle permet de s'assurer que les mots de passe saisis respectent des critères de complexité suffisants pour être robustes. Voir la section [Validation](#validation) ci-après pour plus de détails et d'exemples. -### {{htmlattrdef("pattern")}} +### `placeholder` -{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}} +L'attribut `placeholder` est une chaîne de caractères fournissant une courte indication à l'utilisatrice ou l'utilisateur quant à l'information attendue dans le champ. Cet attribut devrait être un mot ou une phrase courte qui illustre le type de donnée attendu plutôt qu'un message explicatif. Le texte ne doit pas contenir de saut à la ligne. -L'utilisation d'un motif pour les mots de passe est fortement recommandée. Elle permet de s'assurer que les mots de passe saisis respectent des critères de complexité suffisants pour être robustes. Voir la section {{anch("Validation")}} ci-après pour plus de détails et d'exemples. +Si le contenu du contrôle respecte une directionnalité donnée ([LTR](/fr/docs/Glossary/ltr) ou [RTL](/fr/docs/Glossary/rtl)) et que le texte indicatif doit être présenté dans l'autre sens, il est possible d'utiliser l'algorithme de formatage bidirectionnel Unicode — voir [Comment utiliser les contrôles Unicode pour le texte bidirectionnel (en anglais)](https://www.w3.org/International/questions/qa-bidi-unicode-controls) pour plus de détails. -{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}} +> **Note :** On évitera, tant que faire se peut, d'utiliser l'attribut `placeholder`, car il n'est pas sémantiquement très utile pour expliquer le formulaire et car il peut causer certains problèmes avec le contenu. Voir [Utilisation de libellés](/fr/docs/Web/HTML/Element/Input#utilisation_de_libellés) pour plus d'informations. -### {{htmlattrdef("readonly")}} +### `readonly` -Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisateur. Toutefois, la valeur de l'attribut `value` peut toujours être modifiée via du code JavaScript qui définirait la propriété {{domxref("HTMLInputElement.value")}}. +Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisatrice ou l'utilisateur. Toutefois, la valeur de l'attribut `value` peut toujours être modifiée via du code JavaScript, qui définirait la propriété `value` rattachée à [l'interface `HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement). > **Note :** Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut `required` n'aura pas d'effet si l'attribut `readonly` est également présent. -{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}} +### `size` + +L'attribut `size` est un nombre positif qui indique le nombre de caractères affichés à l'écran et qui définit donc la largeur du champ. La valeur par défaut de cet attribut est 20. Étant donné que la largeur des caractères peut varier cet attribut ne permet de définir une largeur exacte mais approximative. + +Cet attribut ne définit pas la limite du nombre de caractères saisissables dans le champ mais uniquement, et approximativement, le nombre de caractères qui peuvent être affichés à l'écran simultanément. Pour fixer une taille maximale sur la valeur du champ, on utilisera plutôt l'attribut `maxlength`. ## Utiliser les contrôles de saisie de mot de passe @@ -74,60 +103,60 @@ Les champs destinés à la saisie des mots de passe fonctionnent comme les champ ### Un contrôle basique -Voici un exemple simple illustrant un contrôle de saisie d'un mot de passe qui utilise un élément {{HTMLElement("label")}} afin d'indiquer le rôle du champ. +Voici un exemple simple illustrant un contrôle de saisie d'un mot de passe qui utilise un élément [`<label>`](/fr/docs/Web/HTML/Element/Label) afin d'indiquer le rôle du champ. ```html <label for="userPassword">Mot de passe :</label> <input id="userPassword" type="password"> ``` -{{EmbedLiveSample("Un_contrôle_basique", 600, 40)}} +{{EmbedLiveSample("", 600, 40)}} ### Paramétrer l'autocomplétion -Afin de permettre au gestionnaire de mots de passe de saisir automatiquement le mot de passe, on pourra utiliser l'attribut {{htmlattrxref("autocomplete", "input")}}. Pour les mots de passe, celui-ci aura l'une des valeurs suivantes : +Afin de permettre au gestionnaire de mots de passe de saisir automatiquement le mot de passe, on pourra utiliser l'attribut [`autocomplete`](/fr/docs/Web/HTML/Element/Input#attr-autocomplete). Pour les mots de passe, celui-ci aura l'une des valeurs suivantes : - `on` - - : Cette valeur permet au navigateur ou à un gestionnaire de mot de passe de remplir automatiquement le champ. Cette valeur n'est pas aussi informatique que `"current-password"` or `"new-password"`. + - : Cette valeur permet au navigateur ou à un gestionnaire de mot de passe de remplir automatiquement le champ. Cette valeur n'est pas aussi informative que `current-password` or `new-password`. - `off` - : Cette valeur n'autorise pas le navigateur ou le gestionnaire de mot de passe à remplir le champ automatiquement. - `current-password` - - : Cette valeur indique au navigateur ou au gestionnaire de mots de passe qu'il faut utiliser le mot de passe actuel pour le site. Cette valeur est plus précise que la valeur `"on"` car elle indique qu'il faut utiliser le mot de passe courant plutôt qu'un nouveau mot de passe. + - : Cette valeur indique au navigateur ou au gestionnaire de mots de passe qu'il faut utiliser le mot de passe actuel pour le site. Cette valeur est plus précise que la valeur `on`, car elle indique qu'il faut utiliser le mot de passe courant plutôt qu'un nouveau mot de passe. - `new-password` - - : Cette valeur indique au navigateur ou au gestionnaire de mots de passe qu'il faut générer un nouveau mot de passe et utiliser ce dernier pour remplir le champ. La génération automatique du mot de passe peut alors utiliser les autres attributs de l'élément. Cette valeur peut également être indiquée pour que le navigateur indique cette information d'un façon ou d'une autre. + - : Cette valeur indique au navigateur ou au gestionnaire de mots de passe qu'il faut générer un nouveau mot de passe et utiliser ce dernier pour remplir le champ. La génération automatique du mot de passe peut alors utiliser les autres attributs de l'élément. Cette valeur peut également être indiquée pour que le navigateur indique cette information d'une façon ou d'une autre. ```html <label for="userPassword">Mot de passe :</label> <input id="userPassword" type="password" autocomplete="current-password"> ``` -{{EmbedLiveSample("Paramétrer_l'autocomplétion", 600, 40)}} +{{EmbedLiveSample("", 600, 40)}} ### Rendre le champ obligatoire -Pour indiquer à l'utilisateur que le mot de passe est obligatoire, on pourra utiliser l'attribut {{htmlattrxref("required", "input")}}. +Pour indiquer à l'utilisatrice ou l'utilisateur que le mot de passe est obligatoire, on pourra utiliser l'attribut [`required`](/fr/docs/Web/HTML/Element/Input#attr-required). ```html <label for="userPassword">Mot de passe :</label> <input id="userPassword" type="password" required> ``` -{{EmbedLiveSample("Rendre_le_champ_obligatoire", 600, 40)}} +{{EmbedLiveSample("", 600, 40)}} ### Définir un mode de saisie -Si votre application utilise un autre mode de saisie que le mode par défaut, l'attribut {{htmlattrxref("inputmode", "input")}} peut être employé pour indiquer le mode à utiliser. Le cas le plus fréquent est celui où on utilise une valeur numérique pour un mot de passe (par exemple pour un code PIN). Si ce code ne doit être utilisé qu'une seule fois, on pourra paramétrer l'attribut {{htmlattrxref("autocomplete", "input")}} avec la valeur `off`. Les appareils mobiles pourront tirer parti de la valeur de cet attribut et afficher un autre clavier pour faciliter la saisie. +Si votre application utilise un autre mode de saisie que le mode par défaut, l'attribut [`inputmode`](/fr/docs/Web/HTML/Element/Input#attr-inputmode) peut être employé pour indiquer le mode à utiliser. Le cas le plus fréquent est celui où on utilise une valeur numérique pour un mot de passe (par exemple pour un code PIN). Si ce code ne doit être utilisé qu'une seule fois, on pourra paramétrer l'attribut [`autocomplete`](/fr/docs/Web/HTML/Element/Input#attr-autocomplete) avec la valeur `off`. Les appareils mobiles pourront tirer parti de la valeur de cet attribut et afficher un autre clavier pour faciliter la saisie. ```html <label for="pin">PIN :</label> <input id="pin" type="password" inputmode="numeric"> ``` -{{EmbedLiveSample("Définir_un_mode_de_saisie", 600, 40)}} +{{EmbedLiveSample("", 600, 40)}} ### Indiquer des critères de longueur -Les attributs {{htmlattrxref("minlength", "input")}} et {{htmlattrxref("maxlength", "input")}} peuvent être utilisés afin d'indiquer les tailles minimale et maximale du mot de passe qui doit être saisi. Dans l'exemple qui suit, on repart de l'exemple précédent et on indique que le code PIN doit contenir au moins 4 caractères et au plus 8 caractères. L'attribut {{htmlattrxref("size", "input")}} est utilisé afin que le contrôle permette bien d'afficher 8 caractères. +Les attributs [`minlength`](/fr/docs/Web/HTML/Element/Input#attr-minlength) et [`maxlength`](/fr/docs/Web/HTML/Element/Input#attr-maxlength) peuvent être utilisés afin d'indiquer les tailles minimale et maximale du mot de passe qui doit être saisi. Dans l'exemple qui suit, on repart de l'exemple précédent et on indique que le code PIN doit contenir au moins 4 caractères et au plus 8 caractères. L'attribut [`size`](/fr/docs/Web/HTML/Element/Input#attr-size) est utilisé afin que le contrôle permette bien d'afficher 8 caractères. ```html <label for="pin">PIN :</label> @@ -135,11 +164,11 @@ Les attributs {{htmlattrxref("minlength", "input")}} et {{htmlattrxref("maxlengt maxlength="8" size="8"> ``` -{{EmbedLiveSample("Indiquer_des_critères_de_longueur", 600, 40)}} +{{EmbedLiveSample("", 600, 40)}} ### Sélectionner le texte saisi -Il est possible d'utiliser la méthode {{domxref("HTMLInputElement.select", "select()")}} pour sélectionner le texte saisi dans le contrôle. +Il est possible d'utiliser la méthode [`select()`](/fr/docs/Web/API/HTMLInputElement/select) pour sélectionner le texte saisi dans le contrôle. #### HTML @@ -159,13 +188,13 @@ document.getElementById("selectAll").onclick = function(event) { #### Résultat -{{EmbedLiveSample("Sélectionner_le_texte_saisi", 600, 40)}} +{{EmbedLiveSample("", 600, 40)}} -On peut également utiliser {{domxref("HTMLInputElement.selectionStart", "selectionStart")}} et {{domxref("HTMLInputElement.selectionEnd", "selectionEnd")}} afin d'obtenir (ou de régler) l'intervalle de caractères sélectionnés. {{domxref("HTMLInputElement.selectionDirection", "selectionDirection")}} permet de connaître la direction dans laquelle la sélection a été effectuée. +On peut également utiliser [`selectionStart`](/fr/docs/Web/API/HTMLInputElement) et [`selectionEnd`](/fr/docs/Web/API/HTMLInputElement) afin d'obtenir (ou de régler) l'intervalle de caractères sélectionnés. [`selectionDirection`](/fr/docs/Web/API/HTMLInputElement) permet de connaître la direction dans laquelle la sélection a été effectuée. ## Validation -Si votre application possède des contraintes sur les caractères utilisables ou sur la structure du mot de passe, il est possible d'utiliser l'attribut {{htmlattrxref("pattern", "input")}} afin que le navigateur vérifie que la valeur saisie respecte une expression rationnelle tenant compte de ces contraintes. +Si votre application possède des contraintes sur les caractères utilisables ou sur la structure du mot de passe, il est possible d'utiliser l'attribut [`pattern`](/fr/docs/Web/HTML/Element/Input#attr-pattern) afin que le navigateur vérifie que la valeur saisie respecte une expression rationnelle tenant compte de ces contraintes. Dans cet exemple, il n'est possible de saisir qu'une valeur qui contient entre 4 et 8 caractères qui sont des caractères hexadécimaux. @@ -176,17 +205,17 @@ Dans cet exemple, il n'est possible de saisir qu'une valeur qui contient entre 4 autocomplete="nouveau-mot-de-passe"> ``` -{{EmbedLiveSample("Validation", 600, 40)}} +{{EmbedLiveSample("", 600, 40)}} ## Désactiver le champ -L'attribut booléen {{htmlattrdef("disabled")}} indique que le champ ne peut pas être utilisé de façon interactive. Les données des champs désactivés ne seront pas envoyées avec le formulaire. +L'attribut booléen `disabled` indique que le champ ne peut pas être utilisé de façon interactive. Les données des champs désactivés ne seront pas envoyées avec le formulaire. ## Exemples ### Saisir un numéro de sécurité sociale américain comme mot de passe -Dans l'exemple qui suit, on construit un formulaire avec un mot de passe qui doit respecter le format d'un [numéro de sécurité sociale américain](https://en.wikipedia.org/wiki/Social_Security_number#Structure). Ces nombres ont la forme "123-45-6789" et il existe différentes règles permettant de restreindre les valeurs pour chacun des groupes. +Dans l'exemple qui suit, on construit un formulaire avec un mot de passe qui doit respecter le format d'un [numéro de sécurité sociale américain](https://en.wikipedia.org/wiki/Social_Security_number#Structure). Ces nombres ont la forme `123-45-6789` et il existe différentes règles permettant de restreindre les valeurs pour chacun des groupes. #### HTML @@ -200,72 +229,22 @@ Dans l'exemple qui suit, on construit un formulaire avec un mot de passe qui doi <span id="current"></span> ``` -On n'utilise l'attribut {{htmlattrxref("pattern", "input")}} afin d'imposer certaines contraintes de saisie afin que les chaînes aient le bon format. Cette expression rationnelle ne garantit pas un numéro valide mais elle permet de s'assurer que la valeur saisie _peut_ être un numéro de sécurité sociale valide. De plus, elle permet d'avoir un séparateur variable entre les trois groupes (un espace, un tiret ou rien). +On utilise l'attribut [`pattern`](/fr/docs/Web/HTML/Element/Input#attr-pattern) afin d'imposer certaines contraintes de saisie afin que les chaînes aient le bon format. Cette expression rationnelle ne garantit pas un numéro valide, mais elle permet de s'assurer que la valeur saisie _peut_ être un numéro de sécurité sociale valide. De plus, elle permet d'avoir un séparateur variable entre les trois groupes (une espace, un tiret ou rien). -L'attribut {{htmlattrxref("inputmode", "input")}} vaut `number`, ce qui incite les appareils mobiles à utiliser un clavier virtuel uniquement numérique pour la saisie d'un tel champ. Les attributs {{htmlattrxref("minlength", "input")}} et {{htmlattrxref("maxlength", "input")}} valent respectivement 9 et 12 et l'attribut {{htmlattrxref("required", "input")}} indique que cette valeur est nécessaire pour envoyer le formulaire. Enfin, {{htmlattrxref("autocomplete", "input")}} vaut `off`, ce qui évite que les gestionnaires de mots de passe ou que les fonctionnalités de restoration de session remplissent automatiquement cette valeur. +L'attribut [`inputmode`](/fr/docs/Web/HTML/Element/Input#attr-inputmode) vaut `number`, ce qui incite les appareils mobiles à utiliser un clavier virtuel uniquement numérique pour la saisie d'un tel champ. Les attributs [`minlength`](/fr/docs/Web/HTML/Element/Input#attr-minlength) et [`maxlength`](/fr/docs/Web/HTML/Element/Input#attr-maxlength) valent respectivement 9 et 12 et l'attribut [`required`](/fr/docs/Web/HTML/Element/Input#attr-required) indique que cette valeur est nécessaire pour envoyer le formulaire. Enfin, [`autocomplete`](/fr/docs/Web/HTML/Element/Input#attr-autocomplete) vaut `off`, ce qui évite que les gestionnaires de mots de passe ou que les fonctionnalités de restauration de session remplissent automatiquement cette valeur. #### Résultat -{{EmbedLiveSample("Saisir_un_numéro_de_sécurité_sociale_américain_comme_mot_de_passe", 600, 60)}} - -## Résumé technique - -<table class="properties"> - <tbody> - <tr> - <td><strong>{{anch("Valeur")}}</strong></td> - <td> - Une chaîne de caractères qui représente un mot de passe (la chaîne peut - éventuellement être vide). - </td> - </tr> - <tr> - <td><strong>Évènements</strong></td> - <td> - {{domxref("HTMLElement/change_event", "change")}} et - {{domxref("HTMLElement/input_event", "input")}}. - </td> - </tr> - <tr> - <td><strong>Attributs pris en charge</strong></td> - <td> - {{htmlattrxref("autocomplete", "input")}}, - {{htmlattrxref("inputmode", "input")}}, - {{htmlattrxref("maxlength", "input")}}, - {{htmlattrxref("minlength", "input")}}, - {{htmlattrxref("pattern", "input")}}, - {{htmlattrxref("placeholder", "input")}}, - {{htmlattrxref("readonly", "input")}}, - {{htmlattrxref("required", "input")}} et - {{htmlattrxref("size", "input")}} - </td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td> - <code>selectionStart</code>, <code>selectionEnd</code>, - <code>selectionDirection</code> et <code>value</code> - </td> - </tr> - <tr> - <td><strong>Méthodes</strong></td> - <td> - {{domxref("HTMLInputElement.select", "select()")}}, - {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}} - et - {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}} - </td> - </tr> - </tbody> -</table> +{{EmbedLiveSample("", 600, 60)}} ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName('HTML WHATWG', 'forms.html#password-state-(type=password)', '<input type="password">')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. | -| {{SpecName('HTML5.1', 'sec-forms.html#password-state-typepassword', '<input type="password">')}} | {{Spec2('HTML5.1')}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("html.elements.input.input-password")}} +{{Compat}} + +## Voir aussi + +- [La compatibilité des propriétés CSS pour les contrôles de formulaires](/fr/docs/Learn/Forms/Property_compatibility_table_for_form_controls) diff --git a/files/fr/web/html/element/input/range/index.md b/files/fr/web/html/element/input/range/index.md index 377e4c12c2..f0697fdf59 100644 --- a/files/fr/web/html/element/input/range/index.md +++ b/files/fr/web/html/element/input/range/index.md @@ -1,24 +1,64 @@ --- title: <input type="range"> -slug: Web/HTML/Element/Input/range -tags: - - Element - - HTML - - Input - - Reference +slug: Web/HTML/Element/input/range +browser-compat: html.elements.input.input-range translation_of: Web/HTML/Element/input/range --- -{{HTMLRef}} +{{HTMLRef("Input_types")}} -Les éléments {{HTMLElement("input")}} dont l'attribut `type` vaut **`range`** permettent à l'utilisateur d'indiquer une valeur numérique comprise entre deux bornes. La valeur précise n'est pas considérée comme importante. Ces éléments sont généralement représenté avec un curseur sur une ligne ou comme un bouton de potentiel. Ce genre de _widget_ n'étant pas précis, ce type ne devrait pas être utilisé lorsque la valeur exacte fournie par l'utilisateur est importante. +Les éléments [`<input>`](/fr/docs/Web/HTML/Element/Input) dont l'attribut `type` vaut **`range`** permettent à l'utilisatrice ou l'utilisateur d'indiquer une valeur numérique comprise entre deux bornes. La valeur précise n'est pas considérée comme importante. Ces éléments sont généralement représentés avec un curseur sur une ligne ou comme un bouton de potentiel et non pas comme un champ de saisie (à la façon de [`number`](/fr/docs/Web/HTML/Element/input/number) par exemple). + +Ce genre de <i lang="en">widget</i> n'étant pas précis, ce type ne devrait pas être utilisé lorsque la valeur exacte fournie est importante. {{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}} -Si le navigateur de l'utilisateur ne prend pas en charge le type `range`, il utilisera le type [`text`](/fr/docs/Web/HTML/Element/input/text) à la place. +Si le navigateur de l'utilisatrice ou l'utilisateur ne prend pas en charge le type `range`, il utilisera le type [`text`](/fr/docs/Web/HTML/Element/Input/text) à la place. + +<table class="properties"> + <tbody> + <tr> + <td><strong><a href="#valeur">Valeur</a></strong></td> + <td> + Une chaîne de caractères (<a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>) qui contient la représentation textuelle de la valeur numérique sélectionnée. On utilisera la méthode <a href="/fr/docs/Web/API/HTMLInputElement/valueAsNumber"><code>valueAsNumber</code></a> afin d'obtenir la valeur sous forme numérique (type <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a>). + </td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td><a href="/fr/docs/Web/API/HTMLElement/change_event"><code>change</code></a> et <a href="/fr/docs/Web/API/HTMLElement/Input_event"><code>input</code></a></td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td> + <a href="/fr/docs/Web/HTML/Element/Input#attr-autocomplete"><code>autocomplete</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-list"><code>list</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-max"><code>max</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-min"><code>min</code></a>, et <a href="/fr/docs/Web/HTML/Element/Input#attr-step"><code>step</code></a> + </td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td> + <code>list</code>, <code>value</code> et <code>valueAsNumber</code> + </td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td> + <a href="/fr/docs/Web/API/HTMLInputElement/stepDown"><code>stepDown()</code></a> et <a href="/fr/docs/Web/API/HTMLInputElement/stepUp"><code>stepUp()</code></a> + </td> + </tr> + </tbody> +</table> + +## Validation + +Il n'existe pas de motif de validation. Cependant, voici les formes de validation automatiques qui sont appliquées : + +- Si la valeur de l'attribut [`value`](/fr/docs/Web/HTML/Element/Input#attr-value) est quelque chose qui ne peut pas être converti en nombre décimal, la validation échoue. +- La valeur ne doit pas être inférieure à [`min`](/fr/docs/Web/HTML/Element/Input#attr-min). La valeur minimale par défaut est `0`. +- La valeur ne doit pas être supérieure à [`max`](/fr/docs/Web/HTML/Element/Input#attr-max). La valeur maximale par défaut est `0`. +- La valeur doit être un multiple de [`step`](/fr/docs/Web/HTML/Element/Input#attr-step). La valeur par défaut est `1`. ## Valeur -L'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères {{domxref("DOMString")}} qui correspond à la représentation textuelle du nombre sélectionnée. La valeur n'est jamais une chaîne vide (`""`). La valeur par défaut est celle médiane entre le minimum et le maximum (sauf si la valeur maximale indiquée est inférieure à la valeur minimale, auquel cas la valeur par défaut est celle de l'attribut `min`). Voici un fragment de code illustrant cet algorithme pour le choix de la valeur par défaut : +L'attribut [`value`](/fr/docs/Web/HTML/Element/Input#attr-value) contient une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui correspond à la représentation textuelle du nombre sélectionnée. La valeur n'est jamais une chaîne vide (`""`). La valeur par défaut est celle médiane entre le minimum et le maximum (sauf si la valeur maximale indiquée est inférieure à la valeur minimale, auquel cas la valeur par défaut est celle de l'attribut `min`). Voici un fragment de code illustrant cet algorithme pour le choix de la valeur par défaut : ```js defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min @@ -29,84 +69,98 @@ Si on essaie d'obtenir une valeur inférieure au minimum, alors la valeur sera r ## Attributs supplémentaires -En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs pour les intervalles peuvent utiliser les attributs suivants : +En complément des attributs communs à l'ensemble des éléments [`<input>`](/fr/docs/Web/HTML/Element/Input), les champs pour les intervalles peuvent utiliser les attributs suivants : + +### `list` + +La valeur de cet attribut est l'identifiant ([`id`](/fr/docs/Web/API/Element/id)) d'un élément [`<datalist>`](/fr/docs/Web/HTML/Element/datalist) situé dans le même document. L'élément [`<datalist>`](/fr/docs/Web/HTML/Element/datalist) fournit une liste de valeurs prédéfinies qui doivent être suggérées lors de la saisie dans le champ. Toute valeur de cette liste qui n'est pas compatible avec le type de champ ([`type`](/fr/docs/Web/HTML/Element/Input#attr-type)) ne sera pas incluse dans les suggestions. Les valeurs fournies sont des suggestions et pas des contraintes : il reste tout à fait possible de choisir une valeur différente que celles de la liste. + +Voir l'exemple ci-après sur [le contrôle d'intervalle avec les marques](#un_contrôle_avec_des_marques) qui illustre comment ces options s'affichent dans les navigateurs qui prennent en charge la fonctionnalité. -| Attribut | Description | -| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `{{anch("max")}}` | La valeur maximale autorisée. | -| `{{anch("min")}}` | La valeur minimale autorisée. | -| `{{anch("step")}}` | Le pas utilisé pour incrémenter la valeur du champ. Cette valeur est utilisée pour l'interface utilisateur du contrôle et pour la validation de la valeur. | +### `max` -### {{htmlattrdef("max")}} +La plus grande valeur autorisée sur l'intervalle. Si la valeur saisie dans le champ (représentée par l'attribut [`value`](/fr/docs/Web/HTML/Element/Input#attr-value)) dépasse ce seuil, [la validation échouera](/fr/docs/Web/Guide/HTML/Constraint_validation). Si la valeur fournie n'est pas un nombre, aucun maximum ne sera fixé pour la valeur du contrôle. -La plus grande valeur autorisée sur l'intervalle. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) dépasse ce seuil, [la validation échouera](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur fournie n'est pas un nombre, aucun maximum ne sera fixé pour la valeur du contrôle. +Cette valeur doit être supérieure ou égale à celle indiquée par l'attribut [`min`](/fr/docs/Web/HTML/Attributes/min). Voir l'attribut HTML [`max`](/fr/docs/Web/HTML/Attributes/max). -Cette valeur doit être supérieure ou égale à celle indiquée par l'attribut `min`. +### `min` -### {{htmlattrdef("min")}} +La plus petite valeur autorisée sur l'intervalle. Si la valeur saisie dans le champ (représentée par l'attribut [`value`](/fr/docs/Web/HTML/Element/Input#attr-value)) est inférieure à ce seuil, [la validation échouera](/fr/docs/Web/Guide/HTML/Constraint_validation). Si la valeur fournie n'est pas un nombre, aucun minimum ne sera fixé pour la valeur du contrôle. -La plus petite valeur autorisée sur l'intervalle. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est inférieure à ce seuil, [la validation échouera](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur fournie n'est pas un nombre, aucun minimum ne sera fixé pour la valeur du contrôle. +Cette valeur doit être inférieure ou égale à celle indiquée par l'attribut [`max`](/fr/docs/Web/HTML/Attributes/max). Voir l'attribut HTML [`min`](/fr/docs/Web/HTML/Attributes/min). -Cette valeur doit être inférieure ou égale à celle indiquée par l'attribut `max`. +### `step` -### {{htmlattrdef("step")}} +L'attribut `step` est un nombre qui définit la granularité à laquelle la valeur doit obéir, ou la valeur `any` (décrite ci-après). Seules les valeurs qui sont des incréments en multiple de `step` depuis la valeur de base ([`min`](#min) si cet attribut est défini, [`value`](/fr/docs/Web/HTML/Element/Input#attr-value) sinon, et si aucun n'est fourni, une valeur par défaut appropriée) sont valides. -{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}} +Si cet attribut utilise la chaîne de caractère `any`, cela signifie qu'il n'y a aucune contrainte d'incrément et que toute valeur est autorisée (sous réserve de respecter les autres contraintes, comme celles indiquées par [`min`](#min) et [`max`](#max)). -Par défaut, l'incrément utilisé pour les champs de type `number` vaut 1 et on ne peut alors saisir que des entiers à momins que la valeur de base ne soit pas entière. Ainsi, si on définit `min` avec -10 et `value` avec 1.5, un attribut `step` qui vaut 1 permettra de saisir les valeurs positives 1.5, 2.5, 3.5, etc. et les valeurs négatives -0.5, -1.5, -2.5, etc. +> **Note :** Lorsque les données saisies dans le contrôle ne respectent pas l'incrément, [l'agent utilisateur](/fr/docs/Glossary/User_agent) pourra arrondir à la valeur valide la plus proche, en privilégiant les nombres les plus grands si les deux options valides environnantes sont à égale distance. -## Utiliser les intervalles +Par défaut, l'incrément utilisé pour les champs de type `range` vaut 1 et on ne peut alors saisir que des entiers à moins que la valeur de base ne soit pas entière. Ainsi, si on définit `min` avec -10 et `value` avec 1.5, un attribut `step` qui vaut 1 permettra de saisir les valeurs positives 1.5, 2.5, 3.5, etc. et les valeurs négatives -0.5, -1.5, -2.5, etc. -Bien que le type `"number"` permette à l'utilisateur de saisir un nombre avec certaines contraintes optionnelles (par exemple pour que la valeur soit comprise entre un minimum et un maximum), ce type nécessite de saisir une valeur spécifique. Le type `"range"` permet de saisir une valeur lorsque l'exactitude de celle-ci importe peu. +Voir [l'attribut HTML `step`](/fr/docs/Web/HTML/Attributes/step). -Voici quelques scénarios où un intervalle de saisie est plus pertinent : +## Attributs non-standard -- Les contrôles relatis à l'audio pour le volume, la balance ou les filtres. -- Les contrôles relatifs à la configuration des couleurs (canaux, transparence, luminosité, etc.) -- Les contrôles relatifs à la configuration de jeux vidéos (difficulté, distance de visibilité, taille du monde généré, etc.) +### `orient` + +Semblable à la propriété CSS non-standard `moz-orient` qui agit sur les éléments [`<progress>`](/fr/docs/Web/HTML/Element/Progress) et [`<meter>`](/fr/docs/Web/HTML/Element/Meter), l'attribut `orient` définit l'orientation de la piste pour le contrôle d'intervalle. Les valeurs possibles incluent `horizontal` pour un affichage horizontal et `vertical` pour un affichage vertical. + +> **Note :** Les attributs suivants ne s'appliquent pas aux contrôles d'intervalle (`<input type="range">`) : `accept`, `alt`, `checked`, `dirname`, `formaction`, `formenctype`, `formmethod`, `formnovalidate`, `formtarget`, `height`, `maxlength`, `minlength`, `multiple`, `pattern`, `placeholder`, `readonly`, `required`, `size`, `src`, et `width`. Si l'un de ces attributs est inclus, il sera ignoré. + +## Exemples + +Bien que le type `number` permette à l'utilisatrice ou l'utilisateur de saisir un nombre avec certaines contraintes optionnelles (par exemple, pour que la valeur soit comprise entre un minimum et un maximum), ce type nécessite de saisir une valeur spécifique. Le type `range` permet de saisir une valeur lorsque l'exactitude de celle-ci importe peu. + +Voici quelques scénarios où un contrôle de saisie avec un intervalle est plus pertinent : + +- Les contrôles relatifs à l'audio pour le volume, la balance ou les filtres. +- Les contrôles relatifs à la configuration des couleurs (canaux, transparence, luminosité, etc.). +- Les contrôles relatifs à la configuration de jeux vidéos (difficulté, distance de visibilité, taille du monde généré, etc.). - La longueur du mot de passe pour les mots de passe générés par un gestionnaire de mots de passe. -De façon générale, si un utilisateur est plutôt intéressé dans un pourcentage représentant la distance entre la borne minimale et la borne maximale, un intervalle de saisie sera plus pertinent (par exemple, pour le volume, on pensera plutôt « augmenter le volume jusqu'à la moitié du maximum » que « mettre le volume à 0.5 »). +De façon générale, si une utilisatrice ou un utilisateur est plutôt intéressé dans un pourcentage représentant la distance entre la borne minimale et la borne maximale, un intervalle de saisie sera plus pertinent (par exemple, pour le volume, on pensera plutôt « augmenter le volume jusqu'à la moitié du maximum » que « mettre le volume à 0.5 »). ### Indiquer le minimum et le maximum -Par défaut, le minimum vaut 0 et le maximum vaut 100. Si ces bornes ne conviennent pass, on peut facilement les changer via les attributs {{htmlattrxref("min", "input")}} et/ou {{htmlattrxref("max", "input")}}. Ces attributs acceptent des nombres décimaux. +Par défaut, le minimum vaut `0` et le maximum vaut `100`. Si ces bornes ne conviennent pas, on peut facilement les changer via les attributs [`min`](/fr/docs/Web/HTML/Element/Input#attr-min) et/ou [`max`](/fr/docs/Web/HTML/Element/Input#attr-max). Ces attributs acceptent des nombres décimaux. -Par exemple, afin de demander à un utilisateur de choisir une valeur approximative dans l'intervalle \[-10 , 10], on pourra utiliser : +Par exemple, afin de demander à une utilisatrice ou un utilisateur de choisir une valeur approximative dans l'intervalle `[-10, 10]`, on pourra utiliser : ```html <input type="range" min="-10" max="10"> ``` -{{EmbedLiveSample("Indiquer_le_minimum_et_le_maximum", 600, 40)}} +{{EmbedLiveSample("", 600, 40)}} ### Définir la granularité -Par défaut, la granularité vaut 1, ce qui signifie que la valeur est toujours un entier. Cela peut être modifié grâce à l'attribut {{htmlattrxref("step")}} qui permet de contrôler la granularité. Ainsi, si on souhaite une valeur comprise entre 5 et 10 et précise avec deux chiffres après la virgule, on pourra utiliser l'attribut `step` avec la valeur 0.01 : +Par défaut, la granularité vaut `1`, ce qui signifie que la valeur est toujours un entier. Cela peut être modifié grâce à l'attribut [`step`](/fr/docs/Web/HTML/Element/Input#attr-step) qui permet de contrôler la granularité. Ainsi, si on souhaite une valeur comprise entre `5` et `10` et précise avec deux chiffres après la virgule, on pourra utiliser l'attribut `step` avec la valeur `0.01` : -#### Exemple 1 +#### Utiliser l'attribut `step` ```html <input type="range" min="5" max="10" step="0.01"> ``` -{{EmbedLiveSample("Exemple_1", 600, 40)}} +{{EmbedLiveSample("", 600, 40)}} -#### Exemple 2 +#### Utiliser l'attribut `step` avec `any` -Si on souhaite prendre en charge n'importe quelle valeur, quel que soit le nombre de décimales, on pourra utiliser la valeur `any` pour l'attribut `step` : +Si on souhaite prendre en charge n'importe quelle valeur, quel que soit le nombre de décimales, on pourra utiliser la valeur `any` pour l'attribut [`step`](/fr/docs/Web/HTML/Element/Input#attr-step) : ```html <input type="range" min="0" max="3.14" step="any"> ``` -{{EmbedLiveSample("Exemple_2", 600, 40)}} +{{EmbedLiveSample("", 600, 40)}} -Cet exemple permet à l'utilisateur de choisir une valeur entre 0 et 3.14 sans aucune restriction quant à la partie décimale. +Cet exemple permet de choisir une valeur entre `0` et `3.14` sans aucune restriction quant à la partie décimale. ### Ajouter des marques et des étiquettes -La spécification HTML fournit une certaine flexibilité aux navigateurs pour représenter le contrôle de saisie. La spécification indique comment ajouter des informations pour certains niveaux de l'intervalle grâce à l'attribut {{htmlattrxref("list", "input")}} et à un élément {{HTMLElement("datalist")}}. En revanche, il n'y a pas de spécifications précises quant aux marques (tirets) positionnés le long du contrôle. +La spécification HTML fournit une certaine flexibilité aux navigateurs pour représenter le contrôle de saisie. La spécification indique comment ajouter des informations pour certains niveaux de l'intervalle grâce à l'attribut [`list`](/fr/docs/Web/HTML/Element/Input#attr-list) et à un élément [`<datalist>`](/fr/docs/Web/HTML/Element/datalist). En revanche, il n'y a pas de spécifications précises quant aux marques (tirets) positionnées le long du contrôle. #### Aperçus @@ -114,129 +168,168 @@ La plupart des navigateurs prennent partiellement en charge ces fonctionnalités ##### Un contrôle sans marque -Voici ce qu'on option lorsque le navigateur ne prend pas en charge cette fonctionnalité ou que l'attribut {{htmlattrxref("list", "input")}} est absent. +Voici ce qu'on obtient lorsque le navigateur ne prend pas en charge cette fonctionnalité ou que l'attribut [`list`](/fr/docs/Web/HTML/Element/Input#attr-list) est absent. <table class="fullwidth standard-table"> <tbody> <tr> <th>HTML</th> - <th>Aperçu</th> + <th>Exemples</th> + </tr> + <tr> + <td rowspan="4"> + <pre class="brush: html"><input type="range"></pre> + </td> + <th>Capture d'écran</th> </tr> <tr> - <td><pre class="brush: html"><input type="range"></pre></td> <td> <img - alt="Capture d'écran d'un contrôle curseur sur macOS" + alt="Capture d'écran d'un contrôle d'intervalle avec une piste, sans modification, sur macOS" src="macslider-plain.png" /> </td> </tr> + <tr> + <th>Rendu <i lang="en">live</i></th> + </tr> + <tr> + <td> + {{EmbedLiveSample("",200,55,"","", "nobutton")}} + </td> + </tr> </tbody> </table> ##### Un contrôle avec des marques -Dans l'exemple qui suit, le contrôle utilise un attribut `list` qui indique l'identifiant d'un élément {{HTMLElement("datalist")}} qui définit un ensemble de marques à appliquer sur le contrôle. Il y en a ici 11 : une marque pour 0% puis une marque tous les 10%. Chaque point pour lequel on souhaite afficher une marque est représenté par un élément {{HTMLElement("option")}} dont la valeur de l'attribut {{htmlattrxref("value", "option")}} correspond à l'emplacement de la marque. +Dans l'exemple qui suit, le contrôle utilise un attribut `list` qui indique l'identifiant d'un élément [`<datalist>`](/fr/docs/Web/HTML/Element/datalist) qui définit un ensemble de marques à appliquer sur le contrôle. Il y en a ici 11 : une marque pour `0%` puis une marque tous les `10%`. Chaque point pour lequel on souhaite afficher une marque est représenté par un élément [`<option>`](/fr/docs/Web/HTML/Element/Option) dont la valeur de l'attribut [`value`](/fr/docs/Web/HTML/Element/Option#attr-value) correspond à l'emplacement de la marque. <table class="fullwidth standard-table"> <tbody> <tr> <th>HTML</th> - <th>Aperçu</th> + <th>Exemples</th> </tr> <tr> - <td> + <td rowspan="4"> <pre class="brush: html"> <input type="range" list="tickmarks"> <datalist id="tickmarks"> -<option value="0"> -<option value="10"> -<option value="20"> -<option value="30"> -<option value="40"> -<option value="50"> -<option value="60"> -<option value="70"> -<option value="80"> -<option value="90"> -<option value="100"> +<option value="0"></option> +<option value="10"></option> +<option value="20"></option> +<option value="30"></option> +<option value="40"></option> +<option value="50"></option> +<option value="60"></option> +<option value="70"></option> +<option value="80"></option> +<option value="90"></option> +<option value="100"></option> </datalist> -</pre - > +</pre> </td> + <th>Capture d'écran</th> + </tr> + <tr> <td> <img - alt="Capture d'écran un contrôle curseur sur macOS" + alt="Une capture d'écran d'un contrôle d'intervalle avec des marques sur macOS" src="macslider-ticks.png" /> </td> </tr> + <tr> + <th>Rendu <i lang="en">live</i></th> + </tr> + <tr> + <td> + {{EmbedLiveSample("",200,55,"","", "nobutton")}} + </td> + </tr> </tbody> </table> ##### Un contrôle avec des marques et des étiquettes -Il est possible d'ajouter des étiquettes grâce à l'attribut {{htmlattrxref("label", "option")}} des éléments {{HTMLElement("option")}} correspondants aux marques. +Il est possible d'ajouter des étiquettes grâce à l'attribut [`label`](/fr/docs/Web/HTML/Element/Option#attr-label) des éléments [`<option>`](/fr/docs/Web/HTML/Element/Option) correspondants aux marques. <table class="fullwidth standard-table"> <tbody> <tr> <th>HTML</th> - <th>Aperçu</th> + <th>Exemples</th> </tr> <tr> - <td> + <td rowspan="4"> <pre class="brush: html"> <input type="range" list="tickmarks"> <datalist id="tickmarks"> -<option value="0" label="0%"> -<option value="10"> -<option value="20"> -<option value="30"> -<option value="40"> -<option value="50" label="50%"> -<option value="60"> -<option value="70"> -<option value="80"> -<option value="90"> -<option value="100" label="100%"> +<option value="0" label="0%"></option> +<option value="10"></option> +<option value="20"></option> +<option value="30"></option> +<option value="40"></option> +<option value="50" label="50%"></option> +<option value="60"></option> +<option value="70"></option> +<option value="80"></option> +<option value="90"></option> +<option value="100" label="100%"></option> </datalist> </pre > </td> + <th>Capture d'écran</th> + </tr> + <tr> <td> <img - alt="Capture d'écran un contrôle curseur sur macOS" + alt="Capture d'écran d'un contrôle d'intervalle avec des marques et des libellés associés sur macOS" src="macslider-labels.png" /> </td> </tr> + <tr> + <th>Rendu <i lang="en">live</i></th> + </tr> + <tr> + <td> + {{EmbedLiveSample("",200,55,"","", "nobutton")}} + </td> + </tr> </tbody> </table> -> **Note :** Actuellement, aucun navigateur ne prend en charge l'ensemble de ces fonctionnalités. Firefox n'affiche aucune marque ni étiquette et Chrome affiche uniquement les marques mais pas les étiquettes. La version 66 (66.0.3359.181) de Chrome prendre en charge les étiquettes mais par défaut l'élément {{HTMLElement("datalist")}} est mis en forme avec CSS et {{cssxref("display")}}`: none;` , ce qui le masque. Il faut donc rajouter des règles de mises en forme spécifiques. -### Modifier l'orientation du curseur +> **Note :** Actuellement, aucun navigateur ne prend en charge l'ensemble de ces fonctionnalités. Firefox n'affiche aucune marque ni étiquette et Chrome affiche uniquement les marques mais pas les étiquettes. La version 66 (66.0.3359.181) de Chrome prendre en charge les étiquettes mais par défaut l'élément [`<datalist>`](/fr/docs/Web/HTML/Element/datalist) est mis en forme avec CSS et [`display`](/fr/docs/Web/CSS/display)`: none;`, ce qui le masque. + +### Créer des contrôles d'intervalle verticaux + +Par défaut, si un navigateur affiche un tel contrôle avec une piste, celle-ci sera affichée afin que le curseur puisse aller de gauche à droite. Selon la prise en charge du navigateur, on pourra afficher le contrôle verticalement et déplacer le curseur vers le haut ou vers le bas en utilisant CSS en déclarant une hauteur supérieure à une largeur. Cette fonctionnalité n'est, à date, implémentée par aucun des navigateurs majeurs (voir [le bug 981916 pour Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=981916), [le bug 341071 pour Chrome](https://bugs.chromium.org/p/chromium/issues/detail?id=341071)). La spécification d'un tel rendu vertical est [toujours en discussion](https://github.com/whatwg/html/issues/4177). -Par exemple : +En attendant, il est possible de créer un contrôle vertical en utilisant les transformations CSS ou en utilisant les méthodes spécifiques à chaque navigateur : en utilisant la propriété CSS [`appearance`](/fr/docs/Web/CSS/appearance) avec la valeur `slider-vertical`, en utilisant l'attribut non-standard `orient` ou en changeant l'orientation du texte pour Internet Explorer. -#### Horizontal +#### Contrôle d'intervalle horizontal + +Prenons ce contrôle : ```html <input type="range" id="volume" min="0" max="11" value="7" step="1"> ``` -{{EmbedLiveSample("Horizontal", 200, 200, "orientation_sample1.png")}} +{{EmbedLiveSample("", 200, 200, "orientation_sample1.png")}} -Le contrôle est ici horizontal, pour le rendre vertical, on pourra utiliser un peu de CSS afin de le rendre plus haut que large : +Il s'affiche horizontalement (en tout cas sur la plupart, si ce n'est la totalité, des principaux navigateurs). -#### Vertical +#### Méthodes standard pour un rendu vertical -##### CSS +Selon la spécification, pour afficher un tel contrôle verticalement, il suffit que ses dimensions soient plus hautes que larges : ```css #volume { @@ -245,25 +338,19 @@ Le contrôle est ici horizontal, pour le rendre vertical, on pourra utiliser un } ``` -##### HTML - ```html <input type="range" id="volume" min="0" max="11" value="7" step="1"> ``` -##### Résultat +{{EmbedLiveSample("", 200, 200, "orientation_sample2.png")}} -{{EmbedLiveSample("Vertical", 200, 200, "orientation_sample2.png")}} +Toutefois, aucun navigateur majeur ne prend en charge cette fonctionnalité. -**Currently, no major browsers support creating vertical range inputs using CSS this way, even though it's the way the specification recommends they do it.** +#### Utiliser les transformations CSS -La spécification HTML recommande de dessiner les contrôles verticalement lorsque la hauteur de celui-ci est supérieure à la largeur. Malheureusement, aucun navigateur ne prend actuellement en charge cette fonctionnalité directement. On peut toutefois dessiner un contrôle vertical en appliquant une rotation sur un contrôle horizontal avec du code CSS et notamment {{cssxref("transform")}} pour tourner l'élément. +On peut créer un contrôle vertical en dessinant un contrôle horizontal auquel on applique une rotation. Pour cela, on pourra utiliser CSS avec [`transform`](/fr/docs/Web/CSS/transform) pour tourner l'élément. Voyons comment faire. -#### Autre exemple - -##### HTML - -Il est nécessaire de placer l'élément {{HTMLElement("input")}} dans un élément {{HTMLElement("div")}} afin de corriger la disposition une fois la transformation appliquée : +Tout d'abord, on enveloppe l'élément [`<input>`](/fr/docs/Web/HTML/Element/Input) dans un élément [`<div>`](/fr/docs/Web/HTML/Element/div) afin de pouvoir corriger la disposition une fois que la transformation est effectuée (les transformations n'affectent pas automatiquement la disposition de la page) : ```html <div class="slider-wrapper"> @@ -271,9 +358,7 @@ Il est nécessaire de placer l'élément {{HTMLElement("input")}} dans un élém </div> ``` -##### CSS - -Ensuite, on applique quelques règles CSS. Voici la règle CSS pour l'élément `div` qui indique le mode d'affichage et la taille qu'on souhaite avoir pour que la page soit correctement organisée.. +En suite, on met en forme le conteneur du contrôle avec CSS en indiquant le mode d'affichage et la taille qu'on souhaite afin que la page soit organisée correctement. En pratique, cela correspond à réserver un espace sur la page afin que le curseur tourné s'inscrive dans l'espace réservé, sans perturber les autres éléments. ```css .slider-wrapper { @@ -284,7 +369,7 @@ Ensuite, on applique quelques règles CSS. Voici la règle CSS pour l'élément } ``` -Ensuite, on applique une transformation sur l'élément `<input>` au sein de l'espace réservé par le `<div>` : +Et ensuite, on met en forme l'élément `<input>` situé dans cet espace réservé : ```css .slider-wrapper input { @@ -296,85 +381,98 @@ Ensuite, on applique une transformation sur l'élément `<input>` au sein de l'e } ``` -Le contrôle mesure alors 150 pixels de long et 20 pixels de haut. Les marges sont nulles et {{cssxref("transform-origin")}} est décalé vers le milieu du contrôle. Le contrôle mesurant 150 pixels de large, décaler le centre de rotation permet d'avoir la zone de destination centrée avec 75 pixels de chaque côté. +La taille du contrôle est de 150 pixels de long sur 20 pixels de haut. Les marges sont nulles et [`transform-origin`](/fr/docs/Web/CSS/transform-origin) déplace au milieu de l'espace le centre de rotation (75 étant la moitié de 150). Enfin, on applique une rotation antihoraire de `90°`. On obtient comme résultat un contrôle d'intervalle vertical où le maximum est situé en haut et où le minimum est situé en bas. -##### Résultat +{{EmbedLiveSample("", 200, 200, "orientation_sample3.png")}} -{{EmbedLiveSample("Autre_exemple", 200, 200, "orientation_sample3.png")}} +#### Utiliser la propriété `appearance` -## Validation +La propriété [`appearance`](/fr/docs/Web/CSS/appearance) possède une valeur non-standard `slider-vertical` qui permet de transformer les pistes horizontales en pistes verticales. -Il n'existe pas de motif de validation. Cependant, voici les formes de validation automatiques qui sont appliquées : +On utilise le même HTML que pour les exemples précédents : -- Si la valeur de l'attribut {{htmlattrxref("value", "input")}} est quelque chose qui ne peut pas être converti en nombre décimal, la validation échoue. -- La valeur ne doit pas être inférieure à {{htmlattrxref("min", "input")}}. La valeur minimale par défaut est 0. -- La valeur ne doit pas être supérieure à {{htmlattrxref("max", "input")}}. La valeur maximale par défaut est 0. -- La valeur doit être un multiple de {{htmlattrxref("step", "input")}}. La valeur par défaut est 1. +```html +<input type="range" min="0" max="11" value="7" step="1"> +``` -## Exemples +Ici, on cible uniquement les contrôles d'intervalles : -Pour compléter les exemples précédents, on pourra consulter l'article suivant : +```css +input[type="range"] { + -webkit-appearance: slider-vertical; +} +``` -- [Contrôler plusieurs paramètres grâce à `ConstantSourceNode` (en anglais)](/fr/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode) +{{EmbedLiveSample("", 200, 200)}} -## Résumé technique +#### Utiliser l'attribut `orient` -<table class="properties"> - <tbody> - <tr> - <td><strong>{{anch("Valeur")}}</strong></td> - <td> - Une chaîne de caractères ({{domxref("DOMString")}}) qui contient - la représentation textuelle de la valeur numérique sélectionnée. On - utilisera la méthode - {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} - afin d'obtenir la valeur sous forme numérique (type - {{jsxref("Number")}}). - </td> - </tr> - <tr> - <td><strong>Évènements</strong></td> - <td>{{event("change")}} et {{event("input")}}</td> - </tr> - <tr> - <td><strong>Attributs pris en charge</strong></td> - <td> - {{htmlattrxref("autocomplete", "input")}}, - {{htmlattrxref("list", "input")}}, - {{htmlattrxref("max", "input")}}, - {{htmlattrxref("min", "input")}} et - {{htmlattrxref("step", "input")}} - </td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td> - <code>list</code>, <code>value</code> et <code>valueAsNumber</code> - </td> - </tr> - <tr> - <td><strong>Méthodes</strong></td> - <td> - {{domxref("HTMLInputElement.stepDown", "stepDown()")}} - et {{domxref("HTMLInputElement.stepUp", "stepUp()")}} - </td> - </tr> - </tbody> -</table> +Firefox dispose d'un attribut HTML non-standard : `orient`. + +Le code HTML est semblable à celui utilisé précédemment, on y ajoute l'attribut avec une valeur `vertical` : + +```html +<input type="range" min="0" max="11" value="7" step="1" orient="vertical"> +``` + +{{EmbedLiveSample("", 200, 200)}} + +#### `writing-mode: bt-lr;` + +La propriété [`writing-mode`](/fr/docs/Web/CSS/writing-mode) ne devrait pas être utilisée pour modifier la direction du texte pour l'internationalisation et la localisation mais peut être employée pour créer des effets spéciaux. + +Ici, on utilise le même HTML que précédemment : + +```html +<input type="range" min="0" max="11" value="7" step="1"> +``` + +On cible uniquement les contrôles d'intervalle et on change leur mode d'écriture avec la valeur `bt-lr` qui signifie <i lang="en">bottom-to-top and left-to-right</i>, soit du bas vers le haut puis de la gauche vers la droite : + +```css +input[type="range"] { + writing-mode: bt-lr; +} +``` + +{{EmbedLiveSample("", 200, 200)}} + +#### Assembler tout ça + +Comme chacun des exemples précédents fonctionne dans un navigateur différent, on peut les combiner en un seul qui fonctionne pour les différents navigateurs. + +On garde l'attribut `orient` avec la valeur `vertical` pour Firefox : + +```html +<input type="range" min="0" max="11" value="7" step="1" orient="vertical"> +``` + +On cible les contrôles d'intervalle avec un mode d'écriture `bt-lr` pour Internet Explorer et on ajoute `-webkit-appearance: slider-vertical` pour les navigateurs basés sur WebKit : + +```css +input[type="range"] { + writing-mode: bt-lr; + -webkit-appearance: slider-vertical; +} +``` + +{{EmbedLiveSample("", 200, 200)}} ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName('HTML WHATWG', 'forms.html#range-state-(type=range)', '<input type="range">')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. | -| {{SpecName('HTML5.1', 'sec-forms.html#range-state-typerange', '<input type="range">')}} | {{Spec2('HTML5.1')}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("html.elements.input.input-range")}} +{{Compat}} ## Voir aussi -- [Les formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires) -- {{HTMLElement("input")}} et l'interface {{domxref("HTMLInputElement")}} +- [Les formulaires HTML](/fr/docs/Learn/Forms) +- [`<input>`](/fr/docs/Web/HTML/Element/Input) et l'interface [`HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement) sur laquelle l'élément du DOM correspondant est basé - [`<input type="number">`](/fr/docs/Web/HTML/Element/input/number) +- [`validityState.rangeOverflow`](/fr/docs/Web/API/validityState/rangeOverflow) +- [`validityState.rangeUnderflow`](/fr/docs/Web/API/validityState/rangeUnderflow) +- [Contrôler plusieurs paramètres avec `ConstantSourceNode`](/fr/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode) +- [Mettre en forme un contrôle d'intervalle (en anglais)](https://css-tricks.com/sliding-nightmare-understanding-range-input) +- [Compatibilité des propriétés CSS](/fr/docs/Learn/Forms/Property_compatibility_table_for_form_controls) diff --git a/files/fr/web/html/element/input/search/index.md b/files/fr/web/html/element/input/search/index.md index c90ac45edc..8a89e9ee8d 100644 --- a/files/fr/web/html/element/input/search/index.md +++ b/files/fr/web/html/element/input/search/index.md @@ -1,106 +1,163 @@ --- title: <input type="search"> -slug: Web/HTML/Element/Input/search -tags: - - HTML - - Input - - Reference +slug: Web/HTML/Element/input/search translation_of: Web/HTML/Element/input/search +browser-compat: html.elements.input.input-search --- {{HTMLRef}} -Les éléments {{HTMLElement("input")}} dont l'attribut `type` vaut **`search`** permettent à un utilisateur de saisir des termes de recherche. +Les éléments [`<input>`](/fr/docs/Web/HTML/Element/Input) dont l'attribut `type` vaut **`search`** permettent de saisir des termes de recherche. Sur le plan fonctionnel, ils sont identiques aux champs de saisie textuels ([`<input type="text">`](/fr/docs/Web/HTML/Element/Input/text)), c'est leur mise en forme qui peut être différente selon [les agents utilisateurs](/fr/docs/Glossary/User_agent). {{EmbedInteractiveExample("pages/tabbed/input-search.html", "tabbed-standard")}} +<table class="properties"> + <tbody> + <tr> + <td><strong><a href="#valeur">Valeur</a></strong></td> + <td> + Une chaîne de caractères (<a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>) qui représente la valeur contenue dans le champ de recherche. + </td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td> + <a href="/fr/docs/Web/API/HTMLElement/change_event"><code>change</code></a> et <a href="/fr/docs/Web/API/HTMLElement/input_event"><code>input</code></a>. + </td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td> + <a href="/fr/docs/Web/HTML/Element/Input#attr-autocomplete"><code>autocomplete</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-list"><code>list</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-maxlength"><code>maxlength</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-minlength"><code>minlength</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-pattern"><code>pattern</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-placeholder"><code>placeholder</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-required"><code>required</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-size"><code>size</code></a>. + </td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td> + <a href="/fr/docs/Web/API/HTMLInputElement/select"><code>select()</code></a>, + <a href="/fr/docs/Web/API/HTMLInputElement/setRangeText"><code>setRangeText()</code></a>, + <a href="/fr/docs/Web/API/HTMLInputElement/setSelectionRange"><code>setSelectionRange()</code></a>. + </td> + </tr> + </tbody> +</table> + ## Valeur -La valeur de l'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur du champ de recherche. En JavaScript, on peut récupérer cette information grâce à la propriété {{domxref("HTMLInputElement.value")}}. +La valeur de l'attribut [`value`](/fr/docs/Web/HTML/Element/Input#attr-value) contient une chaîne de caractères ([`DOMString`](/fr/docs/Web/API/DOMString)) qui représente la valeur du champ de recherche. En JavaScript, on peut récupérer cette information grâce à la propriété `value` rattachée à [l'interface `HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement). ```js -maRecherche.value; +termesRecherche = monChampSearch.value; ``` -Si aucune contrainte de validation n'est imposée (cf. {{anch("Validation")}} pour plus de détails), la valeur peut être un texte ou une chaîne de caractères vide. +Si aucune contrainte de validation n'est imposée (cf. la section [Validation](#validation) pour plus de détails), la valeur peut être un texte ou une chaîne de caractères vide. ## Attributs supplémentaires -En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de recherche prennent en charge les attributs suivants : +En complément des attributs communs à l'ensemble des éléments [`<input>`](/fr/docs/Web/HTML/Element/Input), les champs de recherche prennent en charge les attributs suivants. + +### `list` + +La valeur de cet attribut est l'identifiant ([`id`](/fr/docs/Web/API/Element/id)) d'un élément [`<datalist>`](/fr/docs/Web/HTML/Element/datalist) situé dans le même document. L'élément [`<datalist>`](/fr/docs/Web/HTML/Element/datalist) fournit une liste de valeurs prédéfinies qui doivent être suggérées lors de la saisie dans le champ. Toute valeur de cette liste qui n'est pas compatible avec le type de champ ([`type`](/fr/docs/Web/HTML/Element/Input#attr-type)) ne sera pas incluse dans les suggestions. Les valeurs fournies sont des suggestions et pas des contraintes : il reste tout à fait possible de choisir une valeur différente que celles de la liste. + +### `maxlength` + +Le nombre maximum de caractères (exprimé en nombre de points de code UTF-16) qu'il est possible de saisir dans le champ. Cette valeur doit être un entier positif ou nul. Si aucune valeur n'est fournie pour `maxlength` ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à `minlength`. + +Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/Constraint_validation) si la longueur du texte dépasse `maxlength` en nombre de points de code UTF-16. + +### `minlength` + +Le nombre minimal de caractères (exprimé en nombre de points de code UTF-16) que l'utilisatrice ou l'utilisateur peut saisir dans le champ. Cette valeur doit être un entier positif ou nul. Si aucune valeur n'est fournie pour `minlength` ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieure à `maxlength`. + +Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/Constraint_validation) si la longueur du texte est inférieure à `minlength` en nombre de points de code UTF-16. + +### `pattern` -| Attribut | Description | -| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `{{anch("maxlength")}}` | Le nombre de caractères maximal qui peut être écrit dans ce champ. | -| `{{anch("minlength")}}` | Le nombre de caractères minimal qui peut être écrit dans ce champ pour qu'il soit considéré comme valide. | -| `{{anch("pattern")}}` | Une expression rationnelle à laquelle doit correspondre le texte saisi pour être valide. | -| `{{anch("placeholder")}}` | Une valeur d'exemple qui sera affichée lorsqu'aucune valeur n'est saisie. | -| `{{anch("readonly")}}` | Un attribut booléen qui indique si le contenu du champ est en lecture seule. | -| `{{anch("size")}}` | Un nombre qui indique le nombre de caractères affichés par le champ. | -| `{{anch("spellcheck")}}` | Cet attribut contrôle l'activation de la vérification orthographique sur le champ ou si la vérification orthographique par défaut doit être appliquée. | +L'attribut `pattern`, lorsqu'il est utilisé, est une expression rationnelle qui impose un format à [`value`](/fr/docs/Web/HTML/Element/Input#attr-value), que cette dernière doit respecter afin que le champ soit [valide](/fr/docs/Web/Guide/HTML/Constraint_validation). Le contenu de `pattern` doit être une expression rationnelle JavaScript valide (voir la documentation sur le type [`RegExp`](/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp) et [le guide sur les expressions rationnelles](/fr/docs/Web/JavaScript/Guide/Regular_Expressions). Le marqueur `'u'` est utilisé à la compilation de l'expression rationnelle afin que le motif soit traité comme une séquence de points de code Unicode et non ASCII. Il ne faut pas entourer l'expression de barres obliques. -### {{htmlattrdef("maxlength")}} +Si aucune expression rationnelle n'est fournie ou que celle-ci est invalide, aucune contrainte de format ne sera appliquée et cet attribut sera ignoré complètement. -Le nombre maximum de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour `maxlength` ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à `minlength`. +> **Note :** On utilisera l'attribut [`title`](/fr/docs/Web/HTML/Element/Input#attr-title) pour définir le texte que la plupart des navigateurs afficheront comme bulle d'information afin d'expliquer les contraintes imposées par l'expression rationnelle. Il faut également inclure un texte explicatif à proximité du champ. -Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) si la longueur du texte dépasse `maxlength` en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur. +Voir la section [Indiquer un motif](#indiquer_un_motif) pour plus de détails et un exemple. -### {{htmlattrdef("minlength")}} +### `placeholder` -Le nombre minimal de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour `minlength` ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieur à `maxlength`. +L'attribut `placeholder` est une chaîne de caractères qui fournit une indication courte sur le type d'information attendue dans le champ. Ce devrait être un mot ou une phrase courte qui illustre le type de données attendu plutôt qu'un message explicatif. Le texte _ne doit pas_ inclure de saut de ligne ou de retour chariot. -Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) si la longueur du texte est inférieure à `minlength` en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur. +Si le contenu du contrôle utilise une direction (écriture de gauche à droite ou de droite à gauche), mais que le texte indicatif doit être présenté dans la direction inverse, vous pouvez utiliser des caractères de formatage pour l'algorithme bidirectionnel Unicode dans la valeur. Voir [Comment utiliser des contrôles Unicode pour le texte bidirectionnel (en anglais)](https://www.w3.org/International/questions/qa-bidi-unicode-controls) pour plus d'informations. -### {{htmlattrdef("pattern")}} +> **Note :** On évitera d'utiliser l'attribut `placeholder` si possible. Il n'est pas aussi utile que d'autres sur le plan sémantique pour expliquer le formulaire et il peut causer des problèmes techniques avec le contenu. Voir [L'utilisation de libellés et de textes indicatifs](/fr/docs/Web/HTML/Element/Input#utilisation_de_libellés) pour plus d'informations. -{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}} +### `readonly` -Voir [la section sur l'utilisation de cet attribut ci-après](#format) pour plus d'exemples. +Un attribut booléen qui, s'il est présent, indique que le champ ne peut pas être édité dans le formulaire. La valeur du champ (portée par l'attribut `value`) peut toutefois être modifiée par du code JavaScript, qui changerait la propriété `value` rattachée à l'interface [`HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement). -{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}} +> **Note :** Un champ en lecture seule ne pouvant pas avoir de valeur, l'attribut `required` n'a pas d'effet particulier sur les champs pour lesquels `readonly` est appliqué. -{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}} +### `size` -{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}} +L'attribut `size` est une valeur numérique qui indique la largeur idéale du champ, exprimée en nombre de caractères. Sa valeur doit être un nombre supérieur à `0` et la valeur par défaut est `20`. Comme les caractères peuvent avoir une largeur différente entre eux, on ne doit pas s'attendre à ce que cette taille permette exactement de voir les n caractères, le contrôle résultant pourra être plus étroit ou plus large que le nombre indiqué en fonction des caractères saisis et de la police (voir la propriété CSS [`font`](/fr/docs/Web/CSS/font)) utilisée. -### {{htmlattrdef("spellcheck")}} +Cet attribut _n'impose pas_ de limite sur le nombre de caractères qui peuvent être saisis. Il indique uniquement, de façon approximative, le nombre de caractères visibles au même moment. Pour imposer une contrainte de taille sur la longueur maximale de la valeur saisissable, on pourra utiliser l'attribut [`maxlength`](#maxlength). -{{page("/fr/docs/Web/HTML/Element/input/text", "spellcheck-include")}} +### `spellcheck` + +`spellcheck` est un attribut universel qui est utilisé afin d'indiquer si la vérification orthographique doit être activée sur un élément. Il peut être utilisé sur n'importe quel contenu éditable. On considère ici les aspects spécifiques de `spellcheck` sur les éléments [`<input>`](/fr/docs/Web/HTML/Element/Input). Les valeurs autorisées pour `spellcheck` sont : + +- `false` + - : La vérification orthographique est désactivée pour l'élément. +- `true` + - : La vérification orthographique est activée pour l'élément. +- `""` (la chaîne vide) ou aucune valeur + - : C'est le comportement par défaut de l'élément qui est utilisé pour déterminer si la vérification est active ou non. Cela peut être déduit de la valeur `spellcheck` sur un élément parent ou d'autres facteurs. + +Un champ de saisi peut avoir la vérification orthographique activée s'il n'utilise pas l'attribut [`readonly`](#readonly") et qu'il n'est pas désactivé. + +La valeur renvoyée par la lecture de `spellcheck` peut ne pas refléter l'état réel de la vérification orthographique pour le contrôle (par exemple, si des préférences au sein [de l'agent utilisateur](/fr/docs/Glossary/User_agent) surchargent ce paramètre). ## Attributs non-standard Les attributs non-standard suivants sont disponibles pour les champs de recherche. Toutefois, vu leur caractère spécifique, mieux vaut ne pas les utiliser. -| Attribut | Description | -| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `{{anch("autocorrect")}}` | Une chaîne de caractères qui indique si la correction automatique doit être appliquée à ce champ texte. **Uniquement pris en charge par Safari.** | -| `{{anch("incremental")}}` | Cet attribut indique si des évènements {{event("search")}} doivent être envoyés afin de mettre à jour les résultats de la recherche tandis que l'utilisateur continue d'éditer la valeur du champ. **Uniquement WebKit et Blink (Safari, Chrome, Opera, etc.).** | -| `{{anch("mozactionhint")}}` | Une chaîne de caractères qui indique le type d'action qui sera effectuée lorsque l'utilisateur appuiera sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition du champ. La valeur de cet attribut est utilisée comme libellé pour la touche adéquate du clavier virtuel. **Uniquement pris en charge par Firefox pour Android.** | -| `{{anch("results")}}` | Le nombre maximum d'éléments qui devraient être affichés comme recherches précédentes dans la liste déroulante du champ. **Uniquement pris en charge par Safari.** | +### `autocorrect` -### {{htmlattrdef("autocorrect")}} {{non-standard_inline}} +Un attribut spécifique à Safari qui indique si la correction automatique doit être activée (ou non) lors de l'édition manuelle de ce champ. Les valeurs autorisées sont : -{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}} +- `on` + - : La correction automatique est activée et les remplacements automatiques, si certains sont configurés, sont effectués. +- `off` + - : La correction automatique et les remplacements sont désactivés. -### {{htmlattrdef("incremental")}} {{non-standard_inline}} +### `incremental` -Un attribut booléen spécifique à WebKit et Blink qui indique à l'agent utilisateur de traiter la recherche en continu. Lorsque cet attribut est présent et lorsque l'utilisateur édite la valeur du champ, l'agent utilisateur envoie des évènements {{event("search")}} sur l'objet {{domxref("HTMLInputElement")}} qui représente le champ de recherche. Ainsi, on peut gérer, avec du code, la mise à jour continue des résultats de recherche. +Un attribut booléen spécifique à WebKit et Blink (donc pris en charge par les navigateurs Safari, Opera, Chrome, etc.) qui indique à l'agent utilisateur de traiter la recherche en continu. Lorsque cet attribut est présent et lorsque l'utilisatrice ou l'utilisateur édite la valeur du champ, l'agent utilisateur envoie des évènements [`search`](/fr/docs/Web/API/HTMLInputElement/search_event) sur l'objet [`HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement) qui représente le champ de recherche. Ainsi, on peut gérer, avec du code, la mise à jour continue des résultats de recherche. -Si l'attribut `incremental` n'est pas indiqué, l'évènement {{event("search")}} est uniquement envoyé lorsque l'tuilisateur déclenche la recherche (en appuyant sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> à l'édition du champ). +Si l'attribut `incremental` n'est pas indiqué, l'évènement [`search`](/fr/docs/Web/API/HTMLInputElement/search_event) est uniquement envoyé lorsque la recherche est déclenchée (avec l'appui sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> à l'édition du champ). La fréquence maximale à laquelle l'évènement `search` est envoyé est définie par chaque implémentation. -### {{htmlattrdef("mozactionhint")}} {{non-standard_inline}} +### `mozactionhint` + +Un attribut spécifique à Mozilla, pris en charge par Firefox sur Android qui fournit une indication sur le type d'action réalisée lors de l'appui sur <kbd>Entrée</kbd> ou <kbd>Retour</kbd> pendant l'édition du champ. Cette information est utilisée pour décider du libellé à afficher sur la touche <kbd>Entrée</kbd> du clavier virtuel. -{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}} +> **Note :** [Ce comportement a été standardisé](https://html.spec.whatwg.org/#input-modalities:-the-enterkeyhint-attribute) avec l'attribut universel [`enterkeyhint`](/fr/docs/Web/HTML/Global_attributes#attr-enterkeyhint), mais ce dernier n'est pas encore largement implémenté. En ce qui concerne l'implémentation dans Firefox, voir [le bug 1490661](https://bugzilla.mozilla.org/show_bug.cgi?id=1490661). -### {{htmlattrdef("results")}} {{non-standard_inline}} +Les valeurs autorisées sont : `go`, `done`, `next`, `search`, et `send`. Le navigateur décide alors, en fonction de cette indication, du libellé à appliquer sur la touche <kbd>Entrée</kbd>. -L'attribut `results`, spécifique à Safari, est une valeur numérique qui permet de surcharger la valeur maximale du nombre de recherches précédentes affichées dans la liste déroulante des suggestions. +### `results` + +L'attribut `results`, spécifique à Safari, est une valeur numérique qui permet de surcharger la valeur maximale du nombre de recherches précédentes affichées dans la liste déroulante des suggestions basées sur les recherches précédentes. Cette valeur doit être un nombre positif. Si cet attribut n'est pas fourni, ou que sa valeur est invalide, ce sera le maximum fourni par le navigateur qui sera utilisé. ## Utiliser un champ de recherche -Les éléments `<input>` de type `search` sont semblables aux éléments `<input>` de type `text` mais sont spécifiquement destinés à la gestion des termes d'une recherche. +Les éléments `<input>` de type `search` sont semblables aux éléments `<input>` de type `text` mais sont spécifiquement destinés à la gestion des termes d'une recherche. Leur comportement est équivalent, c'est leur mise en forme qui peut varier en fonction des navigateurs (et, bien entendu, en fonction des feuilles de style de chacun des sites). ### Exemple simple @@ -113,27 +170,27 @@ Les éléments `<input>` de type `search` sont semblables aux éléments `<input </form> ``` -Cet exemple produira le résultat suivant : +Cet exemple produira le résultat suivant : -{{EmbedLiveSample("Exemple_simple", 600, 40)}} +{{EmbedLiveSample("", 600, 40)}} -`q` est la valeur standard utilisé pour l'attribut `name` des champs de recherche. Lorsque le formulaire est envoyée, les données envoyées au serveur auront la forme `q=termederecherche`. Il est nécessaire de fournir un nom (c'est-à -dire un attribut `name`) à un champ, sinon aucune information ne sera envoyée lors de l'envoi du formulaire. +`q` est la valeur la plus communément utilisée pour l'attribut `name` des champs de recherche mais cette valeur spécifique n'est pas obligatoire. Lorsque le formulaire est envoyé, les données envoyées au serveur auront la forme `q=termederecherche`. -> **Note :** Il est toujours nécessaire de fournir une valeur pour l'attribut {{htmlattrxref("name","input")}} car sinon aucune valeur ne sera envoyée. +> **Note :** Il est toujours nécessaire de fournir une valeur pour l'attribut [`name`](/fr/docs/Web/HTML/Element/Input#attr-name), sinon aucune valeur ne sera envoyée. ### Différences entre les champs de recherche et les champs texte -La différence principale est la façon dont les navigateurs gèrent cet élément. Premièrement, certains navigateurs affiche une icône de croix dans la zone de saisie qui peut être utilisée pour retirer le terme de la recherche. Voici par exemple un aperçu de la fonctionnalité sous Chrome: +La différence principale est la façon dont les navigateurs gèrent cet élément. Premièrement, certains navigateurs affichent une icône de croix dans la zone de saisie qui peut être utilisée pour retirer le terme de la recherche. Voici par exemple un aperçu de la fonctionnalité sous Chrome :  -De plus, les navigateurs modernes proposent souvent une auto-complétion basée sur les termes de recherche déjà utilisés sur le site. Ainsi, quand on réutilise le champ, différentes suggestions peuvent être affichées et utilisées. Voici l'aperçu de cette fonctionnalité sous Firefox : +De plus, les navigateurs modernes proposent souvent une auto-complétion basée sur les termes de recherche déjà utilisés sur le site. Ainsi, quand on réutilise le champ, différentes suggestions peuvent être affichées et utilisées. Cela facilite la réutilisation de recherches déjà saisies. Voici l'aperçu de cette fonctionnalité sous Firefox :  ### Ajouter un texte indicatif -Il est possible de fournir un texte indicatif dans le champ de recherche afin de fournir une indication quant aux recherches qu'il est possible de faire. Pour cela, on ajoutera un texte avec l'attribut {{htmlattrxref("placeholder","")}}. Par exemple : +Il est possible de fournir un texte indicatif dans le champ de recherche afin de fournir une indication quant aux recherches qu'il est possible de faire. Pour cela, on ajoutera un texte avec l'attribut [`placeholder`](/fr/docs/Web/HTML/Element/Input#attr-placeholder). Par exemple : ```html <form> @@ -145,20 +202,20 @@ Il est possible de fournir un texte indicatif dans le champ de recherche afin de </form> ``` -Voici le résultat obtenu avec ce fragment HTML : +Voici le résultat obtenu avec ce fragment HTML : -{{EmbedLiveSample("Ajouter_un_texte_indicatif", 600, 40)}} +{{EmbedLiveSample("", 600, 40)}} -### Les champs de recherche et l’accessibilité +### Les champs de recherche et l'accessibilité -Un des problèmes posé par les formulaires de recherche est leur accessibilité. En effet, dans la plupart des situations, il n'est pas nécessaire de fournir une étiquette indiquant le rôle de la recherche car le placement du champ rend son rôle clair ([voici un exemple](https://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/)). +Un des problèmes posé par les formulaires de recherche est leur accessibilité. En effet, dans la plupart des situations, il n'est pas nécessaire de fournir une étiquette indiquant le rôle de la recherche, car le placement du champ rend son rôle clair ([voici un exemple](https://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/)). -En revanche, pour les personnes qui utilisent des technologies assistives, cela peut être source de confusion. Une façon de résoudre ce problème sans modifier l'organisation visuelle est d'utiliser les fonctionnalités [WAI-ARIA](/fr/docs/Learn/Accessibility/WAI-ARIA_basics) : +En revanche, pour les personnes qui utilisent des technologies d'assistance, cela peut être source de confusion. Une façon de résoudre ce problème sans modifier l'organisation visuelle est d'utiliser les fonctionnalités [WAI-ARIA](/fr/docs/Learn/Accessibility/WAI-ARIA_basics) : - Utiliser un attribut `role` avec la valeur `search` sur l'élément `<form>` permettra aux lecteurs d'écran d'indiquer le formulaire comme étant un formulaire de recherche. -- Si cela n'est pas suffisant, il est possible d'utiliser l'attribut `aria-label` sur l'élément `<input>`. Cet attribut peut contenir un texte descriptif qui sera lu à voix haute par un lecteur d'écran. Il s'agit d'un équivalent non-visuel de `<label>`. +- Si cela n'est pas suffisant, il est possible d'utiliser l'attribut [`aria-label`](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-label) sur l'élément [`<input>`](/fr/docs/Web/HTML/Element/Input). Cet attribut peut contenir un texte descriptif qui sera lu à voix haute par un lecteur d'écran. Il s'agit d'un équivalent non-visuel de `<label>`. -Prenons un exemple : +Prenons un exemple : ```html <form role="search"> @@ -171,17 +228,17 @@ Prenons un exemple : </form> ``` -Voici le résultat obtenu grâce à ce fragment de HTML : +Voici le résultat obtenu grâce à ce fragment HTML : -{{EmbedLiveSample("Les_champs_de_recherche_et_l’accessibilité", 600, 40)}} +{{EmbedLiveSample("", 600, 40)}} Il n'y a aucune différence visuelle avec l'exemple précédent mais avec cette deuxième version, les personnes qui utilisent un lecteur d'écran disposeront de plus d'informations. -> **Note :** Voir [Signposts/Landmarks](/fr/docs/Learn/Accessibility/WAI-ARIA_basics#SignpostsLandmarks) pour plus d'informations à propos de ces fonctionnalités relatives à l'accessibilité. +> **Note :** Voir [Panneaux/points de repère](/fr/docs/Learn/Accessibility/WAI-ARIA_basics#signpostslandmarks) pour plus d'informations à propos de ces fonctionnalités relatives à l'accessibilité. ### Paramétrer la taille physique -Il est possible de contrôler la taille physique du champ de saisie grâce à l'attribut {{htmlattrxref("size", "input")}}. Cet attribut permet d'indiquer le nombre de caractères qui peuvent être affichés simultanément à l'intérieur du champ. Ainsi, dans l'exemple qui suit, la zone de recherche peut contenir 20 caractères : +Il est possible de contrôler la taille physique du champ de saisie grâce à l'attribut [`size`](/fr/docs/Web/HTML/Element/Input#attr-size). Cet attribut permet d'indiquer le nombre de caractères qui peuvent être affichés simultanément à l'intérieur du champ. Ainsi, dans l'exemple qui suit, la zone de recherche peut contenir 30 caractères : ```html <form> @@ -193,17 +250,19 @@ Il est possible de contrôler la taille physique du champ de saisie grâce à l' </form> ``` -{{EmbedLiveSample('Paramétrer_la_taille_physique', 600, 40)}} +On obtient une boîte de recherche plus large qu'auparavant : + +{{EmbedLiveSample('', 600, 40)}} ## Validation Les éléments `<input>` de type `search` possèdent les mêmes fonctionnalités de validation que les éléments `<input type="text">`. Il existe peu de raison de contraindre les termes d'une recherche mais voici quelques cas. -> **Note :** Attention, la validation des données d'un formulaire de recherche HTML par le client ne doit pas remplacer la vérification de ces données lorsqu'elles sont reçues sur le serveur. En effet, il est tout à fait possible pour quelqu'un de modifier le code HTML de la page pour outrepasser les mécanismes de validation. Il est également possible d'envoyer des données directement au serveur. Si le serveur ne valide pas les données reçues, des données potentiellement mal formatées pourraient causer des dommages aux bases de données et autres composants sensibles. +> **Note :** Attention, la validation des données d'un formulaire de recherche HTML par le client _ne doit pas remplacer_ la vérification de ces données lorsqu'elles sont reçues sur le serveur. En effet, il est tout à fait possible pour quelqu'un de modifier le code HTML de la page pour outrepasser les mécanismes de validation. Il est également possible d'envoyer des données directement au serveur. Si le serveur ne valide pas les données reçues, des données potentiellement mal formatées pourraient causer des dommages aux bases de données et autres composants sensibles. ### Une note sur la mise en forme -Les pseudo-classes CSS {{cssxref(":valid")}} et {{cssxref(":invalid")}} permettent de mettre en forme les éléments d'un formulaire en fonction de la validité de leur contenu. Dans cette section, nous utiliserons la feuille de style suivante afin de placer une coche à côté des champs valides et une croix à côté des champs invalides. +Les pseudo-classes CSS [`:valid`](/fr/docs/Web/CSS/:valid) et [`:invalid`](/fr/docs/Web/CSS/:invalid) permettent de mettre en forme les éléments d'un formulaire en fonction de la validité de leur contenu. Dans cette section, nous utiliserons la feuille de style suivante afin de placer une coche à côté des champs valides et une croix à côté des champs invalides. ```css input:invalid ~ span:after { @@ -219,11 +278,11 @@ input:valid ~ span:after { } ``` -Vous pouvez ici voir qu'on utilise un élément {{htmlelement("span")}} placé après l'élément du formulaire, c'est cet élément `<span>` qui contiendra les icônes. Cet élément est nécessaire car, sur certains navigateurs, les pseudo-classes dans les éléments de saisie sont mal gérées. +Vous pouvez ici voir qu'on utilise un élément [`<span>`](/fr/docs/Web/HTML/Element/span) placé après l'élément du formulaire, c'est cet élément `<span>` qui contiendra les icônes. Cet élément est nécessaire car, sur certains navigateurs, les pseudo-classes dans les éléments de saisie sont mal gérées. ### Rendre le champ obligatoire -Il est possible d'utiliser l'attribut {{htmlattrxref("required","input")}} afin d'indiquer que la valeur doit obligatoirement être saisie avant d'envoyer le formulaire : +Il est possible d'utiliser l'attribut [`required`](/fr/docs/Web/HTML/Element/Input#attr-required) afin d'indiquer que la valeur doit obligatoirement être saisie avant d'envoyer le formulaire : ```html <form> @@ -254,26 +313,26 @@ input:valid ~ span:after { } ``` -Voici le résultat obtenu : +Voici le résultat obtenu : -{{EmbedLiveSample('Rendre_le_champ_obligatoire', 600, 40)}} +{{EmbedLiveSample('', 600, 40)}} -De plus, si on essaie d'envoyer le formulaire sans aucun terme de recherche, le navigateur affichera un message. Voici par exemple, le résultat dans Firefox : +De plus, si on essaie d'envoyer le formulaire sans aucun terme de recherche, le navigateur affichera un message. Voici par exemple, le résultat dans Firefox : - + -Différents messages peuvent être affichés selon le type d'erreur liée à la saisie. +Différents messages peuvent être affichés selon le type d'erreur liée à la saisie, voir les exemples qui suivent. ### Contraindre la taille de la valeur saisie -Il est possible d'indiquer une taille minimale pour la longueur des termes de la recherche via l'attribut {{htmlattrxref("minlength", "input")}}. De même, on peut fixer la longueur maximale du texte qui peut être saisi pour la recherche grâce à l'attribut {{htmlattrxref("maxlength", "input")}}. Ces deux attributs sont exprimés en nombres de caractères. +Il est possible d'indiquer une taille minimale pour la longueur des termes de la recherche via l'attribut [`minlength`](/fr/docs/Web/HTML/Element/Input#attr-minlength). De même, on peut fixer la longueur maximale du texte qui peut être saisi pour la recherche grâce à l'attribut [`maxlength`](/fr/docs/Web/HTML/Element/Input#attr-maxlength). Ces deux attributs sont exprimés en nombres de caractères. Dans l'exemple qui suit, la valeur saisie dans le champ de recherche doit mesurer entre 4 et 8 caractères. ```html <form> <div> - <label for="mySearch">Rechercher un utilisateur</label> + <label for="mySearch">Rechercher une utilisatrice ou un utilisateur</label> <input type="search" id="mySearch" name="q" placeholder="ID de 4 à 8 char." required size="30" minlength="4" maxlength="8"> @@ -301,15 +360,15 @@ input:valid ~ span:after { } ``` -Voici le résultat obtenu avec ce fragment de code HTML : +Voici le résultat obtenu avec ce fragment de code HTML : -{{EmbedLiveSample('Contraindre_la_taille_de_la_valeur_saisie', 600, 40)}} +{{EmbedLiveSample('', 600, 100)}} Si vous essayez de soumettre une valeur qui est plus petite que 4 caractères, vous aurez un message d'erreur (qui peut varier selon le navigateur utilisé). De plus, le navigateur ne permettra pas de saisir un texte plus long que 8 caractères. ### Indiquer un motif -L'attribut {{htmlattrxref("pattern","input")}} permet d'indiquer une expression rationnelle que doit respecter la valeur saisie pour être considérée valide (cf. [Valider une valeur avec une expression rationnelle](/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire#Contraintes_de_validation_sur_les_éléments_<input>) pour une introduction). +L'attribut [`pattern`](/fr/docs/Web/HTML/Element/Input#attr-pattern) permet d'indiquer une expression rationnelle que doit respecter la valeur saisie pour être considérée valide (cf. [Validation selon une expression régulière](/fr/docs/Learn/Forms/Form_validation#validation_selon_une_expression_régulière) pour une introduction). Prenons un exemple. Imaginons qu'on veuille rechercher un produit grâce à son identifiant et que les identifiants commencent par deux lettres, suivies de 4 chiffres. Dans l'exemple qui suit, le formulaire n'accepte qu'une valeur dont la taille est comprise entre 4 et 8 caractères et qui commence par deux lettres puis termine par 4 chiffres. @@ -344,69 +403,25 @@ input:valid ~ span:after { } ``` -Voici le résultat obtenu avec ce fragment HTML : +Voici le résultat obtenu avec ce fragment HTML : -{{EmbedLiveSample('Indiquer_un_motif', 600, 40)}} +{{EmbedLiveSample('', 600, 100)}} ## Exemples -Vous pouvez consulter un exemple de formulaire de recherche dans notre exemple [website-aria-roles](https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-aria-roles) ([voir la démonstration _live_](http://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/)). - -## Résumé technique - -<table class="properties"> - <tbody> - <tr> - <td><strong>{{anch("Valeur")}}</strong></td> - <td> - Une chaîne de caractères ({{domxref("DOMString")}}) qui - représente la valeur contenue dans le champ de recherche. - </td> - </tr> - <tr> - <td><strong>Évènements</strong></td> - <td> - {{domxref("HTMLElement/change_event", "change")}} et - {{domxref("HTMLElement/input_event", "input")}}. - </td> - </tr> - <tr> - <td><strong>Attributs pris en charge</strong></td> - <td> - {{htmlattrxref("autocomplete", "input")}}, - {{htmlattrxref("list", "input")}}, - {{htmlattrxref("maxlength", "input")}}, - {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("required", "input")}}, {{htmlattrxref("size", "input")}}. - </td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td><code>value</code></td> - </tr> - <tr> - <td><strong>Méthodes</strong></td> - <td> - {{domxref("HTMLInputElement.select", "select()")}}, - {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, - {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}. - </td> - </tr> - </tbody> -</table> +Vous pouvez consulter un exemple de formulaire de recherche dans notre exemple [`website-aria-roles`](https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-aria-roles) ([voir la démonstration <i lang="en">live</i>](https://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/)). ## Spécifications -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | -| {{SpecName('HTML WHATWG', 'input.html#text-(type=text)-state-and-search-state-(type=search)', '<input type="search">')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. | -| {{SpecName('HTML5.1', 'sec-forms.html#text-typetext-state-and-search-state-typesearch', '<input type="search">')}} | {{Spec2('HTML5.1')}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("html.elements.input.input-search")}} +{{Compat}} ## Voir aussi -- [Les formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires) -- {{HTMLElement("input")}} et l'interface {{domxref("HTMLInputElement")}} DOM qu'il implémente -- [`<input type="text">`](/fr/docs/Web/HTML/Element/input/text) +- [Les formulaires HTML](/fr/docs/Learn/Forms) +- [`<input>`](/fr/docs/Web/HTML/Element/Input) et l'interface [`HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement) DOM qui le porte +- [`<input type="text">`](/fr/docs/Web/HTML/Element/Input/text) +- [La compatibilité des propriétés CSS](/fr/docs/Learn/Forms/Property_compatibility_table_for_form_controls) diff --git a/files/fr/web/html/element/input/search/message-requis-firefox.png b/files/fr/web/html/element/input/search/message-requis-firefox.png Binary files differnew file mode 100644 index 0000000000..847daf599e --- /dev/null +++ b/files/fr/web/html/element/input/search/message-requis-firefox.png diff --git a/files/fr/web/html/element/input/tel/index.md b/files/fr/web/html/element/input/tel/index.md index 02fdce9c4e..db939d5af4 100644 --- a/files/fr/web/html/element/input/tel/index.md +++ b/files/fr/web/html/element/input/tel/index.md @@ -1,88 +1,138 @@ --- title: <input type="tel"> -slug: Web/HTML/Element/Input/tel -tags: - - Element - - Formulaires - - HTML - - Input - - Reference +slug: Web/HTML/Element/input/tel translation_of: Web/HTML/Element/input/tel +browser-compat: html.elements.input.input-tel --- {{HTMLRef}} -Les éléments {{HTMLElement("input")}} dont l'attribut `type` vaut **`"tel"`** permettent à un utilisateur de saisir un numéro de téléphone. Contrairement aux contrôles utilisés pour [`<input type="email">`](/fr/docs/Web/HTML/Element/input/email) et [`<input type="url">`](/fr/docs/Web/HTML/Element/input/url) , la valeur saisie n'est pas automatiquement validée selon un format donné car les formats des numéros de téléphone varient à travers le monde. +Les éléments [`<input>`](/fr/docs/Web/HTML/Element/Input) dont l'attribut `type` vaut **`tel`** permettent de saisir un numéro de téléphone. Contrairement aux contrôles utilisés pour [`<input type="email">`](/fr/docs/Web/HTML/Element/input/email) et [`<input type="url">`](/fr/docs/Web/HTML/Element/input/url), la valeur saisie n'est pas automatiquement validée selon un format donné, car les formats des numéros de téléphone varient à travers le monde. {{EmbedInteractiveExample("pages/tabbed/input-tel.html", "tabbed-standard")}} -> **Note :** Les navigateurs qui ne prennent pas en charge le type `"tel"` utiliseront à la place un contrôle de type [`"text"`](/fr/docs/Web/HTML/Element/input/text). +Bien que les champs de saisie de numéro de téléphone soient fonctionnellement identiques aux champs de saisie textuels (`<input type="text">`), ils permettent, notamment pour les navigateurs mobiles, de présenter un clavier optimisé pour la saisie d'un numéro de téléphone. L'utilisation d'un tel champ permet également d'appliquer une validation personnalisée de façon ciblée. -## Valeur +> **Note :** Les navigateurs qui ne prennent pas en charge le type `tel` utiliseront à la place un contrôle [`<input type="text">`](/fr/docs/Web/HTML/Element/Input/text). + +## Résumé technique + +<table class="properties"> + <tbody> + <tr> + <td><strong><a href="#valeur">Valeur</a></strong></td> + <td> + Une chaîne de caractères (<a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>) qui représente un numéro de téléphone ou qui est vide. + </td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td> + <a href="/fr/docs/Web/API/HTMLElement/change_event"><code>change</code></a> et <a href="/fr/docs/Web/API/HTMLElement/input_event"><code>input</code></a> + </td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td> + <a href="/fr/docs/Web/HTML/Element/Input#attr-autocomplete"><code>autocomplete</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-list"><code>list</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-maxlength"><code>maxlength</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-minlength"><code>minlength</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-pattern"><code>pattern</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-placeholder"><code>placeholder</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-readonly"><code>readonly</code></a>, et <a href="/fr/docs/Web/HTML/Element/Input#attr-size"><code>size</code></a> + </td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td> + <code>list</code>, <code>selectionStart</code>, + <code>selectionEnd</code>, <code>selectionDirection</code>, et + <code>value</code> + </td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td> + <a href="/fr/docs/Web/API/HTMLInputElement/select"><code>select()</code></a>, <a href="/fr/docs/Web/API/HTMLInputElement/setRangeText"><code>setRangeText()</code></a>, <a href="/fr/docs/Web/API/HTMLInputElement/setSelectionRange"><code>setSelectionRange()</code></a> + </td> + </tr> + </tbody> +</table> -Une chaîne de caractères ({{domxref("DOMString")}}) qui peut prendre l'une de ces deux valeurs : +## Valeur -1. Une chaîne vide ("") qui indique que l'utilisateur n'a saisi aucune valeur ou que celle-ci a été supprimée. -2. Une chaîne de caractères représentant un numéro de téléphone. +La valeur de ce champ, portée par l'attribut [`value`](/fr/docs/Web/HTML/Element/Input#attr-value) est une chaîne de caractères ([`DOMString`](/fr/docs/Web/API/DOMString)) qui peut être une chaîne vide ou un numéro de téléphone. ## Attributs supplémentaires -In addition to the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, telephone number inputs support the following attributes: +En plus des attributs présents pour tous les éléments [`<input>`](/fr/docs/Web/HTML/Element/Input), les champs de saisie pour les numéros de téléphone prennent en charge les attributs suivants. + +### `list` + +La valeur de cet attribut est l'identifiant ([`id`](/fr/docs/Web/API/Element/id)) d'un élément [`<datalist>`](/fr/docs/Web/HTML/Element/datalist) situé dans le même document. L'élément [`<datalist>`](/fr/docs/Web/HTML/Element/datalist) fournit une liste de valeurs prédéfinies qui doivent être suggérées lors de la saisie dans le champ. Toute valeur de cette liste qui n'est pas compatible avec le type de champ ([`type`](/fr/docs/Web/HTML/Element/Input#attr-type)) ne sera pas incluse dans les suggestions. Les valeurs fournies sont des suggestions et pas des contraintes : il reste tout à fait possible de choisir une valeur différente que celles de la liste. + +### `maxlength` + +Le nombre maximum de caractères (exprimé en nombre de points de code UTF-16) qu'il est possible de saisir dans le champ. Cette valeur doit un entier positif ou nul. Si aucune valeur n'est fournie pour `maxlength` ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à `minlength`. + +Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/Constraint_validation) si la longueur du numéro de téléphone dépasse `maxlength` en nombre de points de code UTF-16. + +### `minlength` + +Le nombre minimal de caractères (exprimé en nombre de points de code UTF-16) que l'utilisatrice ou l'utilisateur peut saisir dans le champ. Cette valeur doit être un entier positif ou nul. Si aucune valeur n'est fournie pour `minlength` ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieure à `maxlength`. + +Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/Constraint_validation) si la longueur du numéro de téléphone est inférieure à `minlength` en nombre de points de code UTF-16. + +### `pattern` -| Attribut | Description | -| ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | -| `{{anch("maxlength")}}` | Le nombre de caractères maximal, exprimé en points de code UTF-16, qui peut être écrit dans ce champ. | -| `{{anch("minlength")}}` | Le nombre de caractères minimal, exprimé en points de code UTF-16, qui peut être écrit dans ce champ pour qu'il soit considéré comme valide. | -| `{{anch("pattern")}}` | Une expression rationnelle à laquelle doit correspondre le numéro de téléphone saisi pour être valide. | -| `{{anch("placeholder")}}` | Une valeur d'exemple qui sera affichée lorsqu'aucune valeur n'est saisie. | -| `{{anch("readonly")}}` | Un attribut booléen qui indique si le contenu du champ est en lecture seule. | -| `{{anch("size")}}` | Un nombre qui indique le nombre de caractères affichés par le champ. | +L'attribut `pattern`, lorsqu'il est utilisé, est une expression rationnelle qui impose un format à [`value`](/fr/docs/Web/HTML/Element/Input#attr-value), que cette dernière doit respecter afin que le champ soit [valide](/fr/docs/Web/Guide/HTML/Constraint_validation) . Le contenu de `pattern` doit être une expression rationnelle JavaScript valide (voir la documentation sur le type [`RegExp`](/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp) et [le guide sur les expressions rationnelles](/fr/docs/Web/JavaScript/Guide/Regular_Expressions). Le marqueur `'u'` est utilisé à la compilation de l'expression rationnelle afin que le motif soit traité comme une séquence de points de code Unicode et non ASCII. Il ne faut pas entourer l'expression de barres obliques. -### {{htmlattrdef("maxlength")}} +Si aucune expression rationnelle n'est fournie ou que celle-ci est invalide, aucune contrainte de format ne sera appliquée et cet attribut sera ignoré complètement. -Le nombre maximum de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour `maxlength` ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à `minlength`. +> **Note :** On utilisera l'attribut [`title`](/fr/docs/Web/HTML/Element/Input#attr-title) pour définir le texte que la plupart des navigateurs afficheront comme bulle d'information afin d'expliquer les contraintes imposées par l'expression rationnelle. Il faut également inclure un texte explicatif à proximité du champ. -Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) si la longueur du numéro de téléphone dépasse `maxlength` en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur. +Voir [Utiliser un format particulier](#utiliser_un_format_particulier) pour plus de détails et un exemple. -### {{htmlattrdef("minlength")}} +### `placeholder` -Le nombre minimal de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour `minlength` ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieur à `maxlength`. +L'attribut `placeholder` est une chaîne de caractères qui fournit une indication courte sur le type d'information attendue dans le champ. Ce devrait être un mot ou une phrase courte qui illustre le type de données attendu plutôt qu'un message explicatif. Le texte _ne doit pas_ inclure de saut de ligne ou de retour chariot. -Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) si la longueur du numéro de téléphone est inférieure à `minlength` en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur. +Si le contenu du contrôle utilise une direction (écriture de gauche à droite ou de droite à gauche), mais que le texte indicatif doit être présenté dans la direction inverse, vous pouvez utiliser des caractères de formatage pour l'algorithme bidirectionnel Unicode dans la valeur. Voir [comment utiliser des contrôles Unicode pour le texte bidirectionnel](https://www.w3.org/International/questions/qa-bidi-unicode-controls) pour plus d'informations. -### {{htmlattrdef("pattern")}} +> **Note :** On évitera d'utiliser l'attribut `placeholder` si possible. Il n'est pas aussi utile que d'autres sur le plan sémantique pour expliquer le formulaire et il peut causer des problèmes techniques avec le contenu. Voir [Utilisation de libellés et de textes indicatifs](/fr/docs/Web/HTML/Element/Input#utilisation_de_libellés) pour plus d'informations. -{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}} +### `readonly` -Voir [la section format](#format) ci-après pour plus détails et d'exemples. +Un attribut booléen qui, s'il est présent, indique que le champ ne peut pas être édité dans le formulaire. La valeur du champ (portée par l'attribut `value`) peut toutefois être modifiée par du code JavaScript, qui changerait la propriété `value` rattachée à [l'interface `HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement). -{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}} +> **Note :** Un champ en lecture seule ne pouvant pas avoir de valeur, l'attribut `required` n'a pas d'effet particulier sur les champs pour lesquels `readonly` est appliqué. -{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}} +### `size` -{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}} +L'attribut `size` est une valeur numérique qui indique la largeur idéale du champ, exprimée en nombre de caractères. Sa valeur doit être un nombre supérieur à 0 et la valeur par défaut est 20. Comme les caractères peuvent avoir une largeur différente entre eux, on ne doit pas s'attendre à ce que cette taille permette exactement de voir les n caractères, le contrôle résultant pourra être plus étroit ou plus large que le nombre indiqué en fonction des caractères saisis et de la police (voir la propriété CSS [`font`](/fr/docs/Web/CSS/font)) utilisée. + +Cet attribut _n'impose pas_ de limite sur le nombre de caractères qui peuvent être saisis. Il indique uniquement, de façon approximative, le nombre de caractères visibles au même moment. Pour imposer une contrainte de taille sur la longueur maximale de la valeur saisissable, on pourra utiliser l'attribut [`maxlength`](#maxlength). ## Attributs non-standard -Les attributs non-standard suivant sont disponibles pour les champs textuels mais devraient ne pas être utilisés. +Les attributs non-standard suivants sont disponibles pour les champs téléphoniques mais ne devraient pas être utilisés. + +### `autocorrect` + +Un attribut spécifique à Safari qui indique si la correction automatique doit être activée (ou non) lors de l'édition manuelle de ce champ. Les valeurs autorisées sont : -| Attribute | Description | -| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `{{anch("autocorrect")}}` | Indique si la correction automatique doit être appliquée à ce champ texte. **Uniquement pris en charge par Safari.** | -| `{{anch("mozactionhint")}}` | Une chaîne de caractères qui indique le type d'action qui sera effectuée lorsque l'utilisateur appuiera sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition du champ. La valeur de cet attribut est utilisée comme libellé pour la touche adéquate du clavier virtuel. **Uniquement pris en charge par Firefox pour Android.** | +- `on` + - : La correction automatique est activée et les remplacements automatiques, si certains sont configurés, sont effectués. +- `off` + - : La correction automatique et les remplacements sont désactivés. -### {{htmlattrdef("autocorrect")}} {{non-standard_inline}} +### `mozactionhint` -{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}} +Un attribut spécifique à Mozilla, pris en charge par Firefox sur Android qui fournit une indication sur le type d'action réalisée lors de l'appui sur <kbd>Entrée</kbd> ou <kbd>Retour</kbd> pendant l'édition du champ. Cette information est utilisée pour décider du libellé à afficher sur la touche <kbd>Entrée</kbd> du clavier virtuel. -### {{htmlattrdef("mozactionhint")}} {{non-standard_inline}} +> **Note :** [Ce comportement a été standardisé](https://html.spec.whatwg.org/#input-modalities:-the-enterkeyhint-attribute) avec l'attribut universel [`enterkeyhint`](/fr/docs/Web/HTML/Global_attributes#attr-enterkeyhint), mais ce dernier n'est pas encore largement implémenté. En ce qui concerne l'implémentation dans Firefox, voir [le bug 1490661](https://bugzilla.mozilla.org/show_bug.cgi?id=1490661). -{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}} +Les valeurs autorisées sont : `go`, `done`, `next`, `search`, et `send`. Le navigateur décide alors, en fonction de cette indication, du libellé à appliquer sur la touche <kbd>Entrée</kbd>. ## Utiliser `<input type="tel">` -Les numéros de téléphone peuvent jouer un rôle important dans certains formulaires web. Un site de commerce en ligne, par exemple, peut vouloir enregistrer le numéro de téléphone d'un utilisateur pour le contacter lors de la livraison. Toutefois, un des problèmes relatifs aux numéros de téléphone est la variété de formats qui existent à travers le monde. Il est donc difficile (voire impossible) de valider les valeurs automatiquement. +Les numéros de téléphone peuvent jouer un rôle important dans certains formulaires web. Un site de commerce en ligne, par exemple, peut vouloir enregistrer le numéro de téléphone d'une utilisatrice ou un utilisateur pour le contacter lors de la livraison. Toutefois, un des problèmes relatifs aux numéros de téléphone est la variété de formats qui existent à travers le monde. Il est donc difficile (voire impossible) de valider les valeurs automatiquement. -> **Note :** Des mécanismes de validation particuliers peuvent être ajoutés si besoin (cf. {{anch("Validation")}} ci-après). +> **Note :** Des mécanismes de validation particuliers peuvent être ajoutés si besoin (cf. [Validation](#validation) ci-après). ### Claviers adaptés @@ -94,28 +144,29 @@ L'un des avantages des contrôles de type `tel` est qu'ils permettent aux naviga ### Un contrôle simple -Dans sa forme la plus simple, on peut implémenter un tel contrôle avec ce fragment HTML : +Dans sa forme la plus simple, on peut implémenter un tel contrôle avec ce fragment HTML : ```html +<label for="telNo">Numéro de téléphone :</label> <input id="telNo" name="telNo" type="tel"> ``` -{{EmbedLiveSample('Un_contrôle_simple', 600, 40)}} +{{EmbedLiveSample('', 600, 40)}} Rien de bien surprenant ici. Lorsque les données seront envoyées au serveur, elles auront la forme `telNo=0123456789`. -### Textes indicatifs - _placeholders_ +### Textes indicatifs (<i lang="en">placeholders</i>) -Il est parfois utile de fournir une indication quant au format attendu. Or, il est possible que la disposition de la page ne permette pas de fournir des étiquettes détaillées. C'est pourquoi on peut utiliser des textes indicatifs via l'attribut `placeholder`. Ces valeurs seront affichées dans le champ et disparaîtront dès que l'utilisateur saisira quelque chose (et réapparaîtront si la valeur redevient vide). Un tel texte indicatif doit servir de suggestion quant au format souhaité. +Il est parfois utile de fournir une indication quant au format attendu. Or, il est possible que la disposition de la page ne permette pas de fournir des étiquettes détaillées. C'est pourquoi on peut utiliser des textes indicatifs via l'attribut `placeholder`. Ces valeurs seront affichées dans le champ et disparaîtront dès que l'utilisatrice ou l'utilisateur saisira quelque chose (et réapparaîtront si la valeur redevient vide). Un tel texte indicatif doit servir de suggestion quant au format souhaité. -Dans l'exemple suivant, on a un contrôle `"tel"` avec un attribut `placeholder` qui vaut `"01 23 45 67 89"`. Vous pouvez manipuler le résultat obtenu pour voir comment ce texte est affiché selon qu'une valeur saisie ou que le champ est vide : +Dans l'exemple suivant, on a un contrôle `tel` avec un attribut `placeholder` qui vaut `01 23 45 67 89`. Vous pouvez manipuler le résultat obtenu pour voir comment ce texte est affiché selon qu'une valeur saisie ou que le champ est vide : ```html <input id="telNo" name="telNo" type="tel" placeholder="01 23 45 67 89"> ``` -{{EmbedLiveSample('Textes_indicatifs_-_placeholders', 600, 40)}} +{{EmbedLiveSample('', 600, 40)}} ### Contrôler la taille du champ @@ -123,18 +174,18 @@ On peut contrôler la taille physique allouée au contrôle ainsi que les longue #### La taille physique -La taille physique de la boîte de saisie peut être contrôlée avec l'attribut {{htmlattrxref("size", "input")}}. La valeur de cet attribut indique le nombre de caractères que la boîte peut afficher simultanément. Si, par exemple, on souhaite que le contrôle mesure 20 caractères de large, on pourra utiliser le code suivant : +La taille physique de la boîte de saisie peut être contrôlée avec l'attribut [`size`](/fr/docs/Web/HTML/Element/Input#attr-size). La valeur de cet attribut indique le nombre de caractères que la boîte peut afficher simultanément. Si, par exemple, on souhaite que le contrôle mesure 20 caractères de large, on pourra utiliser le code suivant : ```html <input id="telNo" name="telNo" type="tel" size="20"> ``` -{{EmbedLiveSample('La_taille_physique', 600, 40)}} +{{EmbedLiveSample('', 600, 40)}} #### La longueur de la valeur -L'attribut `size` ne contraint pas la taille de la valeur qui peut être saisie dans le contrôle. Si on souhaite avoir une longueur minimale (en nombre de caractères), on pourra utiliser l'attribut {{htmlattrxref("minlength", "input")}}. De même, si on souhaite qu'un numéro de téléphone valide mesure au maximum X caractères, on pourra employer l'attribut {{htmlattrxref("maxlength", "input")}}. +L'attribut `size` ne contraint pas la taille de la valeur qui peut être saisie dans le contrôle. Si on souhaite avoir une longueur minimale (en nombre de caractères), on pourra utiliser l'attribut [`minlength`](/fr/docs/Web/HTML/Element/Input#attr-minlength). De même, si on souhaite qu'un numéro de téléphone valide mesure au maximum X caractères, on pourra employer l'attribut [`maxlength`](/fr/docs/Web/HTML/Element/Input#attr-maxlength). Dans l'exemple qui suit, on crée un contrôle qui mesure 20 caractères de large et dont le contenu doit être plus long que 9 caractères et plus court que 14 caractères. @@ -143,24 +194,26 @@ Dans l'exemple qui suit, on crée un contrôle qui mesure 20 caractères de larg size="20" minlength="9" maxlength="14"> ``` -{{EmbedLiveSample("La_longueur_de_la_valeur", 600, 40)}} +{{EmbedLiveSample("", 600, 40)}} -> **Note :** Ces deux attributs jouent un rôle lors de la {{anch("validation", "Validation")}}. Dans l'exemple précédent, la valeur sera considérée comme invalide si elle contient moins de 9 caractères ou plus de 14. La plupart des navigateurs ne permettront pas de saisir une valeur plus longue que la taille maximale. +> **Note :** Ces deux attributs jouent un rôle lors de la [validation](#validation). Dans l'exemple précédent, la valeur sera considérée comme invalide si elle contient moins de 9 caractères ou plus de 14. La plupart des navigateurs ne permettront pas de saisir une valeur plus longue que la taille maximale. ### Fournir une valeur par défaut -Il est possible de fournir une valeur par défaut en renseignant au préalable l'attribut {{htmlattrxref("value", "input")}} : +#### Fournir une seule valeur par défaut avec l'attribut `value` + +Il est possible de fournir une valeur par défaut en renseignant au préalable l'attribut [`value`](/fr/docs/Web/HTML/Element/Input#attr-value) : ```html <input id="telNo" name="telNo" type="tel" value="01 23 45 67 89"> ``` -{{EmbedLiveSample("Fournir_une_valeur_par_défaut", 600, 40)}} +{{EmbedLiveSample("", 600, 40)}} #### Afficher des suggestions -Si on souhaite aller plus loin, on peut fournir une liste de suggestions parmi lesquelles l'utilisateur pourra choisir (il pourra également saisir la valeur de son choix si celle-ci ne fait pas partie de la liste). Pour cela, on utilisera l'attribut {{htmlattrxref("list", "input")}} dont la valeur est l'identifiant d'un élément {{HTMLElement("datalist")}} qui contient autant d'éléments {{HTMLElement("option")}} que de valeurs suggérées. C'est la valeur de l'attribut `value` de chaque élément `<option>` qui sera utilisée comme suggestion. +Si on souhaite aller plus loin, on peut fournir une liste de suggestions parmi lesquelles on pourra choisir (on pourra également saisir la valeur de son choix si celle-ci ne fait pas partie de la liste). Pour cela, on utilisera l'attribut [`list`](/fr/docs/Web/HTML/Element/Input#attr-list) dont la valeur est l'identifiant d'un élément [`<datalist>`](/fr/docs/Web/HTML/Element/datalist) qui contient autant d'éléments [`<option>`](/fr/docs/Web/HTML/Element/Option) que de valeurs suggérées. C'est la valeur de l'attribut `value` de chaque élément `<option>` qui sera utilisée comme suggestion. ```html <input id="telNo" name="telNo" type="tel" list="defaultTels"> @@ -173,19 +226,19 @@ Si on souhaite aller plus loin, on peut fournir une liste de suggestions parmi l </datalist> ``` -{{EmbedLiveSample("Afficher_des_suggestions", 600, 40)}} +{{EmbedLiveSample("", 600, 40)}} -Avec l'élément {{HTMLElement("datalist")}} contenant ces différentes valeurs {{HTMLElement("option")}}, le navigateur affichera une liste déroulante (ou un autre élément d'interface utilisateur) afin que l'utilisateur puisse éventuellement choisir parmi les suggestions. Lorsque l'utilisateur saisit dans le contrôle, la liste des suggestions est restreinte à celles qui correspondent encore. +Avec l'élément [`<datalist>`](/fr/docs/Web/HTML/Element/datalist) contenant ces différentes valeurs [`<option>`](/fr/docs/Web/HTML/Element/Option), le navigateur affichera une liste déroulante (ou un autre élément d'interface utilisateur) afin que l'utilisatrice ou l'utilisateur puisse éventuellement choisir parmi les suggestions. Lorsqu'on saisit dans le contrôle, la liste des suggestions est restreinte à celles qui correspondent encore. ## Validation Comme évoqué ci-avant, il est difficile de fournir une solution qui convienne pour l'ensemble des formats utilisés et qui permette de valider correctement les numéros de téléphone. -> **Attention :** Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses. +> **Attention :** Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour quelqu'un de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses. ### Rendre la valeur obligatoire -Il est possible de rendre la saisie obligatoire avant de pouvoir envoyer le formulaire. Pour cela, on utilisera l'attribut {{htmlattrxref("required", "input")}} : +Il est possible de rendre la saisie obligatoire avant de pouvoir envoyer le formulaire. Pour cela, on utilisera l'attribut [`required`](/fr/docs/Web/HTML/Element/Input#attr-required) : ```html <form> @@ -200,7 +253,7 @@ Il est possible de rendre la saisie obligatoire avant de pouvoir envoyer le form </form> ``` -On utilisera la feuille de style suivante pour indiquer les éléments valides ou invalides du formulaire : +On utilisera la feuille de style suivante pour indiquer les éléments valides ou invalides du formulaire : ```css div { @@ -230,20 +283,20 @@ input:valid+span:after { } ``` -Voici le résultat obtenu : +Voici le résultat obtenu : -{{EmbedLiveSample("Rendre_la_valeur_obligatoire", 700, 70)}} +{{EmbedLiveSample("", 700, 130)}} ### Utiliser un format particulier -Si on souhaite restreindre le format de la valeur qui peut être saisie, on peut utiliser l'attribut {{htmlattrxref("pattern","input")}} dont la valeur est une expression rationnelle que la valeur doit respecter pour être valide. +Si on souhaite restreindre le format de la valeur qui peut être saisie, on peut utiliser l'attribut [`pattern`](/fr/docs/Web/HTML/Element/Input#attr-pattern) dont la valeur est une expression rationnelle que la valeur doit respecter pour être valide. -Dans cet exemple, on utilisera la même feuille de style que précédemment mais le code HTML sera celui-ci : +Dans cet exemple, on utilisera la même feuille de style que précédemment mais le code HTML sera celui-ci : ```html <form> <div> - <label for="telNo">Veuillez saisir un numéro de téléphone (obligatoire) : </label> + <label for="telNo">Veuillez saisir un numéro de téléphone (au format xx xx xx xx xx) :</label> <input id="telNo" name="telNo" type="tel" required pattern="[0-9]{2} [0-9]{2} [0-9]{2} [0-9]{2} [0-9]{2}"> <span class="validity"></span> @@ -282,15 +335,15 @@ input:valid+span:after { } ``` -{{EmbedLiveSample("Utiliser_un_format_particulier", 700, 70)}} +{{EmbedLiveSample("", 700, 130)}} -Vous pouvez ici voir que la valeur est considérée comme invalide si elle ne suit pas le format xx xx xx xx xx. Ce format peut peut-être être utile pour certaines régions mais attention, dans une application réelle, il faudra s'adapter à des cas plus complexes selon la locale de l'utilisateur. +Vous pouvez ici voir que la valeur est considérée comme invalide si elle ne suit pas le format `xx xx xx xx xx`. Ce format peut peut-être être utile pour certaines régions mais attention, dans une application réelle, il faudra s'adapter à des cas plus complexes selon la locale de l'utilisatrice ou l'utilisateur. ## Exemples -Dans cet exemple, on présente une interface simple avec un élément {{htmlelement("select")}} permettant à l'utilisateur de choisir le pays dans lequel il se trouve puis un ensemble d'éléments `<input type="tel">` permettant de saisir ses différents numéros de téléphone. +Dans cet exemple, on présente une interface simple avec un élément [`<select>`](/fr/docs/Web/HTML/Element/select) permettant de choisir le pays dans lequel on se trouve puis un ensemble d'éléments `<input type="tel">` permettant de saisir ses différents numéros de téléphone. -Chaque boîte de saisie possède un attribut {{htmlattrxref("placeholder","input")}} qui indique le format pressenti. On utilise également l'attribut {{htmlattrxref("pattern","input")}} afin d'indiquer le nombre de caractères ainsi qu'un attribut `aria-label` qui pourra être lu par un lecteur d'écran ete qui décrit quoi saisir dans le contrôle. +Chaque boîte de saisie possède un attribut [`placeholder`](/fr/docs/Web/HTML/Element/Input#attr-placeholder) qui indique le format pressenti. On utilise également l'attribut [`pattern`](/fr/docs/Web/HTML/Element/Input#attr-pattern) afin d'indiquer le nombre de caractères ainsi qu'un attribut `aria-label` qui pourra être lu par un lecteur d'écran et qui décrit quoi saisir dans le contrôle. ```html <form> @@ -329,14 +382,14 @@ Chaque boîte de saisie possède un attribut {{htmlattrxref("placeholder","input </form> ``` -Le code JavaScript associé est relativement simple, il contient un gestionnaire d'évènements {{domxref("GlobalEventHandlers.onchange", "onchange")}} qui est déclenché lorsque la valeur du `<select>` est modifiée. Il met alors à jour les attributs `pattern`, `placeholder`, `aria-label` du contrôle pour adapter le format attendu au pays choisi. +Le code JavaScript associé est relativement simple, il contient un gestionnaire d'évènements [`onchange`](/fr/docs/Web/API/GlobalEventHandlers/onchange) qui est déclenché lorsque la valeur du `<select>` est modifiée. Il met alors à jour les attributs `pattern`, `placeholder`, `aria-label` du contrôle pour adapter le format attendu au pays choisi. ```js -var selectElem = document.querySelector("select"); -var inputElems = document.querySelectorAll("input"); +let selectElem = document.querySelector("select"); +let inputElems = document.querySelectorAll("input"); selectElem.onchange = function() { - for(var i = 0; i < inputElems.length; i++) { + for(let i = 0; i < inputElems.length; i++) { inputElems[i].value = ""; } @@ -379,18 +432,18 @@ selectElem.onchange = function() { } ``` -Voici le résultat obtenu : +Voici le résultat obtenu : -{{EmbedLiveSample('Exemples', 600, 140)}} +{{EmbedLiveSample('', 600, 140)}} Attention, cet exemple n'est qu'une illustration du problème associé à la gestion internationale des numéros de téléphone. Il serait prétentieux d'affirmer qu'étendre ce mécanisme à chaque pays suffirait à garantir la bonne saisie d'un numéro de téléphone. -Bien entendu, si cette complexité est trop importante, on peut également faire le choix de contrôler la valeur côté serveur avant de faire un retour à l'utilisateur. +Bien entendu, si cette complexité est trop importante, on peut également faire le choix de contrôler la valeur côté serveur avant de faire un retour à l'utilisatrice ou l'utilisateur. ```css hidden div { -margin-bottom: 10px; -position: relative; + margin-bottom: 10px; + position: relative; } input[type="number"] { @@ -404,81 +457,30 @@ input + span { input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; + color: #8b0000; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; + color: #009000; } ``` -## Résumé technique - -<table class="properties"> - <tbody> - <tr> - <td><strong>{{anch("Valeur")}}</strong></td> - <td> - Une chaîne de caractères ({{domxref("DOMString")}}) qui - représente un numéro de téléphone ou qui est vide. - </td> - </tr> - <tr> - <td><strong>Évènements</strong></td> - <td> - {{domxref("HTMLElement/change_event", "change")}} et - {{domxref("HTMLElement/input_event", "input")}}. - </td> - </tr> - <tr> - <td><strong>Attributs pris en charge</strong></td> - <td> - {{htmlattrxref("autocomplete", "input")}}, - {{htmlattrxref("list", "input")}}, - {{htmlattrxref("maxlength", "input")}}, - {{htmlattrxref("minlength", "input")}}, - {{htmlattrxref("pattern", "input")}}, - {{htmlattrxref("placeholder", "input")}}, - {{htmlattrxref("readonly", "input")}} et - {{htmlattrxref("size", "input")}} - </td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td> - <code>list,selectionStart</code>, <code>selectionEnd</code>, - <code>selectionDirection</code> et <code>value</code> - </td> - </tr> - <tr> - <td><strong>Méthodes</strong></td> - <td> - {{domxref("HTMLInputElement.select", "select()")}}, - {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, - {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}} - </td> - </tr> - </tbody> -</table> - ## Spécifications -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | -| {{SpecName('HTML WHATWG', 'forms.html#tel-state-(type=tel)', '<input type="tel">')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. | -| {{SpecName('HTML5.1', 'sec-forms.html#tel-state-typetel', '<input type="tel">')}} | {{Spec2('HTML5.1')}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("html.elements.input.input-tel")}} +{{Compat}} ## Voir aussi -- [Le guide sur les formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires) -- {{HTMLElement("input")}} -- [Les formulaires et l'accessibilité](/fr/docs/Accessibilité/ARIA/formulaires) -- {{HTMLElement("input")}} - - - [`<input type="text">`](/fr/docs/Web/HTML/Element/input/text) +- [Le guide sur les formulaires HTML](/fr/docs/Learn/Forms) +- [Les formulaires et l'accessibilité](/fr/docs/Web/Accessibility/ARIA/forms) +- [`<input>`](/fr/docs/Web/HTML/Element/Input) + - [`<input type="text">`](/fr/docs/Web/HTML/Element/Input/text) - [`<input type="email">`](/fr/docs/Web/HTML/Element/input/email) +- [Compatibilité des propriétés CSS](/fr/docs/Learn/Forms/Property_compatibility_table_for_form_controls) diff --git a/files/fr/web/html/element/input/time/index.md b/files/fr/web/html/element/input/time/index.md index 43c692c106..5ed59ff563 100644 --- a/files/fr/web/html/element/input/time/index.md +++ b/files/fr/web/html/element/input/time/index.md @@ -1,16 +1,12 @@ --- title: <input type="time"> -slug: Web/HTML/Element/Input/time -tags: - - Formulaires - - HTML - - Input - - Reference +slug: Web/HTML/Element/input/time translation_of: Web/HTML/Element/input/time +browser-compat: html.elements.input.input-time --- {{HTMLRef}} -Les éléments {{htmlelement("input")}} dont l'attribut `type` vaut **`time`** permettent de créer des contrôles où l'utilisateur peut saisir une heure (avec des minutes et éventuellement des secondes). +Les éléments [`<input>`](/fr/docs/Web/HTML/Element/Input) dont l'attribut `type` vaut **`time`** permettent de créer des contrôles où l'utilisatrice ou l'utilisateur peut saisir une heure (avec des minutes et éventuellement des secondes). {{EmbedInteractiveExample("pages/tabbed/input-time.html", "tabbed-standard")}} @@ -28,46 +24,88 @@ Pour Chrome/Opera, le contrôle `time` possède deux cases permettant de saisir ### Firefox -Pour Firefox, l'aspect du contrôle est similaire mais il ne possède pas les flèches d'incrément. L'horloge peut également s'utiliser sur un format 12 heures ou 24 heures (selon la locale du système). Un bouton rond avec une croix permet de réinitialiser la valeur du contrôle. +Pour Firefox, l'aspect du contrôle est similaire, mais il ne possède pas les flèches d'incrément. L'horloge peut également s'utiliser sur un format 12 heures ou 24 heures (selon la locale du système). Un bouton rond avec une croix permet de réinitialiser la valeur du contrôle. -12 heures + 12 heures -24 heures + 24 heures ### Edge -Pour Edge, le contrôle affiché est un plus élaboré : il affiche un sélecteur avec deux bandes déroulantes pour choisir l'heure et les minutes (sur 12 ou 24 heures selon la locale) : +Pour Edge, le contrôle affiché est un plus élaboré : il affiche un sélecteur avec deux bandes déroulantes pour choisir l'heure et les minutes (sur 12 ou 24 heures selon la locale) : -12 heures + 12 heures -24 heures + 24 heures + +<table class="properties"> + <tbody> + <tr> + <td><strong><a href="#valeur">Valeur</a></strong></td> + <td>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui représente une heure ou qui est vide.</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td> + <a href="/fr/docs/Web/API/HTMLElement/change_event"><code>change</code></a> et <a href="/fr/docs/Web/API/HTMLElement/input_event"><code>input</code></a> + </td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td> + <a href="/fr/docs/Web/HTML/Element/Input#attr-autocomplete"><code>autocomplete</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-list"><code>list</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-readonly"><code>readonly</code></a>, et <a href="/fr/docs/Web/HTML/Element/Input#attr-step"><code>step</code></a> + </td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td> + <code>value</code>, <code>valueAsDate</code>, + <code>valueAsNumber</code> et <code>list</code>. + </td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td> + <a href="/fr/docs/Web/API/HTMLInputElement/select"><code>select()</code></a>, <a href="/fr/docs/Web/API/HTMLInputElement/stepDown"><code>stepDown()</code></a>, et <a href="/fr/docs/Web/API/HTMLInputElement/stepUp"><code>stepUp()</code></a>. + </td> + </tr> + </tbody> +</table> ## Valeur -Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de l'heure saisie dans le contrôle. Il est possible de définir une valeur par défaut en indiquant une heure dans l'attribut {{htmlattrxref("value", "input")}} : +Une chaîne de caractères ([`DOMString`](/fr/docs/Web/API/DOMString)) qui représente la valeur de l'heure saisie dans le contrôle. + +### Définir l'attribut HTML `value` + +Il est possible de définir une valeur par défaut en indiquant une heure dans l'attribut [`value`](/fr/docs/Web/HTML/Element/Input#attr-value) : ```html <label for="appt-time">Veuillez choisir une heure de rendez-vous :</label> <input id="appt-time" type="time" name="appt-time" value="13:30"> ``` -{{EmbedLiveSample('Valeur', 600, 60)}} +{{EmbedLiveSample('', 600, 60)}} + +### Définir la valeur avec le DOM et JavaScript -Il est également possible d'obtenir et de fixer l'heure en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}}. Par exemple : +Il est également possible d'obtenir et de fixer l'heure en JavaScript grâce à la propriété `value` rattachée à [l'interface `HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement). Par exemple : ```js -var timeControl = document.querySelector('input[type="time"]'); +let timeControl = document.querySelector('input[type="time"]'); timeControl.value = '15:30'; ``` ### Représentation de la valeur -Attention, le format d'affichage peut être différent de la valeur exacte contenue dans l'attribut `value`. Le format d'affichage sera choisi en fonction de la locale du système d'exploitation de l'utilisateur alors que la valeur de `value` suivra toujours le format `hh:mm` (où `hh` représente les deux chiffres de l'heure sur 24 heures et où `mm` représente les deux chiffres pour les minutes). Ainsi, `13:30`, pourra être affiché sous la forme `1.30 PM` dans le contrôle mais la valeur envoyée avec le formulaire sera toujours `appt-time=13%3A30`. Pour en savoir plus, vous pouvez vous référer à [l'article sur les formats utilisés pour les représentations des dates et heures](/fr/docs/Web/HTML/Formats_date_heure_HTML). +Attention, le format d'affichage peut être différent de la valeur exacte contenue dans l'attribut `value`. Le format d'affichage sera choisi en fonction de la locale du système d'exploitation du navigateur alors que la valeur de `value` suivra toujours le format `hh:mm` (où `hh` représente les deux chiffres de l'heure sur 24 heures et où `mm` représente les deux chiffres pour les minutes). Ainsi, `13:30`, pourra être affiché sous la forme `1.30 PM` dans le contrôle mais la valeur envoyée avec le formulaire sera toujours `appt-time=13%3A30`. Si l'heure inclut des secondes (voir [Utiliser l'attribut `step`](#utiliser_step)), le format sera `hh:mm:ss`. Pour en savoir plus, vous pouvez vous référer à [l'article sur les formats utilisés pour les représentations des dates et heures](/fr/docs/Web/HTML/Date_and_time_formats). -Prenons un autre exemple qui permet de voir simultanément la valeur dans le contrôle et celle stockée dans l'attribut : +Prenons un autre exemple qui permet de voir simultanément la valeur dans le contrôle et celle stockée dans l'attribut. #### HTML +Pour commencer, on a ce fragment de HTML qui utilise un libellé et le champ de saisie (comme montré avant). On y ajoute un paragraphe (l'élément [`<p>`](/fr/docs/Web/HTML/Element/p)) et un élément [`<span>`](/fr/docs/Web/HTML/Element/span) afin d'afficher la valeur du champ `time` : + ```html <form> <label for="startTime">Début : </label> @@ -81,11 +119,11 @@ Prenons un autre exemple qui permet de voir simultanément la valeur dans le con #### JavaScript -On utilise quelques lignes de JavaScript afin de récupérer la valeur stockée et on l'insère dans l'élément `<span>` du fragment HTML précédent en surveillant l'évènement {{domxref("HTMLElement/input_event", "input")}} : +On utilise quelques lignes de JavaScript afin de récupérer la valeur stockée et on l'insère dans l'élément `<span>` du fragment HTML précédent en surveillant l'évènement [`input`](/fr/docs/Web/API/HTMLElement/input_event) : ```js -var startTime = document.getElementById("startTime"); -var valueSpan = document.getElementById("value"); +let startTime = document.getElementById("startTime"); +let valueSpan = document.getElementById("value"); startTime.addEventListener("input", function() { valueSpan.innerText = startTime.value; @@ -94,48 +132,51 @@ startTime.addEventListener("input", function() { #### Résultat -{{EmbedLiveSample("Représentation_de_la_valeur", 600, 80)}} +{{EmbedLiveSample("", 600, 120)}} + +Lorsqu'un formulaire contenant un champ `time` est envoyé, la valeur est encodée avant d'être incluse dans les données du formulaire. Ainsi, la valeur du champ pour l'heure aura toujours la forme `name=hh%3Amm`, ou `name=hh%3Amm%3Ass` si les secondes sont incluses (voir [Utiliser l'attribut `step`](#utiliser_step)). ## Attributs supplémentaires -En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de type `"time"` gèrent les attributs suivants : +En complément des attributs communs à l'ensemble des éléments [`<input>`](/fr/docs/Web/HTML/Element/Input), les champs de type `time` gèrent les attributs suivants. -| Attribut | Description | -| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | -| `{{anch("max")}}` | L'heure la plus tardive qui est accepté, au format `"hh:mm"`. | -| `{{anch("min")}}` | L'heure la plus tôt qui est acceptée au format `"hh:mm"`. | -| `{{anch("readonly")}}` | Un attribut booléen qui, lorsqu'il est présent, indique que le contenu du champ ne peut pas être édité par l'utilisateur. | -| `{{anch("step")}}` | Le pas à utiliser pour l'incrément quand on utilise les boutons d'augmentation/diminution. Cet incrément est également utilisé pour la validation. | +> **Note :** À la différence d'autres types de donnée, les valeurs pour les heures sont sur un domaine **périodique**. Cela signifie qu'une fois la valeur maximale dépassée, on revient à la valeur minimale (autrement dit, on fait le tour de l'horloge). Ainsi, si on indique `min` avec la valeur `14:00` et `max` avec la valeur `2:00`, cela signifie que les valeurs autorisées sont comprises entre 2 heures de l'après-midi et jusqu'à 2 heures du matin le jour suivant. Pour plus de détails, voir la section [avoir un minimum et un maximum autour de minuit](#avoir_un_minimum_et_un_maximum_autour_de_minuit). -> **Note :** À la différence d'autres types de donnée, les valeurs pour les heures sont sur un domaine **périodique**. Cela signifie qu'une fois la valeur maximale dépassée, on revient à la valeur minimale (autrement dit, on fait le tour de l'horloge). Ainsi, si on indique `min` avec la valeur `"14:00"` et `max` avec la valeur `"2:00"`, cela signifie que les valeurs autorisées sont comprises entre 2 heures de l'après-midi et jusqu'à 2 heures du matin le jour suivant. +### `list` -### {{htmlattrdef("max")}} +La valeur de cet attribut est l'identifiant ([`id`](/fr/docs/Web/API/Element/id)) d'un élément [`<datalist>`](/fr/docs/Web/HTML/Element/datalist) situé dans le même document. L'élément [`<datalist>`](/fr/docs/Web/HTML/Element/datalist) fournit une liste de valeurs prédéfinies qui doivent être suggérées lors de la saisie dans le champ. Toute valeur de cette liste qui n'est pas compatible avec le type de champ ([`type`](/fr/docs/Web/HTML/Element/Input#attr-type)) ne sera pas incluse dans les suggestions. Les valeurs fournies sont des suggestions et pas des contraintes : il reste tout à fait possible de choisir une valeur différente que celles de la liste. -Une chaîne de caractères, au format `"hh:mm"`, qui indique l'heure la plus tardive qui est considérée comme valide. Si la chaîne fournie n'est pas valide, aucun maximum n'est défini. +### `max` -### {{htmlattrdef("min")}} +Une chaîne de caractères, au format `hh:mm`, qui indique l'heure la plus tardive qui est considérée comme valide. Si la chaîne fournie n'est pas valide, aucun maximum n'est défini. -Une chaîne de caractères, au format `"hh:mm"`, qui indique l'heure la plus tôt qui est considérée comme valide. Si la chaîne fournie n'est pas valide, aucun minimum n'est défini. +### `min` -{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}} +Une chaîne de caractères, au format `hh:mm`, qui indique l'heure la plus tôt qui est considérée comme valide. Si la chaîne fournie n'est pas valide, aucun minimum n'est défini. -### {{htmlattrdef("step")}} +### `readonly` -{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}} +Un attribut booléen qui, s'il est présent, indique que le champ ne peut pas être édité par l'utilisatrice ou l'utilisateur. La valeur de l'attribut `value` peut, toutefois, être modifiée avec du code JavaScript qui modifierait la valeur de la propriété `value` sur l'objet [`HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement). -Pour les champs de type `time`, la valeur de l'attribut `step` est exprimée en secondes (avec un facteur de multiplication de 1000). Par défaut, la valeur de l'incrément est 60, ce qui correspond à 1 minute. +> **Note :** Puisqu'un champ en lecture seule ne peut pas avoir de valeur, `required` n'a pas d'effet sur les champs qui ont également `readonly` présent. -_À l'heure où ces lignes sont écrites, la signification de la valeur `"any"` pour l'attribut `step` pour les champs `time` n'est pas certaine. Cette information sera mise à jour dès que possible._ +### `step` -## Utiliser `<input type="time">` +L'attribut `step` est un nombre qui définit la granularité à laquelle la valeur doit obéir, ou la valeur `any` (décrite ci-après). Seules les valeurs qui sont des incréments en multiple de `step` depuis la valeur de base ([`min`](#min) si cet attribut est défini, [`value`](/fr/docs/Web/HTML/Element/Input#attr-value) sinon, et si aucun n'est fourni, une valeur par défaut appropriée) sont valides. + +Si cet attribut utilise la chaîne de caractère `any`, cela signifie qu'il n'y a aucune contrainte d'incrément et que toute valeur est autorisée (sous réserve de respecter les autres contraintes, comme celles indiquées par [`min`](#min) et [`max`](#max)). + +> **Note :** Lorsque les données saisies dans le contrôle ne respectent pas l'incrément, [l'agent utilisateur](/fr/docs/Glossary/User_agent) pourra arrondir à la valeur valide la plus proche, en privilégiant les nombres les plus grands si les deux options valides environnantes sont à égale distance. -Ces champs de saisie peuvent sembler pratiques : ils fournissent simplement une interface utilisateur pour sélectionner ds heures et normalisent les données dans un format (indépendant de la locale de l'utilisateur) avant de l'envoyer au serveur. Toutefois, quelques écueils peuvent apparaître en raison de la prise en charge hétérogène des différents navigateurs. +Pour les champs de type `time`, la valeur de l'attribut `step` est exprimée en secondes (avec un facteur de multiplication de `1000` puisque la valeur numérique sous-jacente est exprimée en millisecondes). Par défaut, la valeur de l'incrément est `60`, ce qui correspond à 1 minute. -Dans la suite de cet article, nous verrons des cas d'utilisation simples puis complexes autour de `<input type="time">` puis nous verrons comment gérer l'absence de prise en charge des navigateur avec un exemple plus développé. +_À l'heure où ces lignes sont écrites, la signification de la valeur `any` pour l'attribut `step` pour les champs `time` n'est pas certaine. Cette information sera mise à jour dès que possible._ + +## Utiliser `<input type="time">` ### Utilisation simple -Dans sa forme la plus simple, `<input type="time">` n'est accompagné que d'un élément {{htmlelement("label")}} : +Dans sa forme la plus simple, `<input type="time">` n'est accompagné que d'un élément [`<label>`](/fr/docs/Web/HTML/Element/Label) : ```html <form> @@ -144,17 +185,19 @@ Dans sa forme la plus simple, `<input type="time">` n'est accompagné que d'un à </form> ``` -{{EmbedLiveSample('Utilisation_simple', 600, 40)}} +{{EmbedLiveSample('', 600, 40)}} ### Ajuster la taille du contrôle -`<input type="time">` ne prend pas en charge d'attribut qui permette de le dimensionner (à la façon de {{htmlattrxref("size", "input")}}). Il faut donc utiliser [CSS](/fr/docs/Web/CSS) si besoin. +`<input type="time">` ne prend pas en charge d'attribut qui permette de le dimensionner (à la façon de [`size`](/fr/docs/Web/HTML/Element/Input#attr-size)). Il faut donc utiliser [CSS](/fr/docs/Web/CSS) si besoin. ### Utiliser `step` -L'attribut {{htmlattrxref("step", "input")}} peut être utilisé afin de faire varier l'incrément de temps lorsqu'on passe d'une valeur à la suivante ou à la précédente. Attention toutefois, cela n'est pas pris en charge ou homogène parmi les différents navigateurs. +L'attribut [`step`](/fr/docs/Web/HTML/Element/Input#attr-step) peut être utilisé afin de faire varier l'incrément de temps lorsqu'on passe d'une valeur à la suivante ou à la précédente. Attention toutefois, cela n'est pas pris en charge ou homogène parmi les différents navigateurs. -La valeur de cet attribut est un entier exprimant le nombre de secondes à incrémenter. Si on choisit une valeur inférieure à 60 secondes (c'est-à -dire 1 minute), le contrôle `time` affichera alors une troisième section pour les secondes après les heures et les minutes: +> **Note :** L'effet de cette propriété peut être étrange selon les navigateurs, elle n'est donc pas complètement fiable. + +La valeur de cet attribut est un entier exprimant le nombre de secondes à incrémenter. Si on choisit une valeur inférieure à 60 secondes (c'est-à -dire 1 minute), le contrôle `time` affichera alors une troisième section pour les secondes après les heures et les minutes : ```html <form> @@ -163,19 +206,23 @@ La valeur de cet attribut est un entier exprimant le nombre de secondes à incrà </form> ``` -{{EmbedLiveSample("Utiliser_step", 600, 40)}} +{{EmbedLiveSample("", 600, 40)}} + +Cependant, cela ne semble avoir un effet prévisible que pour Chrome/Opera qui sont les deux navigateurs à posséder des flèches d'incrément. Avant l'exemple précédent, cliquer sur la flèche augmentera/réduira l'heure de deux secondes (si on souhaite manipuler des minutes, il faudra multiplier par `60` et de même pour les heures : un incrément de `120` correspondra à 2 minutes et un incrément de `7200` correspondra à 2 heures). + +Pour Firefox, il n'y a pas de flèches et `step` n'est pas utilisé. Toutefois, fournir cet attribut a comme effet d'ajouter une zone de saisie pour les secondes à côté de la section pour les minutes. -Cependant, cela ne semble avoir un effet prévisible que pour Chrome/Opera qui sont les deux navigateurs à posséder des flèches d'incrément. Avant l'exemple précédent, cliquer sur le flèche augmentera/réduira l'heure de deux secondes (si on souhaite manipuler des minutes, il faudra multiplier par 60 et de même pour les heures : un incrément de 120 correspondra à 2 minutes et un incrément de 7200 correspondra à 2 heures). +Cet attribut ne semble pas avoir d'effet pour Edge. -Cet attribut semble n'avoir aucun impact pour Firefox ou Edge voire empêche la validation de fonctionner (voir la prochaine section). +> **Note :** L'utilisation de `step` semble causer des problèmes de validation (voir la section qui suit). ## Validation -Par défaut `<input type="time">` ne valide pas les valeurs saisies. En effet, l'interface utilisateur ne permet de choisir une valeur exotique (par exemple 36:87). +Par défaut `<input type="time">` ne valide pas les valeurs saisies. En effet, l'interface utilisateur ne permet de choisir une valeur exotique (par exemple `36:87`). Il faut toutefois faire attention à une saisie de la valeur autrement qu'avec l'interface du navigateur et au cas où la valeur est la chaîne de caractères vide (`""`). ### Indiquer une heure maximale et minimale -Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de réduire la plage horaire valide pendant laquelle l'utilisateur peut sélectionner une heure. Dans l'exemple suivant, l'utilisateur peut saisir une heure minimum de `12:00` et une heure maximum de `18:00`: +Les attributs [`min`](/fr/docs/Web/HTML/Element/Input#attr-min) et [`max`](/fr/docs/Web/HTML/Element/Input#attr-max) permettent de réduire la plage horaire valide pendant laquelle on peut sélectionner une heure. Dans l'exemple suivant, on peut saisir une heure minimum de `12:00` et une heure maximum de `18:00` : ```html <form> @@ -186,9 +233,9 @@ Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input") </form> ``` -{{EmbedLiveSample('Indiquer_une_heure_maximale_et_minimale', 600, 40)}} +{{EmbedLiveSample('', 600, 100)}} -Voici la feuille de style CSS utilisée dans l'exemple précédent. On utilise les pseudos-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que la valeur saisie est valide ou non. Les icônes qui indiquent cette validité ont été placées dans un élément {{htmlelement("span")}} à part car Chrome ne permet pas de placer du contenu généré dans le contrôle. +Voici la feuille de style CSS utilisée dans l'exemple précédent. On utilise les pseudo-classes [`:valid`](/fr/docs/Web/CSS/:valid) et [`:invalid`](/fr/docs/Web/CSS/:invalid) afin de mettre en forme le contrôle selon que la valeur saisie est valide ou non. Les icônes qui indiquent cette validité ont été placées dans un élément [`<span>`](/fr/docs/Web/HTML/Element/span) à part car Chrome ne permet pas de placer du contenu généré dans le contrôle. ```css div { @@ -217,21 +264,39 @@ input:valid+span:after { } ``` -Avec ce fragment de code HTML : +Avec ce fragment de code HTML : -- Seules les heures comprises entre 12:00 et 18:00 sont affichées comme étant valides (les heures avant et après seront invalides). +- Seules les heures comprises entre `12:00` et `18:00` sont affichées comme étant valides (les heures avant et après seront invalides). - Selon le navigateur utilisé, il peut même être impossible de sélectionner une heure en dehors de la plage restreinte (avec Edge notamment). +#### Avoir un minimum et un maximum autour de minuit + +En définissant un attribut [`min`](/fr/docs/Web/HTML/Element/Input#attr-min) supérieur à [`max`](/fr/docs/Web/HTML/Element/Input#attr-max), l'intervalle de temps valide se situera autour de minuit. Cette fonctionnalité n'est pas valable pour les autres champs de formulaire. Et bien [qu'elle fasse partie de la spécification HTML](https://html.spec.whatwg.org/C/#has-a-reversed-range), elle n'est pas prise en charge de façon universelle. La prise en charge pour les navigateurs basés sur Chrome a démarré à la version 82, Firefox l'a ajouté à la version 76 et Safari ne l'implémente pas (au moins jusqu'à la version 14.1). Pour déterminer la prise en charge, vous pouvez utiliser le fragment de code suivant : + +```js +const input = document.createElement('input'); +input.type = 'time'; +input.min = '23:00'; +input.max = '01:00'; +input.value = '23:59'; + +if (input.validity.valid && input.type === 'time') { + // l'intervalle encadrant minuit est pris en charge +} else { + // l'intervalle encadrant minuit n'est pas pris en charge +} +``` + ### Rendre la saisie obligatoire -On peut également utiliseer l'attribut {{htmlattrxref("required", "input")}} afin que la saisie du champ soit obligatoire. Lorsque c'est le cas, les navigateurs afficheront un message d'erreur si l'utilisateur tente d'envoyer le formulaire sans avoir saisi de valeur (ou si celle-ci est en dehors de la plage indiquée). +On peut également utiliser l'attribut [`required`](/fr/docs/Web/HTML/Element/Input#attr-required) afin que la saisie du champ soit obligatoire. Lorsque c'est le cas, les navigateurs afficheront un message d'erreur si l'utilisatrice ou l'utilisateur tente d'envoyer le formulaire sans avoir saisi de valeur (ou si celle-ci est en dehors de la plage indiquée). -Prenons l'exemple suivant qui restreint la plage horaire sélectionnable et qui rend le champ obligatoire : +Prenons l'exemple suivant qui restreint la plage horaire sélectionnable et qui rend le champ obligatoire : ```html <form> <div> - <label for="appt-time">Veuillez choisir une heure de rendez-vous (horaires d'ouverture entre 12:00 et 18:00) : </label> + <label for="appt-time">Veuillez choisir une heure de rendez-vous (heures d'ouverture entre 12:00 et 18:00) : </label> <input id="appt-time" type="time" name="appt-time" min="12:00" max="18:00" required> <span class="validity"></span> @@ -242,23 +307,23 @@ Prenons l'exemple suivant qui restreint la plage horaire sélectionnable et qui </form> ``` -Si vous essayez de soumettre le formulaire sans avoir saisi de valeur (ou avec une heure en dehors des heures d'ouverture indiquées), le navigateur affichera une erreur. Vous pouvez manipuler le résultat obtenu : +Si vous essayez de soumettre le formulaire sans avoir saisi de valeur (ou avec une heure en dehors des heures d'ouverture indiquées), le navigateur affichera une erreur. Vous pouvez manipuler le résultat obtenu : -{{EmbedLiveSample('Rendre_la_saisie_obligatoire', 600, 120)}} +{{EmbedLiveSample('', 600, 120)}} -> **Attention :** Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses. +> **Attention :** Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour quelqu'un de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses. ## Gérer la prise en charge des navigateurs -Comme mentionné avant, un problème peut être l'hétérogénéité de la prise en charge des navigateurs : Safari ne prend pas en charge cette fonctionnalité sur les ordinateurs de bureau et les anciennes versions d'Internet Explorer n'implémentent pas cet élément. +Comme mentionné avant, un problème peut être l'hétérogénéité de la prise en charge des navigateurs : les anciennes versions de Safari ne prennent pas en charge cette fonctionnalité sur les ordinateurs de bureau et les anciennes versions d'Internet Explorer n'implémentent pas cet élément. -Pour les plateformes mobiles (Android et iOS par exemple), les systèmes d'exploitation fournissent des interfaces particulièrement adaptées aux environnements tactiles. Voici par exemple le sélecteur d'heure pour Chrome sur Android : +Pour les plateformes mobiles (Android et iOS par exemple), les systèmes d'exploitation fournissent des interfaces particulièrement adaptées aux environnements tactiles. Voici par exemple le sélecteur d'heure pour Chrome sur Android :  Lorsqu'un navigateur ne prend pas en charge ce type d'élément, il utilise un champ texte (`<input type="text">`) à la place. Mais cela crée des problèmes, tant au niveau de l'interface utilisateur que de la cohérence des données et du format. -C'est ce problème de format qui est le plus important. Comme nous l'avons expliqués plus haut, un champ`time` permet d'obtenir un valeur normalisée, respectant le format `hh:mm`. Avec un champ texte, le navigateur ne reconnaît pas de format particulier pour l'heure et les utilisateurs peuvent employer différentes formes pour décrire l'heure voulue : +C'est ce problème de format qui est le plus important. Comme nous l'avons expliqué plus haut, un champ `time` permet d'obtenir une valeur normalisée, respectant le format `hh:mm`. Avec un champ texte, le navigateur ne reconnaît pas de format particulier pour l'heure et les personnes peuvent employer différentes formes pour décrire l'heure voulue : - `3.00 pm` - `3:00pm` @@ -266,7 +331,7 @@ C'est ce problème de format qui est le plus important. Comme nous l'avons expli - `3h de l'après-midi` - etc. -Une façon de contourner ce problème consiste à utiliser l'attribut {{htmlattrxref("pattern", "input")}} sur le champ `time`. Bien que le champ `time` n'utilise pas cet attribut, le champ texte pourra l'utiliser. Vous pouvez par exemple tester ce fragment de code dans un navigateur qui ne prend pas en charge `<input type="time">` : +Une façon de contourner ce problème consiste à utiliser l'attribut [`pattern`](/fr/docs/Web/HTML/Element/Input#attr-pattern) sur le champ `time`. Bien que le champ `time` n'utilise pas cet attribut, le champ texte pourra l'utiliser. Vous pouvez par exemple tester ce fragment de code dans un navigateur qui ne prend pas en charge `<input type="time">` : ```html <form> @@ -283,11 +348,11 @@ Une façon de contourner ce problème consiste à utiliser l'attribut {{htmlattr </form> ``` -{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}} +{{EmbedLiveSample('', 600, 120)}} -Si on essaie d'envoyer une valeur qui ne respecte pas le bon format, le navigateur affichera un message d'erreur et mettra en évidence le champ si celui-ci ne suit pas la forme `nn:nn` avec `n` un nombre entre 0 et 9. Bien entendu, cela n'empêche pas de saisir des heures invalides mais qui respectent ce format. +Si on essaie d'envoyer une valeur qui ne respecte pas le bon format, le navigateur affichera un message d'erreur et mettra en évidence le champ si celui-ci ne suit pas la forme `nn:nn` avec `n` qui est un chiffre entre 0 et 9. Bien entendu, cela n'empêche pas de saisir des heures invalides mais qui respectent ce format. -De plus, comment communiquer à l'utilisateur le format dans lequel saisir l'heure ? +De plus, comment communiquer à la personne le format dans lequel saisir l'heure ? Il reste donc un problème. @@ -318,15 +383,15 @@ input:valid+span:after { } ``` -Actuellement, la meilleure façon de gérer ce type de saisie pour les différents navigateurs consiste à utiliser deux contrôles (le premier pour la saisie des heures et le second pour la saisie des minutes) avec deux éléments {{htmlelement("select")}} (cf. ci-après) ou d'utiliser certaines bibliothèques JavaScript telles que [jQuery date picker](https://jqueryui.com/datepicker/) ou encore [jQuery timepicker plugin](http://timepicker.co/). +Actuellement, la meilleure façon de gérer ce type de saisie pour les différents navigateurs consiste à utiliser deux contrôles (le premier pour la saisie des heures et le second pour la saisie des minutes) avec deux éléments [`<select>`](/fr/docs/Web/HTML/Element/select) (cf. ci-après) ou d'utiliser certaines bibliothèques JavaScript telles que [le plugin de sélecteur d'heure (<i lang="en">timepicker</i>) jQuery](https://timepicker.co/). ## Exemples -Dans l'exemple qui suit, on crée deux ensembles d'éléments : un sélecteur natif avec `<input type="time">` et un ensemble de deux éléments {{htmlelement("select")}} qui permettent de choisir des heures et des minutes dans les navigateurs qui ne prennent pas en charge le contrôle natif. +Dans l'exemple qui suit, on crée deux ensembles d'éléments : un sélecteur natif avec `<input type="time">` et un ensemble de deux éléments [`<select>`](/fr/docs/Web/HTML/Element/select) qui permettent de choisir des heures et des minutes dans les navigateurs qui ne prennent pas en charge le contrôle natif. -{{EmbedLiveSample('Exemples', 600, 140)}} +{{EmbedLiveSample('', 600, 140)}} -Voici le fragment HTML utilisé : +Voici le fragment HTML utilisé : ```html <form> @@ -383,16 +448,16 @@ input:valid+span:after { } ``` -La partie la plus intéressante du code est celle qui permet de détecter si le contrôle natif est pris en charge. Pour cela, on crée un nouvel élément {{htmlelement("input")}} et on modifie son attribut `type` afin qu'il vaille `time`, immédiatement après, on vérifie la valeur du type. Si le navigateur ne prend pas en charge l'élément, il renverra `text` car l'élément a été transformé en `<input type="text">`, dans ce cas, on masque le sélecteur natif et on affiche l'interface alternative avec les deux éléments {{htmlelement("select")}}. +La partie la plus intéressante du code est celle qui permet de détecter si le contrôle natif est pris en charge. Pour cela, on crée un nouvel élément [`<input>`](/fr/docs/Web/HTML/Element/Input) et on modifie son attribut `type` afin qu'il vaille `time`, immédiatement après, on vérifie la valeur du type. Si le navigateur ne prend pas en charge l'élément, il renverra `text`, car l'élément a été transformé en `<input type="text">`, dans ce cas, on masque le sélecteur natif et on affiche l'interface alternative avec les deux éléments [`<select>`](/fr/docs/Web/HTML/Element/select). ```js // On définit quelques variables -var nativePicker = document.querySelector('.nativeTimePicker'); -var fallbackPicker = document.querySelector('.fallbackTimePicker'); -var fallbackLabel = document.querySelector('.fallbackLabel'); +let nativePicker = document.querySelector('.nativeTimePicker'); +let fallbackPicker = document.querySelector('.fallbackTimePicker'); +let fallbackLabel = document.querySelector('.fallbackLabel'); -var hourSelect = document.querySelector('#hour'); -var minuteSelect = document.querySelector('#minute'); +let hourSelect = document.querySelector('#hour'); +let minuteSelect = document.querySelector('#minute'); // On cache le sélecteur alternatif fallbackPicker.style.display = 'none'; @@ -400,8 +465,14 @@ fallbackLabel.style.display = 'none'; // On teste si un nouveau contrôle time // est transformé en text -var test = document.createElement('input'); -test.type = 'time'; +let test = document.createElement('input'); + +try { + test.type = 'time'; +} catch (e) { + console.log(e.description); +} + // Si c'est le cas… if(test.type === 'text') { // On masque le sélecteur natif et @@ -420,8 +491,8 @@ function populateHours() { // On ajoute les heures dans // l'élément <select> avec les 6 // heures ouvertes - for(var i = 12; i <= 18; i++) { - var option = document.createElement('option'); + for(let i = 12; i <= 18; i++) { + let option = document.createElement('option'); option.textContent = i; hourSelect.appendChild(option); } @@ -429,8 +500,8 @@ function populateHours() { function populateMinutes() { // On génère 60 options pour 60 minutes - for(var i = 0; i <= 59; i++) { - var option = document.createElement('option'); + for(let i = 0; i <= 59; i++) { + let option = document.createElement('option'); option.textContent = (i < 10) ? ("0" + i) : i; minuteSelect.appendChild(option); } @@ -439,75 +510,31 @@ function populateMinutes() { // avec la fonction suivante, si l'heure vaut 18 // on s'assure que les minutes vaillent 00 // afin de ne pas pouvoir choisir d'heure passé 18:00 - function setMinutesToZero() { - if(hourSelect.value === '18') { - minuteSelect.value = '00'; - } - } - - hourSelect.onchange = setMinutesToZero; - minuteSelect.onchange = setMinutesToZero; -``` - -## Résumé technique +function setMinutesToZero() { + if(hourSelect.value === '18') { + minuteSelect.value = '00'; + } +} -<table class="properties"> - <tbody> - <tr> - <td><strong>{{anch("Valeur")}}</strong></td> - <td> - Une chaîne de caractères ({{domxref("DOMString")}}) qui - représente un heure (avec des minutes) ou bien une chaîne de caractères - vide. - </td> - </tr> - <tr> - <td><strong>Évènements</strong></td> - <td> - {{domxref("HTMLElement/change_event", "change")}} et - {{domxref("HTMLElement/input_event", "input")}} - </td> - </tr> - <tr> - <td><strong>Attributs pris en charge</strong></td> - <td> - {{htmlattrxref("autocomplete", "input")}}, - {{htmlattrxref("list", "input")}}, - {{htmlattrxref("readonly", "input")}} et - {{htmlattrxref("step", "input")}}. - </td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td> - <code>value</code>, <code>valueAsDate</code>, - <code>valueAsNumber</code>, <code>list</code>. - </td> - </tr> - <tr> - <td><strong>Méthodes</strong></td> - <td> - {{domxref("HTMLInputElement.select", "select()")}}, - {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, - {{domxref("HTMLInputElement.stepUp", "stepUp()")}}. - </td> - </tr> - </tbody> -</table> +hourSelect.onchange = setMinutesToZero; +minuteSelect.onchange = setMinutesToZero; +``` ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'forms.html#time-state-(type=time)', '<input type="time">')}} | {{Spec2('HTML WHATWG')}} | | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("html.elements.input.input-time")}} +{{Compat}} ## Voir aussi -- L'élément générique {{HTMLElement("input")}} ainsi que l'interface DOM {{domxref("HTMLInputElement")}} qui peut être utilisée pour manipuler l'élément -- [Les formats de date et d'heure utilisés en HTML](/fr/docs/Web/HTML/Formats_date_heure_HTML) -- [Un tutoriel pour les sélecteurs de date et d'heure](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#Sélection_de_date_et_d'horaire) -- [`<input type="datetime-local">`](/fr/docs/Web/HTML/Element/input/datetime-local), [`<input type="date">`](/fr/docs/Web/HTML/Element/input/date), [`<input type="week">`](/fr/docs/Web/HTML/Element/input/week), and [`<input type="month">`](/fr/docs/Web/HTML/Element/input/month) +- L'élément générique [`<input>`](/fr/docs/Web/HTML/Element/Input) ainsi que l'interface DOM [`HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement) qui permet de le manipuler +- [Les formats de date et d'heure utilisés en HTML](/fr/docs/Web/HTML/Date_and_time_formats) +- [Un tutoriel pour les sélecteurs de date et d'heure](/fr/docs/Learn/Forms/Basic_native_form_controls#sélection_de_date_et_heure) +- [`<input type="datetime-local">`](/fr/docs/Web/HTML/Element/input/datetime-local) +- [`<input type="date">`](/fr/docs/Web/HTML/Element/input/date) +- [`<input type="month">`](/fr/docs/Web/HTML/Element/input/month) +- [`<input type="week">`](/fr/docs/Web/HTML/Element/input/week) +- [Compatibilité des propriétés CSS](/fr/docs/Learn/Forms/Property_compatibility_table_for_form_controls) diff --git a/files/fr/web/html/element/input/url/index.md b/files/fr/web/html/element/input/url/index.md index af6b05d62e..1482f538c3 100644 --- a/files/fr/web/html/element/input/url/index.md +++ b/files/fr/web/html/element/input/url/index.md @@ -1,123 +1,173 @@ --- title: <input type="url"> -slug: Web/HTML/Element/Input/url -tags: - - Formulaire - - HTML - - Input - - Reference +slug: Web/HTML/Element/input/url translation_of: Web/HTML/Element/input/url +browser-compat: html.elements.input.input-url --- -{{HTMLRef}} +{{HTMLRef("Input_types")}} -Les éléments {{HTMLElement("input")}} dont l'attribut `type` vaut **`"url"`** sont employées afin de permettre à un utilisateur de saisir ou d'éditer une URL. +Les éléments [`<input>`](/fr/docs/Web/HTML/Element/Input) dont l'attribut `type` vaut **`url`** sont employées afin de permettre à une utilisatrice ou un utilisateur de saisir ou d'éditer une URL. {{EmbedInteractiveExample("pages/tabbed/input-url.html", "tabbed-shorter")}} -La valeur saisie est automatiquement validée par le navigateur qui vérifie qu'elle est vide ou formatée correctement avant que le formulaire puisse être envoyé. Les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} sont appliquées auomatiquement selon le cas de figure. +La valeur saisie est automatiquement validée par le navigateur qui vérifie qu'elle est vide ou formatée correctement avant que le formulaire puisse être envoyé. Les pseudo-classes [`:valid`](/fr/docs/Web/CSS/:valid) et [`:invalid`](/fr/docs/Web/CSS/:invalid) sont appliquées automatiquement selon le cas de figure. -> **Note :** Les navigateurs qui ne prennent pas en charge le type`"url"` utiliseront à la place un élément {{HTMLElement("input/text", "text")}}. +> **Note :** Les navigateurs qui ne prennent pas en charge le type `url` utiliseront à la place un élément [`<input type="text">`](/fr/docs/Web/HTML/Element/Input/text). + +<table class="properties"> + <tbody> + <tr> + <td><strong><a href="#valeur">Valeur</a></strong></td> + <td>Une chaîne de caractères (<a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>) qui représente une URL ou qui est vide.</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td> + <a href="/fr/docs/Web/API/HTMLElement/change_event"><code>change</code></a> et <a href="/fr/docs/Web/API/HTMLElement/Input_event"><code>input</code></a> + </td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td> + <a href="/fr/docs/Web/HTML/Element/Input#attr-autocomplete"><code>autocomplete</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-list"><code>list</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-maxlength"><code>maxlength</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-minlength"><code>minlength</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-pattern"><code>pattern</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-placeholder"><code>placeholder</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-readonly"><code>readonly</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-required"><code>required</code></a> et <a href="/fr/docs/Web/HTML/Element/Input#attr-size"><code>size</code></a> + </td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td> + <code>list</code>, <code>value</code>, <code>selectionEnd</code>, <code>selectionDirection</code> + </td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td> + <a href="/fr/docs/Web/API/HTMLInputElement/select"><code>select()</code></a>, <a href="/fr/docs/Web/API/HTMLInputElement/setRangeText"><code>setRangeText()</code></a> et <a href="/fr/docs/Web/API/HTMLInputElement/setSelectionRange"><code>setSelectionRange()</code></a>. + </td> + </tr> + </tbody> +</table> ## Valeur -La valeur de l'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères ({{domxref("DOMString")}}) dont la valeur est automatiquement vérifiée afin de s'assurer que sa syntaxe est bien celle d'une URL. De façon plus précise, seuls deux formats sont autorisés : +La valeur de l'attribut [`value`](/fr/docs/Web/HTML/Element/Input#attr-value) contient une chaîne de caractères ([`DOMString`](/fr/docs/Web/API/DOMString)) dont la valeur est automatiquement vérifiée afin de s'assurer que sa syntaxe est bien celle d'une URL. De façon plus précise, seuls deux formats sont autorisés : -1. Une chaîne de caractères vide ("") qui indique que l'utilisateur n'a pas saisi de valeur ou que la valeur a été retirée. -2. Une seule URL bien formée. Cela ne signifie pas nécessairement que l'adresse existe mais qu'elle est formatée correctement. Autrement dit, la chaîne de caractères respecte la forme `"schema://restedelurl"`. +1. Une chaîne de caractères vide (`""`) qui indique que l'utilisatrice ou l'utilisateur n'a pas saisi de valeur ou que la valeur a été retirée. +2. Une seule URL bien formée. Cela ne signifie pas nécessairement que l'adresse existe mais qu'elle est formatée correctement. Autrement dit, la chaîne de caractères respecte la forme `schema://restedelurl`. -Voir {{anch("Validation")}} pour plus de détails sur le format des URL et leur validation. +Voir [la section sur la validation](#validation) pour plus de détails sur le format des URL et leur validation. ## Attributs supplémentaires -En complément des attributs qui fonctionnent pour tous les types d'éléments {{HTMLElement("input")}}, les champs de saisie d'URL prennent en charge les attributs suivants : +En complément des attributs qui fonctionnent pour tous les types d'éléments [`<input>`](/fr/docs/Web/HTML/Element/Input), les champs de saisie d'URL prennent en charge les attributs suivants. + +### `list` -| Attribut | Description | -| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------ | -| `{{anch("maxlength")}}` | La longueur maximale de l'URL, exprimée en nombre de caractères UTF-16, afin qu'elle soit considérée comme valide. | -| `{{anch("minlength")}}` | La longueur minimale de l'URL, exprimée en nombre de caractères UTF-16, afin qu'elle soit considérée comme valide. | -| `{{anch("pattern")}}` | Une expression rationnelle que doit respecter la valeur afin d'être considérée comme valide. | -| `{{anch("placeholder")}}` | Une valeur d'exemple à afficher lorsqu'aucune valeur n'est saisie dans le champ. | -| `{{anch("readonly")}}` | Un attribut booléen qui indique si le champ est en lecture seule et ne peut être édité par l'utilisateur. | -| `{{anch("size")}}` | Le nombre de caractères qui doivent être visibles à l'écran. | -| `{{anch("spellcheck")}}` | Une chaîne de caractères qui contrôle si la vérification orthographique doit être activée. | +La valeur de cet attribut est l'identifiant ([`id`](/fr/docs/Web/API/Element/id)) d'un élément [`<datalist>`](/fr/docs/Web/HTML/Element/datalist) situé dans le même document. L'élément [`<datalist>`](/fr/docs/Web/HTML/Element/datalist) fournit une liste de valeurs prédéfinies qui doivent être suggérées lors de la saisie dans le champ. Toute valeur de cette liste qui n'est pas compatible avec le type de champ ([`type`](/fr/docs/Web/HTML/Element/Input#attr-type)) ne sera pas incluse dans les suggestions. Les valeurs fournies sont des suggestions et pas des contraintes : il reste tout à fait possible de choisir une valeur différente que celles de la liste. -### {{htmlattrdef("maxlength")}} +### `maxlength` -Le nombre maximal de caractères (en nombre de points de code UTF-16) qui peuvent être saisis dans le champ de l'URL. Cette valeur doit être un entier positif ou nul. Si aucune valeur n'est fournie pour `maxlength` ou qu'une valeur invalide est fournie, le champ n'aura pas de longueur maximale. La valeur de cet attribut doit être supérieure ou égale à celle de l'attribut `minlength`. +Le nombre maximum de caractères (exprimé en nombre de points de code UTF-16) qu'il est possible de saisir dans le champ. Cette valeur doit être un entier positif ou nul. Si aucune valeur n'est fournie pour `maxlength` ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à `minlength`. -La valeur [ne respectera pas la validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) si la longueur du texte saisi est supérieure à cet attribut. +Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/Constraint_validation) si la longueur du texte dépasse `maxlength` en nombre de points de code UTF-16. La validation de contrainte est uniquement appliquée lorsque la valeur est modifiée par l'utilisatrice ou l'utilisateur. -### {{htmlattrdef("minlength")}} +### `minlength` Le nombre minimal de caractères (en nombre de points de code UTF-16) qui doivent être saisis dans le champ de l'URL. Cette valeur doit être un entier positif ou nul. Si aucune valeur n'est fournie pour `minlength` ou qu'une valeur invalide est fournie, le champ n'aura pas de longueur minimale. La valeur de cet attribut doit être inférieure ou égale à celle de l'attribut `maxlength`. -La valeur [ne respectera pas la validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) si la longueur du texte saisi est inférieure à cet attribut. +La valeur [ne respectera pas la validation](/fr/docs/Web/Guide/HTML/Constraint_validation) si la longueur du texte saisi est inférieure à cet attribut. Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/Constraint_validation) si la longueur du texte dépasse `maxlength` en nombre de points de code UTF-16. La validation de contrainte est uniquement appliquée lorsque la valeur est modifiée par l'utilisatrice ou l'utilisateur. + +### `pattern` + +L'attribut `pattern`, lorsqu'il est utilisé, est une expression rationnelle qui impose un format à [`value`](/fr/docs/Web/HTML/Element/Input#attr-value), que cette dernière doit respecter afin que le champ soit [valide](/fr/docs/Web/Guide/HTML/Constraint_validation) . Le contenu de `pattern` doit être une expression rationnelle JavaScript valide (voir la documentation sur le type [`RegExp`](/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp) et [le guide sur les expressions rationnelles](/fr/docs/Web/JavaScript/Guide/Regular_Expressions). Le marqueur `'u'` est utilisé à la compilation de l'expression rationnelle afin que le motif soit traité comme une séquence de points de code Unicode et non ASCII. Il ne faut pas entourer l'expression de barres obliques. + +Si aucune expression rationnelle n'est fournie ou que celle-ci est invalide, aucune contrainte de format ne sera appliquée et cet attribut sera ignoré complètement. -### {{htmlattrdef("pattern")}} +> **Note :** On utilisera l'attribut [`title`](/fr/docs/Web/HTML/Element/Input#attr-title) pour définir le texte que la plupart des navigateurs afficheront comme bulle d'information afin d'expliquer les contraintes imposées par l'expression rationnelle. Il faut également inclure un texte explicatif à proximité du champ. -{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}} +Voir [la section ci-après sur le format](#utiliser_un_format_particulier) pour plus de détails et d'exemples. -Voir [la section ci-après sur le format](#format) pour plus de détails et d'exemples. +### `readonly` -{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}} +Un attribut booléen qui, s'il est présent, indique que le champ ne peut pas être édité dans le formulaire. La valeur du champ (portée par l'attribut `value`) peut toutefois être modifiée par du code JavaScript, qui changerait la propriété `value` rattachée à l'interface [`HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement). -{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}} +> **Note :** Un champ en lecture seule ne pouvant pas avoir de valeur, l'attribut `required` n'a pas d'effet particulier sur les champs pour lesquels `readonly` est appliqué. -{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}} +### `size` -{{page("/fr/docs/Web/HTML/Element/input/text", "spellcheck", 0, 1, 2)}} +L'attribut `size` est une valeur numérique qui indique la largeur idéale du champ, exprimée en nombre de caractères. Sa valeur doit être un nombre supérieur à `0` et la valeur par défaut est `20`. Comme les caractères peuvent avoir une largeur différente entre eux, on ne doit pas s'attendre à ce que cette taille permette exactement de voir les n caractères, le contrôle résultant pourra être plus étroit ou plus large que le nombre indiqué en fonction des caractères saisis et de la police (voir la propriété CSS [`font`](/fr/docs/Web/CSS/font)) utilisée. + +Cet attribut _n'impose pas_ de limite sur le nombre de caractères qui peuvent être saisis. Il indique uniquement, de façon approximative, le nombre de caractères visibles au même moment. Pour imposer une contrainte de taille sur la longueur maximale de la valeur saisissable, on pourra utiliser l'attribut [`maxlength`](#maxlength). + +### `spellcheck` + +`spellcheck` est un attribut universel qui est utilisé afin d'indiquer si la vérification orthographique doit être activée sur un élément. Il peut être utilisé sur n'importe quel contenu éditable. On considère ici les aspects spécifiques de `spellcheck` sur les éléments [`<input>`](/fr/docs/Web/HTML/Element/Input). Les valeurs autorisées pour `spellcheck` sont : + +- `false` + - : La vérification orthographique est désactivée pour l'élément. +- `true` + - : La vérification orthographique est activée pour l'élément. +- `""` (la chaîne vide) ou aucune valeur + - : C'est le comportement par défaut de l'élément qui est utilisé pour déterminer si la vérification est active ou non. Cela peut être déduit de la valeur `spellcheck` sur un élément parent ou d'autres facteurs. + +Un champ de saisi peut avoir la vérification orthographique activée s'il n'utilise pas l'attribut [`readonly`](#readonly) et qu'il n'est pas désactivé. + +La valeur renvoyée par la lecture de `spellcheck` peut ne pas refléter l'état réel de la vérification orthographique pour le contrôle (par exemple si des préférences au sein [de l'agent utilisateur](/fr/docs/Glossary/User_agent) surchargent ce paramètre. ## Attributs non-standard Il est possible (mais déconseillé) d'utiliser ces attributs non-standard sur les champs de saisie d'URL. -| Attribut | Description | -| ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `{{anch("autocorrect")}}` | Autorise ou non la correction automatique lors de l'édition de ce champ. **Uniquement pris en charge par Safari.** | -| `{{anch("mozactionhint")}}` | Une chaîne de caractères qui indique le type d'action qui sera effectuée lorsque l'utilisateur appuiera sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition du champ. Cet attribut est destiné à fournir un libellé équivoque pour la touche du clavier virtuel présenté à l'utilisateur. **Uniquement pris en charge par Firefox pour Android.** | +### `autocorrect` + +Un attribut spécifique à Safari qui indique si la correction automatique doit être activée (ou non) lors de l'édition manuelle de ce champ. Les valeurs autorisées sont : + +- `on` + - : La correction automatique est activée et les remplacements automatiques, si certains sont configurés, sont effectués. +- `off` + - : La correction automatique et les remplacements sont désactivés. -### {{htmlattrdef("autocorrect")}} {{non-standard_inline}} +### `mozactionhint` -{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}} +Un attribut spécifique à Mozilla, pris en charge par Firefox sur Android qui fournit une indication sur le type d'action réalisée lors de l'appui sur <kbd>Entrée</kbd> ou <kbd>Retour</kbd> pendant l'édition du champ. Cette information est utilisée pour décider du libellé à afficher sur la touche <kbd>Entrée</kbd> du clavier virtuel. -### {{htmlattrdef("mozactionhint")}} {{non-standard_inline}} +> **Note :** [Ce comportement a été standardisé](https://html.spec.whatwg.org/#input-modalities:-the-enterkeyhint-attribute) avec l'attribut universel [`enterkeyhint`](/fr/docs/Web/HTML/Global_attributes#attr-enterkeyhint), mais ce dernier n'est pas encore largement implémenté. En ce qui concerne l'implémentation dans Firefox, voir [le bug 1490661](https://bugzilla.mozilla.org/show_bug.cgi?id=1490661). -{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}} +Les valeurs autorisées sont : `go`, `done`, `next`, `search`, et `send`. Le navigateur décide alors, en fonction de cette indication, du libellé à appliquer sur la touche <kbd>Entrée</kbd>. ## Utiliser des champs de saisie d'URL -Lorsqu'on crée un champ avec un attribut `type` qui vaut `"url"`, on obtient une validation automatique qui vérifie que le format de la valeur respecte bien celui d'une URL. Cela permet par exemple d'éviter des cas où des utilisateurs laissent une coquille dans la saisie d'une adresse d'un site web. +Lorsqu'on crée un champ avec un attribut `type` qui vaut `url`, on obtient une validation automatique qui vérifie que le format de la valeur respecte bien celui d'une URL. Cela permet, par exemple, d'éviter des cas où des utilisatrices ou utilisateurs laissent une coquille dans la saisie d'une adresse d'un site web. -Toutefois, ce mécanisme ne vérifie pas que l'URL saisie existe bien ou correspond à l'utilisateur. Seule une vérification de format est effectuée. +Toutefois, ce mécanisme ne vérifie pas que l'URL saisie existe bien. Seule une vérification de format est effectuée. -> **Attention :** Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses. +> **Attention :** Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour quelqu'un de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses. ### Un simple champ -Actuellement, l'ensemble des navigateurs implémentent ce type de champ comme un champ texte qui dispose de fonctionnalités de validation basiques. Dans sa forme la plus simple, un champ de saisie d'URL ressemblera à : +Actuellement, l'ensemble des navigateurs implémentent ce type de champ comme un champ texte qui dispose de fonctionnalités de validation basiques. Dans sa forme la plus simple, un champ de saisie d'URL ressemblera à : ```html <input id="monURL" name="monURL" type="url"> ``` -{{EmbedLiveSample('Un_simple_champ', 600, 40)}} +{{EmbedLiveSample('', 600, 40)}} -La valeur du champ est considérée valide lorsqu'elle est vide ou qu'il s'agit d'une URL correctement formatée, autrement elle est invalide. Si on ajoute l'attribut {{htmlattrxref("required", "input")}}, la valeur vide n'est plus valide, il est nécessaire de saisir une valeur. +La valeur du champ est considérée valide lorsqu'elle est vide ou qu'il s'agit d'une URL correctement formatée, autrement elle est invalide. Si on ajoute l'attribut [`required`](/fr/docs/Web/HTML/Element/Input#attr-required), la valeur vide n'est plus valide, il est nécessaire de saisir une valeur. -Ainsi, si l'utilisateur saisit l'URL `http://www.example.com`, voici ce qui sera envoyé vers le serveur : `monURL=http%3A%2F%2Fwww.example.com` (on notera la façon dont certains caractères sont échappés). +Ainsi, si l'utilisatrice ou l'utilisateur saisit l'URL `http://www.example.com`, voici ce qui sera envoyé vers le serveur : `monURL=http%3A%2F%2Fwww.example.com` (on notera la façon dont certains caractères sont échappés). -### Textes indicatifs _- placeholders_ +### Textes indicatifs (<i lang="en">placeholders</i>) -Il est parfois utile de fournir une indication sur le type de donnée attendu. Sur les pages pour lesquelles la place est restreinte, on ne peut pas se servir de l'étiqutte du champ. On peut alors utiliser un texte indicatif qui apparaît lorsque la valeur du champ est vide et qui est retiré dès que l'utilisateur saisit quelqu chose. Pour cela, on utilise l'attribut `placeholder`. +Il est parfois utile de fournir une indication sur le type de donnée attendu. Sur les pages pour lesquelles la place est restreinte, on ne peut pas se servir de l'étiquette du champ. On peut alors utiliser un texte indicatif qui apparaît lorsque la valeur du champ est vide et qui est retiré dès que l'utilisatrice ou l'utilisateur saisit quelqu chose. Pour cela, on utilise l'attribut `placeholder`. -Dans l'exemple qui suit, le contrôle contient le texte indicatif `"http://www.example.com"`. Dans le résultat, vous pouvez voir comment ce texte disparaît/réapparaît lorsqu'on saisit une valeur dans le contrôle. +Dans l'exemple qui suit, le contrôle contient le texte indicatif `http://www.example.com`. Dans le résultat, vous pouvez voir comment ce texte disparaît/réapparaît lorsqu'on saisit une valeur dans le contrôle. ```html <input id="monURL" name="monURL" type="url" placeholder="http://www.example.com"> ``` -{{EmbedLiveSample('Textes_indicatifs_-_placeholders', 600, 40)}} +{{EmbedLiveSample('', 600, 40)}} ### Contrôler la taille du champ @@ -125,18 +175,18 @@ Il est possible de contrôler la taille physique de la boîte utilisée pour le #### La taille physique -C'est l'attribut {{htmlattrxref("size", "input")}} qui permet de contrôler la taille de la boîte utilisée. La valeur de cet attribut correspond au nombre de caractères qui seront affichés en même temps dans la boîte. Dans l'exemple suivant, on souhaite que la boîte de saisie mesure 30 caractères de large : +C'est l'attribut [`size`](/fr/docs/Web/HTML/Element/Input#attr-size) qui permet de contrôler la taille de la boîte utilisée. La valeur de cet attribut correspond au nombre de caractères qui seront affichés en même temps dans la boîte. Dans l'exemple suivant, on souhaite que la boîte de saisie mesure 30 caractères de large : ```html <input id="monURL" name="monURL" type="url" size="30"> ``` -{{EmbedLiveSample('La_taille_physique', 600, 40)}} +{{EmbedLiveSample('', 600, 40)}} #### La longueur de la valeur -L'attribut `size` ne limite pas la valeur qui peut être saisie mais uniquement l'affichage de celle-ci. Pour indiquer une longueur (exprimée en nombre de caractères) minimale d'URL à saisir, on pourra utiliser l'attribut {{htmlattrxref("minlength", "input")}}. De même, l'attribut {{htmlattrxref("maxlength", "input")}} indique la longueur maximale d'une URL qui peut être saisie dans le contrôle. +L'attribut `size` ne limite pas la valeur qui peut être saisie mais uniquement l'affichage de celle-ci. Pour indiquer une longueur (exprimée en nombre de caractères) minimale d'URL à saisir, on pourra utiliser l'attribut [`minlength`](/fr/docs/Web/HTML/Element/Input#attr-minlength). De même, l'attribut [`maxlength`](/fr/docs/Web/HTML/Element/Input#attr-maxlength) indique la longueur maximale d'une URL qui peut être saisie dans le contrôle. Dans l'exemple qui suit, on affiche une boîte de saisie qui mesure 30 caractères de large et on souhaite que l'URL soit plus longue que 10 caractères et moins longue que 80. @@ -145,54 +195,79 @@ Dans l'exemple qui suit, on affiche une boîte de saisie qui mesure 30 caractèr size="30" minlength="10" maxlength="80"> ``` -{{EmbedLiveSample("La_longueur_de_la_valeur", 600, 40)}} +{{EmbedLiveSample("", 600, 40)}} -> **Note :** Ces attributs jouent un rôle lors de la validation. Si la valeur saisie est plus courte que la longueur minimale indiquée ou plus grande que la longueur maximale indiquée, alors elle seera considérée comme invalide. De plus, la plupart des navigateurs ne permettent pas de saisir une valeur plus grande que la longueur maximale indiquée avec `maxlength`. +> **Note :** Ces attributs jouent un rôle lors de la validation. Si la valeur saisie est plus courte que la longueur minimale indiquée ou plus grande que la longueur maximale indiquée, alors elle sera considérée comme invalide. De plus, la plupart des navigateurs ne permettent pas de saisir une valeur plus grande que la longueur maximale indiquée avec `maxlength`. ### Fournir des valeurs par défaut -On peut fournir une valeur par défaut grâce à l'attribut {{htmlattrxref("value", "input")}} : +#### Fournir une valeur par défaut avec l'attribut `value` + +On peut fournir une valeur par défaut grâce à l'attribut [`value`](/fr/docs/Web/HTML/Element/Input#attr-value) : ```html <input id="monURL" name="monURL" type="url" value="http://www.example.com"> ``` -{{EmbedLiveSample("Fournir_des_valeurs_par_défaut", 600, 40)}} +{{EmbedLiveSample("", 600, 40)}} #### Fournir des suggestions -On peut également fournir une liste d'options parmi lesquelles l'utilisateur peut choisir via l'attribut {{htmlattrxref("list", "input")}}. Cette liste ne limite pas l'utilisateur à ces choix mais permet de choisir certaines URL fréquemment utilisées plus facilement. Cette liste peut également être utilisée par l'attribut {{htmlattrxref("autocomplete", "input")}}. La valeur de l'attribut `list` est un identifiant d'un élément {{HTMLElement("datalist")}} qui contient autant d'éléments {{HTMLElement("option")}} que de valeurs suggérées. La valeur de l'attribut `value` de chacun de ces éléments `<option>` correspondra à la valeur qui sera suggérée dans le champ de saisie. +On peut également fournir une liste d'options parmi lesquelles la personne saisissant une URL peut choisir via l'attribut [`list`](/fr/docs/Web/HTML/Element/Input#attr-list). Cette liste ne limite pas l'utilisatrice ou l'utilisateur à ces choix mais permet de choisir certaines URL fréquemment utilisées plus facilement. Cette liste peut également être utilisée par l'attribut [`autocomplete`](/fr/docs/Web/HTML/Element/Input#attr-autocomplete). La valeur de l'attribut `list` est un identifiant d'un élément [`<datalist>`](/fr/docs/Web/HTML/Element/datalist) qui contient autant d'éléments [`<option>`](/fr/docs/Web/HTML/Element/Option) que de valeurs suggérées. La valeur de l'attribut `value` de chacun de ces éléments `<option>` correspondra à la valeur qui sera suggérée dans le champ de saisie. ```html <input id="monURL" name="monURL" type="url" list="defaultURLs"> <datalist id="defaultURLs"> - <option value="http://www.example.com"> - <option value="https://www.example.com"> - <option value="http://www.example.org"> - <option value="https://www.example.org"> + <option value="https://developer.mozilla.org/"> + <option value="http://www.google.com/"> + <option value="http://www.microsoft.com/"> + <option value="https://www.mozilla.org/"> + <option value="http://w3.org/"> </datalist> ``` -{{EmbedLiveSample("Fournir_des_suggestions", 600, 40)}} +{{EmbedLiveSample("", 600, 40)}} + +Avec cet élément [`<datalist>`](/fr/docs/Web/HTML/Element/datalist) et les éléments [`<option>`](/fr/docs/Web/HTML/Element/Option) associés, le navigateur affichera les valeurs proposées sous la forme d'une liste déroulante (voire sous un autre format). Au fur et à mesure que la personne saisit dans le champ, la liste se réduit pour ne contenir que les valeurs correspondantes (et ce jusqu'à ce que la personne saisisse une autre valeur ou sélectionne une valeur parmi la liste). -Avec cet élément {{HTMLElement("datalist")}} et les éléments {{HTMLElement("option")}} associés, le navigateur affichera les valeurs proposées sous la forme d'une liste déroulante (voire sous un autre format). Au fur et à mesure que l'utilisateur saisit dans le champ, la liste se réduit pour ne contenir que les valeurs correspondantes (et ce jusqu'à ce que l'utilisateur saisisse une autre valeur ou sélectionne une valeur parmi la liste). + +#### Utiliser des libellés pour les valeurs suggérées + +Il est aussi possible d'inclure des attributs [`label`](/fr/docs/Web/HTML/Element/Option#attr-label) sur un ou plusieurs des éléments `<option>` afin de fournir un libellé textuel. Certains navigateurs n'afficheront que les libellés tandis que d'autres afficheront le libellé et l'URL. + +```html +<input id="monURL" name="monURL" type="url" + list="defaultURLs"> + +<datalist id="defaultURLs"> + <option value="https://developer.mozilla.org/" label="MDN Web Docs"> + <option value="http://www.google.com/" label="Google"> + <option value="http://www.microsoft.com/" label="Microsoft"> + <option value="https://www.mozilla.org/" label="Mozilla"> + <option value="http://w3.org/" label="W3C"> +</datalist> +``` + +{{EmbedLiveSample("", 600, 40)}} ## Validation -Il existe deux niveaux de validation pour les contrôles de type `"url"`. Tout d'abord, le contrôle natif, toujours présent qui s'asssure que la valeur correspond à une URL bien formée. Ensuite, on peut ajouter des options supplémentaires pour personnaliser le format de l'URL attendue. +Il existe deux niveaux de validation pour les contrôles de type `url`. Tout d'abord, le contrôle natif, toujours présent qui s'assure que la valeur correspond à une URL bien formée. Ensuite, on peut ajouter des options supplémentaires pour personnaliser le format de l'URL attendue. -> **Attention :** Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses. +> **Attention :** Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour quelqu'un de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses. ### Validation simple -Les navigateurs qui prennent en charge le type `"url"` fournissent automatiquement un mécanisme de validation pour s'assurer que la valeur saisie correspond à une URL bien formée. +Les navigateurs qui prennent en charge le type `url` fournissent automatiquement un mécanisme de validation pour s'assurer que la valeur saisie correspond à une URL bien formée. + +La syntaxe possible d'une URL est complexe. Elle est définie [par le standard évolutif WHATWG sur les URL](https://url.spec.whatwg.org/) et est décrite de façon plus accessible dans notre article [Qu'est-ce qu'une URL ?](/fr/docs/Learn/Common_questions/What_is_a_URL) ### Rendre le champ URL obligatoire -Comme vu ci-avant, on peut rendre la saisie de l'URL obligatoire avec l'attribut {{htmlattrxref("required", "input")}} : +Comme vu ci-avant, on peut rendre la saisie de l'URL obligatoire avec l'attribut [`required`](/fr/docs/Web/HTML/Element/Input#attr-required) : ```html <form> @@ -201,48 +276,48 @@ Comme vu ci-avant, on peut rendre la saisie de l'URL obligatoire avec l'attribut </form> ``` -{{EmbedLiveSample("Rendre_le_champ_URL_obligatoire", 600, 40)}} +{{EmbedLiveSample("", 600, 40)}} Vous pouvez essayer d'envoyer le formulaire précédent sans valeur saisie et voir le résultat obtenu. ### Utiliser un format particulier -S'il faut restreindre l'URL plus fortement, on peut utiliser l'attribut {{htmlattrxref("pattern", "input")}} afin d'indiquer une [expression rationnelle](/fr/docs/Web/JavaScript/Guide/Expressions_régulières) que la valeur saisie doit respecter afin d'être valide. +S'il faut restreindre l'URL plus fortement, on peut utiliser l'attribut [`pattern`](/fr/docs/Web/HTML/Element/Input#attr-pattern) afin d'indiquer une [expression rationnelle](/fr/docs/Web/JavaScript/Guide/Regular_Expressions) que la valeur saisie doit respecter afin d'être valide. -Prenons comme exemple la construction d'un formulaire de support pour les employés de MaBoîte Inc. Ce formulaire permet d'indiquer à un service une des pages du site interne qui pose problème. Dans l'exemple simplifié, l'utilisateur indique l'URL de la page problématique ainsi qu'un message descriptif. Ici, on souhaite que l'URL saisit ne soit valide que si elle correspond au domaine `maboite`. +Prenons comme exemple la construction d'un formulaire de support pour les employés de MaBoîte Inc. Ce formulaire permet d'indiquer à un service une des pages du site interne qui pose problème. Dans l'exemple simplifié, l'utilisatrice ou l'utilisateur indique l'URL de la page problématique ainsi qu'un message descriptif. Ici, on souhaite que l'URL saisit ne soit valide que si elle correspond au domaine `maboite`. -Les contrôles de type `"url"` utilisant la validation native pour vérifier que c'est une URL bien formée et une validation spécifique via l'attribut {{htmlattrxref("pattern", "input")}}, on peut implémenter cette contrainte facilement : +Les contrôles de type `url` utilisant la validation native pour vérifier que c'est une URL bien formée et une validation spécifique via l'attribut [`pattern`](/fr/docs/Web/HTML/Element/Input#attr-pattern), on peut implémenter cette contrainte facilement : ```css hidden div { margin-bottom: 10px; position: relative; - } - - input[type="number"] { - width: 100px; - } - - input + span { - padding-right: 30px; - } - - input:invalid+span:after { - position: absolute; content: '✖'; - padding-left: 5px; - } - - input:valid+span:after { - position: absolute; - content: '✓'; - padding-left: 5px; - } +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +} ``` ```html <form> <div> - <label for="myURL">Veuillez saisir l'adresse de la page problématique:</label> + <label for="myURL">Veuillez saisir l'adresse de la page problématique :</label> <input id="myURL" name="myURL" type="url" required pattern=".*\.maboite\..*" title="L'URL doit être sur le domaine maboite."> @@ -260,85 +335,36 @@ div { </form> ``` -{{EmbedLiveSample("Utiliser_un_format_particulier", 700, 150)}} +{{EmbedLiveSample("", 700, 150)}} -Si on étudie le contrôle, on peut voir qu'on commence par utiliser l'attribut {{htmlattrxref("required", "input")}} afin de rendre le champ obligatoire. +Si on étudie le contrôle, on peut voir qu'on commence par utiliser l'attribut [`required`](/fr/docs/Web/HTML/Element/Input#attr-required) afin de rendre le champ obligatoire. -Ensuite, on utilise l'attribut `pattern` avec l'expression rationnelle `".*\.maboite\..*"`. Cet expression rationnelle indique que la chaîne de caractères saisie doit contenir des caractères quelconques suivis d'un point, suivi de "maboite", suivi d'un point, suivi de n'importe quels caractères. +Ensuite, on utilise l'attribut `pattern` avec l'expression rationnelle `.*\.maboite\..*`. Cette expression rationnelle indique que la chaîne de caractères saisie doit contenir des caractères quelconques suivis d'un point, suivi de `maboite`, suivi d'un point, suivi de n'importe quels caractères. Cette expression rationnelle est loin d'être parfaite mais suffit pour les besoins de cet exemple. -Il est conseillé d'utiliser l'attribut {{htmlattrxref("title")}} quand on utilise l'attribut `pattern`. Dans ce cas, l'attribut `title` doit alors décrire l'expression rationnelle (et l'explication de la contrainte) plutôt que le rôle du champ. En effet, la valeur contenue dans `title` pourrait alors être affichée ou vocalisée comme message d'erreur. Un navigateur pourra ainsi affiche un message : "Le texte saisi ne respecte pas la format souhaité." suivi du texte contenu dans `title`. Si la valeur de `title` est simplement "URL", le message complet obtenu serait "Le texte saisi ne respecte pas la format souhaité. URL" (ce qui n'est pas très parlant). +Il est conseillé d'utiliser l'attribut [`title`](/fr/docs/Web/HTML/Global_attributes#attr-title) quand on utilise l'attribut `pattern`. Dans ce cas, l'attribut `title` doit alors décrire l'expression rationnelle (et l'explication de la contrainte) plutôt que le rôle du champ. En effet, la valeur contenue dans `title` pourrait alors être affichée ou vocalisée comme message d'erreur. Un navigateur pourra ainsi affiche un message : « Le texte saisi ne respecte pas le format souhaité. » suivi du texte contenu dans `title`. Si la valeur de `title` est simplement `URL`, le message complet obtenu serait « Le texte saisi ne respecte pas le format souhaité. URL » (ce qui n'est pas très parlant). -C'est pourquoi nous avons écrit "L'URL doit être sur le domaine maboite" qui est plus détaillé. +C'est pourquoi nous avons écrit « L'URL doit être sur le domaine maboite » qui est plus détaillé. > **Note :** Si vous rencontrez des problèmes avec ces expressions rationnelles et qu'elles ne semblent pas fonctionner correctement, vérifiez la console de votre navigateur. Il est possible que des messages d'erreur y soient affichés et puissent vous aider à diagnostiquer le problème. ## Exemples -En plus des exemples précédents, vous pouvez consulter [l'exemple de validation de format sur GitHub](https://github.com/mdn/learning-area/blob/master/html/forms/url-example/index.html) (et voir [le résultat _live_](https://mdn.github.io/learning-area/html/forms/url-example/)). - -## Résumé technique - -<table class="properties"> - <tbody> - <tr> - <td><strong>{{anch("Valeur")}}</strong></td> - <td> - Une chaîne de caractères ({{domxref("DOMString")}}) qui - représente une URL ou une chaîne de caractères vide. - </td> - </tr> - <tr> - <td><strong>Évènements</strong></td> - <td>{{event("change")}} et {{event("input")}}</td> - </tr> - <tr> - <td><strong>Attributs pris en charge</strong></td> - <td> - {{htmlattrxref("autocomplete", "input")}}, - {{htmlattrxref("list", "input")}}, - {{htmlattrxref("maxlength", "input")}}, - {{htmlattrxref("minlength", "input")}}, - {{htmlattrxref("pattern", "input")}}, - {{htmlattrxref("placeholder", "input")}}, - {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} - et {{htmlattrxref("size", "input")}} - </td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td> - <code>list</code>, <code>value</code>, <code>selectionEnd</code>, - <code>selectionDirection</code> - </td> - </tr> - <tr> - <td><strong>Méthodes</strong></td> - <td> - {{domxref("HTMLInputElement.select", "select()")}}, - {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, - {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}} - </td> - </tr> - </tbody> -</table> +En plus des exemples précédents, vous pouvez consulter [l'exemple de validation de format sur GitHub](https://github.com/mdn/learning-area/blob/main/html/forms/url-example/index.html) (et voir [le résultat <i lang="en">live</i>](https://mdn.github.io/learning-area/html/forms/url-example/)). ## Spécifications -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | -| {{SpecName('HTML WHATWG', 'forms.html#url-state-(type=url)', '<input type="url">')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. | -| {{SpecName('HTML5.1', 'sec-forms.html#url-state-typeurl', '<input type="url">')}} | {{Spec2('HTML5.1')}} | Définition initiale. | -| {{SpecName("URL", "#urls", "URL syntax")}} | {{Spec2("URL")}} | | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("html.elements.input.input-url")}} +{{Compat}} ## Voir aussi -- [Guide sur les formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires) -- {{HTMLElement("input")}} +- [Guide sur les formulaires HTML](/fr/docs/Learn/Forms) +- [`<input>`](/fr/docs/Web/HTML/Element/Input) - [`<input type="tel">`](/fr/docs/Web/HTML/Element/input/tel) - [`<input type="email">`](/fr/docs/Web/HTML/Element/input/email) +- [Compatibilité des propriétés CSS](/fr/docs/Learn/Forms/Property_compatibility_table_for_form_controls) diff --git a/files/fr/web/html/element/input/week/index.md b/files/fr/web/html/element/input/week/index.md index d5c2616a00..7e1eee815c 100644 --- a/files/fr/web/html/element/input/week/index.md +++ b/files/fr/web/html/element/input/week/index.md @@ -1,94 +1,126 @@ --- title: <input type="week"> -slug: Web/HTML/Element/Input/week -tags: - - Element - - Formulaires - - HTML - - Input - - Reference +slug: Web/HTML/Element/input/week translation_of: Web/HTML/Element/input/week +browser-compat: html.elements.input.input-week --- {{HTMLRef}} -Les éléments {{htmlelement("input")}} dont l'attribut `type` vaut **`week`** permettent de créer des champs de saisie où l'on peut saisir une année et le numéro de la semaine pendant cette année (allant de 1 à 52 ou 53, suivant la norme [ISO 8601](https://fr.wikipedia.org/wiki/ISO_8601#Num%C3%A9ro_de_semaine)). +Les éléments [`<input>`](/fr/docs/Web/HTML/Element/Input) dont l'attribut `type` vaut **`week`** permettent de créer des champs de saisie où l'on peut saisir une année et le numéro de la semaine pendant cette année (allant de 1 à 52 ou 53, suivant la norme [ISO 8601](https://fr.wikipedia.org/wiki/ISO_8601#Numéro_de_semaine)). {{EmbedInteractiveExample("pages/tabbed/input-week.html", "tabbed-shorter")}} -L'interface utilisateur offerte par un tel contrôle varie en fonction des navigateurs. Au moment où nous écrivons ces lignes, seuls Chrome/Opera et Edge prennent en charge cette fonctionnalité. Pour les navigateurs qui ne l'implémentent pas, l'élément est interprété comme un élément [`<input type="text">`](/fr/docs/Web/HTML/Element/input/text). +L'interface utilisateur offerte par un tel contrôle varie en fonction des navigateurs. Au moment où nous écrivons ces lignes, seuls Chrome/Opera et Edge prennent en charge cette fonctionnalité. Pour les navigateurs qui ne l'implémentent pas, l'élément est interprété comme un élément [`<input type="text">`](/fr/docs/Web/HTML/Element/Input/text). -Sous Chrome/Opera, le contrôle `week` fournit des emplacements pour les deux valeurs. Un calendrier est affiché afin de sélectionner plus faiclement la semaine et l'année. Un bouton avec une croix permet de supprimer la valeur saisie dans le contrôle. +Sous Chrome/Opera, le contrôle `week` fournit des emplacements pour les deux valeurs. Un calendrier est affiché afin de sélectionner plus facilement la semaine et l'année. Un bouton avec une croix permet de supprimer la valeur saisie dans le contrôle.  -Pour Edge, le contrôle associé à `month` est plus élaboré et se compose de deux listes qu'on peut faire défiler séparement pour la semaine d'une part et l'année d'autre part. +Pour Edge, le contrôle associé à `month` est plus élaboré et se compose de deux listes qu'on peut faire défiler séparément pour la semaine d'une part et l'année d'autre part.  +<table class="properties"> + <tbody> + <tr> + <td><strong><a href="#valeur">Valeur</a></strong></td> + <td> + Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui représente une semaine et une année ou qui est vide. + </td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td> + <a href="/fr/docs/Web/API/HTMLElement/change_event"><code>change</code></a> et <a href="/fr/docs/Web/API/HTMLElement/input_event"><code>input</code></a> + </td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td> + <a href="/fr/docs/Web/HTML/Element/Input#attr-autocomplete"><code>autocomplete</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-list"><code>list</code></a>, <a href="/fr/docs/Web/HTML/Element/Input#attr-readonly"><code>readonly</code></a> et <a href="/fr/docs/Web/HTML/Element/Input#attr-step"><code>step</code></a> + </td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td> + <code>value</code>, <code>valueAsDate</code>, + <code>valueAsNumber</code> et <code>list</code>. + </td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td> + <a href="/fr/docs/Web/API/HTMLInputElement/select"><code>select()</code></a>, <a href="/fr/docs/Web/API/HTMLInputElement/stepDown"><code>stepDown()</code></a> et <a href="/fr/docs/Web/API/HTMLInputElement/stepUp"><code>stepUp()</code></a> + </td> + </tr> + </tbody> +</table> + ## Valeur -Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de la semaine et de l'année saisies dans le champ. Le format précis de représentation d'une semaine donnée est décrit dans [l'article sur les formats des dates et heures en HTML](/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_semaines). +Une chaîne de caractères ([`DOMString`](/fr/docs/Web/API/DOMString)) qui représente la valeur de la semaine et de l'année saisies dans le champ. Le format précis de représentation d'une semaine donnée est décrit dans [l'article sur les formats des dates et heures en HTML](/fr/docs/Web/HTML/Date_and_time_formats#représentation_des_semaines). -Il est possible de définir une valeur par défaut grâce à l'attribut {{htmlattrxref("value", "input")}} de la façon suivante : +Il est possible de définir une valeur par défaut grâce à l'attribut [`value`](/fr/docs/Web/HTML/Element/Input#attr-value) de la façon suivante : ```html <label for="week">À quelle semaine souhaiteriez-vous démarrer ?</label> <input id="week" type="week" name="week" value="2017-W01"> ``` -{{EmbedLiveSample('Valeur', 600, 60)}} +{{EmbedLiveSample('', 600, 60)}} -On notera que le format affiché peut être différent de la valeur réellement utilisée pour l'attribut `value`. Cette dernière respecte toujours le format `yyyy-Www` (soit les quatre chiffres de l'année, suivi d'un tiret, suivi d'un W majuscule suivi des deux chiffres pour la semaine). Dans l'exemple précédent par exemple, l'interface utilisateur pourra afficher `Semaine 01 de l'année 2017` mais la valeur envoyée via le formulaire aura toujours la structure `week=2017-W01`. +On notera que le format affiché peut être différent de la valeur réellement utilisée pour l'attribut `value`. Cette dernière respecte toujours le format `yyyy-Www` (soit les quatre chiffres de l'année, suivi d'un tiret, suivi d'un `W` majuscule suivi des deux chiffres pour la semaine). Dans l'exemple précédent par exemple, l'interface utilisateur pourra afficher `Semaine 01 de l'année 2017` mais la valeur envoyée via le formulaire aura toujours la structure `week=2017-W01`. -Il est également possible d'accéder à la valeur ou de la définir en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}}. Par exemple : +Il est également possible d'accéder à la valeur ou de la définir en JavaScript, grâce à la propriété `value` rattachée à [l'interface `HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement). Par exemple : ```js -var weekControl = document.querySelector('input[type="week"]'); +let weekControl = document.querySelector('input[type="week"]'); weekControl.value = '2017-W45'; ``` ## Attributs supplémentaires -En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les champs de semaine gèrent les attributs suivants : - -| Attribut | Description | -| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `{{anch("max")}}` | La semaine (avec l'année) la plus tardive qui est considérée comme valide. | -| `{{anch("min")}}` | La semaine (avec l'année) la plus tôt qui est considérée comme valide. | -| `{{anch("readonly")}}` | Un booléen qui indique si l'utilisateur peut modifier la valeur du champ. | -| `{{anch("step")}}` | Le pas qui est utilisé pour incrémenter la valeur du champ. Cet incrément est utilisé par l'interface utilisateur et également pour vérifier la valeur. | +En complément des attributs pris en charge par l'ensemble des éléments [`<input>`](/fr/docs/Web/HTML/Element/Input), les champs de semaine gèrent les attributs suivants : -### {{htmlattrdef("max")}} +### `max` -La semaine la plus tardive, indiquée avec l'année, sous la forme d'une chaîne de caractères au format `"yyyy-Www"`. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est supérieure à cette date, [la validation échouera](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur fournie n'est pas une chaîne de caractères au format correct, aucun maximum ne sera fixé pour la valeur du contrôle. +La semaine la plus tardive, indiquée avec l'année, sous la forme d'une chaîne de caractères au format `yyyy-Www`. Si la valeur saisie dans le champ (représentée par l'attribut [`value`](/fr/docs/Web/HTML/Element/Input#attr-value)) est supérieure à cette date, [la validation échouera](/fr/docs/Web/Guide/HTML/Constraint_validation). Si la valeur fournie n'est pas une chaîne de caractères au format correct, aucun maximum ne sera fixé pour la valeur du contrôle. Cette valeur doit être supérieure ou égale à celle indiquée par l'attribut `min`. -### {{htmlattrdef("min")}} +### `min` -La semaine la plus tôt, indiquée avec l'année, sous la forme d'une chaîne de caractères au format `"yyyy-Www"`. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est antérieure à cette date, [la validation échouera](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur fournie pour cet attribut n'est pas une chaîne de caractères au format correct, aucun minimum ne sera fixé pour la valeur du contrôle. +La semaine la plus tôt, indiquée avec l'année, sous la forme d'une chaîne de caractères au format `yyyy-Www`. Si la valeur saisie dans le champ (représentée par l'attribut [`value`](/fr/docs/Web/HTML/Element/Input#attr-value)) est antérieure à cette date, [la validation échouera](/fr/docs/Web/Guide/HTML/Constraint_validation). Si la valeur fournie pour cet attribut n'est pas une chaîne de caractères au format correct, aucun minimum ne sera fixé pour la valeur du contrôle. Cette valeur doit être inférieure ou égale à celle indiquée par l'attribut `max`. -{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}} +### `readonly` + +Un attribut booléen qui, s'il est présent, indique que le champ ne peut pas être édité par l'utilisatrice ou l'utilisateur. La valeur de l'attribut `value` peut, toutefois, être modifiée avec du code JavaScript qui modifierait la valeur de la propriété `value` de l'objet [`HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement). + +> **Note :** Puisqu'un champ en lecture seule ne peut pas avoir de valeur, `required` n'a pas d'effet sur les champs qui ont également `readonly` présent. -### {{htmlattrdef("step")}} +### `step` -{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}} +L'attribut `step` est un nombre qui indique le « pas » suivi par le compteur. Il peut également prendre la valeur spéciale `any` (décrite ci-après). Seules les valeurs qui suivent cette progression (à partir de `min` ou de `value` si ces attributs sont fournis) seront considérées comme valides. -Pour les champs de type `week`, la valeur de l'attribut `step` est indiquée en nombre de semaine et le facteur de multiplication est 604 800 000 (qui correspond au nombre de millisecondes dans une semaine). Par défaut, la valeur de `step` est 1. La base à partir de laquelle incrémenter par défaut est -259 200 000 qui correspond à la première semaine de 1970 (`"1970-W01"`). +Une chaîne de caractères `any` indique qu'aucune contrainte de pas n'est appliquée et que n'importe quelle valeur (sous réserve qu'elle respecte les autres contraintes potentiellement indiquées par `min` ou `max`) est valide. -_À l'heure où ces lignes sont écrites, la signification de la valeur `"any"` pour l'attribut `step` pour les champs `week` n'est pas certaine. Cette information sera mise à jour dès que possible._ +> **Note :** Lorsque les données saisies par l'utilisatrice ou l'utilisateur ne respectent pas cette contrainte, l'agent utilisateur pourra arrondir à la valeur valide la plus proche, avec une préférence pour les dates les plus avancées quand deux dates sont aussi proches de la valeur saisie. + +Pour les champs de type `week`, la valeur de l'attribut `step` est indiquée en nombre de semaine et le facteur de multiplication est 604 800 000 (qui correspond au nombre de millisecondes dans une semaine). Par défaut, la valeur de `step` est 1, qui indique une semaine. La base à partir de laquelle incrémenter par défaut est -259 200 000 qui correspond à la première semaine de 1970 (`1970-W01`). + +_À l'heure où ces lignes sont écrites, la signification de la valeur `any` pour l'attribut `step` pour les champs `week` n'est pas certaine. Cette information sera mise à jour dès que possible._ ## Utiliser les contrôles de type `week` -Ces contrôles peuvent être pratiques selon certains aspects : ils permettent de sélectionner une semaine de façon simple, les données envoyées au serveur sont normalisées quelle que soit la langue ou le navigateur de l'utilisateur. Toutefois, en raison de la prise en charge des navigateurs actuellement limitée, `<input type="week">` pose quelques défis. +Ces contrôles peuvent être pratiques selon certains aspects : ils permettent de sélectionner une semaine de façon simple, les données envoyées au serveur sont normalisées quelle que soit la langue ou le navigateur de la personne saisissant dans le champ. Toutefois, en raison de la prise en charge des navigateurs actuellement limitée, `<input type="week">` pose quelques défis. -Nous verrons par la suite quelques cas d'utilisation simples puis complexes avant de voir comment gérer l'hétérogénéité des différents navigateurs (cf. {{anch("Gérer la prise en charge des navigateurs")}}). +Nous verrons par la suite quelques cas d'utilisation simples puis complexes avant de voir comment gérer l'hétérogénéité des différents navigateurs (cf. [Gérer la prise en charge des navigateurs](#gérer_la_prise_en_charge_des_navigateurs)). ### Utilisation simple -La forme la plus simple de `<input type="week">` se compose d'un élément `<input>` et d'un élément {{htmlelement("label")}} : +La forme la plus simple de `<input type="week">` se compose d'un élément `<input>` et d'un élément [`<label>`](/fr/docs/Web/HTML/Element/Label) : ```html <form> @@ -97,15 +129,15 @@ La forme la plus simple de `<input type="week">` se compose d'un élément `<inp </form> ``` -{{EmbedLiveSample('Utilisation_simple', 600, 40)}} +{{EmbedLiveSample('', 600, 40)}} ### Contrôler la taille du champ -`<input type="week">` ne prend pas en charge des attributs de dimensionnement (tel que {{htmlattrxref("size", "input")}}). Il sera nécessaire d'utiliser [CSS](/fr/docs/Web/CSS) si on a besoin de modifier la taille du contrôle. +`<input type="week">` ne prend pas en charge des attributs de dimensionnement (tel que [`size`](/fr/docs/Web/HTML/Element/Input#attr-size)). Il sera nécessaire d'utiliser [CSS](/fr/docs/Web/CSS) si on a besoin de modifier la taille du contrôle. ### Utiliser l'attribut `step` -En théorie, l'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être employé pour définir l'incrément minimal entre chaque semaine sélectionnable. Toutefois, il ne semble avoir encore aucun effet pour les navigateurs qui prennent en charge ce contrôle. +En théorie, l'attribut [`step`](/fr/docs/Web/HTML/Element/Input#attr-step) devrait pouvoir être employé pour définir l'incrément minimal entre chaque semaine sélectionnable. Toutefois, il ne semble avoir encore aucun effet pour les navigateurs qui prennent en charge ce contrôle. ## Validation @@ -113,7 +145,7 @@ Par défaut, `<input type="week">` n'applique aucune validation aux valeurs sais ### Paramétrer des semaines minimum et maximum -Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} peuvent être utilisés afin de restreindre les semaines qui peuvent être sélectionnées par l'utilisateur. Dans l'exemple qui suit, on indique une valeur minimale correspondant à la première semaine de 2017 et une valeur maximale correspondant à la dernière semaine de 2017 : +Les attributs [`min`](/fr/docs/Web/HTML/Element/Input#attr-min) et [`max`](/fr/docs/Web/HTML/Element/Input#attr-max) peuvent être utilisés afin de restreindre les semaines qui peuvent être sélectionnées par l'utilisatrice ou l'utilisateur. Dans l'exemple qui suit, on indique une valeur minimale correspondant à la première semaine de 2017 et une valeur maximale correspondant à la dernière semaine de 2017 : ```html <form> @@ -124,9 +156,9 @@ Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input") </form> ``` -{{EmbedLiveSample('Paramétrer_des_semaines_minimum_et_maximum', 600, 40)}} +{{EmbedLiveSample('', 600, 40)}} -Voici la feuille de style utilisée dans l'exemple précédent. Vous pourrez noter qu'on utilise les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que la valeur saisie est valide ou non. Les icônes associées sont placées dans un élément {{htmlelement("span")}} situé à côté du champ et non sur le champ même car, pour Chrome, le contenu généré dynamiquement avec les pseudo-éléments serait placé dans le contrôle du formulaire et ne pourrait être mis en forme efficacement. +Voici la feuille de style utilisée dans l'exemple précédent. Vous pourrez noter qu'on utilise les pseudo-classes [`:valid`](/fr/docs/Web/CSS/:valid) et [`:invalid`](/fr/docs/Web/CSS/:invalid) afin de mettre en forme le contrôle selon que la valeur saisie est valide ou non. Les icônes associées sont placées dans un élément [`<span>`](/fr/docs/Web/HTML/Element/span) situé à côté du champ et non sur le champ même car, pour Chrome, le contenu généré dynamiquement avec les pseudo-éléments serait placé dans le contrôle du formulaire et ne pourrait être mis en forme efficacement. ```css div { @@ -159,9 +191,9 @@ Pour les navigateurs qui prennent en charge ce contrôle et ces fonctionnalités ### Rendre la valeur obligatoire -On peut aussi utiliser l'attribut {{htmlattrxref("required", "input")}} afin que la saisie de la valeur soit obligatoire. Pour les navigateurs qui prennent en charge cette fonctionnalité, une erreur sera affichée lorsqu'on tentera d'envoyer un formulaire avec un champ vide pour une semaine. +On peut aussi utiliser l'attribut [`required`](/fr/docs/Web/HTML/Element/Input#attr-required) afin que la saisie de la valeur soit obligatoire. Pour les navigateurs qui prennent en charge cette fonctionnalité, une erreur sera affichée lorsqu'on tentera d'envoyer un formulaire avec un champ vide pour une semaine. -Prenons un autre exemple (où la période a été restreinte comme précédemment) et où le champ est obligatoire : +Prenons un autre exemple (où la période a été restreinte comme précédemment) et où le champ est obligatoire : ```html <form> @@ -172,47 +204,47 @@ Prenons un autre exemple (où la période a été restreinte comme précédemmen <span class="validity"></span> </div> <div> - <input type="submit" value="Envoyer le formulaire"> + <input type="submit" value="Envoyer le formulaire"> </div> </form> ``` -Si vous essayez de soumettre le formulaire sans aucune valeur, le navigateur affichera une erreur. Vous pouvez tester avec l'exemple qui suit : +Si vous essayez de soumettre le formulaire sans aucune valeur, le navigateur affichera une erreur. Vous pouvez tester avec l'exemple qui suit : -{{EmbedLiveSample('Rendre_la_valeur_obligatoire', 600, 120)}} +{{EmbedLiveSample('', 600, 120)}} -Voici une capture d'écran du résultat obtenu si votre navigateur ne prend pas en charge cette fonctionnalité : +Voici une capture d'écran du résultat obtenu si votre navigateur ne prend pas en charge cette fonctionnalité : - + -> **Attention :** la validation des données du formulaire HTML par le navigateur ne se substitue pas à la validation des données reçues côté serveur. En effet, il est tout à fait possible pour un utilisateur de modifier le HTML côté client et de passer outre les contraintes normalement appliquées. Il est également possible d'envoyer des données au serveur sans passer par le formulaire. Ne pas vérifier les données reçues côté serveur expose à des risques d'erreur voire d'attaques. +> **Attention :** la validation des données du formulaire HTML par le navigateur ne se substitue pas à la validation des données reçues côté serveur. En effet, il est tout à fait possible pour une utilisatrice ou un utilisateur de modifier le HTML côté client et de passer outre les contraintes normalement appliquées. Il est également possible d'envoyer des données au serveur sans passer par le formulaire. Ne pas vérifier les données reçues côté serveur expose à des risques d'erreur voire d'attaques. ## Gérer la prise en charge des navigateurs Comme évoqué plus haut, le principal problème associé à ce type de contrôle est l'absence de prise en charge par Safari, Firefox (hors mobile) et les anciennes versions d'Internet Explorer (pré-Edge). -Les plateformes mobiles comme Android et iOS fournissent un contrôle natif à l'ergonomie tactile adaptée. Voici par exemple le sélecteur `week` sur Chrome pour Android : +Les plateformes mobiles comme Android et iOS fournissent un contrôle natif à l'ergonomie tactile adaptée. Voici par exemple le sélecteur `week` sur Chrome pour Android :  Les navigateurs qui ne prennent pas en charge ce type de contrôle l'interprètent comme un champ texte mais cela crée des problèmes de cohérence tant au niveau de l'ergonomie qu'au niveau de la représentation des données. -C'est ce deuxième aspect qui peut poser le plus de problème. Comme nous l'avons mentionné avant, un contrôle `week` verra sa valeur normalisée pour respecter le format `yyyy-Www`. En revanche, pour un champ texte non reconnu par le navigateur, les utilisateurs pourraient saisir des semaines selon une variété de formats : +C'est ce deuxième aspect qui peut poser le plus de problème. Comme nous l'avons mentionné avant, un contrôle `week` verra sa valeur normalisée pour respecter le format `yyyy-Www`. En revanche, pour un champ texte non reconnu par le navigateur, les utilisatrices et utilisateurs pourraient saisir des semaines selon une variété de formats : - `Première semaine de 2017` - `Du 2 au 8 janvier 2017` - `2017-W01` - etc. -Si on souhaite gérer cette saisie de façon compatible entre les différents navigateurs, on utilisera alors deux contrôles distincts (représentés par des éléments {{htmlelement("select")}}) qui représenteront respectivement le numéro de la semaine et l'année. +Si on souhaite gérer cette saisie de façon compatible entre les différents navigateurs, on utilisera alors deux contrôles distincts (représentés par des éléments [`<select>`](/fr/docs/Web/HTML/Element/select)) qui représenteront respectivement le numéro de la semaine et l'année. ## Exemples -Dans l'exemple qui suit, on construit deux ensembles d'éléments pour sélectionner une semaine : un sélecteur natif avec `<input type="week">` et un second composé de deux éléments {{htmlelement("select")}} qui permettent de choisir la semaine et l'année sur les navigateurs qui ne prennent pas en charge le contrôle natif. +Dans l'exemple qui suit, on construit deux ensembles d'éléments pour sélectionner une semaine : un sélecteur natif avec `<input type="week">` et un second composé de deux éléments [`<select>`](/fr/docs/Web/HTML/Element/select) qui permettent de choisir la semaine et l'année sur les navigateurs qui ne prennent pas en charge le contrôle natif. -{{EmbedLiveSample('Exemples', 600, 140)}} +{{EmbedLiveSample('', 600, 140)}} -Voici le code HTML utilisé : +Voici le code HTML utilisé : ```html <form> @@ -271,16 +303,16 @@ input:valid+span:after { } ``` -Dans le fragment de code JavaScript qui suit, on montre comment détecter si la fonctionnalité est prise en charge ou non. Pour cela, on crée un nouvel élément {{htmlelement("input")}} et on règle son `type` sur `week` puis on vérifie immédiatement la valeur de son type. Les navigateurs qui ne prennent pas en charge la fonctionnalité renverront `text`. Si c'est le cas, on masque le sélecteur natif et on affiche le sélecteur alternatif composé des deux éléments {{htmlelement("select")}}. +Dans le fragment de code JavaScript qui suit, on montre comment détecter si la fonctionnalité est prise en charge ou non. Pour cela, on crée un nouvel élément [`<input>`](/fr/docs/Web/HTML/Element/Input) et on règle son `type` sur `week` puis on vérifie immédiatement la valeur de son type. Les navigateurs qui ne prennent pas en charge la fonctionnalité renverront `text`. Si c'est le cas, on masque le sélecteur natif et on affiche le sélecteur alternatif composé des deux éléments [`<select>`](/fr/docs/Web/HTML/Element/select). ```js // On définit certaines variables -var nativePicker = document.querySelector('.nativeWeekPicker'); -var fallbackPicker = document.querySelector('.fallbackWeekPicker'); -var fallbackLabel = document.querySelector('.fallbackLabel'); +let nativePicker = document.querySelector('.nativeWeekPicker'); +let fallbackPicker = document.querySelector('.fallbackWeekPicker'); +let fallbackLabel = document.querySelector('.fallbackLabel'); -var yearSelect = document.querySelector('#year'); -var weekSelect = document.querySelector('#fallbackWeek'); +let yearSelect = document.querySelector('#year'); +let weekSelect = document.querySelector('#fallbackWeek'); // À l'état initial, on masque le sélecteur alternatif fallbackPicker.style.display = 'none'; @@ -288,7 +320,7 @@ fallbackLabel.style.display = 'none'; // On teste si le sélecteur natif se transforme en // contrôle de saisie de texte ou non -var test = document.createElement('input'); +let test = document.createElement('input'); test.type = 'week'; // Si c'est le cas, on exécute le code dans le bloc // conditionnel if() {} @@ -305,74 +337,30 @@ if(test.type === 'text') { function populateWeeks() { // On ajoute 52 semaines grâce à une boucle - for(var i = 1; i <= 52; i++) { - var option = document.createElement('option'); + for(let i = 1; i <= 52; i++) { + let option = document.createElement('option'); option.textContent = (i < 10) ? ("0" + i) : i; weekSelect.appendChild(option); } } ``` -> **Note :** Attention, certaines années peuvent contenir 53 semaines ! (cf. [cet article Wikipédia](https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year)) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles. - -## Résumé technique - -<table class="properties"> - <tbody> - <tr> - <td><strong>{{anch("Valeur")}}</strong></td> - <td> - Une chaîne de caractères ({{domxref("DOMString")}}) qui - représente une semaine et une année ou la chaîne vide. - </td> - </tr> - <tr> - <td><strong>Évènements</strong></td> - <td> - {{domxref("HTMLElement/change_event", "change")}} et - {{domxref("HTMLElement/input_event", "input")}}. - </td> - </tr> - <tr> - <td><strong>Attributs pris en charge</strong></td> - <td> - {{htmlattrxref("autocomplete", "input")}}, - {{htmlattrxref("list", "input")}}, - {{htmlattrxref("readonly", "input")}} et - {{htmlattrxref("step", "input")}}. - </td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td> - <code>value</code>, <code>valueAsDate</code>, - <code>valueAsNumber</code>, <code>list</code>. - </td> - </tr> - <tr> - <td><strong>Méthodes</strong></td> - <td> - {{domxref("HTMLInputElement.select", "select()")}}, - {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, - {{domxref("HTMLInputElement.stepUp", "stepUp()")}}. - </td> - </tr> - </tbody> -</table> +> **Note :** Attention, certaines années peuvent contenir 53 semaines ! (cf. [cet article Wikipédia (en anglais)](https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year)) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles. ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'forms.html#week-state-(type=week)', '<input type="week">')}} | {{Spec2('HTML WHATWG')}} | | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("html.elements.input.input-week")}} +{{Compat}} ## Voir aussi -- L'élément générique {{HTMLElement("input")}} -- L'interface du DOM qui permet de le manipuler {{domxref("HTMLInputElement")}} -- [Les formats de date et d'heure utilisés en HTML](/fr/docs/Web/HTML/Formats_date_heure_HTML) -- [`<input type="datetime-local">`](/fr/docs/Web/HTML/Element/input/datetime-local), [`<input type="date">`](/fr/docs/Web/HTML/Element/input/date), [`<input type="time">`](/fr/docs/Web/HTML/Element/input/time), and [`<input type="month">`](/fr/docs/Web/HTML/Element/input/month) +- L'élément générique [`<input>`](/fr/docs/Web/HTML/Element/Input) et l'interface du DOM qui permet de le manipuler, [`HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement) +- [Les formats de date et d'heure utilisés en HTML](/fr/docs/Web/HTML/Date_and_time_formats) +- [`<input type="datetime-local">`](/fr/docs/Web/HTML/Element/input/datetime-local) +- [`<input type="date">`](/fr/docs/Web/HTML/Element/input/date) +- [`<input type="month">`](/fr/docs/Web/HTML/Element/input/month) +- [`<input type="time">`](/fr/docs/Web/HTML/Element/input/time) +- [Compatibilité des propriétés CSS](/fr/docs/Learn/Forms/Property_compatibility_table_for_form_controls) diff --git a/files/fr/web/html/element/input/week/validation-controle-type-week-chrome.png b/files/fr/web/html/element/input/week/validation-controle-type-week-chrome.png Binary files differnew file mode 100644 index 0000000000..bf3c6c9381 --- /dev/null +++ b/files/fr/web/html/element/input/week/validation-controle-type-week-chrome.png diff --git a/files/fr/web/html/element/track/index.md b/files/fr/web/html/element/track/index.md index 8f07ff3429..4339cc9afc 100644 --- a/files/fr/web/html/element/track/index.md +++ b/files/fr/web/html/element/track/index.md @@ -1,40 +1,69 @@ --- -title: <track> +title: '<track> : l''élément de piste texte embarquée' slug: Web/HTML/Element/track -tags: - - Element - - HTML - - Multimedia - - Reference - - Web translation_of: Web/HTML/Element/track +browser-compat: html.elements.track --- {{HTMLRef}} -L'élément HTML **`<track>`** est utilisé comme élément fils d'un élément {{HTMLElement("audio")}} ou {{HTMLElement("video")}} et permet de fournir une piste texte pour le média (par exemple afin de gérer automatiquement les sous-titres). Les pistes texte utilisées avec cet élément sont formatées selon [le format WebVTT](/fr/docs/Web/API/WebVTT_API) (ce sont des fichiers `.vtt`) (WebVTT pour _Web Video Text Tracks_) ou selon [le format _Timed Text Markup Language_ (TTML)](https://w3c.github.io/ttml2/index.html). +L'élément HTML **`<track>`** est utilisé comme élément fils d'un élément [`<audio>`](/fr/docs/Web/HTML/Element/audio) ou [`<video>`](/fr/docs/Web/HTML/Element/video) et permet de fournir une piste texte pour le média (par exemple afin de gérer automatiquement les sous-titres). Les pistes texte utilisées avec cet élément sont formatées selon [le format WebVTT](/fr/docs/Web/API/WebVTT_API) (ce sont des fichiers `.vtt`) (WebVTT pour <i lang="en">Web Video Text Tracks</i>). {{EmbedInteractiveExample("pages/tabbed/track.html", "tabbed-standard")}} +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu">Catégories de contenu</a></th> + <td>Aucune</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Aucun, cet élément est un élément vide.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>Étant un élément vide, la balise de début doit être présente et il ne doit pas y avoir de balise de fin.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Un élément média avant tout autre <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#contenu_de_flux">contenu de flux</a>. + </td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Aucun rôle correspondant</a></td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucune.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLTrackElement"><code>HTMLTrackElement</code></a></td> + </tr> + </tbody> +</table> + ## Attributs -À l'instar des autres éléments HTML, cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels). +À l'instar des autres éléments HTML, cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Global_attributes). -- {{htmlattrdef("default")}} - - : Cet attribut booléen indique que c'est cette piste qui doit être activée par défaut, sauf si les réglages de l'utilisateur indiquent qu'une autre piste est plus appropriée. Pour un élément média donné, il ne peut y avoir qu'une seule piste avec cet attribut. -- {{htmlattrdef("kind")}} +- `default` + - : Cet attribut booléen indique que c'est cette piste qui doit être activée par défaut, sauf si les réglages de l'utilisatrice ou l'utilisateur indiquent qu'une autre piste est plus appropriée. Pour un élément média donné, il ne peut y avoir qu'une seule piste avec cet attribut. +- `kind` - - : La façon dont la piste texte doit être utilisée. La valeur par défaut est `subtitles` et si la valeur fournie est incorrecte, l'agent utilisateur doit utiliser la valeur `metadata`. Cet attribut est un attribut à valeur contrainte qui peut prendre l'une des valeurs suivantes : + - : La façon dont la piste texte doit être utilisée. La valeur par défaut est `subtitles` et si la valeur fournie est incorrecte, l'agent utilisateur doit utiliser la valeur `metadata`. Cet attribut est un attribut à valeur contrainte qui peut prendre l'une des valeurs suivantes : - `subtitles` (la valeur par défaut) - - Les sous-titres fournissent une traduction du contenu lorsqu'il ne peut pas être compris par l'utilisateur. La piste peut, par exemple, contenir le texte espagnol d'un film joué en anglais. + - Les sous-titres fournissent une traduction du contenu lorsqu'il ne peut pas être compris par l'utilisatrice ou l'utilisateur. La piste peut, par exemple, contenir le texte espagnol d'un film joué en anglais. - Les sous-titres peuvent fournir du contenu supplémentaires, généralement des informations de contexte (par exemple, le texte qui défile au début d'un film Star Wars, la date ou le lieu d'une scène, etc.). - `captions` - - La piste est une retransciption voire une traduction de la partie audio du média. + - La piste est une retranscription voire une traduction de la partie audio du média. - La piste peut contenir des informations non-verbales importantes comme des indications musicales ou des effets sonores. La piste peut également indiquer la source du bruit (musique, personnage, etc.). - - Ce type de piste est adapté aux utilisateurs malentendants ou lorsque le son est désactivé. + - Ce type de piste est adapté aux personnes malentendantes ou lorsque le son est désactivé. - `descriptions` @@ -43,30 +72,26 @@ L'élément HTML **`<track>`** est utilisé comme élément fils d'un élément - `chapters` - - Les titres de chapitre utilisés lorsque l'utilisateur navigue au sein du média. + - Les titres de chapitre utilisés lorsque l'utilisatrice ou l'utilisateur navigue au sein du média. - `metadata` - - La piste est utilisé par des scripts, elle n'est pas visible pour l'utilisateur. + - La piste est utilisée par des scripts, elle n'est pas visible pour l'utilisatrice ou l'utilisateur. -- {{htmlattrdef("label")}} +- `label` - : Le titre associé à la piste et qui est affiché par le navigateur lorsque celui-ci liste les pistes disponibles. -- {{htmlattrdef("src")}} - - : L'adresse du fichier pour la piste (celle du fichier`.vtt`). Cet attribut doit être une URL valide et doit nécessairement être présent dans l'élément. L'URL indiquée doit avoir la même origine à moins que l'élément parent {{HTMLElement("audio")}} ou {{HTMLElement("video")}} de l'élément `<track>` possède un attribut [crossorigin](/fr/docs/Web/HTML/Reglages_des_attributs_CORS). -- {{htmlattrdef("srclang")}} +- `src` + - : L'adresse du fichier pour la piste (celle du fichier `.vtt`). Cet attribut doit être une URL valide et doit nécessairement être présent dans l'élément. L'URL indiquée doit avoir la même origine à moins que l'élément parent [`<audio>`](/fr/docs/Web/HTML/Element/audio) ou [`<video>`](/fr/docs/Web/HTML/Element/video) de l'élément `<track>` possède un attribut [crossorigin](/fr/docs/Web/HTML/Attributes/crossorigin). +- `srclang` - : La langue dans laquelle est exprimée la piste textuelle. La valeur de cet attribut doit être une balise de langue [BCP 47](https://r12a.github.io/app-subtags/). Si l'attribut `kind` vaut `subtitles,` l'attribut `srclang` doit obligatoirement être défini. ## Notes d'utilisation ### Types de piste -Le type de donnéefournit par un élément `track` est décrit par l'attribut `kind`. Cet attribut peut prendre une valeur parmi `subtitles`, `captions`, `descriptions`, `chapters` ou `metadata`. L'élément pointe vers un fichier source qui contient du texte avec des annotations temporelles que le navigateur affichera lorsque l'utilisateur en aura besoin. - -Un élément média ({{HTMLElement("audio")}} ou {{HTMLElement("video")}}) ne peut pas avoir plusieurs pistes partageant les mêmes valeurs pour les attributs `kind`, `srclang` et `label`. +Le type de donnée fourni par un élément `track` est décrit par l'attribut `kind`. Cet attribut peut prendre une valeur parmi `subtitles`, `captions`, `descriptions`, `chapters` ou `metadata`. L'élément pointe vers un fichier source qui contient du texte avec des annotations temporelles que le navigateur affichera lorsque l'utilisatrice ou l'utilisateur en aura besoin. -### Détecter le changement de texte - -{{page("/fr/docs/Web/API/TextTrack/cuechange_event", "On the track element")}} +Un élément média ([`<audio>`](/fr/docs/Web/HTML/Element/audio) ou [`<video>`](/fr/docs/Web/HTML/Element/video)) ne peut pas avoir plusieurs pistes partageant les mêmes valeurs pour les attributs `kind`, `srclang` et `label`. ## Exemples @@ -74,83 +99,37 @@ Un élément média ({{HTMLElement("audio")}} ou {{HTMLElement("video")}}) ne pe ```html <video controls poster="/images/sample.gif"> - <source src="sample.mp4" type="video/mp4"> - <source src="sample.ogv" type="video/ogv"> - <track kind="captions" src="sampleCaptions.vtt" srclang="en"> - <track kind="descriptions" - src="sampleDescriptions.vtt" srclang="en"> - <track kind="chapters" src="chapitres.vtt" srclang="en"> - <track kind="subtitles" src="soustitres_de.vtt" srclang="de"> - <track kind="subtitles" src="soustitres_en.vtt" srclang="en"> - <track kind="subtitles" src="soustitres_ja.vtt" srclang="ja"> - <track kind="subtitles" src="soustitres_oz.vtt" srclang="oz"> - <track kind="metadata" src="keyStage1.vtt" srclang="en" - label="Key Stage 1"> - <track kind="metadata" src="keyStage2.vtt" srclang="en" - label="Key Stage 2"> - <track kind="metadata" src="keyStage3.vtt" srclang="en" - label="Key Stage 3"> - <!-- Contenu alternatif pour les navigateurs qui - ne prennent pas en charge video --> - ... + <source src="sample.mp4" type="video/mp4"> + <source src="sample.ogv" type="video/ogv"> + <track kind="captions" src="sampleCaptions.vtt" srclang="en"> + <track kind="descriptions" + src="sampleDescriptions.vtt" srclang="en"> + <track kind="chapters" src="chapitres.vtt" srclang="en"> + <track kind="subtitles" src="soustitres_de.vtt" srclang="de"> + <track kind="subtitles" src="soustitres_en.vtt" srclang="en"> + <track kind="subtitles" src="soustitres_ja.vtt" srclang="ja"> + <track kind="subtitles" src="soustitres_oz.vtt" srclang="oz"> + <track kind="metadata" src="keyStage1.vtt" srclang="en" + label="Key Stage 1"> + <track kind="metadata" src="keyStage2.vtt" srclang="en" + label="Key Stage 2"> + <track kind="metadata" src="keyStage3.vtt" srclang="en" + label="Key Stage 3"> + <!-- Contenu alternatif pour les navigateurs qui + ne prennent pas en charge <video> --> + <!-- etc. --> </video> ``` -## Résumé technique - -<table class="properties"> - <tbody> - <tr> - <th scope="row"> - <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu" - >Catégories de contenu</a - > - </th> - <td>Aucune</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td>Aucun, cet élément est un élément vide.</td> - </tr> - <tr> - <th scope="row">Omission de balises</th> - <td> - Étant un élément vide, la balise de début doit être présente et il ne - doit pas y avoir de balise de fin. - </td> - </tr> - <tr> - <th scope="row">Parents autorisés</th> - <td> - Un élément média avant tout autre - <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" - >contenu de flux</a - >. - </td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>Aucune.</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLTrackElement")}}</td> - </tr> - </tbody> -</table> - ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName('HTML WHATWG','embedded-content.html#the-track-element','track element')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName("HTML5 W3C", "embedded-content-0.html#the-track-element", "track element")}} | {{Spec2("HTML5 W3C")}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("html.elements.track")}} +{{Compat}} ## Voir aussi - [Le format WebVTT](/fr/docs/Web/API/WebVTT_API) -- {{domxref("HTMLMediaElement.textTracks")}} +- [`HTMLMediaElement.textTracks`](/fr/docs/Web/API/HTMLMediaElement/textTracks) |
