Formulaire (HTML) - Form (HTML)

Un formulaire Web , 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 traitement. Les formulaires peuvent ressembler à des formulaires papier ou de base de données, car 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 les données d' expédition ou de carte de crédit pour commander un produit, ou peuvent être utilisés pour récupérer les résultats d'une recherche à partir d'un moteur de recherche .

La description

test
Exemple de formulaire. Le formulaire est enfermé dans un tableau HTML pour la mise en page visuelle.

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

Éléments

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

  • <text>— une simple zone de texte qui permet la saisie d'une seule ligne de texte.
  • <email>- un type de <text>qui nécessite une adresse e-mail partiellement validée
  • <number>- un type de <text>qui nécessite un nombre
  • <password>— similaire à <text>, il est utilisé à des fins de sécurité, dans lequel 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 à leurs valeurs initiales.
  • <submit>— un bouton qui indique au navigateur d'agir sur le formulaire (généralement pour l'envoyer à un serveur)
  • <textarea>— un peu comme le <text>champ de saisie, sauf que a <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'exemple d'image sur la droite montre la plupart de ces éléments :

  • une zone de texte demandant votre nom
  • une paire de boutons radio vous demandant de choisir votre sexe
  • une boîte de sélection vous donnant une liste de couleurs d'yeux à choisir
  • une paire de cases à cocher sur lesquelles cliquer si elles s'appliquent à vous
  • une zone de texte pour décrire votre capacité athlétique
  • un bouton de soumission pour l'envoyer 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'y a pas d'équivalents à une vue arborescente ou à une vue grille .

Une vue en 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 imitée à travers des tables imbriquées ou, de manière plus appropriée sémantiquement , 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 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' idattribut du contrôle dans l'attribut de la balise label for. Cela permet aux étiquettes de rester avec leurs éléments lorsqu'une fenêtre est redimensionnée et de permettre davantage de fonctionnalités similaires à celles d'un bureau (par exemple, cliquer sur un bouton radio ou sur 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 <email>d'entrer 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 clavier lorsque la page Web contenant le formulaire est chargée et le texte d'espace réservé qui est affiché dans le champ mais n'est pas une entrée 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 étaient devenues si courantes que leur prise en charge a été ajoutée à la norme. Le <date>type d'entrée affiche un calendrier à partir duquel l'utilisateur peut sélectionner une date ou une plage de dates. Et le colortype d'entrée peut être représenté comme un texte d'entrée en 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 sélecteur de couleur (ce dernier étant la solution utilisée dans la plupart des navigateurs qui prennent en charge cet attribut) .

Soumission

Lorsque les données saisies dans les formulaires HTML sont soumises, les noms et les valeurs des éléments du 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 (type de média Internet) , application/x-www-form-urlencoded , est basé sur une toute première version des règles générales de codage URI en pourcentage , 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 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.

Utilisation avec les langages de programmation

Les formulaires sont généralement combinés avec 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 permet d'éviter attaques par dépassement de mémoire tampon .

Côté client

Le langage de script côté client de facto pour les sites Web est JavaScript . L'utilisation de JavaScript sur le modèle 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 avec les formulaires soient limités, ils peuvent souvent servir à effectuer une pré- validation des données de formulaire et/ou à préparer les données de formulaire à envoyer à un programme côté serveur. Cette utilisation est toutefois remplacée par les nouveaux inputtypes de champs et requiredattribut de HTML5 .

Exécution côté serveur

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 de données dans une base de données , à la vérification orthographique , à l'envoi e-mail . Un avantage significatif 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 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 et inclut des techniques telles que la désinfection HTML . Un inconvénient du code côté serveur est l' évolutivité : le traitement côté serveur pour tous les utilisateurs s'effectue sur le serveur, tandis que le traitement côté client s'effectue sur des ordinateurs clients individuels.

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é dans l' actionattribut de la balise form. Le fichier PHP cible accède ensuite aux données transmises par le formulaire via PHP $_POSTou des $_GETvariables, selon la valeur de l' methodattribut utilisé dans le formulaire. Voici un script PHP de gestion de formulaire de base qui affichera le contenu duprénom champ de saisie sur la page :

formulaire.html 

<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>
<form action="form_handler.php">
Name: <input name="firstname" type="text">
<input type="submit" value="Submit">
</form>
</body>
</html>

gestionnaire_formulaire.php 

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

L'exemple de code ci-dessus utilise la fonction PHP pour nettoyer l'entrée de l'utilisateur avant de l'insérer sur la page. Le simple fait d'imprimer (faire écho) l'entrée de l'utilisateur au 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 a saisi le code JavaScript dans lefilter_input()<script>alert(1)</script>prénom champ, le navigateur exécuterait le script sur le gestionnaire_formulaire.phppage, comme si elle avait été codée par le développeur ; un code malveillant pourrait être exécuté de cette façon. a été introduit en PHP 5.2. Les utilisateurs de versions antérieures de PHP pouvaient utiliser la fonction ou des expressions régulières pour nettoyer l'entrée de l'utilisateur avant de faire quoi que ce soit avec. filter_input()htmlspecialchars()

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 Apache 's mod_perl ).

Les CGI Perl étaient autrefois un moyen très courant d'écrire des applications Web . Cependant, de nombreux hébergeurs Web ne prennent actuellement 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
use strict;
use CGI qw(:standard);

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

Scripts de formulaire vers e-mail

Parmi les types de script côté serveur les plus simples et les plus couramment utilisés, il y a celui qui envoie simplement par courrier électronique le contenu d'un formulaire soumis. Cependant, ce type de script est fréquemment exploité par les spammeurs , et bon nombre des scripts formulaire-à-e-mail les plus utilisés 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, de problèmes de sécurité et de difficultés 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 reporting 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 offrent 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.

Voir également

Les références

Liens externes