Semantic-UI Form Field Variations
Last Updated :
22 Apr, 2022
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
Share your thoughts in the comments
Please Login to comment...