Apprentissage des attributs de formulaire HTML5 (partie 2) - SitePoint

Cet extrait de html5 & css3 pour le monde réel, 2e édition par Alexis Goldstein, Louis Lazaris et Estelle Weyl, explore les principaux attributs de forme HTML5. Le livre est disponible dans les magasins et comme un ebook.

Concepts clés:

• pattern Attribut: valide l'entrée de l'utilisateur contre une expression régulière. Essentiel pour les champs de texte de forme libre, garantissant que les données sont conformes à un format spécifique. N'oubliez pas d'informer clairement les utilisateurs du modèle requis à l'aide de l'attribut title, qui améliore les messages d'erreur et les infractions d'erreur du navigateur. Les expressions régulières elles-mêmes peuvent être complexes, mais les ressources facilement disponibles peuvent aider.

• disabled Attribut: Empêche l'interaction utilisateur avec les contrôles de formulaire. Utile pour les champs de désactivation conditionnellement jusqu'à ce que certains critères soient satisfaits. La pseudo-classe de CSS permet le style des éléments désactivés. Les champs handicapés ne sont pas soumis avec le formulaire. :disabled

• Attribut: readonly Empêche l'édition, mais permet la mise au point et la soumission de la valeur du champ. Idéal pour afficher des informations que les utilisateurs ne peuvent pas modifier, comme les données pré-remplies.

• Attribut: form associe des éléments de forme aux formes en dehors de leur structure de nidification. Résout la limitation des formes non néstables en reliant les éléments à une forme différente en utilisant son ID. La suppression de cet attribut nécessite , sans le définir sur une chaîne vide. el.removeAttribute('form')

• Attribut: multiple permet la sélection de plusieurs valeurs dans divers types d'entrée (fichier, e-mail). Notez que la prise en charge du navigateur pour la entrée avec cet attribut est limitée. Les espaces après les virgules sont désormais autorisés pour la saisie par e-mail sur iOS, bien qu'il n'ait pas été une syntaxe par e-mail valide. range

• Attribut: autocomplete Contrôle la complétion automatique du navigateur. Le régler sur désactive cette fonctionnalité, recommandée pour les données sensibles. Le comportement du navigateur peut remplacer les paramètres du développeur. "off"

• et datalist Attributs: list Créez une liste déroulante des valeurs suggérées pour les champs d'entrée. Soutenu largement soutenu sauf dans Safari. Combine un élément avec des éléments <datalist></datalist> et l'attribut <option></option> sur le champ de saisie. list

• Attribut: autofocus se concentre automatiquement sur un élément spécifique sur le chargement de la page. Généralement découragé pour des raisons de convivialité et d'accessibilité. Un seul élément par page peut avoir cet attribut.

Attributs supplémentaires: De nombreux autres attributs spécifiques à l'entrée existent, y compris alt, src, height, width (pour les images), step, min, max (pour les nombres et les dates), dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, inputmode, minlength, maxlength, checked, name, size, type, et value.

Questions fréquemment posées (FAQ): Le texte fourni répond aux questions courantes sur ces attributs, couvrant leur fonctionnalité et leur utilisation dans la validation du formulaire et l'amélioration de l'expérience utilisateur. Les FAQ clarifient individuellement l'objectif et l'application de chaque attribut.

Figure 4.4: Datalist dans Firefox

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!