Dates et heures

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

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

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

Mois

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

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.

Semaines

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

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.

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

Exemple : zone de saisie semaine

Heures

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.

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

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.

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>