Semantic-UI Input Variations
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.
Semantic UI has a bunch of components for user interface design. One of them is “Inputs”. Inputs are used for various purposes on a web page. It is useful in taking information from the user in real-time and saving it in a database. The user might need to show different inputs in different variations according to his requirements. To depict an input data significance, its variation can vary.
Semantic UI Input Variations:
- icon: This variation is used to specify icons to inputs.
- labeled: This variation is used to specify labels to inputs.
- action: This variation is used to relate input with an action button.
- transparent: This variation is used to specify the transparent variation of inputs.
- inverted: This variation is used to make the input inverted (color-wise).
- fluid: This variation is used to make input take the full size of its container.
- size: This variation is used to make input vary in size.
Example 1: The following code also demonstrates the above input variations.
HTML
<!DOCTYPE html><html><head> <title>Semantic-UI Input Variations</title> <link rel="stylesheet" href=</head><body> <div class="ui container"> <br/><br/> <h2 class="ui header green">GeeksforGeeks</h2> <b> <p>Semantic UI Input Variations</p> </b> <hr><br /> <span>Icon Variation : </span> <div class="ui icon input"> <input type="text" placeholder="Enter name to search..."> <i class="search icon"></i> </div> <br /><br /> <span>Labeled Variation : </span> <div class="ui right labeled left icon input"> <i class="folder icon"></i> <input type="text" placeholder="Create new account"> <a class="ui tag label"> New </a> </div> <br /><br /> <span>Action Variation : </span> <div class="ui action input"> <input type="text" id="input" placeholder="Enter your message"> <button class="ui teal button"> Click </button> </div> <br /><br /> <span>Transparent Variation : </span> <div class="ui transparent input"> <input type="text" placeholder="Enter name / email"> </div> <br /><br /> <div class="ui inverted segment"> <p>Inverted Variation : </p> <div class="ui inverted input"> <input type="text" placeholder="Enter your name here"> </div> </div> <br /><br /> <p>Fluid Variation : </p> <div class="ui fluid icon input"> <input type="text" placeholder="Enter name to search..."> <i class="search icon"></i> </div> <br /><br /> <p>Size Variation : </p> <div class="ui mini input"> <input type="text" value="Mini" /> </div> <div class="ui small input"> <input type="text" value="Small " /> </div> <div class="ui large input"> <input type="text" value="Large " /> </div> <br /><br /> </div></body></html> |
Output:
Semantic-UI Input Variations
Example 2: The following code also demonstrates some other input variations.
HTML
<!DOCTYPE html><html><head> <title>Semantic-UI Input Variations</title> <link rel="stylesheet" href=</head><body> <div class="ui container"> <br /><br /> <h2 class="ui header green">GeeksforGeeks</h2> <b> <p>Semantic UI Input Variations</p> </b> <hr><br /> <span>Icon Variation : </span> <div class="ui icon input"> <input type="text" placeholder="Enter email to login . "> <i class="mail icon"></i> </div> <br /><br /> <span>Labeled Variation : </span> <div class="ui right labeled input"> <input type="text" placeholder="Enter length.."> <div class="ui basic label"> cm </div> </div> <br /><br /> <span>Action Variation : </span> <div class="ui action input"> <input type="text" id="input"> <button class="ui teal right labeled icon button"> <i class="copy icon"></i> Click to Copy </button> </div> <br /><br /> <span>Transparent Variation : </span> <div class="ui transparent input"> <input type="text" placeholder="Enter the amount"> </div> <br /><br /> <div class="ui inverted segment"> <p>Inverted Variation : </p> <div class="ui inverted input"> <input type="text" placeholder="Enter your message"> </div> </div> <br /><br /> <p>Fluid Variation : </p> <div class="ui fluid icon input"> <input type="text" placeholder="Enter Email to Login . "> <i class="mail icon"></i> </div> <br /><br /> <p>Size Variation : </p> <div class="ui big input"> <input type="text" value="Big" /> </div> <div class="ui huge input"> <input type="text" value="Huge " /> </div> <br/><br/> </div></body></html> |
Output:
Semantic-UI Input Variations
Reference: https://semantic-ui.com/elements/input.html
Please Login to comment...