Semantic-UI Form Field Width 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 attractive forms using semantic-ui classes. It is very easy to design attractive forms.
The Semantic-UI Form Field Width Variation is used to set the width of the form input field element.
Semantic-UI Form Field Width Variation Used Classes:
- *number width: This class is used to set the width of the input element. We can set the number value like – one, two, etc.
Syntax:
<div class="ui form">
<div class="fields">
<div class="six wide field">
...
</div>
...
</div>
</div>
Example 1: In this example, we will describe the uses of Semantic-UI Form Field Width Variation.
HTML
<!DOCTYPE html><html><head> <title> Semantic-UI Form Field Width Variation </title> <link rel="stylesheet" href=</head><body> <div class="ui container"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Form Field Width Variation</h3> </div> <form class="ui container form"> <div class="field six wide"> <label>Username</label> <input type="text" name="username" placeholder="Enter Username"> </div> <div class="field eight wide"> <label>Password</label> <input type="text" name="pwd" placeholder="Enter Password"> </div> <button class="ui button" type="submit"> Submit </button> </form></body></html> |
Output:
Example 2: In this example, we will describe the uses of Semantic-UI Form Field Width Variation.
HTML
<!DOCTYPE html><html><head> <title> Semantic-UI Form Field Width Variation </title> <link href= rel="stylesheet" /></head><body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Form Field Width Variation</h3> </div> <form class="ui container form"> <div class="three fields"> <div class="field six wide"> <label>First Name</label> <input type="text" name="fname" placeholder="Enter First Name"> </div> <div class="field four wide"> <label>Second Name</label> <input type="text" name="sname" placeholder="Enter Second Name"> </div> <div class="field six wide"> <label>Last Name</label> <input type="text" name="lname" placeholder="Enter Last Name"> </div> </div> <div class="two fields"> <div class="field nine wide"> <label>Email Id</label> <input type="email" name="email" placeholder="Enter Email Id"> </div> <div class="field seven wide"> <label>Mobile No</label> <input type="number" name="number" placeholder="Enter Mobile No"> </div> </div> <div class="field ten wide"> <label>Short Notes</label> <textarea></textarea> </div> <button class="ui button right" type="submit"> Submit </button> </form></body></html> |
Output:
Reference: https://semantic-ui.com/collections/form.html#width
Please Login to comment...