Semantic UI es un marco de código abierto que tiene algunas clases predefinidas para hacer que nuestro sitio web se vea hermoso y receptivo. Es similar a bootstrap ya que tiene clases predefinidas para su uso. Usó CSS y jQuery para construir la interfaz. Tiene algunos tipos diferentes de elementos que nos ayudan a crear un sitio web hermoso.
El formulario es un contenedor que tiene varios tipos de elementos de entrada, como campos de texto, botones, casillas de verificación, etc. El formulario de interfaz de usuario semántica se usa para crear el formulario utilizando las clases de formulario para mostrar los campos de entrada de usuario relacionados de manera estructurada. En este artículo, discutiremos las variaciones de campos de formulario en la interfaz de usuario semántica.
Variaciones de campo de formulario de interfaz de usuario semántica:
- Campo en línea : esta variación se utiliza para crear la etiqueta y el campo de entrada en línea.
- Ancho : esta variación se utiliza para especificar el ancho del campo de entrada.
- Obligatorio : esta variación se utiliza para mostrar que el campo de entrada es obligatorio.
Clases de variaciones de campo de formulario de interfaz de usuario semántica:
- campo en línea: esta clase se utiliza para crear la etiqueta y el campo de entrada en línea.
- ancho: esta clase se utiliza para especificar el ancho del campo de entrada.
- requerido: esta clase se utiliza para mostrar que el campo de entrada es obligatorio.
Sintaxis:
<div class="ui form">
<div class="Field-Variations-Class">
....
</div>
</div>
Ejemplo 1: el siguiente código muestra la variación de campo en línea del formulario de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <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 class="ui header green"> GeeksforGeeks </h2> <h3> Semantic-UI Form Field Variations </h3> <h3> Inline Field: </h3> <div class="ui form"> <div class="inline field"> <label> Username: </label> <input type="text" placeholder="Enter username"> </div> </div> </div> </body> </html>
Producción:
Variación de campo en línea del formulario de interfaz de usuario semántica
Ejemplo 2: el siguiente código demuestra la variación de ancho de campo de formulario de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <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 class="ui header green"> GeeksforGeeks </h2> <h3> Semantic-UI Form Field Variations </h3> <h3> Width: </h3> <div class="ui form"> <div class="fields"> <div class="six wide field"> <input type="text" placeholder="6 Wide Field"> </div> <div class="four wide field"> <input type="text" placeholder="4 Wide Field"> </div> </div> <div class="fields"> <div class="three wide field"> <input type="text" placeholder="3 Wide Field"> </div> <div class="five wide field"> <input type="text" placeholder="5 Wide Field"> </div> <div class="eight wide field"> <input type="text" placeholder="8 Wide Field"> </div> </div> <div class="fields"> <div class="nine wide field"> <input type="text" placeholder="9 Wide Field"> </div> <div class="seven wide field"> <input type="text" placeholder="7 Wide Field"> </div> </div> </div> </div> </body> </html>
Producción:
Variación de ancho de campo de formulario de interfaz de usuario semántica
Ejemplo 3: el código siguiente muestra la variación requerida del campo de formulario de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <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 class="ui header green"> GeeksforGeeks </h2> <h3> Semantic-UI Form Field Variations </h3> <h3> Required: </h3> </div> <br> <div class="ui container form"> <div class="required field"> <label> First Name: </label> <input type="text" placeholder="Enter First Name"> </div> <div class="required field"> <label> Last Name: </label> <input type="text" placeholder="Enter Last Name"> </div> </div> </body> </html>
Producción:
Variación requerida del campo de formulario de interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/form.html
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA