Open In App

Semantic-UI Form Group Variations

Improve
Improve
Like Article
Like
Save
Share
Report

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.

The form is a container that has various types of input elements such as text fields, buttons, checkboxes, etc. Semantic-UI Form is used to create the beautiful form using the form classes to show the related user input fields in a structured manner. In this article, we will discuss Form Group Variations in Semantic-UI.

Semantic-UI Form Group Variations:

  • Evenly Divided: This variation is used to divide the input fields evenly.
  • Grouped Fields: This variation is used to create the fields to show the choices that are related to each other.
  • Equal Width Fields: This variation is used to create the equal width fields.
  • Inline Fields: This variation is used to create inline fields in a row.

Syntax:

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

Example 1: The following code demonstrates the Semantic-UI Form Group Evenly Divided Variation.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" href=
</head>
 
<body>
    <div class="ui container center aligned">
        <h2 class="ui header green">
          GeeksforGeeks
        </h2>
        <h3>Semantic-UI Form Group Variations</h3>
        <h3>Evenly Divided:</h3>
    </div><br>
 
    <div class="ui container form">
        <div class="four 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 class="field">
                <label> Email: </label>
                <input type="text"
                       placeholder="Enter email id">
            </div>
            <div class="field">
                <label> Password</label>
                <input type="text"
                       placeholder="Enter password">
            </div>
        </div>
    </div>
</body>
 
</html>


Output:

Semantic-UI Form Group Evenly Divided Variation

Example 2: The following code demonstrates the Semantic-UI Form Group Grouped Fields Variation.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
 
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </script>
</head>
 
<body>
    <div class="ui container">
        <h2 class="ui header green">
          GeeksforGeeks
        </h2>
        <h3>Semantic-UI Form Group Variations</h3>
        <h3>Grouped Fields:</h3>
    </div><br>
 
    <div class="ui container form">
        <div class="grouped fields">
            <div class="field">
                <div class="ui radio checkbox">
                    <input type="radio" name="lang"
                           tabindex="0" class="hidden" checked>
                    <label> C++ </label>
                </div>
            </div>
 
            <div class="field">
                <div class="ui radio checkbox">
                    <input type="radio" name="lang"
                           tabindex="0" class="hidden">
                    <label> Java </label>
                </div>
            </div>
 
            <div class="field">
                <div class="ui radio checkbox">
                    <input type="radio" name="lang"
                           tabindex="0" class="hidden">
                    <label> Python </label>
                </div>
            </div>
 
            <div class="field">
                <div class="ui radio checkbox">
                    <input type="radio" name="lang"
                           tabindex="0" class="hidden">
                    <label> Javascript </label>
                </div>
            </div>
        </div>
    </div>
 
    <script>
        $('.ui.radio.checkbox').checkbox();
    </script>
</body>
 
</html>


Output:

Semantic-UI Form Group Grouped Fields Variation

Example 3: The following code demonstrates the Semantic-UI Form Group Equal Width Fields Variation.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" href=
</head>
 
<body>
    <div class="ui container center aligned">
        <h2 class="ui header green">
          GeeksforGeeks
        </h2>
        <h3> Semantic-UI Form Group Variations </h3>
        <h3> Equal Width Fields: </h3>
    </div> <br>
 
    <div class="ui form">
        <div class="equal width 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="equal width fields">
            <div class="field">
                <label> Email: </label>
                <input type="text"
                       placeholder="Enter email id">
            </div>
            <div class="field">
                <label> Password</label>
                <input type="text"
                       placeholder="Enter password">
            </div>
            <div class="field">
                <label> Confirm Password</label>
                <input type="text"
                       placeholder="Confirm password">
            </div>
        </div>
    </div>
</body>
 
</html>


Output:

Semantic-UI Form Group Equal Width Fields Variation

Example 4: The following code demonstrates the Semantic-UI Form Group Inline Fields Variation.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" href=
</head>
 
<body>
    <div class="ui container">
        <h2 class="ui header green">
          GeeksforGeeks
        </h2>
        <h3>Semantic-UI Form Group Variations</h3>
 
        <h3> Inline Fields: </h3>
        <div class="ui form">
            <div class="inline fields">
                <label>Full Name: </label>
                <div class="field">
                    <input type="text"
                           placeholder="Enter First name">
                </div>
                <div class="field">
                    <input type="text"
                           placeholder="Enter Middle name">
                </div>
                <div class="field">
                    <input type="text"
                           placeholder="Enter Last name">
                </div>
            </div>
        </div>
    </div>
</body>
 
</html>


Output:

Semantic-UI Form Group Inline Fields Variation

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



Last Updated : 22 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads