Semantic-UI Form Size Variation

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">
            w3wiki
        </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">
            w3wiki
        </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

HTML

HTML

Contact Us