Pour organiser le transfert des données vers le serveur à l'aide d'un formulaire, vous devrez mettre en place un formulaire HTML dans lequel les visiteurs du site entreront leurs informations et un code PHP dont le but est d'accepter et de traiter les données reçues sur le serveur.

Formulaire de soumission HTML

Le formulaire sur la page est formé par des balises

...

, à l'intérieur duquel sont placées les balises des champs de saisie informations textuelles, des balises de composant personnalisées (par exemple, une zone de liste déroulante), des balises pour la zone de sélection et le téléchargement de fichier .

* Pour HTML5, il est également possible de placer des balises de champ de formulaire non pas à l'intérieur des balises de formulaire, mais n'importe où sur la page. En même temps, pour chacun de ces champs, l'attribut "form" doit être spécifié afin de déterminer avec quelle forme de soumission il doit interagir.

Ainsi, la soumission de formulaire la plus simple peut contenir le code suivant :

Une valeur:
Valeur B :

Les éléments de formulaire et leurs paramètres :

action="monformulaire.php"– l'attribut "action" détermine quel fichier php traitera les données envoyées. Dans cet exemple, les données seront envoyées dans le fichier "myform.php" situé dans le même répertoire que la page du formulaire. Si cet attribut n'est pas spécifié explicitement, les données du formulaire seront envoyées à l'adresse de la page du formulaire lui-même.

méthode="poster"– le paramètre method définit la méthode de transfert de données POST ou GET. Plus d'informations à ce sujet dans l'article "Différences entre les méthodes POST et GET" . Si vous ne spécifiez pas explicitement l'attribut, la méthode GET sera utilisée par défaut.

Texte "Valeur A :" et "Valeur B :" ajouté uniquement à des fins de conception et de compréhensibilité du formulaire pour l'utilisateur. Il n'est pas nécessaire de l'ajouter pour le transfert de données, mais pour que l'utilisateur comprenne ce qu'il faut saisir, cela vaut la peine de le préciser.

Mots clés sont utilisés pour former divers contrôles de formulaire.

type="texte"– l'attribut "type" définit le type du champ. Selon le type spécifié, le apparenceélément et son objectif. La valeur de l'attribut "text" spécifie que l'élément sera affiché dans le navigateur sous la forme d'un champ de texte d'une seule ligne dans lequel l'utilisateur peut saisir sa chaîne.

nom="données1"– l'attribut "name" indique le nom, ou plutôt l'index des données du tableau reçu par le serveur. Il s'agit d'un paramètre obligatoire, par lequel dans le gestionnaire php, il sera alors possible d'accéder à la valeur passée. Le nom peut être choisi arbitrairement, cependant, il est plus pratique lorsque cette valeur a une signification claire.

type="soumettre"- étiqueter avec cette valeur du paramètre "type" sera affiché sur la page sous forme de bouton. En fait, vous pouvez vous passer d'un bouton sur le formulaire. Si, par exemple, il y a des champs de texte dans le formulaire, l'envoi peut se faire en appuyant simplement sur "Entrée" sur le clavier. Mais avoir un bouton rend le formulaire plus clair.

valeur="(!LANG:Soumettre" !}– dans ce cas (pour type="submit"), il définit uniquement la légende du bouton. Pour type="text", par exemple, ce sera le texte qui sera affiché dans le champ texte.

En conséquence, sur la page, ce code ressemblera à ceci :

Une valeur:
Valeur B :

En cliquant sur le bouton, les données seront envoyées à la page spécifiée, et si elle existe et fonctionne correctement, les données seront traitées.

Traitement des données soumises par formulaire HTML en PHP

Les données envoyées de la manière décrite sont placées dans tableaux superglobaux$_POST, $_GET et $_REQUEST. $_POST ou $_GET contiendra des données en fonction de la méthode envoyée. $_REQUEST contient des données soumises par l'une des méthodes spécifiées.

$_POST, $_GET et $_REQUEST sont des tableaux associatifs dont les champs d'index correspondent aux attributs "name" des balises . Par conséquent, pour travailler avec des données dans le fichier myform.php, vous pouvez affecter valeurs variableséléments d'un tel tableau, en spécifiant le nom du champ comme index :

// pour la méthode GET
$a = $_GET[ "données1" ] ;
$b = $_GET[ "données2"] ;

// pour la méthode POST
$a = $_POST[ "données1" ] ;
$b = $_POST[ "données2"] ;

// avec n'importe quelle méthode
$a = $_REQUEST[ "données1" ] ;
$b = $_REQUEST[ "données2"] ;

Vérification du remplissage des champs du formulaire

Parfois, lors de la réception de données, vous devez vérifier si l'utilisateur a soumis un formulaire vide. Vous pouvez utiliser la fonction vide pour cela.

si (vide ($_REQUEST["data1" ])) (
écho "Le champ n'est pas rempli";
} autre(
écho "Le champ était rempli";
$a = $_REQUEST[ "données1" ] ;
}

Généralement cette solution est suffisante. Si vous devez saisir du texte, il sera clair s'il est saisi ou non. Cependant, si l'utilisateur entre intentionnellement zéro pour le calcul, la fonction vide indiquera qu'il n'y a pas de valeur. Par conséquent, pour de telles situations, il est préférable d'utiliser la fonction isset. Il vérifiera explicitement si la valeur est définie ou non.

if (isset ($_REQUEST["data1" ])) (
écho "Le champ était rempli";
$a = $_REQUEST[ "données1" ] ;
} autre(
écho "Le champ n'est pas rempli";
}

Formulaires HTML. Tableaux $_POST et $_GET

Formulaires HTML. Méthodes d'envoi de données au serveur

Vous avez probablement déjà rencontré des formulaires HTML :

Entrez votre nom:

En enregistrant ce code dans un fichier HTML et en le visualisant avec votre navigateur préféré, vous verrez un formulaire HTML familier :

Entrez votre nom:

Étiqueter

, qui a une balise de fin appariée

, définit en fait le formulaire. Ses attributs sont tous deux facultatifs :

• action - Spécifie l'URL (complète ou relative) à laquelle le formulaire sera soumis. Si cet attribut n'est pas spécifié, la plupart des navigateurs (plus précisément, tous les navigateurs que je connais) soumettent le formulaire au document courant, c'est-à-dire "à lui-même". C'est un raccourci pratique, mais la norme HTML requiert l'attribut action.
• méthode - comment le formulaire est soumis. Il y a deux d'entre eux.
  • GET - envoie les données du formulaire dans la barre d'adresse.
    Vous avez peut-être remarqué sur divers sites la présence du symbole "?" à la fin de l'URL. suivi de données au format paramètre=valeur. Ici "paramètre" correspond à la valeur de l'attribut name des éléments du formulaire (voir ci-dessous à propos de la balise ), et "value" - au contenu de l'attribut value (par exemple, il contient l'entrée de l'utilisateur dans le champ de texte de la même balise ).
    Par exemple, essayez de rechercher quelque chose dans Yandex et faites attention à la barre d'adresse de votre navigateur. C'est la méthode GET.
  • POST - les données du formulaire sont envoyées dans le corps de la requête. Si ce n'est pas tout à fait clair (ou complètement incompréhensible) de quoi il s'agit - ne vous inquiétez pas, nous reviendrons bientôt sur ce problème.
  Si l'attribut method n'est pas spécifié, GET est supposé.

Étiqueter - spécifie l'élément de formulaire défini par l'attribut type :

• La valeur "texte" spécifie un champ de saisie de texte sur une seule ligne
• La valeur "soumettre" spécifie le bouton qui, lorsqu'il est cliqué, soumet le formulaire au serveur

D'autres valeurs sont possibles (et n'est pas la seule balise qui définit un élément de formulaire).

Que se passe-t-il lorsque nous cliquons sur le bouton "OK" ?

1. Le navigateur examine les éléments inclus dans le formulaire et génère des données de formulaire à partir de leurs attributs de nom et de valeur. Disons que le nom Vasya est entré. Dans ce cas, les données du formulaire sont name=Vasya&okbutton=OK
2. Le navigateur établit une connexion avec le serveur, envoie une demande au serveur pour le document spécifié dans attribut d'actionétiqueter
   , en utilisant la méthode de soumission de données spécifiée dans l'attribut method (dans ce cas, GET), en transmettant les données du formulaire dans la requête.
3. Le serveur analyse la requête reçue, génère une réponse, l'envoie au navigateur et ferme la connexion
4. Le navigateur affiche le document reçu du serveur

L'envoi manuel de la même requête (à l'aide de telnet) ressemble à ceci (supposons que Nom de domaine site - www.exemple.com) :

Telnet www.example.com 80 GET /cgi-bin/form_handler.cgi?name=Vasya&okbutton=OK HTTP/1.0\r\n Hôte : www.example.com\r\n \r\n

Comme vous l'avez peut-être déjà deviné, cliquer sur un bouton d'envoi sur un formulaire avec une méthode d'envoi "GET" revient à entrer l'URL appropriée (avec un point d'interrogation et les données du formulaire à la fin) dans la barre d'adresse du navigateur :

http://www.example.com/cgi-bin/form_handler.cgi?name=Vasya&okbutton=OK

En fait, la méthode GET est utilisée chaque fois que vous demandez un document au serveur en saisissant simplement son URL ou en cliquant sur un lien. Utilisant , l'URL est simplement ajoutée avec un point d'interrogation et des données de formulaire.

Peut-être que tous ces détails techniques et exercices avec telnet vous paraissent incroyablement ennuyeux et même inutiles ("qu'est-ce que PHP a à voir avec ça ?"). Mais en vain. :) C'est la base du travail sur Protocole HTTP, que chaque programmeur Web doit connaître par cœur, et ce n'est pas une connaissance théorique - tout cela sera utile dans la pratique.

Remplaçons maintenant la première ligne de notre formulaire par ce qui suit :

Nous avons spécifié la méthode d'envoi "POST". Dans ce cas, les données sont envoyées au serveur d'une manière légèrement différente :

Telnet www.example.com 80 POST /cgi-bin/form_handler.cgi HTTP/1.0\r\n Host : www.example.com\r\n Content-Type : application/x-www-form-urlencoded\r\ n Content-Length : 41263\r\n \r\n name=Vasya&okbutton=OK

Lors de l'utilisation de la méthode POST, les données du formulaire sont envoyées après les "deux entrées" - dans le corps de la requête. Tout ce qui précède est en fait l'en-tête de la requête (et lorsque nous utilisions la méthode GET, les données du formulaire étaient envoyées dans l'en-tête). Pour que le serveur sache sur quel octet finir de lire le corps de la requête, la ligne Content-Length est présente dans l'en-tête ; sur le fait que les données du formulaire seront transmises sous la forme parameter1=value1¶meter2=value2... , et les valeurs sont transmises sous la forme d'urlencode - c'est-à-dire de la même manière qu'avec la méthode GET, mais dans le corps de la requête - l'en-tête Content informe le serveur - Type : application/x-www-form-urlencoded .

L'avantage de la méthode POST est qu'il n'y a pas de limite à la longueur de la chaîne de données du formulaire.

Avec la méthode POST, il n'est pas possible de soumettre le formulaire simplement en « suivant le lien », comme c'était le cas avec GET .

Lorsque vous utilisez un formulaire POST, dans son attribut action, vous pouvez spécifier les paramètres du formulaire GET après le point d'interrogation. De cette façon, Méthode POST inclut la méthode GET.

Tableaux $_GET et $_POST

Ainsi, les formulaires sont le principal moyen d'échanger des données entre un serveur Web et un navigateur, c'est-à-dire qu'ils permettent une interaction avec l'utilisateur - en fait, à quoi sert la programmation Web.

Prenons un exemple simple :

si ($_SERVER [ "REQUEST_METHOD" ] == "POST" ) (
écho "

Hey, " . $_POST [ "nom" ] . "

!" ;
}
?>
">
Entrez votre nom:

Le formulaire affiché aux lignes 8 à 12 contient deux éléments : name et okbutton . L'attribut method spécifie la méthode de soumission du formulaire POST, tandis que l'attribut action, qui indique l'URL à laquelle le formulaire est soumis, est renseigné avec la valeur de la variable serveur PHP_SELF, l'adresse du script en cours d'exécution.

- forme abrégée pour .

Supposons que nous saisissions la valeur Vasya dans le champ du nom et que nous cliquions sur le bouton OK. Le navigateur envoie alors une requête POST au serveur. Corps de la requête : name=Vasya&okbutton=OK . PHP remplit automatiquement le tableau $_POST :

$_POST [ "nom" ] = "Vasya"
$_POST [ "okbouton" ] = "OK"

En fait, la valeur "Vasya" est envoyée par le navigateur sous forme de urlencode ; pour le codage Windows-1251, cette valeur ressemble à %C2%E0%F1%FF . Mais comme PHP effectue automatiquement le décodage nécessaire, nous pouvons "oublier" cette fonctionnalité - jusqu'à ce que nous devions travailler manuellement avec les requêtes HTTP.

Étant donné que le corps de la requête ne spécifie que des noms et des valeurs, et non des types d'éléments de formulaire, PHP n'a aucune idée si $_POST["name"] correspond à une chaîne d'entrée, un bouton ou une liste. Mais nous n'avons pas vraiment besoin de ces informations. :)

Comme nous n'avons pas besoin de savoir ce qui est écrit sur le bouton d'envoi, à la ligne 11, nous pouvons supprimer l'attribut name, en raccourcissant la description du bouton en . Dans ce cas, le navigateur enverra une requête POST name=Vasya.

Et maintenant - la même chose, mais pour le formulaire GET :

si (isset($_GET [ "nom" ])) (
écho "

Hey, " . $_GET [ "nom" ] . "

!" ;
}
?>

">
Entrez votre nom:

A la ligne 8 on aurait tout aussi bien pu écrire

: GET est la méthode par défaut. Cette fois, le navigateur envoie une requête GET, ce qui équivaut à entrer l'adresse dans la barre d'adresse : http://site-address/script-name.php?name=Vasya.

PHP fait exactement la même chose avec les formulaires GET qu'avec POST , à la différence que le tableau $_GET est rempli.

La différence cardinale est à la ligne 4. Étant donné que la simple saisie de l'adresse dans la ligne du navigateur est une requête GET, la vérification if ($_SERVER["REQUEST_METHOD"] == "GET") n'a aucun sens. Par conséquent, nous avons recours à la construction isset(), qui renvoie true si la variable donnée est définie (c'est-à-dire qu'une valeur lui a été attribuée) et false si la variable n'est pas définie. Si le formulaire a été rempli - comme vous l'avez déjà compris, PHP attribue automatiquement à $_GET["nom"] la valeur appropriée.

La méthode de vérification isset() est universelle, elle peut également être utilisée pour un formulaire POST. De plus, c'est préférable, car cela permet de savoir exactement quels champs du formulaire sont remplis.

Un exemple un peu plus complexe.

echo "Veuillez entrer un nom !
" ;
< 1900 || $_POST [ "year" ] > 2004 ) {
écho
" ;
) autre (

" ;

écho "Vous" . $âge. " ans
" ;
}
écho "

---

" ;
}
?>
">
Entrez votre nom:


Saisissez votre année de naissance :

Aucune nouvelle astuce n'est utilisée ici. Comprendre, exécuter le code, essayer de modifier...

Modifions le dernier exemple pour que l'utilisateur n'ait pas à remplir les champs. Pour ce faire, remplissons les attributs de valeur des éléments du formulaire avec les valeurs que nous venons de saisir.

$nom = isset($_POST [ "nom" ]) ? $_POST [ "nom" ] : "" ;
$année = isset($_POST [ "année" ]) ? $_POST [ "année" ] : "" ;

Si (isset($_POST [ "nom" ], $_POST [ "année" ])) (
si ($_POST [ "nom" ] == "" ) (
echo "Veuillez entrer un nom !
" ;
) sinon si ($_POST [ "année" ]< 1900 || $_POST [ "year" ] > 2004 ) {
écho "Entrez l'année de naissance ! Plage valide : 1900..2004
" ;
) autre (
echo "Bonjour, " . $_POST [ "nom" ] . " !
" ;
$age = 2004 - $_POST["année"] ;
écho "Vous" . $âge. " ans
" ;
}
écho "

---

" ;
}
?>

">
Entrez votre nom:


Saisissez votre année de naissance :

Les lignes 4 et 5 peuvent s'avérer quelque peu incompréhensibles, c'est très simple : la ligne 4 pourrait s'écrire ainsi :

si (isset($_POST [ "nom" ]))
$nom = $_POST["nom"] ;
autre
$nom = "" ;

La question peut se poser - pourquoi ne pas jeter les lignes 4-5 et écrire :

Entrez votre nom: ">

Saisissez votre année de naissance : ">

En effet, si ces variables POST ne sont pas définies - et elles le seront si le formulaire n'est pas encore rempli - PHP émettra des avertissements sur l'utilisation de variables non initialisées (et, à juste titre : un tel message permet de retrouver rapidement fautes de frappe difficiles à trouver dans les noms de variables, et met également en garde contre d'éventuels "trous" sur le site). Vous pouvez, bien sûr, mettre le code isset directement dans le formulaire, mais cela s'avérera trop lourd.

J'ai compris? Essayez maintenant de trouver l'erreur dans le code ci-dessus. Eh bien, pas tout à fait une erreur - mais un défaut.

htmlspecialchars()

Vous ne l'avez pas trouvé ? Je vais demander. Entrez, par exemple, un guillemet double dans le champ "nom" et du texte, par exemple, Vasya. Soumettez le formulaire et jetez un œil au code source de la page reçue. La quatrième ligne ressemblera à :

Entrez votre nom:

C'est-à-dire rien de bon. Et si un utilisateur rusé saisit un code JavaScript ?

Pour résoudre ce problème, vous devez utiliser la fonction htmlspecialchars(), qui remplacera les caractères de service par leur représentation HTML (par exemple, un guillemet avec ") :

$nom = isset($_POST [ "nom" ]) ? htmlspecialchars ($_POST [ "nom" ]) : "" ;
$année = isset($_POST [ "année" ]) ? htmlspecialchars ($_POST [ "année" ]) : "" ;

Si (isset($_POST [ "nom" ], $_POST [ "année" ])) (
si ($_POST [ "nom" ] == "" ) (
echo "Veuillez entrer un nom !
" ;
) sinon si ($_POST [ "année" ]< 1900 || $_POST [ "year" ] > 2004 ) {
écho "Entrez l'année de naissance ! Plage valide : 1900..2004
" ;
) autre (
echo "Bonjour, " . $nom . " !
" ;
$age = 2004 - $_POST["année"] ;
écho "Vous" . $âge. " ans
" ;
}
écho "

---

" ;
}
?>

">
Entrez votre nom:


Saisissez votre année de naissance :

Répétez l'expérience et assurez-vous que le code HTML est maintenant correct.

N'oubliez pas que la fonction htmlspecialchars() doit être utilisée chaque fois que le contenu d'une variable susceptible de contenir des caractères spéciaux HTML est affiché.

phpinfo()

La fonction phpinfo() est l'une des fonctions les plus importantes de PHP. Il affiche des informations sur les paramètres PHP, les valeurs des différentes variables de configuration...

Pourquoi est-ce que je le mentionne dans un article sur les formulaires ? phpinfo() est l'outil de débogage le plus pratique. phpinfo() affiche, entre autres, les valeurs de toutes les variables $_GET , $_POST et $_SERVER . Donc, si une variable de formulaire est "perdue", le moyen le plus simple de découvrir ce qui ne va pas est d'utiliser la fonction phpinfo(). Pour que la fonction n'affiche que les valeurs des variables (et vous n'avez pas à faire défiler une dizaine de pages), il faut l'appeler comme suit : phpinfo(INFO_VARIABLES); , ou - ce qui revient exactement au même - phpinfo(32) ;.

">
Entrez votre nom:

phpinfo(32);
?>

Ou, par exemple, cette situation : vous voulez connaître l'adresse IP du visiteur. Vous vous souvenez que la variable correspondante est stockée dans le tableau $_SERVER, mais - pas de chance - vous avez oublié le nom exact de la variable. Encore une fois, nous appelons phpinfo(32); , recherchez votre adresse IP dans le tableau et trouvez-la - dans la ligne $_SERVER["REMOTE_ADDR"] .

De nombreuses applications Web utilisent des formulaires pour collecter des données et soumettre des données à un serveur. Les formulaires contiennent généralement plusieurs éléments permettant de saisir des données de différents types, telles que le nom, l'adresse, la date de naissance, l'adresse e-mail, etc. HTML prend en charge plusieurs types d'éléments d'entrée, notamment les champs de texte, les boutons radio et les cases à cocher. HTML5 ajoute des éléments plus spéciaux tels que l'e-mail, le champ de mot de passe, le sélecteur de couleurs, les widgets de date et d'heure, les curseurs.

L'exemple principal de ce guide contient les parties client et serveur. Le côté client utilise Polymer pour fournir une interface utilisateur (les formulaires contiennent de nombreux types d'éléments d'entrée) et une interface de synchronisation des données avec Dart. Le client et le serveur communiquent en utilisant certaines classes de diverses bibliothèques, notamment les flux, les contrats à terme, HttpRequest, etc. Le serveur utilise des en-têtes CORS pour activer les requêtes inter-domaines.

Commenter cet article s'appuie sur ce que vous avez lu dans Création de vos propres éléments , Utilisation du traitement dynamique des données de l'API Futures , et vous devez être familiarisé avec la bibliothèque Polymer, les contrats à terme, JSON et HttpRequest.

Informations générales sur les formulaires

Les formulaires ont une propriété action, qui est l'URL permettant d'envoyer les données du formulaire, et méthode qui spécifie comment les données doivent être envoyées. Les propriétés d'action et de méthode peuvent être définies directement dans le HTML, ou dans un cas plus complexe ou pour obtenir plus de contrôle, vous pouvez écrire du code Dart et utiliser les bibliothèques Dart pour exposer ces propriétés par programmation

Commençons par les bases, juste les formulaires HTML, pour comprendre les propriétés d'action et de méthode des éléments d'entrée et comprendre le comportement standard des formulaires. Le formulaire ci-dessous, entouré d'une balise

, est utilisé pour rechercher les données saisies par l'utilisateur dans Google. L'information est recherchée sur le site si la case est cochée (et sur Internet sinon). Cet exemple, nommé search_form, recherche par défaut des ressources "livre de recettes" utiles sur dartlang.org.

Voici le code HTML pour créer le formulaire :

…

Utilisation des attributs action et method.

Et voici le code HTML qui ajoute trois éléments d'entrée au formulaire - un champ de texte, un bouton d'envoi et une case à cocher.

Rechercher sur dartlang.org

La case à cocher est enveloppée dans une balise d'étiquette, vous pouvez donc cliquer à la fois sur la case elle-même et sur l'en-tête pour modifier la valeur.

Ce code HTML fournit un comportement automatique.

****

Crée un bouton spécial qui, lorsqu'il est cliqué, entraîne l'envoi des données du formulaire. En fonction des attributs d'action et de méthode, le bouton génère une demande et l'envoie au serveur à l'URL spécifiée.

**nom=q** **nom="sitesearch"**

définit le nom du champ de texte et le nom de la case à cocher.

Pour les éléments à l'intérieur d'un formulaire qui ont un nom, fournissez les données pour ce formulaire. Dans cet exemple, la valeur fournie par le champ de texte est la valeur de q, et la case à cocher fournit une valeur pour Recherche du site, ces deux paramètres font partie d'une URL valide pour une requête Google. Lorsque l'utilisateur clique sur le bouton, le nom et la valeur correspondante sont ajoutés à l'URL de recherche. Voici un exemple de requête :

http://www.google.com/search?q=Cookbook&sitesearch=dartlang.org

Cet exemple est entièrement construit sans aucun code Dart ou Javascript. Parce que c'est très simple, il peut utiliser le comportement normal du HTML : accessible au public et facile à former une URL, ainsi qu'une requête GET normale. Pour les formulaires contenant beaucoup de données ou pour une application Web qui communique avec un serveur spécialisé, vous devez généralement traiter le formulaire par programmation.

L'exemple suivant montre un formulaire plus complexe qui soumet par programmation des données au serveur à l'aide d'une requête POST.

L'exemple du slambook en particulier

Cette section comprend deux programmes comme exemples de base.

Le premier est un programme serveur classique appelé slambookserver qui écoute sur la machine locale sur le port 4040 et gère les requêtes POST et OPTIONS en créant des messages et en envoyant un accusé de réception au client. Le serveur utilise des en-têtes CORS pour permettre à l'application d'utiliser les requêtes envoyées par d'autres serveurs.

Le second est un programme client appelé slambook qui fournit un formulaire dans lequel l'utilisateur peut saisir des informations. Ce programme utilise Polymer pour doubler les données de liaison entre les éléments d'entrée et les variables Dart. Lorsque l'utilisateur clique sur le bouton, le code Dart convertit les données en une chaîne JSON, envoie une requête OPTIONS pour obtenir l'autorisation du serveur, puis envoie une requête POST pour envoyer les données. Lorsqu'une demande est reçue du serveur, elle est affichée au client.

Le schéma suivant montre la séquence de communication entre le serveur et le client dans cet exemple.

Essayez-le ! Entrez n'importe quelles données et cliquez sur le bouton envoyer.

Remarque sur les versions. L'application slambook est compatible avec polymer.dart 0.9.

La requête renvoie le message "Pas de serveur" car vous n'avez pas démarré le serveur sur votre machine. Réglons ça.

Démarrage du serveur

Le code source du programme serveur principal slambookserver.dart peut être téléchargé à partir des exemples du manuel

Exécutez le programme serveur à partir de la ligne de commande

% dart slambookserver.dart Écoute de GET et POST sur http://127.0.0.1:4040

Vous pouvez maintenant essayer à nouveau d'envoyer des données depuis l'application Slambook ci-dessus.

Commenter: Si un autre programme utilise déjà le port 4040, le serveur renverra un message d'erreur et terminera l'exécution. Le programme sur cette page s'attend à ce que slambookserver soit situé sur la machine locale, port 4040. Par conséquent, pour que l'application s'exécute, vous devez terminer l'autre processus et redémarrer slambookserver. Ou vous pouvez modifier le numéro de port dans le programme serveur et client. Évitez d'utiliser 3030 car Dart Editor l'utilise. Démarrez ensuite le client et le serveur sur votre machine locale.

Le reste de ce didacticiel explique le code serveur et client.

À propos du côté client, vous découvrirez :

Envoi des données du formulaire

Réinitialiser le formulaire

Utilisation de Polymer pour lier les données de formulaire

La partie serveur de cette section parlera de :

En-têtes CORS

Gestion des requêtes OPTIONS

Gestion des requêtes POST

Envoi des données du formulaire

Tout d'abord, regardons comment les données sont envoyées au serveur.

Rappelez-vous que l'exemple search_form était basé sur l'utilisation des attributs action et method pour définir la destination et la méthode de soumission du formulaire. Rappelez-vous également que l'exemple search_form repose sur le comportement automatique d'un bouton d'envoi personnalisé. D'autre part, l'exemple du slambook est directement impliqué dans le processus de soumission :

Premièrement, ni l'action ni la méthode ne sont définies sous la forme

Deuxièmement, le bouton d'envoi a un gestionnaire de clic dans Dart

Troisièmement, le gestionnaire de clic remplace le comportement automatique du bouton d'envoi

Enfin, les données du formulaire sont envoyées au serveur à l'aide des bibliothèques Dart

Le formulaire dans l'exemple de slambook est représenté par un élément personnalisé tute-slambook-forme, qui est représenté par le code HTML suivant :

Notez l'absence des attributs action et method. Au lieu de cela, le comportement du bouton d'envoi est défini dans le gestionnaire de clic de bouton dans Dart. Vous trouverez ci-dessous le code HTML qui crée le bouton d'envoi et le lie à un gestionnaire Dart.

Et le code du gestionnaire de clic du bouton submitForm() lui-même :

Examinons chaque élément du code du gestionnaire

Annulation d'un gestionnaire par défaut

Cet événement n'a pas d'attributs action et méthode, le bouton d'envoi contient un comportement automatique qui n'est pas nécessaire dans l'exemple de slambook. Ainsi, la première ligne du code du gestionnaire appelle e.preventDefault() pour remplacer le comportement par défaut du bouton.

Void submitForm(Event e) ( e.preventDefault(); // Don"t do the default submit. … )

Configurer et envoyer une requête POST

La partie suivante du code crée un objet Demande HTTP. Ce code utilise new pour instancier un objet HttpRequest, qui est utilisé pour configurer et envoyer une requête POST. La classe HttpRequest a une fonction getString() correspondante afin que vous puissiez utiliser et envoyer des requêtes GET normales à une URL.

La ligne suivante fournit à l'objet HttpRequest une fonction de rappel appelée onData, qui est appelée lorsqu'une réponse est reçue du serveur. Nous verrons plus tard les détails de la déclaration de la fonction onData().

Important: Vous devez enregistrer une fonction de rappel avant d'envoyer une requête !

Demande = new HttpRequest(); request.onReadyStateChange.listen(onData); var URL = "http://127.0.0.1:4040" ; request.open("POST", URL); request.send(slambookAsJsonData());

Enfin, la fonction envoie les données du formulaire au serveur sous forme de chaîne JSON. Parfois, les données sont envoyées en morceaux. Mais cet exemple est suffisamment petit pour que les données soient envoyées en une seule fois. Cette requête est asynchrone, donc la méthode send() se terminera dès que la requête sera envoyée.

En attente d'une réponse du serveur

L'objet HttpRequest communique avec le serveur. Vous pouvez obtenir l'état en utilisant un champ readyState Objet HTTPRequest. L'état de préparation peut prendre cinq valeurs différentes : non envoyé (non envoyé), ouvert (ouvert), en-têtes reçus (en-têtes reçus), en cours de chargement (loading) et terminé (done). Lorsque l'état prêt change, HttpRequest déclenche un événement et le rappel onData() est appelé.

Rappeler la ligne de code dans laquelle le gestionnaire d'événements est enregistré onReadyStateChange:

Request.onReadyStateChange.listen(onData);

Le seul argument requis pour la méthode listen() est une fonction de rappel avec la signature : annuler onData(T). La méthode listen() vous permet également de spécifier trois arguments supplémentaires, comme un gestionnaire d'erreurs.

Ci-dessous se trouve la fonction de rappel onData() :

Void onData(_) ( if (request.readyState == HttpRequest.DONE && request.status == 200) ( // Données sauvegardées OK. serverResponse = "Server Sez: " + request.responseText; ) else if (request.readyState == HttpRequest.DONE && request.status == 0) ( // Le statut est 0... très probablement le serveur n'est pas en cours d'exécution. serverResponse = "Pas de serveur"; ) )

La première chose que le code indique est si la demande s'est terminée avec succès. Si tel est le cas, le contenu de la réponse est placé dans la ligne nommée serverResponse, qui est lié à la valeur de l'élément textarea de l'application slambook. Lorsqu'une chaîne est modifiée, l'interface utilisateur est automatiquement mise à jour et un message s'affiche pour l'utilisateur.

Si la demande est exécutée avec une erreur, le programme affichera dans serverResponse message d'erreur à afficher à l'utilisateur.

Réinitialiser les données du formulaire

Le bouton de réinitialisation est un élément d'entrée HTML spécial qui efface les valeurs saisies dans ce formulaire par défaut. Au lieu de cela, nous voulons que le bouton réinitialise les valeurs du formulaire à leurs valeurs d'origine. Par conséquent, le gestionnaire de clics du bouton de réinitialisation doit remplacer le comportement automatique et remplir les données de manière explicite.

Void resetForm(Event e) ( e.preventDefault(); favoriteThings["kittens"] = false; favoriteThings["raindrops"] = false; favoriteThings["mittens"] = false; favoriteThings["bouilloires"] = false; theData ["firstName"] = ""; theData["favoriteQuote"] = ""; theData["favoriteColor"] = "#FFFFFF"; theData["birthday"] = "2013-01-01"; theData["volume "] = "0" ; theData["catOrDog"] = "chat" ; theData["music"] = 0 ; theData["zombies"] = false ; serverResponse = "Réinitialisation des données."; )

Création d'un back end et écoute sur un port

Regardons maintenant le côté serveur, qui s'appelle slambookserver, il renvoie une réponse HTTP à la requête envoyée par l'application cliente slambook. Le code côté serveur est basé sur l'article [Utiliser Dart pour créer des services Web JSON (#)

Le serveur écoute sur le port 4040 sur la machine locale et ne traitera que les requêtes POST et OPTIONS. Les deux types de requêtes utilisent des en-têtes CORS pour autoriser l'accès. Pour les requêtes POST, le serveur renvoie un court message de confirmation qui inclut les données JSON qu'il a reçues de la requête.

Jetons un coup d'œil au code.

La fonction main() de l'application slambookserver est présentée en entier juste en dessous. En utilisant la classe HttpServer, l'application slambookserver commence à écouter sur le port 4040 de la machine locale après avoir appelé une fonction de niveau supérieur lier()

HÔTE final = "127.0.0.1" ; PORT final = 4040 ; void main() ( HttpServer.bind(HOST, PORT).then(gotMessage, onError: printError); )

La fonction bind() renvoie un futur qui peut être utilisé pour obtenir une valeur dans le futur (plus d'informations dans une minute). La fonction then() enregistre deux fonctions de rappel en tant que futur. La première fonction est gotMessage(), appelée lorsque le futur reçoit des valeurs. Seconde erreur d'impression Appelé lorsqu'une tentative de connexion échoue. Une erreur peut se produire, par exemple, si un autre programme écoute déjà le même port.

Filtrage des demandes et appel d'autres méthodes pour gérer chaque type de demande de fonctionnalité GotMessage() au dessous de.

Void gotMessage(_server) ( _server.listen((demande HttpRequest) ( switch (request.method) ( case "POST": handlePost(request); break; case "OPTIONS": handleOptions(request); break; default: defaultHandler( request); ) ), onError: printError); // Échec de l'écoute.print("Listening for GET and POST on http://$HOST:$PORT"); )

Pour gérer d'autres types de requêtes comme GET, vous pouvez simplement ajouter plus de valeurs à Cas Par example cas 'OBTENIR'.

Un peu sur les contrats à terme.

Examinons un peu les contrats à terme avant d'aborder le code de gestion des requêtes POST et OPTIONS.

Un futur représente un moyen d'obtenir une valeur à un certain moment dans le futur. Vous utilisez les contrats à terme pour empêcher un programme de se bloquer pendant qu'il attend des données, par exemple si un long calcul est nécessaire pour fournir une valeur, ou si une valeur doit être lue ou récupérée à l'aide d'E/S.

Lorsqu'une fonction qui renvoie un futur est appelée, deux choses se produisent.

La fonction est mise en file d'attente pour exécution et renvoie immédiatement un futur objet incomplet.

Plus tard, lorsque la valeur est reçue, le futur objet se termine avec la valeur reçue ou avec une erreur.

Pour obtenir la valeur renvoyée par le futur, utilisez la méthode ensuite() pour enregistrer un rappel.

Dans cet exemple, le côté client et le côté serveur utilisent des contrats à terme pour envoyer des requêtes et recevoir les réponses correspondantes. Les programmes client-serveur utilisent presque toujours des contrats à terme pour la communication et d'autres formes d'E/S asynchrones.

Gestion des requêtes OPTIONS

Avec une classe Demande HTTP, l'application cliente slambook envoie des requêtes lorsque l'utilisateur clique sur le bouton d'envoi. Vous avez vu le code plus tôt dans cet article.

Si le client et le serveur sont d'origine différente, ce qui est courant dans toutes les applications, une demande de contrôle en amont est envoyée avant le POST. La demande de contrôle en amont doit d'abord contenir une demande OPTIONS pour déterminer quelles demandes sont autorisées. La classe HttpRequest gère automatiquement les pré-requêtes OPTIONS. Vous n'avez plus besoin d'écrire du code côté client pour cela.

Le serveur reçoit la pré-requête OPTIONS avant de recevoir la requête principale. Voici le code de l'application slambookserver qui gère les requêtes OPTIONS.

Void handleOptions(HttpRequest req) ( HttpResponse res = req.response; addCorsHeaders(res); print("$(req.method): $(req.uri.path)"); res.statusCode = HttpStatus.NO_CONTENT; res. Fermer(); )

Ce code effectue les opérations suivantes :

Obtient l'objet HttpResponse qui s'occupe de l'envoi par le serveur d'une réponse au client

Ajoute des en-têtes CORS pour le contrôle d'accès

Imprime un message sur la console

Indique que la réponse n'a pas de contenu

Termine la réponse qui sera envoyée au client.

Lorsqu'un client reçoit une requête, l'en-tête CORS signale que les requêtes POST seront acceptées.

Personnalisation des en-têtes CORS

L'application serveur utilise la fonction suivante pour ajouter des en-têtes CORS pour les requêtes OPTIONS et POST à ​​la réponse CORS. La fonction ajoute trois en-têtes à la réponse du serveur Contrôle d'accès(qui sont inclus dans la HttpResponse).

Void addCorsHeaders(HttpResponse res) ( res.headers.add("Access-Control-Allow-Origin", "*, "); res.headers.add("Access-Control-Allow-Methods", "POST, OPTIONS" ); res.headers.add("Access-Control-Allow-Headers", "Origine, X-Requested-With, Content-Type, Accept"); )

Les deux premières lignes de l'en-tête CORS autorisent les requêtes POST et OPTIONS de n'importe quelle origine. Le troisième définit le type de requêtes POST et OPTIONS que le serveur autorise à accepter uniquement les requêtes avec certains en-têtes.

Gestion des requêtes POST

Voici une fonction qui gère les requêtes POST des clients.

Void handlePost(HttpRequest req) ( HttpResponse res = req.response; print("$(req.method): $(req.uri.path)"); addCorsHeaders(res); req.listen((List buffer) ( // Renvoie les données au client. res. write("Merci pour les données. C'est ce que je t'ai entendu dire : "); res. write(new String. fromCharCodes(buffer)); res. close (); ), onError: printError); )

Tout comme une requête OPTIONS, slambookserver prend l'objet de réponse HTTP de la requête, imprime un message sur la console et ajoute des en-têtes CORS à la réponse.

Ensuite, ce code écoute les données de la requête POST du client. Si tout les données sont prêtes, la fonction de rappel est appelée. Cette fonction est écrite au même endroit. L'argument de la fonction est une liste de nombres, y compris toutes les données. Chaque numéro est représenté par un code qui peut être représenté par un caractère UTF-16. Mais vous n'avez pas à vous en soucier, car vous pouvez simplement appeler la méthode String.fromCharCodes pour convertir en une chaîne régulière.

L'objet HttpResponse gère les flux de données que le serveur peut utiliser pour renvoyer des données au client. Dans la fonction de rappel, slambookserver écrit des messages et des données brutes dans ce flux sous forme de chaîne. Des serveurs plus sophistiqués feront quelque chose avec ces données, comme les stocker sur le serveur, les traiter ou peut-être même retirer de l'argent de votre compte bancaire.

Lorsque le flux est fermé, l'objet HttpResponse envoie des données au client.

L'exemple d'application client/serveur slambook peut servir de point de départ pour votre propre application client/serveur ou d'exemple de création de vos propres applications.

Voici un exemple de ce que le côté client doit faire.

Utilisez des formulaires pour collecter les données des utilisateurs.

Mettez des champs de saisie dans vos formulaires, pour des éléments de données individuels.

Utilisez Polymer pour les commentaires afin que les données du formulaire soient synchronisées avec le code Dart.

Envoyer les données directement (action et méthode des propriétés du formulaire)

Ou par programmation (en remplaçant le comportement par défaut du code Dart du bouton d'envoi)

Créez un objet de réponse sur le serveur à partir d'un objet HttpRequest.

Voici ce que le serveur doit faire.

Utilisez HttpServer pour configurer un serveur et écouter sur un port.

Traiter les réponses.

Utilisez les en-têtes CORS pour autoriser chaque requête.

La réponse à la requête utilise HttpResponse.

Traitez les données de manière asynchrone à l'aide de contrats à terme.

Utilisez des flux pour écrire des données dans la réponse.

Ces ressources sont principalement basées sur les bibliothèques Dart, qui fournissent un support pour l'écriture de clients et de serveurs. Notez qu'il existe deux classes HttpRequest : une dans fléchette:html(pour les clients) et deuxième fléchette: io(pour les serveurs).

Ressource	Bibliothèque	La description
Demande HTTP	fléchette:html	Requête HTTP côté client
Demande HTTP	fléchette: io	Côté serveur de la requête HTTP
Serveur HTTP	fléchette: io	La partie serveur qui gère la communication HTTP avec le serveur
HttpResponse	fléchette: io	Le backend qui s'occupe d'envoyer les réponses à la requête
Ruisseaux	fléchette : asynchrone	Flux de données
Futur	fléchette : asynchrone	Un moyen d'obtenir des données de manière asynchrone
JSON	fléchette:convertir	Déclaration de conversion JSON par défaut
Polymère	Polymère	Données des éléments personnalisés associés au modèle

Liaison de données bidirectionnelle à l'aide de Polymer

L'exemple de slambook utilise Polymer pour renvoyer la valeur d'un élément d'entrée avec des variables Dart. Si l'utilisateur modifie la valeur d'un élément d'entrée, la variable liée dans le code Dart change automatiquement. Ou si la valeur change dans le code Dart, l'objet d'élément personnalisé associé est automatiquement mis à jour. L'article Définir les éléments personnalisés fournira plus de détails sur la liaison de données et Polymer.

Cet exemple utilise également une déclaration de gestionnaire d'événements pour intercepter et gérer les fonctions des éléments d'entrée.

En utilisant l'exemple de slambook, vous pouvez voir l'utilisation de la liaison de données bidirectionnelle pour divers éléments d'entrée, y compris les nouveaux éléments HTML5. Ce tableau regroupe tous les attributs bidirectionnels utilisables avec Polymer :

Utilisation des attributs valeur dans n'importe quel élément d'entrée

Attribut valeur fonctionne sur tous les éléments d'entrée et lie une valeur à une chaîne Dart. Cet exemple utilise valeur pour la barre, la saisie de texte, le sélecteur de couleur, le sélecteur de date et le sélecteur de plage.

(Notez que certains codes autour, par exemple a été supprimé pour rendre le code plus lisible)

Dictionnaire en code Dart nommé les données contient des données de formulaire. Le code objet du dictionnaire est mis en surbrillance avec @observable et appels toObservable() pour la reliure.

Le dictionnaire contient des paires clé/valeur pour chaque élément d'entrée, où la clé est une chaîne. Valeurs des éléments associés à valeur sont des chaînes. HTML fait référence aux éléments du dictionnaire en utilisant leurs noms (ID) dans Dart. Par exemple, la valeur d'un sélecteur de couleur est associée à theData['favoriteColor'].

Utilisation de selectedIndex dans un menu déroulant

Élément contient un ou plusieurs éléments , mais par défaut, un seul d'entre eux peut être sélectionné à la fois. La sélection d'un seul élément est généralement déclarée sous forme de liste déroulante. Vous pouvez utiliser l'attribut index sélectionné pour associer une variable Dart de type entier à une combobox. Le nombre affiche l'indice de l'élément sélectionné. L'indice commence à 0.

Usage vérifié dans les cases à cocher

Vous pouvez utiliser l'attribut vérifié une variable booléenne Dart avec une case à cocher séparée. Ici, chaque case à cocher est associée à une variable booléenne distincte.

Le formulaire lui-même est généralement conçu pour recevoir des informations de l'utilisateur pour un transfert ultérieur vers le serveur, où les données du formulaire sont reçues par le programme gestionnaire. Un tel programme peut être écrit dans n'importe quel langage de programmation côté serveur comme PHP, Perl, etc. L'adresse du programme est indiquée dans l'attribut action de la balise

comme le montre l'exemple 1.

Exemple 1 : Envoi de données de formulaire

HTML5 IE Cr Op Sa Fx

Dans cet exemple, les données du formulaire indiquées par l'attribut name (login et password ) seront transmises à un fichier dans /example/handler.php. Si l'attribut action n'est pas spécifié, alors le transfert se produit à l'adresse de la page courante.

Le transfert vers le serveur s'effectue avec deux méthodes différentes : GET et POST, pour définir la méthode dans la balise

l'attribut method est utilisé et ses valeurs sont les mots-clés get et post. Si l'attribut method n'est pas défini, les données sont envoyées par défaut au serveur à l'aide de la méthode GET. En tableau. 1 montre les différences entre ces méthodes.

La méthode utilisée est facile à déterminer par la barre d'adresse du navigateur. Si un point d'interrogation y apparaît et que l'adresse ressemble à ceci, alors c'est définitivement un GET.

http://www.google.ru/search?q=%D1%81%D0%B8%D1%81%D1%8C%D0%BA%D0%B8&ie=utf-8

La combinaison unique d'options dans la barre d'adresse identifie de manière unique la page, de sorte que les pages avec les adresses ?q=nœud/ajouter et ?q=nœud sont considérées comme différentes. Cette fonctionnalité est utilisée par les systèmes de gestion de contenu (CMS, système de gestion de contenu) pour créer de nombreuses pages du site. En réalité, un seul fichier est utilisé, qui reçoit une requête GET et, selon celle-ci, forme le contenu du document.

Voici les utilisations typiques de ces méthodes sur les sites Web.

AVOIR

Transfert de petites données textuelles vers le serveur ; Recherche du site.

Les moteurs de recherche, les formulaires de recherche de site sont toujours envoyés à l'aide de la méthode GET, cela vous permet de partager les résultats de la recherche avec des amis, d'envoyer un lien par courrier ou de le publier sur le forum.

PUBLIER

Envoi de fichiers (photos, archives, programmes, etc.) ; envoyer des commentaires ; ajouter et éditer des messages sur le forum, blog.

Le travail avec le formulaire par défaut se produit dans l'onglet actuel du navigateur, alors qu'il est permis de modifier ce paramètre lors de la soumission du formulaire et d'ouvrir le gestionnaire de formulaire dans un nouvel onglet ou dans un cadre. Ce comportement est spécifié par le « nom du contexte », qui est la valeur de l'attribut cible de la balise . Les valeurs populaires sont _blank pour ouvrir le formulaire dans une nouvelle fenêtre ou un nouvel onglet, et le nom du cadre, qui est donné par l'attribut name de la balise

Dans cet exemple, lorsque le bouton Soumettre est cliqué, le résultat de la soumission du formulaire s'ouvre dans un cadre nommé zone .

Les éléments de formulaire sont traditionnellement placés à l'intérieur d'une balise

, définissant ainsi les données qui seront transmises au serveur. En même temps, HTML5 a la capacité de séparer le formulaire de ses éléments. Ceci est fait pour plus de commodité et de polyvalence, de sorte qu'une mise en page complexe peut contenir plusieurs formulaires qui ne doivent pas se croiser, ou par exemple, certains éléments sont affichés à l'aide de scripts à un endroit sur la page, et le formulaire lui-même est situé dans un autre. La connexion entre le formulaire et ses éléments se fait dans ce cas par l'intermédiaire de l'identifiant du formulaire, et l'attribut du formulaire de valeur égale à cet identifiant doit être ajouté aux éléments (exemple 3).

Exemple 3 : Associer un formulaire à des champs

HTML5 IE Cr Op Sa Fx

Dans cet exemple, la balise

est identifié de manière unique par l'identifiant auth, et form="auth" est ajouté aux champs à soumettre via le formulaire. Dans le même temps, le comportement des éléments ne change pas, lorsque le bouton est cliqué, le login et le mot de passe sont envoyés au gestionnaire handler.php.

Bien que les paramètres de soumission de formulaire soient traditionnellement spécifiés dans la balise , ils peuvent également être déplacés pour former des boutons d'envoi ( et ). Pour cela, un ensemble d'attributs formaction , formmethod , formenctype et formtarget sont utilisés, qui sont des analogues des attributs correspondants sans le préfixe de formulaire. L'exemple 4 montre l'utilisation de ces attributs.

Exemple 4 Soumettre un formulaire

HTML5 IE Cr Op Sa Fx

Tous les nouveaux attributs de formulaire ne sont pas pris en charge par certains navigateurs, notamment Internet Explorer et Safari.

Alors, amis. Ceci est la dernière vidéo de la section sur l'apprentissage des formulaires HTML.

Dans le dernier didacticiel vidéo, nous avons compris les différences entre les méthodes GET et POST pour l'envoi de données. Et nous avons créé un fichier conçu pour traiter les données d'un formulaire HTML. Et pour terminer l'étude finale des formulaires, il nous reste à apprendre comment collecter et envoyer les données du formulaire.

Dans cette vidéo, nous parlerons du gestionnaire de données de formulaire, qui est exactement ce qui est nécessaire pour collecter des données à partir de champs de formulaire, puis les traiter. Dans cette vidéo, nous allons apprendre non seulement à collecter les données des champs, mais aussi à les envoyer par e-mail. Il n'y aura pas de fonctionnalités de traitement de données et autres. Nous utiliserons simplement l'option la plus simple pour collecter et envoyer des données. Nous enverrons les données à l'E-mail, que nous spécifions dans le gestionnaire. Ici, il convient de rappeler que le gestionnaire est un fichier au format php. Et puisque nous apprenons le HTML, nous parlerons très brièvement de PHP. Et considérons simplement un exemple spécifique d'envoi de données par e-mail.

Gestionnaire de formulaire.

Comme je l'ai mentionné ci-dessus, il s'agit d'un fichier au format PHP qui, à l'aide de diverses fonctions, variables et tableaux globaux, pourra collecter des données à partir du formulaire et les envoyer à notre boîte aux lettres. Nous allons considérer la version la plus simple et la plus primitive du gestionnaire de formulaire. Il ne fera aucune vérification sur le terrain et des trucs comme ça. La seule chose que nous vérifierons dans ce didacticiel vidéo est de savoir si une lettre avec des données de formulaire a été envoyée à notre courrier ou si quelque chose s'est mal passé.

Envoi de données par e-mail.

Le gestionnaire de données est un code PHP assez petit qui va prendre toutes les données des champs du formulaire, les traiter et nous les envoyer par mail.

Pour envoyer des données de formulaire au courrier, nous utiliserons la fonction de courrier. En utilisant la fonction, nous pouvons spécifier l'e-mail auquel toutes les données doivent être envoyées, l'objet de la lettre et le message lui-même, qui comprendra les données collectées à partir du formulaire.

Parlant en termes simples. C'est dans ce tutoriel vidéo. Nous verrons comment créer un formulaire de commentaires sur le site et le faire fonctionner. Et lorsqu'un visiteur veut nous écrire quelque chose, nous recevrons son message à l'adresse e-mail. Tout est assez simple en fait. Tout ce que vous avez à faire est de suivre le didacticiel sur l'apprentissage des formulaires HTML et de regarder cette vidéo pour apprendre à tout faire sur votre site.

Leçon vidéo : Gestionnaire de formulaires. Envoi de données par e-mail.

Les références HTML et autres matériaux peuvent et doivent être téléchargés !

Dans le prochain didacticiel vidéo, nous commencerons une nouvelle section sur la création de tableaux en HTML. Et nous saurons