NFA016 : Les formulaires

O. Pons, S. Rosmorduc

Conservatoire National des Arts & Métiers

Les formulaires

Les balises:

Les formulaires (exemple)




Dans votre navigateur

L'envoi au serveur

La Requette envoyée (méthode GET par défaut)
GET ~pons/NFA016/echo.php?mailto_name=Olivier+Pons&email=moi%40quelquepart&corps_du_message=%09Remplacez+ce+texte+par+le+votre+%21%0D%0A%09Puis+pressez+le+bouton+%22Envoyer+message%22+pour+%0D%0A%09effectuer+l%27envoi%0D%0A%09Vous+pouvez+utiliser+le+bouton+%22Remise+%E0+z%E9ro%22+%0D%0A%09pour+remettre+les+valeurs+initiales+%0D%0A+++++ HTTP/1.1
Host: deptinfo.cnam.fr
User-Agent: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.8) Gecko/20070914 Mandriva/2.0.0.8-1mdv2008.0 (2008.0) Firefox/2.0.0.8
Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
Accept-Language: fr,fr-fr;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive

L'envoi au serveur

La Requette envoyée (méthode GET par défaut)
GET ~pons/NFA016/echo.php?mailto_name=Olivier+Pons&
email=moi%40quelquepart&corps_du_message=%09Rempla
cez+ce+texte+par+le+votre+%21%0D%0A%09Puis+pressez+
le+bouton+%22Envoyer+message%22+pour+%0D%0A%09effec
tuer+l%27envoi%0D%0A%09Vous+pouvez+utiliser+le+bout
on+%22Remise+%E0+z%E9ro%22+%0D%0A%09pour+remettre+l
es+valeurs+initiales+%0D%0A+++++ HTTP/1.1


Host: deptinfo.cnam.fr
User-Agent: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.8) Gecko/20070914 Mandriva/2.0.0.8-1mdv2008.0 (2008.0) Firefox/2.0.0.8
Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
Accept-Language: fr,fr-fr;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive

L'envoie au serveur

Si on remplace GET par POST La Requette envoyé:
POST ~pons/NFA016/echo.php HTTP/1.1
Host: deptinfo.cnam.fr
User-Agent: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.8) Gecko/20070914 Mandriva/2.0.0.8-1mdv2008.0 (2008.0) Firefox/2.0.0.8
Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
Accept-Language: fr,fr-fr;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Content-Type: application/x-www-form-urlencoded
Content-Length: 310
mailto_name=Olivier+Pons&email=moi%40quelquepart&corps_du_message=%09Remplacez+ce+texte+par+le+votre+%21%0D%0A%09Puis+pressez+le+bouton+%22Envoyer+message%22+pour+%0D%0A%09effectuer+l%27envoi%0D%0A%09Vous+pouvez+utiliser+le+bouton+%22Remise+%E0+z%E9ro%22+%0D%0A%09pour+remettre+les+valeurs+initiales+%0D%0A++++

Réponse du serveur

Produite par execution du code echo.php

Qui s'affiche

la reponse du serveur

La balise form

La balise input

La balise input, attribut type

La balise input : exemple






La balise input : exemple

La balise textarea

La balise select

La combinaison select + option

select simple

    ...
    
  

La combinaison select + option

select simple avec size

...

La combinaison select + option

select multiple

Si l'attribut multiple est présent sur le select on peut plusieurs options

Quand plusieurs valeurs peuvent être renvoyée et que le coté serveur est en PHP il est d'usage de postfixer le name par []

...

La combinaison select + option

select multiple avec size

...

le relsultat

le source complet de l'exemple

La combinaison select + option (résultat)

exemple select + option

Autres balises

Le traitement des formulaires