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 un formulario atractivo utilizando clases de interfaz de usuario semántica. Es muy fácil diseñar formas atractivas. Semantic-UI Form Inline Field Variation se utiliza para mostrar el elemento de etiqueta y el campo de entrada en línea, es decir, el elemento de etiqueta y el elemento de campo de entrada se colocarán en la misma línea.
Clase utilizada de variación de campo en línea de formulario de interfaz de usuario semántica:
- campo en línea: esta clase se utiliza para mostrar el elemento de etiqueta y el campo de entrada en línea.
Sintaxis:
<div class="ui form">
<div class="inline field">
...
</div>
...
</div>
Ejemplo 1: En este ejemplo, describiremos la variación de campo en línea del formulario de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Form Inline Field Variation </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 Inline Field Variation</h3> </div> <br><br> <form class="ui container equal width form"> <div class="fields"> <div class="inline field"> <label>Username</label> <input type="text" name="username" placeholder="Enter Username"> </div> <div class="inline field"> <label>Password</label> <input type="password" name="pwd" placeholder="Enter Password"> </div> </div> <button class="ui button right" type="submit"> Submit </button> </form> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, describiremos la variación de campo en línea del formulario de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Form Inline Field Variation </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 Inline Field Variation</h3> </div> <br><br> <form class="ui container equal width form"> <div class="fields"> <div class="inline field"> <label>First Name</label> <input type="text" name="fname" placeholder="Enter First Name"> </div> <div class="inline field"> <label>Second Name</label> <input type="text" name="sname" placeholder="Enter Second Name"> </div> <div class="inline field"> <label>Last Name</label> <input type="text" name="lname" placeholder="Enter Last Name"> </div> </div> <div class="fields"> <div class="inline field"> <label>Username</label> <input type="text" name="username" placeholder="Enter Username"> </div> <div class="inline field"> <label>Password</label> <input type="password" name="pwd" placeholder="Enter Password"> </div> </div> <button class="ui button right" type="submit"> Submit </button> </form> </body> </html>
Producción:
Referencia: https://semantic-ui.com/collections/form.html#inline-field
Publicación traducida automáticamente
Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA