Semantic-UI Form Grouped Fields Variation
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the 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, checkbox, etc. Semantic-UI form is used to create attractive forms using semantic-UI classes. It is very easy to design attractive forms.
The Semantic-UI Form Grouped Fields Variation is used to display the related choices of the element. It works similarly to the radio button.
Semantic-UI Form Grouped Fields Variation Used Class:
- grouped fields: This class is used to display the related choices of the elements.
Syntax:
<div class="ui form">
<div class="grouped fields">
...
</div>
...
</div>Example 1: In this example, we will describe the use of Semantic-UI Form Grouped Fields Variation.
HTML
<!DOCTYPE html><html><head> <title> Semantic-UI Form Grouped Fields Variation </title> <link href= rel="stylesheet" /> <script src= integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= </script></head><body> <div class="ui container"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Form Grouped Fields Variation</h3> </div> <br> <div class="ui form container"> <h4>Select Subject:</h4> <div class="grouped fields"> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="GFG" tabindex="0" class="hidden"> <label>HTML</label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="GFG" tabindex="0" class="hidden"> <label>CSS</label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="GFG" tabindex="0" class="hidden"> <label>JavaScript</label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="GFG" tabindex="0" class="hidden"> <label>Bootstrap</label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="GFG" tabindex="0" class="hidden"> <label>Node.js</label> </div> </div> </div> </div> <script> $('.ui.radio.checkbox').checkbox(); </script></body></html> |
Output:
Semantic-UI Form Grouped Fields Variation
Example 2: In this example, we will describe the use of Semantic-UI Form Grouped Fields Variation with Inverted variation.
HTML
<!DOCTYPE html><html><head> <title> Semantic-UI Form Grouped Fields Variation </title> <link href= rel="stylesheet" /> <script src= integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= </script></head><body> <div class="ui container"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Form Grouped Fields Variation</h3> </div> <br> <div class="ui inverted segment"> <div class="ui form inverted container"> <h4>Select Subject:</h4> <div class="grouped fields"> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="GFG" tabindex="0" class="hidden"> <label>HTML</label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="GFG" tabindex="0" class="hidden"> <label>CSS</label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="GFG" tabindex="0" class="hidden"> <label>JavaScript</label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="GFG" tabindex="0" class="hidden"> <label>Bootstrap</label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="GFG" tabindex="0" class="hidden"> <label>Node.js</label> </div> </div> </div> </div> </div> <script> $('.ui.radio.checkbox').checkbox(); </script></body></html> |
Output:
Semantic-UI Form Grouped Fields Variation
Reference: https://semantic-ui.com/collections/form.html#grouped-fields
Please Login to comment...