HTML - Zones de texte

Les zones de texte de ce type sont utilisées pour des commentaires, blogs, memos ou n'importe quel autre but qui nécessite un espace d'expression.

Pour créer une zone de texte nous aurons besoin d'une balise d'ouverture et de fermeture comme ceci:

html<textarea>Zone de texte!</textarea>

Demo

Textarea - taille de la zone de texte

Pour changer la taille standard d'une zone de texte nous utiliserons des colonnes et des lignes. Ceux-ci auront des valeurs numériques. Plus grand leur valeur sera, plus grand sera la zone de texte.

html<textarea cols="50" rows="2">Zone de texte!</textarea>

<textarea cols="40" rows="5">Zone de texte!</textarea>

<textarea cols="20" rows="10">Zone de texte!</textarea>

Demo

Textarea - L'attribut wrap

L'attribut de la balise <textarea>, établiera la façon par laquelle l'utilisateur réagira lorsqu'il atteindra la fin de la ligne.

Wrap aura une des trois valeurs suivantes: hard, soft, off.

• Hard wrap - ira a la ligne a la fin de chaque ligne et enverra le texte dans le même format qu'il a été introduit.
• Soft wrap - ira a la ligne a la fin de chaque ligne, mais contrairement au Hard il enverra le texte dans un format libre.
• Off wrap - ceci ne formatera pas le texte d'aucune façon, laissant le texte sur une ligne simple continue.

L'attribut Hard/Soft

html<textarea cols="20" rows="5" wrap="hard">Hard - ira a la ligne a la fin de chaque ligne et enverra le texte dans le même format qu'il a été introduit.</textarea>

Demo

L'attribut off

html<textarea cols="20" rows="5" wrap="off">Off - ceci ne formatera pas le texte d'aucune façon, laissant le texte sur une ligne simple continue.</textarea>

Demo

Textarea - L'attribut readonly

En fonction de la valeur de cet attribut, l'utilisateur est capable (ou non) de changer le contenu de la zone de texte. L'attribut readonly peut avoir les valeurs 'yes' ou 'no'.

html<textarea cols="20" rows="5" wrap="hard" readonly="yes">Comme vous pouvez le voir ce texte ne peut pas être modifié. Au cas où la valeur 'no' aurait été choisie le résultat opposé aurait été obtenu.</textarea>

Demo

Comme vous pouvez le voir ce texte ne peut pas être modifié. Au cas où la valeur 'no' aurait été choisie le résultat opposé aurait été obtenu. Même s'il ne peux pas etre modifié, il peut être sélectionné et copié avec CTRL-C ou clic droit/copier.

Textarea - L'attribut disabled

L'attribut disabled n'est pas très différent de readonly. Le texte sera montré en gris, désactivant par la même occasion la possibilité de modifier le texte que la zone de texte contient.

html<textarea cols="20" rows="5" wrap="hard" disabled="yes">L'attribut disabled n'est pas très différent de readonly. Le texte sera montré en gris, désactivant par la même occasion la possibilité de modifier le texte que la zone de texte contient.</textarea>

Demo

Vous aurez à vous entrainer un peu avec ces attributs pour mieux comprendre. Bonne chance!