Semantic-UI Form Dropdown Content
Semantic UI is an open-source framework that used CSS and jQuery to make our websites look beautiful and responsive. It has predefined classes like bootstrap for use to make our website more interactive. It has some pre-built semantic components and we can use these components to create a responsive website.
The form is a container that has different types of input elements such as text fields, submit buttons, radio buttons, checkboxes, etc.
Semantic-UI Form is used to create the beautiful form using form classes. Form Dropdown Content is used to create a list of items and we can select an option from the series of options. We can also search any dropdown item using the input text field. We will use the dropdown class to create the dropdown.
In this article, we will discuss the Form Dropdown Content in Semantic-UI.
Semantic-UI Form Dropdown Content Class:
- dropdown: This class is used to create the dropdown with some items.
Syntax:
<div class="ui form">
<div class="field">
<label>....</label>
<div class="ui selection dropdown">
......
</div>
</div>
</div>
Example 1: The following code demonstrates the Semantic-UI Form Dropdown Content.
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Form Dropdown Content</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>
<div class="ui container center aligned">
<h2 style="color: green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Form Dropdown Content</h3>
</div>
<div class="ui form">
<div class="field">
<label>Dropdown</label>
<div class="ui selection dropdown">
<input type="hidden" name="drop">
<i class="dropdown icon"></i>
<div class="default text">
Select from dropdown
</div>
<div class="menu">
<div class="item" data-value="0">
Coding
</div>
<div class="item" data-value="1">
DSA
</div>
<div class="item" data-value="2">
App development
</div>
<div class="item" data-value="3">
Web development
</div>
</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
<html><head> <title>Semantic-UI Form Dropdown Content</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> <div class="ui container center aligned"> <h2 style="color: green"> GeeksforGeeks </h2> <h3>Semantic-UI Form Dropdown Content</h3> </div> <div class="ui form"> <div class="field"> <label>Dropdown</label> <div class="ui selection dropdown"> <input type="hidden" name="drop"> <i class="dropdown icon"></i> <div class="default text"> Select from dropdown </div> <div class="menu"> <div class="item" data-value="0"> Coding </div> <div class="item" data-value="1"> DSA </div> <div class="item" data-value="2"> App development </div> <div class="item" data-value="3"> Web development </div> </div> </div> </div> </div> <script> $('.ui.dropdown').dropdown(); </script></body></html>Output:
Example 2: The following code demonstrates the Semantic-UI Form Dropdown Content by searching a dropdown item.
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Form Dropdown Content</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>
<div class="ui container center aligned">
<h2 style="color: green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Form Dropdown Content</h3>
</div>
<div class="ui form">
<div class="field">
<label>Dropdown</label>
<select class="ui search dropdown">
<option value="">
Select option
</option>
<option value="html">
HTML
</option>
<option value="bootstrap">
Bootstrap
</option>
<option value="css">
CSS
</option>
<option value="js">
Javascript
</option>
<option value="nodejs">
Node.js
</option>
</select>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
<html><head> <title>Semantic-UI Form Dropdown Content</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> <div class="ui container center aligned"> <h2 style="color: green"> GeeksforGeeks </h2> <h3>Semantic-UI Form Dropdown Content</h3> </div> <div class="ui form"> <div class="field"> <label>Dropdown</label> <select class="ui search dropdown"> <option value=""> Select option </option> <option value="html"> HTML </option> <option value="bootstrap"> Bootstrap </option> <option value="css"> CSS </option> <option value="js"> Javascript </option> <option value="nodejs"> Node.js </option> </select> </div> </div> <script> $('.ui.dropdown').dropdown(); </script></body></html>Output:
Reference: https://semantic-ui.com/collections/form.html#dropdown
