<legend> - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:legend

  1. HOME
  2. HTML CSS
  3. HTML Tag
  4. legend

Introduction

Adding a legend element to each of your fieldset elements to show the context for the elements.

The legend Element summary

Item Value
Element: legend
Element Type:N/A
Permitted Parents: The fieldset element
Local Attributes:None
Contents:Phrasing Content
Tag Style: Start and end tags
New in HTML5?No
Changes in HTML5 None

Style Convention 

legend {
   display: block;
   padding-start: 2px;
   padding-end: 2px;
   border: none;
}

The legend element must be the first child of a fieldset element.

Using the legend Element

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
   <head> 
      <title>Example</title> 
   </head> 
   <body> 
      <form method="post" action="http://example.com/form"> 
         <fieldset> 
            <legend>Enter Your Details</legend> 
            <p>
               <label for="name">
                  Name: <!--   ww w . j a v a  2s. c  o m-->
                  <input id="name" name="name">
               </label>
            </p> 
            <p>
               <label for="name">
                  City: 
                  <input id="city" name="city">
               </label>
            </p> 
         </fieldset> 
         <fieldset> 
            <legend>Vote For Your Three Favorite</legend> 
            <p>
               <label for="fave1">
                  #1: 
                  <input id="fave1" name="fave1">
               </label>
            </p> 
            <p>
               <label for="fave2">
                  #2: 
                  <input id="fave2" name="fave2">
               </label>
            </p> 
            <p>
               <label for="fave3">
                  #3: 
                  <input id="fave3" name="fave3">
               </label>
            </p> 
         </fieldset> 
         <button>Submit Vote</button> 
      </form>  
   </body>
</html>

Related Tutorials