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

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

Exemple : zone de saisie nombre
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Zone de saisie nombre</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 nombre</h3> <p>La valeur minimale est -1.5, la maximale est 2. Le pas d'incrément est de 0.01.</p> <label for="txtNbr">Nombre</label> <input type="number" name="txtNbr" min="-1.5" max="2" step="0.01" id="txtNbr"> <input type="submit" value="Envoi" name="btn"> </form> </body> </html>

#### Recherche location

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

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> </form> </body> </html>

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

Exemple : zone de saisie URL
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Formulaire</title> </head> <body> <h3>Zone de saisie URL</h3> <form method="POST" action="dossier/reception.php"> <label for="txtSite">Adresse de votre site Web </label> <input type="url" name="txtSite" size="50" id="txtSite"> <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 `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

Exemple : zone de saisie e-mail
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Formulaire</title> </head> <body> <h3>Zone de saisie e-mail</h3> <form method="POST" action="dossier/reception.php"> <label for="txtMail">Votre adresse mél </label> <input type="email" name="txtMail" size="40" id="txtMail"> <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 `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

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

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> </form> </body> </html>

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

Exemple : zone de saisie téléphone
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Formulaire</title> </head> <body> <h3>Zone de saisie téléphone</h3> <form method="POST" action="dossier/reception.php"> <label for="txtTelef">Votre numéro de téléphone </label> <input type="tel" name="txtTelef" size="20" id="txtTelef"> <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 `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.

Exemple : validation de numéro de téléphone
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Formulaire</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>Validation de numéro de téléphone</h3> <label for="txtTel">Votre numéro</label> <input type="tel" name="txtTel" size="30" id="txtTel" placeholder="Format : 01.02.03.04.05" pattern="^(\d{2}\.){4}\d{2}$"> <input type="submit" value="Envoi" name="btn"> </form> </body> </html>

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.