ALL HTML - Formulaires

retour

Formulaires

Article publié le mardi 16 mars 2004 par ALL HTML.
Cet article est classé dans les catégories « HTML »

Pourquoi un formulaire ?

Les formulaires permettent avant tout de faire réagir votre visiteur, de l'inviter à laisser ses impressions, ses commentaires. Vous pouvez même gérer votre propre livre d'or. Alors jouez l'interactivité !!.

La création des formulaires se réalise grâce à plusieurs champs, dans lesquels le visiteur entre une information ou opte pour un choix. L'information est ensuite envoyée, à l'aide de scripts, sur le serveur qui vous héberge puis renvoyée, dans la plupart des cas, sur l'adresse électronique de votre choix.

La balise <form>

La balise <form> vient en début de votre formulaire (elle ferme votre formulaire) et possède 3 attributs :

a) action :

Adresse le formulaire vers l'URL (relative) du script CGI (fourni par le serveur qui héberge vos pages), qui accepte l'information et vous le retourne suivant les paramètres définis. Les valeurs les plus souvent couramment utilisées sont :

- "mailto:webmaster@allhtml.com" : Pour l'envoi du formulaire par le logiciel de messagerie de votre visiteur. Attention : cette valeur peut poser problème avec certains navigateurs, notamment I.Explorer 3.0
- "/cgi-bin/mailer" : Pour l'envoi du formulaire par le script CGI de votre hébergeur

b) method :

2 valeurs sont proposées :

- post : Pour un formulaire classique
- get : Pour (par exemple) définir un moteur de recherche sur votre site

c) enctype:

Cet attribut spécifie le format des données envoyées, dans le cas où un protocole n'imposerait pas de format précis. Il possède plusieurs valeurs dont :

- "text/plain" : Valeur utilisée dans le cas d'un formulaire classique
- "multipart/form-data" : Valeur utilisée dans le cas où le formulaire comprendrait un fichier attaché (<input type="file" ...>)

Exemple pour le serveur d'hébergement Multimania :


<form method=get action="/cgi-bin/mailer">

Exemple pour un formulaire classique sans l'aide de script CGI :


<form action="mailto:webmaster@allhtml.com" method=post enctype="text/plain">

Champs de saisie

La balise <input type="text" ... > permet à l'utilisateur de saisir une ligne de texte. Elle a les attributs suivants :
- name : Définit le nom de la donnée (obligatoire)
- size : Définit la taille visible du champ en nombre de caractères
- maxlength : Taille maximale de caractères autorisés
- value : Définit le texte par défaut à l'intérieur du champ

A noter que la valeur type peut avoir plusieurs valeurs dont :
- password : Code secret - range : Permet de définir un espace de saisie numérique (exemple entre 0 et 50, min="0" max="50")

Exemple d'un champs de saisie et son code source :


<form>
    <input name="urlsite" size="40" maxlength="40" value="http://" type="text" />
</form>

Boîte de texte multiligne

C'est la balise <textarea> qui est utilisée pour réaliser une boîte de texte multiligne. Cette balise est surtout choisie pour permettre aux visiteurs de votre site de laisser un commentaire ou de taper un texte quelconque.
Ses attributs sont : - name : Définit le nom de la donnée (obligatoire)
- rows : Définit le nombre de lignes dans la boîte de saisie
- cols : Définit le nombre de colonnes (en caractères) dans la boîte de saisie
- readonly : Spécifie que la boîte multiligne est en mode lecture seulement

A noter que si du texte se trouve à l'intérieur des balises <textarea> et </textarea> il va alors apparaître comme texte par défaut.

Exemple d'une boîte de saisie et son code source :


<form>
    <textarea name="commentaire" cols="30" rows="4">
        Tapez votre commentaire </textarea>
</form>

<textarea name="commentaire" cols=30 rows=4>
Tapez votre commentaire
</textarea>

Listes de choix

La balise <select> présente une liste de propositions, soit sous forme de liste déroulante (un seul choix possible), soit sous forme de menu (plusieurs choix possibles), elle doit être couplée avec la balise <option> pour définir les choix.

Voici ses attributs :

- name : Définit le nom de la donnée (obligatoire)
- size : S'il a comme valeur 1(valeur par défaut), c'est une liste déroulante ; si size supérieur à 1 c'est une liste de choix avec une barre de défilement
- multiple : Ce choix est valable uniquement si size est supérieur à 1

La balise <option> comporte deux attributs :

- value : Nom de la donnée pour le choix
- selected : S'il est présent dans la balise <option>, le choix est alors reconnu comme choix par défaut

Exemple d'une liste déroulante et son code source :

<form><select name="liste"><option value="Choix 1">Choix 1 </option><option value="Choix 2">Choix 2 </option><option value="Choix 3">Choix 3 </option></select></form>


<select name="liste">
    <option value="Choix 1">Choix 1
    <option value="Choix 2">Choix 2
    <option value="Choix 3">Choix 3
</select>

Exemple d'une liste sous forme de menu et son code source :

<form><select name="liste2" size="3" multiple="multiple"><option value="Choix 1">Choix 1 </option><option value="Choix 2">Choix 2 </option><option value="Choix 3">Choix 3 </option></select></form>


<select name="liste" size=3 multiple>
     <option value="Choix 1">Choix 1
     <option value="Choix 2">Choix 2
     <option value="Choix 3">Choix 3
</select>

Cases à cocher et Boutons radio

La Balise <input>, que l'on a vu au-dessus, permet aussi de représenter une liste de cases à cocher (plusieurs choix possibles) ou une liste dite "bouton radio" (un seul choix possible). Il suffit pour cela de lui spécifier l'attribut type="checkbox" (cases à cocher) ou type="radio" (bouton radio).

Les autres attributs sont les suivants :

- name : Définit le nom de la donnée (obligatoire)
- value : Nom de la donnée pour le choix
- checked : S'il est présent dans la balise <input>, le bouton sera coché par défaut

Exemple d'une liste de cases à cocher et son code source :
Cette liste se positionne verticalement du fait que la balise <br> a été insérée après chaque choix.

<form><input name="CHOIX" value="CASE 1" type="checkbox">CASE 1<br><input name="CHOIX" value="CASE 2" type="checkbox">CASE 2<br><input name="CHOIX" value="CASE 3" type="checkbox">CASE 3<br></form>


<input type="checkbox" name="CHOIX" value="CASE 1"> CASE 1<br>
<input type="checkbox" name="CHOIX" value="CASE 2"> CASE 2<br>
<input type="checkbox" name="CHOIX" value="CASE 3"> CASE 3<br>

Exemple d'une liste à boutons radio et son code source :
A noter que le choix 3 est coché par défaut.

<form><input name="CHOIX" value="Bouton 1" type="radio">Bouton 1 <input name="CHOIX" value="Bouton 2" type="radio">Bouton 2 <input name="CHOIX" value="Bouton 3" checked="checked" type="radio">Bouton 3 </form>


<input type="radio" name="CHOX" value="Bouton 1"> Bouton 1
<input type="radio" name="CHOX" value="Bouton 2"> Bouton 2
<input type="radio" name="CHOX" value="Bouton 3" checked> Bouton 3

Fichier attaché

Lors d'un envoi de formulaire, vous pouvez proposer au visiteur de vous faire parvenir un fichier attaché (ou pièce jointe), il suffit pour cela d'indiquer la valeur "file" à l'attribut type.

Exemple pour un choix de fichier attaché :

<form><input value="fichier" type="file"></form>


<input type="file" value="fichier">

Soumettre son formulaire

La soumission (envoyer) ou la remise à zéro (recommencer) d'un formulaire se fait, une fois de plus, avec la balise <input> type, ayant ici deux autres valeurs :

- submit : Envoi le formulaire vers le serveur
- reset : Remet à zéro les choix du formulaire

Les légendes inscrites sur les boutons peuvent être modifiées avec l'attribut value.

Exemple des 2 boutons et leur code source :

<form><input value="Envoyer" type="submit"><input value="Recommencer" type="reset"></form>


<input type="submit" value="Envoyer">
<input type="reset" value="Recommencer">

Personnalisez vos boutons

Vous pouvez créer votre propre bouton d'envoi et de remise à zéro, ce qui mettra une touche personnelle à votre formulaire.
Pour obtenir un bouton personnalisé de remise à zéro (reset), il suffit tout simplement d'encadrer l'image de votre bouton (avec la balise <img> ex : <img src=" bouton.gif">) entre les balises <A HREF="votrepageformulaire.htm"> et </A>. Cela aura pour effet de recharger votre page html de formulaire et donc d'annuler tous les choix du visiteur.

Exemple d'un bouton "reset" personnalisé et son code source :


<a href="formul2.htm"><img src="/gifdata/html17.gif" alt="Annuler" border="0" height="9" width="45"></a>

<a href="formul2.htm">
<img src="/gif/annuler.gif" border=0 width=45 height=9 alt="Annuler"></a>

En ce qui concerne le bouton d'envoi, il faut une fois de plus passer par la balise input avec l'attribut type="image".

Exemple d'un bouton d'envoi personnalisé et son code source :


<form>
    <img src="/gifdata/html16.gif" alt="Envoyer" border="0" height="9" width="45">
</form>

Inclure des données cachées

Si vous souhaitez envoyer certaines données au script du serveur chargé de traiter votre formulaire, vous devez utiliser la balise <input> avec l'attribut type="hidden". Prenez contact avec le service qui vous héberge afin d'obtenir les différentes valeurs à indiquer avec la balise <input>

Mise en forme des formulaires

Il y a mille et une façons de concevoir un formulaire. Mais sachez, avant tout, que plus il sera clair et lisible, plus il sera complété par vos visiteurs. Pour cela, vous pouvez opter pour des tableaux, des listes à puces (pour les cases à cocher notamment), des listes de définition et bien sûr, des balises de formatage et d'alignement de texte.

Exemple de formulaire :

Voici un exemple concret de formulaire ainsi que le code source :


<form action="mailto:email@adresse.com" method=post enctype="text/plain">
    Votre E-Mail.
    <input type="text" name="email" size=30 maxlength=40 value="nom@provider.domaine">
    <BR>
    <br>
    Tapez ici votre commentaire.
    <textarea name="comm" cols=31 rows=4>
         Votre commentaire
    </textarea>
    <br>
    <br>
    <input type="submit" value="Envoyer">
    <input type="reset" value="Annuler">
</form>

<form action="mailto:email@adresse.com" method=post enctype="text/plain">
Votre E-Mail.
<input type="text" name="email" size=30 maxlength=40 value="nom@provider.domaine">
<BR>
<br>
Tapez ici votre commentaire.
<textarea name="comm" cols=31 rows=4>
Votre commentaire
</textarea>
<br>
<br>
<input type="submit" value="Envoyer">
<input type="reset" value="Annuler">
</form>

VOS COMMENTAIRES ...

Commenter cette publication

Commentaire publié le vendredi 28 juillet 2006 à 09 h 12 par bkoz01: Pour commencer, j'aimerai remercier les personnes en charge du site ALL-HTML, sans vous je n'aurais jamais mis mes pieds dans la programmation web.
Passons aux choses un peu plus terre à terre, j'ai une petite question au sujet des formulaires. Mon problème réside dans le fait de rendre actif un input text dés le chargement de la page. En gros, je voudrais que le curseur soit directement dans la première case de mon formulaire dés le chargement de la page. Merci pour vote aide et longue vie à votre site.
Commentaire publié le vendredi 28 juillet 2006 à 10 h 14 par Pierre19: salut bkoz01

Pour récupérer le curseur sur un champ, tu peux procéder comme ceci :

<form name="tonformulaire" action="tonaction">
<input type="text" name="tonchamp">
<script type="text/javascript" language="JavaScript">document.tonformulaire.tonchamp.focus();</script>
</form>
Commentaire publié le vendredi 28 juillet 2006 à 13 h 48 par bkoz01: Merci Pierre, ca marche parfaitement!!
Commentaire publié le vendredi 28 juillet 2006 à 13 h 59 par bkoz01: Serait il possible de passer l'info par les styles de la balise input?
Du genre <input style='focus = yes'>???
Commentaire publié le dimanche 30 juillet 2006 à 15 h 35 par louisist: Bonjour,

J'ai un petit problème. J'ai bien recopié le code comme convenu, sans passer par cgi avec :<form method=post action="mailto:monmail" enctype=text/plain>. Le problème est lorsque je teste j'ai outlook qui s'ouvre avec mon mail en destinataire et un message vierge. Que faire? Faut-il utiliser un script cgi pour être sur que le problème n'arrive pas a partir d'autres ordis?

Merci d'avance
Commentaire publié le mercredi 23 août 2006 à 10 h 34 par trollstef: Bonjour,

Suite à la très interessant lecture de cet article, j'ai utilisé les conseils donnés pour la création d'un formulaire sur mon site.

Dans ce cadre, j'ai une question:

Les résultats du sondage sont-ils obligatoirement envoyés par le biais d'un logiciel de messagerie type Outlook ?

Voici l'adresse du formulaire:
http://l.pouletgeorges.free.fr/site/formulaire.htm

Merci d'avance, STeF.
Commentaire publié le mercredi 23 août 2006 à 13 h 37 par trollstef: N'ayez pas l'impression que je floode ;-)

J'ai trouvé d'où venait l'erreur; simplement de mon code, inadapté à Free.

J'utilise maintenant CDprof pour relayer ce formulaire, et tout fonctionne comme des roulettes... Le lien donné ci-dessus n'est plus valide par contre, car il ramenait vers ma page, qui contient trop d'informations personnelles.

A bientôt, STeF.
Commentaire publié le samedi 09 septembre 2006 à 05 h 33 par Jimmart: bonjour, j'ai une question eh... je suis entrain de faire une page web et je mets plusieurs liens sur mon site mets je n'utilise pas la balise <a href...> mais j'ai trouver un code qui donne presque le même résultat mais on clique sur un bouton au lieu d'un text pour aller sur le site.Bref le seule problème est que la fenêtre qui s'ouvre n'est pas agrandisable et c'est énervant car elle n'est pas plus grosse que 250 par 400 pixel environ voici le code:

<form>
<input type="button" value="Exemple" name="Exemple" onclick="window.open('fenetre.htm', 'Exemple', 'width=250,height=300,top=120,left=120')">
</form>
menubar=yes,toolbar=yes,location=yes,status=yes,scrollbars=yes

je sais que je peux modifier la valeur en largeur et en hauteur mais je ne sais pas comment faire pour que la fenêtre prenne 100% de l'écran malgré la taille de l'écran.
Commentaire publié le lundi 02 octobre 2006 à 10 h 05 par Claribelle: Bonjour,
Je débute dans la création de formulaire, et je voudrais récupérer mes données sur mon email.
Mais le bouton d'envoi de ce formulaire, si il m'ouvre bien la page de confirmation du formulaire, ne l'envoie pas du tout.
Par contre, si je me serts du tag <input type=submit>, le formulaire est bien envoyé, mais il ne m'affiche pas la page de remerciement.
Comment dois-je faire ? dois-je créer un script quelque part ?
Merci de vos réponses.
Claribelle

<HTML><HEAD><TITLE>Test Formulaire</TITLE></HEAD>
<BODY border=0>
<center><b>Formulaire</b></center>
<FORM name=form1 method="post" action="mailto:lfjbgfjkl@msn.com" ENCTYPE="text/plain">
<fieldset>
<legend><IMG SRC="formTitre02.jpg" width=200></legend>
<pre>
<B><I>Titre : </i></b> <select name=chTitre><option selected>M. et Mme</option><option>M.</option><option>Mme</option><option>Mlle</option><option>Dr</option><option>Me</option></selected>
<p>
<b><I>Nom : </i></b> <input type=TEXT NAME=chNom value="" size=40>
<B><I>Prénom : </i></b> <input type=TEXT NAME=chPrenom value="" size=40>
<B><I>Courriel</B></I> <input type=TEXT NAME=chEmail value="" size=60>
</pre>
<BR>
<Center>
<a href="centreFormFin.htm"><img src="formEnvoi.jpg" border=0 alt="envoyer"></a>
<a href="centreForm.htm"><img src="formReset.jpg" border=0 alt="annuler"></a>
</center>
</form>
Commentaire publié le jeudi 28 décembre 2006 à 17 h 37 par boro64: Bonjour,
Pour répondre à la question précédente, je dirais que la meilleure solution est de lier ton form à du php. Tu trouveras des tutaux et des scripts sur les site de php france, php debutant, etc.
Par contre j'ai une 'tite question bête:
Est-il possible que ma liste déroulante (département, métiers, etc.) soit organisé alphabétiquement? Quel serait l'attribut qui ferait cela? Y en a-t-il un d'ailleurs? Ou bien, comme je le crains, là aussi la seule solution, c'est php?
D'avance merci pour vos tuyaux et autre infos.
Commentaire publié le dimanche 31 décembre 2006 à 16 h 59 par prost84: Bonjour,

Question posée :
"Est-il possible que ma liste déroulante (département, métiers, etc.) soit organisé alphabétiquement? Quel serait l'attribut qui ferait cela? Y en a-t-il un d'ailleurs? Ou bien, comme je le crains, là aussi la seule solution, c'est php?".

Pour répondre à la question, j'ai trouvé un moyen simple mais efficace pour que les éléments soient dans l'ordre. J'espère que ça peut répondre à votre question. Il suffit de remettre dans l'ordre les balises d'options. Voici un exemple de formulaire très simple dont les éléments de la liste sont dans le désordre :

<form name="formulaire">
<p><select name="listdéroulante" size="1">
<option value="boulanger">boulanger</option>
<option value="pompier">pompier</option>
<option value="chanteur">chanteur</option>
<option value="electricien">electricien</option>
</select></p>
</form>

En remettant dans l'ordre les balises options, on obtient :

<form name="formulaire">
<p><select name="listdéroulante" size="1">
<option value="boulanger">boulanger</option>
<option value="chanteur">chanteur</option>
<option value="electricien">electricien</option>
<option value="pompier">pompier</option>
</select></p>
</form>

Et là normalement tous les éléments de la liste déroulante sont dans l'ordre.
Commentaire publié le dimanche 31 décembre 2006 à 17 h 09 par prost84: Par contre unechose que je vins d'omettre pour compléter les informations ci-dessus :

<option value="pompier">Métier de pompier</option>

Le mot "pompier" tout court sera ce que vous recevrez comme valeur choisie par le visiteur. En gros c'est la valeur que vous recevrez dans la base de données (si vous utilisez une base de données) ou par mail (si vous optez pour la solution de passer par un hébergeur)... alors que "métier de pompier", c'est ce que verra le visiteur sur le site en regardant dans la liste déroulante.

Pour résumer, ces 2 choses peuvent être totalement différentes.

L'un sera ce que le visiteur verra dans votre liste déroulante et l'autre sera la valeur que vous recevrez du formulaire. Pour l'option "value" éviter les accents ou tout caractère spécial...
Commentaire publié le lundi 12 février 2007 à 02 h 13 par samirsami: bonjour,
pour commancer merci pour tt les informations ,
beh j'ai creer ma formulaire mais quand j'entre sur mon site et je remplis la formulaire et je clic sur envoyer voila ce qu elle ma donne :

( Composant actif lors de sessions Internet

Vous avez soumis un formulaire ou suivi un lien hypertexte vers une page ne pouvant fonctionner correctement qu'avec un serveur Web doté des extensions serveur FrontPage.

Si vous publiez ce site Web sur un serveur Web disposant des extensions serveur FrontPage, ce formulaire ou autre composant FrontPage fonctionnera correctement.
Cliquez sur la flèche <Précédente> pour retourner à la page précédente.)
alors je sais plus quoi faire !!! pourriez vous m'aider s'il vous plait !!
merci par avance
Commentaire publié le mardi 06 mars 2007 à 19 h 49 par manu7762323: Bonjour,

Je suis actuellement en train de créer une page pour mon groupe sur myspace (je n'ai donc pas d'hébergeur) et je voudrais mettre en place un formulaire HTML (seul langage pris en compte (avec le css)). Le problème n'est pas la mise en page du formulaire, mais le fait que lorsqu'on rempli mon formulaire, je reçois un mail avec les données de la forme :

Nom:Richard;Prénom:Beaulieu;Adresse:etc.

Connaissez-vous un moyen pour que ces infos soient plus clairement organisées dans mon mail ?

Merci d'avance,
Commentaire publié le jeudi 22 mars 2007 à 21 h 55 par Giardiniera: Un grand merci pour ce "tutorial" sur les formulaires.

Un question : "est ce possible lors de l'envoi avec la commande <form action="mailto:---
d'envoyer à deux adresses distinctes le formulaire.
Commentaire publié le lundi 03 mars 2008 à 13 h 04 par erwannoooo: Bonjour,
je me tourne vers vous car j'ai un petit problème de passage de données. En effet j'ai créé un formulaire avec une liste déroulante mais les choix de la liste ne sont pas pris en compte. Je ne vois pas d'ou ça peu venir ... Voici mon code :

<form action="../php/test.php" method="post">
<select name="t" id="t" style="background-color:#daedf4; color:#555756; border-color:#555756; font-size:12">
<option>Choisissez</option>
<option value=r1>rouge</option>
<option value=r2>bleu</option>
<option value=r3>vert</option>
<option value=r4>noir</option>
</select>
<input type="submit" value="OK"/>
</form>

Ces données sont ensuite traités avec du PHP, je dois récupérer les valeurs, r1, r2 ... pour faire un test. Cependant je n'arrive pas à récupérer ces valeurs !

Je ne vois pas l'erreur... Merci de votre aide.
Commentaire publié le jeudi 24 avril 2008 à 13 h 29 par praud2: Bonjour,
je suis passé d'orange à free et je n'arrive pas a récupérer les infos de mes formulaires

voici le code sur orange/wanadoo
" OnSubmit="return champsokc ceci est un controle d'obligation de reseigner toutes le case

<FORM NAME="form" METHOD="POST" ACTION="http://pages.perso1.wanadoo.fr/client/php/formulaire.php
" OnSubmit="return champsok()">

<INPUT TYPE="HIDDEN" NAME="email" VALUE="praud2@wanadoo.fr">

<INPUT TYPE="HIDDEN" NAME="sujet" VALUE="Demande de contact">
<form action="mailto"praud2@wanadoo.fr" method=post encrypt="textplain"name="formu" OnSubmit="return champsok()">

Merci
cordialement
Pascal Raud
Commentaire publié le vendredi 25 avril 2008 à 14 h 13 par Mesmerize: Bonjour !

Merci pour cet article qui m'a assez bien éclairé.
J'ai simplement un problème avec le enctype :

Mon formulaire comprend un input de type "file" et des input du type "text".

Lorsque je met enctype="multipart/form-data", je reçois bien mon fichier mais pas les variables text, à l'inverse si je l'enlève, je reçois le texte mais pas le fichier.

Comment puis-je combiner les deux?

Je vous remercie pour vos éventuelles réponses!
Mesmerize.