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 carga 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.
El Posicionamiento de etiquetas se puede utilizar para colocar la etiqueta con las entradas del formulario. Estas etiquetas se pueden poner dentro de las diferentes celdas o columnas de las entradas. Envolver la etiqueta de la etiqueta con una etiqueta div, bajo la influencia de una cuadrícula, puede actuar como una columna. También podemos realinear la etiqueta especificando las diferentes clases disponibles como .text-right , .text-left , .text-center, .float-left, .float-right, etc. De esta manera, podemos simplemente colocar la etiqueta de la etiqueta usando varias clases.
Clases de posicionamiento de etiquetas Foundation CSS:
- grid-x : esta clase crea la estructura de cuadrícula en la dirección horizontal.
- text-right: Posiciona el texto de la etiqueta en el lado interior derecho del contenedor.
- text-left: Posiciona el texto de la etiqueta en el lado interior izquierdo del contenedor.
- text-center: Posiciona el texto de la etiqueta al centro horizontalmente.
- float-left : Se utiliza para hacer flotar el elemento hacia la izquierda.
- float-right : Se utiliza para hacer flotar el elemento a la derecha.
- medio: Posiciona el texto de la etiqueta al centro verticalmente.
Nota: Las clases de texto son análogas a las clases flotantes y se pueden intercambiar.
Sintaxis:
<form>
<div class="grid-x">
<div class="cell">
<label for="input-label" class="position-class">
Name of Label
</label>
</div>
<div class="cell">
<input type="text" id="input-label"
placeholder="Input element">
</div>
</div>
</form>
Exploraremos las diversas posiciones de una etiqueta y su implementación a través de los ejemplos.
Ejemplo 1 : En el siguiente ejemplo, hemos colocado la etiqueta en la esquina más a la izquierda.
HTML
<!DOCTYPE html> <html lang="en"> <head> <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"> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" crossorigin="anonymous"> </script> <title>Label Positioning</title> </head> <body> <div> <div class="float-center"> <h2 style="color:green">GeeksforGeeks</h2> <h4> Foundation CSS Label Positioning </h4> </div> <form> <div class="grid-x" style="width: 40%; margin-top: 20px;"> <div class="small-4 cell"> <label for="input-label" class="text-left">Age </label> </div> <div class="small-7 cell"> <input type="number" id="input-label" placeholder="Enter your Age"> </div> </div> </form> </div> </body> </html>
Producción:
Etiqueta colocada en la esquina más a la izquierda
Ejemplo 2: En el siguiente ejemplo, hemos colocado la etiqueta en la esquina más a la derecha, cerca de la etiqueta de entrada.
HTML
<!DOCTYPE html> <html lang="en"> <head> <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"> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" crossorigin="anonymous"> </script> <title>Label Positioning</title> </head> <body> <div> <div class="float-center"> <h2 style="color:green">GeeksforGeeks</h2> <h4>Foundation CSS Label Positioning</h4> </div> <form> <div class="grid-x grid-padding-x" style="width: 40%; margin-top: 20px;"> <div class="small-4 cell"> <label for="input-label" class="text-right">Age </label> </div> <div class="small-7 cell"> <input type="number" id="input-label" placeholder="Enter your Age"> </div> </div> </form> </div> </body> </html>
Producción:
Etiqueta colocada en la esquina más a la derecha
Ejemplo 3: En el siguiente ejemplo, hemos centrado la etiqueta verticalmente en su contenedor.
HTML
<!DOCTYPE html> <html lang="en"> <head> <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"> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" crossorigin="anonymous"> </script> <title>Label Positioning</title> </head> <body> <div> <div class="float-center"> <h2 style="color:green">GeeksforGeeks</h2> <h4>Foundation CSS Label Positioning</h4> </div> <form> <div class="grid-x grid-padding-x" style="width: 40%; margin-top: 20px;"> <div class="small-4 cell"> <label for="input-label" class="text-right middle">Age </label> </div> <div class="small-7 cell"> <input type="number" id="input-label" placeholder="Enter your Age"> </div> </div> </form> </div> </body> </html>
Producción:
Etiqueta centrada verticalmente
Ejemplo 4: En el siguiente ejemplo, hemos centrado la etiqueta horizontal y verticalmente.
HTML
<!DOCTYPE html> <html lang="en"> <head> <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"> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" crossorigin="anonymous"> </script> <title>Label Positioning</title> </head> <body> <div> <div class="float-center"> <h2 style="color:green">GeeksforGeeks</h2> <h4>Foundation CSS Label Positioning</h4> </div> <form> <div class="grid-x grid-padding-x" style="width: 40%; margin-top: 20px;"> <div class="small-4 cell"> <label for="input-label" class="text-center middle">Age </label> </div> <div class="small-7 cell"> <input type="number" id="input-label" placeholder="Enter your Age"> </div> </div> </form> </div> </body> </html>
Producción:
Etiqueta centrada horizontal y verticalmente
Referencias: https://get.foundation/sites/docs/forms.html
Publicación traducida automáticamente
Artículo escrito por tejsidda34 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA