Open In App

Foundation CSS Forms Custom Controls

Improve
Improve
Like Article
Like
Save
Share
Report

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:

  • slider: This class is used to define the element as a slider.
  • slider-handle: This class is used to make a slider handle that the end-user drags.
  • slider-fill: This class is used to highlight the slider size dynamically that indicates the current position of the handle.

Foundation CSS Forms Custom Controls Attributes:

  • aria-labelledby: This attribute is used to indicate the label id.
  • aria-describedby: This attribute is used to indicate the help-text id.
  • data-initial-start: This attribute is used to indicate the minimum value at which the slider should be initialized.
  • data-end: This attribute is used to indicate the maximum value of the slider scale.

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.

HTML




<!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

Foundation CSS Forms Custom Controls

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

HTML




<!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:

Foundation CSS Forms Custom Controls

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



Last Updated : 16 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads