Fondation - Notions de base sur les étiquettes

La description

Pour créer une étiquette, vous devez ajouter la classe .label à un élément. Par exemple, vous pouvez utiliser la balise <span> ou même d'autres balises fonctionnent bien. Les étiquettes peuvent être utilisées pour décrire un autre élément. Lier deux éléments ensemble peut être fait en fournissant une étiquette, un ID unique et sur l'élément principal, référence l'ID dans l' attribut aria-describedby .

Exemple

L'exemple suivant montre comment utiliser l' étiquette dans Foundation.

<html>
   <head>
      <title>Label Basics</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>

   </head>

   <body>
      <span class = "label">Default</span>
      <p aria-describedby = "email">Re: re: A Christmas gift for you!</p>
      <span class = "label" id = "email">Maximum Priority</span>

      
      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

  • Enregistrez le code html ci-dessus label_basics.html fichier.

  • Ouvrez ce fichier HTML dans un navigateur, une sortie s'affiche comme indiqué ci-dessous.

Lorsque plusieurs étiquettes décrivent un élément, vous devez placer plusieurs ID dans aria-describedby . Pour plus d'informations, consultez Étiqueter plusieurs ID .