Open In App

Foundation CSS Forms Custom Controls

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.

In Foundation CSS, Forms Custom Controls is used to customize the inputs such as switch, range slider, etc. with labels or helper text that has attributes like aria-labelledby and aria-describedby attached to them so that the controls can be easily described by the user 



Foundation CSS Forms Custom Controls Class:

Foundation CSS Forms Custom Controls Attributes:



Syntax:

<div class="slider" aria-labelledby="xyz" 
     aria-describedby="zyx" data-slider
     data-initial-start="n" data-end="n">
      <span class="slider-handle" data-slider-handle 
         role="slider">
      </span>
      
      <span class="slider-fill" data-slider-fill></span>
      <input type="hidden/visible">
      
      <p id="zyx">..........</p>
</div>

Example 1: Below is the example that illustrates the use of Forms Custom Controls using hidden class.




<!DOCTYPE html>
<html lang="en">
    
<head>
  <title>Foundation CSS Forms Custom Controls</title>
  
  <link rel="stylesheet"
        href=
        crossorigin="anonymous">
  
  <script src=
  </script>
  
  <script src=
  </script>
</head>
  
<body style="margin-inline: 30rem;">
  <center>
    <h1 style="color:green;">
      GeeksforGeeks
    </h1>
  
    <h3>Foundation CSS Forms Custom Controls</h3>
  
    <label id="gfg-label">GeeksforGeeks Rating</label>
    <div class="slider" 
         aria-labelledby="gfg-label" 
         aria-describedby="gfg-help-text" 
         data-slider
         data-initial-start="1"
         data-end="100">
        <span class="slider-handle" 
              data-slider-handle 
              role="slider">
        </span>
        <span class="slider-fill"
              data-slider-fill></span>
        <br>
        <input type="hidden">
        <p id="gfg-help-text">How much will you rate?</p>
  
    </div>
  </center>
  
  <script>
    $(document).ready(function () {
      $(document).foundation();
    })
  </script>
</body>
  
</html>

Output:

Foundation CSS Forms Custom Controls

Example 2: Below is the example that illustrates the use of Forms Custom Controls using visible class.




<!DOCTYPE html>
<html lang="en">
    
<head>
  <title>Foundation CSS Forms Custom Controls</title>
  <link rel="stylesheet" 
        href=
        crossorigin="anonymous">
  <script src=
  </script>
  <script src=
  </script>
</head>
  
<body style="margin-inline: 30rem;">
  <center>
    <h1 style="color:green;">
      GeeksforGeeks
    </h1>
  
    <h3>Foundation CSS Forms Custom Controls</h3>
  
    <label id="gfg-label">GeeksforGeeks Rating</label>
    <div class="slider" 
         aria-labelledby="gfg-label" 
         aria-describedby="gfg-help-text" 
         data-slider
         data-initial-start="1" 
         data-end="100">
        <span class="slider-handle" 
              data-slider-handle 
              role="slider">
        </span>
        <span class="slider-fill" 
              data-slider-fill></span>
        <br>
        <input type="visible">
        <p id="gfg-help-text">How much will you rate?</p>
  
    </div>
  </center>
  
  <script>
    $(document).ready(function () {
      $(document).foundation();
    })
  </script>
</body>
  
</html>

Output:

Reference: https://get.foundation/sites/docs/forms.html#custom-controls-accessibility-


Article Tags :