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. El contenido de la casilla de verificación del formulario de interfaz de usuario semántica se usa para crear la casilla de verificación usando la clase de casilla de verificación.
En este artículo, discutiremos el contenido de la casilla de verificación del formulario en la interfaz de usuario semántica.
Clase de contenido de casilla de verificación de formulario de interfaz de usuario semántica:
- casilla de verificación : esta clase se utiliza para crear la casilla de verificación.
Sintaxis:
<div class="ui checkbox"> <input type="checkbox" class="hidden"> </div>
Ejemplo 1: el siguiente código demuestra el contenido de la casilla de verificación del formulario de interfaz de usuario semántica con una casilla de verificación estándar y una casilla de verificación de radio .
HTML
<!DOCTYPE html>
<html>
<head>
<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>
<center>
<h2 style="color: green">
GeeksforGeeks
</h2>
<h3>
Semantic-UI Form Checkbox Content
</h3>
<div class="ui form">
<div class="inline field">
<div class="ui checkbox">
<input type="checkbox" tabindex="0" class="hidden">
<label>Standard Checkbox</label>
</div>
</div>
<div class="inline field">
<div class="ui radio checkbox">
<input type="checkbox" tabindex="0" class="hidden">
<label>Radio Checkbox</label>
</div>
</div>
</div>
</center>
<script>
$('.ui.checkbox').checkbox();
</script>
</body>
</html>
Producción:
Ejemplo 2: el siguiente código muestra el contenido de la casilla de verificación del formulario de interfaz de usuario semántica con la casilla de verificación del control deslizante y la casilla de verificación de alternancia .
HTML
<!DOCTYPE html>
<html>
<head>
<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>
<center>
<h2 style="color: green">
GeeksforGeeks
</h2>
<h3>
Semantic-UI Form Checkbox Content
</h3>
<div class="ui form">
<div class="inline field">
<div class="ui slider checkbox">
<input type="checkbox" tabindex="0" class="hidden">
<label>Slider Checkbox</label>
</div>
</div>
<div class="inline field">
<div class="ui toggle checkbox">
<input type="checkbox" tabindex="0" class="hidden">
<label>Toggle Checkbox</label>
</div>
</div>
</div>
</center>
<script>
$('.ui.checkbox').checkbox();
</script>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/collections/form.html#checkbox
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