Semantic-UI Form States
Last Updated :
22 Apr, 2022
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
Share your thoughts in the comments
Please Login to comment...