La structure d’un formulaire en HTML
La structure d’un formulaire en HTML
-
Objectifs
- Comprendre comment structurer les formulaires HTML.
-
Introduction
- Les formulaires sont des éléments importants d’un site internet. Ils sont les interfaces par lesquelles les visiteurs de votre site peuvent entrer en contact avec vous ou envoyer des données à votre site
- Un formulaire HTML est une partie de page web qui accepte des entrées de l’utilisateur.
- Les éléments constitutifs d’un formulaire doivent être contenus entre les balises <form> et </form> .
- Un formulaire HTML est une partie du document constituée d’un contenu normal, d’un balisage, d’éléments spéciaux appelés commandes (cases à cocher, boutons radio, menus, etc.) et de labels sur ces commandes.
- Le mécanisme des formulaires est destiné à fournir un mode d’interaction beaucoup plus vaste: choix sur listes, boutons d’activation ou désactivation, saisie libre de texte…
- En général la présence d’éléments de formulaires HTML fait distinguer un site web statique et d’un site web dynamique.
-
La déclaration d’un formulaire
- Un formulaire HTML se définit par la balise <form> et </form> Elle contient des attributs indispensables.
- L’élément HTML
<FORM>représente un formulaire, c’est-à-dire une section d’un document qui contient des contrôles interactifs permettant à un utilisateur de fournir des informations. - La définition des différents éléments du formulaire se fait en utilisant l’élément
<FORM>. L’action a réaliser pour traiter le formulaire doit être précisée en utilisant les deux attributs suivants : -
L’attribut
ACTION - Il indique l’action à exécuter lorsque lors de l’envoi des données. Ce sera souvent un logiciel du serveur activé en utilisant la passerelle CGI. On peu aussi utiliser un script JAVAscript.
-
L’attribut
METHOD - action qui définit la destination où sont envoyées les donnés: un cgi, une page php ou asp ou un mail (mailto).
- method qui définit la méthode d’envoi (POST et GET).
- Il permet de définir la méthode de transfert des données vers le serveur. Les deux valeurs possibles sont
GETetPOST. - La syntaxe habituelle est donc :
<FORM METHOD="POST" ACTION="https://www.apcpedagogie.com"> ... </FORM> -
Les éléments d’un formulaire
- Un formulaire se déclare avec l’élément «
form» en HTML, c’est à l’intérieur des balises ouvrantes et fermantes d’un élément «form» qu’on peut intégrer le contenu du formulaire. - Le contenu du formulaire sera constitué de champs (ou zones de saisies), de labels et d’un bouton de validation du formulaire.
- Ces éléments peuvent être répartis en 3 classes :
- Input
- Champs de saisie de texte et diféérents types de boutons
- Select
- Listes (menus déroulants et ascenseurs)
- Textarea
- Zone de saisie de texte libre
-
Créer la structure du formulaire
- Lorsque le croquis ou la maquette web du formulaire est terminé, vous pouvez vous lancer dans le code de votre formulaire.
- Pour le moment, l’objectif est de créer toute la structure HTML du formulaire sans mise en page, sans modification de son apparence. Il va vous falloir créer tous les champs, labels et autres éléments de votre formulaire.
- Voici un formulaire simple qui comprend des labels, des boutons radio et des boutons poussoirs (pour réinitialiser le formulaire ou le soumettre) :
<FORM action="https://apcpedagogie.com" method="post">
<P>
<LABEL for="prenom">Prénom : </LABEL>
<INPUT type="text" id="prenom"><BR>
<LABEL for="nom">Nom : </LABEL>
<INPUT type="text" id="nom"><BR>
<LABEL for="email">e-mail : </LABEL>
<INPUT type="text" id="email"><BR>
<INPUT type="radio" name="genre" value="homme"> Homme<BR>
<INPUT type="radio" name="genre" value="femme"> Femme<BR>
<INPUT type="submit" value="Envoyer"> <INPUT type="reset">
</P>
</FORM>