Blaze UI es un marco CSS de código abierto. Es un conjunto de herramientas de interfaz de usuario liviano y proporciona excelentes herramientas para crear aplicaciones personalizadas y escalables. Puede funcionar con cualquier framework que exista. Puede adaptarse a cualquier ecosistema. Todos los diseños o CSS son móviles primero y, por lo tanto, receptivos. Su proyecto está disponible en código abierto, por lo que una gran comunidad lo mantiene.
Las etiquetas de entrada y los elementos de formulario de Blaze UI se utilizan para crear los elementos de formulario junto con las etiquetas. Usamos la clase o-form-element para crear el elemento de formulario y la clase c-label para crear la etiqueta. En este artículo, analizaremos las etiquetas de entrada y los elementos de formulario de la interfaz de usuario de Blaze.
Etiquetas de entrada de Blaze UI y clases de elementos de formulario:
- o-form-element: Esta clase se utiliza para crear el elemento de formulario.
- c-label: Esta clase se utiliza para crear la etiqueta.
Sintaxis:
<div class="o-form-element">
<label class="c-label">
...
</label>
...
</div>
Ejemplo 1: el siguiente ejemplo muestra las etiquetas de entrada y los elementos de formulario de la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Input Labels and Form Elements </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </head> <body> <div class="u-centered"> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Input Labels and Form Elements </h3> <div class="o-container o-container--xsmall o-form-element" > <label class="c-label" for="firstname"> First Name: </label> <input id="firstname" class="c-field" placeholder="Enter your First Name" > </div> </div> </body> </html>
Producción:
Etiquetas de entrada y elementos de formulario de Blaze UI
Ejemplo 2: el siguiente ejemplo muestra las etiquetas de entrada y los elementos de formulario de la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Input Labels and Form Elements </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </head> <body> <div class="u-centered"> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Input Labels and Form Elements </h3> <div class="o-container o-container--xsmall o-form-element" > <label class="c-label" for="userName"> Username: </label> <input id="userName" class="c-field" placeholder="Enter your UserName" > <label class="c-label" for="mobile"> Mobile: </label> <input id="mobile" type="number" class="c-field" placeholder="Enter your Mobile no." > <label class="c-label" for="gender"> Gender: </label> <input id="gender" type="radio" name="gen" > Male <input id="gender" type="radio" name="gen" > Female </div> </div> </body> </html>
Producción:
Etiquetas de entrada y elementos de formulario de Blaze UI
Referencia: https://www.blazeui.com/components/inputs/
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA