Un formulaire est un élément en HTML car c'est ce qui nous permet de saisir des données et donc également interagir avec le Web et sa base de données, ce qui nécessite des contrôles du point de vue de la sécurité, car à partir d'un formulaire, nous pouvons envoyer des fichiers à un serveur, traiter une commande ou un paiement, sélectionner différents éléments et contrôles d'un formulaire, qui sera ensuite traité par un événement javascript ou par un autre langage de programmation Web.
Plusieurs fois, les développeurs doivent utiliser différentes bibliothèques pour pouvoir effectuer des tâches dans des formulaires afin de contrôler les événements et dans certains cas, nous devons recourir à des méthodes de code indésirables pour envoyer des données, contrôler ce qui est entré, éviter les injections de code ou les attaques XSS.
Si nous voulons effectuer tous ces contrôles et événements, nous pouvons trouver un grand nombre de fichiers javascript qui augmentent considérablement le poids du Web en ko et ralentissent la page. Il est également peu sûr car si quelqu'un désactive l'utilisation de Javascript, tous les contrôles cesseront de fonctionner.
Les éléments de formulaires et attributs en HTML5 fournissent un plus grand degré de contrôle et de balisage sémantique que sa version précédente, des attributs et des propriétés ont été ajoutés, ce qui élimine le besoin d'effectuer des contrôles en externe via des scripts. Les fonctionnalités des formulaires dans HTML5 offrent un meilleur contrôle et ne dépendent pas de l'activation ou de la désactivation de Javascript dans votre navigateur.
Attributs de formulaire HTML5 - Espace réservé
Au moyen du propriété d'espace réservé Nous pouvons indiquer un exemple du type de données à enregistrer, cela nous permet de fournir des informations à l'utilisateur pour servir de guide. Ce texte que nous indiquons dans le contrôle disparaîtra une fois que l'utilisateur aura saisi un caractère.
L'attribut placeholder ne peut être utilisé que dans des zones de texte ou dans des zones de texte.
Modèles avec des expressions régulières dans les formulaires
L'attribut pattern nous permet de définir nos règles pour valider les données que l'utilisateur entre à l'aide d'expressions régulières. Une expression régulière est une séquence de caractères qui définit un modèle de données, par exemple, le modèle [a-z] indique que l'utilisateur ne peut saisir que des lettres minuscules ou le modèle [0-9] indique que seuls des chiffres peuvent être saisis.
HTML5 vous permet d'utiliser des modèles, donc si les caractères saisis ne correspondent pas au modèle défini automatiquement, une erreur sera générée.
Nous allons définir des règles avec des modèles et des feuilles de style pour changer la couleur de la bordure si l'événement invalide se produit, c'est-à-dire que ce qui est entré par l'utilisateur n'est pas conforme à ce qui est défini dans un certain modèle.
Nous créons un fichier Example01.html et écrivons le code suivant :
Modèles avec des expressions régulières
Utilisateur
Mot de passe:
E-mail:
Date
Prix
Si nous envoyons le formulaire, il validera chaque champ par rapport au modèle défini et s'il n'est pas rempli, il affichera le message que nous définissons dans la balise title, il utilisera également les styles définis dans la règle et les propriétés CSS de la classe invalide utilisée par HTML5.
Par exemple, nous saisissons un e-mail incorrect :
Nous introduisons également une date incorrecte et constatons qu'elle ne permet pas d'envoyer le formulaire. Si nous voulons améliorer ou ajouter un effet visuel, nous pouvons utiliser CSS pour ajouter une icône d'arrière-plan dans le contrôle où l'échec se produit. Par exemple, nous ajoutons les styles css suivants à ceux que nous avions déjà, nous modifions l'entrée en input [type = 'text'] afin que les feuilles de style n'affectent que les zones de texte et non le bouton.
Nous utilisons les icônes suivantes :
À côté de chaque contrôle, nous ajoutons la propriété requise, par exemple :
Lors de l'exécution de l'exemple, nous pouvons voir que si nous envoyons le formulaire avec des champs vides, ils nous montreront les champs obligatoires et valides.
L'avantage des patterns est que nous n'utilisons pas JQuery ou tout autre type de validation et si cette option est désactivée dans le navigateur, les restrictions et règles que nous définissons continueront de fonctionner. Cela n'implique pas qu'en soumettant le formulaire, nous évitons les contrôles lors du traitement des données, que ce soit pour les enregistrer dans une base de données ou les envoyer par courrier ou exécuter toute opération.
Formulaire avec plusieurs soumissions
Quelque chose qui était complexe à faire est envoyer le même formulaire sur deux pages différentesSupposons un seul formulaire de connexion qui, lorsqu'un bouton est cliqué, ira à différentes pages où les requêtes et le processus d'information changent. Cela se fait en définissant le propriété formaction, où nous indiquons une autre option de traitement à l'action par défaut.
Formulaire avec plusieurs soumissions
Utilisateur:
Mot de passe:
Il ne fait aucun doute que l'interaction avec ces types de propriétés et d'attributs facilite grandement le développement de sites Web, sans avoir à utiliser des bibliothèques externes et des codes javascript complexes.
En tant que concepteurs et développeurs, nous trouvons généralement qu'un script a une certaine monotonie pour structurer le html et le valider, notamment pour écrire des règles de validation et ensuite montrer à l'utilisateur en cas d'échec. HTML 5 introduit ces nouveaux attributs, types d'entrée et autres éléments de sorte que nous devons écrire moins de code et nous concentrer davantage sur la sémantique que sur la syntaxe.
Ces règles fonctionnent dans tous les navigateurs, indépendamment du système d'exploitation et nous n'avons pas besoin d'utiliser d'autres bibliothèques ou hacks pour nous adapter à différents systèmes ou appareils. Nous avons vu plusieurs attributs de formulaire qui aident à améliorer l'expérience utilisateur et à gagner du temps de développement. Certains attributs ne fonctionnent pas encore dans tous les navigateurs.
