Ajouter un formulaire

Avant de nous attaquer à la présentation en CSS de notre page, nous allons y ajouter un formulaire - outil indispensable pour interair avec l'utilisateur

Ajouter un formulaire

Etape 1 : limiter le formulaire

On déclare un début et une fin d'un formulaire en XHTML. Pour celà on utilise le balisage

<form action="page.php" method="post"></form>

Ce balisage contiendra tout les objets de formulaire qui lui sont assigné ainsi que du texte, des titres ...

Attribut action
Il a comme valeur le nom de la page php vers laquelle on renvoie les valeurs rentrées dans le formulaire. L'envoi vers la page s'effectue quand l'utilisateur clique sur le bouton submit
Cet attribut est obligatoire.
Attribut method
Renseigne sur la façon de faire passer les valeurs de champs du formulaire à la page php
facultatif : par défaut égal à get (voir ci-dessous)
Deux valeurs possibles :
get
Les valeurs des champs sont passées dans la barre d'adresse du navigateur.
Attention vous êtes limité en nombre de caractè et avec les caractère spéciaux
post
Les valeurs des champs sont passées silencieusement
Aucune contrainte : a utiliser le plus souvent possible

Etape 2 : ajouter des champs

Toutes les balises formulaires sont expliquées dans la partie balises XHTML avec des exemples

Une règle générale : toujours renseigner l'attribut name pour un champ de formulaire : il permettra récupérer la valeur en php

Attention : les balises input doivent avoir pour parent une des balises suivantes : "ins", "del", "h1", "h2", "h3", "h4", "h5", "h6", "p", "div", "address" ou "fieldset"

Saisir un nom : champ texte

La syntaxe pour insérer un champ texte dans votre page est : (entre les deux balises form)

<input type="text" name="nom" value="Jean"/>

L'attribut value donne la valeur par défaut du champ (affichée au chargement de la page dans le champ)

Résultat :

Un mot de passe : champ étoilé

De même, la seule différence entre un champ texte et un champ mot de passe est la valeur de l'attribut type

<input type="password" name="motdepasse" value="123456"/>

L'attribut value donne la valeur par défaut du champ (affichée au chargement de la page dans le champ)

Résultat :

Un menu de sélection

Ce type de menu permet d'afficher un menu déroulant pour sélectionner une option parmis une liste

<select name="age">
    <option value="20">0-20 ans</option>
    <option value="40" selected="selected">21-40 ans</option>
    <option value="60">41-60 ans</option>
    <option value="80">61-80 ans</option>
</select>

L'attribut value renferme la valeur renvoyée par le formulaire si l'option est selectionnée. Par défaut cette valeur est la chaine de caractères constituant l'option : si on ne spécifie pas value, la valeur retournée sera par exemple "0-20 ans"

L''attribut selected dont la seule valeur possible est selected (mais doit être spécifié quand même) permet de choisir quelle option est choisie par défaut.

Boutons radio

On utilise toujours la balise input. Les boutons radio d'un même groupe (parmis lequel on ne peut sélectionner qu'un seul élément) portent le même nom.

Utiliser absolument la balise label pour pouvoir cliquer sur le nom pour choisir une option et non pas au centre du bouton radio

Exemple : avec label

<label><input type="radio" name="ouinon" value="1" />Oui</label>
<label><input type="radio" name="ouinon" value="0" />Non</label>

Résultat :

Exemple : sans label (beaucoup plus dur de sélectionner une option !)

<input type="radio" name="ouinon2" value="1" />Oui
<input type="radio" name="ouinon2" value="0" />Non

Résultat :

Oui Non

Regroupement de champs

On utilise la balise fieldset qui regroupe des champs d'un formulaire, par exemple des boutons radio qui appartiennent au même groupe.

<fieldset>
        <ul>
            <li><label><input type="radio" name="ouinon3" value="1" />Oui</label></li>
            <li><label><input type="radio" name="ouinon3" value="0" />Non</label></li>
        </ul>
</fieldset>

Bouton d'envoi

Pour finir : le bouton qui envoie le résultat d'un formulaire vers la page spécifiée dans l'attribut action du formulaire

Un exemple :

<input type="submit" value="Envoyer !" />

Résultat :

Sémantique

Pour avoir un beau formulaire, rien de mieux - du point de vue sémantique - que d'utiliser une liste de définition.

Exemple :

<dl>
	<dt>Nom</dt>
	<dd><input type="text" name="nom"  /></dd>
</dl>
Nom

On pourra ensuite présenter ce formulaire avec les CSS

Exercice

Ajouter un formulaire à votre page précédente pour que la page ressemble à ça

Vous devez ajouter :

C'est la fin de la partie XHTML !