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.
La variación de campos agrupados de formulario de interfaz de usuario semántica se utiliza para mostrar las opciones relacionadas del elemento. Funciona de manera similar al botón de opción.
Clase utilizada de variación de campos agrupados de formulario de interfaz de usuario semántica:
- campos agrupados: esta clase se utiliza para mostrar las opciones relacionadas de los elementos.
Sintaxis:
<div class="ui form">
<div class="grouped fields">
...
</div>
...
</div>
Ejemplo 1: En este ejemplo, describiremos el uso de la variación de campos agrupados de formulario de interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Form Grouped Fields Variation
</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</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 style="color:green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Form Grouped Fields Variation</h3>
</div>
<br>
<div class="ui form container">
<h4>Select Subject:</h4>
<div class="grouped fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio"
name="GFG"
tabindex="0"
class="hidden">
<label>HTML</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio"
name="GFG"
tabindex="0"
class="hidden">
<label>CSS</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio"
name="GFG"
tabindex="0"
class="hidden">
<label>JavaScript</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio"
name="GFG"
tabindex="0"
class="hidden">
<label>Bootstrap</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio"
name="GFG"
tabindex="0"
class="hidden">
<label>Node.js</label>
</div>
</div>
</div>
</div>
<script>
$('.ui.radio.checkbox').checkbox();
</script>
</body>
</html>
Producción:
Variación de campos agrupados de formulario de interfaz de usuario semántica
Ejemplo 2: En este ejemplo, describiremos el uso de la variación de campos agrupados de formulario de interfaz de usuario semántica con variación invertida.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Form Grouped Fields Variation
</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</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 style="color:green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Form Grouped Fields Variation</h3>
</div>
<br>
<div class="ui inverted segment">
<div class="ui form inverted container">
<h4>Select Subject:</h4>
<div class="grouped fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio"
name="GFG"
tabindex="0"
class="hidden">
<label>HTML</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio"
name="GFG"
tabindex="0"
class="hidden">
<label>CSS</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio"
name="GFG"
tabindex="0"
class="hidden">
<label>JavaScript</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio"
name="GFG"
tabindex="0"
class="hidden">
<label>Bootstrap</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio"
name="GFG"
tabindex="0"
class="hidden">
<label>Node.js</label>
</div>
</div>
</div>
</div>
</div>
<script>
$('.ui.radio.checkbox').checkbox();
</script>
</body>
</html>
Producción:
Variación de campos agrupados de formulario de interfaz de usuario semántica
Referencia: https: //semantic-ui.com/collections/form.html#grouped-fields
Publicación traducida automáticamente
Artículo escrito por blalverma92 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA