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.
A form is the section of a document that contains a number of input fields such as text field, password, and checkbox, etc.
Example 1: This example creating a simple Log In Form.
<!DOCTYPE html> < html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
< script src =
</ script >
integrity =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" >
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "ui container" >
< h2 >Log In</ h2 >
< form class = "ui form" >
< div class = "field" >
< label >Username</ label >
< input type = "text" name = "Username"
placeholder = "Username" >
</ div >
< div class = "field" >
< label >Password</ label >
< input type = "password" name = "password"
placeholder = "Password" >
</ div >
< div class = "field" >
< div class = "ui checkbox" >
< input type = "checkbox" tabindex = "0"
class = "hidden" >
< label >Remember Me</ label >
</ div >
</ div >
< button class = "ui button" type = "submit" >
Log In
</ button >
</ form >
</ div >
< script >
$('.ui.checkbox').checkbox();
</ script >
</ body >
</ html >
|
Output:
Example 2: This example creating a form that contains input fields placing parallelly.
<!DOCTYPE html> < html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
< script src =
</ script >
</ head >
< body >
< div class = "ui container" >
< div class = "ui form" >
< div class = "fields" >
< div class = "field" >
< label >Name</ label >
< input type = "text"
placeholder = "Name" >
</ div >
< div class = "field" >
< label >E-mail</ label >
< input type = "email"
placeholder = "E-mail" >
</ div >
< div class = "field" >
< label >Password</ label >
< input type = "password"
placeholder = "Password" >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 3: This example creating a Text Area.
<!DOCTYPE html> < html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
< script src =
</ script >
</ head >
< body >
< div class = "ui container" >
< div class = "ui form" >
< div class = "field" >
< label >Enter Text</ label >
< textarea rows = "6" ></ textarea >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Note: You can skip the rows attribute and get standard size textarea.
Output:
Example 4: This example creating the Checkbox. There are a variety of checkbox styles present in semantic-ui, like the standard checkbox, toggle, and slide.
And for this, you need the jQuery library imported.
$('.ui.checkbox').checkbox();
<!DOCTYPE html> < html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
integrity =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" >
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "ui container" >
< div class = "ui form" >
< h2 >Checkbox</ h2 >
< div class = "inline field" >
< div class = "ui checkbox" >
< input type = "checkbox"
tabindex = "0" class = "hidden" >
< label >Checkbox</ label >
</ div >
</ div >
< h2 >Toggle</ h2 >
< div class = "inline field" >
< div class = "ui toggle checkbox" >
< input type = "checkbox"
tabindex = "0" class = "hidden" >
< label >Toggle</ label >
</ div >
</ div >
< h2 >Slider</ h2 >
< div class = "inline field" >
< div class = "ui slider checkbox" >
< input type = "checkbox"
tabindex = "0" class = "hidden" >
< label >Slider</ label >
</ div >
< label ></ label >
</ div >
</ div >
</ div >
< script >
$('.ui.checkbox').checkbox();
</ script >
</ body >
</ html >
|
Output:
Example 5: This example creating the Radio Button. For this, you need a jQuery library imported.
$('.ui.radio.checkbox').checkbox();
Complete Code:
<!DOCTYPE html> < html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
</ head >
< body >
< div style = "margin-top: 20px;" class = "ui container" >
< div class = "ui form" >
< h2 >Inline Radio Button</ h2 >
< div class = "inline fields" >
< label for = "gender" >Gender</ label >
< div class = "field" >
< div class = "ui radio checkbox" >
< input type = "radio" name = "gender"
checked = "" tabindex = "0"
class = "hidden" >
< label >Male</ label >
</ div >
</ div >
< div class = "field" >
< div class = "ui radio checkbox" >
< input type = "radio" name = "gender"
tabindex = "0" class = "hidden" >
< label >Female</ label >
</ div >
</ div >
< div class = "field" >
< div class = "ui radio checkbox" >
< input type = "radio" name = "gender"
tabindex = "0" class = "hidden" >
< label >Rather not Say</ label >
</ div >
</ div >
</ div >
< h2 >Grouped Radio Button </ h2 >
< div class = "grouped fields" >
< label for = "branch" >Select your Branch</ label >
< div class = "field" >
< div class = "ui radio checkbox" >
< input type = "radio" name = "branch"
checked = "" tabindex = "0" class = "hidden" >
< label >CSE</ label >
</ div >
</ div >
< div class = "field" >
< div class = "ui radio checkbox" >
< input type = "radio" name = "branch"
tabindex = "0" class = "hidden" >
< label >IT</ label >
</ div >
</ div >
< div class = "field" >
< div class = "ui radio checkbox" >
< input type = "radio" name = "branch"
tabindex = "0" class = "hidden" >
< label >ECE</ label >
</ div >
</ div >
< div class = "field" >
< div class = "ui radio checkbox" >
< input type = "radio" name = "branch"
tabindex = "0" class = "hidden" >
< label >ME</ label >
</ div >
</ div >
</ div >
</ div >
</ div >
< script src =
integrity =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" >
</ script >
< script src =
</ script >
< script >
$('.ui.radio.checkbox').checkbox();
</ script >
</ body >
</ html >
|
Output:
Example 6: This example creating a Dropdown list. For this, you need to import the jQuery library.
$(function() { $('.ui.dropdown').dropdown(); });
Complete Code:
<!DOCTYPE html> < html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
</ head >
< body >
< div style = "margin-top: 20px;" class = "ui container" >
< label >Choose Language</ label >
< div class = "ui selection dropdown" >
< input type = "hidden" name = "language" >
< i class = "dropdown icon" ></ i >
< div class = "default text" >Choose Language</ div >
< div class = "menu" >
< div class = "item" data-value = "0" >C++</ div >
< div class = "item" data-value = "1" >Java</ div >
< div class = "item" data-value = "2" >Python3</ div >
</ div >
</ div >
</ div >
< script src =
integrity =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" >
</ script >
< script src =
</ script >
< script >
$(function() {
$('.ui.dropdown').dropdown();
});
</ script >
</ body >
</ html >
|
Output:
Example 7: This example creating the Multiple Select dropdown menu. For this, you need to import the jQuery library.
$(function() { $('.ui.dropdown').dropdown(); });
Complete Code:
<!DOCTYPE html> < html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
</ head >
< body >
< div style = "margin-top: 50px;" class = "ui container" >
< div class = "field" >
< label >Programming Language</ label >
< select multiple = "" class = "ui dropdown" >
< option value = "" >Select Programming Language</ option >
< option value = "cpp" >C++</ option >
< option value = "java" >Java</ option >
< option value = "py3" >Python3</ option >
< option value = "php" >PHP</ option >
< option value = "ruby" >Ruby</ option >
< option value = "js" >JavaScript</ option >
</ select >
</ div >
</ div >
< script src =
integrity =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" >
</ script >
< script src =
</ script >
< script >
$(function() {
$('.ui.dropdown').dropdown();
});
</ script >
</ body >
</ html >
|
Output:
Example 8: This example creating the status of statement. The state can be any like success, error, warning.
<!DOCTYPE html> < html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
</ head >
< body >
< div style = "margin-top: 20px;" class = "ui container" >
< h2 >State</ h2 >
< div class = "ui form success" >
< div class = "field" >
< label >Enter email to get latest news</ label >
< input type = "email" placeholder = "joe@schmoe.com" >
</ div >
< div class = "ui success message" >
< div class = "header" >Success</ div >
< p >You're all signed up for the newsletter.</ p >
</ div >
< div class = "ui submit button" >Submit</ div >
</ div >
</ div >
< script src =
</ script >
</ body >
</ html >
|
Output:
Note:
- You can replace success with error or warning to show that state.
- You can use a tiny, small, large, medium, huge class to change the size of the form.