Les formulaires

Qu'est qu'un formulaire?

Un formulaire permet à l'internaute d'envoyer des informations, généralement au site web sur lequel il navigue.
L'internaute va ainsi pouvoir remplir des champs texte (input, textarea), sélectionner une ou plusieurs options de listes (select) ou sélectionner des cases à cocher (radio, checkbox).
Une fois les informations saisies, l'internaute va valider le formulaire (form) à l'aide d'un bouton de validation (submit)
Les information sont alors envoyées soit à une adresse mail (mailto) soit à un programme (cgi, pages web dynamique en php, jsp, asp, ...)

Un premier exemple

Ce premier exemple est un formulaire contenant un champ de texte (input type='text') et un bouton de validation (input type='submit'). On remarque que chaque champ a un attribut nom (name='...') et un attribut valeur (value='') qui permet de pré-remplir le champ avec une valeur par défaut.

<form>
	<input type='text' name='nom' value=''/>
	<input type='submit' name='Envoyer' value='Envoyer'/>
</form>

Les paramètres d'envoi

La balise form décrit un formulaire et contient un certain nombre d'indication sur le traitement qui sera fait des données entrées par l'internaute :

name : Nom du formulaire
action : Url d'envoi des information au serveur
Dans le cadre des exercice et dans le but de tester les exemple du cours, nous enverrons les données vers la page http://www.action-creation.fr/cnam/nfa074/form.php
Pour envoyer un mail à l'aide d'une page web, nous utiliserons l'action mailto (action='mailto:toto@free.fr' ) ... ce qui n'a pas d'intéret car l'envoi de mail sera traité par l'ordinateur de l'internaute, et donc son logiciel de mail.
method : Méthode d'envoi des données (get ou post)
get est la méthode par défaut. Les données sont envoyées dans l'url selon ce modèle : page.php?nom1=valeur1&nom2=valeur2. Ainsi, à la suite du nom de la page, un ? vient indiquer le début des données (des paramètres de la page). Ensuite, des paires nom=valeurs sont séparés par des &.
Ainsi, un lien http://www.action-creation.fr/cnam/nfa074/form.php?nom=renard&prenom=arnaud peut remplacer un formulaire en mode get.
post permet d'envoyer les données dans l'entête de la requete http. Des notions de réseau sont nécessaire, mais pour simplifier, les données sont envoyées à part et ne sont pas lisibles par l'internaute.
enctype : Type d'encodage du formulaire (utile pour envoyer des fichiers)
target : Cible sur laquelle sera fait le traitement

L'élément input

L'objet input est le plus utilisé de tous. Il permet d'afficher :

des champs texte
des boutons
des radio-boutons Choix 1 - Choix 2
des cases à cocher Choix 1 - Case 2
le champ caché
le champ password
les boutons reset et submit

Propriétés :

Cette liste des attributs possibles dans les inputs

name	Nom du champ
type	type du champ text, button, radio, checkbox, submit, reset
value	Libellé texte
defaultvalue	Valeur par défaut du champ (utile avec reset)
size	Taille du champ
maxlength	Taille maximale du champ de type texte
checked	Case à cocher ou radio bouton coché ou non
disabled	Grisé (modification impossible par le visiteur)
readOnly	Lecture seule

Les zones de texte input type="text"

Cette zone permet d'entrer un texte

<input type="text" />

Les radio-boutons input type="radio"

Un groupe de radio-boutons ayant tous le même nom (attribut name) permet à l'internaute de cocher une seule des cases.

Homme - Femme

<input type="radio" name="sexe" value="homme" checked="checked" />Homme -

<input type="radio" name="sexe" value="femme" />Femme

Propriétés acceptées : name | value | checked | disabled | readOnly

Les case à cocher input type="checkbox"

Il s'agit d'une case que l'on peut cocher de manière indépendante. Chaque case a un nom différent.

Majeur
Etudiant

<input type="checkbox" name="majeur" checked="checked" />Majeur
<input type="checkbox" name="etudiant" checked="checked" />Etudiant

Propriétés acceptées : name | checked | disabled | readOnly

L'élément password input type="password"

Le password se comporte comme un champ text mais affiche des * à la place de chaque caractère pour permettre la saisie de mot de passe.

L'élément caché input type="hidden"

Un champ caché n'est pas affiché et permet d'ajouter des informations dans le formulaire sans que le visiteur ne le sache et sans qu'il puisse les modifier.

Propriétés acceptées : name | value | defaultvalue

Les boutons button, input type='submit' et input type='reset'

Le bouton submit permet de valider le formulaire et de déclencher l'envoie des données par le navigateur.
Le bouton reset permet de réinitialiser les valeurs des champs de formulaire avec les valeurs pré-remplies. C'est peu utilisé.
Le button a le même comportement qu'un input type='submit', mais permet d'afficher du code html (img, b, ...).

Cochez moi !

<form name="formspe" action="" >
<input type="text" name="texte" value="Contenu" />
<input type="checkbox" checked='checked' / >Cochez moi !
<br/>
<input type="reset" value="RESET" />
<input type="submit" value="SUBMIT" />
<button name='choix' value='ok'><img src='images/validate.gif' alt='V'/> Bouton ! </button> </form>

Les listes select

Une liste de choix select comporte une balise d'ouverture et une balise de fermeture. A l'interieur, un certain nombre de option sont définies.
<select name="mono" >
  <option value="1">ligne 1</option>
  <option value="2">ligne 2</option>
  <option value="3">ligne 3</option>
  <option value="4">ligne 4</option>
</select>

Les paramètres de select :

size='' pour un choisir le nombre de lignes à afficher (par défaut, 1 seule ligne est affichée)
multiple='multiple' est l'attribut à ajouter pour permettre une sélection de plusieurs options (par défaut, une seule)
disabled

Sur une ligne, mono-sélection (par défaut)	Sur plusieurs lignes, mono-sélection	Sur plusieurs lignes, multi-sélection
<select name="mono">	<select name="multi1" size="4">	<select name="multi2" size="4" multiple="">

Les paramètres de option :

value indique la valeur de cette option.
selected force la sélection de cette occurence dans la liste.

Les zones de textes multi-lignes textarea

Permet à l'internaute d'entrer un texte assez long. Le nombre de lignes (rows='8') et de colonnes (rows='70') est spécifié. Ce champ présente une balise d'ouverture et une balise d'ouverture et conserve les sauts de ligne.

<textarea name="texte" rows="5" cols="20">Ligne 1
Ligne 2
...
</textarea>

Propriétés : name | rows | cols | disabled | readOnly

Champ fichier type='file'

Le formulaire doit être en method='post'
Le formulaire doit être en enctype="multipart/form-data"

Décorer avec un fieldset

Un formulaire peut être constitué d'un ou de plusieurs fieldset afin de former des sections. Le fieldset admet une légende.

<fieldset>
<legend>Informations personnelles : </legend>
................................................
</fieldset>
<fieldset>
<legend>Informations générales : </legend>
................................................
</fieldset>

Informations personnelles : ................................................

Informations générales : ................................................

Exercices

Pour l'ensemble des exercices, les données seront envoyées à la page http://www.action-creation.fr/cnam/nfa074/form.php qui va afficher l'ensemble des données envoyées en get ou en post (et un peu plus encore ...)

Exercice 1

Ecrire le formulaire suivant :
exercice 1

Par défaut, les données sont envoyées en mode get et apparaissent donc dans l'URL.
correction

Exercice 2

Modifier l'exercice précédent pour qu'il puisse envoyer les données en mode post.
Une fois le formulaire validé, essayez de recharger la page(Ctrl+r). Que se passe-t-il ? Pourquoi ?

Exercice 3

Ecrire le formulaire suivant :
exercice 3

Pour obtenir un résultat personnélisé, les champs doivent être nommés val1, operateur et val2.

Exercice 4

Ecrire le formulaire suivant :
exercice 4

Exercice 5

Ecrire au plus proche le formulaire suivant trouvé sur google image:
exercice 5

Exercice 6

On considère le formulaire suivant :
exercice 6

Ecriver le fomulaire étape par étape, en suivant les instructions suivantes :
A chaque étape, vous testerez le formulaire.

Les champs se nomment nom, prenom, email et message
Le formulaire se valide en mode post.
Le formulaire présente des boutons ayant le même nom envoi, l'un vaut normal et l'autre important.
Un champ caché nommé specialMode valant forum est ajouté au formulaire.
Ajouter un champ nommé image permettant d'uploader une image en plus de votre message.