Semantic-UI Form Group Evenly Divided Variation
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is 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, and checkbox, etc. Semantic-UI form is used to create attractive form using semantic-ui classes. It is very easy to design attractive form.
The Semantic-UI Form Group Evenly Divided Variation is used to divide the group of form fields on evenly width.
Semantic-UI Form Group Evenly Divided Variation Used Class:
- *number: This class is used to divide the form elements into equal width.
Syntax:
<div class="ui form"> <div class="three fields"> <div class="field"> ... </div> ... </div> </div>
Example 1: In this example, we will describes the use of Semantic-UI Form Group Evenly Divided Variation.
HTML
<!DOCTYPE html> < html > < head > < title > Semantic-UI Form Group Evenly Divided Variation </ title > < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </ head > < body > < div class = "ui container" > < h2 style = "color:green" > w3wiki </ h2 > < h3 >Semantic-UI Form Group Evenly Divided Variation</ h3 > </ div > < br > < form class = "ui container form" > < div class = "two fields" > < div class = "field" > < label >Username</ label > < input type = "text" name = "username" placeholder = "Enter Username" > </ div > < div class = "field" > < label >Password</ label > < input type = "text" name = "pwd" placeholder = "Enter Password" > </ div > </ div > < button class = "ui button" type = "submit" > Submit </ button > </ form > </ body > </ html > |
Output:
Example 2: In this example, we will describes the use of Semantic-UI Form Group Evenly Divided Variation.
HTML
<!DOCTYPE html> < html > < head > < title > Semantic-UI Form Group Evenly Divided Variation </ title > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> </ head > < body > < div class = "ui container center aligned" > < h2 style = "color:green" > w3wiki </ h2 > < h3 >Semantic-UI Form Group Evenly Divided Variation</ h3 > </ div > < form class = "ui container form" > < div class = "three fields" > < div class = "field" > < label >First Name</ label > < input type = "text" name = "fname" placeholder = "Enter First Name" > </ div > < div class = "field" > < label >Second Name</ label > < input type = "text" name = "sname" placeholder = "Enter Second Name" > </ div > < div class = "field" > < label >Last Name</ label > < input type = "text" name = "lname" placeholder = "Enter Last Name" > </ div > </ div > < div class = "two fields" > < div class = "field" > < label >Email Id</ label > < input type = "email" name = "email" placeholder = "Enter Email Id" > </ div > < div class = "field" > < label >Mobile No</ label > < input type = "number" name = "number" placeholder = "Enter Mobile No" > </ div > </ div > < div class = "field" > < label >Short Notes</ label > < textarea ></ textarea > </ div > < button class = "ui button" type = "submit" > Submit </ button > </ form > </ body > </ html > |
Output:
Reference: https://semantic-ui.com/collections/form.html#evenly-divided
Contact Us