Le langage HTML Balise TEXTAREA

<textarea> : Zone de texte

LES BALISES HTML

<textarea> : Zone de texte
Balise de fermeture obligatoire.

Internet Explorer Firefox Opera Google Chrome Safari

La balise <textarea> est pris en charge dans tous les principaux navigateurs.

La balise <textarea> définit un contrôle de saisie de texte multiligne.

Cette zone de texte peut contenir un nombre illimité de caractères et le texte s'affiche dans une police à espacement fixe (généralement Courier).

La taille d'une zone de texte peut être spécifié par les attributs cols et rows, ou encore mieux ; par le biais des propriétés height et width des CSS.

La balise TEXTAREA fait partie des éléments utilisés au sein des formulaires, FORM, afin de récupérer des informations clients. Cette balise n'interpte pas les tags HTML et reproduit les espaces les tabulations et les retours charriot qu'elle contient. (balise de type EN LIGNE).

Ses attributs spécifiques sont :
- cols : nombre de caractères affichés par ligne
- rows : détermine le nombre de lignes visibles dans la zone de texte
- wrap : Ses valeurs possibles sont : hard / off / soft
détermine si les retours à la ligne se font automatiquement (hard / soft)
ou si une scrollbar horizontale apparait en cas de dépassement (off)
- disabled : rend la zone de texte grisée et non modifiable
- readonly : rend la zone de texte non modifiable mais ne change pas son apparence

Il est possible d'appliquer des styles comme la police de caractères, l'épaisseur de la police, la couleur etc.. (font-family, font-weight, color).

Exemple :

Exemple : Copier le code

  
<form action="">
     <fieldset>
          <legend>Informations sur vous</legend>
          <label for="description">Description</label> : <br />
          <textarea rows="10" cols="10" name="maDescription" id="description"></textarea>
     </fieldset>
</form>

Différences entre HTML 4.01 et HTML5

HTML5 a ajouté plusieurs nouveaux attributs que nous présentons entre autres dans le tableau suivant.

Les attributs de la balise <textarea>

Nouveau : Nouveau en HTML5.

Attribut	valeur	Description
autofocus Nouveau	autofocus	spécifie qu'une zone de texte doit obtenir automatiquement le focus lors du chargement de la page
cols	nombre	définir la largeur d'une zone de texte
disabled	disabled	Specifies spécifie qu'une zone de texte doit être désactivée
form Nouveau	form_id	spécifie une ou plusieurs formes aux quelles la zone de texte appartient
maxlength Nouveau	nombre	spécifie le nombre maximal de caractères autorisés dans la zone de texte
name	text	spécifie un nom pour une zone de texte
placeholder Nouveau	texte	spécifie une courte description qui décrit la valeur attendue dans une zone de texte
readonly	readonly	spécifie qu'une zone de texte doit être en lecture seule
required Nouveau	required	spécifie qu'une zone de texte doit être remplie obligatoirement
rows	nombre	le nombre visible de lignes dans une zone de texte
wrap Nouveau	hard soft	spécifie comment le texte dans une zone de texte doit être enroulé lorsqu’il est présentée dans un formulaire

autofocus attribut

L'attribut autofocus est pris en charge dans Internet Explorer 10 et +, Firefox, Opera, Chrome et Safari.

Remarque : L'attribut autofocus de la balise <textarea> n'est pas pris en charge dans Internet Explorer 9 et versions antérieures.

L'attribut autofocus est un attribut booléen.

Lorsque L'attribut autofocus est présente, il spécifie que la zone de texte doit obtenir automatiquement le focus lors du chargement de la page.

Différences entre HTML 4.01 et HTML5

L'attribut autofocus est nouvelle pour la balise <textarea> en HTML5.

Différences entre HTML et XHTML

En XHTML, minimisation de l'attribut est interdit, et l'attribut autofocus doit être défini comme < textarea autofocus = « autofocus » >.

Syntaxe

L’attribut COL

L'attribut cols est pris en charge dans tous les principaux navigateurs.

Définition

L'attribut cols spécifie la largeur d'une zone de texte.

Astuce : La taille d'un composant textarea réglable en largeur et la hauteur de la CSS propriétés.

Différences entre HTML 4.01 et HTML5

AUCUN.

Syntaxe

Exemple

Exemple : Copier le code

<!DOCTYPE html>
<html>
<body>
<textarea autofocus rows="4" cols="50">
A www.oujood.com/html5/index.php vous apprendrez comment faire un site Web. Nous offrons des didacticiels gratuits dans toutes les technologies de développement web.
</textarea>
</body>
</html>

Si vous exécutez le code ci-dessous vous constaterez que la zone de texte a une largeur pour 50 caractères et une hauteur pour 4 lignes.

l'attribut disabled

L'attribut disabled est pris en charge dans tous les principaux navigateurs.

Définition

L'attribut disabled est un attribut booléen.

Lorsque L'attribut disabled est présent, il spécifie que la zone de texte doit être désactivée.

Une zone de texte désactivé est inutilisable et le texte ne peut être sélectionnable (ne peut pas être copié).

L'attribut disabled est utilisé pour empêcher un utilisateur de modifier le contenu de la zone de texte jusqu'à ce que quelque autre condition soit remplie (comme la sélection d'une case à cocher par exemple, etc..). Ensuite, un JavaScript pourrait supprimer la valeur disabled et la zone de texte redevient alors utilisable.

Différences entre HTML 4.01 et HTML5

AUCUN.

Différences entre HTML et XHTML

En XHTML, minimisation de l'attribut est interdit, et l'attribut disabled doit être défini commesuit :

< textarea disabled ="disabled" >.

Syntaxe

Exemple

Exemple : Copier le code

<!DOCTYPE html>
<html>
<body>
<textarea disabled rows="4" cols="50">
A www.oujood.com/html5/index.php vous apprendrez comment faire un site Web. Nous offrons des didacticiels gratuits dans toutes les technologies de développement web.
</textarea>
</body>
</html>

L’attribut form

L'attribut form est pris en charge dans tous les principaux navigateurs, sauf Internet Explorer.

Définition

L'attribut form spécifie une ou plusieurs formes d'à que la zone de texte appartient.

Différences entre HTML 4.01 et HTML5

L'attribut form est nouveau en HTML5.

Syntaxe

Exemple

Exemple : Copier le code

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" id="usrform">
  Name: <input type="text" name="usrname">
  <input type="submit">
</form>
<br>
<textarea rows="4" cols="50" name="comment" form="usrform">
Saisissez votre texte ici...</textarea>

<p> La zone de texte ci-dessus est en dehors de l'élément form, mais devrait faire partie du formulaire.</p>

<p><b>Note:</b>  l'attribut form  n'est pas supporté dans IE.</p>

</body>
</html>

L’attribut maxlength

L'attribut maxlength est pris en charge dans tous les principaux navigateurs, sauf Internet Explorer et Opera.

Remarque : L'attribut maxlength de la balise textarea n'est pas pris en charge dans Internet Explorer 9 et versions antérieures et opéra.

Définition

L'attribut maxlength spécifie la longueur maximale (en caractères) d'une zone de texte.

Différences entre HTML 4.01 et HTML5

L'attribut maxlength est nouveau pour la balise <textarea> en HTML5.

Syntaxe

L’attribut name

L'attribut name est pris en charge dans tous les principaux navigateurs.

Définition

L'attribut name spécifie un nom pour une zone de texte.

L'attribut name est utilisé pour la référence des éléments dans un script JavaScript, ou la référence aux données de formulaire après qu'un formulaire est soumis.

Différences entre HTML 4.01 et HTML5

AUCUN.

Syntaxe

L’attribut placeholder

L'attribut placeholder est pris en charge dans Internet Explorer 10, Firefox, Opera, Chrome et Safari.

Remarque : L'attribut placeholder de la balise <textarea> n'est pas pris en charge dans Internet Explorer 9 et versions antérieures.

Définition

L'attribut placeholder spécifie une description courte qui décrit la valeur attendue dans une zone de texte.

Cette description s'affiche dans la zone de texte lorsqu'il est vide et disparaît lorsque le champ reçoit le focus ou lorsque l’utilisateur commence à taper son texte, selon l’explorateur.

Différences entre HTML 4.01 et HTML5

L'attribut placeholder est nouveau en HTML5.

Syntaxe

Exemple

Exemple : Copier le code

<!DOCTYPE html>
<html>
<body>
<textarea placeholder="Votre description ici..." rows="4" cols="50">
A www.oujood.com/html5/index.php vous apprendrez comment faire un site Web. Nous offrons des didacticiels gratuits dans toutes les technologies de développement web.
</textarea>
</body>
</html>

L’attribut readonly

L'attribut readonly est prise en charge dans tous les principaux navigateurs.

Définition

L'attribut readonly est un attribut booléen.

Lorsqu'il est présent, il précise qu'une zone de texte doit être en lecture seule.

Dans une zone de texte en lecture seule, le contenu ne peut pas être modifié, mais un utilisateur peut le sélectionner, le mettre en surbrillance et copier le contenu.

L'attribut readonly est utilisable pour empêcher un utilisateur d'utiliser une zone de texte jusqu'à ce que quelque condition soit remplie (comme la sélection d'une case à cocher, etc..). Ensuite, un JavaScript est nécessaire pour supprimer la valeur readonly et rendre la zone de texte modifiable.

Différences entre HTML 4.01 et HTML5

AUCUN.

Différences entre HTML et XHTML

En XHTML, la minimisation de l'attribut est interdit, et l'attribut readonly doit être défini comme suit :
< textarea readonly="readonly" >.

Syntaxe

Exemple

Exemple : Copier le code

<!DOCTYPE html>
<html>
<body>
<textarea readonly rows="4" cols="50">
A www.oujood.com/html5/index.php vous apprendrez comment faire un site Web. Nous offrons des didacticiels gratuits dans toutes les technologies de développement web.
</textarea>
</body>
</html>

L’attribut required

L'attribut required est pris en charge dans tous les principaux navigateurs, sauf Internet Explorer et Safari.

Définition

L'attribut required est un attribut booléen.

Lorsque L'attribut required est présent, il précise qu'une zone de texte doit obligatoirement être remplie avant de soumettre le formulaire.

Différences entre HTML 4.01 et HTML5

L'attribut required est nouveau en HTML5.

Différences entre HTML et XHTML

En XHTML, la minimisation de l'attribut est interdite, et l'attribut required doit être défini comme suit : p><textarea required= "required" >

Syntaxe

Exemple

Exemple : Copier le code

<!DOCTYPE html>
<html>
<body>

<form action="">
<textarea rows="4" cols="50" name="article" required>
</textarea>
<input type="submit">
</form>
<p><b>Note:</b> Click sur le bouton valider sans rien saisir dans la zone de texte pour voir l'effet de l'attribut required.</p>

</body>
</html>

L’attribut rows

L'attribut rows est pris en charge dans tous les principaux navigateurs.

Définition

L'attribut rows spécifie la hauteur visible d'une zone de texte, en nombre de lignes.

Remarque : La taille d'une zone de texte peut également être spécifiée par les propriétés height et width en CSS.

Différences entre HTML 4.01 et HTML5

AUCUN.

Syntaxe

L’attribut wrap

L'attribut wrap est pris en charge dans tous les principaux navigateurs.

Définition

L'attribut wrap spécifie comment le texte doit se comporter dans une zone de texte lors de la soumission du formulaire.

Différences entre HTML 4.01 et HTML5

L'attribut wrap est une nouveauté pour la balise <textarea> en HTML5.

Syntaxe

Valeurs de l'attribut hard

Valeur	Description
soft	Le texte dans la zone de texte n'est pas encapsulé lorsqu’elle est présentée dans un formulaire. Retour automatique à la ligne mais les retours à la ligne ne sont pas envoyés avec les donnés lors de la soumission du formulaire. C’est la valeur par défaut
hard	Le texte dans la zone de texte est encapsulé (contient des sauts de ligne) lorsqu’elle est présentée qans, les retours à la ligne sont envoyés. un formulaire. Lorsque hard est utilisé, l'attribut cols doit être spécifié

Exemple

Exemple : Copier le code

<!DOCTYPE html>
<html>
<body>

<form action="">
<textarea rows="2" cols="20" name="article" wrap="hard">
</textarea>
<input type="submit" value="valider">
A www.oujood.com/html5/index.php vous apprendrez comment faire un site Web. Nous offrons des didacticiels gratuits dans toutes les technologies de développement web.
</form>
</body>
</html>

Vous êtes ici:Balise TEXTAREA Retour à la liste des balises

Retour à l'accueil du site

Par carabde 10 mars 2014

Le langage HTML Balise TEXTAREA

Balises HTML

Plus...

<textarea> : Zone de texte

Différences entre HTML 4.01 et HTML5

Les attributs de la balise <textarea>

autofocus attribut

L’attribut COL

l'attribut disabled

L’attribut form

L’attribut maxlength

L’attribut name

L’attribut placeholder

L’attribut readonly

L’attribut required

L’attribut rows

L’attribut wrap

Valeurs de l'attribut hard

Voir aussi nos tutoriel :