Semantic-UI | Input Field - GeeksforGeeks

20 May, 2020
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements. Semantic-UI classes can be applied to the Input field to modify and design them as needed.
Example 1: Simple Input Field
HTML
<!DOCTYPE html><html>    <head>        <title>Semantic UI</title>        <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"              rel="stylesheet" />    </head>    <body>        <div class="ui container">            <h2>Simple Text Input Field</h2>            <div class="ui input">                <input type="text" placeholder="Enter Name">            </div>        </div>          <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">      </script>    </body></html>
Output:  
Example 2: Input Field showing data Loading
HTML
<!DOCTYPE html><html>    <head>        <title>Semantic UI</title>        <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"              rel="stylesheet" />    </head>      <body>        <div class="ui container">            <h2>Text Field with Loading Icon</h2>            <div class="ui icon input loading">                <input type="text" placeholder="Enter School">                <i class="search icon"></i>            </div>        </div>        <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">      </script>    </body></html>
Output:  
And you can add class ‘ui left icon input loading’ to show that loading icon in the left.
Example 3: Action Input Field
HTML
<!DOCTYPE html><html>    <head>        <title>Semantic UI</title>        <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"              rel="stylesheet" />    </head>      <body>        <div class="ui container">            <h2>Text Field With Button</h2>            <div class="ui action input">                <input type="text" placeholder="Search">                <button class="ui button">Search</button>            </div>        </div>        <br>        <div class="ui container">            <h2>Text field with dropdown list and Button</h2>            <div class="ui action input">                <input type="text" placeholder="Search...">                <select class="ui compact selection dropdown">                  <option value="web">Web</option>                  <option selected="" value="images">Images</option>                  <option value="videos">Videos</option>                </select>                <div class="ui button">Search</div>            </div>        </div>        <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">      </script>    </body></html>
Output: 
Example 4: Labelled Input File
HTML
<!DOCTYPE html><html>    <head>        <title>Semantic UI</title>        <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"              rel="stylesheet" />    </head>      <body>        <div class="ui container">            <h2>Labelled in front.</h2>            <div class="ui labeled input">                <div class="ui label">                    https://                </div>                <input type="text"                        placeholder="geeksforgeeks.com">            </div>        </div>        <br>        <div class="ui container">            <h2>Labelled in the end.</h2>            <div class="ui right labeled input">                <input type="text" placeholder="Find domain">                <div class="ui dropdown label">                  <div class="text">.com</div>                </div>            </div>        </div>        <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">      </script>    </body></html>
Output: 
Semantic-UI
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to apply style to parent if it has child with CSS?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
Design a web page using HTML and CSS
How to Upload Image into Database and Display it using PHP ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript