Cours HTML / Utiliser textarea, select, option et button
Utilisez textarea pour du texte sur plusieurs lignes, select avec option pour une liste préparée de choix, et button pour une action explicite. Ces éléments ont différentes manières de conserver des valeurs et de soumettre un formulaire.
Entrez plusieurs lignes avec textarea
La valeur initiale d'un textarea se place entre ses balises d'ouverture et de fermeture plutôt que dans un attribut value. Comparez le contenu initial avec un indice disparaissant en utilisant les exemples de zone de texte dans Ajouter du texte indicatif aux champs de formulaire.
<label for="message">Votre message</label>
<textarea id="message" name="message" rows="5" cols="40"></textarea>rows et cols influencent la taille initialement affichée ; le CSS peut adapter le contrôle à la largeur disponible. Le name est nécessaire si son contenu doit être soumis. Le texte entre les balises devient une véritable valeur initiale. Si vous voulez seulement montrer un exemple, utilisez un placeholder comme indice supplémentaire et conservez l'étiquette. Utilisez textarea au lieu d'une saisie sur une seule ligne lorsque les lecteurs doivent pouvoir éditer une réponse plus longue.
Proposez des choix avec select et option
<label for="topic">Sujet</label>
<select id="topic" name="topic">
<option value="order">Commandes</option>
<option value="delivery">Livraison</option>
<option value="other">Autre</option>
</select>L'écran affiche « Commandes », mais la valeur soumise est order. id="topic" relie le contrôle à son étiquette, tandis que name="topic" nomme les données soumises. Choisissez les options value qui correspondent à ce que le serveur attend. Sans interaction, la première option est sélectionnée. Si les utilisateurs doivent choisir consciemment, commencez par <option value="">Choisir un sujet</option> et ajoutez required à select. S'il existe une valeur par défaut raisonnable, la première option réelle peut être préférable.
Testez les contrôles ensemble dans un même formulaire
Enregistrez ce document sous le nom controls.html. La première option vide et l'attribut requis signifient qu'un sujet réel doit être sélectionné avant la soumission. Le bouton de réinitialisation est inclus pour cet exercice comparatif.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice sur les contrôles de formulaire</title>
<style>
textarea, select { box-sizing: border-box; max-width: 100%; font: inherit; }
textarea { width: 24rem; }
</style>
</head>
<body>
<h1>S’entraîner avec les champs de contact</h1>
<form id="controls-form" method="get">
<p><label for="topic-choice">Sujet</label>
<select id="topic-choice" name="topic" required>
<option value="">Choisir un sujet</option>
<option value="order">Commandes</option>
<option value="delivery">Livraison</option>
</select></p>
<p><label for="message-text">Message</label>
<textarea id="message-text" name="message" rows="4">Question d’essai</textarea></p>
<button type="submit">Examiner les valeurs saisies</button>
<button type="reset">Rétablir les valeurs initiales</button>
</form>
</body>
</html>- Soumettez sans choisir de sujet pour tester la sélection obligatoire.
- Choisissez la livraison, modifiez le message et soumettez. La valeur envoyée est
delivery, tandis que le libellé visible est « Livraison ». - Modifiez de nouveau et réinitialisez. Le sujet revient à la première option et le message revient à son texte initial.
Un contrôle sans texte initial apparaît vide après réinitialisation ; un contrôle avec une valeur initiale retourne à cette valeur. Rouvrez le fichier pour comparer son état de départ.
Référence de textarea sur MDN · Référence de select sur MDN · Référence de button sur MDN
Indiquez le type de chaque bouton
À l'intérieur d'un formulaire, un button est par défaut destiné à la soumission. Utilisez type="button" pour une action scriptée différente afin qu'il ne soumette pas par accident. Observez comment les noms et les valeurs sont soumis dans Structure du formulaire et GET vs. POST.
<form method="get">
<label for="note">Note</label>
<textarea id="note" name="note" rows="4"></textarea>
<button type="submit">Envoyer</button>
<button type="reset">Réinitialiser</button>
</form>Ouvrir cela dans un navigateur vous permet de soumettre à l'URL actuelle et d'inspecter la chaîne de requête sans serveur. La réinitialisation renvoie les contrôles à leurs valeurs initiales ; elle ne les rend pas toujours vides. Si un textarea commençait avec du texte, la réinitialisation restaure ce texte. Un bouton de réinitialisation peut effacer le travail de quelqu'un, donc ne l'incluez dans un vrai formulaire que lorsqu'il a un but et un emplacement clairs. Consultez la référence d'élément HTML MDN pour les attributs individuels.
type="button" empêche la soumission du formulaire mais ne crée pas une nouvelle action par lui-même. Sans script connecté, cliquer sur ce bouton ne fait rien. Distinguez les actions de soumission et de réinitialisation intégrées de HTML des actions qui nécessitent un script.
