HTML5 - Formulaires avancés

Paramétrage de l'encodage des données
Nous savons que les formulaires envoient les données qu'ils collectent de l'utilisateur à une nouvelle page ou à lui-même, via le protocole http en utilisant l'une des méthodes telles que AVOIR ou alors PUBLIER. Il existe plusieurs façons d'encoder les données pour les envoyer via http, les types d'encodage possibles sont les suivants :

• application / x-www-form-urlencoded: C'est la méthode par défaut utilisée, elle ne peut pas être utilisée pour télécharger des fichiers sur le serveur.

• multipart / formulaire-données: Cette méthode est utilisée pour télécharger des fichiers sur le serveur.

• texte simple: Cette méthode dépend du navigateur, chacun la traite différemment.

Afin de voir un peu plus loin la différence entre les méthodes, nous devons créer un formulaire avec au moins deux champs afin que nous puissions voir les différents comportements.
Voyons le formulaire à créer :

 Exemple Soumettre Vote 

Codage application / x-www-form-urlencoded est celui qui est appliqué par défaut, c'est un encodage d'usage général est utilisé pour tout sauf le traitement des téléchargements de fichiers, sa particularité réside dans le fait qu'il utilise le format URL pour passer les paramètres, de sorte que notre formulaire une fois soumis, enverrait le Suivant information:

 fave = Pommes & nom = Leon + Ramirez 

On voit que les valeurs saisies par l'utilisateur sont affectées aux noms de nos champs, les caractères spéciaux seront remplacés par un équivalent en entité HTML et on voit que chaque paire de valeurs est séparée par un & de cette façon, nous savons quel domaine est le suivant.
Codage multipart / formulaire-données Il est beaucoup plus complexe et gère beaucoup plus d'éléments, c'est parce que c'est celui utilisé pour télécharger des fichiers, il doit donc envoyer les informations d'un fichier sous forme d'image, et pour cela il a cette structure :

 ------ WebKitFormBoundary2qgCsuH4ohZ5eObF Disposition du contenu : données de formulaire; name = "fave" Apple ------ WebKitFormBoundary2qgCsuH4ohZ5eObF Content-Disposition: form-data; name = "nom" Leon Ramirez ------ WebKitFormBoundary2qgCsuH4ohZ5eObF-- fave = Apple name = Leon Ramirez 

Codage texte simpleIl est géré par chaque navigateur de manière différente et n'est pas largement utilisé, sauf s'il s'agit d'une application spécifique dans un environnement contrôlé.
Attribut de saisie semi-automatique
Cet attribut est utile pour de nombreuses personnes qui n'aiment pas saisir les données les plus répétées sous une forme telle que le nom et le prénom ou l'e-mail, cependant il existe des applications beaucoup plus délicates telles que services bancaires sur Internet où nous avons besoin d'une confidentialité maximale dans l'introduction de nos données.
Pour contrôler cela, nous gérons l'attribut Saisie automatique, cela peut aller au niveau de la forme, ou au niveau de saisir, et a deux valeurs sur Oui désactivé, c'est-à-dire allumé ou éteint, comme vous l'avez peut-être déjà déduit quand il est allumé sur permet au navigateur de suggérer des données que l'utilisateur a préalablement saisies sous des formes similaires ou sous la même forme qu'il consulte, et lorsqu'il est en désactivé ne propose aucune suggestion. Voyons son application avec deux exemples très simples.

 Exemple Soumettre Vote 

 Exemple Soumettre Vote 

Dans notre premier exemple, nous voyons comment nous le retirons du formulaire entier, et dans le deuxième exemple, nous voyons comment nous le retirons également du formulaire entier, uniquement dans notre premier exemple. saisir on l'active, on pourrait aussi faire l'inverse et l'activer pour tout le formulaire, et désactiver un champ particulier.
Avec cela, nous concluons ce tutoriel, ayant les connaissances nécessaires pour rendre les formulaires un peu plus complexes, en plus de savoir comment ils fonctionnent en interne pour envoyer les données.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif