Semantic-UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap.
Semantic-UI Search Standard Type is used to display the search input fields that contain the set of results.
Semantic-UI Search Standard Type Class:
- search: This class is used to create a search box of standards type.
Syntax:
<div class="ui search">
...
</div>Example 1: In this example, we will describes the Semantic-UI Search Standard Type.
HTML
<!DOCTYPE html> <html>
<head>
<title>
Semantic-UI Search Standard Type
</title>
<link rel="stylesheet" href=
</script>
<script src=
</script>
</head>
<body>
<div class="ui container center aligned">
<h2 class="header ui green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Search Standard Type</h3>
<div class="ui search">
<input class="prompt" type="text" placeholder="Search...">
<div class="res"></div>
</div>
</div>
</body>
</html>
|
Output:
Example 2: In this example, we will describes the Semantic-UI Search Standard Type.
HTML
<!DOCTYPE html> <html>
<head>
<title>
Semantic-UI Search Standard Type
</title>
<link rel="stylesheet" href=
</script>
<script src=
</script>
</head>
<body>
<div class="ui container center aligned">
<h2 class="header ui green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Search Standard Type</h3>
<div class="ui search">
<div class="ui icon input">
<input class="prompt" type="text" placeholder="Search...">
<i class="search icon"></i>
</div>
<div class="res"></div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://semantic-ui.com/modules/search.html#standard