Semantic-UI Form Variations
Semantic UI is an open-source framework that has some predefined classes to make our website look beautiful and responsive. It is similar to bootstrap as it has pre-defined classes for use. It used CSS and jQuery to build the interface. It has some different types of elements that help us to create a beautiful website. A Semantic UI form is used to create the form using the form classes to show the related user input fields in a structured manner.
In this article, we will discuss form variations in Semantic UI.
Semantic UI Form Variations:
- size: This variation is used to create different size forms.
- equal width form: This variation is used to automatically divide fields to an equal width.
- inverted: This variation is used to invert the form colors.
Semantic UI Form variations classes:
- mini: This class is used to create a mini-size form.
- tiny: This class is used to create a tiny size form.
- small: This class is used to create a small size form.
- large: This class is used to create a large size form.
- big: This class is used to create a big-size form.
- huge: This class is used to create a huge size form.
- massive: This class is used to create a massive size form.
- equal width form: This class is used to create the equal width fields of a form.
- inverted: This class is used to invert the form background color.
Syntax:
<div class="ui Form-Variations-Class form"> .... </div>
Example 1: The following code demonstrates the Semantic UI form size variation.
HTML
<!DOCTYPE html><html><head> <title> Semantic-UI Form Variations </title> <link rel="stylesheet" href=</head><body> <div class="ui container"> <h2 class="ui header green"> GeeksforGeeks </h2> <h3> Semantic-UI Form Variations - Size </h3> <div class="ui mini form"> <h4> Mini Size: </h4> <div class="field"> <label> Username: </label> <input placeholder="Enter Username" type="text"> </div> <div class="field"> <label> Password: </label> <input placeholder="Enter Password" type="text"> </div> <div class="ui button"> Login </div> </div> <br> <div class="ui tiny form"> <h4> Tiny Size: </h4> <div class="field"> <label> Username: </label> <input placeholder="Enter Username" type="text"> </div> <div class="field"> <label> Password: </label> <input placeholder="Enter Password" type="text"> </div> <div class="ui button"> Login </div> </div> <br> <div class="ui small form"> <h4> Small Size: </h4> <div class="field"> <label> Username: </label> <input placeholder="Enter Username" type="text"> </div> <div class="field"> <label> Password: </label> <input placeholder="Enter Password" type="text"> </div> <div class="ui button"> Login </div> </div> <br> <div class="ui large form"> <h4> Large Size: </h4> <div class="field"> <label> Username: </label> <input placeholder="Enter Username" type="text"> </div> <div class="field"> <label> Password: </label> <input placeholder="Enter Password" type="text"> </div> <div class="ui button"> Login </div> </div> <br> <div class="ui huge form"> <h4> Huge Size: </h4> <div class="field"> <label> Username: </label> <input placeholder="Enter Username" type="text"> </div> <div class="field"> <label> Password: </label> <input placeholder="Enter Password" type="text"> </div> <div class="ui button"> Login </div> </div> <br> <div class="ui massive form"> <h4> Massive Size: </h4> <div class="field"> <label> Username: </label> <input placeholder="Enter Username" type="text"> </div> <div class="field"> <label> Password: </label> <input placeholder="Enter Password" type="text"> </div> <div class="ui button"> Login </div> </div> <br> </div></body></html> |
Output:
Semantic-UI Form Size Variation.
Example 2: The following code demonstrates the Semantic UI Form equal width form variation.
HTML
<!DOCTYPE html><html><head> <title> Semantic-UI Form Variations </title> <link rel="stylesheet" href=</head><body> <div class="ui container"> <h2 class="ui header green"> GeeksforGeeks </h2> <h3> Semantic-UI Form Variations - Equal Width Form </h3> <div class="ui equal width form"> <div class="fields"> <div class="field"> <label> First Name: </label> <input type="text" placeholder="Enter First name"> </div> <div class="field"> <label> Last Name: </label> <input type="text" placeholder="Enter Last name"> </div> </div> <div class="fields"> <div class="field"> <label> Email: </label> <input type="text" placeholder="Enter email"> </div> <div class="field"> <label> Mobile: </label> <input type="text" placeholder="Enter mobile number"> </div> <div class="field"> <label> City: </label> <input type="text" placeholder="Enter city"> </div> </div> </div> </div></body></html> |
Output:
Semantic-UI Form Equal Width Form Variation
Example 3: The following code demonstrates the Semantic-UI form inverted variation.
HTML
<!DOCTYPE html><html><head> <title> Semantic-UI Form Variations </title> <link rel="stylesheet" href=</head><body> <div class="ui container"> <h2 class="ui header green"> GeeksforGeeks </h2> <h3> Semantic-UI Form Variations - Inverted </h3> <div class="ui inverted segment"> <div class="ui inverted form"> <div class="two fields"> <div class="field"> <label> Username: </label> <input type="text" placeholder="Enter Username" > </div> <div class="field"> <label> Password: </label> <input type="text" placeholder="Enter Password" > </div> </div> <div class="ui button"> Login </div> </div> </div> </div></body></html> |
Output:
Semantic-UI Form Inverted Variation
Reference: https://semantic-ui.com/collections/form.html
Please Login to comment...