Créer des formulaires HTML de base

Introduction

Dans ce laboratoire, nous allons apprendre à créer un formulaire HTML de base en utilisant la balise <form> et différents éléments de formulaire.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Configuration du document HTML

Nous allons commencer par créer un document HTML de base avec la structure de base :

<!doctype html>
<html>
  <head>
    <title>Exemple de formulaire HTML</title>
  </head>
  <body></body>
</html>

Création d'un formulaire de base

Nous allons maintenant créer un formulaire HTML de base avec un champ de saisie et un bouton de soumission. Ajoutez le code suivant à l'intérieur de la balise body :

<h1>Exemple de formulaire HTML</h1>
<form>
  <label for="name">Nom :</label>
  <input type="text" name="name" id="name" />
  <br /><br />
  <input type="submit" value="Soumettre" />
</form>

Dans le code ci-dessus, nous avons une balise <h1> qui sert de titre à notre formulaire. Nous avons ensuite une balise <form> et à l'intérieur, nous avons une balise <label> et une balise <input>. La valeur de l'attribut for de la balise <label> doit correspondre à l'attribut id dans la balise <input>. Nous avons également une balise <br> pour ajouter un retour à la ligne. Enfin, nous avons une balise <input> avec un attribut type égal à "submit".

Ajout d'éléments de formulaire

Nous pouvons ajouter divers éléments de formulaire en utilisant différents types de champs de saisie dans le formulaire. Ajoutons un menu déroulant et des cases à cocher à notre formulaire. Remplacez le code de la balise <form> par le code suivant :

<form>
  <label for="name">Nom :</label>
  <input type="text" name="name" id="name" />
  <br /><br />
  <label for="gender">Genre :</label>
  <select name="gender" id="gender">
    <option value="male">Homme</option>
    <option value="female">Femme</option>
    <option value="other">Autre</option>
  </select>
  <br /><br />
  <label for="hobby">Loisirs :</label>
  <br />
  <input type="checkbox" id="coding" name="hobby" value="coding" />
  <label for="coding">Coder</label>
  <input type="checkbox" id="reading" name="hobby" value="reading" />
  <label for="reading">Lire</label>
  <input type="checkbox" id="drawing" name="hobby" value="drawing" />
  <label for="drawing">Dessiner</label>
  <br /><br />
  <input type="submit" value="Soumettre" />
</form>

Dans le code ci-dessus, nous avons ajouté une balise <select> pour le champ de genre avec trois options en utilisant la balise <option>. Nous avons également ajouté trois cases à cocher avec différents libellés pour les loisirs.

Attributs de formulaire

Nous pouvons ajouter des attributs à la balise <form> pour personnaliser le comportement du formulaire. Ajoutons les attributs action et method à notre formulaire. Remplacez le code de la balise <form> par le code suivant :

<form action="submit-form.php" method="post"></form>

Dans le code ci-dessus, nous avons ajouté l'attribut action avec une valeur de "submit-form.php" et l'attribut method avec une valeur de "post". Cela indique au navigateur d'envoyer les données du formulaire au fichier "submit-form.php" en utilisant la méthode HTTP POST.

Validation de formulaire

Nous pouvons utiliser l'attribut required pour rendre certains champs obligatoires. Ajoutez l'attribut required à la balise <input> du champ de nom.

<input type="text" name="name" id="name" required />

Accessibilité du formulaire

Nous pouvons également ajouter des fonctionnalités d'accessibilité à notre formulaire en utilisant les balises <fieldset> et <legend>. Entourez le champ de genre avec le code suivant :

<fieldset>
  <legend>Genre :</legend>
  ...
</fieldset>

Cela regroupe le champ de genre et ajoute une légende pour le groupe.

Ajout d'étiquettes

Enfin, nous pouvons également ajouter des étiquettes à nos cases à cocher en utilisant la balise <label>. Entourez la case à cocher et l'étiquette pour chaque loisir avec le code suivant :

<label for="coding">Coder</label>
<input type="checkbox" id="coding" name="hobby" value="coding" />

Cela associe chaque étiquette à la case à cocher respective.

Résumé

Dans ce laboratoire, nous avons appris à créer un formulaire HTML de base en utilisant la balise <form> et différents éléments de formulaire tels que les champs de saisie, les menus déroulants et les cases à cocher. Nous avons également appris à ajouter des attributs de formulaire tels que method, action et required, et à ajouter des fonctionnalités d'accessibilité en utilisant les balises <fieldset> et <legend>.

Formulaire d'entrée HTML