Ces types de zones sont tous une spécialisation de l'élément input.

Les éléments d'interfaces fournis par les navigateurs (calendriers, horloges) ne sont pas encore standardisés.

### Dates

Exemple : zone de saisie date
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Formulaire</title> </head> <body> <h3>Zone de saisie date</h3> <form method="POST" action="dossier/reception.php"> <label for="datNais">Date de naissance </label> <input type="date" name="datNais" id="datNais"> <p> <input type="submit" value="Envoi" name="btn"> </p> </form> </body> </html>

La zone est faite avec l'élément input dont l'attribut `type` a la valeur `date`. L'élément input est un élement vide (ie sans balise de fermeture).

zone de saisie date dans Chrome

L'interface de la zone de saisie offre de nombreuses possibilités. La saisie directe de la date est possible, elle est guidée et seuls des nombres peuvent être saisis.
Les compteurs jour, mois et années sont indépendants : quand on est le 31 décembre et qu'on incrémente le jour de 1, on ne passe pas au 1er janvier de l'année suivante mais au 1er décembre et l'année ne change pas.

La zone doit avoir un attribut `name` dont la valeur doit être unique parmi toutes les zones composant le formulaire.

Attribut possible | Utilité
`autocomplete` | Autocomplétion. Les saisies précédemment faites dans la zone sont proposées. Attribut booléen.
`autofocus` | 1er élément activé dans le formulaire. Attribut booléen.
`dirname` | Direction du texte saisi.
`disabled` | Zone désactivée, non transmise au serveur. Aucune interaction n'est possible avec la zone (pas de focus, pas de copie, etc). Attribut booléen.
`form` | `id` du formulaire associé si la zone n'est pas un élément `form` ou concerne un autre formulaire que celui dans lequel elle est imbriquée.
`list` | `id` de la liste de suggestions associée à la zone.
`max` | Valeur maximale acceptée. De la forme aaaa-mm-jj.
`min` | Valeur minimale acceptée. De la forme aaaa-mm-jj.
`name` | Nom de la zone.
`readonly` | Zone en lecture seule, transmise au serveur. La zone peut avoir le focus et le contenu peut être copié. Attribut booléen.
`required` | Zone obligatoire. Attribut booléen.
`step` | Valeur du pas d'incrément/décrément. Entier positif.
`value` | Valeur initiale de la zone (de la forme aaaa-mm-jj) et valeur transmise au serveur après saisie (de la forme aaaa-mm-jj).

Toutes les dates utilisées comme valeur d'attribut doivent être au format aaaa-mm-jj (4 chiffres pour l'année, 1 tiret, 2 chiffres pour le mois, 1 tiret, 2 chiffres pour le jour).

Il est possible de limiter la date saisie dans un intervalle donné avec les attributs `min` et `max`.

L'attribut `step` n'est pas pris en compte bien qu'il fasse partie des spécifications.

En cas de saisie directe de la date, si celle-ci est erronée (exemple 30 février), un message d'erreur est affiché automatiquement par le navigateur et l'envoi du formulaire est bloqué.
Le texte du message, sa mise en forme et son positionnement ne sont pas gérés par le code HTML mais par le navigateur.

Utilisez l'exemple suivant pour tester ces fonctionnalités.

Exemple : zone de saisie date
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Zone de saisie date</title> <style> form {width: 300px; margin: 0 auto} label {display:block; margin: 1em 0 0.2em 0} input[name="btn"] {display:block; margin:2em auto} </style> </head> <body> <form action="dossier/reception.php" method="POST"> <h3>Saisie de date</h3> <p>La valeur initiale est le 10 mai 2020. La date saisie doit être comprise entre le 1er mai 2020 et le 31 mai 2020.</p> <label for="datDep">Date de départ</label> <input type="date" name="datDep" id="datDep" min="2020-05-01" max="2020-05-31" value="2020-05-10"> <input type="submit" value="Envoi" name="btn"> </form> </body> </html>

### Mois

Exemple : zone de saisie mois
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Formulaire</title> </head> <body> <h3>Zone de saisie mois</h3> <form method="POST" action="dossier/reception.php"> <label for="txtMois">Mois de vacances </label> <input type="month" name="datMois" id="datMois"> <p> <input type="submit" value="Envoi" name="btn"> </p> </form> </body> </html>

La zone est faite avec l'élément input dont l'attribut `type` a la valeur `month`. L'élément input est un élement vide (ie sans balise de fermeture).

zone de saisie mois dans Chrome

L'interface de la zone de saisie offre de nombreuses possibilités. La saisie directe du mois est possible et elle est guidée. Pour le mois on peut saisir le numéro du mois ou son nom (autocomplétion) et pour l'année, seuls des nombres peuvent être saisis.
Les compteurs mois et années sont indépendants : quand on est en décembre et qu'on incrémente le mois de 1, on ne passe pas en janvier de l'année suivante mais on revient en janvier de l'année affichée.

La zone doit avoir un attribut `name` dont la valeur doit être unique parmi toutes les zones composant le formulaire.

Attribut possible | Utilité
`autocomplete` | Autocomplétion. Les saisies précédemment faites dans la zone sont proposées. Attribut booléen.
`autofocus` | 1er élément activé dans le formulaire. Attribut booléen.
`dirname` | Direction du texte saisi.
`disabled` | Zone désactivée, non transmise au serveur. Aucune interaction n'est possible avec la zone (pas de focus, pas de copie, etc). Attribut booléen.
`form` | `id` du formulaire associé si la zone n'est pas un élément `form` ou concerne un autre formulaire que celui dans lequel elle est imbriquée.
`list` | `id` de la liste de suggestions associée à la zone.
`max` | Valeur maximale acceptée. De la forme aaaa-mm.
`min` | Valeur minimale acceptée. De la forme aaaa-mm.
`name` | Nom de la zone.
`readonly` | Zone en lecture seule, transmise au serveur. La zone peut avoir le focus et le contenu peut être copié. Attribut booléen.
`required` | Zone obligatoire. Attribut booléen.
`step` | Valeur du pas d'incrément/décrément. Entier positif.
`value` | Valeur initiale de la zone (de la forme aaaa-mm) et valeur transmise au serveur après saisie (de la forme aaaa-mm).

Toutes les mois utilisés comme valeur d'attribut doivent être au format aaaa-mm (4 chiffres pour l'année, 1 tiret, 2 chiffres pour le mois).

Il est possible de limiter le mois saisi dans un intervalle donné avec les attributs `min` et `max`.

L'attribut `step` n'est pas pris en compte bien qu'il fasse partie des spécifications.

En cas de saisie directe et de limites, si la valeur saisie est hors limites, un message d'erreur est affiché automatiquement par le navigateur et l'envoi du formulaire est bloqué.
Le texte du message, sa mise en forme et son positionnement ne sont pas gérés par le code HTML mais par le navigateur.

Utilisez l'exemple suivant pour tester ces fonctionnalités.

Exemple : zone de saisie mois
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Zone de saisie mois</title> <style> form {width: 300px; margin: 0 auto} label {display:block; margin: 1em 0 0.2em 0} input[name="btn"] {display:block; margin:2em auto} </style> </head> <body> <form action="dossier/reception.php" method="POST"> <h3>Saisie de mois</h3> <p>La valeur initiale est juillet 2024. La saisie doit être comprise entre janvier 2024 et décembre 2024.</p> <label for="datMois">Prochaines vacances</label> <input type="month" name="datMois" id="datMois" min="2024-01" max="2024-12" value="2024-07"> <input type="submit" value="Envoi" name="btn"> </form> </body> </html>

### Semaines

Exemple : zone de saisie semaine
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Formulaire</title> </head> <body> <h3>Zone de saisie semaine</h3> <form method="POST" action="dossier/reception.php"> <label for="datSem">Absent</label> <input type="week" name="datSem" id="datSem"> <p> <input type="submit" value="Envoi" name="btn"> </p> </form> </body> </html>

La zone est faite avec l'élément input dont l'attribut `type` a la valeur `week`. L'élément input est un élement vide (ie sans balise de fermeture).

zone de saisie semaine dans Chrome

L'interface de la zone de saisie offre de nombreuses possibilités. La saisie directe est possible, elle est guidée et seuls des nombres peuvent être saisis.
Les compteurs semaines et années sont indépendants : quand on est semaine 52 et qu'on incrémente la semaine de 1, on ne passe pas en semaine 1 de l'année suivante mais on revient en semaine 1 de l'année affichée.

La zone doit avoir un attribut `name` dont la valeur doit être unique parmi toutes les zones composant le formulaire.

Attribut possible | Utilité
`autocomplete` | Autocomplétion. Les saisies précédemment faites dans la zone sont proposées. Attribut booléen.
`autofocus` | 1er élément activé dans le formulaire. Attribut booléen.
`dirname` | Direction du texte saisi.
`disabled` | Zone désactivée, non transmise au serveur. Aucune interaction n'est possible avec la zone (pas de focus, pas de copie, etc). Attribut booléen.
`form` | `id` du formulaire associé si la zone n'est pas un élément `form` ou concerne un autre formulaire que celui dans lequel elle est imbriquée.
`list` | `id` de la liste de suggestions associée à la zone.
`max` | Valeur maximale acceptée. De la forme aaaa-Wss.
`min` | Valeur minimale acceptée. De la forme aaaa-Wss.
`name` | Nom de la zone.
`readonly` | Zone en lecture seule, transmise au serveur. La zone peut avoir le focus et le contenu peut être copié. Attribut booléen.
`required` | Zone obligatoire. Attribut booléen.
`step` | Valeur du pas d'incrément/décrément. Entier positif.
`value` | Valeur initiale de la zone (de la forme aaaa-Wss) et valeur transmise au serveur après saisie (de la forme aaaa-Wss).

Toutes les semaines utilisées comme valeur d'attribut doivent être au format aaaa-Wss (4 chiffres pour l'année, 1 tiret, la lettre majuscule W, 2 chiffres pour le numéro de l'année).

Il est possible de limiter la semaine saisie dans un intervalle donné avec les attributs `min` et `max`.

L'attribut `step` n'est pas pris en compte bien qu'il fasse partie des spécifications.

En cas de saisie directe et de limites, si la valeur saisie est hors limites, un message d'erreur est affiché automatiquement par le navigateur et l'envoi du formulaire est bloqué.
Le texte du message, sa mise en forme et son positionnement ne sont pas gérés par le code HTML mais par le navigateur.

Utilisez l'exemple suivant pour tester ces fonctionnalités.

Exemple : zone de saisie semaine
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Zone de saisie semaine</title> <style> form {width: 300px; margin: 0 auto} label {display:block; margin: 1em 0 0.2em 0} input[name="btn"] {display:block; margin:2em auto} </style> </head> <body> <form action="dossier/reception.php" method="POST"> <h3>Saisie de semaine</h3> <p>La valeur initiale est la semaine 10 de 2018. La saisie doit être comprise entre la semaine 1 de 2018 et la semaine 52 de 2018.</p> <label for="datSem">Repos</label> <input type="week" name="datSem" id="datSem" min="2018-W01" max="2018-W52" value="2018-W10"> <input type="submit" value="Envoi" name="btn"> </form> </body> </html>

### Heures

Exemple : zone de saisie heure
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Formulaire</title> </head> <body> <h3>Zone de saisie heure</h3> <form method="POST" action="dossier/reception.php"> <label for="datHeure">Heure d'arrivée</label> <input type="time" name="datHeure" id="datHeure"> <p> <input type="submit" value="Envoi" name="btn"> </p> </form> </body> </html>

La zone est faite avec l'élément input dont l'attribut `type` a la valeur `time`. L'élément input est un élement vide (ie sans balise de fermeture).

L'interface de la zone de saisie est simple, avec saisie automatique par incrément, ou saisie directe guidée. Le nombre d'heures étant limité à 23, cette zone ne peut pas toujours être utilisée pour afficher un temps passé plutôt qu'un heure de la journée.
Les compteurs heures, minutes et secondes sont indépendants : quand on est à 23h59 et qu'on incrémente les minutes de 1, on ne passe pas à 24h00 mais on revient à 23h00.

La zone doit avoir un attribut `name` dont la valeur doit être unique parmi toutes les zones composant le formulaire.

Attribut possible | Utilité
`autocomplete` | Autocomplétion. Les saisies précédemment faites dans la zone sont proposées. Attribut booléen.
`autofocus` | 1er élément activé dans le formulaire. Attribut booléen.
`dirname` | Direction du texte saisi.
`disabled` | Zone désactivée, non transmise au serveur. Aucune interaction n'est possible avec la zone (pas de focus, pas de copie, etc). Attribut booléen.
`form` | `id` du formulaire associé si la zone n'est pas un élément `form` ou concerne un autre formulaire que celui dans lequel elle est imbriquée.
`list` | `id` de la liste de suggestions associée à la zone.
`max` | Valeur maximale acceptée. De la forme HH:MM ou HH:MM:SS.
`min` | Valeur minimale acceptée. De la forme HH:MM ou HH:MM:SS.
`name` | Nom de la zone.
`readonly` | Zone en lecture seule, transmise au serveur. La zone peut avoir le focus et le contenu peut être copié. Attribut booléen.
`required` | Zone obligatoire. Attribut booléen.
`step` | Valeur du pas d'incrément/décrément. Entier positif.
`value` | Valeur initiale de la zone (de la forme HH:MM ou HH:MM:SS) et valeur transmise au serveur après saisie (de la forme HH:MM ou HH:MM:SS).

Toutes les heures utilisées comme valeur d'attribut doivent être au format HH:MM ou au format HH:MM:SS (2 chiffres pour l'heure, le caractère :, 2 chiffres pour les minutes, le caractère :, 2 chiffres pour les secondes).

C'est l'attribut `step` qui définit le format de la zone.

- Si l'attribut `step` est absent ou sa valeur égale à 0, le format de la zone est HH:MM.
- Si l'attribut `step` a une valeur plus grande que 0, le format de la zone est HH:MM:SS. La valeur sera utilisée pour incrémenter ou décrémenter les secondes uniquement.

Il est possible de limiter la semaine saisie dans un intervalle donné avec les attributs `min` et `max`.

En cas de saisie directe et de limites, si la valeur saisie est hors limites, un message d'erreur est affiché automatiquement par le navigateur et l'envoi du formulaire est bloqué.
Le texte du message, sa mise en forme et son positionnement ne sont pas gérés par le code HTML mais par le navigateur.

Utilisez l'exemple suivant pour tester ces fonctionnalités.

Exemple : zone de saisie heure
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Zone de saisie heure</title> <style> form {width: 300px; margin: 0 auto} label {display:block; margin: 1em 0 0.2em 0} input[name="btn"] {display:block; margin:2em auto} </style> </head> <body> <form action="dossier/reception.php" method="POST"> <h3>Heure au format HH:SS</h3> <p>La valeur initiale est 14h30. La saisie doit être comprise entre 12h et 16h45.</p> <label for="datH1">Départ</label> <input type="time" name="datH1" id="datH1" min="12:00" max="16:45" value="14:30"> <h3>Heure au format HH:SS:MM</h3> <p>La valeur initiale est 1h 5min et 10s. La saisie doit être comprise entre 1h et 2h. L'incrément est de 5 secondes.</p> <label for="datH2">Temps passé</label> <input type="time" name="datH2" id="datH2" min="01:00" max="02:00" value="01:05:10" step="5"> <input type="submit" value="Envoi" name="btn"> </form> </body> </html>

### Date et heure

Exemple : zone de saisie date et heure
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Formulaire</title> </head> <body> <h3>Zone de saisie date et heure</h3> <form method="POST" action="dossier/reception.php"> <label for="datArrive">Jour et heure d'arrivée </label> <input type="datetime-local" name="datArrive" id="datArrive"> <p> <input type="submit" value="Envoi" name="btn"> </p> </form> </body> </html>

La zone est faite avec l'élément input dont l'attribut `type` a la valeur `datetime-local` ou `datetime`. L'élément input est un élement vide (ie sans balise de fermeture).

La différence entre `datetime-local` et `datetime` se trouve dans la représentation de l'heure qui pour `datetime` devrait contenir aussi le fuseau horaire de la donnée. `datetime` n'est implémenté par aucun navigateur.

L'interface de la zone de saisie joint l'interface de saisie `date` et l'interface de saisie `time`. Reportez vous aux parties précédentes de cette page pour les détails.

La zone doit avoir un attribut `name` dont la valeur doit être unique parmi toutes les zones composant le formulaire.

Attribut possible | Utilité
`autocomplete` | Autocomplétion. Les saisies précédemment faites dans la zone sont proposées. Attribut booléen.
`autofocus` | 1er élément activé dans le formulaire. Attribut booléen.
`dirname` | Direction du texte saisi.
`disabled` | Zone désactivée, non transmise au serveur. Aucune interaction n'est possible avec la zone (pas de focus, pas de copie, etc). Attribut booléen.
`form` | `id` du formulaire associé si la zone n'est pas un élément `form` ou concerne un autre formulaire que celui dans lequel elle est imbriquée.
`list` | `id` de la liste de suggestions associée à la zone.
`max` | Valeur maximale acceptée. De la forme aaaa-mm-jjTHH:MM ou aaaa-mm-jjTHH:MM:SS.
`min` | Valeur minimale acceptée. De la forme aaaa-mm-jjTHH:MM ou aaaa-mm-jjTHH:MM:SS.
`name` | Nom de la zone.
`readonly` | Zone en lecture seule, transmise au serveur. La zone peut avoir le focus et le contenu peut être copié. Attribut booléen.
`required` | Zone obligatoire. Attribut booléen.
`step` | Valeur du pas d'incrément/décrément. Entier positif.
`value` | Valeur initiale de la zone (de la forme aaaa-mm-jjTHH:MM ou aaaa-mm-jjTHH:MM:SS) et valeur transmise au serveur après saisie (de la forme aaaa-mm-jjTHH:MM ou aaaa-mm-jjTHH:MM:SS).

Toutes les dates/heures utilisées comme valeur d'attribut doivent être au format aaaa-mm-jjTHH:MM ou au format aaaa-mm-jjTHH:MM:SS (4 chiffres pour l'année, 1 tiret, 2 chiffres pour le mois, 1 tiret, 2 chiffres pour le jour, le caractère T majsucule, 2 chiffres pour l'heure, le caractère :, 2 chiffres pour les minutes, le caractère :, 2 chiffres pour les secondes).

Comme avec `type=time`, c'est l'attribut `step` qui définit si la zone affichera les secondes ou pas.

- Si l'attribut `step` est absent ou sa valeur égale à 0, la zone n'affiche pas les secondes.
- Si l'attribut `step` a une valeur plus grande que 0, la zone affiche les secondes. La valeur sera utilisée pour incrémenter ou décrémenter les secondes uniquement.

Il est possible de limiter la semaine saisie dans un intervalle donné avec les attributs `min` et `max`.

En cas de saisie directe et de limites, si la valeur saisie est hors limites, un message d'erreur est affiché automatiquement par le navigateur et l'envoi du formulaire est bloqué.
Le texte du message, sa mise en forme et son positionnement ne sont pas gérés par le code HTML mais par le navigateur.

Utilisez l'exemple suivant pour tester ces fonctionnalités.

Exemple : zone de saisie date et heure
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Zone de saisie date et heure</title> <style> form {width: 300px; margin: 0 auto} label {display:block; margin: 1em 0 0.2em 0} input[name="btn"] {display:block; margin:2em auto} </style> </head> <body> <form action="dossier/reception.php" method="POST"> <h3>Heure au format HH:SS</h3> <p>La valeur initiale est le 22 juin 2010 12h. La saisie doit être comprise entre le 22 juin 2010 0h et le 30 juin 2010 14h.</p> <label for="datH1">Départ</label> <input type="datetime-local" name="datH1" min="2010-06-22T00:00" max="2010-06-30T14:00" value="2010-06-22T12:00" id="datH1"> <h3>Heure au format HH:SS:MM</h3> <p>La valeur initiale est le 13 juillet 2010, 14h. La saisie doit être comprise entre le 1 juillet 2010 et le 31 aout 2010, 12h. L'incrément est de 10 secondes.</p> <label for="datH2">Arrivée</label> <input type="datetime-local" name="datH2" min="2010-07-13T12:00:00" max="2010-08-31T12:00:00" step="10" value="2010-07-13T14:00:00" id="datH2"> <input type="submit" value="Envoi" name="btn"> </form> </body> </html>