Semantic-UI Form Field 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 form using the form classes to show the related user input fields in a structured manner. In this article, we will discuss Form Field Variations in Semantic-UI.
Semantic-UI Form Field Variations:
- Inline Field: This variation is used to create the label and input field inline.
- Width: This variation is used to specify the width of the input field.
- Required: This variation is used to show that the input field is mandatory.
Semantic-UI Form Field Variations Classes:
- inline field: This class is used to create the label and input field inline.
- wide: This class is used to specify the width of the input field.
- required: This class is used to show that the input field is mandatory.
Syntax:
<div class="ui form">
<div class="Field-Variations-Class">
....
</div>
</div>Example 1: The following code demonstrates the Semantic-UI Form Inline Field 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 Field Variations </h3> <h3> Inline Field: </h3> <div class="ui form"> <div class="inline field"> <label> Username: </label> <input type="text" placeholder="Enter username"> </div> </div> </div></body></html> |
Output:
Semantic-UI Form Inline Field Variation
Example 2: The following code demonstrates the Semantic-UI Form Field Width 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 Field Variations </h3> <h3> Width: </h3> <div class="ui form"> <div class="fields"> <div class="six wide field"> <input type="text" placeholder="6 Wide Field"> </div> <div class="four wide field"> <input type="text" placeholder="4 Wide Field"> </div> </div> <div class="fields"> <div class="three wide field"> <input type="text" placeholder="3 Wide Field"> </div> <div class="five wide field"> <input type="text" placeholder="5 Wide Field"> </div> <div class="eight wide field"> <input type="text" placeholder="8 Wide Field"> </div> </div> <div class="fields"> <div class="nine wide field"> <input type="text" placeholder="9 Wide Field"> </div> <div class="seven wide field"> <input type="text" placeholder="7 Wide Field"> </div> </div> </div> </div></body></html> |
Output:
Semantic-UI Form Field Width Variation
Example 3: The following code demonstrates the Semantic-UI Form Field Required 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 Field Variations </h3> <h3> Required: </h3> </div> <br> <div class="ui container form"> <div class="required field"> <label> First Name: </label> <input type="text" placeholder="Enter First Name"> </div> <div class="required field"> <label> Last Name: </label> <input type="text" placeholder="Enter Last Name"> </div> </div></body></html> |
Output:
Semantic-UI Form Field Required Variation
Reference: https://semantic-ui.com/collections/form.html
Please Login to comment...