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.
El formulario de interfaz de usuario semántica se usa para crear el hermoso formulario usando clases de formulario. El contenido de selección múltiple del formulario se usa para seleccionar las opciones múltiples usando un solo campo de formulario. Si deseamos eliminar las opciones seleccionadas, elimínelas con el icono de cerrar. También podemos buscar cualquier opción utilizando el campo de formulario de entrada.
En este artículo, discutiremos el contenido de selección múltiple del formulario de interfaz de usuario semántica.
Clase de contenido de selección múltiple de formulario de interfaz de usuario semántica:
- desplegable: Se utiliza para crear el menú desplegable para seleccionar las múltiples opciones. Para seleccionar múltiples opciones, use el atributo » múltiple» para el mismo elemento.
Sintaxis:
<div class="ui form">
<div class="field">
<label>Country</label>
<select multiple="" class="ui dropdown">
...
</select>
</div>
</div>
Ejemplo 1: el siguiente código demuestra el contenido de selección múltiple del formulario de interfaz de usuario semántica.
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>
<div class="ui container center aligned">
<h2 class="ui header green"> GeeksforGeeks</h2>
<h3> Semantic-UI Form Multiple Select Content </h3>
</div>
<div class="ui form">
<div class="field">
<label>
Skills
</label>
<select multiple="" class="ui dropdown">
<option value="">
Select Multiple skills:
</option>
<option value="cpp">
C++
</option>
<option value="dart">
Dart
</option>
<option value="firebase">
Firebase
</option>
<option value="flutter">
Flutter
</option>
<option value="java">
Java
</option>
<option value="python">
Python
</option>
<option value="web-dev">
Web Development
</option>
</select>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Producción:
Ejemplo 2: el siguiente código demuestra el contenido de selección múltiple del formulario de interfaz de usuario semántica con el menú desplegable de selección de búsqueda .
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>
<div class="ui container center aligned">
<h2 class="ui header green"> GeeksforGeeks </h2>
<h3> Semantic-UI Form Multiple Select Content </h3>
</div>
<div class="ui form">
<div class="field">
<label>
Skills
</label>
<select multiple="" class="ui search selection dropdown">
<option value="">
Select Multiple skills:
</option>
<option value="cpp">
C++
</option>
<option value="css">
CSS
</option>
<option value="dart">
Dart
</option>
<option value="firebase">
Firebase
</option>
<option value="flutter">
Flutter
</option>
<option value="java">
Java
</option>
<option value="Javascript">
Javascript
</option>
<option value="python">
Python
</option>
<option value="web-dev">
Web Development
</option>
</select>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/collections/form.html#multiple-select
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