Les formulaires en HTML
Sommaire
I. Présentation
Les formulaires sont des éléments permettant à l’internaute d’interagir avec votre site web. Ils permettent à l’utilisateur de saisir des informations dans différents champs et une fois qu’il a finit il envoie les informations grâce au bouton d’envoie, qui en général est un input de type submit.
En effet, un formulaire est constitué de balises input qui peuvent prendre différentes formes comme un champs de saisie simple sur une ligne mais aussi de balise select pour créer une liste déroulante ou la balise textarea pour créer une zone de texte paramétrable.
Vous trouverez des explications sur les différents types d’input dans un autre tutoriel dédié à cela.
II. Les balises du formulaire
Le début du formulaire est représenté par la balise <form> et la fin </form>, il est important de les inclure dans une page car si vous avez plusieurs formulaires dans la même page il faut pouvoir les différencier.
Dans cette balise on précise une ACTION, c'est-à-dire la page vers laquelle les données sont envoyée, et on peut aussi préciser une METHOD d’envoie, soit POST ou GET sachant que par défaut la méthode est GET.
Exemple de balise d’ouverture de formulaire :
<form action=’ma-page.php’ method=’POST’>
III. Différence entre la méthode d'envoie POST et GET
La méthode GET consiste à envoyer les informations du formulaire directement dans l’URL en précisant le nom du champ et sa valeur.
Exemple : Nous sommes sur le site www.neoflow.fr, dans la page test.php et il y a un champ appelé info1 à la valeur « neoflow » et un deuxième champ appelé info2 ayant pour valeur « informatique » (celles-ci ont étaient saisies par l’utilisateur), lorsque celui-ci confirmera le formulaire l’URL sera la suivante :
http://www.neoflow.fr/test.php?info1=neoflow&info2=informatique
A l’inverse, la méthode POST n’affiche pas le nom des paramètres et leurs valeurs dans l’URL, enfaitent ils sont bien passés dans l’URL mais il y a un retour chariot avant chaque paramètre donc l’utilisateur ne peut pas les voir dans la page d’adresse.
Si on reprend l’exemple précédent on pourrait imager cela de cette manière :
http://neoflow.fr/test.php
info1=neoflow
info2=informatique
IV. Les listes déroulantes
Les listes déroulantes permettent à l’utilisateur de faire un choix selon des valeurs prédéfinies. Celles-ci s’écrivent de la manière suivante :
La liste déroulante s’ouvre avec la balise <select> et se ferme avec </select> à l’intérieur de celle-ci nous trouverons des balises <option>Nom de l'Option </option>. Chaque balise option définie une valeur de la liste déroulante, si vous souhaitez avoir 5 choix dans votre liste il vous faudra 5 option.
Lorsque vous envoyer votre formulaire, le paramètre nom envoyé sera le nom du select et la valeur sera la valeur de l’option sélectionnée.
V. Les options du select
Name : donner un nom à la liste déroulante
Multiple : ce paramètre vous permet d’accepter plusieurs choix de la part de l’utilisateur.
Disabled : Si vous ajoutez cela, votre liste déroulante sera désactivée et donc grisée.
- Exemple de liste déroulante :
VI. Les zones de saisies
Elles sont définies de la manière suivante :
<textarea name=’description’>
On peut ajouter des paramètres dans la balise tels que width (largeur), height (hauteur), noresize (empêche l’utilisateur de redimensionner la zone de saisie).
