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 utiliza para crear un formulario hermoso 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 grupos de formularios en la interfaz de usuario semántica.
Variaciones del grupo de formularios de interfaz de usuario semántica:
- Dividido uniformemente : esta variación se utiliza para dividir los campos de entrada de manera uniforme.
- Campos agrupados : esta variación se utiliza para crear los campos para mostrar las opciones que están relacionadas entre sí.
- Campos de igual ancho: esta variación se utiliza para crear campos de igual ancho.
- Campos en línea : esta variación se utiliza para crear campos en línea en una fila.
Sintaxis:
<div class="ui form">
<div class="Form-Group-Variations-Class">
.....
</div>
</div>
Ejemplo 1: el código siguiente muestra la variación dividida uniformemente del grupo de formularios 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 Group Variations</h3> <h3>Evenly Divided:</h3> </div><br> <div class="ui container form"> <div class="four fields"> <div class="field"> <label> First name: </label> <input type="text" placeholder="Enter first name"> </div> <div class="field"> <label> Last name: </label> <input type="text" placeholder="Enter last Name"> </div> <div class="field"> <label> Email: </label> <input type="text" placeholder="Enter email id"> </div> <div class="field"> <label> Password</label> <input type="text" placeholder="Enter password"> </div> </div> </div> </body> </html>
Producción:
Variación dividida uniformemente del grupo de formularios de interfaz de usuario semántica
Ejemplo 2: el código siguiente muestra la variación de campos agrupados del grupo de formularios de interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<!-- Compressed JavaScript -->
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui header green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Form Group Variations</h3>
<h3>Grouped Fields:</h3>
</div><br>
<div class="ui container form">
<div class="grouped fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="lang"
tabindex="0" class="hidden" checked>
<label> C++ </label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="lang"
tabindex="0" class="hidden">
<label> Java </label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="lang"
tabindex="0" class="hidden">
<label> Python </label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="lang"
tabindex="0" class="hidden">
<label> Javascript </label>
</div>
</div>
</div>
</div>
<script>
$('.ui.radio.checkbox').checkbox();
</script>
</body>
</html>
Producción:
Variación de campos agrupados del grupo de formularios de interfaz de usuario semántica
Ejemplo 3: El siguiente código demuestra la variación de campos de igual ancho del grupo de formularios 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 Group Variations </h3> <h3> Equal Width Fields: </h3> </div> <br> <div class="ui form"> <div class="equal width fields"> <div class="field"> <label>First name</label> <input type="text" placeholder="Enter First Name"> </div> <div class="field"> <label>Last name</label> <input type="text" placeholder="Enter Last Name"> </div> </div> <div class="equal width fields"> <div class="field"> <label> Email: </label> <input type="text" placeholder="Enter email id"> </div> <div class="field"> <label> Password</label> <input type="text" placeholder="Enter password"> </div> <div class="field"> <label> Confirm Password</label> <input type="text" placeholder="Confirm password"> </div> </div> </div> </body> </html>
Producción:
Variación de campos de igual ancho del grupo de formularios de interfaz de usuario semántica
Ejemplo 4: el código siguiente muestra la variación de campos en línea del grupo de formularios 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"> <h2 class="ui header green"> GeeksforGeeks </h2> <h3>Semantic-UI Form Group Variations</h3> <h3> Inline Fields: </h3> <div class="ui form"> <div class="inline fields"> <label>Full Name: </label> <div class="field"> <input type="text" placeholder="Enter First name"> </div> <div class="field"> <input type="text" placeholder="Enter Middle name"> </div> <div class="field"> <input type="text" placeholder="Enter Last name"> </div> </div> </div> </div> </body> </html>
Producción:
Variación de campos en línea del grupo de formularios 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