PREVIOUS UP   Technologies Internet et Education, © TECFA
  2. Eléments HTML les plus importants

2. Eléments HTML les plus importants

2.1 La balise <form>

La déclaration de base d'un formulaire se fait par:

 
      <FORM ACTION="URL" METHOD=GET ou POST>
      ....
     </FORM>
 

 

Illustrations:

     <form method="post" action="http://tecfa.unige.ch/cgi-bin/colin">
     <form>
<form enctype="application/x-www-form-urlencoded" 
  action="mailto:Patrick.Jermann@tecfa.unige.ch" method=post>

2.2 Questions ouvertes et fermées: <INPUT>

A. Aperçu des widgets

" <INPUT> " sert à poser des questions selon différentes modalités:

<INPUT TYPE="..." NAME="..." VALUE="..." CHECKED="..." 
        SIZE="..." MAXLENGTH="...">

 

"TYPE" spécifie le type de question:

 

 

 

 

 

 

B. L'attribut "NAME"

NAME sert à donner un nom à chaque champ:

 

Illustrations:

Lors du traitement du formulaire, la variable `chiffre1' contiendra le nombre écrit dans la zone de texte.

Entrez un chiffre dans cette zone:
<INPUT TYPE="text" NAME="chiffre1" SIZE=10>

 

Sexe:
<input type="radio" name="sexe" value="f">Masculin
<input type="radio" name="sexe" value="m">Féminin

 

... voir la définition de l'attribut value à la page suivante

C. L'attribut "VALUE"

VALUE permet de spécifier les valeurs des réponses:

 

        <input type="text" name="nom_de_famille" value="Dupuis">
        <input type="checkbox" name="doc" value="doc_souhaitee">
        <input type="submit" value="enregistrer">

 

D. L'attribut "CHECKED"

CHECKED permet d'"enfoncer" les boutons par défaut.

 
<input type=checkbox name=age value="mineur"> Vous êtes mineur
<input type=checkbox name=age CHECKED value="adulte"> Vous êtes adulte
Sexe:
<INPUT TYPE="radio" NAME="sexe" CHECKED>Masculin
<INPUT TYPE="radio" NAME="sexe">Féminin

E. L'attribut "SIZE"

SIZE spécifie la largeur d'un champs (Nb de caractères)

      <INPUT TYPE=text NAME=nom SIZE="10" VALUE="100">

 

MAXLENGTH détermine le nombre maximum de caractères pouvant être saisis pour une question ouverte.

      <input type=text name=commentaire maxlength=50>

2.3 Menus déroulants et listes à choix multiples <SELECT>

Paramètres:

Le tag OPTION:

 

Exemple:

<select name="pays" size=1>
			<option>CH:  Suisse
			<option>D:   Allemagne
			<option>F:   France
			<option>US:  Etats-Unis
			<option>A:   Autriche
			<option>I:   Italie
</select><p>

 

 

 

<select name="pays" size=6>
			<option>CH:  Suisse
			<option>D:   Allemagne
			<option>F:   France
			<option>US:  Etats-Unis
			<option>A:   Autriche
			<option>I:   Italie
</select>

2.4 Les zones de texte <TEXTAREA>

Permet de définir une entrée qui s'étend sur plus qu'une ligne.:

Exemple:

      <TEXTAREA name="comments" rows=4 cols=60>
      </textarea>

 

2.5 Formulaires HTML et e-mail

Exemple 2-1: Envoyer le contenu d'un formulaire avec email

Principe:

Ce qui change par rapport à l'option CGI :

Code source:

<form enctype="application/x-www-form-urlencoded" 
  action="mailto:Patrick.Jermann@tecfa.unige.ch" method=post>
Votre Nom <input type="text" name="nom" size=15> <p>
Votre email <input type="text" name="email" size=15> <p>
Votre commentaire <textarea name="comment" rows=5 cols=30></textarea> <p>
<input type="submit" value="Envoyer">
<input type="reset" value="Effacer">
</form>

PREVIOUS UP -- TIE