Créer un questionnaire en HTML

Pour recueillir des données ou commentaires des visiteurs de votre site, créez un questionnaire en HTML. Il peut contenir divers types de saisie : boutons radio, cases à cocher, listes déroulantes. Après soumission, recevez les réponses dans votre boîte email.

Étape 1

Ouvrez le document HTML où placer le questionnaire dans Notepad, l'éditeur HTML de votre hébergeur ou votre éditeur préféré. Pour une nouvelle page, créez un fichier TXT et insérez les balises de base :

<html>
<head><title>Titre de la page</title></head>
<body>
</body>
</html>

Les balises de formulaire iront entre les balises <body> d'ouverture et de fermeture. Une fois terminé, enregistrez en .htm ou .html et ouvrez dans un navigateur pour prévisualiser.

Étape 2

Insérez la balise <form>. Toutes vos questions et balises iront entre ces deux balises. Chaque balise doit contenir un attribut « name ». Pour que les réponses soient envoyées à votre email, votre balise form doit inclure l'attribut action et method.

Étape 3

Utilisez <input type="text"> pour créer un champ de saisie sur une ligne. Exemple pour demander qui a référé le visiteur :

<input type="text" name="referrer">

Étape 4

Utilisez <input type="radio"> pour des boutons radio. Le visiteur ne peut en sélectionner qu'un. Chaque bouton du groupe doit avoir le même name, mais des value uniques. Exemple pour demander si le visiteur a aimé le site :

<input type="radio" name="enjoyed" value="yes"> Oui
<br>
<input type="radio" name="enjoyed" value="no"> Non

La balise <br> crée un saut de ligne, HTML ne reconnaissant pas les espaces blancs.

Étape 5

Utilisez <input type="checkbox"> pour des cases à cocher. Le visiteur peut en sélectionner plusieurs. Comme les boutons radio, chaque option doit partager le même name mais avoir des value uniques. Exemple pour suggérer des fonctionnalités :

<input type="checkbox" name="features" value="pictures"> Plus d'images !
<br>
<input type="checkbox" name="features" value="links"> Plus de liens !
<br>
<input type="checkbox" name="features" value="content"> Plus de contenu !

Étape 6

Utilisez <select name="nom"> et </select> pour une liste déroulante. Pour chaque option, créez <option value="..."> entre les balises select, avec un value unique. Exemple pour demander la partie préférée du site :

<select name="favorite">
  <option value="colors" selected>Les couleurs.</option>
  <option value="photos">Les photos.</option>
  <option value="music">La musique.</option>
</select>

L'attribut « selected » sur « colors » en fait le choix par défaut.

Étape 7

Utilisez <input type="submit"> pour créer un bouton d'envoi. Au clic, les infos saisies sont envoyées selon la méthode de récupération spécifiée dans la balise <form> d'ouverture.