Semantic-UI Form Group 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.
The form is a container that has various types of input elements such as text fields, buttons, checkboxes, etc. Semantic-UI Form is used to create the beautiful form using the form classes to show the related user input fields in a structured manner. In this article, we will discuss Form Group Variations in Semantic-UI.
Semantic-UI Form Group Variations:
- Evenly Divided: This variation is used to divide the input fields evenly.
- Grouped Fields: This variation is used to create the fields to show the choices that are related to each other.
- Equal Width Fields: This variation is used to create the equal width fields.
- Inline Fields: This variation is used to create inline fields in a row.
Syntax:
<div class="ui form">
<div class="Form-Group-Variations-Class">
.....
</div>
</div>Example 1: The following code demonstrates the Semantic-UI Form Group Evenly Divided Variation.
HTML
<!DOCTYPE html><html><head> <link rel="stylesheet" href=</head><body> <div class="ui container center aligned"> <h2 class="ui header green"> GeeksforGeeks </h2> <h3>Semantic-UI Form Group Variations</h3> <h3>Evenly Divided:</h3> </div><br> <div class="ui container form"> <div class="four 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 class="field"> <label> Email: </label> <input type="text" placeholder="Enter email id"> </div> <div class="field"> <label> Password</label> <input type="text" placeholder="Enter password"> </div> </div> </div></body></html> |
Output:
Semantic-UI Form Group Evenly Divided Variation
Example 2: The following code demonstrates the Semantic-UI Form Group Grouped Fields Variation.
HTML
<!DOCTYPE html><html><head> <!-- Compressed CSS --> <link rel="stylesheet" href= <!-- Compressed JavaScript --> <script src= </script> <script src= </script></head><body> <div class="ui container"> <h2 class="ui header green"> GeeksforGeeks </h2> <h3>Semantic-UI Form Group Variations</h3> <h3>Grouped Fields:</h3> </div><br> <div class="ui container form"> <div class="grouped fields"> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="lang" tabindex="0" class="hidden" checked> <label> C++ </label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="lang" tabindex="0" class="hidden"> <label> Java </label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="lang" tabindex="0" class="hidden"> <label> Python </label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="lang" tabindex="0" class="hidden"> <label> Javascript </label> </div> </div> </div> </div> <script> $('.ui.radio.checkbox').checkbox(); </script></body></html> |
Output:
Semantic-UI Form Group Grouped Fields Variation
Example 3: The following code demonstrates the Semantic-UI Form Group Equal Width Fields Variation.
HTML
<!DOCTYPE html><html><head> <link rel="stylesheet" href=</head><body> <div class="ui container center aligned"> <h2 class="ui header green"> GeeksforGeeks </h2> <h3> Semantic-UI Form Group Variations </h3> <h3> Equal Width Fields: </h3> </div> <br> <div class="ui form"> <div class="equal width 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="equal width fields"> <div class="field"> <label> Email: </label> <input type="text" placeholder="Enter email id"> </div> <div class="field"> <label> Password</label> <input type="text" placeholder="Enter password"> </div> <div class="field"> <label> Confirm Password</label> <input type="text" placeholder="Confirm password"> </div> </div> </div></body></html> |
Output:
Semantic-UI Form Group Equal Width Fields Variation
Example 4: The following code demonstrates the Semantic-UI Form Group Inline Fields Variation.
HTML
<!DOCTYPE html><html><head> <link rel="stylesheet" href=</head><body> <div class="ui container"> <h2 class="ui header green"> GeeksforGeeks </h2> <h3>Semantic-UI Form Group Variations</h3> <h3> Inline Fields: </h3> <div class="ui form"> <div class="inline fields"> <label>Full Name: </label> <div class="field"> <input type="text" placeholder="Enter First name"> </div> <div class="field"> <input type="text" placeholder="Enter Middle name"> </div> <div class="field"> <input type="text" placeholder="Enter Last name"> </div> </div> </div> </div></body></html> |
Output:
Semantic-UI Form Group Inline Fields Variation
Reference: https://semantic-ui.com/collections/form.html
Please Login to comment...