En première

• Construction d'un formulaire
• Méthode Get
• Méthode Post
• Rôle du javascript

Un formulaire dans une page web permet à l'utilisateur de saisir des valeurs qui seront traitées sur le serveur. Vous utilisez des formulaires lorsque vous créez un compte par exemple, ou lorsque vous répondez à des questions sur un site.

commençons par le plus simple: une zone de texte qui demande votre prénom:

<form method="post" action="action.php">
	<p>
		<label for="prenom">Entrez votre prénom :</label>
		<input type="text" name="prenom" id="prenom" placeholder="Ex: Jojo" size="30" maxlength="10" />
	</p>
</form>

Ici nous avons une étiquette (label) qui sera visible. Ensuite une case où 'Ex: Jojo' sera écrit. Placehoilder, size, maxlength sont facultatifs. 'name' est le nom du champs du formulaire et 'id' le nom de la réponse. Dans le cas d'une liste déroulante, nous aurons un seul name mais plusieurs id. Le 'for' dans le label sert à lier avec le champs à remplir; si on clique sur 'Entrez votre prénom', le curseur se placera dans la case à remplir.

Voici un exemple qui regroupe les différentes manière d'effectuer une saisie dans un formulaire:

<form method="post" action="action.php">
   <p>
       <label> Votre mot de passe :</label>
       <input type="password" name="pass" id="pass" required />
   </p>
   <p>
      <label>Décrivez vous:</label><br />
      <textarea name="description" id="description" autofocus>texte exemple de dans ma saisie multilignes</textarea>
   </p>
   <p> 	<label>mail:</label><input type="email" name="mail" id="mail"/> <p>
     <p> 	<label>url site:</label><input type="url" name="url" id="url"/></p>
	   <p> 	<label>tel:</label><input type="tel" /></p>
	   <p> <label>âge:</label><input type="number" /></p>
	   <p> <label>bougez le curseur pour choisir votre âge:</label><input type="range" max="125" min="6" step="1" name="age"/></p>
	   <p><input type="color" /></p>
	   <p><input type="date" /></p> // ou time ou week ou month ou datetime ou datetime-local
   <p>
     Cochez les matières que vous aimezr :<br />
     <input type="checkbox" name="nsi" id="nsi" /> <label for="nsi" checked >nsi</label><br />
     <input type="checkbox" name="maths" id="maths" /> <label for="maths">maths</label><br />
     <input type="checkbox" name="histoire" id="histoire" /> <label for="histoire">Histoire géographie</label>
 </p>
   <p>
       Veuillez indiquer le temps passé devant les écrans :<br />
        <input type="radio" name="ecran" value="moinsDe1" id="moinsDe1" /> <label for="moinsDe1">Moins de 1 heure</label><br />
        <input type="radio" name="ecran" value="entre1et3" id="entre1et3" /> <label for="entre1et3">Entre 1 et 3 heures</label><br />
        <input type="radio" name="ecran" value="entre3et5" id="entre3et5" /> <label for="entre3et5">Entre 3 et 5 heures</label><br />
        <input type="radio" name="ecran" value="plus5" id="plus5" /> <label for="plus5">Plus de 5 heures</label>
    </p>
		//notez que l'on a le même nom pour tous les boutons! et plusieurs id pour connaitre la réponse.
    <p>
     <label for="marqueTel">Marque de votre smartphone ?</label><br />
      <select name="marqueTel" id="marqueTel">
        <optgroup label="Originaux">  //crée des sous groupes, facultatif
           <option value="Samonor" selected>Samonor</option>
           <option value="Appelg">Appelg</option>
           <option value="huany">huany</option>
        </optgroup>
        <optgroup label="Originaux bis">
           <option value="marque1" selected>marque1</option>
           <option value="marque2">marque2</option>
           <option value="marque3">marque3</option>
        </optgroup>
      </select>
 	</p>
	<input type="submit" value="Envoyer" />
 </form>

Le type submit va créer un bouton qui sera chargé de l'envoi du formualaire et donc lancer la page action.php avec en paramètres les différents champs et leur valeurs.

Maintenant que nous savons créer un formulaire voyons comment l'envoyer et le traiter.

Dans l'exemple précédent la méthode était Post. Si l'on remplace Post par get ou si l'on supprime method="post", le formulaire sera envoyé par la méthode Get et passera donc tous les champs et leur valeur dans l'url.

Vous pourrez traiter ces paramètres comme vu à la page Interation avec l'utilisateur dans une page soit avec du php soit avec du javascipt. Souvenez vous qu'avez la méthode get, tous vos paramètres, donc toutes vos réponses sont visibles dans la barre d'adresse.

A la différence de la méthode Get, par une méthode Post les données émises ne sont pas visibles dans la barre d'adresse, les données sont directement transmises au serveur. On récupère cependant ces données avec les mêmes méthodes que précédement cad vu à la page Interation avec l'utilisateur dans une page. Le php reste préférable.

La méthode Post permet d'envoyer bien plus de données que la méthode get.

Attention, bien que les données ne soient pas visibles dans la barre d'adresse, elles le seront quand même dans un sniffer tel wireshark si votre page n'est pas en https.

On rappelle que le javascript s'execute côté client, il permet donc de vérifier la validité du formulaire avant d'envoyer les réponses. Il permet aussi de donner des indications sur ce qu'il faut saisir lorsque l'on passe la souris au dessus d'une zone. Nous somme de nouveau en train de parler de la gestion des événements dans une page web et de l'IHM.

Voici la liste des événements gérés par javascript

• onblur: lorsque le champ perd le focus (permet donc de lancer un contrôle de validité du champ) .
• onchange: lorsque le champ change
• onfocus: lorsque le champ prend le focus (la souris est dedans)
• onformchange: lorsque le formulaire est modifié
• oninput: lorsque le champ est rempli
• oninvalid: lorsque la saisie n'est pas valide, par exemple un texte pour un nombre
• onselect:lorsqu'on selectionne un champ dans un menu
• onsubmit: lorsqu'on envoie le formulaire

1. Créer un formulaire afin d'exploiter la page devine2 que vous avez fait dans le chapitre précédent Requêtes HTTP, réponses du serveur. Vous pourrez rajouter un petit contrôle que la valeur saisie est bien un nombre entre 0 et 100.

2. Gros TP, individuel. Au vu du temps dont vous disposez. Construire une page html ou php, avec une présentation (titre etc) et une esthétique non nulle (utilisation de css). Construire ensuite un formulaire avec des formes de saisies différentes, et envoyer ensuite les réponses de ce formulaire à une page de traitement qui va réagir en conséquence.