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