Formats spécifiques

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

La gestion automatique de formats de données spécifiques est bien sûr toujours intéressante en général. Elle peut aussi apporter un plus quand la page est vue sur une tablette ou un smart phone qui pourront éventuellement fournir un clavier adapté pour effectuer la saisie.

Nombres

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

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. Nombre à virgule flottante.
`min`	Valeur minimale acceptée. Nombre à virgule flottante.
`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. Nombre à virgule flottante positif.
`value`	Valeur initiale de la zone et valeur transmise au serveur après saisie.

Avec type=number, l'élément input accepte des attributs permettant de limiter l'intervalle de saisie (min et max) et de finir un pas d'incrément (step) .
La définition de ce pas d'incrément est importante car elle permet de donner le format du nombre : le nombre saisi ne pourra pas avoir plus de décimales que la valeur de step.
S la valeur de step est un entier, le nombre saisi devra être un entier. Si la valeur de step est 0.1, le nombre saisi ne pourra pas avoir plus de 1 décimal. Si la valeur de step est 0.01, le nombre saisi ne pourra pas avoir plus de 2 décimal. Etc.

Avant d'envoyer le contenu du formulaire au serveur, le navigateur vérifie la validité de la zone. Si la valeur saisie dans la zone n'est pas un nombre, ou si elle est hors limite ou ne correspond pas au format défini par step, 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.

Recherche location

Complétez le code HTML pour obtenir le résultat ci-contre.

La feuille de style liée à l'exercice (form05.css) fera automatiquement la mise en forme des éléments fieldset et legend

Le formulaire utilise la méthode POST pour envoyer les informations saisies à location.php.

Les zones de saisie des nombres ont les caractèristiques suivantes.

Nom	Valeur mini	Valeur maxi	Valeur défaut	Incrément
`nbrPieces`	1	8	3	1
`nbrSurface`	15	200	70	5
`nbrMini`	100	1000	100	50
`nbrMaxi`	100	1000	100	50
`nbrMois`	0	12	1	0.5

Le bouton radio indiquant la recherche sur le nombre de pièces est sélectionné par défaut.

Les boutons s'appellent btnReset et btnSubmit.

Code à compléter

Une solution possible

Exercice : recherche location

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Recherche location</title>
		<link href="../html08/styles/form05.css" rel="stylesheet">
		<style>
			input[type="number"] { width: 50px;}
		</style>
	</head>
	<body>
		<form method="POST" action="location.php">	
			<fieldset>
				<legend>Location</legend>
				<div>
					<input type="radio" name="radType"
						   value="P" checked>
					<input type="number" name="nbrPieces" 
						   id="nbrPieces" min="1" max="8" 
						   step="1" value="3"> 
					<label for="nbrPieces">pièces</label>
				</div>
				<div>
					<input type="radio" name="radType"
						   value="S">
					<input type="number" name="nbrSurface"
						   id="nbrSurface" min="15" max="200" 
						   step="5" value="70"> 
					<label for="nbrSurface">m<sup>2</sup>
						</label>
				</div>				
				<div>
					<label for="nbrMini">Entre</label>
					<input type="number" name="nbrMini" 
						   id="nbrMini" min="100" max="1000" 
						   step="50" value="100">€ 
					<label for="nbrMaxi">et</label>
					<input type="number" name="nbrMaxi" 
						   id="nbrMaxi" min="100" max="1000" 
						   step="50" value="1000">€
				</div>
				<div>
					<label for="nbrMois">Libre dans</label>
					<input type="number" name="nbrMois" 
						   id="nbrMois" min="0" max="12" 
						   step="0.5" value="1">mois
				</div>
			</fieldset>
			
			<fieldset>
				<input type="reset" value="Effacer"
					   name="btnReset">
				<input type="submit" value="Rechercher"
					   name="btnSubmit">
			</fieldset>			
		</form>
	</body>
</html>

URL

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

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

Avant d'envoyer le contenu du formulaire au serveur, le navigateur vérifie la validité de la zone. Si la valeur saisie dans la zone n'est pas une URL valide, 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.

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.
`maxlength`	Nombre maximal de caractères pouvant être saisis.
`name`	Nom de la zone.
`pattern`	Expression régulière à laquelle doit correspondre la valeur de la zone. Permet de vérifier la saisie. Des centaines d'expressions régulières.
`placeholder`	Texte d'aide, d'indication de saisie.
`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.
`size`	Nombre de caractères visibles directement. Si l'attribut est absent, la valeur par défaut est 20.
`value`	Valeur initiale de la zone et valeur transmise au serveur après saisie.

e-mail

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

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

Avant d'envoyer le contenu du formulaire au serveur, le navigateur vérifie la validité de la zone. Si la valeur saisie dans la zone n'est pas une adresse e-mail valide, 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.

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.
`maxlength`	Nombre maximal de caractères pouvant être saisis.
`name`	Nom de la zone.
`pattern`	Expression régulière à laquelle doit correspondre la valeur de la zone. Permet de vérifier la saisie. Des centaines d'expressions régulières.
`placeholder`	Texte d'aide, d'indication de saisie.
`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.
`size`	Nombre de caractères visibles directement. Si l'attribut est absent, la valeur par défaut est 20.
`value`	Valeur initiale de la zone et valeur transmise au serveur après saisie.

Enquête

Complétez le code HTML pour obtenir le résultat ci-contre.

La feuille de style liée à l'exercice (form05.css) fera automatiquement la mise en forme des éléments fieldset et legend

Le formulaire utilise la méthode POST pour envoyer les informations saisies à enquete.php.

Les zones de saisie s'appellent respectivement urlMoteur, urlSite et melAdresse. Les 3 zones sont obligatoires et affichent un texte d'aide. La zone urlMoteur est liée à une liste de suggestions qui propose http://www.google.fr et http://www.bing.fr.

Les boutons s'appellent btnReset et btnSubmit.

Code à compléter

Une solution possible

Exercice : enquête

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Enquête</title>
		<link href="../html08/styles/form05.css" rel="stylesheet">
		<style>
			input[type="url"],
			input[type="email"] { width: 95%;}
		</style>
	</head>
	<body>
		<form method="POST" action="enquete.php">	
			<fieldset>
				<legend>Enquête</legend>
				<label for="urlMoteur">Moteur de recherche préféré</label>
				<br>
				<input type="url" name="urlMoteur" 
					   id="urlMoteur" required list="URL"
					   placeholder="Url complète SVP">
				<datalist id="URL">					
					<option value="http://www.google.fr">
					<option value="http://www.bing.fr">
				</datalist>
				<br>
				<label for="urlSite">Site préféré</label>
				<br>
				<input type="url" name="urlSite" 
					   id="urlSite" required
					   placeholder="Url complète SVP">
				<br>
				<label for="melAdresse">Votre adresse mail</label>
				<br>							
				<input type="email" name="melAdresse" 
					   id="melAdresse" required
					   placeholder="Adresse valide SVP">

</fieldset>
			
			<fieldset>
				<input type="reset" value="Effacer"
					   name="btnReset">
				<input type="submit" value="Envoyer"
					   name="btnSubmit">
			</fieldset>			
		</form>
	</body>
</html>

Téléphone

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

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

Il n'existe aucun format prédéfini de numéros de téléphone à cause de la multiplicité de ceux-ci au niveau mondial.
Il faut utiliser l'attribut pattern et des expressions régulières si on veut mettre en place une validation de la saisie effectuée dans la zone.

^(\d{2}[\-\. ]?){4}\d{2}$
validera la saisie de numéros français comme 0102030405, 01 02 03 04 05, 01.02.03.04.05 et 01-02-03-04-05.

^\+(9[976]\d|8[987530]\d|6[987]\d|5[90\d|42\d|3[875]\d| 2[98654321]\d|9[8543210]|8[6421]|6[6543210]|5[87654321]|4[987654310]| 3[9643210]|2[70]|7|1)\d{1,14}$
validera la saisie de numéros de téléphone au format international comme +33102030405.

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.
`maxlength`	Nombre maximal de caractères pouvant être saisis.
`name`	Nom de la zone.
`pattern`	Expression régulière à laquelle doit correspondre la valeur de la zone. Permet de vérifier la saisie. Des centaines d'expressions régulières.
`placeholder`	Texte d'aide, d'indication de saisie.
`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.
`size`	Nombre de caractères visibles directement. Si l'attribut est absent, la valeur par défaut est 20.
`value`	Valeur initiale de la zone et valeur transmise au serveur après saisie.