Maintenant que nous savons créer un formulaire de base, il nous faut entrer des zones de saisies. Il existe deux formes de zones de saisies que nous allons voir ici : les zones de saisies monolignes et les zones de saisies multilignes.
Les zones de saisies monolignes vous permettent d'entrer des informations courtes, contenues sur une seule ligne, tandis que les zones de saisies multilignes vous permettent d'entrer des informations plus longues et sur plusieurs lignes.
La Zone de Texte monoligne
La zone de texte monoligne est plus adaptée aux saisies de pseudo, d'adresse e-mail, de mot de passe...
Voici comment on créé une zone de texte monoligne : on utilise la balise <input />. Nous serons amenés à utiliser cette balise tout au long du chapitre car elle est très récurrente en ce qui concerne les forumlaires.
Mais cette balise <input /> signifie simplement qu'il y aura une entrée de d'informations. Il faut maintenant lui indiquer quel type d'information, et c'est pour cela que l'on utilise l'attribut "type".
On va ajouter à cette balise <input /> un attribut "type" de valeur "text", pour lui indiquer qu'elle doit recevoir des informations textuelles.
Voici le code à utiliser (pensez à bien ajouter ce code à l'intérieur des balises de formulaires que nous venons de voir) :
<input type="text"/>
Ce n'est toujours pas suffisant ! Il faut lui indiquer un nom à cette balise d'entrée de texte !
Pour cela on va utiliser l'attribut "name" et lui donner un nom, celui que vous voulez !
On peut également lui ajouter des attributs optionnels comme ceux-ci :
maxlength : pour indiquer une longueur de saisie maximale
value : pour pré-remplir le champ de texte
placeholder : pareil que "value" mais l'information disparaît lorsque le visiteur clique sur le champ de texte
Et voilà, vous maîtrisez maintenant parfaitement les zones monolignes de saisies de texte.
La Zone de Texte "mot de passe"
Ça rentre dans la catégorie zone de texte monoligne mais ça mérite quand même de s'y attarder un petit peu.
Si vous voulez que votre zone de saisie se comporte comme une zone de mot de passe (où les lettres sont cachées), c'est très facile à faire avec le langage HTML.
Il suffit de changer l'attribut type de "text" en "password".
La Zone de Texte multiligne
Pour les zones de saisies multilignes c'est un peut plus compliqué car on change carrément de balise HTML. Cette fois ce n'est plus <input /> que l'on va utiliser mais la balise <textarea> (ce n'est pas une balise orpheline comme <input /> dans la mesure où elle s'ouvre et se ferme normalement).
À cette balise <textarea> il faut donner un attribut "name", comme pour les <input /> vous mettez ce que vous voulez.
Cette balise vous affiche donc une zone de saisie qui s'étale sur plusieurs lignes, et qui autorise le retour à la ligne.
Pour agrandir cette balise il faudra utiliser les propriétés height et width de CSS.
Voici un exemple de code :
<textarea name="nom"></textarea>
Pourquoi est-ce que l'on ne met rien dans cette balise ?
Vous pouvez indiquer une valeur dedans, ça va simplement pré-remplir la zone de saisie comme si on utilisait l'attribut "value" sur un <input />.