Skip to content
Related Articles

Related Articles

Semantic-UI Form States

Improve Article
Save Article
  • Last Updated : 22 Apr, 2022
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!