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.
Los formularios en una página web permiten a un usuario ingresar datos que se envían a un servidor para su procesamiento. Los formularios pueden parecerse a formularios en papel o de base de datos y le permiten al usuario completar varios tipos de campos de entrada, como tipo de texto, tipo de contraseña, tipo de número, tipo de correo electrónico o tal vez algún otro tipo de entrada. Los formularios se utilizan generalmente cuando se desea recopilar datos del usuario. Por ejemplo, un usuario desea comprar una bolsa en línea, por lo que primero debe ingresar su dirección de envío en el formulario de dirección y luego agregar su detalle de pago en el formulario de pago para realizar un pedido.
El texto de ayuda generalmente se coloca debajo de un campo en particular (generalmente debajo de un campo de entrada) que generalmente se usa para especificar qué tipo de entrada se debe proporcionar y aclara su propósito.
Clases de texto de ayuda de formularios CSS básicos:
- texto de ayuda: esta clase crea y aplica estilo al texto como un texto de ayuda.
- aria-descrito por: Este es el atributo del elemento de entrada cuyo valor debe ser igual al valor de id del texto de ayuda para conectar estos dos elementos.
Sintaxis:
<input type="..." aria-describedby="xyz"> <p class="help-text" id="xyz">....</p>
Nota: El valor del atributo del ID del texto de ayuda debe ser el mismo que el valor del atributo descrito por aria .
Ejemplo 1: En el siguiente ejemplo, usamos texto de ayuda para sugerir al usuario las reglas para una contraseña.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Forms Help Text</title>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"/>
<!-- Compressed JavaScript -->
<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>
<style>
body{
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<strong>Foundation CSS Forms Help Text</strong>
</center>
<div style="width:60%;">
<label>Password
<input type="password"
aria-describedby="passwordHelpText">
</label>
<p class="help-text" id="passwordHelpText">
Password must contain at least 8 characters :
with atleast a number, a upper case, a lower
case and a special character.
</p>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
Producción:
Ejemplo 2: en el siguiente ejemplo, hemos creado un formulario de plantilla de inicio de sesión con uso en tiempo real del texto de ayuda.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Forms Help Text</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <link rel="stylesheet" href= "//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"/> <!-- Compressed JavaScript --> <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> <center> <h1 style="color:green;">GeeksforGeeks</h1> <strong>Foundation CSS Forms Help Text</strong> </center> <form> <div class="grid-container" style="width: 40%;"> <label>Username<input type="text" placeholder="Enter your name:"> </label> <label>ID <input type="text" placeholder="Enter your college"> </label> <label>Password <input type="password" aria-describedby="passwordHelpText"> </label> <p class="help-text" id="passwordHelpText"> Password must contain at least 8 characters : with atleast a number, a upper case, a lower case and a special character.</p> </div> </form> <script> $(document).foundation(); </script> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/forms.html#help-text-accessibility
Publicación traducida automáticamente
Artículo escrito por tpraneeth2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA