Faire un formulaire HTML, CSS, PHP (1 sur 3)

Dans ce tutorial, nous allons aborder la création de formulaires (x)html afin que vous soyiez capable de créer un formulaire pour les pages de votre site web non seulement, mais aussi que ce formulaire respecte complètement les standards (x)html et utilise un fichier de style CSS pour la mise en forme. D'ailleurs nous allons compliquer un peu la mise en forme CSS pour que vous puissiez, je l'espère, apprendre des choses intéressantes en CSS.
Nous verrons ensuite comment traiter les données envoyées par ce formulaire, à titre d'exemple pour différents cas de figure, car les données récupérées dans un formulaire d'une page web peuvent être traitées de nombreuses façon suivant ce que l'on souhaite faire.

Un formulaire va se décomposer en trois parties : les balises form de début et fin du formulaire, les éléments dans lesquels les visiteurs vont entrer les informations (champs, listes, etc.), et un bouton submit (ou image) qui envoie les informations au serveur. Il y a aussi le traitement des données une fois l'envoi du formulaire effectué, cela est externe au formulaire mais sera aussi évoqué dans ce tutorial.

1. Aperçu du formulaire final

Voyons tout d'abord ce que vous allez apprendre à faire à travers ce tutoriel :

Comme vous pouvez le voir, nous allons créer un peu de tous les types de champs les plus utilisés dans un formulaire pour que les formulaires HTML n'aient plus de secrets pour vous.

 

2. les balises du formulaire

Nous allons tout d'abord créer le formulaire avec la appropriée qu'est <form>.
Pour créer un formulaire, il faut obligatoirement lui spécifier une méthode d'envoi d'une part (à choisir entre "get" et "post") ainsi que l'url du script qui va recevoir les données du formulaire. Celui se traduit par le code html :

Sur cet exemple, les données seront envoyées au fichier "traitement.php", dont nous verrons l'utilisation plus loin. Tous les éléments du formulaire seront placés entre la balise de début <form...> et la balise de fin </form>.

 

3. Création des blocs coordonnées et message

Comme vous l'avez vu sur l'image montrant le résultat final, nous allons diviser notre formulaire en deux blocs principaux : "coordonnées" et "message", avec un titre pour chaque bloc. Pour cela, nous allons créer deux éléments <p> sur lesquels nous allons prévoir une classe "titre" pour la mise en forme CSS par la suite.
Et nos deux groupes de champs vont être créés avec des éléments <fieldset> sur lesquels nous allons prévoir un attribut "id" pour la mise en forme plus tard.

Notre code devient :

 

4. Créer des input radio (case à choisir)

Pour le choix de la civilité, nous allons créer des boutons de type radio, c'est-à-dire à choix unique. Lorsque vous ferez un choix, le choix précédemment sélectionné ne le sera plus. Ils se créent avec la balise <input type="radio", un nom name="civilite" et une valeur value="valeur". Vous pouvez même utiliser checked="checked" sur une des cases si vous souhaitez qu'elle soit sélectionnée par défaut. Puis fermez la balise avec /> .
La valeur est ce que votre script de traitement du formulaire récupére, veillez donc à éviter tout caractère spécial...

Nous avons donc ajouté trois de ces cases (du même nom pour qu'un seul choix soit possible), précédé d'un élement <label>, qui est le label du champ comme son nom l'indique. Nous le mettrons pour chaque champ qui aura besoin d'une description le précédent. Enfin, on englobe tout cela d'un <p> avec un id que nous allons utiliser dans le CSS encore une fois, donc vous comprendrez son utilité plus tard. Notre code devient :

 

5. Créer les champs de texte

Les champs de texte sont les champs à une ligne dans lesquels nous pouvons entrer du texte : nom, adresse, code postal, ville sur l'exemple.
Ce champs de texte ne sont pas très compliqués à mettre en place, il faut tout d'abord créer un <input type="text" , puis attribuer un nom avec name="nom" et enfin une taille (longueur) avec size="30". Mais une valeur par défaut est optionnellement possible avec value="valeur" et un nombre de caractères maximum avec maxlength="100" par exemple.

Dans notre formulaire, nous allons faire précéder chacun des quatre champ de texte d'un label puis faire un retour à la ligne après chaque champ avec <br/>, ce qui donenra ceci :

 

6. Créer une liste de choix

Nous allons ensuite créer une liste prédéfinie qui contiendra des pays, il faudra que l'utilisateur en choisisseun dans la liste.
Pour créer la liste il faut insérer une balise <select sur laquelle sur mettrons un nom name="pays" qui nous servira à récupérer sa valeur pour le traitement du formulaire. Ensuite pour chaque option de liste, il faut créer une balise <option avec une valeur value="valeur" et la fermer avec </option>. Entre les deux (<option > et </option>), il faut mettre la valeur de la liste affichée pour l'utilisateur. Puis en dernier lieu, il faut fermer la balise </select>.

Avec la liste rajoutée, on aura désormais ceci :

 

7. Créer des checkbox (cases à cocher)

Maintenant nous allons ajouter des cases à cocher. La différence avec les input de type radio, c'est que le choix peut être multiple ici. Vous pouvez cocher plusieurs cases comme bon vous semble. Il suffit de créer un élement <input type="checkbox" et comme nous récupérerons les valeurs cochées dans une variable de type tableau, nous allons toutes les nommer name="interets[]" et leur donner une valeur avec value="valeur".

Le code avec notre partie contenant les cases àcocher pour les centre d'intérêts sera donc réalisé avec ce code :

 

8. Créer une zône de texte

Une zône de texte est une zône où vous pouvez taper du texte librement et sur plusieurs lignes, au contraire du champ de texte qui est limité et sur une seule ligne.
Sa création est assez simple, il faut créer une balise <textarea , lui ajouter un nom avec name="comments" et éventuellement un nombre de lignes rows="5" et de colonnes cols="40". Enfin il faudra fermer avec </textarea>.
Vous avez également la possibilité de mettre un texte par défaut dedans, pour cela le placer entre <textarea...> et </textarea>.

 

9. Créer des boutons submit et reset

Il ne nous reste plus qu'à créer un bouton pour envoyer le formulaire, qui déclenchera l'action du formulaire (souvenez-vous le fichier traitement.php ...). Pour cela il suffit de créer un <input type="submit" et de lui donner une valeur qui sera affichée sur le bouton avec value="Envoyer" par exemple, puis de fermer la balise bien sûr.

De la même façon nous pouvons aussi créer un bouton <input type="reset" qui servira à effacer tout le contenu des champs du formulaire pour recommencer à zéro. Nous mettrons alors la valeur value="Recommencer". Nous allons mettre ces deux boutons dans un <p> </p> avec un id défini pour appliquer un style CSS dans la partie 2 du tutorial.

Voici maintenant le code complet du formulaire :

Merci de votre attention. Vous venez de voir comment créer un formulaire HTML avec les principaux champs utilisés (champ de texte, case à cocher, liste, etc.). Mais pour le moment nous n'avons pas vu à quoi servent les id et class mis sur certains éléments, ni comment récupérer les données dans un script pour en faire quelque chose. La partie suivante va donc parler de la mise en forme CSS du formulaire, et la troisième partie portera sur le traitement de données du formulaire en PHP.