TP HTML 5 - les formulaires.
Réponse AJAX

Les formulaires

Les formulaires permettent à l'internaute de saisir des données (création d'un compte, petites annonces, message dans un forum, etc.) qui vont être traitées par le serveur.

Les différents traitements possibles sont :

Structure basique du formulaire, balise <form>

La structure basique d'un formulaire HTML, contenant un bouton de validation, est :
<form>
  ...
  <input type=submit value="Validez le formulaire">
</form>

La balise <form> se paramètre avec les attributs method et action :

Les différents champs dans un formulaire

La zone de texte, balise <input type="text"> :

Paramétrage possible :

La zone de texte pour mots de passe, balise <input type="password"> :
Mot de passe :

Les cases à cocher, balise <input type="checkbox"> :
Vous possédez une connexion Internet
Vous possédez un abonnement 3G
Paramétrage possible :

Les boutons radios, balise <input type="radio"> :
<input type="radio" name="gender" value="male">Mâle<br/>
<input type="radio" name="gender" value="female">Femelle

Mâle
Femelle
Paramétrage possible :

La zone de texte multilignes, balise <textarea>...</textarea> :

Paramétrage possible :

La zone de liste, balise <select>...</select> :
<select name="ville">
  <option value="1">Avignon</option>
  <option value="2">Cavaillon</option>
  <option value="3">Orange</option>
</select>

Remarquez que la valeur envoyée au script n'est pas la valeur affichée à l'internaute (lorsqu'on utilise l'attribut value). L'internaute voit "Avignon", mais s'il fait ce choix c'est la valeur 1 qui va être envoyée au script (car on a précisé : value="1").
Paramétrage possible pour la balise <select> :

Paramétrage possible pour la balise <option> :

Le champ invisible, balise <input type="hidden"> :
Pour envoyer au script une valeur sans que l'internaute ne la voie dans le navigateur. Plus utile qu'on peut le penser à priori. Par exemple dans ce TP dynamique, pour chaque question, des champs cachés informe le script du numéro de TP et du numéro de la question. Le numéro de l'élève est stocké dans un cookie. Seule vos réponses sont des champs visibles (de type <textarea>).
<input type="hidden" name="variable_cachée" value="sa valeur">

Alignement vertical du formulaire

Pour des raisons esthétiques, on insérera le formulaire dans un tableau pour gérer l'alignement vertical des champs. Le tableau peut être invisible. Les textes (nom, prénom, age) sont dans la colonne de gauche avec un alignement à droite, les contrôles de formulaire sont dans la colonne de droite. Voici un exemple :
Sans tableau Avec tableau
Nom :
Prénom :
Age :
Nom :
Prénom :
Age :

Vous pourriez vouloir ajouter la feuille de style CSS suivante :

Ecrivez le code HTML qui affiche le formulaire ci-dessous :

Votre réponse n°1

La validation

Explications sur... la validation

Les navigateurs sont très permissifs et afficheront une page Web même si celle-ci est bourrée de fautes (oublis de balises fermantes, attributs obligatoires manquants, etc.). Mais avec ce genre d'erreurs, on prend des risques. Par exemple, un code html erroné ne s'affichera pas de la même façon dans les différents navigateurs, ou il sera mal référencé dans les moteurs de recherche comme Google.

Pour éviter les erreurs dans le code HTML, il suffit d'utiliser un validateur du W3C.

Copiez votre code HTML et collez-le dans le validateur HTML du W3C, puis cliquez sur le bouton Check. Vous obtiendrez alors :


Document valide.


Document non valide, à corriger.

L'idéal serai de valider chaque page que vous développez ou que vous achevez, pour prendre les meilleures habitudes possibles. Je recommande l'utilisation de l'en-tête <!DOCTYPE html>, ainsi le validateur ve valider au standard HTML5. .

Collez ici le code HTML de la question précédente, une fois que vous avez réussi à le valider en HTML5 (sans erreur, mais warnings autorisés). Vous aurez besoin du DOCTYPE (question 18 du TP précédent), de la structure complète d'une page (question 1 du TP précédent).

Votre réponse n°2