Lorsqu'il vous prend subitement l'envie d'insérer un formulaire dans votre page HTML, vous devez pour commencer écrire une balise
<form> </form>. C'est la balise principale du formulaire, elle permet d'en indiquer le début et la fin.
Texte avant le formulaire
Texte à l'intérieur du formulaire
Texte après le formulaire
Voilà pour la structure de base. Maintenant, soyez attentifs : ce que j'ai à vous dire n'est pas évident parce qu'on est à la limite du HTML.
On va prendre un exemple pour que les choses soient claires. Supposons que votre visiteur vienne de taper un commentaire dans votre formulaire, par exemple un message qu'il aimerait publier sur vos forums. Ce message doit être envoyé pour que vous puissiez le recevoir (logique, non ?) et l'afficher pour vos autres visiteurs.
Eh bien c'est là le problème, ou plutôt les problèmes, que l'on va se poser :
- Problème n°1 : comment envoyer le texte saisi par le visiteur ? Par quel moyen ?
- Problème n°2 : une fois que les données ont été envoyées, comment les traiter ? Souhaitez-vous recevoir le message automatiquement par mail ou préférez-vous qu'un programme se charge de l'enregistrer quelque part, puis de l'afficher sur une page visible par tout le monde ?
Pour fournir les réponses à ces deux problèmes, vous devez ajouter deux attributs à la balise
<form> :method: cet attribut indique par quel moyen les données vont être envoyées (réponse auproblème n°1). Il existe deux solutions pour envoyer des données sur le Web :method="get": c'est une méthode en général assez peu adaptée car elle est limitée à 255 caractères. La particularité vient du fait que les informations seront envoyées dans l'adresse de la page (http://…), mais ce détail ne nous intéresse pas vraiment pour le moment. La plupart du temps, je vous recommande d'utiliser l'autre méthode :post.method="post": c'est la méthode la plus utilisée pour les formulaires car elle permet d'envoyer un grand nombre d'informations. Les données saisies dans le formulaire ne transitent pas par la barre d'adresse.
action: c'est l'adresse de la page ou du programme qui va traiter les informations (réponse auproblème n°2). Cette page se chargera de vous envoyer un e-mail avec le message si c'est ce que vous voulez, ou bien d'enregistrer le message avec tous les autres dans une base de données.
Cela ne peut pas se faire en HTML et CSS, on utilisera en général un autre langage dont vous avez peut-être entendu parler : PHP.
On va donc maintenant compléter la balise
<form> avec les deux attributs qu'on vient de voir.
Pour
Pour
method, vous l'aurez deviné, je vais mettre la valeur post.Pour
action, je vais taper le nom d'une page fictive en PHP (traitement.php). C'est cette page qui sera appelée lorsque le visiteur cliquera sur le bouton d'envoi du formulaire.
Texte avant le formulaire
method="post" action="traitement.php"
Texte à l'intérieur du formulaire
Texte après le formulaire
Pour le moment, on ne sait pas ce qu'il se passe à l'intérieur de la page
traitement.php : je vous demande de me faire confiance et d'imaginer que cette page existe et fonctionne.
Notre priorité, pour le moment, est de découvrir en HTML/CSS comment faire pour insérer des zones de texte, des boutons et des cases à cocher dans votre page web. C'est ce que nous allons voir maintenant.
