Comment créer un formulaire en HTML ?

Publié le 12 avril 2023 Développement Web

Voici les étapes pour créer un formulaire HTML :

  1. Ouvrir un éditeur de texte comme Bloc-notes ou Sublime Text.
  2. Commencer à écrire le code HTML pour la page web. Pour créer un formulaire, il faut utiliser la balise <form>.
  3. Ajouter les éléments du formulaire. Les éléments du formulaire incluent des champs de saisie, des boutons radio, des cases à cocher, etc. Pour créer un champ de saisie, utilisez la balise <input> et définissez l’attribut « type » avec la valeur « text » pour créer un champ de saisie de texte. Pour créer un bouton de soumission, utilisez la balise <input> et définissez l’attribut « type » avec la valeur « submit ».
  4. Ajouter les labels pour chaque champ du formulaire en utilisant la balise <label>. L’attribut « for » de la balise <label> doit correspondre à l’attribut « id » de l’élément du formulaire associé.
  5. Définir les attributs des champs du formulaire en utilisant les attributs HTML standard. Par exemple, pour définir un attribut « name » pour un champ de saisie, utilisez l’attribut « name » de la balise <input>.
  6. Ajouter des options pour les menus déroulants en utilisant la balise <select> et les balises <option>.
  7. Ajouter des boutons radio ou des cases à cocher en utilisant la balise <input> et en définissant l’attribut « type » avec la valeur « radio » ou « checkbox ».
  8. Ajouter des instructions pour les utilisateurs en utilisant la balise <p> ou <div>. Ces balises peuvent être utilisées pour ajouter du texte supplémentaire ou des images pour aider les utilisateurs à remplir le formulaire.
  9. Terminer le formulaire en utilisant la balise </form>.

Voici un exemple de code HTML pour un formulaire simple :

<form>
  <label for="name">Nom :</label>
  <input type="text" id="name" name="name"><br>

  <label for="email">Email :</label>
  <input type="email" id="email" name="email"><br>

  <label for="subject">Sujet :</label>
  <select id="subject" name="subject">
    <option value="support">Support</option>
    <option value="feedback">Feedback</option>
    <option value="other">Autre</option>
  </select><br>

  <label for="message">Message :</label>
  <textarea id="message" name="message"></textarea><br>

  <input type="submit" value="Envoyer">
</form>

N’oubliez pas de tester votre formulaire en le soumettant pour vérifier que tout fonctionne correctement.

Thématiques

Nos formations sur ces thématiques

Je m'informe GRATUITEMENT