CyBWarrior

1. La balise <FORM>
   1. ACTION (URL)
   2. METHOD (Méthode de transmition des données)
   3. NAME (Identification du formulaire)
2. La balise <INPUT>
3. Petit sondage…
4. Les balises <SELECT> et <OPTION> (liste déroulante)
5. La balise <TEXTAREA> (Zone de texte)

Avec la venue des formulaires dans la spécification HTML, le dialogue document-visisteur est désormais
possible. L’utilisateur du formulaire peut alors passer des données, qui pourront ensuite être
traiter par des Scripts, ou bien envoyés par E-mail.

La balise <FORM>

ACTION (URL)

METHOD (Méthode de transmition des données)

• post les données sont transmises selon le standard établi par le serveur. Si l’attribut
  action renforme une URL du type mailto:, ce sera l’unique valeur
  valide.


• get les données sont transmises à la suite de l’URL définit par l’attribut action.
  Vous avez certainement déjà été confronté à cette méthode lors de vos nombreux surfs.

NAME (Identification du formulaire)

La balise <INPUT>

• type pour définir le type d’élement à créer. La valeur à utiliser doit être :
  
  
  
  • text : zone de texte
  
  
  • password : zone de texte. Les caractères apparaissent sous formes d’étoiles
    à l’écran.
  
  
  • checkbox : case à cocher.
  
  
  • radio : bouton radio ou bouton d’option. L’attribut value doit
    obligatoirement être utilisés.
  
  
  • submit : bouton de commande. Le formulaire est transmis lors de son appui.
  
  
  • image : idem à submit, mais une image peut illustrer le bouton.
  
  
  • reset : bouton de commande. Toutes les données du formulaire sont remise à
    à l’état initial lors de son action.
  
  
  • hidden : élement masqué, mais existant bien. C’est à dire que les attributs
    name et value sont pris en compte lors du traitement du
    formulaire.
  
  
  • file : création d’une zone de texte et d’un bouton parcourir. En cliquant sur
    le bouton, une boite de dialogue d’ouverture de fichier s’ouvre. La sélection d’un
    fichier entraîne l’inscritpion de son nom dans la zone de texte.
  
  


• name pour donner le nom à l’élement, de façon à identifier la donnnée renvoyée par
  le formulaire lors du traitement.


• value définit l’état inital de l’élement. Sa présence est obligatoire pour les boutons
  d’option.


• checked permet, lors de l’utilisation de case à cocher ou de boutons d’option, de
  les cocher initialement. C’est un attribut booléan (il se suffit à lui même).


• disabled désactive un élement. Attention! L’élement est toujours affiché, mais il
  est désactivé, ce qui empêche son utilisation. C’est un attribut booléan.


• readonly peut être uniquement associé à une zone de texte. Il empêche la modification
  de la valeur.


• size définit la largeur de l’élement, en pixels, sauf pour les zone de texte où
  la valeur représente le nombre de caractères.


• maxlength ne concerne que les zones de texte. Il précise le nombre de caractères
  pris en compte.

<FORM action= »mailto:pcwarrior@multimania.com » method= »post » name= »petitsondage »>

<H3>Petit sondage…</H3>

<INPUT type= »hidden » name= »Sondage »>

<TABLE>

<TR>

<TD valign= »top »>

<PRE>

Login        : <INPUT type= »text » name= »login » value= »Indentifiant » size= »20″

maxlength= »15″>

E-Mail       : <INPUT type= »text » name= »email » value= »E-Mail » size= »15″>

Mot de passe : <INPUT type= »password » name= »motdepasse » size= »10″>

</PRE>

</TD>

&ltTD valign= »top »>

<PRE>

Fichier        : <INPUT type= »file » name= »fichier »>

Nom modifiable : <INPUT type= »text » name= »locked » value= »Je viens sur ce site

7 fois par jour » readonly>

</PRE>

</TD>

</TR>

<TR>

<TD valign= »top »>

<PRE>

Vos impressions sur ce site :

     <INPUT type= »radio » name= »Impression » value= »Top » checked>Top

     <INPUT type= »radio » name= »Impression » value= »Moyen »>Moyen

     <INPUT type= »radio » name= »Impression » value= »Bad » disabled>Bad

     <INPUT type= »radio » name= »Impression » value= »No » disabled>Vraiment trop nul

</PRE>

</TD>

<TD valign= »top »>

<PRE>

S’inscrire à la lettre du guerrier :

     <INPUT type= »radio » name= »lettre » value= »oui » checked>Oui

     <INPUT type= »radio » name= »lettre » value= »non »>Non

</PRE>

</TD>

</TR>

</TABLE>
<PRE>

Vos rubriques préférées sur PC Warrior :

   <INPUT type= »checkbox » name= »Rubrique » value= »News, Trucs, Astuces… »>News,

Trucs, Astuces…

   <INPUT type= »checkbox » name= »Rubrique » value= »QBasic, QuickBasic »>Qbasic,

QuickBasic

   <INPUT type= »checkbox » name= »Rubrique » value= »Visual Basic »>Visual Basic

   <INPUT type= »checkbox » name= »Rubrique » value= »Turbo Pascal »>Turbo Pascal

   <INPUT type= »checkbox » name= »Rubrique » value= »Delphi »>Delphi

   <INPUT type= »checkbox » name= »Rubrique » value= »C++ »>C++

   <INPUT type= »checkbox » name= »Rubrique » value= »Assembleur »>Assembleur

   <INPUT type= »checkbox » name= »Rubrique » value= »HTML »>HTML

   <INPUT type= »checkbox » name= »Rubrique » value= »FREEWARE »>FREEWARE

   <INPUT type= »checkbox » name= »Rubrique » value= »ScriptLand »>ScriptLand

   <INPUT type= »checkbox » name= »Rubrique » value= »Livre d’Or »>Livre d’Or

   <INPUT type= »checkbox » name= »Rubrique » value= »Forum »>Forum

   <INPUT type= »checkbox » name= »Rubrique » value= »Va savoir… »>Va savoir…
<INPUT type= »submit » value= »envoyer »><INPUT type= »reset » value= »Remise à zéro »>

<INPUT type= »image » name= »envoyer »

src= »http://www.cybwarrior.com/langages/images/dead.gif »>

</PRE>

</FORM>

Login        : 

E-Mail       : 

Mot de passe : 

Fichier        : 

Nom modifiable : 

Vos impressions sur ce site :

     Top

     Moyen

     Bad

     Vraiment trop nul

S’inscrire à la lettre du guerrier :

     Oui

     Non

Vos rubriques préférées sur PC Warrior :

   News, Trucs, Astuces…

   Qbasic, QuickBasic

   Visual Basic

   Turbo Pascal

   Delphi

   C++

   Assembleur

   HTML

   FREEWARE

   ScriptLand

   Livre d’Or

   Forum

   Va savoir…

Les balises <SELECT> et <OPTION> (liste déroulante)

• name


• size


• disabled

<FORM>

Quel est le meilleur grimpeur actuel ?<BR>

<SELECT name= »Grimpeurs »>

  <OPTION value= »Marco Pantani »>Marco Pantani</OPTION>

  <OPTION value= »Richard Virenque »>Richard Virenque</OPTION>

  <OPTION value= »Roberto Heras »>Roberto Heras</OPTION>

  <OPTION value= »Fernando Escartin »>Fernando Escartin</OPTION>

  <OPTION value= »Davide Rebellin »>Davide Rebellin</OPTION>

  <OPTION value= »Francesco Casagrande »>Francesco Casagrande</OPTION>

  <OPTION value= »Leonardo Piepoli »>Leonardo Piepoli</OPTION>

</SELECT>

</FORM>

<FORM>

Quel sont les plus grands spécialistes des courses d’un jour ?<BR>

<SELECT name= »Coursiers » multiple>

  <OPTION value= »Michele Bartoli » selected>Michele Bartoli</OPTION>

  <OPTION value= »Oscar Freire » selected>Oscar Freire</OPTION>

  <OPTION value= »Laurent Jalabert » selected>Laurent Jalabert</OPTION>

  <OPTION value= »Andreï Tchmil »>Andreï Tchmil</OPTION>

  <OPTION value= »Franck Vandenbroucke » selected>Franck Vandenbroucke</OPTION>

  <OPTION value= »Johan Museeuw »>Johan Museeuw</OPTION>

</SELECT>

</FORM>

La balise <TEXTAREA> (Zone de texte)

• name


• disabled


• readonly

• rows spécifie le nombre de lignes de la zone de texte.


• cols définie le nombre de colonnes.

<FORM>

<TEXTAREA cols= »80″ rows= »5″>Ceci est une zone de texte TEXTAREA de 80 colonnes

et 5 lignes</TEXTAREA>

</FORM>