Semantic-UI | Forms
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.
html
<!DOCTYPE html> < html > < head > < title >Semantic UI</ title > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> < script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" > </ script > < script src = "https://code.jquery.com/jquery-3.1.1.min.js" integrity = "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" > </ script > < script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" > </ 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.
html
<!DOCTYPE html> < html > < head > < title >Semantic UI</ title > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> < script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" > </ 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.
html
<!DOCTYPE html> < html > < head > < title >Semantic UI</ title > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> < script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" > </ 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();
html
<!DOCTYPE html> < html > < head > < title >Semantic UI</ title > < 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" integrity = "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" > </ script > < script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" > </ 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:
html
<!DOCTYPE html> < html > < head > < title >Semantic UI</ title > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 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 = "https://code.jquery.com/jquery-3.1.1.min.js" integrity = "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" > </ script > < script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" > </ 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:
html
<!DOCTYPE html> < html > < head > < title >Semantic UI</ title > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 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 = "https://code.jquery.com/jquery-3.1.1.min.js" integrity = "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" > </ script > < script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" > </ 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:
html
<!DOCTYPE html> < html > < head > < title >Semantic UI</ title > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 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 = "https://code.jquery.com/jquery-3.1.1.min.js" integrity = "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" > </ script > < script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" > </ 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.
html
<!DOCTYPE html> < html > < head > < title >Semantic UI</ title > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 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 = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" > </ 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.