Parmi les éléments améliorés HTML5, le plus remarquable est l'élément de forme. Dans HTML5, les formulaires ont été grandement coupés, et certaines fonctionnalités qui nécessitaient auparavant l'encodage JavaScript peuvent désormais être facilement implémentées sans codage. Avant de commencer la discussion, une chose à noter:
Dans HTML5, un contrôle de forme peut être en dehors d'une ou plusieurs formes auxquelles il appartient. Par conséquent, les contrôles de formulaire tels que le champ, l'étiquette et l'entrée ont tous les attributs de formulaire ajoutés pour identifier la forme à laquelle appartient le contrôle de la forme. Dans HTML5 :1. L'élément de formulaire lui-même ajoute deux nouveaux attributs: la saisie semi-automatique et le novaliat. La propriété d'observation automatique est utilisée pour activer la fonction de liste de suggestions déroulante, et la propriété Novalidate est utilisée pour désactiver la fonction de validation du formulaire, ce qui est utile lors des tests.
2. L'élément Fieldset ajoute trois nouveaux attributs: Désactiver, nom et formulaire. La propriété Disable est utilisée pour désactiver le champ, la propriété de nom est utilisée pour définir le nom du champ, et la valeur de la propriété de formulaire est l'ID d'une ou plusieurs formulaires auxquels appartient le champ. Comme mentionné précédemment, lorsque le champ est placé à l'extérieur du formulaire, vous devez définir la propriété du formulaire de la balise du champ, afin que le champ peut être correctement associé à une ou plusieurs formes.
3. En plus de l'attribut FOR, l'élément d'étiquette ajoute uniquement l'attribut de formulaire. Il convient de mentionner ici que l'attribut, auquel je n'ai jamais prêté attention auparavant. L'attribut FOR est utilisé pour spécifier le contrôle de formulaire attaché à l'étiquette. De cette façon, en cliquant sur cette étiquette, le contrôle de formulaire ci-joint sera mis au point, tel que:
<form action = "Demo_form.asp" id = "form1">
<étiquette pour = "name"> Cliquez sur moi </bablow> <entrée id = "name" type = "text"> </ entrée>
<input type = "soumi" value = "soumi" />
</ form>
Cliquez sur Cliquez sur moi et la boîte d'entrée suivante sera concentrée.
4. L'élément d'entrée 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 classer les données. Malheureusement, aucun navigateur ne peut bien prendre en charge tous ces types.
En plus du bouton d'origine, du texte, de la soumission, de la case à cocher, de la radio, de la sélection, du mot de passe, HTML5 ajoute les nouveaux types d'entrée suivants:
Couleur: couleurDiverses dates: date, datetime, datetime-local, mois, semaine, heure
Email: e-mail
Numéro: numéro
Gamme
Recherche: recherche
Téléphone: Tel
Type d'URL: URL
Vous pouvez exécuter l'exemple suivant pour afficher l'état du support de différents navigateurs:
<form action = "Demo_form.asp">
Sélectionnez votre couleur préférée: <entrée type = "couleur" name = "Favcolor" />
Anniversaire: <entrée type = "date" name = "bday" />
Anniversaire (date et heure): <entrée type = "datetime" name = "bdaytime" />
Anniversaire (date et heure): <input type = "dateTime-local" name = "bdaytime" />
Anniversaire (mois et année): <entrée type = "mois" name = "bdaymonth" />
Sélectionnez un temps: <input type = "time" name = "usr_time" />
Sélectionnez une semaine: <entrée type = "semaine" name = "week_year" />
Quantité (entre 1 et 5): <input type = "nombre" name = "quantité" min = "1" max = "5" />
Quantité (entre 1 et 10): <entrée type = "range" name = "Points" min = "1" max = "10" />
Rechercher Google: <entrée type = "search" name = "googlesearch" />
Téléphone: <entrée type = "tel" name = "usrTel" />
Ajoutez votre page d'accueil: <input type = "url" name = "homepage" />
E-mail: <entrée type = "e-mail" name = "usRemail" />
<entrée src = "soumibutton.png" type = "soumis" />
</ form>
Voici les propriétés d'entrée nouvellement ajoutées:
Assomple automatique : affichez automatiquement les informations précédemment entrées, avec la valeur activée ou désactivée. Applicable aux types de texte, de recherche, URL, Tél, e-mail, mot de passe, dattepickers, plage et types de couleurs. Autofocus : Obtenez automatiquement la mise au point après le chargement de la page. FORME : Spécifie le formulaire auquel appartient l'entrée, qui peut être multiple. Format : spécifie la page (URL) ou le fichier qui traite cette entrée après la soumission du formulaire. FORMENCYPE : Spécifie comment les données sont codées après la soumission du formulaire. FormMethod : spécifie la méthode HTTP pour envoyer des données de formulaire, qui remplaceront la méthode HTTP de la forme correspondante. Formationnaledated : La validité des données n'est pas vérifiée avant la soumission. FormTarget : spécifie où afficher le contenu du formulaire après la soumission. hauteur, largeur : longueur et largeur de la boîte d'entrée, uniquement applicables aux types d'images. Max, Min : les valeurs maximales et minimales de la valeur d'entrée. Applicable à un nombre significatif, des types de plages et des dates. Multilations : s'il faut permettre à plusieurs valeurs de saisir, adaptés aux types de courriels et de fichiers. Modèle : Spécifie l'expression régulière pour vérifier la valeur d'entrée, applicable au texte, à la recherche, à l'URL, au tél, à l'e-mail, à un mot de passe. En place d'espace : les informations rapides avant la saisie, applicables au texte, à la recherche, à l'URL, au tél, à l'e-mail, à un mot de passe. Obligatoire : s'il est nécessaire, s'il n'est pas nécessaire, le formulaire ne peut pas être soumis. Il s'applique au texte, à la recherche, à l'URL, au tél, aux e-mails, à un mot de passe, aux sélecteurs de date, aux nombres, à la case, à la radio et aux types de fichiers. Étape : Entrez la valeur de l'étape en croissance automatique, adaptée aux types de numéro, de plage, de date, de datetime, de datetime-local, de mois, d'heure et de semaine. Liste : La liste des candidats des éléments d'entrée doit être utilisée en conjonction avec l'élément de données. L'attribut de liste peut être utilisé sur ces types: texte, recherche, URL, tel, e-mail, date, numéro, plage et couleur. On estime qu'il est valable sur Firefox. Voir un petit exemple:<Fieldset>
<gend> favoris </gend>
<p>
<étiquet>
<input type = "text" name = "favorites" list = "options">
<Datalist id = "Options">
<option value = "a">
<Option Value = "B">
<Option Value = "C">
</DATATALIST>
</ label>
</p>
</ fieldset>
L'exemple suivant essaie d'utiliser diverses propriétés, qui peuvent être exécutées dans différents navigateurs pour afficher l'effet réel:
<form action = "Demo_form.asp">
E-mail: <entrée type = "e-mail" name = "e-mail" AutoChatple't = "ON" />
Image: <input type = "image" src = "img_submit.gif" />
Entrez une date avant 1980-01-01: <input type = "date" name = "bday" max = "1979-12-31">
Entrez une date après 2000-01-01: <entrée type = "date" name = "bday" min = "2000-01-02">
Quantité (entre 1 et 5): <input type = "nombre" name = "quantité" min = "1" max = "5" />
Sélectionnez Images: <input type = "file" name = "img" multiple = "multiple" />
Code de pays: <input type = "text" name = "country_code" pattern = "[a-za-z] {3}" />
Prénom: <input type = "text" name = "fname" placeholder = "prénom" />
Nom d'utilisateur: <input type = "text" name = "usrname" requis = "requis" />
Numéro: <input type = "nombre" name = "Points" Step = "3" />
<input type = "soumi" />
<input type = "soumi" format = "Demo_admin.asp" value = "soumettre en tant qu'administrateur" />
<input type = "soumi" forulactype = "multipart / form-data" value = "soumettre en multipart / formulaire-data" />
<input type = "soumi" formula = "post" format = "Demo_post.asp" value = "soumettre à l'aide du post" />
<input type = "soumi" formNovalated = "formNovalated" value = "soumettre sans validation" />
<input type = "soumi" formtarget = "_ blank" value = "soumettre à une nouvelle fenêtre" />
</ form>
<form action = "Demo_form.asp" id = "form1">
Prénom: <input type = "text" name = "fname" />
<input type = "soumi" value = "soumi" />
</ form>
Nom de famille: <entrée type = "text" name = "lname" form = "form1" />
Suggestion: Bien que tous les navigateurs ne prennent pas en charge tous les types, vous êtes toujours encouragé à utiliser ces nouveaux types, car même si le navigateur ne le prend pas en charge, il se dégénérera simplement en une simple boîte de saisie de texte. Référence pratique: Tutoriel W3C: http://www.w3schools.com/html5/default.aspGuide officielle HTML5: http://dev.w3.org/html5/html-author/
Un très bon site Web de guide: http://html5doctor.com/
HTML5 Tutoriel chinois: http://www.html5china.com/
Un bon blog frontal: http://www.pjhome.net/default.asp?cateid=1
Connaissances connexes sur les formulaires d'opération JS: http://www.vevb.com/xugang/archive/2010/08/12/1798005.html