Formulaires HTML5: outils fiables dans notre boîte à outils

Le contenu suivant est extrait du livre "HTML5 & CSS3 pour le monde réel, 2e édition" co-écrit par Alexis Goldstein, Louis Lazaris et Estelle Weyl. Ce livre est disponible dans les magasins du monde entier, et vous pouvez également acheter la version E-Book ici.

Nous avons écrit la majeure partie du code de la page et vous savez maintenant presque tout sur les nouveaux éléments HTML5 et leur sémantique. Mais avant de commencer à concevoir le look du site Web (nous le faisons au chapitre 7), nous quitterons rapidement la page d'accueil de HTML5 Herald pour consulter la page d'inscription. Cela illustrera la fonctionnalité que HTML5 fournit en termes de formes Web.

Les formulaires Web HTML5 introduisent de nouveaux éléments de formulaire, des types d'entrée, des attributs, de la vérification native et d'autres fonctionnalités de formulaire. Nous avons utilisé bon nombre de ces fonctionnalités dans l'interface depuis des années: validation de formulaire, boîtes combinées, texte d'espace réservé, etc. La différence est que nous avons dû nous tourner vers JavaScript pour créer ces comportements dans le passé; Il vous suffit d'inclure des propriétés dans la balise pour les utiliser.

html5 facilite non seulement le balif de formulaire pour les développeurs, mais aussi pour les utilisateurs. Étant donné que le navigateur gère la vérification du client nativement, il y aura une plus grande cohérence entre différents sites Web, et de nombreuses pages se chargeront plus rapidement sans tout JavaScript redondant.

Commençons!

outils fiables dans la boîte à outils

Les formulaires

sont généralement la dernière chose que les développeurs incluent dans leurs pages - de nombreux développeurs trouvent des formulaires ennuyeux. La bonne nouvelle est que HTML5 injecte plus de plaisir dans le codage de forme. À la fin de ce chapitre, nous espérons que vous pourrez vous attendre à utiliser des éléments de formulaire de manière appropriée dans votre balisage.

Commençons par HTML normal notre formulaire d'inscription:

<code class="language-html"><form id="register" method="post">
  <fieldset>
    <h1>注册</h1>
    <p>我想收到您的优秀出版物。</p>
  </fieldset>

  <ul>
    <li>
      <label for="register-name">我的名字是：</label>
      <input type="text" id="register-name" name="name">
    </li>
    <li>
      <label for="address">我的电子邮件地址是：</label>
      <input type="text" id="address" name="address">
    </li>
    <li>
      <label for="url">我的网站位于：</label>
      <input type="text" id="url" name="url">
    </li>
    <li>
      <label for="password">我希望我的密码是：</label>
      <p>(至少6个字符，无空格)</p>
      <input type="password" id="password" name="password">
    </li>
    <li>
      <label for="rating">在1到10的范围内，我对HTML5的了解程度是：</label>
      <input type="text" name="rating" id="rating">
    </li>
    <li>
      <label for="startdate">请从以下日期开始我的订阅：</label>
      <input type="text" id="startdate" name="startdate">
    </li>
    <li>
      <label for="quantity">我想收到</label>
      <input type="text" name="quantity" id="quantity">
      <label for="quantity">份《The HTML5 Herald》。</label>
    </li>
    <li>
      <label for="upsell">也为我注册《The CSS3 Chronicle》</label>
      <input type="checkbox" id="upsell" name="upsell" value="CSS Chronicle">
    </li>
    <li>
      <input type="submit" id="register-submit" value="提交">
    </li>
  </ul>
</form></code>

Cet exemple de formulaire d'enregistrement utilise des éléments de formulaire disponibles depuis la première version de HTML. Ce formulaire fournit aux utilisateurs des indices sur le type de données attendu dans chaque domaine via les balises et les éléments P, donc même vos utilisateurs sur Netscape 4.7 et IE5 (je plaisante!) Peuvent comprendre ce formulaire. Cela fonctionne, mais il peut certainement être amélioré.

Dans ce chapitre, nous améliorerons cette forme pour inclure la fonctionnalité de la forme HTML5. HTML5 fournit de nouveaux types d'entrée spécifiques aux adresses e-mail, aux URL, aux nombres, aux dates, etc. De plus, HTML5 introduit également des propriétés qui peuvent être utilisées avec des types d'entrée nouveaux et existants. Ceux-ci vous permettent de fournir du texte d'espace réservé, de marquer les champs selon les besoins et de déclarer des types de données acceptables, le tout sans JavaScript requis.

Nous présenterons tous les types d'entrée nouvellement ajoutés plus loin dans ce chapitre. Avant cela, jetons un coup d'œil aux nouvelles propriétés de formulaire fournies par HTML5.

FAQ (FAQ) sur les formulaires HTML5 et les outils fiables

Quelles sont les formes HTML5 et pourquoi sont-elles importantes?

Les formulaires

HTML5 font partie intégrante du développement Web et permettent aux utilisateurs d'interagir avec les sites Web. Ils sont utilisés pour collecter les entrées des utilisateurs, telles que les coordonnées, les commentaires ou les informations de paiement. L'importance des formulaires HTML5 est leur capacité à améliorer l'expérience utilisateur, à améliorer la collecte de données et à faciliter la communication transparente entre les utilisateurs et les sites Web.

En quoi la forme HTML5 est-elle différente de la forme HTML traditionnelle?

Les formulaires HTML5 ont plusieurs améliorations par rapport aux formes HTML traditionnelles. Ils fournissent de nouveaux types d'entrée, attributs et éléments, offrant une meilleure expérience utilisateur et une meilleure vérification des données. Par exemple, les formulaires HTML5 prennent en charge le courrier électronique, la date et les types d'entrée numériques qui ne sont pas disponibles dans les formulaires HTML traditionnels.

Quels sont les outils fiables pour traiter les formulaires HTML5?

Il existe plusieurs outils fiables pour vous aider à utiliser plus efficacement les formulaires HTML5. Ceux-ci incluent des constructeurs de formulaires comme Wufoo et Jotform, des bibliothèques de validation comme Parsley.js et JQuery Validation, et les cadres CSS comme Bootstrap avec des composants de formulaire pré-conçus.

Comment trouver l'ID ou le nom HTML sous une forme?

Pour trouver l'ID ou le nom HTML dans le formulaire, vous pouvez vérifier le code source du formulaire. Cliquez avec le bouton droit sur le formulaire et sélectionnez Vérifier ou vérifier les éléments. Cela ouvrira les outils de développeur du navigateur où vous pouvez voir le code HTML pour le formulaire. L'ID ou le nom d'un élément de formulaire est généralement spécifié dans sa balise de démarrage.

Quel est le rôle de l'attribut ID dans les formulaires HTML5?

L'attribut ID dans les formulaires HTML5 est utilisé pour identifier de manière unique les éléments de forme. Ils sont essentiels pour lier des étiquettes à leurs champs de forme correspondants, localisant des éléments avec JavaScript et des éléments de style avec CSS.

Quels sont les outils sous-estimés pour traiter les formulaires HTML5?

Certains outils sous-estimés pour le traitement des formulaires HTML5 incluent la grille CSS pour créer des dispositions de formulaires flexibles, le chaudière HTML5 pour commencer par une base solide et Modernizr pour gérer la détection des fonctionnalités HTML5.

Comment assurer la sécurité de l'outil lors de l'utilisation des formulaires HTML5?

Assurer que la sécurité des outils lors de l'utilisation des formulaires HTML5 comprend les meilleures pratiques suivantes, telles que la validation des entrées des utilisateurs pour éviter les vulnérabilités de sécurité, tester vos formulaires sur différents navigateurs et appareils pour assurer la compatibilité et faire en sorte que vos outils et bibliothèques restent à jour.

Quels sont les défis courants que vous rencontrez lorsque vous utilisez des formulaires HTML5 et comment les surmonter?

Certains défis courants rencontrés lors de l'utilisation des formulaires HTML5 incluent la manipulation de l'incohérence du navigateur, la garantie de l'accessibilité et la validation des entrées utilisateur. Ceux-ci peuvent être surmontés en utilisant des outils et des bibliothèques fiables, en suivant les normes Web et en testant soigneusement vos formulaires.

Comment améliorer l'expérience utilisateur des formulaires HTML5?

L'amélioration de l'expérience utilisateur des formulaires HTML5 peut être réalisée en utilisant des balises claires et descriptives, en fournissant des messages d'erreur utiles et en rendant vos formulaires réactifs afin qu'ils affichent et fonctionnent bien sur tous les appareils.

Quelles ressources y a-t-il pour en savoir plus sur les formulaires HTML5?

Certaines ressources pour en savoir plus sur les formulaires HTML5 incluent les spécifications HTML5 sur les sites Web W3C, les didacticiels en ligne et les cours sur des plateformes telles que SitePoint et Geeksforgeeks, et les communautés de développement Web telles que Stack Overflow et Github.

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!