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 make your website look more amazing. It uses a class to add CSS to the elements.
Forms provide us with a way to take input from the user. We can group a set of input fields of different types such as text, password, number, etc in a form. Let's have a look at various Form Content.
Semantic UI Form Content:
- Field: A Semantic UI field item contains a label and an input tag that is custom styled.
- Fields: A set of fields are grouped together into one.
- Textarea: A semantic UI styled textarea allows the user to enter user-defined input.
- Checkbox: A semantic UI-styled checkbox can be created on a form.
- Radio Checkbox: A semantic UI-styled radio checkbox can be created on a form.
- Dropdown: A semantic UI-styled dropdown can be created on a form using JavaScript.
- Multiple Select: A semantic UI-styled multiple select can be created on a form from which the user can select multiple choices.
- HTML Select: A dropdown can be created with HTML, when the option to use JavaScript, is disabled.
- Message: A message can be displayed to the user when he/she interacts with the form.
Syntax:
<form class="ui form">
...
</form>
Note: Use the above syntax according to the need by using a combination of the above-mentioned classes. Refer to the examples below for a better understanding of the classes.
Example 1: In the below example, we have created a form with field content.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Form Content</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">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Form Content</h4>
<hr>
<br />
<div class="ui form">
<div class="field">
<label>Username</label>
<input type="text"
placeholder="Enter Your Username">
</div>
<div class="ui submit button">Submit</div>
</div>
</div>
</body>
</html>
Output:
Field Content
Example 2: In the below example, we have created fields content.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Form Content</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">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Form Content</h4>
<hr>
<br />
<div class="ui form">
<div class="two fields">
<div class="field">
<label>Username</label>
<input type="text"
placeholder="Enter Your Username">
</div>
<div class="field">
<label>Password</label>
<input type="password"
placeholder="Enter Your Password">
</div>
</div>
<div class="ui submit button">Submit</div>
</div>
</div>
</body>
</html>
Output:
Fields Content
Example 3: In the below example, we have created a form with textarea.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Form Content</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">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Form Content</h4>
<hr>
<br />
<div class="ui form">
<div class="field">
<label>Tell Us about yourself</label>
<textarea spellcheck="true"></textarea>
</div>
<div class="ui submit button">Submit</div>
</div>
</div>
</body>
</html>
Output:
Form with textarea
Example 4: In the below example, we have created a form with checkboxes.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Form Content</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">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Form Content</h4>
<hr>
<br />
<div class="ui form">
<div class="inline field">
<label>Select the domains you are experienced in</label>
<div class="ui checkbox">
<input type="checkbox" tabindex="0" class="hidden">
<label>Python</label>
</div>
<div class="ui checkbox">
<input type="checkbox" tabindex="0" class="hidden">
<label>Node.js</label>
</div>
<div class="ui checkbox">
<input type="checkbox" tabindex="0" class="hidden">
<label>React</label>
</div>
</div>
<div class="ui submit button">Submit</div>
</div>
</div>
<script>
$('.ui.checkbox').checkbox();
</script>
</body>
</html>
Output:
Form with checkbox
Example 5: In the below example, we have created a form with radio checkboxes.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Form Content</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">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Form Content</h4>
<hr>
<br />
<div class="ui form">
<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>
<div class="ui submit button">Submit</div>
</div>
</div>
<script>
$('.ui.radio.checkbox').checkbox();
</script>
</body>
</html>
Output:
Form with radio checkboxes
Example 6: In the below example, we have created a form with a dropdown.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Form Content</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">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Form Content</h4>
<hr>
<br />
<div class="ui form">
<div class="ui selection dropdown">
<input type="hidden" name="language">
<i class="dropdown icon"></i>
<div class="default text">
Select your favourite language
</div>
<div class="menu">
<div class="item" data-value="0">Java</div>
<div class="item" data-value="1">Python</div>
<div class="item" data-value="2">JavaScript</div>
<div class="item" data-value="3">C++</div>
</div>
</div>
<div class="ui submit button">Submit</div>
</div>
</div>
<script>
$('.dropdown').dropdown();
</script>
</body>
</html>
Output:
Form with a dropdown
Example 7: In the below example, we have created a form with multiple select.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Form Content</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">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Form Content</h4>
<hr>
<br />
<div class="ui form">
<div class="ui field">
<label>Languages</label>
<select multiple="" class="ui dropdown">
<option value="">
Select the languages you are familiar with
</option>
<option value="Java">Java</option>
<option value="Python">Python</option>
<option value="Node.js">Node.js</option>
<option value="React">React</option>
<option value="MongoDb">MongoDb</option>
<option value="SQL">SQL</option>
</select>
</div>
<div class="ui submit button">Submit</div>
</div>
</div>
<script>
$('.dropdown').dropdown();
</script>
</body>
</html>
Output:
Form with multiple select
Example 8: In the below example, we have created a form with HTML Select.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Form Content</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">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Form Content</h4>
<hr>
<br />
<div class="ui form">
<div class="ui field">
<label>Languages</label>
<select>
<option value="">
Select the languages you are familiar with
</option>
<option value="Java">Java</option>
<option value="Python">Python</option>
<option value="Node.js">Node.js</option>
<option value="React">React</option>
<option value="MongoDb">MongoDb</option>
<option value="SQL">SQL</option>
</select>
</div>
<div class="ui submit button">Submit</div>
</div>
</div>
</body>
</html>
Output:
Form with HTML Select
Example 9: In the below example, we have created a form with a success message.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Form Content</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">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Form Content</h4>
<hr>
<br />
<div class="ui form success">
<div class="two fields">
<div class="field">
<label>Username</label>
<input type="text"
placeholder="Enter Your Username">
</div>
<div class="field">
<label>Password</label>
<input type="password"
placeholder="Enter Your Password">
</div>
</div>
<div class="ui success message">
<div class="header">Submitted Successfully</div>
<p>Form has been submitted Successfully.</p>
</div>
<div class="ui submit button">Submit</div>
</div>
</div>
</body>
</html>
Output:
Form with a success message
Reference: https://semantic-ui.com/collections/form.html