Attributs du Textarea HTML5 : Voici ce que vous devriez savoir
À quoi sert le <textarea> ?
La plupart des formulaires HTML sont composés d’un élément de formulaire parent, d’une poignée d’éléments de saisie (dont au moins un sera de type submit) et d’un ou plusieurs textareas. Si vous avez besoin de champs de formulaire pour accepter des adresses électroniques, des numéros de téléphone et d’autres contenus faciles à définir, utilisez le type de saisie approprié. Cependant, lorsque vous avez besoin d’un champ qui peut accepter n’importe quelle combinaison et longueur de lettres, de chiffres et de symboles en texte brut, <textarea> est l’élément que vous recherchez.
Attributs de zone de texte du HTML5
Le HTML5 a introduit quelques nouveaux attributs qui peuvent être utilisés avec les éléments de zone de texte. Voici quelques-uns des plus importants :
-
form: Associe la zone de texte à un formulaire. Utilisez l’attribut ID du formulaire comme valeur pour les attributs de formulaire de la zone de texte. Cela vous permet de placer une zone de texte n’importe où sur une page Web, même en dehors de l’élément de formulaire, et d’avoir le contenu de la zone de texte inclus lorsque le formulaire est soumis. -
maxlengthetminlength: Utilisées pour spécifier un nombre minimum ou maximum de caractères pouvant être saisis dans une zone de texte. -
placeholder: Ajoute un texte de remplacement à la zone de texte qui disparaît dès qu’un utilisateur place le curseur à l’intérieur de l’élément. -
required: Exige que la zone de texte contienne du contenu avant d’autoriser la soumission du formulaire. -
wrap: Spécifie si des retours en dur doivent être ajoutés au contenu soumis dans une zone de texte.
Attributs en action
Voici un exemple de la façon dont certains de ces nouveaux attributs peuvent être utilisés pour contrôler le comportement d’une zone de texte.
<p>This text area is limited to just 10 characters</p> <textarea cols="50" rows="3" maxlength="10" placeholder="Just 10 characters allowed"></textarea> <p>This text area is readonly and cannot be changed</p> <textarea cols="50" rows="3" readonly>This value can't be changed</textarea> If we pair those textarea elements with a simple script and button element, we get the following form:
