Construisez la prochaine génération de formulaire Web avec HTML5

Auteur：Eve Cole Date de mise à jour：2025-03-28 12:32:01

HTML5 a été lancé par Whatwg (WEB Hypertext Application Technology Working Group). Le nom initial était l'application Web 1.0. Cette norme a absorbé la norme Web Forms 2.0 et a été adoptée par les organisations W3C pour fusionner dans la prochaine génération de norme HTML5.

Préface

En tant que langue avec le langage de programmation le plus étendu aujourd'hui, le langage HTML a les caractéristiques de la compatibilité des plates-formes faciles à utiliser, rapides et multipliées. Cependant, avec les progrès de l'époque, la norme HTML a stagné. Cette fois, la mise à jour de la norme HTML5, qui est toujours en cours de développement, peut avoir apporté une nouvelle vitalité à cette langue de balisage. Cet article se concentrera sur les formulaires Web 2.0 dans HTML5, c'est-à-dire la partie du formulaire.

Les formulaires sont des contrôles (ensembles) courants dans les pages Web. De l'enregistrement du site Web et de la connexion aux systèmes de gestion des données d'entreprise, il existe essentiellement des formulaires. La raison pour laquelle les formulaires sont si importants est principalement parce qu'ils sont responsables de la tâche de mise à jour et d'interaction avec un grand nombre d'utilisateurs et de données de fond Web. On peut dire que les développeurs Web aiment et détestent les formulaires Web. Ils aiment leur fonction pratique de collecter et d'organiser des données, et ils détestent leurs fonctions dans une large mesure. Certaines fonctions qui semblent ordinaires sur les utilisateurs finaux du site Web, tels que la vérification des types d'entrée, la vérification du formulaire, les invites d'erreur, etc., tous les développeurs doivent dépenser beaucoup d'efforts pour utiliser la programmation JavaScript et DOM pour répondre à ces points fonctionnels naturellement requis. Avec la popularité de l'Ajax, certaines bibliothèques d'outils JavaScript telles que Dojo, Yui, etc. ont fourni des widgets JavaScript pratiques ou des API pour réduire le fardeau des développeurs.

Nouvelles fonctionnalités de la forme HTML5

HTML5 Web Forms 2.0 est une amélioration complète des formulaires Web actuels. Tout en maintenant les fonctionnalités simples et faciles à utiliser, il ajoute de nombreux contrôles ou attributs de contrôle intégrés pour répondre aux besoins des utilisateurs et réduit la programmation des développeurs. À mon avis, HTML5 a principalement amélioré le formulaire Web actuel dans les aspects suivants:

Nouveau type de contrôle
- Êtes-vous toujours inquiet de la vérification des types et êtes-vous toujours inquiet de la longue liste d'expressions régulières que vous ne pouvez pas très bien comprendre, HTML5 fournit une série de nouveaux contrôles qui auront naturellement la fonction de vérification des types. Par exemple, la boîte d'entrée d'URL, la boîte d'entrée par e-mail, etc.
```
 <Type d'entrée = URL> </ entrée>
 <entrée type = e-mail> </ entrée>
```
- Bien sûr, il existe également des boîtes d'entrée à date très importantes. Vous devez savoir que l'utilisation de JavaScript et CSS pour créer manuellement une boîte d'entrée de date est toujours très difficile. Les bibliothèques de classe comme Dojo et Yui font également un gros problème sur ce widget.
```
 <entrée type = date> </ entrée>
```
- Dans le cadre de ma mémoire douloureuse, je me souviens souvent que nos développeurs voulaient ajouter beaucoup d'options dynamiquement à une table déroulante sélectionnée. La plupart de ces options proviennent de bases de données, telles que les listes de pays, de province et de ville, etc. Cette question est très lourde. HTML5 prendra en charge les attributs de données et les sources de données de sensibilisation pour certains contrôles!
```
 <sélectionnez data = http: // domain / getMyOptions> </lect>
```
Amélioration du contrôle de téléchargement de fichiers, vous pouvez utiliser un contrôle pour télécharger plusieurs fichiers, spécifier le type de fichiers téléchargés (accepter), et vous pouvez même définir la taille maximale (MaxLength) de chaque fichier. Voyez-vous la différence entre l'informatique et le contrôle de téléchargement de fichiers fourni par les systèmes d'exploitation généraux? Quoi qu'il en soit, je pense que c'est fondamentalement la même chose. Dans les applications HTML5, les contrôles de téléchargement de fichiers deviendront très puissants et faciles à utiliser.
Repeat Model, HTML5 fournit un ensemble de mécanismes répétés pour nous aider à créer des listes d'entrée en double, y compris certains types de bouton tels que ADD, Supprimer, se déplacer et déplacer. Grâce à cet ensemble de mécanismes répétés, les développeurs peuvent facilement implémenter les listes d'édition que nous voyons souvent. C'est un modèle très courant. Nous pouvons ajouter une entrée, supprimer une certaine entrée ou déplacer une entrée, etc.
Le système de vérification de formulaire intégré, HTML5 fournit de nouveaux attributs pour différents types de contrôles d'entrée afin de contrôler le comportement d'entrée de ces contrôles, tels que les attributs requis de nos éléments requis communs, ainsi que max, min, etc. Fourni pour les contrôles de type numérique. Lorsque vous soumettez le formulaire, une fois l'erreur de vérification erronée, le navigateur n'effectuera pas l'opération de soumission, mais affichera le message d'erreur de vérification correspondant.
```
 <Type d'entrée = texte requis> </ entrée>
 <Type d'entrée = nombre min = 10 max = 100> </ entrée>
```
Soumission XML, ce que nous utilisons habituellement, c'est que le format de codage du formulaire est l'application / x-www-form-urlencoded. Les développeurs sont très clairs sur ce format et les données peuvent être envoyées au côté serveur pour un accès facile. HTML5 fournira un nouveau format de données: soumission XML, à savoir l'application / X-WWW-Form + XML. Pour donner un exemple simple, le serveur recevra directement des données de formulaire sous forme XML.
```
 <oumission>
 <nom de champ = index de nom = 0> Peter </field>
 <Nom de champ = index de mot de passe = 0> Mot de passe </FIELD>
 </bmission>
```

Étude de cas

J'utiliserai le nouveau système de formulaires de HTML5 pour créer une interface d'enregistrement utilisateur simple, y compris le nom d'utilisateur, le mot de passe, la date de naissance, les problèmes de confidentialité, etc. Le code est le suivant:

 <! doctype html> <html> <éad- head> <style> p étiquette {width: 180px; flottant: à gauche; Texte-aligne: à droite; Padding-droite: 10px} Tableau {margin-left: 80px} Table TD {border-bottom: 1px solide #cccccc} input.submit {margin-left: 80px} </ style> </ head> <body> <form action = '/ registre' enctype = application / x-www-form + xml methody = post> <p> pour s'inscrire) </bétique> <entrée name = 'name' requis type = 'e-mail'> </ entrée> </p> <p> <label for = 'mot de passe'> Mot de passe </vabe> <put name = 'mot de passe' Type = 'Password'> </ Entrée> </p> <p> <label for = 'anniversaire'> Date de naissance </ Label> <entrée type = 'date' name = 'anniversaire' /> </p> for = 'Gender'> Nationality </ Label> <Select Name = 'Country' Data = 'PAYS.XML'> </ SELECT> </ P> <P> <Label for = 'Photo'> Avatar personnel </ Label> <Input Type = 'File' Name = 'Photo' Accept = 'Image / *' /> </p> <Table> <Thead> <td> <Button Type = Add TEmplate <td> Réponse </td> <td> </td> </ head> <tr id = questionId Repeat = Template Repeat-Start = 1 Repeat-Min = 1 Repeat-Max = 3> <Td> <Input Type = Text Name = Questions [QuesketId]. </tr> </ table> <p> <input type = 'soume' value = 'send' class = 'soume' /> </p> </ form> </ body> </html>

Étant donné que la norme HTML5 est toujours en cours de développement, différents navigateurs prennent en charge les fonctionnalités HTML5 assez limitées. Parmi eux, l'opéra le soutient mieux en forme. Cet exemple fonctionne normalement sur Opera9. Les rendus sont les suivants:

Cet exemple utilise de nouveaux éléments de formulaire HTML5, tels que la boîte d'entrée de type e-mail (ID) et la boîte d'entrée de type de date (date de naissance). Et un modèle en double est utilisé pour guider les utilisateurs pour combler les problèmes de confidentialité. Dans le téléchargement des avatars personnalisés, en restreignant les types de fichiers, les utilisateurs peuvent choisir des images pour télécharger du contenu qui répond aux normes. La boîte d'entrée de sélection déroulante pour la sélection de la nationalité des utilisateurs est utilisée sous la forme d'une source de données de sensibilisation. La source de données de sensibilisation utilise Coutries.xml, et le contenu est le suivant:

 <sélectionnez xmlns = http: //www.w3.org/1999/xhtml> <option> Chine </ Option> <Option> Japon </ Option> <Option> Korea </ Option> </lect>

Et l'EnCype de la forme est l'application / x-www-form + xml, c'est-à-dire la soumission HTML5 XML. Ainsi, une fois la vérification du formulaire passé, le contenu du formulaire sera soumis en XML. Vous constaterez également que s'il n'y a pas de valeur dans la zone d'entrée d'ID, ou si une chaîne de type non-imail est entrée, une fois que vous essayez de soumettre le formulaire, il y aura un message d'erreur, qui est intégré au navigateur.

Conclusion

La mise à jour de HTML5 pour former les contrôles est sans aucun doute très excitante. Cet article décrit certaines nouvelles fonctionnalités des formulaires, et certaines nouvelles fonctionnalités sont également très excitantes. Je crois qu'avec le développement approfondi des normes et l'amélioration supplémentaire de la prise en charge du navigateur pour HTML5, le travail de conception d'une forme simple et facile à utiliser deviendra très facile.