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 son la forma de recibir información del usuario que se cargará en el servidor para su procesamiento. La entrada proporcionada por el usuario puede ser de diferentes tipos, como contraseña, texto, correo electrónico, etc. Foundation CSS ayuda a crear un sistema de diseño de formularios potente y versátil. Las etiquetas y botones en línea se pueden usar para adjuntar las etiquetas de entrada con contenido adicional, ya sea en el lado izquierdo o derecho o en ambos, como una etiqueta en el lado izquierdo y un botón en el lado derecho, que ayuda a mejorar la interactividad. del formulario web.
Foundation CSS Forms Clase de etiquetas y botones en línea:
- grupo de entrada: la etiqueta de entrada que presenta el contenido adicional debe estar envuelta por una etiqueta con la clase de grupo de entrada.
- input-group-label: esta clase se utiliza para agrupar el campo de entrada que tiene la etiqueta de texto.
- input-group-field: esta clase se utiliza para agrupar tipos similares de campos de entrada.
- input-group-button: Esta clase se utiliza para agregar el botón al grupo de los campos de entrada.
Sintaxis:
<div class="input-group">
<div class="input-group-label">Label Name</div>
<input class="input-group-field">
<div class="input-group-button">
<input type="submit" class="button" value="Submit">
</div>
</div>
Ejemplo 1: este ejemplo describe la etiqueta FormInput con una etiqueta en línea en Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Foundation CSS Forms Inline Labels and Buttons </title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <title> Foundation CSS Inline labels and buttons </title> </head> <body class="grid-x align-middle align-center" style="height: 95vh; width: 95vw;"> <div class="grid-x align-middle align-center"> <form> <h2 style="color:green"> GeeksforGeeks </h2> <h4> Foundation CSS Inline labels and Buttons </h4> <div class="grid-x align-middle align-center"> <div class="input-group grid-container"> <input class="input-group-field" type="number"> <div class="input-group-label">₹</div> </div> <input type="submit" class="button" value="Submit"> </div> </form> </div> </body> </html>
Producción:
Etiqueta de entrada con etiqueta en línea
Ejemplo 2: este ejemplo describe la etiqueta de entrada de formulario con una etiqueta en línea y un botón en línea en Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Foundation CSS Forms Inline Labels and Buttons </title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <title> Foundation CSS Inline labels and buttons </title> </head> <body class="grid-x align-middle align-center" style="height: 95vh; width: 95vw;"> <div class="grid-x align-middle align-center"> <form> <h2 style="color:green"> GeeksforGeeks </h2> <h4> Foundation CSS Inline labels and buttons </h4> <div class="grid-x align-middle align-center"> <div class="input-group grid-container"> <div class="input-group-label">₹</div> <input class="input-group-field" type="number"> <div class="input-group-button"> <input type="submit" class="button" value="Submit"> </div> </div> </div> </form> </div> </body> </html>
Producción:
Etiqueta de entrada con etiqueta en línea y botón en línea
Referencia : https://get.foundation/sites/docs/forms.html#inline-labels-and-buttons
Publicación traducida automáticamente
Artículo escrito por tejsidda34 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA