Table des matières
HTML5 intègre de nouveaux éléments pour faciliter la création de champs de données qui dans de nombreux cas devaient être programmés avec javascript ou ajouter une bibliothèque externe dans un langage qui permettrait d'étendre les capacités des éléments xhtml et html4.De nombreux programmeurs continuent de travailler de manière traditionnelle car ils sont pris en charge par la plupart des navigateurs, les dernières améliorations ne sont prises en charge que par les versions les plus récentes.
HTML5 propose un ensemble de nouveaux attributs pour l'attribut type de l'élément d'entrée, c'est-à-dire la plupart des éléments d'un formulaire, tels que les zones de texte.
Certains de ces attributs html bien connus sont :
Type de saisie = texte - Zone de texte
type d'entrée = mot de passe - Champ de mot de passe qui masque le mot de passe avec des astérisques.
Type d'entrée = soumettre - Bouton pour soumettre des formulaires
NUMERO TYPE ATTRIBUT REGISTRE
L'élément qui contient l'attribut numéro de type, permet non seulement de déterminer que la valeur saisie est numérique, mais aussi de la restreindre entre maximum et minimum, nous pouvons voir dans l'image comment il a également une validation sans avoir besoin de programmer quoi que ce soit
Numéro de typeATTRIBUT DE TYPE DE DATE (DATE)Numéro de type
Numéro de passage (1-40) :
L'attribut type date est utilisé pour les champs où il est nécessaire de contenir une date. Selon le navigateur et le support qu'ils offrent, le contrôle du calendrier apparaîtra pour pouvoir sélectionner une date.
L'attribut type de couleur est utilisé pour les champs où il est nécessaire de contenir une couleur. Selon le navigateur et le support qu'ils offrent, le contrôle de type colorpicker apparaîtra pour pouvoir sélectionner une couleur ou écrire la couleur en hexadécimal. Le sélecteur apparaîtra sous forme de pop-up lorsque la couleur est cliqué.
Type de couleur
Sélectionnez une couleur :
L'attribut email type est utilisé pour les champs où il est nécessaire de contenir un email. En fonction du navigateur et du support qu'ils proposent, il validera que le texte saisi a le format d'un email, sinon un message d'erreur apparaîtra, cela facilitera la validation d'un formulaire sans programmation.
Type d'e-mail
Entrez l'e-mail :
L'attribut url type est utilisé pour les champs où il est nécessaire de contenir un domaine, une url. Selon le navigateur et le support qu'ils proposent, il validera que le texte saisi a le format d'un domaine, mais un message d'erreur apparaîtra, cela facilitera la validation d'un formulaire sans programmation. Il n'a pas besoin de contenir http ou www, dans ce cas, si nous en avons besoin, nous devrons le valider par programmation.
Type d'URL
Entrez l'e-mail :
1. Attribut de saisie semi-automatique
Lorsque nous écrivons dans un champ du formulaire, nous constatons que généralement le navigateur nous donne la possibilité de compléter automatiquement ce que nous écrivons à ce moment-là avec du texte que nous avons déjà écrit auparavant, cela peut poser des problèmes de sécurité car, par exemple, si nous écrivons plusieurs e-mails car l'ordinateur a été utilisé par un autre utilisateur, nous pourrions écrire pour voir les informations qu'un autre utilisateur a saisies. Dans l'exemple, nous désactivons la saisie semi-automatique dans le courrier, mais pas dans les autres champs. Il peut également être désactivé à partir du navigateur, mais de nombreux utilisateurs ne savent pas que l'option existe ou comment désactiver la saisie semi-automatique.
Nous voyons que lors de la saisie du mot Autocomplete et de la soumission lors de l'accès ultérieur au même formulaire et en appuyant uniquement sur la lettre A, dans ce cas, il suggère déjà le mot que nous avions écrit précédemment.Attribut de saisie semi-automatique
Nom:
E-mail:
Cet attribut permet d'indiquer dans quelle entrée d'un formulaire le curseur doit être positionné lors du chargement de la page web, s'il n'est pas présent alors il commencera par le premier qu'il trouvera. Cela peut également être programmé avec jQuery pour se concentrer sur différents contrôles selon les besoins.
Cet attribut est très utile pour gérer les éléments en dehors d'un formulaire, quel que soit son emplacement dans la structure du site Web.
Nous pouvons voir dans le code source HTML que nous avons créé un formulaire pour saisir les données d'un produit puis du texte explicatif et enfin nous mettons un champ texte pour le stock en dehors du formulaire, mais nous le relions à ce formulaire via son identifiant d'identification = "FormA" dans le champ de texte stock, nous mettrons le lien avec le formulaire form = "formA", de cette manière lors de l'envoi du formulaire, tous les éléments liés seront également envoyés.Attribut de formulaire
Produit:
La description:
Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition.
Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition.
Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition.
Stocker:
4. Attribut FormAction
Cet attribut est très utile pour envoyer le même formulaire à différentes pages, quelque chose qui auparavant devait être programmé en javascript et envoyer des paramètres de tous les éléments du formulaire pour pouvoir le transmettre, dans certains cas cela devenait très lourd, surtout si il y avait plusieurs formes qui dépendaient les unes des autres.
On prend l'exemple du cas précédent avec un bouton on envoie le formulaire à la page record.php et avec l'autre à stock.php
Attribut de formulaire
Produit:
La description:
Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition.
Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition.
Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition.
Stock: Attribut d'image avec soumission Si nous voulons utiliser une image comme bouton de soumission pour soumettre un formulaire, la seule façon de le faire était de mettre une image ou d'utiliser des feuilles de style CSS, puis de faire la fonctionnalité avec javascript.Attribut de type d'image
Produit:
La description:
Cet attribut vous permet de définir une liste dans un élément puis de l'appliquer à un élément d'entrée afin qu'il effectue une recherche au fur et à mesure que nous tapons.
Attribut de type liste et liste de données
