Les zones de textes sont sans doute les zones de saisies les plus courantes. Même si leur rôle diminuera peut être dans l'avenir à cause des périphériques avec lesquels la saisie de textes n'est pas pratique (tablette, smartphone), elles resteront toujours incontournables.

### Texte simple

Exemple : zone de saisie texte simple
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Formulaire</title> </head> <body> <h3>Zone de saisie texte simple</h3> <form action="dossier/reception.php" method="POST"> <label for="txtNom">Votre nom </label> <input type="text" name="txtNom" size="30" maxlength="40" id="txtNom"> <p> <input type="submit" value="Envoi" name="btn"> </p> </form> </body> </html>

C'est la zone de saisie la plus classique et la plus souvent utilisée dans les formulaires. Elle permet la saisie d'un texte monoligne, relativement court à cause de la lisibilité dans une largeur déterminée.

La zone est faite avec l'élément input dont l'attribut `type` a la valeur `text`, ou dont l'attribut `type` n'est pas précisé. 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.
`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.

Exemple : zone de saisie texte simple
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Zone de saisie texte simple</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"> <label for="txt1">Placeholder et vérif</label> <input type="text" name="txt1" size="40" maxlength="40" id="txt1" placeholder="Doit commencer par A et finir par z" pattern="^A.*z$"> <label for="txt2">Zone obligatoire</label> <input type="text" name="txt2" size="10" maxlength="10" id="txt2" required> <label for="txt3">Zone désactivée</label> <input type="text" name="txt3" size="40" value="Valeur non transmise" disabled> <label for="txt4">Zone en lecture seule</label> <input type="text" name="txt4" size="40" value="Valeur transmise" readonly> <input type="submit" value="Envoi" name="btn"> </form> </body> </html>

A noter

- La validation de la 1ére zone est faite uniquement si elle n'est pas vide, bien que l'expression régulière de l'attribut `pattern` demande que la zone contienne au moins 2 caractères : un A et un z.
- L'affichage par défaut d'une zone désactivée est identique à une zone affichant le message de l'attribut `placholder` et peut prêter à confusion

#### Saisie texte simple

saisie texte simple

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

La feuille de style liée à l'exercice (`form04.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 à `script.php`.

Les zones de saisie ont les caractéristiques suivantes:

Nom | Taille | Maxi caractères | Obligatoire
--- | --- | --- | ---
txtRue | 44 | 60 |
txtCode | 6 |  | Oui
txtVille | 34 | 40 | Oui

La zone `txtCode` doit être validée avec l'expression régulière
`^(0[1-9]|[1-8][0-9]|9[0-8])\d{3}$`

Les boutons s'appellent `btnReset` et `btnSubmit`.

Code à compléter

Exercice : saisie texte simple
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Structurer un formulaire</title> <link rel="stylesheet" href="../html08/styles/form04.css"> </head> <body> </body> </html>

Une solution possible

Exercice : saisie texte simple
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Saisie texte simple</title> <link rel="stylesheet" href="../html08/styles/form04.css"> </head> <body> <form method="POST" action="script.php"> <fieldset> <legend>Adresse</legend> <div> <input type="text" name="txtRue" size="44" maxlength="60" placeholder="Rue"> </div> <div> <input type="text" name="txtCode" size="6" placeholder="CP" required pattern="^(0[1-9]|[1-8][0-9]|9[0-8])\d{3}$"> <input type="text" name="txtVille" size="34" maxlength="40" placeholder="Ville" required> </div> </fieldset> <fieldset> <input type="reset" name="btnReset" value="J'efface"> <input type="submit" name="btnSubmit" value="J'envoie"> </fieldset> </form> </body> </html>

### Texte masqué

Exemple : zone de saisie texte masqué
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Formulaire</title> </head> <body> <h3>Zone de saisie texte masqué</h3> <form action="dossier/reception.php" method="POST"> <label for="txtPasse">Mot de passe </label> <input type="password" name="txtPasse" size="30" maxlength="40" id="txtPasse"> <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 `password`. 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.

Cette zone de saisie est identique à la zone de texte simple, à la différence que :

- le texte saisi est masqué par un rond noir ou un astérisque (dépendant du système d'exploitation),
- copier le contenu en clair de la zone n'est pas possible.

Le contenu de cette zone de saisie n'est pas sécurisé car le remplacement de caractère est uniquement visuel. La valeur saisie dans la zone transitera en clair sur le réseau lors de la soumission du formulaire. Le contenu est également accessible en clair par JavaScript ou n'importe quel outil développeur et inspecteur DOM.

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.

Exemple : zone de saisie texte masqué
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Zone de saisie texte masqué</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"> <p> Le mot de passe doit être composé de 4 chiffres, suivis de 2 lettres en minuscules, suivies de 4 caractères au choix. </p> <label for="txt1">Mot de passe</label> <input type="password" name="txt1" size="40" id="txt1" required pattern="^\d{4}[a-z]{2}.{4}$"> <input type="submit" value="Envoi" name="btn"> </form> </body> </html>

### Texte multi-lignes

Exemple : zone de saisie texte multi-lignes
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Formulaire</title> </head> <body> <h3>Zone de saisie texte multi-lignes</h3> <form action="dossier/reception.php" method="POST"> <label for="txtComment">Commentaires</label> <textarea name="txtComment" id="txtComment" cols="30" rows="6"></textarea> <p> <input type="submit" value="Envoi" name="btn"> </p> </form> </body> </html>

La zone est faite avec l'élément textarea.
Il doit y avoir une balise d'ouverture `<textarea>` et une balise de fermeture `</textarea>`

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

L'élément textarea a plusieurs particularités :

- il n'y a pas d'attribut `value`. Le contenu envoyé au serveur est ce qui se trouve entre la balise d'ouverture `<textarea>` et la balise de fermeture `</textarea>` ;
- le contenu saisi dans cette zone peut avoir des sauts de ligne
- la largeur de la zone est définie par l'attribut `cols` qui représente (plus ou moins) un nombre de caractères ;
- la hauteur de la zone est définie par l'attribut `rows` qui réprésente un nombre de lignes. Si le texte saisi dépasse la hauteur définie, une barre de défilement vertical sera affichée automatiquement par le navigateur ;
- les navigateurs de dernière génération ajoutent automatiquement la possibilité de redimensionner la zone en "tirant" le point inférieur droit avec la souris ;
- la police de caractères utilisée par défaut est une police à espacement fixe (comme celle utilisée généralement par les éditeurs de code). Elle n'est pas très adaptée à du texte "normal".

A cause de ces spécificités d'affichage, la mise ne forme des zones textarea est le plus souvent réalisée avec des propriétés de style CSS.

Tous les sauts de lignes et tabulations que vous aurez dans votre code HTML, entre les balises `<textarea>` et `</textarea>` seront affichés tel que dans la zone.

Exemple : saut de ligne et tabulations
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Saut de ligne et tabulations</title> </head> <body> <form action="dossier/reception.php" method="POST"> <label for="txtMulti">Texte multi-lignes</label> <textarea name="txtMulti" id="txtMulti" cols="40" rows="15"> Il y a un saut de ligne et 3 tabulations après la balise d'ouverture. Un saut de ligne. Une ligne vierge et 4 tabulations. Le contenu de la zone s'arrête à la balise de fermeture. La fin du contenu aura un saut de ligne et des tabulations. </textarea> <p> <input type="submit" value="Envoi" name="btnEnvoi"> </p> </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.
`cols` | Nombre de caractères affichés en largeur.
`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.
`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.
`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.
`rows` | Nombre de lignes affichées avant qu'une barre de défilement ne soit fournie.

L'exemple suivant présente une mise en forme de textarea avec une classe CSS (un ensemble de règles de style regroupées et nommées).

Exemple : zone de saisie multi-lignes
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Zone de saisie texte multi-lignes</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} .multi-lignes { font-family: serif; width: 300px; height: 100px; resize: none; } </style> </head> <body> <form action="dossier/reception.php" method="POST"> <label for="txt1">Multi-ligne normal</label> <textarea name="txt1" id="txt1" cols="35" rows="3">Cette zone utilise la mise en forme par défaut faite par le navigateur. Le redimensionnement possible n'est pas géré par tous les navigateurs et risque de "faire sauter" la mise en page de votre page Web. Notez aussi que les dimensions sont assez approximatives.</textarea> <label for="txt2">Multi-ligne avec style</label> <textarea name="txt2" id="txt2" class="multi-lignes">Cette zone est mise en forme avec la classe CSS "multi-lignes" définie dans l'élément style. On a changé la police pour qu'elle soit la même que le reste du texte, on a fixé les dimensions en pixels et on a enlevé le redimensionnement.</textarea> <input type="submit" value="Envoi" name="btn"> </form> </body> </html>

#### Saisie textarea

saisie texte simple

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

Remarque : suivant les navigateurs la largeur du textearea peut être différente de celle de la capture d'écran.

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 à `exo_textarea.php`.

La zone "Objet" s'appelle `txtObjet`, fait 44 de long et est obligatoire. Elle doit être initialisée avec le texte qui apparait sur la figure précédente. Son label est lié à la zone (ie quand on clique sur le label, le curseur se met dans la zone).

La zone "Texte" s'appelle `txtTexte`, fait 36 de long et a 5 lignes. Elle doit être initialisée avec le texte qui apparait sur la figure précédente. Son label est lié à la zone (ie quand on clique sur le label, le curseur se met dans la zone). Son label est lié à la zone (ie quand on clique sur le label, le curseur se met dans la zone). La zone est active à l'affichage de la page.

Les boutons s'appellent `btnReset` et `btnSubmit`.

Code à compléter

Exercice : saisie textarea
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Saisie textarea</title> <link rel="stylesheet" href="../html08/styles/form05.css"> </head> <body> </body> </html>

Une solution possible

Exercice : saisie textarea
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Saisie textarea</title> <link rel="stylesheet" href="../html08/styles/form05.css"> </head> <body> <form method="POST" action="exo_textarea.php"> <fieldset> <legend>Message</legend> <label for="txtObjet">Objet</label><br> <input type="text" required id="txtObjet" name="txtObjet" size="44" value="Re : exercice textarea"> <br> <label for="txtTexte">Texte</label><br> <textarea cols="36" rows="5" autofocus id="txtTexte" name="txtTexte"> Le 4 mai à 17:33, François Piat a écrit : Merci de terminer cet exercice au plus tôt. Que la farce soit avec toi.</textarea> </fieldset> <fieldset> <input type="reset" name="btnReset" value="J'efface"> <input type="submit" name="btnSubmit" value="J'envoie"> </fieldset> </form> </body> </html>

### Texte avec liste de suggestions

Exemple : liste de suggestions
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Formulaire</title> </head> <body> <h3>Liste de suggestions</h3> <form action="dossier/reception.php" method="POST"> <label for="txtPerso">Personnages</label> <input type="text" name="txtPerso" id="txtPerso" size="30" list="personnages"> <datalist id="personnages"> <option value="Dark Vador"> <option value="Yoda"> <option value="Gandalf"> <option value="Gollum"> </datalist> <p> <input type="submit" value="Envoi" name="btn"> </p> </form> </body> </html>

Les listes de suggestions se construisent avec 2 éléments : l'élément datalist est le conteneur des termes de la liste qui sont faits avec des éléments option.
Il doit y avoir une balise d'ouverture `<datalist>` et une balise de fermeture `</datalist>`

Les termes de la liste sont définit par l'attribut `value` des éléments option qui sont ici des élements vides (ie sans balise de fermeture).

La liste ainsi constituée a un attribut `id` qui lui permet d'être rattachée à une zone de saisie qui a un attribut `list` .

structure d'une liste de suggestions

La valeur de l'attribut `id` de l'élément datalist doit être unique parmi tous les `id` de la page HTML.

Le plus généralement datalist est rattaché à une zone de saisie de texte simple (input de `type="text"`), mais elle peut aussi être rattachée à des zones de `type` color, date, datetime, datetime-local, email, month, number, password, range, tel, search, time, url, week.

Les navigateurs ne gérent pas les listes de suggestions de la même façon.
Dans l'exemple précédent si on saisit "a", Firefox affichera tous les termes de la liste qui contiennent un "a", quelque soit la position de celui-ci dans les mots. Chrome et Internet Explorer affichent uniquement les termes de la liste qui commencent par ce qui est saisi dans la zone texte.
Le nombre de termes affichés répondant à la saisie est différent selon les navigateurs. Ca n'est visible qu'avec les grandes listes, mais peut être un peu gênant pour l'utilisateur.

#### Liste de suggestions

liste de suggestions

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 à `test_datalist.php`.

Les zones de saisie s'appellent respectivement `txtEdit`, `txtPref` et `txtDet`. Elles sont toutes obligatoires et ont une longeur de 30.

La zone `txtEdit` est liée à une liste de suggestions dont les valeurs sont : NetBeans, Eclipse, Scite, Notepad.

Pour les zones `txtPref` et `txtDet` les suggestions sont : ActionScript, C, C#, C++, CSS, HTML, JavaScript, Java, Perl, PHP, Python, Ruby.

Les boutons s'appellent `btnReset` et `btnSubmit`.

Code à compléter

Exercice : liste de suggestions
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Liste de suggestions</title> <link rel="stylesheet" href="../html08/styles/form05.css"> </head> <body> </body> </html>

Une solution possible

Exercice : liste de suggestions
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Liste de suggestions</title> <link rel="stylesheet" href="../html08/styles/form05.css"> </head> <body> <form action="test_datalist.php" method="POST"> <fieldset> <legend>Informatique</legend> <label for="txtNb">Editeur de code préféré</label><br> <input type="text" name="txtEdit" required id="txtEdit" size="30" list="editeurs"> <datalist id="editeurs"> <option value="NetBeans"> <option value="Eclipse"> <option value="Scite"> <option value="Notepad ++"> </datalist> <br> <label for="txtPref">Langage préféré</label> <br> <input type="text" name="txtPref" id="txtPref" required size="30" list="langages" placeholder="Un seul langage SVP"> <br> <label for="txtDet">Langage détesté</label> <br> <input type="text" name="txtDet" id="txtDet" required size="30" list="langages" placeholder="Un seul langage SVP"> <datalist id="langages"> <option value="ActionScript"> <option value="C"> <option value="C#"> <option value="C++"> <option value="CSS"> <option value="HTML"> <option value="JavaScript"> <option value="Java"> <option value="Perl"> <option value="PHP"> <option value="Python"> <option value="Ruby"> </datalist> </fieldset> <fieldset> <input type="reset" name="btnReset" value="J'efface"> <input type="submit" name="btnSubmit" value="J'envoie"> </fieldset> </form> </body> </html>

### Recherche

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

C'est un type de zone introduit par HTML5 et pour le moment aucun navigateur ne fait de différence entre une zone de type `search` et une zone de type `text`.

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.

L'exemple suivant utilise un bouton mis en forme avec une classe CSS (un ensemble de règles de style regroupées et nommées) pour pallier l'absence de différence entre une zone de `type="search"` et une zone de `type="text"`.

Exemple : zone de saisie recherche
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Zone de saisie recherche</title> <style> form {text-align: right} .btn-search { background: url("../exemples/images/search.png") no-repeat; border: 0; width: 24px; height: 24px; cursor: pointer; margin-left: -10px; } </style> </head> <body> <form action="dossier/chercher.php" method="POST"> <label for="txt1">Rechercher</label> <input type="search" name="txt1" size="20" id="txt1" placeholder="saisir un mot"> <input type="submit" name="btn" value="" class="btn-search"> </form> </body> </html>