Forms

<form action="" method="post" class="SnForm">
    <div class="SnForm-item required">
        <label for="userName" class="SnForm-label">User Name</label>
        <input type="text" id="userName" name="userName" required class="SnForm-control">
    </div>
    <div class="SnForm-item required">
        <label for="password" class="SnForm-label">Password</label>
        <div class="SnControl-wrapper">
            <input type="password" id="password" name="password" required class="SnForm-control SnControl">
            <div class="SnControl-suffix togglePassword">
                <svg viewBox="64 64 896 896" focusable="false" class="" data-icon="eye-invisible" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                    <path d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 0 0 0-51.5zm-63.57-320.64L836 122.88a8 8 0 0 0-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 0 0 0 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 0 0 0 11.31L155.17 889a8 8 0 0 0 11.31 0l712.15-712.12a8 8 0 0 0 0-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 0 0-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 0 1 146.2-106.69L401.31 546.2A112 112 0 0 1 396 512z"></path>
                    <path d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 0 0 227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 0 1-112 112z"></path>
                </svg>
            </div>
        </div>
    </div>
    <button type="submit" class="SnBtn block primary">Login</button>
</form>

<form action="" method="post" class="SnForm horizontal">
    <div class="SnForm-item required">
        <label for="fullName" class="SnForm-label">Full Name</label>
        <input type="text" id="fullName" name="fullName" placeholder="fullName" class="SnForm-control">
    </div>
    <div class="SnForm-item">
        <label for="adress" class="SnForm-label">Address</label>
        <input type="text" id="adress" name="adress" placeholder="address" class="SnForm-control">
    </div>
    <div class="SnForm-item">
        <label for="gender" class="SnForm-label">Gender</label>
        <select id="gender" name="gender" class="SnForm-control">
            <option value="man">Man</option>
            <option value="woman">Woman</option>
        </select>
    </div>
    <div class="SnForm-item">
        <label for="message" class="SnForm-label">Message</label>
        <textarea id="message" name="message" cols="3" rows="5" class="SnForm-control"></textarea>
    </div>
</form>

<form action="" method="post" class="SnForm">
    <div class="SnForm-item required has-danger">
        <label for="item1" class="SnForm-label">Item1</label>
        <input type="text" id="item1" name="item1" class="SnForm-control">
        <div class="SnForm-help">Help text</div>
    </div>
    <div class="SnForm-item has-success">
        <label for="item2" class="SnForm-label">Item2</label>
        <input type="text" id="item2" name="item2" class="SnForm-control">
        <div class="SnForm-help">Help text</div>
    </div>
    <div class="SnForm-item">
        <label for="item3" class="SnForm-label">Item3</label>
        <select id="item3" name="item3" class="SnForm-control">
            <option value="man">Man</option>
            <option value="woman">Woman</option>
        </select>
        <div class="SnForm-help">Help text</div>
    </div>
    <div class="SnForm-item">
        <label for="item4" class="SnForm-label">Item4</label>
        <textarea id="item4" name="item4" cols="3" rows="5" class="SnForm-control"></textarea>
        <div class="SnForm-help">Help text</div>
    </div>
</form>

<form action="" method="post" class="SnForm">
    <div class="SnForm-item">
        <label for="size1" class="SnForm-label">Size1</label>
        <input type="text" id="size1" name="size1" class="SnForm-control sm">
        <div class="SnForm-help">Help text</div>
    </div>
    <div class="SnForm-item">
        <label for="size2" class="SnForm-label">Size2</label>
        <input type="text" id="size2" name="size2" class="SnForm-control">
        <div class="SnForm-help">Help text</div>
    </div>
    <div class="SnForm-item">
        <label for="size3" class="SnForm-label">Size3</label>
        <input type="text" id="size3" name="size3" class="SnForm-control lg">
        <div class="SnForm-help">Help text</div>
    </div>
    <div class="SnForm-item">
        <label for="size4" class="SnForm-label">Size4</label>
        <select id="size4" name="size4" class="SnForm-control sm">
            <option value="1" selected>Option 1</option>
        </select>
        <div class="SnForm-help">Help text</div>
    </div>
    <div class="SnForm-item">
        <label for="size5" class="SnForm-label">Size5</label>
        <select id="size5" name="size5" class="SnForm-control">
            <option value="1" selected>Option 1</option>
        </select>
        <div class="SnForm-help">Help text</div>
    </div>
    <div class="SnForm-item">
        <label for="size6" class="SnForm-label">Size6</label>
        <select id="size6" name="size6" class="SnForm-control lg">
            <option value="1" selected>Option 1</option>
        </select>
        <div class="SnForm-help">Help text</div>
    </div>
</form>

<form action="" method="post" class="SnForm">
    <div class="SnForm-item inner">
        <label for="innerSize1" class="SnForm-label">Size1</label>
        <div class="SnControl-wrapper">
            <i class="SnControl-prefix icon-ticket"></i>
            <input type="text" id="innerSize1" class="SnForm-control SnControl sm">
        </div>
        <div class="SnForm-help">Help text</div>
    </div>
    <div class="SnForm-item inner">
        <label for="innerSize2" class="SnForm-label">Size2</label>
        <div class="SnControl-wrapper">
            <i class="SnControl-prefix icon-ticket"></i>
            <input type="text" id="innerSize2" class="SnForm-control SnControl">
        </div>
        <div class="SnForm-help">Help text</div>
    </div>
    <div class="SnForm-item inner">
        <label for="innerSize3" class="SnForm-label">Size3</label>
        <div class="SnControl-wrapper">
            <i class="SnControl-prefix icon-ticket"></i>
            <input type="text" id="innerSize3" class="SnForm-control SnControl lg">
        </div>
        <div class="SnForm-help">Help text</div>
    </div>
    <div class="SnForm-item inner">
        <label for="innerSize4" class="SnForm-label">Size4</label>
        <div class="SnControl-wrapper">
            <i class="SnControl-prefix icon-ticket"></i>
            <select id="innerSize4" class="SnForm-control SnControl sm">
                <option value="1" selected>Option 1</option>
            </select>
        </div>
        <div class="SnForm-help">Help text</div>
    </div>
    <div class="SnForm-item inner">
        <label for="innerSize5" class="SnForm-label">Size5</label>
        <div class="SnControl-wrapper">
            <i class="SnControl-prefix icon-ticket"></i>
            <select id="innerSize5" class="SnForm-control SnControl">
                <option value="1" selected>Option 1</option>
            </select>
        </div>
        <div class="SnForm-help">Help text</div>
    </div>
    <div class="SnForm-item inner">
        <label for="innerSize6" class="SnForm-label">Size6</label>
        <div class="SnControl-wrapper">
            <i class="SnControl-prefix icon-ticket"></i>
            <select id="innerSize6" class="SnForm-control SnControl lg">
                <option value="1" selected>Option 1</option>
            </select>
        </div>
        <div class="SnForm-help">Help text</div>
    </div>
</form>

<form action="" method="post" class="SnForm">
    <div class="SnForm-item inner required">
        <label for="innerSizeLabel1" class="SnForm-label">Label description</label>
        <div class="SnControlGroup">
            <div class="SnControl-wrapper SnControlGroup-input">
                <i class="SnControl-prefix icon-ticket"></i>
                <input type="text" id="innerSizeLabel1" class="SnForm-control SnControl sm">
            </div>
            <div class="SnControlGroup-append">
                <button type="button" class="SnBtn icon iconCenter primary">
                    <i class="icon-search"></i>
                </button>
            </div>
        </div>
        <div class="SnForm-help">Help text</div>
    </div>
    <div class="SnForm-item inner required">
        <label for="innerSizeLabel2" class="SnForm-label">Label description</label>
        <div class="SnControlGroup">
            <div class="SnControl-wrapper SnControlGroup-input">
                <i class="SnControl-prefix icon-ticket"></i>
                <input type="text" id="innerSizeLabel2" class="SnForm-control SnControl">
            </div>
            <div class="SnControlGroup-append">
                <button type="button" class="SnBtn icon iconCenter primary">
                    <i class="icon-search"></i>
                </button>
            </div>
        </div>
        <div class="SnForm-help">Help text</div>
    </div>
    <div class="SnForm-item inner required">
        <label for="innerSizeLabel3" class="SnForm-label">Label description</label>
        <div class="SnControlGroup">
            <div class="SnControl-wrapper SnControlGroup-input">
                <i class="SnControl-prefix icon-ticket"></i>
                <input type="text" id="innerSizeLabel3" class="SnForm-control SnControl lg">
            </div>
            <div class="SnControlGroup-append">
                <button type="button" class="SnBtn icon iconCenter primary">
                    <i class="icon-search"></i>
                </button>
            </div>
        </div>
        <div class="SnForm-help">Help text</div>
    </div>
</form>

<form action="" method="post" class="SnForm">
    <div class="SnForm-item outlined">
        <input type="text" id="outlinedSize1" placeholder=" " class="SnForm-control sm">
        <label for="outlinedSize1" class="SnForm-label sm">Size1</label>
        <div class="SnForm-help">Help text</div>
    </div>
    <div class="SnForm-item outlined required">
        <input type="text" id="outlinedSize2" placeholder=" " class="SnForm-control">
        <label for="outlinedSize2" class="SnForm-label">Size2</label>
        <div class="SnForm-help">Help text</div>
    </div>
    <div class="SnForm-item outlined">
        <input type="text" id="outlinedSize3" placeholder=" " class="SnForm-control lg">
        <label for="outlinedSize3" class="SnForm-label lg">Size3</label>
        <div class="SnForm-help">Help text</div>
    </div>
</form>