Maison > interface Web > Tutoriel H5 > Formulaires en HTML5

Formulaires en HTML5

高洛峰
Libérer: 2017-02-06 14:11:23
original
1356 Les gens l'ont consulté

Par rapport au HTML4, les éléments et fonctionnalités du HTML5 offrent un plus grand degré de balisage sémantique et suppriment également un grand nombre d'éléments redondants qui existent dans HTML4 en raison des scripts et des styles. En rendant les formulaires plus cohérents sur différents sites Web et en répondant aux données saisies par les utilisateurs en temps opportun, les fonctionnalités des formulaires HTML5 offrent aux utilisateurs une meilleure expérience. Ces expériences s'appliquent également aux utilisateurs dont les scripts de navigateur sont désactivés.

Cette rubrique décrit certaines nouvelles fonctionnalités ou modifications prises en charge par Gecko/Firefox4 ou supérieur. L'attribut type de l'élément

a plus de valeurs

search : cet élément affiche un champ de recherche. Les nouvelles lignes sont supprimées de la valeur d'entrée, mais il n'y a aucune autre amélioration de la syntaxe.

tel : Cet élément peut être utilisé comme contrôle de saisie pour modifier un numéro de téléphone. Les nouvelles lignes sont supprimées de la valeur d'entrée et aucune autre amélioration de la syntaxe n'est apportée car les différences d'internationalisation des numéros de téléphone sont très évidentes. Vous pouvez utiliser des propriétés telles que pattern et maxlength pour limiter les valeurs saisies dans le contrôle.

url : cet élément restitue un contrôle d'entrée pour modifier une URL. Les nouvelles lignes et les espaces de début et de fin seront automatiquement supprimés.

email : cet élément affiche une adresse e-mail. Les sauts de ligne sont automatiquement supprimés. Il est possible de définir une adresse email invalide, mais si elle répond aux contraintes du champ de saisie, elle doit être conforme aux spécifications en Extended Backus Normal Form (ABNF) : 1( atext / "." ) "@" ldh-str 1( "." ldh-str ) où atext est défini dans la section 3.2.3 de la RFC 5322 et ldh-str est défini dans la section 3.5 de la RFC 1034. .

Remarque : si l'attribut multiple est défini, plusieurs e-mails peuvent être saisis dans la zone séparés par des virgules, mais Firefox ne le prend pas en charge. .

list : L'ID de l'élément , le contenu de l'élément et l'élément

modèle : expression régulière utilisée pour vérifier la valeur d'un contrôle, qui peut être appliquée aux éléments d'entrée dont les valeurs de type sont text, tel, search, url et email.

form : Une chaîne indiquant à quel élément

appartient cette entrée. Une entrée ne peut exister que sous une seule forme.

formmethod : une chaîne indiquant quelle méthode HTTP (GET ou POST) sera utilisée lorsque le formulaire est soumis ; s'il est défini, l'attribut de méthode sur l'élément formmethod ne peut prendre effet que lorsque la valeur de type est image ou submit et que l'attribut form est défini.

x-moz-errormessage : Une chaîne qui affiche un message d'erreur lorsque la validation du champ du formulaire échoue. Cette valeur est une extension Mozilla et n'est pas un standard. L'élément

a une nouvelle fonctionnalité :

novalidate : la définition de cette fonctionnalité ne validera pas le formulaire avant sa soumission. L'élément

L'élément

affiche une colonne

Vous pouvez utiliser l'attribut list sur l'élément pour associer une entrée spécifique à un élément L'élément


Vous pouvez utiliser l'attribut for pour associer l'élément à d'autres éléments du document qui affectent l'opération (par exemple, une entrée ou des paramètres). La valeur de l'attribut for est une liste d'ID d'autres éléments séparés par des espaces.

Gecko 2.0 (pas le cas pour les autres navigateurs) prend en charge la personnalisation des contraintes de validité et des messages d'erreur pour l'élément . Vous pouvez utiliser les pseudo-classes CSS suivantes : :invalid, :valid, :-moz. -ui-invalid et :-moz-ui-valid. Cela peut être utile dans les situations où le résultat calculé enfreint une règle métier mais n'est pas dû à une erreur dans une valeur d'entrée spécifique (par exemple, « le pourcentage total ne peut pas dépasser 100 »).

attribut placeholder

l'attribut placeholder fonctionne sur les éléments et