Finaliser et 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.
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 :
<form method="post" action="traitement.php">
<fieldset> <legend>Vos coordonnées</legend> <!-- Titre du fieldset -->
<label for="nom">Quel est votre nom ?</label> <input type="text" name="nom" id="nom" />
<label for="prenom">Quel est votre prénom ?</label> <input type="text" name="prenom" id="prenom" />
<label for="email">Quel est votre e-mail ?</label> <input type="email" name="email" id="email" />
</fieldset>
<fieldset> <legend>Votre souhait</legend> <!-- Titre du fieldset -->
<p> Faites un souhait que vous voudriez voir exaucé :
<input type="radio" name="souhait" value="riche" id="riche" /> <label for="riche">Etre riche</label> <input type="radio" name="souhait" value="celebre" id="celebre" /> <label for="celebre">Etre célèbre</label> <input type="radio" name="souhait" value="intelligent" id="intelligent" /> <label for="intelligent">Etre <strong>encore</strong> plus intelligent</label> <input type="radio" name="souhait" value="autre" id="autre" /> <label for="autre">Autre...</label> </p>
<p> <label for="precisions">Si "Autre", veuillez préciser :</label> <textarea name="precisions" id="precisions" cols="40" rows="4"></textarea> </p> </fieldset> </form> |
Le résultat obtenu est représenté à la figure suivante.
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 :
<input type="text" name="prenom" id="prenom" autofocus /> |
Vous pouvez faire en sorte qu'un champ soit obligatoire en lui donnant l'attribut required.
<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.
Les anciens navigateurs, qui ne reconnaissent pas cet attribut, enverront le contenu du formulaire sans vérification. Pour ces navigateurs, il sera nécessaire de compléter les tests avec, par exemple, des scripts JavaScript.
On dispose de pseudo-formats en CSS pour changer le style des éléments requis (:required) et invalides (:invalid). N'oubliez pas non plus que vous disposez du pseudo-format :focus pour changer l'apparence d'un champ lorsque le curseur se trouve à l'intérieur.
:required { background-color: red; } |
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 :
On peut changer le texte affiché à l'intérieur des boutons avec l'attribut value.
Pour créer un bouton d'envoi on écrira donc par exemple :
<input type="submit" value="Envoyer" /> |
Ce qui nous donne la figure suivante.
Un bouton d'envoi
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 ! En plus M. Yard s'est empressé d'en faire une version avec une table des matière comme pour ce cours : pratique.
Certains sites comme swisstools.net proposent des services appelés « MailForm » qui se chargent de vous envoyer un e-mail lorsqu'un de vos visiteurs a rempli le formulaire. Cela vous dispense d'apprendre un nouveau langage mais ce n'est pas très pratique : vous devrez soit payer, soit voir de la publicité… et vous n'avez pas beaucoup de possibilités de personnaliser le traitement des données.
Créé avec HelpNDoc Personal Edition: Générateur de documentations PDF gratuit