Légende du champ de formulaire HTML

Introduction

La balise HTML <legend> est un moyen important de fournir une légende ou un titre au contenu enfant dans la balise HTML <fieldset>. La balise <legend> est utilisée pour identifier le contenu du fieldset et donner un titre approprié à la page. Dans ce laboratoire, nous allons apprendre à utiliser la balise <legend> et diverses propriétés CSS avec elle.

Note: Vous pouvez pratiquer le codage dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Skills Graph

Ajoutez une balise <fieldset>

Tout d'abord, ouvrez votre éditeur de code et créez un nouveau fichier appelé index.html. Ajoutez la structure de base au fichier en tapant html puis appuyez sur la touche tab.

Ajoutez une balise <fieldset> à votre document HTML.

<fieldset>
  <legend></legend>
</fieldset>

Ajoutez la balise <legend> dans la balise <fieldset>

Ajoutez une balise <legend> à l'intérieur de la balise <fieldset> pour créer un en-tête.

<fieldset>
  <legend>Contact Information</legend>
</fieldset>

Utilisez les propriétés CSS avec la balise <legend>

Ajoutons quelques propriétés CSS à notre balise <legend> pour la rendre plus attrayante.

<style>
  legend {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    text-align: center;
  }
</style>

Enregistrez le fichier et ouvrez le fichier index.html dans votre navigateur web préféré.

Sommaire

En résumé, la balise HTML <legend> nous aide à fournir une légende ou un titre au contenu enfant dans la balise HTML <fieldset>. Nous avons utilisé diverses propriétés CSS avec elle pour la rendre plus attrayante. Nous espérons que vous savez désormais utiliser la balise <legend> pour créer des en-têtes ou des titres dans vos fichiers HTML.