Skip to content
Related Articles

Related Articles

Semantic-UI Form Variations

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

Semantic UI is an open-source framework that has some predefined classes to make our website look beautiful and responsive. It is similar to bootstrap as it has pre-defined classes for use. It used CSS and jQuery to build the interface. It has some different types of elements that help us to create a beautiful website. A Semantic UI form is used to create the form using the form classes to show the related user input fields in a structured manner.

In this article, we will discuss form variations in Semantic UI.

Semantic UI Form Variations:

  • size: This variation is used to create different size forms.
  • equal width form: This variation is used to automatically divide fields to an equal width.
  • inverted: This variation is used to invert the form colors.

Semantic UI Form variations classes:

  • mini: This class is used to create a mini-size form.
  • tiny: This class is used to create a tiny size form.
  • small: This class is used to create a small size form.
  • large: This class is used to create a large size form.
  • big: This class is used to create a big-size form.
  • huge: This class is used to create a huge size form.
  • massive: This class is used to create a massive size form.
  • equal width form: This class is used to create the equal width fields of a form.
  • inverted: This class is used to invert the form background color.

Syntax: 

<div class="ui Form-Variations-Class form">
   ....
</div>

Example 1: The following code demonstrates the Semantic UI form size variation.

HTML




<!DOCTYPE html>
<html>
<head>
  <title> Semantic-UI Form Variations </title>
  <link rel="stylesheet" href=
</head>
 
<body>
    <div class="ui container">
        <h2 class="ui header green"> GeeksforGeeks </h2>
        <h3> Semantic-UI Form Variations - Size </h3>
 
        <div class="ui mini form">
          <h4> Mini Size: </h4>
          <div class="field">
            <label> Username: </label>
            <input placeholder="Enter Username"
                    type="text">
          </div>
          <div class="field">
            <label> Password: </label>
            <input placeholder="Enter Password"
                    type="text">
          </div>
          <div class="ui button"> Login </div>
        </div> <br>
 
        <div class="ui tiny form">
          <h4> Tiny Size: </h4>
          <div class="field">
            <label> Username: </label>
            <input placeholder="Enter Username"
                    type="text">
          </div>
          <div class="field">
            <label> Password: </label>
            <input placeholder="Enter Password"
                    type="text">
          </div>
          <div class="ui button"> Login </div>
        </div> <br>
 
        <div class="ui small form">
          <h4> Small Size: </h4>
          <div class="field">
            <label> Username: </label>
            <input placeholder="Enter Username"
                    type="text">
          </div>
          <div class="field">
            <label> Password: </label>
            <input placeholder="Enter Password"
                    type="text">
          </div>
          <div class="ui button"> Login </div>
        </div> <br>
 
        <div class="ui large form">
          <h4> Large Size: </h4>
          <div class="field">
            <label> Username: </label>
            <input placeholder="Enter Username"
                    type="text">
          </div>
          <div class="field">
            <label> Password: </label>
            <input placeholder="Enter Password"
                    type="text">
          </div>
          <div class="ui button"> Login </div>
        </div> <br>
 
        <div class="ui huge form">
          <h4> Huge Size: </h4>
          <div class="field">
            <label> Username: </label>
            <input placeholder="Enter Username"
                    type="text">
          </div>
          <div class="field">
            <label> Password: </label>
            <input placeholder="Enter Password"
                    type="text">
          </div>
          <div class="ui button"> Login </div>
        </div> <br>
 
        <div class="ui massive form">
          <h4> Massive Size: </h4>
          <div class="field">
            <label> Username: </label>
            <input placeholder="Enter Username"
                    type="text">
          </div>
          <div class="field">
            <label> Password: </label>
            <input placeholder="Enter Password"
                    type="text">
          </div>
          <div class="ui button"> Login </div>
        </div> <br>
    </div>
</body>
</html>


Output:

Semantic-UI Form Size Variation.

Example 2: The following code demonstrates the Semantic UI Form equal width form variation.

HTML




<!DOCTYPE html>
<html>
<head>
  <title> Semantic-UI Form Variations </title>
  <link rel="stylesheet" href=
</head>
 
<body>
   <div class="ui container">
        <h2 class="ui header green"> GeeksforGeeks </h2>
        <h3> Semantic-UI Form Variations - Equal Width Form </h3>
 
        <div class="ui equal width form">
          <div class="fields">
            <div class="field">
              <label> First Name: </label>
              <input type="text"
                     placeholder="Enter First name">
            </div>
            <div class="field">
              <label> Last Name: </label>
              <input type="text"
                     placeholder="Enter Last name">
            </div>
          </div>
 
          <div class="fields">
            <div class="field">
              <label> Email: </label>
              <input type="text"
                     placeholder="Enter email">
            </div>
            <div class="field">
              <label> Mobile: </label>
              <input type="text"
                     placeholder="Enter mobile number">
            </div>
            <div class="field">
              <label> City: </label>
              <input type="text"
                     placeholder="Enter city">
            </div>
          </div>
           
        </div>
    </div>
</body>
</html>


Output:

Semantic-UI Form Equal Width Form Variation

Example 3: The following code demonstrates the Semantic-UI form inverted variation.

HTML




<!DOCTYPE html>
<html>
<head>
  <title> Semantic-UI Form Variations </title>
  <link rel="stylesheet" href=
</head>
 
<body>
   <div class="ui container">
        <h2 class="ui header green"> GeeksforGeeks </h2>
        <h3> Semantic-UI Form Variations - Inverted </h3>
 
        <div class="ui inverted segment">
          <div class="ui inverted form">
            <div class="two fields">
              <div class="field">
                <label> Username: </label>
                <input type="text"
                       placeholder="Enter Username" >
              </div>
 
              <div class="field">
                <label> Password: </label>
                <input type="text"
                       placeholder="Enter Password" >
              </div>
            </div>
            <div class="ui button"> Login </div>
          </div>
        </div>
    </div>
</body>
</html>


Output:

Semantic-UI Form Inverted Variation

Reference: https://semantic-ui.com/collections/form.html


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!