Docstoc

HTML Formulaire

Document Sample
HTML Formulaire Powered By Docstoc
					 Cours HTML->Les formulaires
Introduction


Qu'est qu'un formulaire?
Le formulaire HTML va vous permettre de récupérer des informations
que va saisir l'internaute sur votre site.

L'internaute va saisir ses informations soit en remplissant des champs
texte (input), soit sélectionnant un élément dans une liste déroulante
(select) ou en sélectionnant une case à cocher (radio, checkbox).
Une fois les informations saisies, l'internaute va valider en cliquant sur un
bouton de soumission (submit).

Alors les informations seront transmises soit à une adresse e-mail (mailto)
soit à un cgi (Common Gateway Interface), soit à une page dynamique de
type php, asp, jsp...
Descendre
                                                                       Remonte




La balise form


Info
Un formulaire HTML se définit par la balise HTML <FORM>
</FORM>.

La balise HTML <FORM> doit contenir deux attributs
indispensables.
- ACTION qui définit la destination où sont envoyées les donnés, en règle
générale c'est un cgi ou une page dynamique type php ou asp...
- METHOD qui définit la méthode d'envoi (POST et GET).
<FORM method="post" action="cgi-bin/script.php"></form>
Une balise <FORM> ne doit pas contenir une autre balise <FORM>.
Une page HTML peut contenir plusieurs formulaires.

Pour plus de détails sur la balise HTML <FORM> allez voir dans le
glossaire HTML.
Descendre
                                                                       Remonte




Mailto
Nous allons étudier dans ce chapitre l'attribut METHOD de type
"post" et l'attribut ACTION de type "mailto: Votre e-mail".
Nous l'écrirons :
<FORM ACTION="mailto:Votremail" METHOD="post" ENCTYPE="text/plain">


ENCTYPE précise la méthode MINE de codification (format d'envoi) qui va
être utilisé pour l'envoi en METHOD="POST".
"Text/plain" est la valeur qui doit être utilisé lorsque les informations
sont envoyées par courrier électronique, ce qui est le cas car l'action est
de type "mailto:Votremail".

Lorsque vous recevez le formulaire (avec cette méthode et cette
action), il sera sous cette forme :
prenom=joe
nom=momo
activite=


En fait, le premier mot est en général associé à l'attribut name d'une
balise et le second après le = est la valeur attribuée à value de cette
même balise. Il y a des exceptions que nous verrons lorsque nous
étudierons la balise.
La valeur de NAME doit être la plus significative de l'information
que vous demandez, la valeur ne doit pas comporter d'accent ni de
virgule.
Descendre
                                                                     Remonte




Effacer et envoyer


Info
Dans un formulaire vous devez avoir obligatoirement deux
boutons.

Un bouton pour réinitialiser le formulaire :
 Rétablir

<INPUT type="reset" name="nom" value="Rétablir">


Un bouton pour envoyer le formulaire :
 Envoyer

<INPUT type="submit" name="nom" value="Envoyer">
Value correspond au texte affiché sur le boutton.
Type définit pour ces deux boutons l'action à exécuter :
- reset pour réinitialiser
- submit pour envoyer.
Dans un formulaire, il ne peut y avoir qu'un seul bouton envoi et
réinitialise.

Le résultat de l'envoi :
Le bouton" reset" n'apparaît jamais dans le résultat.
Le bouton "submit" est envoyé lors de l'envoi du formulaire. Lors de
l'emploi de "Mailto" la valeur apparaît à la fin du résultat sous la forme :
name= value
nom = Envoyer


Pour plus de détails sur la balise allez voir dans le glossaire HTML
<INPUT>.
Descendre
                                                                        Remonte




Les champs de texte


Info
Il existe deux types de champs de texte :
- le champ simple d'une ligne,
- le champ multi-lignes.
Descendre
                                                                        Remonte




Simple
Le champ simple :

<INPUT type="text" name="nom" value="" size="5">


Type définit la forme de la balise <INPUT>, donc pour une zone de texte
simple c'est "text".
Name donne un nom au champ texte. Très important car à ce nom est
associé la valeur.
Value définit le texte mis au départ dans le champ, si le champ est vide
alors value="". sachez que si vous rentrez une valeur par défaut,
l'internaute sera obligé de sélectionner le texte de votre champ texte puis
de l'effacer pour pouvoir écrire un nouveau texte (sauf si vous utilisez le
javascript).
Size correspond à la longueur du champ, ce n'est pas des pixels, je dirais
que cela correspond à l'encombrement total horizontal de la lettre la plus
large (w).

Le résultat de l'envoi :
Le champ de texte apparaît sous la forme : name = value
nom = texte tapé par l'internaute
Descendre
                                                                      Remonte




Multi-lignes
Le champ multi-lignes :
 Texte défa




<TEXTAREA name="nom" cols="30" rows="5">Texte défaut</TEXTAREA>


COLS correspond à la longueur du champ, ce n'est pas des pixels, je
dirais que cela correspond à l'encombrement total horizontal de la lettre la
plus large (w).
ROWS correspond à la hauteur du champ c'est à dire le nombre de ligne.

Le résultat de l'envoi :
Le champ de texte apparaît sous la forme : name = value
nom = texte tapé par l'internaute
Descendre
                                                                      Remonte




Les cases à cocher et les boutons radio


Info
Il est important de faire la différence entre le bouton radio et la
case à cocher.
La case à cocher permet de faire des plusieurs choix sur un ensemble de
propositions.
   1          2   3      4      5



Le bouton radio permet de faire un choix sur un ensemble de
propositions.
   1          2   3      4      5
Descendre
                                                                       Remonte




Les cases à cocher


checkbox
La case à cocher s'écrit :
<INPUT type="checkbox" name="nom" value="Nom_du_choix">



Type définit la forme de la balise <INPUT>, donc pour une case à
cocher, c'est "checkbox".
Name donne un nom à la case. Très important car à ce nom est associé à
la valeur (value) lorsque l'on réceptionne le formulaire.
Value est la valeur de la sélection.

Le résultat de l'envoi :
Le champ de texte apparaît sous la forme :name = value
nom = Nom_du_choix


Pour plus de détails sur la balise allez voir dans le glossaire HTML
<INPUT>.
Descendre
                                                                       Remonte




Les boutons radio


Info
Le bouton radio s'écrit :
<INPUT type="radio" name="nom" value="Nom_du_choix">


Type définit la forme de la balise <INPUT>, donc pour un bouton radio,
c'est "radio".
Name donne un nom. Très important car à ce nom est associé une valeur
qui est en faite le texte saisit par l'internaute.
Pour faire un seul choix dans un ensemble de propositions, le nom doit
être identique.
Value c'est la valeur de la sélection.
Le résultat de l'envoi :
Le champ de texte apparaît sous la forme : name = value
nom = Nom_du_choix


Pour plus de détails sur la balise allez voir dans le glossaire HTML
<INPUT>.
Descendre
                                                                       Remonte




Mon premier formulaire


Info
Nous allons créer un formulaire qui va comporter un champ pour rentrer
votre prénom, une zone de choix où vous allez choisir votre sexe et une
zone d'information générale.
Descendre
                                                                       Remonte




Exercice
Voici comment doit être votre formulaire.
Voici le code si vous n'y arrivez pas.

Lorsque vous envoyez le formulaire, vous devriez en avoir un
exemplaire dans votre boite d'envoi (élément envoyé).
Regardez ce mail c'est sous cette forme que vous recevrez le formulaire.
nom donné à name = valeur attribuée
Descendre
                                                                       Remonte




Les menus déroulant


Info
Vous pouvez faire des menus déroulant pour par exemple
remplacer vos boutons radio, ou parce que vous n'avez pas assez
de place...
 Premier_choix

On écrira :
<SELECT name="Nom_de_la_selection" size="1" multiple>
   <OPTION value="choix">Premier_choix</option>
</SELECT>


Name est le nom de la sélection, il est associé à la valeur de la balise
<OPTION>.
Size détermine le nombre d'options visibles. Il doit être < ou = au
nombre de balises <OPTION>.
Multiple signifie que l'on peut faire plusieurs sélections. si vous ne le
mettez pas, l'internaute ne pourra faire qu'une sélection.

La balise <OPTION> correspond à un élément de la liste.
Vous pouvez donc avoir plusieures balises <OPTION>
Tous ce qui sera entre <OPTION> et </OPTION> sera visible par
l'internaute.
Value est la valeur renvoyée dans le formulaire, elle sera associée Name
de la balise <SELECT>.

Le résultat de l'envoi :
Le champ de texte apparaît sous la forme : name = value
Nom_de_la_selection = choix


Pour plus de détails sur la balise allez voir dans le glossaire HTML
<SELECT> et <OPTION>.
Descendre
                                                                        Remonte




Mon second formulaire


Info
Voici un exemple de formulaire à reproduire.
Voici le code si vous n'y arrivez pas.
Les couleurs n'y sont pas.

				
DOCUMENT INFO
Shared By:
Stats:
views:9
posted:6/23/2012
language:French
pages:7