Foundation - Fieldset Styles

Description

Fieldset is used to group the related elements together. It can be implemented in Foundation by using .fieldset class.

Example

The following example demonstrates the use of fieldset styles in Foundation.

Live Demo

<html>
   <head>
      <title>Form Fieldset Styles</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>

   </head>

   <body>
      <fieldset class = "fieldset">
         <legend>Select your favourite sport.</legend>

         <input id = "football" type = "checkbox">
         <label for = "football">Football</label>

         <input id = "cricket" type = "checkbox">
         <label for = "cricket">Cricket</label>

         <input id = "baseball" type = "checkbox">
         <label for = "baseball">Baseball</label>

         <input id = "basketball" type = "checkbox">
         <label for = "basketball">Basketball</label>
      </fieldset>

      
      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>

   </body>
</html>

Output

Let us carry out the following steps to see how the above given code works −

Save the above given html code forms_fieldset_styles.html file.
Open this HTML file in a browser, an output is displayed as shown below.

foundation_forms.htm