Formulaire HTML

Un formulaire Web , formulaire Web ou formulaire HTML sur une page Web permet à un utilisateur de saisir des données qui sont envoyées à un serveur pour traitement. Les formulaires peuvent ressembler à des formulaires papier ou à des formulaires de base de données , car les utilisateurs Web les remplissent à l'aide de cases à cocher , de boutons radio ou de champs de texte . Par exemple, les formulaires peuvent être utilisés pour saisir des données d'expédition ou de carte de crédit pour commander un produit, ou peuvent être utilisés pour récupérer des résultats de recherche à partir d'un moteur de recherche .

Les formulaires sont inclus dans l' élément HTML <form> . Cet élément HTML spécifie le point de terminaison de communication auquel les données saisies dans le formulaire doivent être envoyées, ainsi que la méthode d'envoi des données, GETou POST.

Les formulaires peuvent être constitués d' éléments d'interface utilisateur graphique standard :

• <text>— une zone de texte simple qui permet la saisie d’une seule ligne de texte.
• <email>- un type <text>qui nécessite une adresse e-mail partiellement validée
• <number>- un type <text>qui nécessite un numéro
• <password>— similaire à <text>, il est utilisé à des fins de sécurité, dans lesquelles les caractères saisis sont invisibles ou remplacés par des symboles tels que *
• <radio>— un bouton radio
• <file>— un contrôle de sélection de fichier pour télécharger un fichier
• <reset>— un bouton de réinitialisation qui, lorsqu'il est activé, indique au navigateur de restaurer les valeurs du formulaire actuel, à leurs valeurs initiales.
• <submit>— un bouton qui indique au navigateur d'agir sur le formulaire (généralement pour l'envoyer à un serveur)
• <textarea>— tout comme le <text>champ de saisie, sauf qu'il <textarea>permet d'afficher et de saisir plusieurs lignes de données
• <select>— une liste déroulante qui affiche une liste d'éléments parmi lesquels un utilisateur peut sélectionner

L'image d'exemple à droite montre la plupart de ces éléments :

• une zone de texte demandant votre nom
• une paire de boutons radio vous demandant de choisir entre des valeurs de genre
• une boîte de sélection vous donnant une liste de couleurs d'yeux parmi lesquelles choisir
• une paire de cases à cocher sur lesquelles cliquer si elles s'appliquent à vous
• une zone de texte pour décrire vos capacités athlétiques
• un bouton d'envoi pour envoyer les valeurs actuelles du formulaire au serveur

Ces éléments de base fournissent les éléments d'interface utilisateur graphique (GUI) les plus courants, mais pas tous. Par exemple, il n'existe pas d'équivalents à une vue arborescente ou à une vue en grille .

Une vue en grille peut cependant être imitée en utilisant un tableau HTML standard dont chaque cellule contient un élément de saisie de texte. Une vue arborescente peut également être imitée par le biais de tableaux imbriqués ou, de manière plus appropriée sur le plan sémantique , de listes imbriquées . Dans les deux cas, un processus côté serveur est responsable du traitement des informations, tandis que JavaScript gère l'interaction avec l'utilisateur. Les implémentations de ces éléments d'interface sont disponibles via des bibliothèques JavaScript telles que jQuery .

HTML 4 a introduit la <label>balise, qui est destinée à représenter une légende dans une interface utilisateur, et peut être associée à un contrôle de formulaire spécifique en spécifiant l' id attribut du contrôle dans l' forattribut de la balise label. Cela permet aux étiquettes de rester avec leurs éléments lorsqu'une fenêtre est redimensionnée et de permettre des fonctionnalités plus proches de celles du bureau (par exemple, cliquer sur l'étiquette d'un bouton radio ou d'une case à cocher activera l'élément d'entrée associé).

HTML 5 introduit un certain nombre de balises de saisie qui peuvent être représentées par d'autres éléments d'interface. Certaines sont basées sur des champs de saisie de texte et sont destinées à saisir et valider des données communes spécifiques. Il s'agit notamment <email>de saisir des adresses e-mail, <tel>des numéros de téléphone, <number>des valeurs numériques. Il existe des attributs supplémentaires pour spécifier les champs obligatoires, les champs qui doivent avoir le focus du clavier lorsque la page Web contenant le formulaire est chargée, et le texte d'espace réservé qui s'affiche dans le champ mais n'est pas saisi par l'utilisateur (comme le texte « Rechercher » affiché dans de nombreux champs de saisie de recherche avant la saisie d'un terme de recherche). Ces tâches étaient auparavant gérées avec JavaScript , mais elles sont devenues si courantes que leur prise en charge a été ajoutée à la norme. Le <date>type de saisie affiche un calendrier à partir duquel l'utilisateur peut sélectionner une date ou une plage de dates. Et le colortype de saisie peut être représenté comme un texte de saisie en vérifiant simplement que la valeur saisie est une représentation hexadécimale correcte d'une couleur, selon la spécification, ou un widget de sélection de couleur (ce dernier étant la solution utilisée dans la plupart des navigateurs qui prennent en charge cet attribut).

Lorsque des données saisies dans des formulaires HTML sont soumises, les noms et les valeurs des éléments du formulaire sont codés et envoyés au serveur dans un message de requête HTTP à l'aide de GET ou POST . Historiquement, un transport par courrier électronique était également utilisé. Le type MIME par défaut (type de média Internet) , application/x-www-form-urlencoded , est basé sur une version très ancienne des règles générales de codage en pourcentage des URI , avec un certain nombre de modifications telles que la normalisation des sauts de ligne et le remplacement des espaces par " +" au lieu de " %20". Un autre codage possible, le type de média Internet multipart/form-data , est également disponible et est courant pour les soumissions de fichiers basées sur POST.

Les formulaires sont généralement associés à des programmes écrits dans différents langages de programmation pour permettre aux développeurs de créer des sites Web dynamiques . Les langages les plus populaires incluent à la fois les langages côté client et/ou côté serveur.

Bien que n'importe quel langage de programmation puisse être utilisé sur le serveur pour traiter les données d'un formulaire, les langages les plus couramment utilisés sont les langages de script , qui ont tendance à avoir des fonctionnalités de gestion de chaînes plus puissantes que les langages de programmation tels que C, et disposent également d'une gestion automatique de la mémoire qui aide à prévenir les attaques par dépassement de mémoire tampon .

Le langage de script côté client de facto pour les sites Web est JavaScript . L'utilisation de JavaScript sur le modèle d'objet de document (DOM) conduit à la méthode HTML dynamique qui permet la création et la modification dynamiques d'une page Web dans le navigateur.

Bien que les langages côté client utilisés en conjonction avec les formulaires soient limités, ils peuvent souvent servir à pré- valider les données du formulaire et/ou à préparer les données du formulaire à envoyer à un programme côté serveur. Cette utilisation est toutefois remplacée par les nouveaux types de champs et attributs HTML5 .inputrequired

Le code côté serveur peut effectuer une vaste gamme de tâches pour créer des sites Web dynamiques, ce que le code côté client ne peut pas faire pour des raisons techniques ou de sécurité : de l'authentification d'une connexion à la récupération et au stockage de données dans une base de données , en passant par la vérification orthographique ou l'envoi d'e-mails . L'un des principaux avantages de l'exécution côté serveur par rapport à l'exécution côté client est la concentration des fonctionnalités sur le serveur plutôt que de s'appuyer sur différents navigateurs Web pour implémenter diverses fonctions de manière cohérente et standardisée . De plus, le traitement des formulaires sur un serveur se traduit souvent par une sécurité accrue si l'exécution côté serveur est conçue pour ne pas faire confiance aux données fournies par le client et inclut des techniques telles que la désinfection HTML . L'un des inconvénients du code côté serveur est l'évolutivité : le traitement côté serveur pour tous les utilisateurs se produit sur le serveur, tandis que le traitement côté client se produit sur des ordinateurs clients individuels.

Certains des langages interprétés couramment utilisés pour concevoir des formulaires interactifs dans le développement Web sont PHP , Python , Ruby , Perl , JSP , Adobe ColdFusion et certains des langages compilés couramment utilisés sont Java et C# avec ASP.NET .

PHP est un langage très courant utilisé pour la « programmation » côté serveur et est l'un des rares langages créés spécifiquement pour la programmation Web .

Pour utiliser PHP avec un formulaire HTML, l'URL du script PHP est spécifiée dans l' actionattribut de la balise form. Le fichier PHP cible accède ensuite aux données transmises par le formulaire via des variables PHP $_POSTou $_GET, selon la valeur de l' methodattribut utilisé dans le formulaire. Voici un script PHP de gestion de formulaire de base qui affichera le contenu du formulaire.prénomchamp de saisie sur la page :

formulaire.html

<!DOCTYPE html> 
< html 
lang = "fr" > 
< head > 
< title > Formulaire </ title > 
</ head > 
< body > 
< form 
action = "form_handler.php" > 
< p >< label > Nom : < input 
name = "first_name" 
/></ label ></ p > 
< p >< button 
type = "submit" > Soumettre </ button ></ p > 
</ form > 
</ body > 
</ html >

gestionnaire_formulaire.php

<!DOCTYPE html> 
<?php 
// demande de la valeur de la variable externe "first_name" et filtrage. 
$firstName 
= 
filter_input ( INPUT_GET , 
"first_name" , 
FILTER_SANITIZE_STRING ); 
?> 
< html 
lang = "fr" > 
< head > 
< title > Sortie </ title > 
</ head > 
< body > 
< p > 
<?php 
echo 
"Bonjour, { $firstName } !" ; 
/* impression de la valeur */ ?> 
</ p > 
</ body > 
</ html >

L'exemple de code ci-dessus utilise la fonction PHP pour nettoyer la saisie de l'utilisateur avant de l'insérer sur la page. Le simple fait d'imprimer (d'écho) la saisie de l'utilisateur dans le navigateur sans la vérifier au préalable est quelque chose qui doit être évité dans les processeurs de formulaires sécurisés : si un utilisateur a saisi le code JavaScript dans lefilter_input()<script>alert(1)</script>prénomchamp, le navigateur exécuterait le script sur legestionnaire_formulaire.phppage, comme si elle avait été codée par le développeur ; du code malveillant pourrait être exécuté de cette façon. a été introduit dans PHP 5.2. Les utilisateurs des versions antérieures de PHP pouvaient utiliser la fonction ou des expressions régulières pour nettoyer la saisie utilisateur avant de faire quoi que ce soit avec elle. filter_input()htmlspecialchars()

Perl est un autre langage souvent utilisé pour le développement web . Les scripts Perl sont traditionnellement utilisés comme applications Common Gateway Interface (CGI). En fait, Perl est une manière tellement courante d'écrire des CGI que les deux sont souvent confondus. Les CGI peuvent être écrits dans d'autres langages que Perl (la compatibilité avec plusieurs langages est un objectif de conception du protocole CGI) et il existe d'autres moyens de faire interagir les scripts Perl avec un serveur web que d'utiliser CGI (comme FastCGI , Plack ou mod_perl d' Apache ).

Les CGI Perl étaient autrefois un moyen très courant d'écrire des applications Web . Cependant, de nombreux hébergeurs Web ne prennent aujourd'hui en charge que PHP, et les développeurs d'applications Web recherchent souvent la compatibilité avec eux.

Un CGI Perl 5 moderne utilisant le module CGI avec une forme similaire à celle ci-dessus pourrait ressembler à :

formulaire_handler.pl

#!/usr/bin/env perl 
utilise strict ; utilise CGI qw(:standard) ;
mon $name = param ( "first_name" ); print header ; print html ( body ( p ( "Bonjour, $name!" ), ), );

Parmi les types de scripts côté serveur les plus simples et les plus couramment utilisés, on trouve celui qui envoie simplement par courrier électronique le contenu d'un formulaire soumis. Ce type de script est toutefois fréquemment exploité par les spammeurs , et la plupart des scripts de formulaire vers courrier électronique les plus utilisés sont vulnérables au piratage dans le but d'envoyer des courriers indésirables. L'un des scripts les plus populaires de ce type était « FormMail.pl » créé par Matt's Script Archive . Aujourd'hui, ce script n'est plus largement utilisé dans les nouveaux développements en raison du manque de mises à jour, des problèmes de sécurité et de la difficulté de configuration.

Certaines entreprises proposent des formulaires en tant que service hébergé . En général, ces entreprises fournissent une sorte d'éditeur visuel, des outils de création de rapports et une infrastructure pour créer et héberger les formulaires, qui peuvent être intégrés dans des pages Web. d'hébergement Web fournissent des modèles à leurs clients en tant que service complémentaire. D'autres services d'hébergement de formulaires proposent des formulaires de contact gratuits qu'un utilisateur peut installer sur son propre site Web en collant le code du service dans le code HTML du site.

Les formulaires HTML ont été implémentés pour la première fois par le navigateur Viola .