Comment créer un formulaire HTML (exemples expliqués)

Les formulaires sont utilisés pour collecter des données auprès des utilisateurs, telles que des informations de contact, ou pour permettre aux utilisateurs d'interagir avec le site Web, comme publier des commentaires ou effectuer des recherches. Dans cet article, nous allons apprendre à créer un formulaire de base en HTML.

Structure d'un formulaire HTML

Un formulaire HTML est créé à l'aide de la balise. Dans cette balise, vous pouvez avoir une variété d'éléments d'entrée différents, tels que des champs de texte, des boutons, des cases à cocher, des boutons radio, etc.

les éléments d'entrée vont ici

Éléments d'entrée

Champs de texte

Les champs de texte sont créés à l'aide de la balise avec l'attribut taper posé sur texte. Par exemple:

Nom:




Téléphone

L'élément utilisé pour les champs de saisie du numéro de téléphone.

Téléphone:


Date

L'élément utilisé pour sélectionner une date.

Date de naissance:


Mot de passe

L'élément utilisé pour les champs de saisie de mot de passe. Le texte saisi dans ce champ s'affiche sous forme de points pour masquer le mot de passe.

Mot de passe:


Archive

L'élément est utilisé pour permettre à l'utilisateur de sélectionner un fichier dans son système de fichiers local.

Téléverser un fichier:


Case à cocher

L'élément utilisé pour les champs de saisie qui permettent à l'utilisateur de sélectionner aucune, une ou plusieurs options.

J'accepte les termes et conditions

Radio

L'élément utilisé pour les champs de saisie qui permettent à l'utilisateur de sélectionner une option parmi un ensemble d'options.

Genre:

Homme

Femme

Le numéro

L'élément utilisé pour les champs de saisie numérique.

Montant:


Gamme

L'élément utilisé pour les champs d'entrée qui doivent contenir une valeur d'une plage de valeurs.

Volume:




Boutons

Les boutons sont créés à l'aide de la balise avec l'attribut taper posé sur soumettre. Ce bouton, lorsqu'il est pressé, soumettra les données du formulaire. Par exemple:

Nom:




Gestion de la saisie de formulaire

Lorsque le bouton Soumettre est enfoncé, les données du formulaire sont soumises pour traitement. Cela se fait par l'une des deux méthodes: GET ou POST, qui sont spécifiées à l'aide de l'attribut méthode Dans l'étiquette .

Méthode GET

La méthode GET soumet les données du formulaire dans le cadre de l'URL. C'est utile pour des choses comme les recherches, où les données du formulaire ne sont pas sensibles. Cependant, cette méthode présente des limites en termes de longueur des données pouvant être envoyées.

les éléments d'entrée vont ici

Méthode POST

La méthode POST soumet les données du formulaire séparément de l'URL. Ceci est plus sécurisé et peut gérer une quantité de données beaucoup plus importante, il est donc utilisé pour des choses comme les soumissions de formulaires de contact ou de connexion.

les éléments d'entrée vont ici

Dans les deux cas, l'attribut action est utilisé pour spécifier l'URL du script côté serveur qui traitera les données du formulaire.

Exemple de formulaire HTML avec tous les éléments 

Voici un formulaire qui reprend tous les éléments que nous avons passé en revue dans cet article :

Formulaire d'inscription

Nom:



Le nom:



E-mail:



Téléphone:



Date de naissance:



Mot de passe:



Téléverser un fichier:



J'accepte les termes et conditions


Genre:

Homme

Femme

Montant:



Volume:




Ce formulaire comporte des champs pour le prénom, le nom, l'e-mail, le téléphone, la date de naissance, le mot de passe, un champ pour télécharger un fichier, une case à cocher pour les termes et conditions, des radios pour choisir le sexe, et des champs de nombre et de plage pour la quantité et le volume, respectivement.

Le bouton "Soumettre" à la fin est celui qui se chargerait de soumettre le formulaire à l'URL spécifiée dans l'attribut action De l'étiquette forme (dans ce cas, "/submit_form"). Pour que ce formulaire fonctionne sur un vrai site Web, vous devez avoir un serveur configuré pour recevoir et traiter les informations de ce formulaire dans le chemin "/submit_form".