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.

Ajoutez une balise

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

dans la balise

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

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é.

Résumé

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.