Les for­mu­laires HTML vous per­met­tent de com­mu­ni­quer fa­ci­le­ment et di­rec­te­ment avec vos visiteurs. Grâce à dif­fé­rents éléments et attributs, vous pouvez adapter les for­mu­laires à vos besoins.

Qu’est-ce qu’un for­mu­laire HTML ?

Les for­mu­laires HTML ou HTML Forms sont des for­mu­laires in­te­rac­tifs pour votre site Web, avec lesquels vos visiteurs peuvent vous trans­mettre des données per­son­nelles. Les données saisies sont ensuite envoyées au serveur Web pour être traitées. Pour intégrer cette forme d’in­te­rac­tion dans vos documents HTML, vous avez besoin de la balise (en anglais tag) HTML <form>. Cette balise HTML peut être per­son­na­li­sée en fonction de l’usage souhaité grâce à divers éléments et attributs. Il est possible d’intégrer dif­fé­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 per­son­nelles sur votre site Web à l’aide d’un for­mu­laire HTML, vous devez le signaler ex­pli­ci­te­ment dans la politique de pro­tec­tion des données de votre site Web et veiller à ce que la trans­mis­sion soit chiffrée SSL/TLS.

Hé­ber­ge­ment Web
Hé­ber­ge­ment Web de pointe au meilleur prix
  • 3x plus rapide, 60 % d'éco­no­mie
  • Haute dis­po­ni­bi­lité >99,99 %
  • Seulement chez IONOS : jusqu'à 500 Go inclus

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

Parce que les for­mu­laires HTML vous offrent tant d’options de saisie dif­fé­rentes, vous pouvez les utiliser pour une multitude d’ap­pli­ca­tions. En voici quelques-unes :

  • For­mu­laires de contact pour les demandes ou les commandes
  • For­mu­laires d’ins­crip­tion à un compte ou à une news­let­ter
  • Fonctions de feedback
  • Sondages
  • For­mu­laires de support et de gestion de tickets de service
  • For­mu­laires de connexion pour accéder à des zones protégées du site

En théorie, les for­mu­laire HTML couvrent la plupart des besoins in­te­rac­tifs des sites Web !

Syntaxe de la balise HTML <form>

Les for­mu­laires 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é­sen­te­rons plus en détail dans la suite de cet article. La syntaxe générale de ces for­mu­laires se présente comme suit :

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

Quels sont les dif­fé­rents éléments HTML pour créer un for­mu­laire ?

Il existe dif­fé­rents éléments HTML qui vous per­met­tent d’adapter votre for­mu­laire HTML à vos propres idées ou besoins. Nous vous les pré­sen­tons briè­ve­ment dans le tableau suivant :

Élément HTML Des­crip­tion
<button> Bouton cliquable simple
<datalist> Options pour l’élément <input> sous forme de liste dé­rou­lante
<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 for­mu­laire
<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é­rou­lante
<textarea> Définir un champ de texte sur plusieurs lignes

Quels sont les attributs les plus im­por­tants pour les HTML Forms ?

Il existe de nombreux attributs HTML vous per­met­tant d’ajouter dif­fé­rentes fonctions à un for­mu­laire. Voici quelques-uns des attributs les plus im­por­tants :

  • action : indique l’URL vers laquelle les données du for­mu­laire seront envoyées.
  • autocomplete : indique au na­vi­ga­teur s’il doit pré­rem­plir au­to­ma­ti­que­ment 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 trans­mises via la méthode GET ou POST
  • target : définit l’em­pla­ce­ment où s’ouvrira le document lié.
  • name : attribue un nom au for­mu­laire, fa­ci­li­tant l’accès via Ja­vaS­cript.
  • accept-charset : définit l’encodage des ca­rac­tères à utiliser pour l’envoi des données du for­mu­laire.

HTML Forms : exemples

Pour finir, nous il­lus­trons le fonc­tion­ne­ment des HTML Forms à l’aide de deux exemples. Tout d’abord, nous créons un for­mu­laire simple dans lequel les visiteurs peuvent saisir leur prénom et leur nom. Le code cor­res­pon­dant 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 for­mu­laire cor­res­pon­dant au code se pré­sen­tera alors comme suit :

Image: Exemple de formulaire HTML simple
Les champs de saisie per­met­tent aux uti­li­sa­teurs de saisir leur prénom et leur nom sur le for­mu­laire.

Dans un autre exemple de for­mu­laire HTML, nous utilisons les balises <select>, <option> et <optgroup> pour créer un champ de for­mu­laire dans lequel les uti­li­sa­teurs peuvent choisir dif­fé­rentes villes dans une liste dé­rou­lante :

<!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 cer­ti­fi­cat SSL Wildcard par contrat
  • Fonction incluse Domain Connect pour une con­fi­gu­ra­tion DNS sim­pli­fiée
Aller au menu principal