Formulaires HTML

Introduction

Les formulaires HTML sont un élément fondamental du web, permettant aux utilisateurs d'interagir avec les sites web en saisissant des informations. Cela peut aller d'une simple boîte de recherche à une page d'inscription complexe. Dans ce laboratoire, vous apprendrez les bases de la création d'un formulaire HTML, y compris comment ajouter des champs de texte, des étiquettes (labels) et des boutons de soumission (submit buttons). Nous allons construire un formulaire de contact simple étape par étape.

L'environnement de laboratoire a déjà démarré un serveur web pour vous. Vous pouvez écrire votre code HTML dans le fichier index.html et voir l'aperçu en direct en cliquant sur l'onglet Web 8080 dans le coin supérieur gauche.

Créer la balise form avec l'attribut action

Dans cette étape, nous allons commencer par créer le conteneur pour nos éléments de formulaire. La balise <form> est utilisée pour créer un formulaire HTML pour la saisie utilisateur. Tous les éléments de formulaire, tels que les champs de texte, les boutons et les cases à cocher, doivent être placés à l'intérieur d'une balise <form>.

L'attribut action spécifie où envoyer les données du formulaire lorsque celui-ci est soumis. Pour ce laboratoire, nous le laisserons vide car nous nous concentrons sur la structure HTML, et non sur le traitement côté serveur (back-end).

Veuillez ouvrir le fichier index.html depuis l'explorateur de fichiers à gauche et ajouter le code suivant.

<form action=""></form>

Après avoir ajouté le code, vous pouvez basculer vers l'onglet Web 8080 pour prévisualiser la page. Vous ne verrez encore rien, car le formulaire est actuellement vide.

Ajouter la balise input avec type text pour le champ de texte

Dans cette étape, nous allons ajouter un champ permettant aux utilisateurs de saisir du texte. La balise <input> est l'un des éléments de formulaire les plus utilisés. Elle peut être affichée de nombreuses manières, en fonction de l'attribut type.

Pour créer un champ de saisie de texte sur une seule ligne, nous utilisons type="text". C'est parfait pour des éléments tels que les noms d'utilisateur, les noms ou les adresses e-mail.

Maintenant, ajoutons un champ de saisie de texte à l'intérieur des balises <form> dans votre fichier index.html.

<form action="">
  <input type="text" />
</form>

Enregistrez le fichier et basculez vers l'onglet Web 8080. Vous devriez maintenant voir une petite zone de texte sur la page où vous pouvez taper.

Insérer la balise input avec type submit pour le bouton

Dans cette étape, nous allons ajouter un bouton pour permettre aux utilisateurs de soumettre le formulaire. Nous pouvons créer un bouton de soumission en utilisant à nouveau la balise <input>, mais cette fois avec type="submit".

Lorsque l'utilisateur clique sur ce bouton, les données du formulaire sont envoyées au serveur spécifié dans l'attribut action de la balise <form>. Vous pouvez définir le texte affiché sur le bouton en utilisant l'attribut value.

Ajoutons un bouton de soumission à notre formulaire dans index.html.

<form action="">
  <input type="text" />
  <br /><br />
  <input type="submit" value="Submit" />
</form>

Nous avons également ajouté des balises <br><br> pour créer un espace vertical entre le champ de texte et le bouton, afin d'améliorer la mise en page. Enregistrez le fichier et vérifiez l'onglet Web 8080 pour voir le nouveau bouton "Submit".

Utiliser la balise label avec l'attribut for pour l'étiquetage

Dans cette étape, nous allons ajouter une étiquette à notre champ de texte. La balise <label> définit une étiquette pour de nombreux éléments de formulaire. Elle améliore l'utilisabilité et l'accessibilité, car cliquer sur l'étiquette focalisera le champ de saisie correspondant.

Pour lier une <label> à une <input>, l'attribut for de la <label> doit être identique à l'attribut id de l'.

Ajoutons un id à notre champ de saisie de texte et une <label> correspondante dans index.html.

<form action="">
  <label for="username">Name:</label><br />
  <input type="text" id="username" name="username" />
  <br /><br />
  <input type="submit" value="Submit" />
</form>

Nous avons ajouté une label pour "Name:" et l'avons liée au champ de saisie en utilisant id="username" et for="username". Nous avons également ajouté un attribut name à l'input, ce qui est important pour identifier les données lors de la soumission du formulaire.

Enregistrez le fichier et visualisez les modifications dans l'onglet Web 8080. Désormais, si vous cliquez sur le texte "Name:", le curseur se déplacera automatiquement dans la zone de texte.

Ajouter la balise textarea pour la saisie multiligne

Dans cette étape, nous allons ajouter une zone de texte plus grande pour que les utilisateurs puissent écrire un message. Alors que <input type="text"> est destiné à une seule ligne de texte, la balise <textarea> est utilisée pour une saisie multiligne.

Vous pouvez contrôler la taille d'une <textarea> avec les attributs rows et cols, qui spécifient respectivement le nombre visible de lignes et de caractères par ligne.

Ajoutons une <textarea> pour un message à notre formulaire, avec sa propre <label>. Mettez à jour votre fichier index.html avec le code final ci-dessous.

<form action="">
  <label for="username">Name:</label><br />
  <input type="text" id="username" name="username" />
  <br /><br />
  <label for="message">Message:</label><br />
  <textarea id="message" name="message" rows="4" cols="30"></textarea>
  <br /><br />
  <input type="submit" value="Submit" />
</form>

Notre formulaire comporte maintenant un champ de nom et une zone de message. Enregistrez le fichier et regardez le formulaire complété dans l'onglet Web 8080. Vous avez maintenant un formulaire HTML fonctionnel et bien structuré.

Résumé

Félicitations ! Vous avez construit avec succès un formulaire HTML de base. Dans ce laboratoire, vous avez appris à :

• Utiliser la balise <form> comme conteneur pour les éléments du formulaire.
• Créer un champ de texte sur une seule ligne avec <input type="text">.
• Créer un bouton de soumission avec <input type="submit">.
• Améliorer l'accessibilité et l'utilisabilité en associant une <label> à un champ de saisie à l'aide des attributs for et id.
• Ajouter une zone de texte multiligne avec la balise <textarea>.

Ce sont les éléments fondamentaux pour créer des formulaires interactifs sur le web. Vous pouvez maintenant explorer d'autres types d'entrées et attributs de formulaire pour créer des formulaires plus complexes et plus puissants.