Foundation CSS es el marco frontend de CSS que se utiliza para crear sitios web, aplicaciones y correos electrónicos receptivos que funcionan perfectamente en cualquier dispositivo. Está escrito usando HTML, CSS y JavaScript y es utilizado por muchas compañías famosas como Amazon, Facebook, eBay, etc. Utiliza paquetes como Grunt y Libsass para una codificación y control rápidos y un compilador Saas para acelerar el desarrollo.
En Foundation CSS, Abide es una biblioteca de validación de formularios que se utiliza para validar el formulario con validadores personalizados. La entrada ignorada es uno de los validadores que ignora, deshabilita u oculta los campos de entrada.
Foundation CSS, Atributos de entrada ignorados de Abide utilizados:
- data-abide: este atributo se usa para definir que el formulario se valida usando abide.
- data-abide-ignore: este atributo se usa para especificar que el elemento se está ignorando.
- disabled: este tipo de atributo se utiliza para deshabilitar cualquier entrada del elemento.
- type=”hidden”: Este tipo de atributo se utiliza para ocultar el elemento.
- type=”reset”: este tipo de atributo se utiliza para reiniciar/vaciar el formulario.
Sintaxis:
<form data-abide>
<input type ="..." data-abide-ignore>
<input type ="..." disabled>
<input type ="hidden">
<button class="button" type="submit/reset">
Submit/Reset
</button>
</form>
Ejemplo 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Abide Ignore Input</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://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
crossorigin="anonymous">
</script>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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"
crossorigin="anonymous">
</script>
</head>
<body style="margin-inline: 30rem;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Abide Ignore Input</h3>
<form data-abide>
<div class="grid-x grid-margin-x">
<div class="cell small-12">
<input type="text"
aria-describedby="gfg"
data-abide-ignore>
<p class="help-text" id="gfg">
data-abide-ignore attribute ignores this input
</p>
</div>
<button class="button" type="submit">SUBMIT</button>
<button class="button" type="reset">RESET</button>
</div>
</form>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Foundation CSS Respetar las entradas ignoradas
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Abide Ignore Input</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://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
crossorigin="anonymous">
</script>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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"
crossorigin="anonymous">
</script>
</head>
<body style="margin-inline: 30rem;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Abide Ignore Input</h3>
<form data-abide>
<div class="grid-x grid-margin-x">
<div class="cell small-12">
<div class="cell small-12">
<input type="text"
placeholder="input is Disabled"
aria-describedby="gfg"
disabled>
<p class="help-text" id="gfg">
disabled attribute makes it disabled
</p>
</div>
<button class="button" type="submit">Submit</button>
<button class="button" type="reset">Reset</button>
</div>
</div>
</form>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Foundation CSS Respetar las entradas ignoradas
Ejemplo 3:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Abide Ignore Input</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://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
crossorigin="anonymous">
</script>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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"
crossorigin="anonymous">
</script>
</head>
<body style="margin-inline: 30rem;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Abide Ignore Input</h3>
<form data-abide>
<div class="grid-x grid-margin-x">
<div class="cell small-12">
<div class="cell small-12">
<input type="hidden"
placeholder="Hidden input"
aria-describedby="gfg" >
<p class="help-text"
id="gfg">
type="hidden" makes the input field hidden
</p>
</div>
<button class="button" type="submit">SUBMIT</button>
<button class="button" type="reset">RESET</button>
</div>
</div>
</form>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Foundation CSS Respetar las entradas ignoradas
Enlace de referencia: https://get.foundation/sites/docs/abide.html#ignored-inputs