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 States.
Semantic UI Form States:
- Loading: We can keep the form in a loading state if we are waiting for a response from a server or an API.
- Success: This state indicates that the data entered by the user is correct and the form is successfully submitted to the server or an API.
- Error: This state indicates that the data entered by the user is incorrect and the form is not successfully submitted to the server or an API.
- Warning: This state indicates that a part of the data entered by the user is incorrect or inaccurate and the form may resort to errors when submitted to the server or an API.
- Field Error: Field Error State can be helpful in specifically pointing out the fields incorrectly entered by the user.
- Disabled Field: A Field in a form is disabled as the data entered by the user already covers or is unrelated to the particular field.
- Read-Only Field: Forbids the user from entering information into the field.
Syntax:
<div class="ui Loading-State Success-State
Error-State Warning-State form">
<div class="Field-Error-State Disabled-Field-State">
...
</div>
...
</div>
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 loading form.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Form States</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 States</h4>
<hr>
<br />
<div class="ui loading 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:
Example 2: In the below example, we have created a success form.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Form States</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Form States</h4>
<hr>
<br />
<div class="ui success 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 success message">
<div class="header">Submitted Successfully</div>
<p>
Thank you filling up the form.
Your time is very valuable to us.
</p>
</div>
<div class="ui submit button">Submit</div>
</div>
</div>
</body>
</html>
Output:
Example 3: In the below example, we have created an error form.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Form States</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Form States</h4>
<hr>
<br />
<div class="ui error 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 error message">
<div class="header">Submission Failed</div>
<p>
Please check your Username
and password and try again.
</p>
</div>
<div class="ui submit button">Submit</div>
</div>
</div>
</body>
</html>
Output:
Example 4: In the below example, we have created a warning form.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Form States</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Form States</h4>
<hr>
<br />
<div class="ui warning 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 warning message">
<div class="header">Warning</div>
<p>
Your username and password are similar.
Please enter a different username and
password.
</p>
</div>
<div class="ui submit button">Submit</div>
</div>
</div>
</body>
</html>
Output:
Example 5: In the below example, we have created a form with a field error.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Form States</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Form States</h4>
<hr>
<br />
<div class="ui error form">
<div class="two fields">
<div class="field error">
<label>Username</label>
<input type="text"
placeholder="Enter Your Username">
</div>
<div class="field error">
<label>Password</label>
<input type="password"
placeholder="Enter Your Password">
</div>
</div>
<div class="ui error message">
<div class="header">Submission Failed</div>
<p>
Please check your Username
and password and try again.
</p>
</div>
<div class="ui submit button">Submit</div>
</div>
</div>
</body>
</html>
Output:
Example 6: In the below example, we have created a form with a disabled field.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Form States</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Form States</h4>
<hr>
<br />
<div class="ui form">
<div class="disabled field">
<label>Name</label>
<input type="text" placeholder="Enter your name">
</div>
<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:
Example 7: In the below example, we have created a form with a read-only field.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Form States</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Form States</h4>
<hr>
<br />
<div class="ui form">
<div class="field">
<label>Type</label>
<input type="text" placeholder="Customer"
readonly="" value="Customer">
</div>
<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:
