Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble. Utiliza una clase para agregar CSS a los elementos.
Un formulario es la sección de un documento que contiene una serie de campos de entrada, como campo de texto, contraseña, casilla de verificación, etc. El formulario de interfaz de usuario semántica se utiliza para crear formularios atractivos utilizando clases de interfaz de usuario semántica. Es muy fácil diseñar formas atractivas.
El contenido del campo de formulario de interfaz de usuario semántica se utiliza para crear un elemento de formulario que contiene una etiqueta y un elemento de entrada.
Contenido de campo de formulario de interfaz de usuario semántica Clase utilizada:
- campo: esta clase se utiliza para crear un elemento de formulario que contiene una etiqueta y un elemento de campo de entrada.
Sintaxis:
<div class="ui form">
<div class="field">
...
</div>
</div>
Ejemplo 1: en este ejemplo, describiremos el uso del contenido de campo de formulario de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Form Field Content </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Form Field Content</h3> </div> <form class="ui container form"> <div class="field"> <label>Username</label> <input type="text" name="username" placeholder="Enter Username"> </div> </form> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, describiremos el uso del contenido de campo de formulario de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Form Field Content </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Form Field Content</h3> </div> <form class="ui container form"> <div class="field"> <label>Enter Your Date of Birth</label> <input type="date" name="dob"> </div> </form> </body> </html>
Producción:
Referencia: https://semantic-ui.com/collections/form.html#field
Publicación traducida automáticamente
Artículo escrito por blalverma92 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA