Worldlex Wiki Un 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. Ces formulaires peuvent ressembler à des formulaires papier ou de base de données , car les internautes les remplissent à l'aide de cases à cocher , de boutons radio ou de champs de texte . Par exemple, on peut utiliser un formulaire pour saisir des informations de livraison ou de carte bancaire afin de commander un produit, ou encore pour obtenir des résultats de recherche sur un moteur de recherche .
Description
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 soumises, ainsi que la méthode de soumission des données .<form>GETPOST
Éléments
Les formulaires peuvent être composés d' éléments d'interface utilisateur graphique standard :
<button>— un bouton qui peut être associé à une action telle que la soumission du formulaire, la réinitialisation du formulaire ou l'exécution d'une fonction JavaScript.<input>— un élément destiné à la saisie par l'utilisateur. Cet élément varie selon la valeur de sontypeattribut.<textarea>— similaire au champ de saisie, sauf qu'il permet d'afficher et de saisir plusieurs lignes de données<text><textarea><select>— une liste déroulante affichant une liste d'éléments parmi lesquels un utilisateur peut sélectionner
L'élément d'entrée peut avoir les types suivants :
text— une simple zone de texte permettant la saisie d'une seule ligne de texte.email- un type qui nécessite une adresse e-mail partiellement validée<text>number- un type qui nécessite un nombre<text>password— De même , il est utilisé à des fins de sécurité, les caractères saisis étant invisibles ou remplacés par des symboles tels que *<text>tel— un numéro de téléphoneradio— un bouton radiofile— un contrôle de sélection de fichier pour le téléchargement d'un fichierreset— un bouton de réinitialisation qui, lorsqu'il est activé, indique au navigateur de rétablir les valeurs du formulaire actuel à leurs valeurs initiales.submit— un bouton qui indique au navigateur d'effectuer une action sur le formulaire (généralement l'envoyer à un serveur)
L'image d'exemple à droite illustre 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 proposant différentes couleurs d'yeux.
- Deux cases à cocher si elles vous concernent
- une zone de texte pour décrire vos aptitudes athlétiques
- un bouton d'envoi pour transmettre les valeurs actuelles du formulaire au serveur
Ces éléments de base constituent la plupart des éléments d'interface utilisateur graphique (IUG), mais pas tous. Par exemple, il n'existe pas d'équivalents à une vue arborescente ou à une vue en grille .
On peut toutefois simuler une vue en grille à l'aide d'un tableau HTML standard dont chaque cellule contient un champ de saisie de texte. Une vue arborescente peut également être simulée par des tableaux imbriqués ou, plus précisément , par des listes imbriquées . Dans les deux cas, un processus côté serveur traite les informations, tandis que JavaScript gère l'interaction avec l'utilisateur. Ces éléments d'interface sont implémentés dans des bibliothèques JavaScript telles que jQuery .
HTML 4 a introduit la balise `<li>`, destinée à représenter une légende dans une interface utilisateur et pouvant être associée à un contrôle de formulaire spécifique en spécifiant l' attribut `name` du contrôle dans l' attribut `name` de la balise `<li>`. Cela permet aux étiquettes de rester associées à leurs éléments lors du redimensionnement de la fenêtre et d'offrir un comportement plus proche de celui des applications de bureau (par exemple, cliquer sur l'étiquette d'un bouton radio ou d'une case à cocher activera l'élément d'entrée associé).<label>idfor
HTML5 introduit plusieurs types d'entrée pouvant être représentés par d'autres éléments d'interface. Certains sont basés sur des champs de saisie de texte et sont destinés à la saisie et à la validation de données courantes spécifiques. Il s'agit notamment emaildes adresses e-mail, teldes numéros de téléphone et numberdes valeurs numériques. Des attributs supplémentaires permettent de spécifier les champs obligatoires, les champs qui doivent avoir le focus clavier au chargement de la page web contenant le formulaire, et le texte d'espace réservé affiché dans le champ mais non saisissable par l'utilisateur (comme le texte « Rechercher » affiché dans de nombreux champs de recherche avant la saisie d'un terme de recherche). Ces tâches étaient auparavant gérées par JavaScript , mais leur utilisation étant devenue si courante, leur prise en charge a été intégrée à la norme. Le datetype d'entrée affiche un calendrier permettant à l'utilisateur de sélectionner une date ou une plage de dates. Ce type d'entrée peut également être représenté par un champ de texte vérifiant simplement que la valeur saisie est une représentation hexadécimalecolor correcte d'une couleur, conformément à la spécification, ou par un sélecteur de couleurs (cette dernière solution étant la plus courante dans les navigateurs prenant en charge cet attribut).
Soumission
Lors de la soumission de données saisies dans des formulaires HTML, les noms et les valeurs des éléments du formulaire sont encodés et envoyés au serveur via une requête HTTP (GET ou POST) . Historiquement, le transport par courrier électronique était également utilisé. Le type MIME par défaut , application/x-www-form-urlencoded , est basé sur une version ancienne des règles générales d'encodage URI en pourcentage , avec quelques modifications telles que la normalisation des sauts de ligne et le remplacement des espaces par des guillemets simples (" +") au lieu de %20guillemets doubles (" "). Un autre encodage possible, multipart/form-data , est également disponible et couramment utilisé pour les envois de fichiers via POST.
Utilisation avec les langages de programmation
Les formulaires sont généralement associés à des programmes écrits dans divers langages de programmation afin de permettre aux développeurs de créer des sites web dynamiques . Parmi les langages les plus populaires figurent 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 des chaînes de caractères plus robustes que les langages de programmation tels que le C, et qui disposent également d' une gestion automatique de la mémoire , ce qui contribue à prévenir les attaques par dépassement de 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 HTML dynamique qui permet la création et la modification dynamiques d'une page web au sein du navigateur.
Bien que les langages côté client utilisés avec les formulaires soient limités, ils peuvent souvent servir à la pré- validation des données et/ou à leur préparation avant envoi à un programme côté serveur. Cet usage est cependant progressivement remplacé par les nouveaux types de champs et attributs d' HTML5 .inputrequired
Exécution côté serveur
Le code côté serveur peut effectuer une multitude de tâches pour créer des sites web dynamiques, tâches que le code côté client ne peut pas réaliser pour des raisons techniques ou de sécurité : authentification, récupération et stockage de données dans une base de données, correction orthographique, envoi d’e-mails, etc. Un avantage majeur du code côté serveur par rapport au code côté client réside dans la concentration des fonctionnalités sur le serveur, évitant ainsi de dépendre des différents navigateurs web pour l’exécution de diverses fonctions de manière cohérente et standardisée . De plus, le traitement des formulaires sur un serveur renforce souvent la sécurité 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 validation HTML . Un inconvénient du code côté serveur est sa scalabilité : le traitement côté serveur pour tous les utilisateurs s’effectue sur le serveur, tandis que le traitement côté client s’effectue sur les ordinateurs des clients.
Langues interprétées
Parmi les langages interprétés couramment utilisés pour concevoir des formulaires interactifs dans le développement web, on trouve PHP , Python , Ruby , Perl , JSP , Adobe ColdFusion , et parmi les langages compilés couramment utilisés, on trouve 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' actionattribut `href` de la balise `<form>`. Le fichier PHP cible accède ensuite aux données transmises par le formulaire via des variables PHP $_POST, $_GETselon la valeur de l' methodattribut `href` utilisé dans le formulaire. Voici un exemple de script PHP de gestion de formulaire basique qui affichera le contenu du formulaire.< ! DOCTYPE html > < html lang = " en " > <head> <title> Formulaire </title> </head> <body> < form action = " form_handler.php " > <p> <label> Nom : < input name = " first_name " / > </label> </p> <p> < button type = " submit " > Envoyer </button> </p> </form> </body> </html>