Zones diverses

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

Zone cachée

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

Ce type de zone n'est pas affiché par le navigateur. Les zones cachées sont très souvent utilisées car elles permettent de faire passer des informations qui ont une importance uniquement pour le programme qui va traiter les informations sur le serveur. On pourra y trouver par exemple des variables d'état d'une application Web, des identifiants de produits ou d'utilisateurs, des données statistiques ou de navigation dans un site, etc.

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

La zone doit avoir un attribut value sans lequel elle ne sert à rien. Si vous voulez que cette valeur normalement cachée à l'utilisateur reste vraiment secrète, je vous conseille de la crypter.

Attribut possible	Utilité
`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.
`readonly`	Zone en lecture seule, transmise au serveur. La zone peut avoir le focus et le contenu peut être copié. Attribut booléen.
`value`	Valeur initiale de la zone et valeur transmise au serveur.

Intervalle

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

Elle permet de saisir des nombres, mais sans que l'utilisateur ne voit la valeur saisie (sauf avec Internet Explorer) ce qui est finalement peu pratique.
La figure ci-dessous montre le rendu du même range dans 3 navigateurs différents.

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.
`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. Nombre à virgule flottante.
`min`	Valeur minimale. 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.

Si les attributs min et max ne sont pas précisé, l'intervalle sera par défaut de 0 à 100, et la valeur initiale sera 50.

Aucun attribut ne permet de spécifier la longueur de la zone. Il faut utiliser la propriété CSS width comme le montre l'exemple suivant.

Exemple : zone de saisie intervalle

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Zone de saisie intervalle</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}
			input[type="range"] {width: 300px}
		</style>
	</head>
	<body>
		<form action="dossier/reception.php" method="POST">
			<h3>Intervalle de 0 à 1 avec pas de 0.01</h3>
		
			<label for="txtR1">Augmentation de salaire</label>
			<input type="range" name="txtR1" id="txtR1"
				   min="0" max="1" step="0.01" value="0">

<h3>Intervalle de 35 à 45 avec pas de 0.5</h3>
		
			<label for="txtR2">Pointure</label>
			<input type="range" name="txtR2" id="txtR2"
				   min="35" max="45" step="0.5" value="39">

<h3>Intervalle de 0 à 20 avec pas de 5</h3>
		
			<label for="txtR3">Note</label>
			<input type="range" name="txtR3" id="txtR3"
				   min="0" max="20" step="5" value="10">
			
			<input type="submit" value="Envoi" name="btn">
		</form>
	</body>
</html>

Téléchargement de fichier

La zone est faite avec l'élément input dont l'attribut type a la valeur file. 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.

La forme que prend la zone est dépendante des navigateurs et donne accès à une boîte de dialogue permettant de sélectionner un fichier dans l'arborescence du disque dur de l'ordinateur client.

Pour des raisons de sécurité, la valeur de cette zone ne peut pas être initialisée ou fixée dans le code HTML. Elle est mise à jour automatiquement par le navigateur quand un fichier a été sélectionné.

Pour le fichier sélectionné puisse être envoyé dans de bonne condition, l'attribut enctype du formulaire contenant la zone doit avoir la valeur multipart/formdata.

Attribut possible	Utilité
`accept`	Types MIME acceptés.
`dirname`	Direction du texte affiché.
`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.
`multiple`	Possibilité de sélectionner plusieurs fichiers. Attribut booléen.
`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.
`value`	Valeur transmise au serveur après saisie.

L'attribut accept permet de définir quel seront les types de fichiers sélectionnables. La valeur de cet attribut est composée par un ou plusieur types MIME (séparés par des virgules). Cet attribut n'est pas supporté par Firefox et de toute façon n'est pas fiable car il semble que les navigateurs se basent sur l'extension du fichier et pas sur son contenu réel. Un simple renommage de fichier suffit donc à passer outre cette barrière.

Sélecteur de couleur

La zone est faite avec l'élément input dont l'attribut type a la valeur color. 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.
`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.
`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.
`value`	Valeur initiale de la zone et valeur transmise au serveur après saisie. Format hexadécimal : # suivi de 6 caractères alphanumériques entre 0 et 9, A et F.

Il est possible de définir et de restreindre la liste des couleurs à choisir en associant un élément datalist à l'élément input. Toutefois, l'utilisateur a toujours accès avec un bouton au sélecteur complet. Tous les navigateurs n'implémentent pas cette liaison avec un élément datalist.