Créez votre site avec honolulu...
Apprendre le html
Cours de javascript
Apprendre les CSS

Apprendre le HTML : comment construire un formulaire  






Rédiger un sondage ne relève pas de l'impossible... Nous allons simuler ici un sondage requérant de la part de l'internaute des réponses techniques . Je dis simuler car "malheureusement" les hébergeurs gratuits obligent les webmasters à passer par leur serveur pour les formulaires... Il vous appartiendra de vous tourner vers votre hébergeur et d'adopter son système de traitement des formulaires...

Votre connexion Internet c'est :

Modem 56K
Modem 28K
ADSL
Le cable

Comme navigateur, vous utilisez (plusieurs réponses possibles) :

Communicator 4.7
Netscape 6.2
Internet Explorer 4
Internet Explorer 5.5
Internet Explorer 6

Vous avez un site personnel :

oui
non

Si vous avez des commentaires (60 car. max) :



    

Le code de ce formulaire est simple :
<form name="quest" action="mailto:votre_mail@free.fr" method="post" enctype="text/plain">

Votre connexion Internet c'est :

<input type="radio" name="connex" value="56k">Modem 56K
<input type="radio" name="connex" value="28k">Modem 28K
<input type="radio" name="connex" value="adsl">ADSL
<input type="radio" name="connex" value="cable">Le cable

Comme navigateur, vous utilisez (plusieurs réponses possibles) :

<input type="checkbox" name="navigateur" value="ns47">Communicator 4.7
<input type="checkbox" name="navigateur" value="ns62">Netscape 6.2
<input type="checkbox" name="navigateur" value="ie4">Internet Explorer 4
<input type="checkbox" name="navigateur" value="ie55">Internet Explorer 5.5
<input type="checkbox" value="ie6">Internet Explorer 6

Vous avez un site personnel :

<input type="radio" name="site" value="oui">oui
<input type="radio" name="site" value="non">non

Si vous avez des commentaires (60 car. max) :

<textarea name="commentaire" cols="20" rows="4"></textarea>

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

Comme son nom l'indique (en anglais, en tout cas) un formulaire doit être déclaré et encadré par les balises <form> et </form>
Entre ces deux balises, on insére le corps même du formulaire, ie, questionnaire et boutons de validation et de réinitialisation.

Ce qui est important dans la balise d'ouverture <form> ce sont les attributs ou paramètres qui vont être mis en oeuvre dans la suite des évènements :

action est l'action déclenchée par le bouton "submit". Cette action peut être simplement un mail ("mailto"), ou une action plus complexe en PhP, Perl, ou CGI qui va analyser et traiter le formulaire. Sachez cependant que beaucoup d'hébergeurs offrent et imposent ce type de fonctionnalité tout en garantissant confidentialité et sécurité.

method a comme choix, entre autres, "get" et "post". Pour l'instant et dans le cas présent, c'est la méthode "post" qui nous importe.

enctype Si vous ne mentionnez pas cet attribut, tous les formulaires qui vous parviendront seront difficilement déchiffrables et leur traitement sera fastidieux. Avec enctype="text/plain", vous recevrez par exemple, navigateur, ie55 au lieu de simplement ie55. Bien sûr ici dans notre formulaire nous avons peu de questions et donc peu de réponses. Mais si vous avez une vingtaine de questions et des milliers de réponses (je vous le souhaite), vous apprécierez d'avoir des repères pour mieux analyser et traiter les réponses des internautes...

Voici un formulaire que j'ai créé spécialement pour les sites hébergés par FREE :



Madame Mlle Monsieur

Votre nom :
Votre prénom :
Votre profession :
Votre e-mail :
Votre téléphone :






Si vous désirez faire des observations :



   

Le code est disponible sur le forum de ce site...

Encore et toujours les formulaires, si vous souhaitez faire des calculs savants sur la base des réponses de vos internautes, ie, que vous avez attribué des valeurs différentes (1 point , deux points ou trois points) selon la case cochée, ceci peut vous intéresser :

OUI
NON
BOF
Le site Honolulu est super
Je reviendrai sur ce site
Je le mettrai en Favori


Ici pour simplifier, j'ai attribué 5 points à chaque case de la colonne OUI, 3 points pour NON et 0 pour BOF mais on peut fort bien "compliquer" les choses et réfléchir non plus en terme de "colonne" mais de "ligne", ie, ligne de réponse, façon QCM test psychologique, et au sein même d'une ligne attribuer des points différents selon la réponse, car la méthode que j'utilise NE SE FONDE PAS sur la VALEUR des boutons cochés MAIS sur un GESTIONNAIRE d'évènements...
Regardez plutôt :

<script>
var ligne1;
var ligne2;
var ligne3;
function additionner(){
alert("Votre total est de "+(ligne1+ligne2+ligne3))
}
</script>

et pour chaque "input", le nombre de points affectés :

<input name="choix3" type="radio" onclick="ligne3=0">

Des questions, des doutes ? Le forum vous attend...