Les formulaires en HTML

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 :

select1 select2

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).

Partagez cet article Partager sur Twitter Partager sur Facebook Partager sur Linkedin Partager sur Google+ Envoyer par mail

Florian Burnel

Ingénieur système et réseau, cofondateur d'IT-Connect et Microsoft MVP "Cloud and Datacenter Management". Je souhaite partager mon expérience et mes découvertes au travers de mes articles. Généraliste avec une attirance particulière pour les solutions Microsoft et le scripting. Bonne lecture.

florian has 3379 posts and counting.See all posts by florian

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

 

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.