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.
Foundation CSS Kitchen Sink tiene los elementos básicos para funcionar bien en nuestros sitios web y aplicaciones. El botón de carga de archivos se puede utilizar para cargar los archivos especificando el tipo de entrada como un archivo. Muchos formularios requieren cargar un archivo, por lo general, se hace referencia a una etiqueta para el tipo de archivo de entrada. Por cuestiones de seguridad, muchos navegadores no permiten aplicar estilo a las etiquetas de entrada. Para esto, podemos diseñar la etiqueta del formulario como un botón.
Clases de carga de archivos CSS de Foundation:
- botón: esta clase se usa en la etiqueta de la etiqueta que crea un botón simple.
- show-for-sr: esta clase se usa en la etiqueta de entrada para ocultarla de la vista.
Sintaxis:
<form>
<label class="button">Button</label>
<input class="show-for-sr">
</form>
Ejemplo 1: En el siguiente ejemplo, hemos creado un botón de carga de archivos simple.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Forms File Upload Button</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> <title> Foundation CSS Forms File Upload Button </title> </head> <body> <h2>GeeksforGeeks</h2> <h4>Foundation CSS Forms File Upload Button</h4> <form> <label for="upload" class="button"> Upload Your File </label> <input type="file" id="upload" class="show-for-sr"> </form> </body> </html>
Producción:
Botón de carga de archivo de formularios CSS de Foundation
Ejemplo 2: en el siguiente ejemplo, hemos creado un formulario de plantilla de trabajo básico que muestra cómo se puede usar el botón de carga de archivos en un formulario real.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Forms File Upload Button</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> <title> Foundation CSS Forms File Upload Button </title> </head> <body> <h2>GeeksforGeeks</h2> <h4> Foundation CSS Forms File Upload Button </h4> <form> <div class="grid-container" style="width: 40%;"> <label>Name <input type="text" placeholder="Enter your name:"> </label> <label>College <input type="text" placeholder="Enter your college"> </label> <label> CGPA <input type="number" placeholder="Enter your CGPA"> </label> <label> Tell us a little bit about yourself <textarea placeholder="None"></textarea> </label> <label for="upload" class="button"> Upload Your Resume </label> <input type="file" id="upload" class="show-for-sr"> <input type="submit" class="button" value="Submit"> </div> </form> </body> </html>
Producción:
Botón de carga de archivo de formularios CSS de Foundation
Referencias: https://get.foundation/sites/docs/forms.html#file-upload-button
Publicación traducida automáticamente
Artículo escrito por tejsidda34 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA