Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a Saas. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.
En Foundation CSS, los controles personalizados de formularios se utilizan para personalizar las entradas, como el interruptor, el control deslizante de rango, etc., con etiquetas o texto de ayuda que tiene atributos como aria-labelledby y aria-describedby adjuntos para que los controles puedan ser descritos fácilmente por el usuario
Clase de controles personalizados de formularios CSS básicos:
- slider: Esta clase se utiliza para definir el elemento como slider.
- slider-handle: esta clase se utiliza para crear un control deslizante que arrastra el usuario final.
- slider-fill: esta clase se utiliza para resaltar dinámicamente el tamaño del control deslizante que indica la posición actual del controlador.
Atributos de controles personalizados de formularios CSS de Foundation:
- aria-labelledby: Este atributo se utiliza para indicar el id de la etiqueta.
- aria-describedby: este atributo se utiliza para indicar la identificación del texto de ayuda.
- data-initial-start: este atributo se utiliza para indicar el valor mínimo en el que se debe inicializar el control deslizante.
- fin de datos: este atributo se utiliza para indicar el valor máximo de la escala del control deslizante.
Sintaxis:
<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>
Ejemplo 1: a continuación se muestra el ejemplo que ilustra el uso de controles personalizados de formularios utilizando la clase oculta .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Forms Custom Controls</title>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/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/foundation-sites@6.5.1/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>
Producción:
Controles personalizados de formularios CSS básicos
Ejemplo 2: a continuación se muestra el ejemplo que ilustra el uso de controles personalizados de formularios utilizando la clase visible .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Forms Custom Controls</title>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/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/foundation-sites@6.5.1/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>
Producción:
Referencia: https://get.foundation/sites/docs/forms.html#custom-controls-accessibility-