Semantic-UI Equal Width Form 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 Equal Width Form Variation is used to display the equal width input fields. It divides the multiple input fields into equal width automatically.
Semantic-UI Equal Width Form Variation Used Class:
- equal width form: This class is used to divide the multiple input fields into equal width automatically.
Syntax:
<div class="ui equal width form">
<div class="fields">
...
</div>
</div>
Example 1: In this example, we will describe the Semantic-UI Equal Width Form Variation.
HTML
<!DOCTYPE html><html><head> <title> Semantic-UI Equal Width Form Variation </title> <link rel="stylesheet" href=</head><body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Equal Width Form Variation</h3> </div> <form class="ui container equal width form"> <div class="fields"> <div class="field"> <label>Username</label> <input type="text" name="username" placeholder="Enter Username"> </div> <div class="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 Equal Width Form Variation.
HTML
<!DOCTYPE html><html><head> <title> Semantic-UI Equal Width Form Variation </title> <link rel="stylesheet" href=</head><body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Equal Width Form Variation</h3> </div> <form class="ui container equal width form"> <div class="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 class="field"> <label>Username</label> <input type="text" name="username" placeholder="Enter Username"> </div> <div class="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#equal-width-form
Please Login to comment...