Introduction La structure du document META tags Formatage de texte Les listes Les tableaux Les liens hypertextes Les images Les formulaires Les caractères spéciaux Les couleurs Passer au XHTML Transférer les pages Le référencement La CNIL

Encore un point important : les formulaires. En effet, le formulaire est l'outil qui permet à l'internaute de saisir des informations sur le site. Le plus souvent ces informations sont traitées (voir cour PHP), envoyées puis stockées dans une base de données (voir cours PHP  et SQL).

Un formulaire est toujours délimité par les balises <form> et </form>. Il est possible de placer plusieurs formulaires sur la même page dans la mesure où ceux-ci pointent vers des pages différentes mais cela n'est pas conseillé.

A l'intérieur du formulaire on place les éléments qui le composent. Il peut s'agir d'affichage, de champs de saisie, de bouton radio, de cases à cocher, de bouton de soumission ou d'effacement, de liste déroulante, etc.

Remarque : N'oubliez jamais de renseigner le nom de l'élément grâce à l'attribut name qui est présent sur chacun d'entre eux.

La balise input est essentielle dans un formulaire car elle permet de créer pas mal d'éléments.

Pour les boutons radio et les cases à cocher on peut ajouter l'attribut checked (une seule fois pour le bouton radio) qui définit si l'élement est coché ou non. En HTML cet attribut n'a pas de valeur.

Viens ensuite le textarea. Traduire par zone de texte qui contrairement au champs de texte est fait pour contenir du texte plus long et s'étalant sur plusieurs lignes.

L'élément select (la liste) quant à lui fonctionne différemment des autres. En effet la balise <option> doit être introduite à l'intérieur pour chaque item de la liste.

Remarque : La balise <select> ne comporte qu'un seul attribut (en plus de "name"), il s'agit de "size" qui définit la hauteur de la liste. Par défaut, il est à 1 (pour une liste déroulante) mais on peux mettre n'importe quelle valeur numérique.

Exemple :
<form action="htmlform.php" method="post">
Login : <input type="text" name="login"><br>
Pass : <input type="password" name="pass"><br>
Homme : <input type="radio" name="sexe" value="H" checked>&nbsp;Femme : <input type="radio" name="sexe" value="F"><br>
Age : <select name="age">
<option value=0 selected>-15 ans
<option value=1>15-20 ans
<option value=2>+20 ans
</select value=3><br>
Centre d'interêt : Internet : <input type="checkbox" name="interet" value="1">&nbsp;Sport : <input type="checkbox" name="interet" value="2"><br>
Petit commentaire : <br>
<textarea name="comment" cols="50" rows="5"></textarea><br>
<input type="submit" name="envoi" value="OK"> <input type="reset" name="efface" value="Effacer">
</form>

Si vous voulez tester les informations ne seront pas traitées. C'est juste pour l'exemple.