Voici un exemple de formulaire assez simple regroupant quasiment tous les types de champs abordés dans le chapitre 4 "La lecture en PHP".
Toute inscription sur un site est généralement assortie d'un ensemble de conditions à respecter. Ces conditions figurent d'habitude sur une page annexe mais, par souci de facilité, nous les faisons figurer avant le formulaire d'inscription.
Ce formulaire fonctionne "comme en vrai" mais le fait de cliquer sur le bouton de soumission "Je m'inscris" ne dirigera pas vers la page de vérification, cela réinitialisera la page avec le formulaire vide. Vous pouvez donc l'essayer tant que vous voulez.
Le texte HTML commenté du formulaire se trouve ci-dessous. Vous pourrez l'adapter à votre propre situation.
| Nos conditions d'utilisation |
Nous nous engageons à...
Vous vous engagez à...
Le fait de vous inscrire vous engage à respecter ce contrat
|
Voici, en condensé, le code ou script du formulaire ci-dessus. Les commentaires qui, en HTML, commencent par <!-- et se terminent par -->, attirent l'attention sur les éléments particuliers.
Le formulaire utilise des tableaux par souci de facilité. Nous attirons votre attention sur le fait que cette pratique est obsolète et sera avantageusement remplacée par l'utilisation de blocs d'affichage jumelés à du CSS.
<!-- Le action="#" provoquera le ré-affichage de la page lors du clic sur le bouton Je m'inscris. # doit être remplacé par le nom de la page qui sera appelée pour effectuer la vérification du formulaire, par exemple action="verification.php"-->
<form method="post" action="#">
<table border="1" cellpadding="5" align="center">
<tr>
<td align="center"><b>Inscription en ligne</b> :
<p>Femme <input type="radio" name="sexe" value="f">
<input type="radio" name="sexe" value="m"> Homme</p>
<table border="1" align="center">
<tr><td align="right">Nom : </td><td> <input type="text" name="nom" size="30"></td></tr>
<tr><td align="right">Prénom : </td><td> <input type="text" name="prenom" size="30"></td></tr>
<tr><td align="right">Je suis : </td><td>
<select name="age" size="1"><br />
<option value="jeune">Jeune<br />
<option value="adulte">Adulte<br />
<option value="senior">Sénior<br />
</select></td></tr>
<tr><td align="right">Choisissez un identifiant : </td><td> <input type="text" name="login" size="30" maxlength="15"></td></tr>
<tr><td align="right">Choisissez un mot de passe : </td><td> <input type="password" name="passw" size="30" maxlength="15"></td></tr>
<tr><td align="right">Votre adresse électronique : </td><td> <input type="text" name="courriel1" size="30"></td></tr>
<tr><td align="right">Confirmez votre adresse* : </td><td> <input type="text" name="courriel2" size="30"></td></tr>
<tr><td align="right">Ville : </td><td> <input type="text" name="ville" size="30"></td></tr>
<tr><td align="right">Pays : </td><td> <input type="text" name="pays" size="30"></td></tr>
</table>
<p>Tous les champs sont requis.
<br />*Inscrivez une seconde fois votre adresse électronique (courriel ou e-mail) pour vérification.</p>
<p><font color="purple"><b>J'ai lu et j'accepte les conditions d'utilisation ci-desus</b></font> <input type="checkbox" name="contrat" value="OK"></p>
<!-- Ce champ caché va servir de sécurité afin qu'un utilisateur ou une utilisatrice ne puisse pas exécuter la page "verification.php" en tapant directement cette adresse dans son navigateur. Si la page de vérification ne reçoit pas ce code repris dans value, l'utilisateur/trice sera redirigé.e vers la page du formulaire. Choisissez un nouveau code chaque fois que vous créerez un nouveau formulaire.-->
<input type="hidden" name="controle" value="sD=51Lk@jHeC1Mpa-">
<p><input type="submit" value="Je m'inscris"></p></td>
</tr>
</table>
</form>
|
Si vous faites un "copier-coller" du code ou script ci-dessus, il se peut que la présentation soit légèrement différente du fait de la feuille de style de notre site. Apprenez progressivement à améliorer vos mises en page en vous reportant au module "La réalisation de sites Internet" sur ce site.
Nous verrons au point suivant comment la page de vérification pourra vérifier si le formulaire a été rempli correctement et demander des compléments d'information à l'utilisateur ou l'utilisatrice si nécessaire.
Bon travail.