13 - Envoyer le formulaire

Nous y sommes presque. Il ne nous reste plus qu'à agrémenter notre formulaire de quelques dernières fonctionnalités (comme la validation), puis nous pourrons ajouter le bouton d'envoi du formulaire.

Regrouper les champs

Si votre formulaire grossit et comporte beaucoup de champs, il peut être utile de les regrouper au sein de plusieurs balises <fieldset>. Chaque <fieldset> peut contenir une légende avec la balise<legend>. Regardez cet exemple :




1<form method="post" action="traitement.php">

2 

3   <fieldset>

4       <legend>Vos coordonnées</legend> <!-- Titre du fieldset --> 

5

6       <label for="nom">Quel est votre nom ?</label>

7       <input type="text" name="nom" id="nom" />

8

9       <label for="prenom">Quel est votre prénom ?</label>

10       <input type="text" name="prenom" id="prenom" />

11 

12       <label for="email">Quel est votre e-mail ?</label>

13       <input type="email" name="email" id="email" />

14

15   </fieldset>

16 

17   <fieldset>

18       <legend>Votre souhait</legend> <!-- Titre du fieldset -->

19 

20       <p>

21           Faites un souhait que vous voudriez voir exaucé :

22

23           <input type="radio" name="souhait" value="riche" id="riche" /> <label for="riche">Etre riche</label>

24           <input type="radio" name="souhait" value="celebre" id="celebre" /> <label for="celebre">Etre célèbre</label>

25           <input type="radio" name="souhait" value="intelligent" id="intelligent" /> <label for="intelligent">Etre <strong>encore</strong> plus intelligent</label>

26           <input type="radio" name="souhait" value="autre" id="autre" /> <label for="autre">Autre...</label>

27       </p>

28 

29       <p>

30           <label for="precisions">Si "Autre", veuillez préciser :</label>

31           <textarea name="precisions" id="precisions" cols="40" rows="4"></textarea>

32       </p>

33   </fieldset>

34</form>

Sélectionner automatiquement un champ

Vous pouvez placer automatiquement le curseur dans l'un des champs de votre formulaire avec l'attribut autofocus. Dès que le visiteur chargera la page, le curseur se placera dans ce champ.

Par exemple, pour que le curseur soit par défaut dans le champ prenom :




1<input type="text" name="prenom" id="prenom" autofocus />

Rendre un champ obligatoire

Vous pouvez faire en sorte qu'un champ soit obligatoire en lui donnant l'attribut required.




1<input type="text" name="prenom" id="prenom" required />

Le navigateur indiquera alors au visiteur, si le champ est vide au moment de l'envoi, qu'il doit impérativement être rempli.




1:required

2{

3    background-color: red;

4}

Le bouton d'envoi

Il ne nous reste plus qu'à créer le bouton d'envoi. Là encore, la balise <input /> vient à notre secours. Elle existe en quatre versions :

type="submit" : le principal bouton d'envoi de formulaire. C'est celui que vous utiliserez le plus souvent. Le visiteur sera conduit à la page indiquée dans l'attribut action du formulaire.
type="reset" : remise à zéro du formulaire.
type="image" : équivalent du bouton submit, présenté cette fois sous forme d'image. Rajoutez l'attribut src pour indiquer l'URL de l'image.
type="button" : bouton générique, qui n'aura (par défaut) aucun effet. En général, ce bouton est géré en JavaScript pour exécuter des actions sur la page. Nous ne l'utiliserons pas ici.

Pour créer un bouton d'envoi on écrira donc par exemple :




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

Lorsque vous cliquez sur le bouton « Envoyer », le formulaire vous amène alors à la page indiquée dans l'attribut action. Souvenez-vous, nous avions imaginé une page fictive : traitement.php.

Le problème, c'est que vous ne pouvez pas créer cette page seulement en HTML. Il est nécessaire d'apprendre un nouveau langage, comme le PHP, pour pouvoir « récupérer » les informations saisies et décider quoi en faire. Cela tombe bien, j'ai aussi rédigé un cours sur le langage PHP pour ceux que cela intéresse ! Ce cours existe également en livre : Concevez votre site web avec PHP et MySQL, de Mathieu Nebra, paru chez Simple IT dans la collection le Livre du Zéro, ISBN 978-2-9535278-1-0.

En résumé

Un formulaire est une zone interactive de la page, dans laquelle vos visiteurs peuvent saisir des informations.
On délimite un formulaire avec la balise <form> à laquelle il faut ajouter deux attributs : method(mode d'envoi des données) et action (page vers laquelle le visiteur sera redirigé après envoi du formulaire et qui traitera les informations).
Une grande partie des éléments du formulaire peut s'insérer avec la balise <input />. La valeur de son attribut type permet d'indiquer quel type de champ doit être inséré :
- text : zone de texte ;
- password : zone de texte pour mot de passe ;
- tel : numéro de téléphone ;
- checkbox : case à cocher ;
- etc.
La balise <label> permet d'écrire un libellé. On l'associe à un champ de formulaire avec l'attribut for, qui doit avoir la même valeur que l'id du champ de formulaire.
On peut rendre un champ obligatoire avec l'attribut required, faire en sorte qu'il soit sélectionné par défaut avec autofocus, donner une indication dans le champ avecplaceholder…
Pour récupérer ce que les visiteurs ont saisi, le langage HTML ne suffit pas. Il faut utiliser un langage « serveur » comme PHP… Si vous voulez aller plus loin, il va donc falloir apprendre un nouveau langage !

info

Pages