## fieldset and legend

Used to group related choices and even sets.

fieldset and legend elements can further help group related input fields.

Example 5.13 - Form fieldset and legend elements - Example 5.13
<form method="get" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"><div><fieldset><legend>Name</legend><label>First Name <input type="text" name="fname" size="30"/></label><label>Last Name <input type="text" name="lname" size="30"/></label></fieldset><fieldset><legend>Sports</legend><fieldset><legend>Do you like basketball?</legend><label><input type="radio" name="basketball" value="Y"/> Yes</label><label><input type="radio" name="basketball" value="N"/> No</label></fieldset><fieldset><legend>Do you like baseball?</legend><label><input type="radio" name="baseball" value="Y"/> Yes</label><label><input type="radio" name="baseball" value="N"/> No</label></fieldset></fieldset><button type="submit">Submit</button></div></form>label { display: block; } fieldset { margin-top: 1rem;} button { display: block; margin-top: 1rem; padding: 0.5rem 1rem;}

- Markup
- Style
- Display

     <form method="get" action="https://cs12.net/form/submit.php">
       <div>
         <fieldset>
           <legend>Name       </legend>
           <label>First Name
             <input type="text" name="fname" size="30"/>
           </label>
           <label>Last Name
             <input type="text" name="lname" size="30"/>
           </label>     </fieldset>
         <fieldset>
           <legend>Sports       </legend>
           <fieldset>
             <legend>Do you like basketball?         </legend>
             <label>
               <input type="radio" name="basketball" value="Y"/>
    Yes         </label>
             <label>
               <input type="radio" name="basketball" value="N"/>
    No         </label>       </fieldset>
           <fieldset>
             <legend>Do you like baseball?         </legend>
             <label>
               <input type="radio" name="baseball" value="Y"/>
    Yes         </label>
             <label>
               <input type="radio" name="baseball" value="N"/>
    No         </label>       </fieldset>     </fieldset>
         <button type="submit">Submit     </button>
       </div>
     </form>

In `style` element (`<style>`) within `head` element:

    label { display: block; }
    fieldset { margin-top: 1rem;}
    button { display: block; margin-top: 1rem; padding: 0.5rem 1rem;}