Les formulaires HTML vous permettent de communiquer facilement et directement avec vos visiteurs. Grâce à différents éléments et attributs, vous pouvez adapter les formulaires à vos besoins.

Qu’est-ce qu’un formulaire HTML ?

Les formulaires HTML ou HTML Forms sont des formulaires interactifs pour votre site Web, avec lesquels vos visiteurs peuvent vous transmettre des données personnelles. Les données saisies sont ensuite envoyées au serveur Web pour être traitées. Pour intégrer cette forme d’interaction dans vos documents HTML, vous avez besoin de la balise (en anglais tag) HTML <form>. Cette balise HTML peut être personnalisée en fonction de l’usage souhaité grâce à divers éléments et attributs. Il est possible d’intégrer différents types de champs : du texte, des numéros de téléphone, des emails, des mots de passe, des boutons ou encore des cases à cocher.

Si vous collectez des données personnelles sur votre site Web à l’aide d’un formulaire HTML, vous devez le signaler explicitement dans la politique de protection des données de votre site Web et veiller à ce que la transmission soit chiffrée SSL/TLS.

Hébergement Web
Hébergement Web de pointe au meilleur prix
  • 3x plus rapide, 60 % d'économie
  • Haute disponibilité >99,99 %
  • Seulement chez IONOS : jusqu'à 500 Go inclus

À quoi sert l’élément <form> ?

Parce que les formulaires HTML vous offrent tant d’options de saisie différentes, vous pouvez les utiliser pour une multitude d’applications. En voici quelques-unes :

  • Formulaires de contact pour les demandes ou les commandes
  • Formulaires d’inscription à un compte ou à une newsletter
  • Fonctions de feedback
  • Sondages
  • Formulaires de support et de gestion de tickets de service
  • Formulaires de connexion pour accéder à des zones protégées du site

En théorie, les formulaire HTML couvrent la plupart des besoins interactifs des sites Web !

Syntaxe de la balise HTML <form>

Les formulaires HTML sont initiés à l’aide d’une balise HTML d’ouverture <form> et se terminent par une balise de fermeture </form>. À l’intérieur de ces deux balises peuvent se trouver divers autres éléments et attributs, que nous vous présenterons plus en détail dans la suite de cet article. La syntaxe générale de ces formulaires se présente comme suit :

<form> Éléments </form>
html

Quels sont les différents éléments HTML pour créer un formulaire ?

Il existe différents éléments HTML qui vous permettent d’adapter votre formulaire HTML à vos propres idées ou besoins. Nous vous les présentons brièvement dans le tableau suivant :

Élément HTML Description
<button> Bouton cliquable simple
<datalist> Options pour l’élément <input> sous forme de liste déroulante
<fieldset> Grouper des données liées
<input> Champ de saisie de données ; son type est déterminé par l’attribut type
<label> Créer une étiquette visible pour un élément de formulaire
<legend> Titre ou légende de la balise <fieldset>
<optgroup> Grouper des éléments <option> dans une balise <select>
<option> Indiquer un choix pour <datalist> ou <select>
<output> Afficher le résultat d’un calcul ou d’un script
<select> Créer une liste déroulante
<textarea> Définir un champ de texte sur plusieurs lignes

Quels sont les attributs les plus importants pour les HTML Forms ?

Il existe de nombreux attributs HTML vous permettant d’ajouter différentes fonctions à un formulaire. Voici quelques-uns des attributs les plus importants :

  • action : indique l’URL vers laquelle les données du formulaire seront envoyées.
  • autocomplete : indique au navigateur s’il doit préremplir automatiquement un champ de saisie.
  • enctype : détermine comment les données adressées au serveur doivent être codées.
  • method : spécifie si les données doivent être transmises via la méthode GET ou POST
  • target : définit l’emplacement où s’ouvrira le document lié.
  • name : attribue un nom au formulaire, facilitant l’accès via JavaScript.
  • accept-charset : définit l’encodage des caractères à utiliser pour l’envoi des données du formulaire.

HTML Forms : exemples

Pour finir, nous illustrons le fonctionnement des HTML Forms à l’aide de deux exemples. Tout d’abord, nous créons un formulaire simple dans lequel les visiteurs peuvent saisir leur prénom et leur nom. Le code correspondant ressemble à ceci :

<!DOCTYPE html>
<html>
<body>
<h2>Exemple de formulaire HTML</h2>
<form action="/action_page.php">
<label for="name">Prénom :</label><br>
<input type="text" id="name" name="name" value="Pierre"><br>
<label for="surname">Nom de famille :</label><br>
<input type="text" id="surname" name="surname" value="Martin"><br><br>
<input type="submit" value="Envoyer">
</form>
<p>Cliquez sur « Envoyer » pour nous transmettre vos données.</p>
</body>
</html>
html

Sur le site Web, le formulaire correspondant au code se présentera alors comme suit :

Image: Exemple de formulaire HTML simple
Les champs de saisie permettent aux utilisateurs de saisir leur prénom et leur nom sur le formulaire.

Dans un autre exemple de formulaire HTML, nous utilisons les balises <select>, <option> et <optgroup> pour créer un champ de formulaire dans lequel les utilisateurs peuvent choisir différentes villes dans une liste déroulante :

<!DOCTYPE html>
<html>
<head>
<title>Exemple de formulaire HTML</title>
</head>
<body>
<label for="ville">Villes :</label>
<select id="ville"> name="ville">
<optgroup label="France">
<option value="paris">Paris</option>
<option value="marseille">Marseille</option>
</optgroup>
<optgroup label="Belgique">
<option value="bruxelles">Bruxelles</option>
<option value="bruges">Bruges</option>
</optgroup>
<optgroup label="Angleterre">
<option value="londres">Londres</option>
</optgroup>
</select>
</body>
</html>
html
Nom de domaine
Votre domaine en un clic
  • 1 certificat SSL Wildcard par contrat
  • Fonction incluse Domain Connect pour une configuration DNS simplifiée
Cet article vous a-t-il été utile ?
Aller au menu principal