Formulaire HTML

Un formulaire Web ou un formulaire HTML sur une page Web permet à un utilisateur de saisir des données qui sont envoyées à un serveur pour subir traitement. Les formulaires ont une forme semblable à celle des formulaires papier ou de base de données : les utilisateurs Web remplissent les formulaires à 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.

Description

Exemple de formulaire. Le formulaire est inclus dans un tableau HTML pour une mise en page visuelle.

Les formulaires sont inclus dans l'élément HTML <form>. Cet élément HTML permet de spécifier l'URL sur lequel les données saisies dans le formulaire doivent être soumises et la méthode de soumission des données, GET ou POST.

Éléments

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

• <text> — une simple zone de texte qui permet la saisie d'une seule ligne de texte
• <email> - un type de <text> qui demande une adresse e-mail partiellement validée
• <number> - un type de <text> qui demande un nombre
• <password> — similaire à <text>, il est utilisé à des fins de sécurité, dans lequel les caractères saisis sont invisibles ou cachés par des symboles tels que *
• <radio> — un bouton radio
• <file> — un composant 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 champs du formulaire à leurs valeurs initiales.
• <submit> - un bouton qui indique au navigateur de valider le formulaire (généralement pour l'envoyer à un serveur)
• <textarea> — similaire au champ de saisie <text> mais permet d'afficher et de saisir plusieurs lignes de texte
• <select> — une liste déroulante qui affiche une liste d'éléments parmi lesquels un utilisateur peut en choisir une

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

• une zone de texte vous demandant votre nom
• deux boutons radio vous demandant de choisir entre les valeurs de genre
• une liste déroulante vous donnant une liste de couleurs d'yeux à choisir
• deux cases à cocher pour des caractéristiques physiques
• une zone de texte pour décrire votre capacité athlétique
• un bouton d'envoi pour envoyer les valeurs actuelles du formulaire au serveur

Ces éléments de base fournissent les éléments d'interface graphique (GUI) les plus courants, mais pas tous. Par exemple, il n'y a pas d'équivalent à une arborescence ou à une grille.

Une vue de grille, cependant, peut être imitée en utilisant un tableau HTML standard avec chaque cellule contenant un élément de saisie de texte. Une vue arborescente peut également être reproduite via des tables imbriquées ou, plus sémantiquement de manière appropriée, des 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 de l'utilisateur dans le navigateur. Les implémentations de ces éléments d'interface sont disponibles via des bibliothèques JavaScript telles que jQuery.

HTML 4 a introduit la balise <label>, 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'attribut id du contrôle dans l'attribut for la balise label. Cela permet aux étiquettes de rester avec leurs éléments lorsqu'une fenêtre est redimensionnée et de permettre plus de fonctionnalités de type bureau (par exemple, cliquer sur un bouton radio ou l'étiquette d'une case à cocher activera l'élément d'entrée associé).

HTML 5 introduit un certain nombre de balises d'entrée qui peuvent être représentées par d'autres éléments d'interface. Certains sont basés sur des champs de saisie de texte et sont destinés à saisir et valider des données communes spécifiques. Il s'agit notamment de <email> pour saisir les adresses e-mail, <tel> pour les numéros de téléphone, <number> pour les 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 qui 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 étaient devenues si courantes que leur prise en charge a été ajoutée à la norme. Le type d'entrée <date> affiche un calendrier à partir duquel l'utilisateur peut sélectionner une date ou une plage de dates. Et le type d'entrée de <color> peut être représenté comme un texte d'entrée vérifiant simplement que la valeur entrée est une représentation hexadécimale correcte d'une couleur, selon la spécification, ou un widget de sélecteur de couleur (ce dernier étant la solution utilisée dans la plupart des navigateurs qui prennent en charge cet attribut).

Soumission

Lorsque des données saisies dans des formulaires HTML sont soumises, les noms et les valeurs des éléments de formulaire sont encodés et envoyés au serveur dans un message de requête HTTP à l'aide de GET ou POST. Historiquement, un transport de courrier électronique était également utilisé. Le type MIME par défaut, application/x-www-form-urlencoded, est basé sur une version très ancienne des règles générales de codage en pourcentage d'URI, avec un certain nombre de modifications telles que la normalisation des retours à la ligne et le remplacement des espaces par "+" au lieu de "%20". Un autre encodage 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.

Utilisation avec les langages de programmation

Les formulaires sont généralement associés à des programmes écrits dans divers langages de programmation pour permettre aux développeurs de créer des sites Web dynamiques. Les langages les plus populaires incluent 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 une fonctionnalité de gestion des chaînes plus puissante que les langages de programmation tels que C, et ont également une gestion automatique de la mémoire qui aide à empêcher attaques par débordement de tampon.

Côté client

Le langage de script côté client pour les sites Web est JavaScript. L'utilisation de JavaScript sur le modèle d'objet de document (DOM) conduit à la méthode de 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 conjointement avec les formulaires soient limités, ils peuvent souvent servir à effectuer une pré-validation des 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 input et l'attribut required de HTML5.

Le code côté serveur peut effectuer un vaste assortiment de tâches pour créer des sites Web dynamiques que, pour des raisons techniques ou de sécurité, le code côté client ne peut pas — de l'authentification d'une connexion, à la récupération et au stockage des données dans une base de données, à la vérification orthographique, à l'envoi d'un e-mail. Un avantage significatif de l'exécution côté serveur par rapport au 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 entraîne souvent 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. Un inconvénient 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 les ordinateurs des utilisateurs.

Formulaire d'inscription du logiciel de boutique en ligne de commerce électronique basé sur PHP ZenCart

Langues interprétées

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

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'attribut action de la balise form. Le fichier PHP cible accède ensuite aux données transmises par le formulaire via les variables PHP $_POST ou $_GET, selon la valeur de l'attribut method utilisé dans le formulaire. Voici un script PHP de gestionnaire de formulaire de base qui affichera le contenu du champ de saisie first-name sur la page :

form.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Form</title>
</head>
<body>
  <form action="form_handler.php">
    <p><label>Name: <input name="first-name" /></label></p>
    <p><button type="submit">Submit</button></p>
  </form>
</body>
</html>

form_handler.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Output</title>
</head>
<body>
  <?php
  // This will print whatever the user entered into the form.html page.
  $firstName = filter_input(INPUT_GET, "first-name", FILTER_SANITIZE_STRING);
  echo "Hello, ${firstName}!";
  ?>
</body>
</html>

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

Langage de programmation Perl

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 façon si 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 le mod_perl de Apache).

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

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

form_handler.pl

#!/usr/bin/env perl
use strict;
use CGI qw(:standard);

my $name = param("first-name");
print header;
print html(
  body(
    p("Hello, $name!"),
  ),
);

Scripts de formulaire à e-mail

Parmi les types de scripts côté serveur les plus simples et les plus couramment utilisés, il y a celui qui envoie simplement par e-mail le contenu d'un formulaire soumis. Cependant, ce type de script est fréquemment exploité par les spammeurs et bon nombre des scripts de formulaire à e-mail les plus populaires sont vulnérables au piratage dans le but d'envoyer des e-mails de spam. 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.

Générateurs de formulaires

Certaines entreprises proposent des formulaires en tant que service hébergé. Habituellement, 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. Les sociétés 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.

Histoire

Les formulaires HTML ont d'abord été implémentés par le navigateur Viola.

Voir aussi

• CAPTCHA
• Publication
• XForms
• HTML

Liens externes

• Formulaires dans les documents HTML, la page de spécifications du W3C pour les formulaires en HTML 4.
• Spécification des formulaires HTML5
• Wikilivres : Langage/Formulaires de balisage hypertexte
• Essayez les propriétés HTML.