Semantic-UI Form Inline Field 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 an attractive form using semantic-ui classes. It is very easy to design attractive forms. Semantic-UI Form Inline Field Variation is used to display the label element and input field inline i.e. label element and input field element will be placed into the same line.
Semantic-UI Form Inline Field Variation Used Class:
- inline field: This class is used to display the label element and input field inline.
Syntax:
<div class="ui form"> <div class="inline field"> ... </div> ... </div>
Example 1: In this example, we will describe the Semantic-UI Form Inline Field Variation.
HTML
<!DOCTYPE html> < html > < head > < title > Semantic-UI Form Inline Field 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 center aligned" > < h2 style = "color:green" > w3wiki </ h2 > < h3 >Semantic-UI Form Inline Field Variation</ h3 > </ div > < br >< br > < form class = "ui container equal width form" > < div class = "fields" > < div class = "inline field" > < label >Username</ label > < input type = "text" name = "username" placeholder = "Enter Username" > </ div > < div class = "inline field" > < label >Password</ label > < input type = "password" name = "pwd" placeholder = "Enter Password" > </ div > </ div > < button class = "ui button right" type = "submit" > Submit </ button > </ form > </ body > </ html > |
Output:
Example 2: In this example, we will describe the Semantic-UI Form Inline Field Variation.
HTML
<!DOCTYPE html> < html > < head > < title > Semantic-UI Form Inline Field 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 center aligned" > < h2 style = "color:green" > w3wiki </ h2 > < h3 >Semantic-UI Form Inline Field Variation</ h3 > </ div > < br >< br > < form class = "ui container equal width form" > < div class = "fields" > < div class = "inline field" > < label >First Name</ label > < input type = "text" name = "fname" placeholder = "Enter First Name" > </ div > < div class = "inline field" > < label >Second Name</ label > < input type = "text" name = "sname" placeholder = "Enter Second Name" > </ div > < div class = "inline field" > < label >Last Name</ label > < input type = "text" name = "lname" placeholder = "Enter Last Name" > </ div > </ div > < div class = "fields" > < div class = "inline field" > < label >Username</ label > < input type = "text" name = "username" placeholder = "Enter Username" > </ div > < div class = "inline field" > < label >Password</ label > < input type = "password" name = "pwd" placeholder = "Enter Password" > </ div > </ div > < button class = "ui button right" type = "submit" > Submit </ button > </ form > </ body > </ html > |
Output:
Reference: https://semantic-ui.com/collections/form.html#inline-field
Contact Us