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