Semantic UI es el marco de código abierto que utilizó CSS y jQuery para hacer que nuestros sitios web se vean hermosos y receptivos. Tiene clases predefinidas como bootstrap para usar para hacer que nuestro sitio web sea más interactivo. Tiene algunos componentes semánticos preconstruidos y podemos usar estos componentes para crear un sitio web receptivo.
El formulario es un contenedor que tiene diferentes tipos de elementos de entrada, como campos de texto, botones de envío, botones de radio, casillas de verificación, etc.
Semantic-UI Form se usa para crear el hermoso formulario usando clases de formulario. La variación de campos en línea del grupo de formularios se utiliza para alinear los múltiples campos en una sola fila. Podemos alinear múltiples campos en una sola fila usando la clase «campos en línea» .
En este artículo, discutiremos la variación de campos en línea del grupo de formularios en la interfaz de usuario semántica.
Clase de variación de campos en línea del grupo de formularios de interfaz de usuario semántica:
- campos en línea: se utiliza para alinear múltiples campos en una sola fila.
Sintaxis:
<div class="ui form">
<div class="inline fields">
......
</div>
</div>
Ejemplo 1: el siguiente código demuestra la variación de campos en línea del grupo de formularios de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Form Group Inline Fields Variation</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/> </head> <body> <div class="ui container center aligned"> <h2 style="color: green"> GeeksforGeeks </h2> <h3> Semantic-UI Form Group Inline Fields Variation </h3> <br> <div class="ui form"> <div class="inline fields"> <label> Enter your Name </label> <div class="field"> <input type="text" placeholder="First Name"> </div> <div class="field"> <input type="text" placeholder="Middle Name"> </div> <div class="field"> <input type="text" placeholder="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
Ejemplo 2: el siguiente código demuestra la variación de campos en línea del grupo de formularios de interfaz de usuario semántica mediante botones de opción .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Form Group Inline 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">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<h2 style="color: green">
GeeksforGeeks
</h2>
<h3>
Semantic-UI Form Group Inline Fields Variation
</h3> <br>
<div class="ui form">
<div class="inline fields">
<label>
Select any option
</label>
<div class="field">
<div class="ui radio checkbox">
<input type="radio"
tabindex="0"
name="gfg"
class="hidden">
<label>
DSA
</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio"
tabindex="0"
name="gfg"
class="hidden">
<label>
Coding
</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio"
tabindex="0"
name="gfg"
class="hidden">
<label>
Web development
</label>
</div>
</div>
</div>
</div>
<script>
$('.ui.checkbox').checkbox();
</script>
</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#inline-fields
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA