APPRENDRE LE
LANGAGE HTML
(Hyper Text Markup Language)
2EME PARTIE
L'interactivité, mais
comment ?
Les formulaires Avec les formulaires, Html
vous ouvre les portes de
l'interactivité et vous
permet de recevoir des
informations provenant
directement de votre
lecteur et éventuellement
de lui répondre
directement.
Définition Avant de
Définition d'un pouvoir utiliser les
formulaire différentes sortes de
formulaires (ligne de
texte, liste déroulante,
cases à cocher, etc.), il
faut déclarer au browser
qu'il devra gérer des
formulaires et ce qu'il
devra en faire.
<FORM method="post" action="URL d'expédition"
enctype="text/plain">
... les formulaires proprement dit ...
</FORM>
L'attribut "method" vous
Définition d'un offre le choix entre get et
formulaire post. La différence entre
ces deux méthodes
repose sur la façon dont
les données seront
transmises au serveur et
exploitées par celui-ci.
Avec le temps, la
méthode post s'est
imposée car elle apparaît
plus efficace et permet le
traitement d'une quantité
plus importante de
données.
L'attribut "action" spécifie
Définition d'un l'adresse d'expédition des
formulaire données.
Dans le cas d'un traitement des données par un programme CGI
<FORM method="post"
action="[Link]
Dans le cas d'un envoi vers en adresse électronique (email), on utilise
le protocole mailto: suivi de l'adresse électronique de destinataire
(généralement votre adresse email).
<FORM method="post"
action="[Link]
L'attribut "enctype"
Définition d'un (optionnel) spécifie
formulaire l'encodage utilisé pour le
Il n'est pas inutile contenu du formulaire. Ce
de prévoir paramètre ne peut être
l'attribut utilisé qu'accompagné
name="nom" si la par la méthode post.
page comporte Ainsi
plusieurs enctype="text/plain"
formulaires. encode le contenu du
formulaire en format
texte lisible par le
destinataire. Cette option
est particulièrement
adaptée à l'action du type
mailto.
Définition
INPUT type="text"
Ligne de texte
indique un champ de
saisie d'une seule ligne.
C'est assurément le
formulaire le plus simple
à mettre en œuvre :
<FORM>
<INPUT type="text" name="nom"
size="50">
</FORM>
L'attribut name="nom du
formulaire" est quasiment
Ligne de texte obligatoire car on n'utilise
que rarement un seul
Il existe formulaire. Le nom va
l'attribut identifier la chaîne de
maxlength="x" caractères du champ de
saisie. De façon schématique,
(optionnel) qui
nom = (ce qui est introduit
limite le dans la ligne de texte).
nombre réel de L'attribut size (optionnel)
caractères que définit la longueur du champ
l'on peut de saisie. Notons que l'on
introduire dans peut introduire un nombre de
caractères plus élevé que
le champ de celui de la longueur.
saisie. La balise
<INPUT> n'a
La balise
<TEXTAREA></TEXTAREA>
Zone de saisie
introduit une zone de
texte multilignes et non
plus une simple ligne de
texte. La syntaxe est :
<FORM>
<TEXTAREA name="nom" rows=4 cols=40>Valeur par
défaut</TEXTAREA>
</FORM>
L'attribut name permet de
donner un nom au
Zone de saisie formulaire.
Avec wrap=virtual, les L'attribut rows=x détermine
changements de lignes le nombre de lignes de la
sont effectués
automatiquement dans
zone de texte.
la zone de texte mais le L'attribut cols=y détermine
tout sera transmis en
une seule ligne.
le nombre de caractères
Avec wrap=physical, les visibles sur chaque ligne ou
changements de lignes si vous préférez le nombre
sont effectués de colonnes.
automatiquement dans
la zone de texte et ceux- L'attribut wrap (optionnel)
ci sont également détermine la façon dont les
transmis.
Avec wrap=off, il n'y a
sauts de ligne seront traités
aucun changement de lors d'un changement de
ligne. ligne.
La balise
<SELECT></SELECT>
Liste déroulante indique au browser
l'usage d'une liste
déroulante.
Les éléments de la liste
sont introduits par la
balise
<FORM> <OPTION></OPTION>.
<SELECT name="nom"
size="1">
<OPTION>lundi
<OPTION>mardi
<OPTION>mercredi
<OPTION>jeudi
<OPTION>vendredi
</SELECT>
L'attribut name="nom"
définit le nom du
Liste déroulante formulaire.
L'attribut size="x"
détermine le nombre
d'éléments de liste affiché
dans la boite d'entrée. En
fait, size="1" est
optionnel car "1" est la
valeur par défaut. Le
même exemple avec
size="3" donne :
On peut présélectionner
l'élément affiché dans la
Liste déroulante boite d'entrée (par
défaut, le premier
élément de la liste sera
retenu). On utilise pour ce
faire l'attribut selected de
la balise <OPTION>. Pour
faire afficher d'entrée
<FORM> mercredi au lieu de lundi
<SELECT name="nom" size="1">
<OPTION>lundi
notre exemple devient
<OPTION>mardi
<OPTION selected>mercredi
<OPTION>jeudi
<OPTION>vendredi
</SELECT>
</FORM>
Il serait plus logique de
parler de boutons
Bouton d'option d'option car ils n'ont de
sens que s'ils sont
plusieurs. Ainsi on parle
d'un groupe de boutons
d'options.
Les boutons d'option,
aussi appelés boutons
radio, ont comme
particularité qu'une seule
option à la fois peut être
<FORM> activée (le "ou" exclusif).
<INPUT type="radio" name="nom du groupe" value="valeur
du bouton">
</FORM>
Bouton d'option
<FORM>
<INPUT type= "radio" name="tarif" value="jour"> tarif de
jour
<INPUT type= "radio" name="tarif" value="nuit"> tarif de
nuit
<INPUT type= "radio" name="tarif" value="week-end"> tarif
de week-end
</FORM>
Vous avez compris que
l'attribut name="nom"
Bouton d'option doit avoir le même nom
Pour la petite histoire le pour tout le groupe de
terme radio ferait
référence aux anciens boutons d'option.
postes de radio sur L'attribut checked
lesquels le fait
d'appuyer sur un bouton (optionnel) permet de
désactivait le bouton présélectionner un bouton
précédemment enfoncé.
radio
<INPUT type= "radio" name="tarif" value="jour" checked>
tarif de jour
La philosophie des cases
à cocher [checkbox] est
Case à cocher assez similaire aux boites
d'option. Ici, cependant,
plusieurs choix
simultanés peuvent être
<FORM> réalisés.
<INPUT type="checkbox" name="nom" value="valeur
attachée au bouton">
</FORM>
Case à cocher
<FORM>
<INPUT type="checkbox" name="choix1" > glace
vanille
<INPUT type="checkbox" name="choix2" > chantilly
<INPUT type="checkbox" name="choix3" > chocolat
chaud
<INPUT type="checkbox" name="choix4" > biscuit
</FORM>
Les règles pour l'attribut
name="nom" sont moins
Case à cocher précises que pour les
boutons d'option.
Cependant des noms
différents sont
nécessaires pour
l'utilisation d'un script.
L'attribut checked
(optionnel) permet de
présélectionner une case
à cocher. Ainsi
<INPUT type="checkbox" name="choix1" value="1" checked
> glace vanille
Avec l'introduction des
Bouton de langages de scripts
commande (Javascript et VBscript)
l'usage du bouton de
commande présente un
intérêt certain.
<FORM>
<INPUT type="button" name="nom" value="texte
du bouton"
onclick="fonction Javascript">
</FORM>
En cliquant sur le bouton
Bouton de "Bouton de test", on va
commande déclencher une fonction
Javascript élémentaire qui
consiste à afficher une
petite boite (dite d'alerte)
avec le texte "Test
réussi!".
<FORM>
<INPUT type="button" name="nom" value=
"Bouton de test"
onclick="alert('Test réussi !')">
</FORM>
Le bouton Submit a la
tâche spécifique de
Submit et Reset transmettre toutes les
informations contenues
dans le formulaire à l'URL
désignée dans les
attributs ACTION et
<FORM>
METHOD du tag <FORM>.
<INPUT TYPE="submit" NAME="nom" VALUE="texte du
bouton">
</FORM>
<FORM>
<INPUT TYPE="submit" NAME="nom" VALUE="
Envoyer ">
</FORM>
Le bouton Reset permet
d'annuler les
Submit et Reset modifications apportées
aux contrôles d'un
formulaire et de restaurer
les valeurs par défaut.
<FORM>
<INPUT TYPE="reset" NAME="nom" VALUE="texte du
bouton">
</FORM>
<FORM>
<INPUT TYPE="reset" NAME="nom" VALUE="
Annuler ">
</FORM>
