Foundation CSS es un marco front-end receptivo y de código abierto creado por ZURB en septiembre de 2011 que simplifica la creación de sorprendentes sitios web, aplicaciones y correos electrónicos receptivos que funcionan en cualquier dispositivo. Muchas empresas, como Facebook, eBay, Mozilla, Adobe e incluso Disney, lo utilizan. El marco se basa en bootstrap, que es similar a SaaS. 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.
Abide in Foundation CSS es una biblioteca de validación de formularios que se utiliza para validar el formulario con validadores personalizados. Foundation CSS Abide Initial State se usa para especificar que un campo de entrada en un formulario está en el estado inicial/inicial. Es útil para crear formularios con diferentes atributos de validación personalizados. Hay varias formas diferentes de agregar estados de error, entradas ignoradas, casillas de verificación requeridas obligatoriamente o casillas de radio. Aquí, se discuten los conceptos básicos de la creación del estado inicial del formulario.
Foundation CSS Abide Clases de estado inicial :
- is-invalid-input: esta clase se usa para permitir verificar si la entrada es válida de acuerdo con las etiquetas de entrada utilizadas.
- form-error is-visible : esta clase se usa para mostrar que el campo es obligatorio.
Atributos de estado inicial de Foundation CSS Abide:
- data-abide : este atributo se usa para definir que el formulario se valida usando abide.
- data-abide-error : este atributo se utiliza para especificar que el elemento se encuentra en un estado de error.
- 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.
- disabled : este tipo de atributo se utiliza para deshabilitar cualquier entrada del elemento.
Sintaxis:
<form data-abide> <div data-abide-error class="alert callout" ...> </div> <input class="is-invalid-input" aria-invalid="true" ...> <span class="form-error is-visible">...</span> ... </form>
Ejemplo 1: este ejemplo ilustra el estado inicial de abede en Foundation CSS .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Abide Initial State</title>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
</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>
</head>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>Foundation CSS Abide Initial State</h3>
<form data-abide>
<div data-abide-error
class="alert callout"
style="display:none;">
<p>There are some errors in the form.</p>
</div>
<label>
GFG Courses
<input id="gfg"
aria-describedby="gfg"
type="text" required>
<span id="gfg" class="form-error">
This field is required.
</span>
</label>
<button class="button" type="submit">
SUBMIT
</button>
<button class="button" type="reset">
RESET
</button>
</form>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción :
Fundación CSS Abide Estado inicial
Ejemplo 2 : este ejemplo ilustra el estado inicial con el campo de entrada deshabilitado en Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Abide Initial State</title>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
</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>
</head>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>Foundation CSS Abide Initial State</h3>
<form data-abide>
<div data-abide-error
class="alert callout"
style="display:none;">
<p>There are some errors in the form.</p>
</div>
<label>
GFG Courses (input field disabled)
<input id="gfg"
aria-describedby="gfg"
type="text"
required disabled>
<span id="gfg" class="form-error">
This field is required.
</span>
</label>
<button class="button"
type="submit">
SUBMIT
</button>
<button class="button"
type="reset">
RESET
</button>
</form>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Fundación CSS Abide Estado inicial
Referencia: https://get.foundation/sites/docs/abide.html#initial-state