Open In App

Semantic-UI Form Field 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 form using the form classes to show the related user input fields in a structured manner. In this article, we will discuss Form Field Variations in Semantic-UI.

Semantic-UI Form Field Variations:

  • Inline Field: This variation is used to create the label and input field inline.
  • Width: This variation is used to specify the width of the input field.
  • Required: This variation is used to show that the input field is mandatory.

Semantic-UI Form Field Variations Classes:

  • inline field: This class is used to create the label and input field inline.
  • wide: This class is used to specify the width of the input field.
  • required: This class is used to show that the input field is mandatory.

Syntax:

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

Example 1: The following code demonstrates the Semantic-UI Form Inline Field 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 Field Variations </h3>
 
        <h3> Inline Field: </h3>
        <div class="ui form">
            <div class="inline field">
                <label> Username: </label>
                <input type="text"
                       placeholder="Enter username">
            </div>
        </div>
    </div>
</body>
 
</html>


Output:

Semantic-UI Form Inline Field Variation

Example 2: The following code demonstrates the Semantic-UI Form Field Width 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 Field Variations </h3>
 
        <h3> Width: </h3>
        <div class="ui form">
            <div class="fields">
                <div class="six wide field">
                    <input type="text"
                           placeholder="6 Wide Field">
                </div>
                <div class="four wide field">
                    <input type="text"
                           placeholder="4 Wide Field">
                </div>
            </div>
 
            <div class="fields">
                <div class="three wide field">
                    <input type="text"
                           placeholder="3 Wide Field">
                </div>
                <div class="five wide field">
                    <input type="text"
                           placeholder="5 Wide Field">
                </div>
                <div class="eight wide field">
                    <input type="text"
                           placeholder="8 Wide Field">
                </div>
            </div>
 
            <div class="fields">
                <div class="nine wide field">
                    <input type="text"
                           placeholder="9 Wide Field">
                </div>
                <div class="seven wide field">
                    <input type="text"
                           placeholder="7 Wide Field">
                </div>
            </div>
        </div>
    </div>
</body>
 
</html>


Output:

Semantic-UI Form Field Width Variation

Example 3: The following code demonstrates the Semantic-UI Form Field Required 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 Field Variations </h3>
        <h3> Required: </h3>
    </div> <br>
 
    <div class="ui container form">
        <div class="required field">
            <label> First Name: </label>
            <input type="text"
                   placeholder="Enter First Name">
        </div>
        <div class="required field">
            <label> Last Name: </label>
            <input type="text"
                   placeholder="Enter Last Name">
        </div>
    </div>
</body>
 
</html>


Output:

Semantic-UI Form Field Required 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