Semantic-UI | Input Field
Last Updated :
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=
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...