Open In App

Semantic-UI Search Standard Type

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 07 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads