Semantic-UI Input Size Variation
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 a in database. Depending on the requirements of the usage of inputs there are different variations of inputs. One of them is the size variation.
Semantic UI Input Size Variation : The user might need to show different inputs in different sizes according to his requirements. To depict a input data significance its size can be increased accordingly. This is when the size variation comes in handy.
Syntax:
<div class="ui *size input"> <input type="text" placeholder=""> ......... </div>
Example 1: This example demonstrates the input size variations horizontally using the different sizes . You can see the output in the image below which shows different size inputs.
HTML
<!DOCTYPE html> < html > < head > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> < script src = "https://code.jquery.com/jquery-3.1.1.min.js" ></ script > < script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" > </ script > < style > input { margin-right: 20px !important; } </ style > </ head > < body > < div class = "ui container" > < br />< br /> < h2 class = "ui header green" >w3wiki</ h2 > < b > < p >Semantic UI Input Size Variations</ p > </ b > < hr /> < br /> < 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 > < div class = "ui big input" > < input type = "text" value = "Big" /> </ div > < div class = "ui huge input" > < input type = "text" value = "Huge" /> </ div > </ div > </ body > </ html > |
Output:
Example 2: This example demonstrates the input size variation using the different sizes mentioned in class. You can see the output in the image below which shows different size inputs.
HTML
<!DOCTYPE html> < html > < head > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> < script src = "https://code.jquery.com/jquery-3.1.1.min.js" ></ script > < script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" > </ script > < style > input { margin: 10px !important; color: green !important; } </ style > </ head > < body > < div class = "ui container" > < br />< br /> < h2 class = "ui header green" >w3wiki</ h2 > < b > < p >Semantic UI Input Size Variations</ p > </ b > < hr /> < br /> < div class = "ui mini input" > < input type = "text" placeholder = "Mini text input :" /> </ div > < br /> < div class = "ui small input" > < input type = "text" placeholder = "Small text input :" /> </ div > < br /> < div class = "ui large input" > < input type = "text" placeholder = "Large text input :" /> </ div > < br /> < div class = "ui big input" > < input type = "text" placeholder = "Big text input :" /> </ div > < br /> < div class = "ui huge input" > < input type = "text" placeholder = "Huge text input :" /> </ div > < br /> < div class = "ui massive input" > < input type = "text" placeholder = "Massive text input :" /> </ div > </ div > </ body > </ html > |
Output: You can see the input boxes with different sizes . User can use any of them as per his choice to extract data from the user.
Reference: https://semantic-ui.com/elements/input.html#size