Dans la rubrique "JavaScript et Html", vous avez pu vous initier à la création de formulaire "à l'ancienne" et probablement adopté un de ses exemples pour vos propres besoins. Après tout, c'est le but de ce site : vous aider par l'exemple et vous offrir des outils nécessaires à votre propre création. Si vous êtes bien décidé à vous lancer dans la conception moderne (mais classique ! point de fioriture à l'Applet ou au Flash qui flashe ...), je vous propose ici un formulaire du même type que l'ancien. Il n'y a plus ni tables, ni fontes, ni couleurs dans la page : tous les éléments de présentation sont inclus dans une feuille de style externe. C'est donc un formulaire totalement épuré de ses balises de présentation et de positionnement que vous trouverez ci-dessous. Mais la métamorphose a singulièrement amaigri la "bête", non pas visuellement mais sur la balance : 3947 octets contre 10029 octets pour l'ancienne méthode ! Spectaculaire, non !? Et pourtant, les règles de style "pèsent" à peine 411 octets et sont incluses dans une feuille utilisée pour d'autres pages ! Vous les avez déjà (et votre visiteur en fera autant si vous adoptez cette pratique) chargées en "cache" pour lire d'autres exposés : elles attendaient sagement que vous ouvriez cette page-ci ... Le résultat : il faudra 1 à 2 secondes à peine pour le charger !
Présenté avec quelques petites différences par rapport à l'ancien mais comportant 3 options supplémentaires (par des "chekboxes") pour enregistrer une réponse pour les nouveaux navigateurs, voici son aspect :
Vous serez automatiquement redirigé vers le sommaire du site après votre envoi
Il semble donc être le frère jumeau de son "ancêtre".
Son architecture (puisqu'il s'agit de l'utilisation de blocs imbriqués) est très simple :
- Il est composé de 4 blocs :
- un calque principal dit "calque mère"
- deux calques "verticaux" divisant le précédent en 2 parties égales : gauche et droite
- un calque horizontal destiné à centrer et contenir les boutons d'envoi ou d'effacement
- dont les règles de style sont les suivantes :
- #formtotal {position:relative; width:760px; height:710px; text-align:left;font-family: helvetica,arial; font-size:14px; color:black; background-color:silver; text-align:left}
- #formgauche {position:relative; width:360px; height:630px; float:left; padding:7px}
- #formdroit {position:relative; width:370px; height:630px; float:right; padding:7px}
- #formboutons {text-align:center} qu'il n'est pas nécessaire de dimensionner
#formgauche
calque gauche
il comporte les différents éléments que vous observez sur la partie gauche du formulaire
#formdroit
calque droit
il comporte les différents éléments que vous observez sur la partie droite du même formulaire
Afin d'enjoliver (si besoin est ...) l'ensemble, on peut y ajouter les règles suivantes :
- option {background:yellow}
- input {background:#dffffd}
- textarea {background:#fff4e3}
Il vous reste maintenant à agencer à votre guise les différentes options possibles si vous désirez les
changer pour votre propre usage. Si vous êtes arrivé jusqu'ici vous devez être capable de faire un "clic
droit" ... ; ne vous en privez donc pas pour voir en code source la manière de "placer" ces options.
Un détail, encore, mais qui a son importance : l'hébergement de ce formulaire. Vous avez pu lire dans la
rubrique "Html et JavaScript" les impératifs liés à ce genre d'évènement : il nécessite, en principe, un
prestataire et hébergeur de CGI. Il faut aussi, selon ce prestataire, modifier l'en-tête du formulaire pour
qu'il soit opérationnel. Si vous optez pour civis.net dont vous trouverez l'adresse ... dans
les pages d'adresses, il sera le suivant :
<input type=hidden name="Mail Addr" value="votre_email@xxxxxxx.xxx">
<input type=hidden name="URL Back" value="http://monsite.com">
La redirection se fera automatiquement sur la page dont vous aurez écrit l'adresse.
Si votre prestataire n'est autre que Free.fr qui héberge ce site, il faudra installer cet en-tête :
... et impérativement installer une page de redirection dont le nom sera result.html dans le répertoire racine contenant votre formulaire. Si vous l'omettez, vous aurez réalisé un beau travail ... pour rien.
Si votre hébergeur est Orange, vous utiliserez ces lignes :
<input type=hidden name="email" value="votre_email@orange.fr"> (facultatif)
<input type=hidden name="URL" value="http://perso.orange.fr/votre_site/merci.htm">
... sans oublier de créer merci.html qui sera également une page de redirection comportant un lien de retour vers votre page d'accueil
L'utilisation d'un prestataire externe, un hébergeur de CGI, ne plaît pas à tout le monde.
Elle permet néanmoins au visiteur de votre site de ne pas donner son adresse électronique s'il désire rester
anonyme. Il existe un moyen de vous faire envoyer directement le résultat du formulaire mais, avant l'envoi
de celui-ci, votre visiteur sera prévenu que son adresse "Email" accompagnera le document. Ce moyen est
simple : l'envoi direct dans votre propre boite. Dans ce cas, l'en-tête sera le suivant :
method="post" enctype="text/plain">
Il n'est dès lors pas nécessaire de faire une page de redirection : le visiteur restera sur la page qu'il a sous les yeux.
