Zones de saisie de texte

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

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

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

Une solution possible

Exercice : saisie texte simple

Texte masqué

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.

Texte multi-lignes

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.

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

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

Une solution possible

Exercice : saisie textarea

Texte avec liste de suggestions

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 .

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

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

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

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".