Le but de la nouvelle fonctionnalité HTML5 est d'améliorer le support de l'intégration, comme la vidéo et l'audio, et de fournir aux développeurs et aux utilisateurs finaux une programmation simple et une meilleure expérience utilisateur. Maintenant, le monde Internet attend, et le navigateur peut prendre en charge la nouvelle version de HTML5 lorsqu'elle est mise à jour. HTML5 a été soutenu par de nombreux navigateurs, tels que Safari, Chrome, Firefox, Opera, IE9. Il est compatible en arrière, mais les navigateurs d'aujourd'hui ne peuvent pas être entièrement compatibles avec HTML5.
La mise à niveau d'un site Web vers HTML5 est assez facile car elle est compatible avec HTML4. Vous avez juste besoin de modifier votre doctype. Cette nouvelle mise à jour permet de simplifier les choses, vous pouvez donc désormais mettre à jour tous vos sites Web et ils ne plantent pas car toutes les balises HTML4 sont toujours prises en charge à 100% dans HTML5.
Les formulaires HTML5 définissent plus d'une douzaine de nouveaux types et fonctionnalités d'entrée, et ces nouveaux éléments permettent aux programmeurs de programmer plus facilement. Parlons de ces nouvelles fonctionnalités ci-dessous.
1. Plan des boîtes d'entrée
Dans HTML4, les développeurs utilisent JavaScript et JQuery comme espaces réservés d'entrée, tandis que dans HTML5, les développeurs peuvent facilement afficher un espace réservé. Que sont les espaces réservés? L'ensemble d'espace est le texte de l'invite qui apparaît dans la zone d'entrée. Lorsque vous cliquez sur le champ de saisie, il disparaîtra automatiquement. Vous pouvez inviter l'échantillon de texte que l'utilisateur doit entrer dans la zone de texte. Il existe plutôt une boîte de saisie par e-mail où vous pouvez définir les espaces réservés [email protected] et il disparaîtra lorsque vous cliquez sur eux.
C'est-à-dire ff safari chrome opéra iphone Android
- 3.7+ 4+ 4+ 11+ 4+ -
2. Événements de mise au point automatique
HTML5 Chargez simplement une page Web, et la page Web déplace automatiquement la focalisation vers une boîte d'entrée spécifique, tout comme JavaScript. Quelle est la différence? Comme c'est juste une balise HTML maintenant, les utilisateurs peuvent facilement désactiver cette propriété dans leur navigateur. Tous les navigateurs ne prennent pas en charge l'autofocus, mais les navigateurs n'ignorent pas simplement cette propriété. Si vous souhaitez que tous les navigateurs fonctionnent, ajoutez simplement les nouvelles propriétés de l'autofocus HTML5, puis vérifiez si le navigateur prend en charge l'autofocus. Si vous le pouvez, vous n'avez pas à utiliser un script automatique. Si vous n'en avez pas, vous devez ajouter un script automatique.
Ff IE Safari Chrome Opera iPhone Android
- 4+ 4+ 3+ 10+ - -
3. Type d'entrée HTML nouvellement défini
1. Email
La première boîte d'entrée que je vais dire est l'adresse e-mail. Les navigateurs plus âgés qui ne prennent pas en charge de nouveaux types les traitent également simplement comme une zone de texte, et 99% des utilisateurs ne remarqueront pas ce changement avant de soumettre le formulaire (il y aura la validation du formulaire pour le moment).
2. Site Web
Parlons de la boîte d'entrée URL. Si vous avez besoin de saisir une URL, vous vous attendez à le saisir comme http://www.vevb.com. Désormais dans la boîte d'entrée de type URL, un clavier virtuel variable apparaîtra dans l'iPhone. Les utilisateurs peuvent facilement entrer des slashes et .com. De même, les utilisateurs ne le savent pas avant de soumettre le formulaire.
3. Nombres
Pour obtenir des numéros correspondants dans HTML4, vous devez utiliser des scripts jQuery pour aider à la vérification. HTML5 ajoute des types numériques. Quelques propriétés supplémentaires (facultative): MIN: Spécifie le numéro d'entrée minimum qui peut être accepté par la zone d'entrée. Max: le nombre maximum est-il autorisé à entrer. Étape: l'intervalle juridique du domaine d'entrée d'attribut, la valeur par défaut est 1.
Comme indiqué dans la figure ci-dessus, seuls les nombres sont autorisés (dans la plupart des cas, ceux-ci ne seront pas remarqués tant qu'une erreur n'est pas invitée à la soumission), seulement 0, 2, 4 sont légaux (6 est illégal car l'étape est 10 et le légal est 0, 10, 20 ...).
4. curseur numérique
HTML5 vous permet d'utiliser un nouveau type appelé plage, et la boîte d'entrée devient un curseur. Votre formulaire de site Web peut utiliser un curseur. Sa balise d'attribut est la même que le type de nombre, il suffit de modifier le type de type Type = 'Number' sur type = 'range'.
5. Calendrier
Les meilleurs nouveaux ajouts à ce jour, les types de sélecteurs de date nommés Date et DateTime (il existe d'autres types de date / heure tels que l'heure, la semaine, le mois et le calendrier local). De nombreux cadres JavaScript tels que jQuery UI et Yiu ont déjà ces contrôles, mais l'ajout d'un sélecteur de calendrier est assez ennuyeux. HTML5 définit un nouveau sélecteur de date local qui n'a pas à inclure l'utilisation de scripts sur la page. À l'heure actuelle, Opera est le seul à prendre en charge cette fonctionnalité, et pour d'autres navigateurs, vous pouvez faire un autre script au cas où le navigateur ne le prend pas en charge. Cependant, en fin de compte, tous les navigateurs seront mis à jour.
6. Recherche
HTML5 ajoute le type de boîte d'entrée de recherche. Ce n'est rien, mais c'est un bon changement pour certains utilisateurs. Il peut simplement encercler automatiquement les bords de la boîte d'entrée, et lorsque vous commencez à taper, il y aura un petit X à droite. Tous les navigateurs ne le soutiennent pas actuellement.
7. Couleur
HTML5 définit également la couleur du type, qui vous permet de sélectionner une couleur et de retourner la valeur hexadémique. Opera11 est le seul navigateur qui prend en charge ce type de navigateur. Cependant, il ne devrait pas y avoir beaucoup de gens qui utilisent ce type, donc ce n'est pas un gros problème de ne pas le soutenir.
8. Vérification du formulaire
La nouvelle fonctionnalité la plus excitante est la vérification du formulaire. La plupart des développeurs forment la validation, client ou serveur. Peut-être que le validateur de formulaire de HTML5 peut ne pas remplacer votre vérification côté serveur, mais il finira certainement de remplacer votre vérification côté client. Le problème avec la vérification JavaScript est qu'il est facile pour les utilisateurs de le contourner, il peut être facilement contourné simplement en désactivant JavaScript. Maintenant que HTML5 est concerné, vous n'avez pas à vous en soucier. Les erreurs sont toutes des invites HTML5 natives et JavaScript n'est pas utilisé.
C'est-à-dire ff safari chrome opéra iphone Android
- 4+ 5+ 10+ 9+ - -
9. Champs requis
La validation du formulaire de HTML5 n'est pas limitée au type de champ de vérification, il permet également à une nouvelle balise supplémentaire d'être appelée, requise. Cette nouvelle propriété permet aux développeurs de vérifier que la boîte d'entrée est remplie sans utiliser JavaScript.
Résumé: Les mises à jour ci-dessus sont cruciales pour raccourcir les cycles de développement et améliorer l'expérience utilisateur. Une fois que tous les navigateurs acceptent HTML5, la prochaine génération de sites Web dépassera les attentes de quiconque. HTML5 n'est pas un problème, il aidera grandement les développeurs et améliorera l'expérience utilisateur.