Les formulaires en HTML

Les formulaires permettent à vos visiteurs de saisir des informations sur votre site Internet. Vous avez donc de l'interactivité entre le visiteur du site et votre site. Les formulaires sont très souvent utilisés sur des sites Internet. On trouve des formulaires pour s'inscrire sur un site, posté des messages sur un forum de discussion, signer par exemple un livre d'or.

Sur le site que vous visitez http://www.helpclic.net/, j'utilise différents formulaires (livre d'or, forum, news ...). Pour créer un formulaire, il faut utiliser un mélange de HTML et de PHP. Pour le moment, je me contenterai de faire la construction du formulaire en HTML. Le PHP permettra d'envoyer les informations saisient dans un formulaire dans une base de données MySQL.

ATTENTION : N'exécutez pas tous les script suivant car ici, on ne voit que du HTML. Vos différents formulaires s'afficheront mais ne pourront pas être exécuter car sur tous les boutons, je n'ai pas mis le code PHP qui va avec. On verra se code dans la partie "Les formulaires et le PHP".

En HTML, pour dire qu'on va insérer un formulaire on se sert de la balise et . On l'utilise de la manière suivante :

method="post" action="ajout.php">

Ce qu'il faut retenir, c'est qu'on met le contenu de notre formulaire entre les balises et . Il y a 2 attributs intéressants à connaître pour la balise :

• method : il faut savoir qu'il y a 2 moyens d'envoyer le formulaire. La méthode POST ou la méthode GET. Lorsque vous utilisez la méthode POST, les informations sont envoyés en caché. Lorsque vous utilisez la méthode GET, les informations sont envoyés dans la barre d'adresse. Ne retenez que la méthode "POST", c'est la seule qui nous intéressera en PHP.
• action : C'est le nom de la page qui sera appelée lorsque l'utilisateur aura envoyé son formulaire. Nous verrons en php comment récupérer les informations transmises par le formulaire.

Les zones de texte :

Les zones de texte permettent de saisir un petit nombre de caractères. Par exemple, dans une zone de texte, vous pouvez saisir votre pseudo. Voici le code pour créer une zone de texte :

method="post" action="ajout.php">     Pseudo : "text" name="pseudo" value="toto">

En HTML, on insére une zone de texte grâce à la balise . Si vous voulez mettre un mot de passe, donc des caractères protégés, il faut utiliser la balise

Dans ce code, vous allez trouver 2 attributs qui sont très important :

• name : C'est le nom de la zone de texte. Ce nom est important. On s'en servira pour récupérer les informations saisies en PHP
• value : C'est ce que contient la zone de texte au départ. Ici, la zone de texte contiendra "toto". Vous pouvez laisser cet attribut vide si vous le souhaitez.

Les boutons :

Pour valider votre saisi et transmettre les données saisies, il vous faut un bouton "valider". Nous allons utiliser une balise avec comme attribut value ="OK"

method="post" action="ajout.php">     Pseudo : "text" name="pseudo" value="toto">      ="submit" value="OK">

Les grosses zones de texte ou textarea :

Ces grosses zones de texte permettent de saisir beaucoup de texte. Elles sont souvent utilsées pour écrire des commentaires, des messages sur un livre d'or ou un forum. Voici le code pour créer un textarea :

method="post" action="ajout.php">     Pseudo : "text" name="pseudo" value="toto">     Commentaire :"commentaire"</span> rows=<span style="color: rgb(0, 0, 255);">"4"</span> cols=<span style="color: rgb(0, 0, 255);">"30"</span>><span style="color: rgb(0, 0, 0);">Merci helpclic de nous apprendre tous ces cours ... !!!!</span>      ="submit" value="OK">

La balise va crée une grosse zone de texte. Cette zone a une largeur de 10 colonnes (cols) et une hauteur de 4 lignes (rows). Ce sont les attributs du textarea. Ensuite, j'ai rajouté un attribut "name" permettant de récupérer les informations saisies. Ces informations seront récupérées grâce au langage PHP.

Les listes déroulantes :

Vous choisissez des informations parmi une liste. Voici le code permettant de créer une liste déroulante :

method="post" action="ajout.php">     Pseudo : "text" name="pseudo" value="toto">     Commentaire :"commentaire"</span> rows=<span style="color: rgb(0, 0, 255);">"4"</span> cols=<span style="color: rgb(0, 0, 255);">"30"</span>><span style="color: rgb(0, 0, 0);">Merci helpclic de nous apprendre tous ces cours ... !!!!</span></textarea</span><span style="color: rgb(0, 0, 128);"><span>></span><span><br></span></span></em></font><span style="color: rgb(0, 0, 0);"><span><br><font style="background-color: rgb(255, 255, 255);"><em>  <span style="color: rgb(128, 128, 128);"><!-- Liste déroulante --></span></em></font></span></span></span><br><font style="background-color: rgb(255, 255, 255);"><em><span style="color: rgb(0, 0, 0);">Ville : </span><span style="color: rgb(255, 153, 0);"><select name=</span><span style="color: rgb(0, 0, 255);">"Ville"</span><span style="color: rgb(255, 153, 0);">></span></em></font><font color="#808080"><br><font style="background-color: rgb(255, 255, 255);"><em>   <span style="color: rgb(255, 153, 0);"><option value=</span><span style="color: rgb(0, 0, 255);">"Paris"</span><span style="color: rgb(255, 153, 0);">></span><span style="color: rgb(0, 0, 0);">Paris</span><span style="color: rgb(255, 153, 0);"></option></span><br>   <span style="color: rgb(255, 153, 0);"><option value=</span><span style="color: rgb(0, 0, 255);">"Marseille"</span><span style="color: rgb(255, 153, 0);">></span><span style="color: rgb(0, 0, 0);">Marseille</span><span style="color: rgb(255, 153, 0);"></option></span><br>   <span style="color: rgb(255, 153, 0);"><option value</span><span style="color: rgb(0, 0, 255);"><span>=</span>"Lyon"</span><span style="color: rgb(255, 153, 0);">></span><span style="color: rgb(0, 0, 0);">Lyon</span><span style="color: rgb(255, 153, 0);"></option></span><br>  <span style="color: rgb(255, 153, 0);"></select></span></em></font></font><font style="background-color: rgb(255, 255, 255);"><em><span style="color: rgb(0, 0, 128);"><br></span><br>  <span style="color: rgb(128, 128, 128);"><!-- Bouton valider--></span><br>  <span style="color: rgb(255, 153, 0);"><input type<span style="color: rgb(255, 153, 0);"><span>=</span></span><span style="color: rgb(0, 0, 255);">"submit"</span> value=<span style="color: rgb(0, 0, 255);">"OK"</span>></span><br><span style="color: rgb(255, 153, 0);"></form></span></em></font> </td></tr></tbody></table><font style="background-color: rgb(204, 255, 255);"><span style="color: rgb(255, 153, 0);"><font style="background-color: rgb(255, 255, 255);" color="#000000">La balise <select> permet de créer une liste déroulante. On attribut le nom de "Ville" à cette balise. Les attributs <option value> permettent de remplir votre zone de texte<font style="background-color: rgb(255, 255, 255);">.</font></font></span></font><font style="background-color: rgb(204, 255, 255);"><span style="color: rgb(255, 153, 0);"><font style="background-color: rgb(255, 255, 255);"> </font><p style="text-align: justify;"><font style="background-color: rgb(255, 255, 255);"><font color="#000000"><strong><u>Les boutons radios</u></strong> :</font></font></p><p style="text-align: justify;"><font style="background-color: rgb(255, 255, 255);" color="#000000">Les boutons radios permettent de choisir entre 2 ou plusieurs options. Voici, le code correspondant pour créer des boutons radios :</font></p><table style="background-color: rgb(255, 255, 255);" width="90%" align="center" border="1"><tbody><tr><td><font style="background-color: rgb(255, 255, 255);"><em><font color="#ff9900"><form</font> <span style="color: rgb(255, 153, 0);">method=</span><span style="color: rgb(0, 0, 255);">"post"</span> <span style="color: rgb(255, 153, 0);">action=</span><span style="color: rgb(0, 0, 255);">"ajout.php"</span><span style="color: rgb(255, 153, 0);">></span><br>  </em></font><font style="background-color: rgb(255, 255, 255);"><em><span style="color: rgb(128, 128, 128);"><span><!-- Zone de texte --><br></span></span><span style="color: rgb(128, 128, 128);"><font color="#000000">  Pseudo : <span style="color: rgb(255, 153, 0);"><input type=</span><span style="color: rgb(0, 0, 255);">"text"</span> <span style="color: rgb(255, 153, 0);">name=</span><span style="color: rgb(0, 0, 255);">"pseudo"</span> <span style="color: rgb(255, 153, 0);">value=</span><span style="color: rgb(0, 0, 255);">"toto"</span><span style="color: rgb(255, 153, 0);">></span></font></span></em></font><span style="color: rgb(0, 0, 128);"><font style="background-color: rgb(255, 255, 255);"><em><span><br></span><br></em></font></span><span style="color: rgb(128, 128, 128);"><font style="background-color: rgb(255, 255, 255);"><em>  <!-- Textarea --><br></em></font></span><span style="color: rgb(0, 0, 0);"><font style="background-color: rgb(255, 255, 255);"><em>  <span style="color: rgb(0, 0, 0);"><span>Commentaire :</span></span><span style="color: rgb(255, 153, 0);"><textarea name=<span style="color: rgb(0, 0, 255);">"commentaire"</span> rows=<span style="color: rgb(0, 0, 255);">"4"</span> cols=<span style="color: rgb(0, 0, 255);">"30"</span>><span style="color: rgb(0, 0, 0);">Merci helpclic de nous apprendre tous ces cours ... !!!!</span>    Ville : "Paris">Paris"Marseille">Marseille="Lyon">Lyon      Fait-il beau ? : "radio" name="temps" value="Oui"> Oui   "radio" name="temps" value="Non"> Non      ="submit" value="OK">

Les boutons d'options portent le même nom "temps". C'est très important que les options portent le même nom.

Les champs cachés :

Les champs cachés permettent au créateur de cacher certains éléments aux visiteurs d'un site. Ces éléments seront quand même transmis à la base de données grâce au langage PHP. On va supposer que l'on souhaite retenir, le pseudo du visiteur qui est helpclic. Voici le code qui permet de cacher certains champs :

method="post" action="ajout.php">     Pseudo : "text" name="pseudo" value="toto">     Commentaire :"commentaire"</span> rows=<span style="color: rgb(0, 0, 255);">"4"</span> cols=<span style="color: rgb(0, 0, 255);">"30"</span>><span style="color: rgb(0, 0, 0);">Merci helpclic de nous apprendre tous ces cours ... !!!!</span>    Ville : "Paris">Paris"Marseille">Marseille="Lyon">Lyon      Fait-il beau ? : "radio" name="temps" value="Oui"> Oui   "radio" name="temps" value="Non"> Non      "hidden" name="pseudo2" value="helpclic">     ="submit" value="OK">