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.
<!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.
<!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