Semantic-UI | Input Field
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= 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= </script> </body></html> |
Output:
Example 2: Input Field showing data Loading
HTML
<!DOCTYPE html><html> <head> <title>Semantic UI</title> <link href= 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= </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= 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= </script> </body></html> |
Output:
Example 4: Labelled Input File
HTML
<!DOCTYPE html><html> <head> <title>Semantic UI</title> <link href= rel="stylesheet" /> </head> <body> <div class="ui container"> <h2>Labelled in front.</h2> <div class="ui labeled input"> <div class="ui label"> </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= </script> </body></html> |
Output:
Please Login to comment...