Semantic-UI Form Size Variation

Last Updated : 10 Mar, 2022

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is 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, and checkbox, etc.

Semantic-UI form is used to create attractive form using semantic-ui classes. It is very easy to design attractive form. Semantic-UI Form Size Variation is used to create a form element in different sizes.

Semantic-UI Form Size Variation Used Classes:

mini: It is used to set the image size to mini.
tiny: It is used to set the image size to tiny.
small: It is used to set the image size to small.
large: It is used to set the image size to large.
big: It is used to set the image size to big.
huge: It is used to set the image size to huge.
massive: It is used to set the image size to massive.

Syntax:

<div class="ui loading form">
   ...
</div>

Example 1: In this article, we will describe the Semantic-UI Form Size Variation with mini, tiny, small, and large sizes.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Semantic-UI Form Size Variation
    </title>

    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</head>

<body>
    <div class="ui container center aligned">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>

        <h3>Semantic-UI Form Size Variation</h3>
    </div>

    <form class="ui container mini form">
        <h4>Mini Size Form</h4>
        <div class="field">
            <label>Username</label>
            <input type="text" name="username" 
                placeholder="Enter Username">
        </div>

        <div class="field">
            <label>Password</label>
            <input type="password" name="pwd" 
                placeholder="Enter Password">
        </div>

        <button class="ui button right" 
            type="submit">
            Submit
        </button>
    </form>
    <br><br>

    <form class="ui container tiny form">
        <h4>Tiny Size Form</h4>
        <div class="field">
            <label>Username</label>
            <input type="text" name="username" 
                placeholder="Enter Username">
        </div>

        <div class="field">
            <label>Password</label>
            <input type="password" name="pwd" 
                placeholder="Enter Password">
        </div>

        <button class="ui button right" 
            type="submit">
            Submit
        </button>
    </form>
    <br><br>
    
    <form class="ui container small form">
        <h4>Small Size Form</h4>
        <div class="field">
            <label>Username</label>
            <input type="text" name="username" 
                placeholder="Enter Username">
        </div>

        <div class="field">
            <label>Password</label>
            <input type="password" name="pwd" 
                placeholder="Enter Password">
        </div>

        <button class="ui button right" 
            type="submit">
            Submit
        </button>
    </form>
    <br><br>

    <form class="ui container large form">
        <h4>Large Size Form</h4>
        <div class="field">
            <label>Username</label>
            <input type="text" name="username" 
                placeholder="Enter Username">
        </div>

        <div class="field">
            <label>Password</label>
            <input type="password" name="pwd" 
                placeholder="Enter Password">
        </div>

        <button class="ui button right" 
            type="submit">
            Submit
        </button>
    </form>
    <br><br><br><br>
</body>

</html>

Output:

Example 2: In this article, we will describe the Semantic-UI Form Size Variation with big, huge, and massive sizes.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Semantic-UI Form Size Variation
    </title>

    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</head>

<body>
    <div class="ui container center aligned">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>

        <h3>Semantic-UI Form Size Variation</h3>
    </div>

    <form class="ui container big form">
        <h4>Big Size Form</h4>
        <div class="field">
            <label>Username</label>
            <input type="text" name="username" 
                placeholder="Enter Username">
        </div>

        <div class="field">
            <label>Password</label>
            <input type="password" name="pwd" 
                placeholder="Enter Password">
        </div>

        <button class="ui button right" 
            type="submit">
            Submit
        </button>
    </form>
    <br><br>

    <form class="ui container huge form">
        <h4>Huge Size Form</h4>
        <div class="field">
            <label>Username</label>
            <input type="text" name="username" 
                placeholder="Enter Username">
        </div>

        <div class="field">
            <label>Password</label>
            <input type="password" name="pwd" 
                placeholder="Enter Password">
        </div>

        <button class="ui button right" 
            type="submit">
            Submit
        </button>
    </form>
    <br><br>
    
    <form class="ui container massive form">
        <h4>Massive Size Form</h4>
        <div class="field">
            <label>Username</label>
            <input type="text" name="username" 
                placeholder="Enter Username">
        </div>

        <div class="field">
            <label>Password</label>
            <input type="password" name="pwd" 
                placeholder="Enter Password">
        </div>

        <button class="ui button right" 
            type="submit">
            Submit
        </button>
    </form>
    <br><br><br><br>
</body>

</html>

Output:

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

Semantic-UI Menu Size Variation

ashokjaiswal

Improve

Article Tags :

Semantic-UI Form Size Variation

Similar Reads

Thank You!

What kind of Experience do you want to share?