<fieldset> - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:fieldset

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

Introduction

To group some of the elements together, use the fieldset element.

The fieldset Element summary

Item Value
Element: fieldset
Element Type:Flow
Permitted Parents: a descendent of a form element
Local Attributes:name, form, disabled
Contents:An optional legend element, followed by flow content
Tag Style: Start and end tags
New in HTML5?No
Changes in HTML5The form attribute has been added in HTML5.

Style Convention 

fieldset {
   display: block;
   margin-start: 2px;
   margin-end: 2px;
   padding-before: 0.35em;
   padding-start: 0.75em;
   padding-end: 0.75em;
   padding-after: 0.625em;
   border: 2px groove;
}

Using the fieldset 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> 
            <p>
               <label for="name">
                  Name: <!--   w  w w.ja v  a  2 s  . c o m-->
                  <input id="name" name="name">
               </label>
            </p> 
            <p>
               <label for="name">
                  City: 
                  <input id="city" name="city">
               </label>
            </p> 
         </fieldset> 
         <fieldset> 
            <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