Semantic-UI Form States
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.
HTML
<!DOCTYPE html><html><head> <title>Semantic UI Form States</title> <link href=" rel="stylesheet" /> <script src= integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= </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:
Loading Form
Example 2: In the below example, we have created a success form.
HTML
<!DOCTYPE html><html><head> <title>Semantic UI Form States</title> <link href= 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:
Success Form
Example 3: In the below example, we have created an error form.
HTML
<!DOCTYPE html><html><head> <title>Semantic UI Form States</title> <link href= 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:
Error Form
Example 4: In the below example, we have created a warning form.
HTML
<!DOCTYPE html><html><head> <title>Semantic UI Form States</title> <link href= 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:
Warning Form
Example 5: In the below example, we have created a form with a field error.
HTML
<!DOCTYPE html><html><head> <title>Semantic UI Form States</title> <link href= 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:
Form with field error
Example 6: In the below example, we have created a form with a disabled field.
HTML
<!DOCTYPE html><html><head> <title>Semantic UI Form States</title> <link href= 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:
Form with disabled field
Example 7: In the below example, we have created a form with a read-only field.
HTML
<!DOCTYPE html><html><head> <title>Semantic UI Form States</title> <link href= 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:
Form with read-only field
Reference: https://semantic-ui.com/collections/form.html
Please Login to comment...