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 :
| <form method="post" action="ajout.php"> <!-- On va mettre ici les éléments de notre formulaire Comme par exemple des zones de texte, des boutons radios, des cases à cocher ...--> </form> |
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 :
| <form method="post" action="ajout.php"> <!-- Zone de texte --> Pseudo : <input type="text" name="pseudo" value="toto"><br> </form> |
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 :
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"
| <form method="post" action="ajout.php"> <!-- Zone de texte --> Pseudo : <input type="text" name="pseudo" value="toto"><br> <!-- Bouton valider--> <input type="submit" value="OK"> </form> |
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 :
| <form method="post" action="ajout.php"> <!-- Zone de texte --> Pseudo : <input type="text" name="pseudo" value="toto"><br> <!-- Textarea --> Commentaire :<textarea name="commentaire" rows="4" cols="30">Merci helpclic de nous apprendre tous ces cours ... !!!!</textarea><br> <!-- Bouton valider--> <input type="submit" value="OK"> </form> |
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 :
| <form method="post" action="ajout.php"> <!-- Zone de texte --> Pseudo : <input type="text" name="pseudo" value="toto"><br> <!-- Textarea --> Commentaire :<textarea name="commentaire" rows="4" cols="30">Merci helpclic de nous apprendre tous ces cours ... !!!!</textarea><br> <!-- Liste déroulante --> Ville : <select name="Ville"> <option value="Paris">Paris</option> <option value="Marseille">Marseille</option> <option value="Lyon">Lyon</option> </select><br> <!-- Bouton valider--> <input type="submit" value="OK"> </form> |
Les boutons radios :
Les boutons radios permettent de choisir entre 2 ou plusieurs options. Voici, le code correspondant pour créer des boutons radios :
| <form method="post" action="ajout.php"> <!-- Zone de texte --> Pseudo : <input type="text" name="pseudo" value="toto"><br> <!-- Textarea --> Commentaire :<textarea name="commentaire" rows="4" cols="30">Merci helpclic de nous apprendre tous ces cours ... !!!!</textarea><br> <!-- Liste déroulante --> Ville : <select name="Ville"> <option value="Paris">Paris</option> <option value="Marseille">Marseille</option> <option value="Lyon">Lyon</option> </select><br> <!-- Bouton Radio --> Fait-il beau ? : <input type="radio" name="temps" value="Oui"> Oui <input type="radio" name="temps" value="Non"> Non<br> <!-- Bouton valider--> <input type="submit" value="OK"> </form> |
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 :
| <form method="post" action="ajout.php"> <!-- Zone de texte --> Pseudo : <input type="text" name="pseudo" value="toto"><br> <!-- Textarea --> Commentaire :<textarea name="commentaire" rows="4" cols="30">Merci helpclic de nous apprendre tous ces cours ... !!!!</textarea><br> <!-- Liste déroulante --> Ville : <select name="Ville"> <option value="Paris">Paris</option> <option value="Marseille">Marseille</option> <option value="Lyon">Lyon</option> </select><br> <!-- Bouton Radio --> Fait-il beau ? : <input type="radio" name="temps" value="Oui"> Oui <input type="radio" name="temps" value="Non"> Non<br> <!-- Champs caché --> <input type="hidden" name="pseudo2" value="helpclic"> <!-- Bouton valider--> <input type="submit" value="OK"> </form> |
Rien n'apparaîtra à l'écran mais lorsque vous validerez le champs pseudo2 sera transmis en php.