Formulaires HTML5: le balisage

Les plats clés

• HTML5 introduit une gamme de nouveaux types d'entrée et attributs pour les formulaires, notamment le courrier électronique, le tél, l'URL, la recherche, le numéro, la plage, la date, la datetime, la date-local, le mois, la semaine, l'heure et la couleur, qui fournissent une entrée native Assistance et validation sans aucun code JavaScript.
• HTML5 propose des options de sortie en lecture seule, y compris la sortie (le résultat d'un calcul ou d'une action utilisateur), de progression (une barre de progression) et d'un compteur (une échelle qui peut changer entre les couleurs en fonction des valeurs définies pour les attributs) . Il permet également d'utiliser des éléments d'étiquette autour ou à côté de l'entrée elle-même avec un attribut pour indiquer l'ID de l'entrée.
• Bien que les types d'entrée HTML5 soient l'avenir, il est important d'utiliser toujours le type d'entrée correct pour les données que vous demandez et valider les données utilisateur du côté serveur. La validation côté client n'a jamais été et ne sera jamais un substitut à la validation côté serveur.

Il s'agit du premier d'une série en trois parties sur les formulaires Web HTML5. Nous couvrirons le balisage de base de cet article avant de passer au style et les API de validation JavaScript côté client. Je vous recommande de lire ceci même si vous êtes déjà familier avec les formulaires - il existe de nombreux nouveaux attributs et gotchas! Les formulaires HTML peuvent être banals, mais ils sont essentiels pour la majorité des sites Web et des applications. Dans HTML4, les champs d'entrée étaient limités à:

• Type d'entrée = "Text"
• Type d'entrée = "Checkbox"
• Type d'entrée = "radio"
• entrée type = "mot de passe"
• entrée type = "Hidden" - Pour les données, l'utilisateur ne peut pas afficher
• entrée type = "fichier" - pour les téléchargements
• TextArea - Pour une entrée de texte plus longue
• Sélectionner - pour les listes déroulantes
Bouton
• - généralement utilisé pour soumettre un formulaire, bien que l'entrée type = "soumettre" et l'entrée type = "image" puisse également être utilisée.

Aussi:

• Les possibilités de style CSS étaient limitées,
• Les contrôles personnalisés tels que les cueilleurs de date et de couleur ont dû être développés en code, et
• Validation côté client requise JavaScript.

Types d'entrée HTML5 supplémentaires

Un déluge de nouveaux types d'entrée a été introduit. Ceux-ci fournissent une assistance et une validation des entrées natives sans aucun code JavaScript…
Type Description e-mail Entrez une adresse e-mail Tél Entrez un numéro de téléphone - aucune syntaxe stricte n'est appliquée, mais les pauses de ligne seront supprimées URL Entrez une URL recherche Un champ de recherche avec des ruptures de ligne est automatiquement supprimé nombre un numéro de point flottant gamme Un contrôle pour entrer une valeur approximative, généralement représentée par un curseur date Entrez le jour, le mois et l'année DateTime Entrez le jour, le mois, l'année, l'heure, la minute, le deuxième et la microseconde en fonction du fuseau horaire UTC actuel datetime-local Entrez une date et une heure sans fuseau horaire mois Entrez le mois et l'année sans fuseau horaire semaine Entrez un numéro de semaine sans fuseau horaire temps Entrez l'heure sans fuseau horaire couleur Spécifiez une couleur

Attributs d'entrée

Sauf indication contraire, les champs d'entrée peuvent avoir l'un des attributs spécifiques au formulaire suivant. Plusieurs sont des attributs booléens, c'est-à-dire qu'ils ne nécessitent pas de valeurs, par exemple

<span><span><span><input> type<span>="email"</span> name<span>="email"</span> required /></span></span></span>

Bien que vous puissiez les ajouter si vous préférez une syntaxe de type XHTML plus stricte, par ex.

<span><span><span><input> type<span>="email"</span> name<span>="email"</span> required<span>="required"</span> /></span></span></span>

attribut Description nom le nom du champ de saisie valeur une valeur initiale à carreaux Vérifiez une case à cocher ou une entrée radio maxlange la longueur maximale de la chaîne entrée. Cela peut également être appliqué aux champs TextArea dans HTML5 minlengle la longueur minimale de la chaîne entrée. Ceci est documenté mais, au moment de la rédaction, le support du navigateur est médiocre et l'attribut provoque une erreur de validateurs HTML. Une autre option est Pattern = ". {3,}"Ce qui appliquerait au moins trois caractères. espace réservé Un indice de texte subtil illustré dans la zone d'entrée autofocus Définissez l'accent sur ce champ (non caché) lorsque la page se charge requis indique qu'une valeur doit être saisie modèle s'assure qu'une valeur adhère à une expression régulière min la valeur minimale autorisée (types numériques et date) max la valeur maximale autorisée (types numériques et date) étape La granularité de la valeur. Par exemple, l'entrée type = "nombre" min = "10" max = "19" Step = "2" ne permettrait que les valeurs 10, 12, 14, 16 ou 18. assortiment automatique Fournit au navigateur un indice pour la complétion automatique, par ex. «Courriel de facturation» ou peut être défini sur «sur» ou «off» pour activer et désactiver en conséquence entrée Spécifie le mécanisme d'entrée. Les options les plus utiles:

• Verbatim - Contenu non multiples tel que les noms d'utilisateur
• Latin - Script latin tel que les champs de recherche
• nom de latin - noms, c'est-à-dire avec la capitalisation initiale de la lettre
• latin-prose - Contenu en prose tels que les messages, les tweets, etc.
• Numérique - Entrée numérique où le nombre ou la plage ne serait pas approprié, par ex. Numéros de carte de crédit

taille La taille des caractères pour les entrées de texte ou de mot de passe ou des pixels pour les entrées par e-mail, Tél, URL ou recherche. Il vaut probablement mieux éviter car vous devez utiliser CSS pour styliser les champs. rangées Nombre de lignes de texte (TextArea uniquement) collègues Nombre de colonnes de texte (TextArea uniquement) liste pointe vers une option de dataliste définie cocher réglé sur true ou false pour activer ou désactiver la vérification des orthographes formulaire L'ID de la forme à laquelle appartient cette entrée. En général, les entrées doivent être imbriquées dans un formulaire, mais cet attribut permet de définir une entrée n'importe où sur la page foraction Spécifie un URI pour remplacer l'action du formulaire lors de la soumission (soumettre des boutons / images uniquement) formetmethod Spécifie obtenir ou publier pour remplacer la méthode du formulaire lors de la soumission (soumettre des boutons / images uniquement) forme de forme Spécifie le type de contenu lors de la soumission (texte / simple, multiparte / formulaire de forme ou application / x-www-form-urlencod sur les boutons / images de soumission uniquement) cible de formulaire Spécifie une fenêtre / trame cible pour remplacer la cible de formulaire lors de la soumission (soumettre des boutons / images uniquement) lire en lecture La valeur d'entrée ne peut pas être modifiée bien qu'elle soit validée et soumise désactivé désactive l'entrée - aucune validation ne se produira et les données ne seront pas soumises
Notez que les champs de date doivent toujours utiliser yyyy-mm-dd pour la valeur, min et max attributs.
L'exemple suivant demande un e-mail obligatoire qui se termine par @ mysite.com et se concentre lorsque la page se charge:

<span><span><span><input> type<span>="email"</span> name<span>="email"</span> required /></span></span></span>

Datalists

Un datalist contient un ensemble d'options appropriées pour tout type d'entrée, par ex.

<span><span><span><input> type<span>="email"</span> name<span>="email"</span> required<span>="required"</span> /></span></span></span>

Lorsque le DataList est pris en charge, le navigateur présente des options d'achèvement automatique lorsque vous commencez à taper. La liste entière est généralement affichée si vous double-cliquez sur le contrôle ou cliquez sur la flèche vers le bas (si il est indiqué). Contrairement à une liste déroulante de sélection standard, l'utilisateur est libre de remplacer ces choix et de saisir sa propre valeur. Il est possible de définir des valeurs et du texte comme des options de sélection standard, par exemple

<span><span><span><input>
</span></span><span>  <span>type<span>="email"</span>
</span></span><span>  <span>name<span>="login"</span>
</span></span><span>  <span>pattern<span>="@mysite\.com$"</span>
</span></span><span>  <span>autocomplete<span>="email"</span>
</span></span><span>  <span>autofocus
</span></span><span>  <span>required /></span></span></span>

mais sachez que les implémentations diffèrent. Par exemple, Firefox complete automatiquement sur le texte lui-même (Internet Explorer) tandis que Chrome préfère la valeur (IE) et montre le texte grisé:

Les données des données peuvent être peuplées de JavaScript si vous souhaitez récupérer des options via Ajax.

Validation de désactivation

La validation de l'ensemble du formulaire peut être désactivée en définissant un attribut Novaliate sur l'élément de formulaire. Alternativement, vous pouvez définir un attribut FormNovatidate sur le bouton / image de soumission du formulaire. N'oubliez pas non plus que la définition de l'attribut désactivé d'une entrée empêchera la validation sur ce champ.

champs de sortie

Bien que nous discutons principalement des types d'entrée, HTML5 offre également des options de sortie en lecture seule:

• Sortie - Le résultat d'un calcul ou d'une action utilisateur
• Progrès - Une barre de progression (la valeur et les attributs max définissent le statut)
• mètre - Une échelle qui peut changer entre vert, ambre et rouge en fonction des valeurs définies pour la valeur des attributs, min, max, faible, élevé et optimal

Séparation et étiquetage des entrées

La spécification du formulaire whatwg.org indique:

Chaque partie d'un formulaire est considérée comme un paragraphe et est généralement séparée des autres parties en utilisant

des éléments

Intéressant. J'utilise normalement une div, bien que je doute que cela compte du point de vue sémantique. Une balise P est plus courte, mais il est possible que vous deviez appliquer une classe pour modifier les marges. Plus important encore, vous devez utiliser des éléments d'étiquette autour ou à côté de l'entrée elle-même avec un attribut pour indiquer l'ID de l'entrée, par ex.

<span><span><span><input> type<span>="email"</span> name<span>="email"</span> required /></span></span></span>

pas de contrôles standard

Il n'y a pas de directives d'interface spécifiques à suivre pour les fournisseurs de navigateurs. Ceci est intentionnel: un sélecteur de dattes contrôlé par souris typique peut être trop petit sur un appareil mobile afin que le fournisseur puisse implémenter une alternative tactile.

Prise en charge du navigateur

Tous les types et attributs d'entrée ne sont pas pris en charge dans tous les navigateurs. En général, la plupart des navigateurs modernes de IE10 incluent des bases telles que le courrier électronique et le numéro. Cependant, les types de dates ne sont pris en charge que dans les navigateurs WebKit et Blink au moment de la rédaction. Le navigateur reviendra à une entrée de texte standard lorsqu'un type spécifique et ignoreront les attributs lorsque ces valeurs ne sont pas prises en charge.

Utilisez toujours le type correct!

Il est important d'utiliser le type d'entrée correct pour les données que vous demandez. Cela peut sembler évident, mais vous rencontrerez des situations lorsque vous serez tenté d'utiliser une entrée de texte standard. Considérez les dates. Le support est inégal et cela conduit à des problèmes de mise en œuvre:

1. L'entrée de date standard renvoie toujours les dates au format Yyyy-mm-dd, quelle que soit la façon dont le sélecteur de date est présenté dans votre paramètre.


2. IE et Firefox se replieront à une entrée de texte standard, mais vos utilisateurs peuvent s'attendre à saisir des valeurs en US MM-DD-YYY ou European DD-MM-Yyy Format.


3. Un sélectionneur de dates JavaScript tel que celui de JQuery UI vous permet de définir un format personnalisé - ou même Yyyy-Mm-dd pour la cohérence - mais vous ne pouvez pas garantir que JavaScript sera activé.

La solution facile consiste à abandonner l'entrée de date HTML5, à revenir au texte et à implémenter votre propre contrôle de date. Ne le faites pas. Vous ne créerez jamais de sélecteur de date personnalisé qui fonctionne dans tous les appareils à toutes les résolutions d'écran, prend en charge le clavier, la souris et la touche et continue de fonctionner lorsque JavaScript est désactivé. En particulier, les navigateurs mobiles sont souvent en avance sur leurs cousins ​​de bureau et mettent en œuvre de bons contrôles à écran tactile. Les types d'entrée HTML5 sont l'avenir. Utilisez-les et, si nécessaire, ajoutez des polyfills JavaScript dans des situations où vous avez besoin d'une bonne prise en charge du navigateur. Mais n'oubliez pas de…

valider le serveur côté serveur

La validation du navigateur n'est pas garantie. Même si vous avez forcé tout le monde à accéder en utilisant la dernière version de Chrome, vous ne pourriez jamais empêcher:

• Les bogues du navigateur ou les échecs JavaScript permettant des données non valides
• L'utilisateur modifiant votre HTML ou vos scripts à l'aide d'outils de navigateur
• Soumission de systèmes hors de votre contrôle, ou
• Interception de données entre le navigateur et le serveur (certainement sur http).

La validation côté client n'a jamais été et ne sera jamais un substitut à la validation côté serveur. La validation des données utilisateur sur le serveur est essentielle. Sur le client, c'est un agréable à avoir . Enfin, rappelez-vous que les dates peuvent être reçues dans yyyy-mm-dd ou le format que vous avez spécifié pour l'utilisateur (mm-dd-yyy, dd-mm-yyy, etc.) Vérifiez les chiffres dans les quatre premiers caractères ou utilisez une langue maternelle / Méthodes d'analyse de date de cadre si nécessaire. Nous avons couvert beaucoup dans cet article. Dans la partie suivante, nous examinerons les propriétés CSS liées au formulaire.

Questions fréquemment posées (FAQ) sur les formulaires HTML5 Forms Marquage

Quelle est l'importance d'utiliser HTML5 dans le balisage de la forme?

HTML5 introduit une gamme de nouveaux types et attributs d'entrée qui offrent une meilleure expérience utilisateur pour le remplissage de formulaire. Ces nouvelles fonctionnalités permettent des types d'entrée plus spécifiques, tels que le courrier électronique, la date et l'heure, qui peuvent être validés par le navigateur lui-même, réduisant le besoin de JavaScript supplémentaire. Cela conduit à un code plus propre et plus efficace et à une expérience utilisateur plus lisse.

Comment HTML5 améliore l'accessibilité dans le balisage de la forme?

HTML5 fournit plusieurs fonctionnalités qui améliorent l'accessibilité. Par exemple, l'attribut «requis» peut être utilisé pour s'assurer que les champs essentiels sont remplis. L'attribut «Planholder» peut fournir des conseils aux utilisateurs sur le type d'informations attendu dans un champ. De plus, l'attribut «Autofocus» peut automatiquement concentrer le curseur sur un champ de saisie particulier lorsque la page se charge, guidant l'interaction de l'utilisateur avec le formulaire.

Quelles sont les erreurs courantes à éviter lors de l'utilisation de HTML5 pour le balisage du formulaire?

Une erreur courante n'est pas correctement en utilisant les nouveaux types et attributs d'entrée introduits dans HTML5. Par exemple, l'utilisation du mauvais type d'entrée peut entraîner la soumission de données incorrectes. Une autre erreur n'est pas de fournir des replies adéquates pour les navigateurs plus âgés qui ne prennent pas en charge HTML5. Cela peut conduire à une mauvaise expérience utilisateur pour ceux qui utilisent une technologie plus ancienne.

Comment puis-je utiliser HTML5 pour créer des formulaires plus interactifs?

HTML5 introduit plusieurs nouveaux éléments de formulaire qui peuvent être utilisés pour créer plus formes interactives. Par exemple, l'élément «Datalist» peut être utilisé pour créer une liste déroulante d'options pour un champ de saisie, tandis que les éléments «progress» et «compteur» peuvent être utilisés pour représenter visuellement la progression d'une tâche ou de la valeur actuelle dans un Plage connue, respectivement.

Comment HTML5 gère la validation du formulaire?

HTML5 introduit la validation de la forme intégrée grâce à l'utilisation de certains attributs. Par exemple, l'attribut «requis» peut être utilisé pour s'assurer qu'un champ n'est pas vide, tandis que l'attribut «motif» peut être utilisé pour spécifier une expression régulière que la valeur du champ de saisie doit correspondre. Si l'entrée ne répond pas à ces critères, le formulaire ne sera pas soumis et l'utilisateur sera invité à corriger leur entrée.

Quels sont les avantages de l'utilisation d'éléments sémantiques dans HTML5?

Sémantique Les éléments de HTML5 fournissent une indication claire du type de contenu qui y est contenu, ce qui facilite les développeurs et les machines (comme les moteurs de recherche) de comprendre la structure et le contenu d'une page Web. Cela peut améliorer l'optimisation et l'accessibilité des moteurs de recherche.

Comment puis-je m'assurer que mes formulaires HTML5 sont compatibles avec les navigateurs plus anciens?

Bien que HTML5 soit largement pris en charge par les navigateurs modernes, il est important de fournir des secours pour les plus âgés navigateurs qui peuvent ne pas prendre en charge toutes les fonctionnalités HTML5. Cela peut être fait en utilisant JavaScript pour détecter si un navigateur prend en charge une fonctionnalité particulière et fournissant une implémentation alternative si ce n'est pas le cas.

Comment puis-je utiliser HTML5 pour améliorer l'expérience mobile de mes formulaires?

HTML5 introduit plusieurs fonctionnalités qui peuvent améliorer l'expérience mobile des formulaires. Par exemple, l'attribut «Autofocus» peut être utilisé pour concentrer automatiquement le curseur sur un champ de saisie particulier lorsque la page se charge, réduisant le besoin pour les utilisateurs de taper manuellement le champ. De plus, les nouveaux types d'entrée comme «e-mail» et «tel» font apparaître des claviers spécialisés sur les appareils mobiles, ce qui permet aux utilisateurs de saisir plus facilement le type de données correct.

Quelles sont les meilleures pratiques pour structurer un formulaire Web dans html5?

Certaines meilleures pratiques pour structurer un formulaire Web dans HTML5 incluent le regroupement des contrôles de formulaires liés à l'aide de l'élément "Fieldset", fournissant des étiquettes descriptives pour tous les formulaires Contrôles à l'aide de l'élément «Étiquette» et en utilisant l'élément «Legend» pour fournir une légende pour chaque «champ de jeu». De plus, il est important d'utiliser les types et attributs d'entrée appropriés pour garantir la validité des données et améliorer l'expérience utilisateur.

Comment puis-je utiliser CSS pour styliser mes formulaires HTML5?

CSS peut être utilisé pour être utilisé pour styliser HTML5 se forme de diverses manières. Par exemple, vous pouvez utiliser CSS pour modifier la couleur, la taille et la police des éléments de forme, ajouter des bordures et des arrière-plans et appliquer des effets de survol. De plus, CSS peut être utilisé pour contrôler la disposition des éléments de forme, tels que l'alignement des contrôles et des étiquettes de formulaire, et la création de formes multi-colonnes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!