Cours-IntProg

Phil

Description

!L1 - STS - Mention Informatique - Internet et Programmation!Le langage Html : Les Formulaires"Les CSSAvant d’introduire quelques fonctionnalités du langage Javascript, nous allons compléter le langage Html avec la possibilité d’afficher des objets pré-dessiné à savoir:!LES FORMULAIRES!Additif au HTML"Les Formulaires"L1-STS-Internet et Programmation! 162! L1-STS-Internet et Programmation! 163!Le langage Html : Les Formulaires" Le langage Html : Les Formulaires"Un formulaire est un ensemble de champs permettant de saisir des L’ attribut ACTION : donne le nom de la page, du programme CGI, données : une fois les champs remplis, on peut «"soumettre"» les qui recevra les informations lors de la soumission.!!informations du formulaire. Les données sont alors envoyées du poste client vers le serveur qui a envoyé le formulaire."!METHOD : détermine la méthode de passage des paramètres du formulaire vers l’"«appelant"»".!L’utilisation d’un formulaire nécessite (pour l’exploitation des informations) de faire appel à un «"programme"» capable de faire GET : les paramètres (et leur valeur) seront passés dans l’URL des interprétations (ex: page ASP, programme CGI, script etc…)!du CGI appelé (ACTION) de la façon suivante : nomCGI?param1=val1¶m2=val2&...¶mn=valn. !!Déclaration d’un formulaire.!Les balises

...

. Ce couple servent à délimiter POST : les paramètres sont passés sous le même format, mais il le début et la fin du formulaire. !ne ...

Sujets

• informatique

Informations

• Publié par: Vuin
• Nombre de lectures: 43
• Langue: Français

Extrait

L1 - STS - Mention Informatique - Internet et Programmation!
Le langage Html : Les Formulaires"
Les CSS
Avant d’introduire quelques fonctionnalités du
langage Javascript, nous allons compléter le
langage Html avec la possibilité d’afficher des
objets pré-dessiné à savoir:!
LES FORMULAIRES!
Additif au HTML"
Les Formulaires"
L1-STS-Internet et Programmation! 162! L1-STS-Internet et Programmation! 163!
Le langage Html : Les Formulaires" Le langage Html : Les Formulaires"
Un formulaire est un ensemble de champs permettant de saisir des
L’ attribut ACTION : donne le nom de la page, du programme CGI, données : une fois les champs remplis, on peut «"soumettre"» les
qui recevra les informations lors de la soumission.!!informations du formulaire. Les données sont alors envoyées du
poste client vers le serveur qui a envoyé le formulaire."!
METHOD : détermine la méthode de passage des paramètres du
formulaire vers l’"«appelant"»".!L’utilisation d’un formulaire nécessite (pour l’exploitation des
informations) de faire appel à un «"programme"» capable de faire
GET : les paramètres (et leur valeur) seront passés dans l’URL des interprétations (ex: page ASP, programme CGI, script etc…)!
du CGI appelé (ACTION) de la façon suivante : nomCGI?
param1=val1&param2=val2&...&paramn=valn. !!Déclaration d’un formulaire.!
Les balises <FORM> ... </FORM>. Ce couple servent à délimiter
POST : les paramètres sont passés sous le même format, mais il le début et la fin du formulaire. !
ne sont pas concaténés à l’URL. Ils sont au contraire passé dans
le corps de la requête HTTP(ce qui permet également la transmission par courriel).!L’ attribut ACTION : donne le nom de la page, du programme CGI,
qui recevra les informations lors de la soumission.!!
L1-STS-Internet et Programmation! 164! L1-STS-Internet et Programmation! 165!
Ph Moreau! 1!
!L1 - STS - Mention Informatique - Internet et Programmation!
Le langage Html : Les Formulaires" Le langage Html : Les Formulaires : la forme "
L’ attribut NAME : donne un nom au formulaire (qui permettra
Différentes formes ensuite son utilisation avec JavaScript). !
peuvent être utilisées ENCTYPE qui permet de spécifier le format dans lequel sont
pour la collecte envoyées les données!
d’informations!également TARGET qui avec JavaScript permet de choisir la cible. !
Exemple:!
<FORM ACTION=”mailto:[e-mail]” METHOD=”post”
ENCTYPE=”text/plain” NAME=”nom_du_formulaire”>!
déclaration des différents éléments (champs) constituant le
formulaire.!
</FORM> !
Cette déclaration permettra de définir un formulaire qui au moment
de la soumission enverra un courriel à l’adresse [e-mail]!
L1-STS-Internet et Programmation! 166! L1-STS-Internet et Programmation! 167!
Le langage Html : Les Formulaires : la forme " Le langage Html : Les Formulaires : la forme "
Pour la définition d’un élément du formulaire, on utilise le tag <INPUT>,
ensuite avec l’attribut TYPE on peut définir la forme et la fonctionnalité de Remarque:!
l’élément. Et avec l’attribut NAME on peut donner un nom à l’élément du
formulaire. !
De manière générale, pour chacune des formes que l’on va décrire
dans la suite, on pourra trouver (ou devra suivant l’utilisation) la Voici les formes de formulaires visualisées précédemment: !
possibilité de donner un nom avec l’attribut NAME ainsi qu’avec
Attribut TYPE avec la valeur:! l’attribut VALUE une valeur (soit par défaut, soit à préciser
“ TEXT" “ permet de définir une zone de saisie de chaine de caractères. On peut
obligatoirement suivant l’utilisation du formulaire). !
affecter une valeur de départ avec l’attribut VALUE. L’attribut SIZE permet de
fixer la taille de la zone de saisie (en nombre de caractères). !
En fait, lors de la soumission (exemple envoi d’un courriel) les Exemple!
«#NAME#» et «#VALUE#» sont concaténés (avec un signe «#=#» <FORM>!
entre les deux) avant d’être envoyé.! <INPUT TYPE=”text” VALUE=”Valeur d’origine”!
NAME=”nom de ref” SIZE=”40”>!
</FORM>!
L1-STS-Internet et Programmation! 168! L1-STS-Internet et Programmation! 169!
Ph Moreau! 2!L1 - STS - Mention Informatique - Internet et Programmation!
Le langage Html : Les Formulaires : la forme " Le langage Html : Les Formulaires : la forme "
Attribut TYPE avec la valeur:! Attribut TYPE avec la valeur:!
“ PASSWORD" “ permet de définir une zone de saisie de mot de passe “ SUBMIT" “ permet de définir un bouton de «#soumission#» . La valeur
(saisie masquée). On peut affecter une valeur de départ (mot de passe par affichée dans le bouton est fixée avec l’attribut VALUE. L’attribut WIDTH
défaut) avec l’attribut VALUE. L’attribut SIZE permet de fixer la taille de la permet de fixer la taille du bouton (NAME donner un nom).!
zone de saisie (en nombre de caractères) (NAME donner un nom). !
Exemple!
Exemple! <FORM>!
<FORM>! <INPUT TYPE=”submit” !
<INPUT TYPE=”password” VALUE=”Valeur d’origine”! ! VALUE=”validation”>!
NAME=”nom de ref” SIZE=”40”>! </FORM>!
</FORM>!
L1-STS-Internet et Programmation! 170! L1-STS-Internet et Programmation! 171!
Le langage Html : Les Formulaires : la forme " Le langage Html : Les Formulaires : la forme "
Attribut TYPE avec la valeur:! Attribut TYPE avec la valeur:!
“ BUTTON" “ permet de définir un bouton simple (pas d’appel de type “ RESET" “ permet de définir un bouton de ré-initialisation (remet les
CGI, utilisation avec javascript). La valeur affichée dans le bouton est fixée valeurs fixées par VALUE aux formulaires). La valeur affichée dans le
avec l’attribut VALUE. L’attribut WIDTH permet de fixer la taille du bouton bouton est fixée avec l’attribut VALUE. L’attribut WIDTH permet de fixer la
(NAME donner un nom).! taille du bouton (NAME donner un nom). !
Exemple! Exemple!
<FORM>! <FORM>!
<INPUT TYPE=”button” ! <INPUT TYPE=”text” VALUE=”valeur initiale”>!
! VALUE=”Appuyez sur le bouton”>! TYPE=”reset” VALUE=”Annuler”>!
</FORM>! </FORM>!
L1-STS-Internet et Programmation! 172! L1-STS-Internet et Programmation! 173!
Ph Moreau! 3!L1 - STS - Mention Informatique - Internet et Programmation!
Le langage Html : Les Formulaires : la forme " Le langage Html : Les Formulaires : la forme "
Attribut TYPE avec la valeur:!
Attribut TYPE avec la valeur:! “ RADIO" “ permet de définir une série de boutons à cocher à choix
“ CHECKBOX" “ permet de définir une case à cocher (on peut ajouter unique (toutes les valeurs de NAME doivent être identiques). Un seul
l’attribut CHECKED si l’on souhaite que la case soit cochée à l’apparition «"bouton"» pourra être affecté de l’attribut CHECKED. On peut attribuer
de celle-ci) On peut attribuer avec VALUE une valeur par défaut différente avec VALUE une valeur par défaut différente du texte associé.!
du texte associé (et NAME pour donner un nom). !
Exemple!
Exemple!
<FORM>!
<FORM>!
choix 1 <INPUT TYPE=”radio” CHECKED
Cocher la case 1 <INPUT TYPE=”checkbox” NAME=”case1”
NAME=”bouton” VALUE=”B1”><BR>!
VALUE=”OK”>!
ou choix 2 <INPUT TYPE=”radio” NAME=”bouton”
Cocher la case 2 <INPUT TYPE=”checkbox”>!
VALUE=”B2”> <BR>!
Cocher la case 3 <INPUT !
ou choix 3 <INPUT
</FORM>!
VALUE=”B3”> <BR>!
</FORM>!
L1-STS-Internet et Programmation! 174! L1-STS-Internet et Programmation! 175!
Le langage Html : Les Formulaires : la forme " Le langage Html : Les Formulaires : la forme "
Les balises <TEXTAREA> ... </TEXTAREA> :! Les balises <SELECT> ... </ SELECT > :!
permettent de définir une zone de saisie de texte (comme <INPUT permettent de définir une liste ou un menu déroulant (l’attribut NAME est
TYPE=”text”>) avec plusieurs lignes de saisie. ! unique pour la liste (ou menu)). !
On peut adjoindre les attributs:! On défini ensuite les choix du menu avec <OPTION>!
Name : pour fixer le nom de l’objet de saisie.!
On peut y adjoindre l’attribut SELECTED pour faire un choix par défaut.
Cols : fixe le nombre de colonnes de la zone de saisie.!
On peut attribuer avec VALUE une valeur par défaut différente du texte associé.!
Rows : fixe le nombre de lignes de la zone de saisie.!
Exemple!
Exemple!
<FORM>!
<FORM>!
<SELECT NAME=”Menu”>!
<TEXTAREA NAME=”Zone” COLS=”40” ROWS=”5”>!
<OPTION> Menu: Opt 1!
</TEXTAREA>!
<OPTION> Menu: Opt 2!
</FORM>!
<OPTION SELECTED> Menu: Opt 3!
</