Skip to content
Related Articles

Related Articles

Semantic-UI Form Field Required Variation

Improve Article
Save Article
  • Last Updated : 10 Mar, 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 use to make your website look more amazing. It uses a class to add CSS to the elements.

A form is the section of a document that contains a number of input fields such as text field, password, checkbox, etc. Semantic-UI form is used to create attractive forms using semantic-ui classes. It is very easy to design attractive forms.

The Semantic-UI Form Field Required Variation is used to display the input field mandatory. This variation is used to specify that the input field must be filled out before submitting the form.

Semantic-UI Form Field Required Variation Used Class:

  • required: This class is used to display the mandatory input field. It sets the star (*) on the label element.

Syntax:

<div class="ui form">
    <div class="required field">
        ...
    </div>
</div> 

Example 1: In this example, we will describe the use of Semantic-UI Form Field Required Variation.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        Semantic-UI Form Field Required Variation
    </title>
 
    <link rel="stylesheet" href=
</head>
 
<body>
    <div class="ui container">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
 
        <h3>Semantic-UI Form Field Required Variation</h3>
    </div>
 
    <form class="ui container form">
        <div class="field required">
            <label>Username</label>
            <input type="text" name="username"
                placeholder="Enter Username">
        </div>
 
        <div class="field required">
            <label>Password</label>
            <input type="text" name="pwd"
                placeholder="Enter Password">
        </div>
 
        <button class="ui button" type="submit">
            Submit
        </button>
    </form>
</body>
 
</html>


Output:

Example 2: In this example, we will describe the use of Semantic-UI Form Field Required Variation.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        Semantic-UI Form Field Required Variation
    </title>
 
    <link href=
        rel="stylesheet" />
</head>
 
<body>
    <div class="ui container center aligned">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
 
        <h3>Semantic-UI Form Field Required Variation</h3>
    </div>
 
    <form class="ui container form">
        <div class="three fields">
            <div class="field required">
                <label>First Name</label>
                <input type="text" name="fname"
                    placeholder="Enter First Name">
            </div>
            <div class="field">
                <label>Second Name</label>
                <input type="text" name="sname"
                    placeholder="Enter Second Name">
            </div>
            <div class="field required">
                <label>Last Name</label>
                <input type="text" name="lname"
                    placeholder="Enter Last Name">
            </div>
        </div>
 
        <div class="two fields">
            <div class="field required">
                <label>Email Id</label>
                <input type="email" name="email"
                    placeholder="Enter Email Id">
            </div>
            <div class="field required">
                <label>Mobile No</label>
                <input type="number" name="number"
                    placeholder="Enter Mobile No">
            </div>
        </div>
 
        <div class="field">
            <label>Short Notes</label>
            <textarea></textarea>
        </div>
 
        <button class="ui button" type="submit">
            Submit
        </button>
    </form>
</body>
 
</html>


Output:

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!