Insérer un formulaire

 

Voilà un élément important de vos pages web. L'utilisation classique du formulaire consiste à permettre à vos visiteurs de vous envoyer des messages.

Il est simple de créer un formulaire avec Nvu. Par contre il est plus difficile de récupérer les données du formulaire. C'est impossible en HTML, il faut donc utiliser des programmes fournis par certains hébergeurs (voir plus bas) ou connaître la programmation en php. Vous pouvez utiliser le service que je vous propose dans la partie "script php" pour récupérer les données de vos formulaires (aucune connaissance en php est nécessaire). Ce service est gratuit et sans installation. Il récupère les données de vos formulaires et vous les envoie par mail.

Créer un formulaire avec Nvu

Dans Nvu, la création d'un formulaire passe par le bouton "Formulaire".

Commencez par "définir un formulaire" en lui donnant un nom, l'adresse de la page (ou du programme) qui traitera les données (c'est l'attribut ACTION) et la méthode utilisée (POST).

Vous pouvez ensuite très facilement ajouter des champs de texte ou des menus déroulants à partir du bouton "Formulaire". Pour cela, vous cliquez sur le petit triangle à droite du bouton "formulaire" et vous choisissez dans la liste l'élément souhaité. Les principaux éléments se trouvent dans le choix "Champ de formulaire...". Voici les principaux éléments possibles pour un formulaire :

Pour les champs suivants cliquez sur le bouton "Formulaire" puis sur "Champ de formulaire..." :

Champ de type texte :

Champ de type mot de passe :

Champ de type "Case à cocher" :

Champ de type "Bouton radio" :ouinon

Champ de type "fichier" : 

Bouton de validation :

Les champs suivants s'obtiennent directement depuis le bouton "Formulaire" (en cliquant sur le petit triangle) :

Zone de texte (Champ texte sur plusieurs lignes) :

 

Liste de sélection (Menu déroulant : ) option 1 option 2

Nous allons voir dans les exemples ci-dessous comment traiter les données saisies dans les formulaires. Nous verrons comment faire lorsqu'on est un abonné à Free, puis pour un abonné à Orange et enfin un exemple d'un service indépendant de l'hébergeur. Ceux qui souhaitent traiter les données sans passer par un prestataire de service devront se tourner vers la programmation, PHP par exemple (voir les cours sur PHP).

Un exemple simple

Nous allons reproduire ce formulaire très simple. Il peut permettre de proposer à vos visiteurs une lettre d'information si ceux-ci vous envoient leur adresse mail. Inutile de tester l'exemple ci-dessous, il ne fonctionne pas :

E-mail :

Vous pouvez créer le formulaire avec le bouton "Formulaire" de Nvu ou copier/coller un formulaire qui existe sur un autre site. Souvent votre fournisseur d'accès vous en propose. C'est le cas par exemple de Free et Wanadoo.

L'exemple ci-dessus provient de Free. Il suffit d'aller voir cette page : Formulaire Free pour obtenir un formulaire. Il ne fonctionnera bien sur que chez Free. Pour qu'il fonctionne ailleurs il faut modifier l'attribut "action". Cet attribut défini la page (ou le programme) qui recueillera les données du formulaire.

Free vous propose d'utiliser le code suivant (A noter qu'il n'est pas compatible XHTML puisque les balises sont en majuscules):

<FORM METHOD="POST" ACTION="http://perso0.free.fr/cgi-bin/form2mail.pl">
<INPUT TYPE="text" name="nom_du_champ">
.. Et tous les champs dont vous avez besoin ..
<INPUT TYPE="submit" VALUE=" O K ">
</FORM>

Sélectionnez le puis copier le. Dans Nvu, cliquez à l'endroit où vous voulez insérer le formulaire, puis sur "Insérer" puis "html". Vous obtenez la fenêtre suivante ...

 

... dans laquelle vous pouvez coller le code de Free. Cliquez ici pour voir le code dans l'image.

Vous obtenez l'affichage suivant :

.. Et tous les champs dont vous avez besoin ..

Il ne reste plus qu'à l'arranger en mettant un intitulé à gauche du champ et en supprimant le texte au milieu.

Dans le cas de Free, le formulaire sera traité par un logiciel (cité dans la première ligne du code, après l'attribut ACTION) nommé form2mail.pl. Les données du formulaire seront renvoyées par mail à l'abonné Free qui le met en place.

A peine plus compliqué !

Essayons maintenant d'obtenir ceci :

Nom :

E-mail :

En fait, il suffit de garder le formulaire réalisé dans le paragraphe précédent et de copier le champ de texte. Donc on clique sur le champ de texte, puis copier/coller et on obtient un deuxième champ de texte. Il suffit de rajouter un intitulé et le tour est joué. Enfin presque !

En effet dans l'état actuel les deux champs ont le même nom, ce qui empêchera au programme qui traitera le formulaire de le faire correctement. Il suffit de double-cliquer sur un champ pour modifier ses caractéristiques, dont le nom. Il est très important que chaque champ ai un nom différent.

Vous pouvez aussi modifier le texte du bouton "ok" en double-cliquant dessus.

Un formulaire un peu plus complexe

Prenons maintenant comme exemple celui fourni par Orange.

 

Le code à copier est le suivant. Il ne fonctionnera que si vous êtes abonné Orange.

Ce code est plus complet et vous permet de spécifier l'adresse mail où envoyer les données ainsi que la page à charger après validation du formulaire. Copiez le code et collez le comme précedemment dans la fenêtre "Insérer, html". Vous devez bien sur modifier les textes en rouge. Vous pouvez aussi supprimer tous les champs superflus.

<form method="post" action="http://pages.perso.orange.fr/client/php/formulaire.php">
<table> <tr> <td colspan="2">
<input type="hidden" name="sujet" value="Formulaire des Pages Perso">
<input type="hidden" name="url" value="http://perso.orange.fr/mon_site/merci.html">
Les champs marqués d'un * sont obligatoires.
</td> </tr> <tr> <td>
Nom^(*)
</td> <td width="150">
<input type="text" name="*nom" >
</td> </tr> <tr> <td>
Adresse
</td> <td width="150">
<input type="text" name="adresse" >
</td> </tr> <tr> <td>
Ville
</td> <td width="150">
<input type="text" name="ville" >
</td> </tr> <tr> <td>
Département
</td> <td width="150">
<input type="text" name="departement" >
</td> </tr> <tr> <td>
Code Postal
</td> <td width="150">
<input type="text" name="postal" >
</td> </tr> <tr> <td>
Pays
</td> <td width="150">
<input type="text" name="pays" >
</td> </tr> <tr> <td>
Commentaires
</td> <td width="150">
<textarea name="commentaire">
</td> </tr> <tr> <td colspan="2" align="center">
<input type="submit" value="Envoyer">
<input type="reset" value="Effacer">
</td> </tr> </table> </form>

L'affichage "Balises HTML" de Nvu

Cette fois encore, cet affichage va se montrer bien pratique. Avec l'affichage normal on ne voit pas les limites du formulaire. Ainsi on ne peut pas être sur de coller les nouveaux champs au bon endroit. De même vous aurez peut être un jour envie de créer votre propre page de traitement des données du formulaire (très facile en php) et il faudra alors l'indiquer dans le formulaire.

Passez dans l'affichage "Balises HTML". Cliquez sur la balise FORM. Votre formulaire est alors sélectionné. Si vous double-cliquez vous ouvrez les propriétés du formulaire et vous pouvez modifier la page qui traite le formulaire.

Vous pouvez double-cliquer sur n'importe quelle balise et modifier les paramètres des différents champs de formulaire : nom, taille, nombre de caractères autorisés, ...

Traitement des données du formulaire

En n'utilisant que le HTML il n'est pas possible de traiter vous-même les données du formulaire. Vous êtes obligé de passer par un prestataire de service (Free, Orange, ...)

Si votre hébergeur ne fourni pas de service de traitement de formulaire, vous pouvez utiliser un service gratuit que je vous propose sur cdprof.com.:

Traitement d'un formulaire sur cdprof.com

Et pour ne pas utiliser les services d'une société, vous devez connaître un langage de programmation. Vous apprendrez à traiter vous même vos formulaires avec les cours sur le langage PHP.

Exercice :

Créer un formulaire avec un champ pour le nom, un champ pour l'adresse e-mail et un champ de plusieurs lignes pour des commentaires. Vous aurez ainsi un formulaire pour que vos visiteurs puissent vous envoyer des commentaires, même s'ils n'ont pas de logiciel de courrier électronique (cas très fréquent des personnes qui utilisent des webmails par exemple dans les établissements scolaires.)

Pour en savoir plus

Nous avons vu dans cette page une première approche des formulaires. Pour ceux qui souhaitent aller plus loin, je vous conseille vivement les articles sur les formulaires du site OpenWeb.

Cours suivant : Insérer des scripts