Les formulaires sont le moyen normal pour transférer de l'information du client au serveur.

Le serveur envoie le formulaire de saisie au client puis il collecte les valeurs renseignées par le client.

Le serveur exécute alors des scripts (php ou asp) qui permettent de traiter l'information et de construire les réponses à retourner au client.

Architecture Client/serveur
Le client est neutre, inerte.
Il fait la mise en forme des données reçues, déclenche des événements vers le serveur.

Le serveur dispose de programmes à effectuer, il est actif.
Il collecte, stocke, traite et diffuse de l'information en réponse à des événements.

Bon maintenant, on y va !

Un formulaire est composé :

• d'une balise form qui encadre les contrôles (champs de saisie et boutons)
• de contrôles faits avec les balises input, select, textarea, ...

La balise input (la plus courante) a plusieurs rôles : elle permet de créer des champs "texte" ou "mot de passe" mais aussi de type "bouton de validation".

Voir la liste des balises et propriétés plus loin.

Observons le code du formulaire "bidon" (les couleurs sont faites par du CSS non montré ici, ainsi que la structure de la page) :

<form method="post" action="traitement.php">
    Nom <span class="red">* </span> 
	<input type="text" name="nom" placeholder="votre nom" required /> <br/>
    Prénom <span class="red">* </span> 
	<input type="text" name="prenom" placeholder="votre prénom" required /> <br/>
    Mot de passe <span class="red">* </span> 
	<input type="password" name="mdp" placeholder="mdp bidon, svp!" required /> <br/>
    Texte <textarea name="mdp" placeholder="un texte sur plusieurs lignes" /></textarea> <br/>
    Type <span class="red">*</span>
      <select name="liste">
        <option value="0">--choisir un type--</option>
        <option value="1">Alimentation</option>
        <option value="2">Carte mère</option>
        <option value="3">Mémoire</option>
        <!-- d'autres options ... -->
        <option value="18">PGI/GPAO/ERP</option>
      </select> <br/>
    <input type="submit" name="go" value="Valider le formulaire" />
</form>

La balise form défini le mode de transfert des données à la page cliente.

• method = (attribut) mode de transfert :
  • get = transfert des données "en clair", dans l'@ de la page, idéal pour la mise au point, le débogage,
  • post = transfert caché, séparé de l'adresse = plus de sécurité, utilisé en "production"
  
  
• action = (attribut) action lors de l'envoi
  Indique le nom de la page/script (traitement.php) qui sert à traiter puis afficher le résultat de la validation du formulaire.

Les autres balises sont chacune un champ de saisie ou le bouton de fin du formulaire : les contrôles.

Il y a quelques balises incontournables et d'autres moins utiles pour créer des formulaires.

Nous ne verrons, ici, que les balises indispensables.

Dans la colonne de droite, vous trouverez un exemple de contrôle. Faites un click droit et affichez le code source pour copier la syntaxe.

On aura un formulaire par fonction précise dans la page :

• form de login,
• form d'inscription,
• form de maj,
• etc...

et donc plusieurs formulaires dans une même page est très fréquent.

En php, la page de traitement sera souvent celle contenant le formulaire.

C'est utile pour :
- regrouper la saisie et le traitement à un seul endroit dans l'application,
- pouvoir immédiatement et sans redirection, afficher le résultat de la saisie (échec, erreur, manque, succès, ...).

Pour valider les saisies, on utilisera du code javascript en plus des restrictions HTML5.

OK, c'est le moment de se lancer dans les exo' ...