Les formulaires HTML sont de puissants outils d’interaction avec les utilisateurs ; cependant, pour des raisons historiques et techniques, il n’est pas toujours évident de savoir comment les utiliser pleinement. Dans ce chapitre, nous couvrirons tous les aspects des formulaires HTML, de la structure au style, de la gestion des données aux widgets personnalisés.
Formulaire : collecte différents types de données d'entrée utilisateur et les envoie au serveur pour réaliser une interaction de données entre l'utilisateur et le serveur.
Le formulaire de balise de formulaire déclare la portée de la collecte de données. Tant qu'elle est dans le formulaire, ce sont les données à collecter.
Il peut y avoir plusieurs balises de formulaire dans une page, elles ne peuvent être qu'en relation parallèle et ne peuvent pas être imbriquées. Lorsque les utilisateurs envoient des données au serveur, ils ne peuvent soumettre des données que sous une seule forme à la fois. Si vous souhaitez soumettre plusieurs formulaires, vous devez utiliser l'interaction asynchrone dans js.
Élément <formulaire>
Les formulaires HTML sont utilisés pour collecter les entrées des utilisateurs.
Formulaire HTML de définition d'élément :
<form>.formelements.</form>
1. Les formulaires HTML contiennent des éléments de formulaire.
Les éléments de formulaire font référence à différents types d'éléments de saisie, de cases à cocher, de boutons radio, de boutons de soumission, etc.
(1) élément <input>
L'élément <input> est l'élément de formulaire le plus important. L'élément <input> a plusieurs formes, en fonction de l'attribut type. C'est le type utilisé dans ce chapitre :
(2) Saisie de texte
<input type=text> définit un champ de saisie sur une seule ligne pour la saisie de texte :
<!DOCTYPEhtml><html><body><form>Nom :<br><inputtype=textname=firstname><br>Prénom :<br><inputtype=textname=lastname></form><p>S'il vous plaît notez que le formulaire lui-même est invisible. </p><p>Notez également que la largeur par défaut des champs de texte est de 20 caractères. </p></body></html>
Les résultats présentés sont les suivants :
(3) Entrée du bouton radio
<input type=radio> définit les boutons radio. Les boutons radio permettent à l'utilisateur de sélectionner l'une des options parmi un nombre limité :
<!DOCTYPEhtml><html><body><form><inputtype=radioname=sexvalue=1checked>Homme<br><inputtype=radioname=sexvalue=2>Femme</form></body></html>
Les résultats présentés sont les suivants :
(4) Bouton Soumettre
<input type=submit> définit le bouton utilisé pour soumettre le formulaire au gestionnaire de formulaire. Un gestionnaire de formulaire est généralement une page de serveur qui contient des scripts pour traiter les données d'entrée. Le gestionnaire de formulaire est spécifié dans l'attribut action du formulaire :
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx>Nom :<br><inputtype=textname=firstnamevalue=李><br>Nom :<br><inputtype=textname=lastnamevalue= Lei ><br><br><inputtype=submitvalue=Submit></form><p>Si vous cliquez sur Soumettre, les données du formulaire seront envoyées à une page nommée demo_form.ashx pour un traitement ultérieur. </p></body></html>
Les résultats présentés sont les suivants :
2. Attributs du formulaire :
(1) Attribut d'action
L'attribut action définit l'action à effectuer lors de la soumission du formulaire. La manière habituelle de soumettre un formulaire au serveur consiste à utiliser un bouton de soumission. En règle générale, les formulaires sont soumis à une page Web sur un serveur Web. Dans l'exemple ci-dessus, un script serveur est spécifié pour gérer le formulaire soumis :
<formaction=action.php>
Si l'attribut action est omis, l'action sera définie sur la page actuelle.
(2)Attribut de méthode
L'attribut méthode spécifie la méthode HTTP (GET ou POST) utilisée lors de la soumission du formulaire :
<formaction=action.phpmethod=GET>
ou:
<formaction=action.phpmethod=POST>
Quand utiliser GET ?
Vous pouvez utiliser GET (la méthode par défaut) : si la soumission du formulaire est passive (comme une requête d'un moteur de recherche) et qu'il n'y a aucune information sensible. Lorsque vous utilisez GET, les données du formulaire sont visibles dans la barre d'adresse de la page :
action_page.php?firstname=Han&lastname=Meimei
Remarque : GET est le mieux adapté pour soumettre de petites quantités de données. Le navigateur définira une limite de capacité (255 caractères).
Quand utiliser le POST ?
Vous devez utiliser POST : si le formulaire met à jour des données ou contient des informations sensibles (telles que des mots de passe). POST est plus sécurisé car les données soumises dans la barre d'adresse de la page sont invisibles.
(3) Attribut de nom
Chaque champ de saisie doit avoir un attribut de nom défini pour être soumis correctement. Cet exemple soumettra uniquement le champ de saisie Nom :
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx>Nom :<br><inputtype=textvalue=李><br>Prénom :<br><inputtype=textname=lastnamevalue=Lei >< br><br><inputtype=submitvalue=Submit></form><p>Si vous cliquez sur Soumettre, les données du formulaire seront envoyées à une page nommée demo_form.ashx. </p><p>Le nom de famille ne sera pas soumis car cet élément d'entrée n'a pas d'attribut name. </p></body></html>
Les résultats présentés sont les suivants :
3. Contrôles de formulaire
Combinez les données du formulaire avec <fieldset>
L'élément <fieldset> combine les données associées dans un formulaire. L'élément <legend> définit le titre de l'élément <fieldset>.
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx><fieldset><legend>Informations personnelles :</legend>Nom :<br><inputtype=textname=firstnamevalue=Mickey><br > Nom :<br><inputtype=textname=lastnamevalue=Mouse><br><br><inputtype=submitvalue=Submit></fieldset></form></body></html>
Les formulaires sont utilisés pour collecter des données utilisateur, qui doivent être remplies lors de divers contrôles. Les contrôles HTML sont également implémentés via des balises, mais ils présenteront des apparences spéciales et auront des fonctions interactives.
Les formulaires HTML peuvent contenir des contrôles comme indiqué dans le tableau suivant :