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.
Los formularios de entrada de la interfaz de usuario de Blaze se utilizan para crear un formulario hermoso mediante el estilo de las etiquetas, las leyendas, los conjuntos de campos, etc. No tiene clases de formulario, por lo que aplica estilos a los elementos secundarios utilizando algunas clases. En este artículo, analizaremos los formularios de entrada de la interfaz de usuario de Blaze.
Clases de formularios de entrada de Blaze UI:
- o-fieldset: esta clase se utiliza para crear el conjunto de campos.
- c-label: Esta clase se utiliza para crear la etiqueta.
- c-hint: esta clase se utiliza para dar pistas.
- o-form-element: Esta clase se utiliza para crear el elemento de formulario.
Sintaxis:
<fieldset class="o-fieldset"> ... </fieldset>
Ejemplo 1: el siguiente código muestra los formularios de entrada de la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Input Forms </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 Forms </h3> <fieldset class="o-fieldset"> <legend class="o-fieldset__legend"> Registration Form </legend> <label class="o-container o-container--xsmall c-label" > First Name <input class="c-field c-field--label"> <div role="tooltip" class="c-hint"> Enter you first name. Eg. John </div> </label> <div class="o-container o-container--xsmall o-form-element"> <label class="c-label" for="lastname"> Last Name: </label> <input id="lastname" class="c-field" placeholder="Enter your Last Name" > </div> </fieldset> </div> </body> </html>
Producción:
Formularios de entrada de la interfaz de usuario de Blaze
Ejemplo 2: el siguiente código muestra los formularios de entrada de la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Input Forms </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 Forms </h3> <fieldset class="o-fieldset"> <legend class="o-fieldset__legend"> Form: </legend> <label class="c-label c-field c-field--choice o-form-element" > <input type="checkbox"> GeeksforGeeks </label> <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 class="o-form-element"> <label class="o-container o-container--xsmall c-toggle"> I agree to the terms and conditions <input type="checkbox" checked> <div class="c-toggle__track"> <div class="c-toggle__handle"></div> </div> </label> </div> </fieldset> </div> </body> </html>
Producción:
Formularios de entrada de la interfaz de usuario de Blaze
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