Foundation CSS Forms Custom Controls
Last Updated :
16 Mar, 2022
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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
crossorigin="anonymous">
<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/[email protected]/dist/js/foundation.min.js">
</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.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Forms Custom Controls</title>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
crossorigin="anonymous">
<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/[email protected]/dist/js/foundation.min.js">
</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-
Similar Reads
Foundation CSS Forms 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,
3 min read
Foundation CSS Forms File Upload Button 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,
3 min read
How to build custom form controls using HTML ? There are cases when you want to perform advanced styling on some controls and feel like available native HTML form controls are not enough. In all such cases, you have to build your own controls.In this article, we will learn to create a custom control. Let us look at reconstructing the <select
3 min read
Foundation CSS Forms Inline Labels and Buttons 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,
3 min read
Foundation CSS Forms Help Text Foundation CSS is an open-source and 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, M
3 min read
Foundation CSS Controls Complete Reference Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Foundation CSS Controls use to create different types of switches, buttons, sliders, and tra
2 min read