Extension d'élément HTML HTML5 (Partie 2) - l'élément Form amélioré mérite attention_html5 compétences du didacticiel

Parmi les éléments améliorés HTML5, le plus remarquable est l'élément de formulaire. En HTML5, les formulaires ont été considérablement remaniés et certaines fonctions qui nécessitaient auparavant un codage JavaScript peuvent désormais être facilement implémentées sans codage. Avant de commencer la discussion, quelque chose doit être noté :

En HTML5, les contrôles de formulaire peuvent être extérieurs à un ou plusieurs formulaires auxquels ils appartiennent. Par conséquent, les contrôles de formulaire tels que fieldset, label et input ont ajouté l'attribut form pour identifier le formulaire auquel appartient le contrôle de formulaire.

en HTML5  :

1. L'élément form lui-même ajoute deux nouveaux attributs : autocomplete et novalidate. L'attribut autocomplete est utilisé pour activer la fonction "liste déroulante de suggestions", et l'attribut novalidate est utilisé pour désactiver la fonction de validation du formulaire, ce qui peut être utile lors des tests.

2. L'élément fieldset ajoute trois nouveaux attributs : disable, name et form. L'attribut Disable est utilisé pour désactiver l'ensemble de champs, l'attribut name est utilisé pour définir le nom de l'ensemble de champs et la valeur de l'attribut de formulaire est l'ID d'un ou plusieurs formulaires auxquels appartient l'ensemble de champs. fieldset est placé en dehors du formulaire, vous devez définir l'attribut form de la balise fieldset afin que le fieldet puisse être correctement associé à un ou plusieurs formulaires.

3. En plus de l'attribut for, l'élément label ajoute uniquement l'attribut form. Ce qui mérite d’être mentionné ici, c’est l’attribut for, que je n’avais pas vraiment remarqué auparavant. L'attribut for est utilisé pour spécifier le contrôle de formulaire attaché à l'étiquette, de sorte que lorsque l'on clique sur l'étiquette, le contrôle de formulaire attaché obtient le focus, par exemple :

Copier le code

Le code est le suivant :

< label for="name">Cliquez sur moi< ;/label>

Cliquez sur "Cliquez sur moi" et la zone de saisie suivante deviendra active.

4. L'élément input introduit de nouveaux types et attributs pour améliorer la convivialité du formulaire. Ces nouveaux types d’entrée sont très utiles pour organiser et catégoriser les données, mais malheureusement aucun navigateur ne les prend tous correctement en charge.
En plus des types de bouton, texte, soumission, case à cocher, radio, sélection et mot de passe d'origine, HTML5 a ajouté les nouveaux types d'entrée suivants :

Couleur : couleur
Différentes dates : date, dateheure, dateheure-locale, mois, semaine, heure
E-mail : email
Numéro : numéro
Plage : plage
Recherche : recherche
Téléphone : tél
Type d'URL : url

Vous pouvez exécuter l'exemple suivant pour vérifier la prise en charge des différents navigateurs :

Copiez le code

Le code est comme suit :

Sélectionnez votre couleur préférée :
Anniversaire :
Anniversaire (date et heure) :
Anniversaire ( date et heure) :
Anniversaire (mois et année) :
Sélectionnez une heure :
Sélectionnez une semaine :
Quantité ( entre 1 et 5 ) :
Quantité (entre 1 et 10) :
Recherche Google :
Téléphone :
Ajoutez votre page d'accueil :
E-mail :


Voici les attributs de saisie nouvellement ajoutés :
autocomplete : Afficher automatiquement les informations saisies précédemment, en prenant la valeur "on" ou "off". Applicable au texte, à la recherche, à l'URL, au téléphone, à l'e-mail, au mot de passe, aux sélecteurs de date, à la plage et aux types de couleurs.

autofocus : obtient automatiquement le focus une fois la page chargée.
formulaire : Précisez le formulaire auquel appartient l'entrée, qui peut être multiple.
formaction : Spécifiez la page (URL) ou le fichier pour traiter cette entrée après la soumission du formulaire. ​
formenctype : Spécifiez comment encoder les données une fois le formulaire soumis.
formmethod : Spécifie la méthode HTTP d'envoi des données du formulaire, qui remplacera la méthode HTTP du formulaire correspondant.
formnovalidate : Ne vérifie pas la validité des données avant la soumission.
formtarget : Spécifiez où afficher le contenu de la réponse une fois le formulaire soumis.
hauteur, largeur : longueur et largeur de la zone de saisie, applicable uniquement au type d'image. ​
max, min : Les valeurs maximales et minimales de la valeur d'entrée. Convient aux types de nombres, de plages et de dates significatifs. ​
multiple : s'il faut autoriser la saisie de plusieurs valeurs, applicables aux types d'e-mails et de fichiers.
motif : Spécifie l'expression régulière pour vérifier la valeur d'entrée, adaptée au texte, à la recherche, à l'URL, au numéro de téléphone, à l'e-mail et au mot de passe.
espace réservé : informations rapides avant la saisie, applicables au texte, à la recherche, à l'URL, au téléphone, à l'e-mail, au mot de passe.
obligatoire : s'il s'agit d'un élément obligatoire. Si l'élément requis n'est pas rempli, le formulaire ne peut pas être soumis. Applicable au texte, à la recherche, à l'URL, au numéro de téléphone, au courrier électronique, au mot de passe, aux sélecteurs de date, numéro, case à cocher, radio et types de fichiers.
étape : saisissez la valeur de l'étape pour la croissance automatique, applicable aux types nombre, plage, date, dateheure, dateheure-locale, mois, heure et semaine.
list : une liste candidate d'éléments d'entrée, qui doit être utilisée en conjonction avec l'élément datalist. L'attribut list peut être utilisé sur ces types : texte, recherche, url, tel, email, la date, le numéro, la plage et la couleur fonctionnent sur FireFox. Regardez un petit exemple :

Copiez le code

Le code est le suivant :

Favoris

Ce qui suit exemple de tentative d'utilisation de chaque propriété, vous pouvez l'exécuter dans différents navigateurs pour voir l'effet réel :

Copiez le code

Le code est le suivant :

E-mail :
Image :
Saisissez une date antérieure au 01/01/2000 :
Saisissez une date postérieure au 01/01/2000 :
Quantité (entre 1 et 5) :
Sélectionnez les images :
Code du pays :
Prénom :
Nom d'utilisateur :
Numéro :

Prénom :

Nom :

建议：但是还是鼓励大家使用这些新类型，因为即使浏览器不支持，只不过是会退化成简单的text输入框而已。

实用参考：
W3C的教程：http://www.w3schools.com/html5/default.asp
HTML5官方指导：http://dev.w3.org/html5/html-author/
相当不错的一个指导网站：http://html5doctor.com/
HTML5中文教程：http://www.html5china.com/
一个不错的前端博客：http://www.pjhome.net/default.asp?cateID= 1
JS操作表单的相关知识：http://www.cnblogs.com/xugang/archive/2010/08/12/1798005.html