Bienvenue à ce nouveau tuto 🙂 . Dans cette partie , nous allons apprendre comment ajouter des zones de texte dans un formulaire HTML.
accès rapide
- La démo
- Syntaxe
- Textarea – taille de la zone de texte
- Textarea – L’attribut wrap
- L’attribut Hard/Soft
- L’attribut off
- Textarea – L’attribut readonly
- Textarea – L’attribut disabled
La démo
mettre ici la vidéo de la démonstration
Syntaxe
Les zones de texte de ce type sont utilisées pour des commentaires, blogs, ou n’importe quel autre but qui nécessite un espace pour faire la saisie.
Pour créer cette zone de texte, nous aurons besoin d’une balise d’ouverture et de fermeture <textarea>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ma page web</title>
</head>
<body>
<h1>Formulaire </h1>
<form>
<label>Message : </label>
<textarea>Zone de texte!</textarea>
</form>
</body>
</html>
Textarea – taille de la zone de texte
Pour changer la taille standard d’une zone de texte, nous pouvons utiliser des colonnes et des lignes qui auront des valeurs numériques. Plus grand leur valeur sera, plus grand sera la zone de texte.
<form>
<label>Message : </label>
<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>
</form>
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 à la ligne de la fin de chaque ligne et enverra le texte dans le même format qu’il a été introduit.
- Soft wrap – ira à la ligne de la fin de chaque ligne, mais il enverra le texte dans un format libre.
- Off wrap : ceci laisse le texte sur une ligne simple continue.
L’attribut Hard/Soft
<textarea cols="20" rows="5" wrap="hard">Hard - ira à la ligne à la fin de chaque ligne et enverra le texte dans le même format qu'il a été introduit.</textarea>
L’attribut off
Cet attribut ne formatera pas le texte d’aucune façon, il le laisse sur une ligne simple continue.
<form>
<label>Message : </label>
<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>
</form>
Textarea – L’attribut readonly
L’attribut readonly renseigne si l’utilisateur est capable (ou non) de changer le contenu de la zone de texte.
L’attribut readonly peut avoir une de ces deux valeurs : ‘yes’ ou ‘no’.
Au cas où la valeur est égale à ‘yes’ , l’utilisateur ne peut pas modifier le texte :
<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>
Textarea – L’attribut disabled
L’attribut disabled n’est pas très différent de readonly. La différence est que la zone de texte sera grisée.
Dans cette partie , nous avons appris comment ajouter des zones de texte dans un formulaire HTML.
Espérons bien que ce tuto vous a plu. Dans le tuto suivant , Nous allons commencer à insérer des boutons dans un formulaire HTML.