Comment créer des formulaires HTML?

1. Ajoutez la balise FORM à votre code HTML.
2. Ajoutez l'action à la balise FORM.
3. Ajoutez des options de formulaire.
4. Terminez la balise FORM.

Bernard St-Pierre
Bernard St-Pierre
• 6 min de lecture
Un excellent moyen d'élargir vos connaissances sur les formulaires HTML est de parcourir le site
Un excellent moyen d'élargir vos connaissances sur les formulaires HTML est de parcourir le site de formulaires HTML de W3school.

Vous pouvez ajouter un formulaire à un document HTML existant à l'intérieur des balises <form></form>. Ces balises agissent comme un conteneur pour toutes vos données de formulaire, telles que les champs de texte, les listes et les boutons. Lorsqu'une personne soumet des informations via votre formulaire, les données seront envoyées à un serveur qui enregistrera, traitera, enverra ou affichera les résultats en fonction du contenu. Découvrez comment configurer la balise <form> pour que votre formulaire fasse ce que vous voulez, ainsi que comment ajouter des entrées pour collecter des informations.

Partie 1 sur 3: création de la balise de formulaire

  1. 1
    Ouvrez votre document HTML dans votre éditeur de texte préféré. Le contenu d'un formulaire HTML doit être saisi entre les balises <form> et </form>. Ces balises agissent comme un conteneur pour votre formulaire, comme d'autres balises de conteneur comme <div></div> et <table></table>
    • Vous pouvez utiliser CSS ou HTML dans les balises <form></form> pour donner à votre formulaire l'apparence que vous souhaitez.
  2. 2
    Ouvrez l' <form> élément. Pour démarrer votre formulaire, faites défiler jusqu'à l'emplacement de votre fichier où le formulaire doit commencer et tapez <form> sur sa propre ligne. Cette balise signifie le début de votre formulaire.
  3. 3
    Ajoutez l'attribut "action=" à la <form> balise. Cela indique à la <form> balise quoi faire avec les données du formulaire. Vous définirez cela en ajoutant action="path_to_script" à la <form> balise.
    • Par exemple: <form action="/cgi-bin/myformscript.pl">(si le script qui analysera les données du formulaire se trouve dans un répertoire de votre serveur appelé "cgi-bin").
    • Si le script est sur un autre serveur: <form action="">
    • Pour envoyer les données du formulaire à une adresse e-mail (pas un script): <form action="mailto:you@yourdomain.com" enctype="text/plain">
  4. 4
    Décidez comment les données du formulaire seront envoyées. Maintenant que vous avez défini où les données du formulaire seront envoyées, vous devez décider si votre formulaire «OBTENIR» ou «POSTER» les données. Ensuite, vous ajouterez soit "GET" ou "POST" comme method attribut à l'intérieur de la <form> balise.
    • À utiliser method="get" pour demander des données à une ressource. Vous ne devez utiliser GET que pour récupérer des données. N'utilisez jamais GET avec des informations sensibles telles que des mots de passe ou des numéros de sécurité sociale.
    • À utiliser method="post" pour soumettre des données à traiter. Utilisez-le si les données du formulaire sont sensibles, comme les mots de passe ou les numéros de carte de crédit.
    • Le résultat final doit suivre ce format: <form action="/cgi-bin/myformscript.pl" method="post">
Le contenu d'un formulaire HTML doit être saisi entre les balises et
Le contenu d'un formulaire HTML doit être saisi entre les balises et.

Partie 2 sur 3: ajouter des options de formulaire

  1. 1
    Créez une zone de texte à l'aide de <input type="text" />. Vous pouvez ajouter une zone vide dans laquelle vos visiteurs peuvent taper leurs noms, commentaires ou tout autre élément dont vous pourriez avoir besoin. Démarrez ceci sur une nouvelle ligne après la balise <form>.
    • Par exemple, First Name: <input type="text" id="name" /> crée une zone de texte précédée de «Prénom:» afin que les utilisateurs sachent quoi saisir dans la zone.
    • Modifiez la valeur "id=" ("nom" dans l'exemple) pour qu'elle corresponde à ce que vous faites avec les données. Si les données sont envoyées à un script, cette valeur doit correspondre à quelque chose dans le script.
  2. 2
    Créez une boîte de mot de passe. Si votre script demande à un utilisateur de saisir un mot de passe, vous ajouterez un autre <input />, cette fois avec l'attribut "type" défini sur "password".
    • Sur une nouvelle ligne, tapez Password: <input type="password" name="password" />
  3. 3
    Ajoutez des boutons radio pour les options. Si vous souhaitez que les visiteurs choisissent parmi une liste d'éléments, créez une liste d'options avec des boutons radio. Pour ce faire, vous utiliserez la balise <input /> avec l'attribut "type" défini sur "radio".
    • Pour créer un bouton radio permettant de sélectionner soit «Chien» ou «Chat»:
      • <input type="radio" name="pets" value="dog" /> Dog
      • <input type="radio" name="pets" value="cat" /> Cat
    • Un groupe de boutons radio doit tous avoir le même attribut "nom".
  4. 4
    En savoir plus sur les options de formulaire avancées. Il y a tellement de types d'entrées et de listes que vous pouvez inclure dans votre formulaire. Un excellent moyen d'approfondir vos connaissances sur les formulaires HTML est de parcourir le site de formulaires HTML de W3school. De plus, il existe de nombreux articles de guides utiles pour vous guider dans la configuration d'éléments tels que des listes sélectionnables, des boutons de réinitialisation/effacement et des cases à cocher.
Vous pouvez ajouter un formulaire à un document HTML existant à l'intérieur des balises
Vous pouvez ajouter un formulaire à un document HTML existant à l'intérieur des balises.

Partie 3 sur 3: fermer votre formulaire

  1. 1
    Créez un <bouton> de soumission. Une fois que votre visiteur a rempli le formulaire, il devra le soumettre en cliquant sur un bouton de soumission. Voici un exemple:
    • <button type="submit">Send your message</button>
    • Remplacez "Envoyer votre message" par le texte que vous souhaitez voir apparaître sur le bouton.
  2. 2
    Tapez </form> à la fin du formulaire. Cette balise indique que le formulaire est terminé. N'oubliez pas que tout le contenu du formulaire doit être à l'intérieur <form> et </form>.
  3. 3
    Téléchargez votre document sur votre serveur Web. Maintenant que vous avez ajouté un formulaire à votre document HTML, téléchargez-le sur votre serveur Web et testez-le!

Conseils

  • Vous pouvez placer les balises <fieldset></fieldset> autour d'un groupe d'éléments de formulaire pour les regrouper à l'intérieur d'une zone distincte.
  • Puisque la plupart du HTML est devenu XHTML, la balise <input> doit inclure (avant le crochet de fin) un espace et une barre oblique inverse. Par exemple: <input type="submit" />

Lisez aussi: Comment créer un compte Hotmail?

Questions et réponses

  • Comment puis-je éliminer l'espace supplémentaire après une balise?
    Cet espace y est automatiquement mis par le navigateur que vous utilisez. Pour vous en débarrasser, vous devez utiliser CSS. C'est un langage utilisé pour manipuler l'apparence des sites Web. De bons didacticiels CSS peuvent être trouvés sur des sites Web comme Codecademy et W3Schools, mais le guide contient également de bonnes explications.
  • Comment envoyer les commentaires/réponses du formulaire sur ma page Web?
    Cela dépend de ce que vous voulez faire avec les commentaires. Dans la plupart des cas, vous devrez utiliser

Lisez aussi:

  1. Comment écrire une page HTML?
  2. Comment insérer des images avec HTML?
  3. Comment apprendre le HTML?
En parallèle
  1. Comment ajouter des métabalises?Julien Poulin
  2. Comment éditer une page Web en HTML?René Lelievre
  3. Comment afficher la source sur Chrome?Richard Pinto
  4. Comment créer une page GUI et ajouter des contrôles?Arthur Payet
  5. Comment ouvrir Hotmail?Émile Dufour
  6. Comment réinitialiser un mot de passe Hotmail perdu?Claude Texier
FacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail