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

### Zone cachée

Exemple : zone de saisie cachée
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Formulaire</title> </head> <body> <h3>Zone de saisie cachée</h3> <form method="POST" action="dossier/reception.php"> <input type="hidden" name="txtX" value="secret"> <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 `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

Exemple : zone de saisie intervalle
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Formulaire</title> </head> <body> <h3>Zone de saisie intervalle</h3> <form method="POST" action="dossier/reception.php"> <label for="txtNbr">Valeur</label> <input type="range" name="txtNbr" id="txtNbr"> <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 `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.

range dans 3 navigateurs

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

Exemple : zone de saisie fichier
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Formulaire</title> </head> <body> <h3>Zone de saisie fichier</h3> <form method="POST" action="dossier/reception.php" enctype="multipart/formdata"> <label for="ficNom">Fichier</label> <input type="file" name="ficNom" id="ficNom"> <p> <input type="submit" value="Télécharger" name="btn"> </p> </form> </body> </html>

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.

Exemple : zone de saisie fichier
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Zone de saisie fichier</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 fichier</h3> <p> Vous ne pouvez sélectionner que des fichiers image gif ou png. </p> <label for="ficNom">Fichier à télécharger</label> <input type="file" name="ficNom" id="ficNom" accept="image/gif,image/png"> <input type="submit" value="Télécharger" name="btn"> </form> </body> </html>

### Sélecteur de couleur

Exemple : zone de saisie couleur
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Formulaire</title> </head> <body> <h3>Zone de saisie couleur</h3> <form method="POST" action="dossier/reception.php"> <label for="txtCouleur">Couleur préférée</label> <input type="color" name="txtCouleur" id="txtCouleur"> <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 `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.

Exemple : choix réduit de couleurs
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Formulaire</title> </head> <body> <h3>Zone de saisie couleur</h3> <form method="POST" action="dossier/reception.php"> <label for="txtCouleur">Couleur préférée</label> <input type="color" name="txtCouleur" id="txtCouleur" list="lstCouleurs"> <datalist id="lstCouleurs"> <option>#FF0000</option> <option>#00FF00</option> <option>#0000FF</option> <option>#FFFF00</option> </datalist> <p> <input type="submit" value="Envoi" name="btn"> </p> </form> </body> </html>