{"id":4587,"date":"2015-05-28T12:15:42","date_gmt":"2015-05-28T09:15:42","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=4587"},"modified":"2017-12-19T13:58:55","modified_gmt":"2017-12-19T11:58:55","slug":"html5-fieldset-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/html5\/html5-fieldset-example\/","title":{"rendered":"HTML5 Fieldset Example"},"content":{"rendered":"

The aim of this example is to present you to tha fieldset<\/code> tag of HTML.<\/p>\n

The fieldset is used to group similar and related elements, it draws a line box around the content inside. It is supported by all browsers.<\/p>\n

It will be necessary whenever you need to gather elements for example of the same type like inputs, or just normal organised text list.<\/p>\n

Let us first look at the basics, that is, main application, default styling and available html attributes and then see it more specifically in an example.<\/p>\n

You do not need any extra files to download before we start.
\n 
\n[ulp id=’tgm4cmEWcKUikZNn’]<\/p>\n

1. Basic Setup & Application <\/h2>\n

Start with these two essential steps to get this going.<\/p>\n

1.1 Basic Setup <\/h3>\n

Go ahead and create a new html file inside your project folder with its basic syntax:<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>HTML5 Fieldset Example<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<!-- STYLE SECTION -->\r\n\r\n<style type=\"text\/css\">\r\n\r\n<\/style>\r\n\r\n<!-- HTML SECTION -->\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
1.2 Basic Application <\/h3>\n
So, create a fieldset tag (open and close it) and add some text inside like so:<\/p>\n
<!-- HTML SECTION  -->\r\n\r\n<fieldset>This is a fieldset<\/fieldset>\r\n<\/pre>\n
This is how a fieldset looks like, for now.
\n
\"Fieldset<\/a>
Fieldset Besic Application<\/figcaption><\/figure><\/p>\n
 2. Attributes, Default Styling and Adding Elements <\/h2>\n
In this section we will see how this element can be used.<\/p>\n
2.1 Attributes <\/h3>\n
There are three main attributes you can give to the fieldset element in html:<\/p>\n
1. disabled<\/code> – indicates an inactive\/non-editable view of the element\/s inside<\/p>\n
\t<fieldset disabled = \"disabled\"><\/pre>\n
2. form<\/code> – specifies one or more forms the fieldset belongs to<\/p>\n
\t<fieldset form= \"form_id\"><\/pre>\n
3. name<\/code> – gives the fieldset a name (to be referred in other applications)<\/p>\n
\t<fieldset name= \"inputs\"><\/pre>\n
Do notice that all these elements are new attributes that were announced with HTML version 5.<\/p>\n
2.2 Default Styling <\/h3>\n
Remember the element from the basic example had a line wrapping the box. This is because of this default styling:<\/p>\n
\r\nfieldset { \r\n    display: block;\r\n    margin-left: 2px;\r\n    margin-right: 2px;\r\n    padding-top: 0.35em;\r\n    padding-bottom: 0.625em;\r\n    padding-left: 0.75em;\r\n    padding-right: 0.75em;\r\n    border: 2px groove (internal value);\r\n}\r\n<\/pre>\n
But we will change this, and maybe convert it into a modern-looking content wrapper.<\/p>\n
2.3 Adding Elements inside the Fieldset <\/h3>\n
You can add various elements inside a fieldset, like lists, inputs, paragraphs etc. Lets begin adding a legend<\/code>.<\/p>\n
A legend will show as a text on top of the fieldset and will interrupt the wrapping line in its place. Take a look:<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<fieldset>\r\n\t<legend>I am a legend here.<\/legend>\r\n\t<p>I am a random paragraph text :(<\/p>\r\n<\/fieldset>\r\n<\/pre>\n
\"Legend<\/a>
Legend and Paragraph inside the Fieldset<\/figcaption><\/figure>
\nI added a fixed width of 30em to the fieldset for better viewing the whole element.<\/p>\n
Now let’s see an example where we add inputs inside the fieldset, take a look at the code below:<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<fieldset>\r\n\t<legend>Question 1<\/legend>\r\n\t<p>Who is the CEO of the famous Unknown social network?<\/p>\r\n\t<input type=\"radio\" name=\"foo\">Jack <br\/>\r\n\t<input type=\"radio\" name=\"foo\">Ella <br\/>\r\n\t<input type=\"radio\" name=\"foo\">Miller <br\/>\r\n\t<input type=\"radio\" name=\"foo\">Ilias <br\/>\r\n\t<br>\r\n\t<input type=\"submit\">\r\n<\/fieldset>\r\n<\/pre>\n
We added a legend indicating this is the first question, a paragraph conatining the question and four radio buttons representing answers. Also we added a submit button at the bottom of the fieldset.
\n
\"Fieldset<\/a>
Fieldset with various Elements inside<\/figcaption><\/figure><\/p>\n
Well, now you know what is most important about the fieldset. The next part is just some styling.<\/p>\n
3. Stlyling the Fieldset <\/h2>\n
There is not too much to style in a fieldset that is different to normal box elements you create.<\/p>\n
One of the styling I like for a fieldset would be:<\/p>\n
\r\n<!-- STYLE  SECTION -->\r\n\r\n  <style type=\"text\/css\">\r\n\r\n  fieldset {\r\n  \tfont-family: \"Montserrat\", \"sans-serif\"; \/* just a custom font *\/\r\n  \twidth: 30em;\t\t\t\t\t\t\t\/* fixed width for the box *\/\r\n  \tborder-radius: 0.5em;\t\t\t\t\t\/* applied border radius *\/\r\n  \tborder: 0.1em solid #ccc;\t\t\t\t\/* custom border style *\/\r\n  \tbackground-color: #fffde1;\t\t\t\t\/* added a background color *\/\r\n  \tbox-shadow: 0.08em 0.05em 0.08em #ccc;\t\/* added a soft box shadow *\/\r\n  }\r\n\r\n  <\/style>\r\n<\/pre>\n
The nice plain view would be:
\n
\"A<\/a>
A Simple Fieldset Styling<\/figcaption><\/figure><\/p>\n
Well, that’s all you need to know about styling, no extraordinary styling is applied to these kind of elements.<\/p>\n
You can easily create forms with fieldsets inside to organize your information. Look at the code below for example:<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<form>\r\n<h3>STEP 1<\/h3>\r\n<fieldset>\r\n\t<legend>Choose two friends.<\/legend>\r\n\t<p>Who is the CEO of the famous Unknown social network?<\/p>\r\n\t<input type=\"radio\" name=\"foo\">Jack <br\/>\r\n\t<input type=\"radio\" name=\"foo\">Ella <br\/>\r\n\t<input type=\"radio\" name=\"foo\">Miller <br\/>\r\n\t<input type=\"radio\" name=\"foo\">Ilias <br\/>\r\n<\/fieldset>\r\n\r\n<h3>STEP 2<\/h3>\r\n\r\n\t<fieldset>\r\n\t\t<legend>Personal Details<\/legend><br\/>\r\n\t\t<label for=name>Name<\/label>\r\n\t\t<input name=\"name\" placeholder=\"Your Name\" type=\"text\"><br\/>\r\n\t\t<label for=email>Email<\/label>\r\n\t\t<input name=\"email\" placeholder=\"Your E-Mail\" type=\"text\"><br\/>\r\n\t\t<label for=address>Address<\/label><br\/>\r\n\t\t<textarea name=\"address\" placeholder=\"Your Address\" type=\"text\"><\/textarea><br\/>\r\n\t<\/fieldset>\r\n\r\n\t<h3>STEP 3<\/h3>\r\n\r\n\t<fieldset>\r\n\t<legend>Destinations<\/legend>\r\n\t<p>Where would you like to travel?<\/p>\r\n\t<input type=\"checkbox\" name=\"foo\">Brasil <br\/>\r\n\t<input type=\"checkbox\" name=\"foo\">New York <br\/>\r\n\t<input type=\"checkbox\" name=\"foo\">Sydney <br\/>\r\n\t<input type=\"checkbox\" name=\"foo\">Miami <br\/>\r\n<\/fieldset>\r\n<br>\r\n<input type=\"submit\">\r\n<\/form>\r\n<\/pre>\n
With a few lines of CSS:<\/p>\n
\r\n<!-- STYLE  SECTION -->\r\n\r\n<style type=\"text\/css\">\r\n\r\nfieldset {\r\n\tfont-family: \"Montserrat\", \"sans-serif\"; \/* just a custom font *\/\r\n\twidth: 30em;\t\t\t\t\t\t\t\/* fixed width for the box *\/\r\n\tborder-radius: 0.5em;\t\t\t\t\t\/* applied border radius *\/\r\n\tborder: 0.1em solid #ccc;\t\t\t\t\/* custom border style *\/\r\n\tbackground-color: #fffde1;\t\t\t\t\/* added a background color *\/\r\n\tbox-shadow: 0.08em 0.05em 0.08em #ccc;\t\/* added a soft box shadow *\/\r\n\tmargin-bottom: 2em;\r\n}\r\n\r\nform {\r\n\tfont-family: \"Montserrat\", \"sans-serif\";\r\n\tborder: 0.1em solid #ccc;\r\n\tborder-radius: 0.5em;\r\n\twidth: 33em;\r\n\tbackground-color: #f3f3f3;\r\n\tpadding: 2em;\r\n}\r\n\r\ninput {\r\n\tmargin-bottom: 1em;\r\n}\r\n\r\ntextarea {\r\n\twidth: 20em;\r\n\theight: 5em;\r\n}\r\n\r\n<\/style>\r\n<\/pre>\n
In this example I added three fieldsets each with its own type of information inside.
\n
\"Form<\/a>
Form with Fieldsets Inside<\/figcaption><\/figure><\/p>\n
4. Conclusion <\/h2>\n
To conclude, we can say that using fieldsets allow you to mark up your data in the most semantic way available. <\/p>\n
Consider that placing your fields in a fieldset is more descriptive than placing your fields in a div. <\/p>\n
The div tells you nothing about the relationship between the fields, a fieldset tells you there is a relationship.<\/p>\n
5. Download <\/h2>\n
Download<\/strong>
\nYou can download the full source code of this example here: HTML5 Fieldset Example<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
The aim of this example is to present you to tha fieldset tag of HTML. The fieldset is used to group similar and related elements, it draws a line box around the content inside. It is supported by all browsers. It will be necessary whenever you need to gather elements for example of the same …<\/p>\n","protected":false},"author":75,"featured_media":914,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-4587","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5"],"yoast_head":"\nHTML5 Fieldset Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"The aim of this example is to present you to tha fieldset tag of HTML. The fieldset is used to group similar and related elements, it draws a line box\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/html5\/html5-fieldset-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML5 Fieldset Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"The aim of this example is to present you to tha fieldset tag of HTML. The fieldset is used to group similar and related elements, it draws a line box\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/html5\/html5-fieldset-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-05-28T09:15:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-19T11:58:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-fieldset-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-fieldset-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"HTML5 Fieldset Example\",\"datePublished\":\"2015-05-28T09:15:42+00:00\",\"dateModified\":\"2017-12-19T11:58:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-fieldset-example\/\"},\"wordCount\":649,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-fieldset-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"articleSection\":[\"HTML5\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-fieldset-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-fieldset-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-fieldset-example\/\",\"name\":\"HTML5 Fieldset Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-fieldset-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-fieldset-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"datePublished\":\"2015-05-28T09:15:42+00:00\",\"dateModified\":\"2017-12-19T11:58:55+00:00\",\"description\":\"The aim of this example is to present you to tha fieldset tag of HTML. The fieldset is used to group similar and related elements, it draws a line box\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-fieldset-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-fieldset-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-fieldset-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-fieldset-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/html5\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML5 Fieldset Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML5 Fieldset Example - Web Code Geeks - 2026","description":"The aim of this example is to present you to tha fieldset tag of HTML. The fieldset is used to group similar and related elements, it draws a line box","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/html5\/html5-fieldset-example\/","og_locale":"en_US","og_type":"article","og_title":"HTML5 Fieldset Example - Web Code Geeks - 2026","og_description":"The aim of this example is to present you to tha fieldset tag of HTML. The fieldset is used to group similar and related elements, it draws a line box","og_url":"https:\/\/www.webcodegeeks.com\/html5\/html5-fieldset-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-05-28T09:15:42+00:00","article_modified_time":"2017-12-19T11:58:55+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-fieldset-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-fieldset-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"HTML5 Fieldset Example","datePublished":"2015-05-28T09:15:42+00:00","dateModified":"2017-12-19T11:58:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-fieldset-example\/"},"wordCount":649,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-fieldset-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","articleSection":["HTML5"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-fieldset-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-fieldset-example\/","url":"https:\/\/www.webcodegeeks.com\/html5\/html5-fieldset-example\/","name":"HTML5 Fieldset Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-fieldset-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-fieldset-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","datePublished":"2015-05-28T09:15:42+00:00","dateModified":"2017-12-19T11:58:55+00:00","description":"The aim of this example is to present you to tha fieldset tag of HTML. The fieldset is used to group similar and related elements, it draws a line box","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-fieldset-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-fieldset-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-fieldset-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-fieldset-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"HTML5","item":"https:\/\/www.webcodegeeks.com\/category\/html5\/"},{"@type":"ListItem","position":3,"name":"HTML5 Fieldset Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/4587","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=4587"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/4587\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/914"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=4587"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=4587"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=4587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}