Semantic-UI Form Field Content
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 Content is used to create a form element that contains a label and an input element.
Semantic-UI Form Field Content Used Class:
- field: This class is used to create a form element containing a label and input field element.
Syntax:
<div class="ui form">
<div class="field">
...
</div>
</div>
Example 1: In this example, we will describe the use of Semantic-UI Form Field Content.
HTML
<!DOCTYPE html><html><head> <title> Semantic-UI Form Field Content </title> <link rel="stylesheet" href=</head><body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Form Field Content</h3> </div> <form class="ui container form"> <div class="field"> <label>Username</label> <input type="text" name="username" placeholder="Enter Username"> </div> </form></body></html> |
Output:
Example 2: In this example, we will describe the use of Semantic-UI Form Field Content.
HTML
<!DOCTYPE html><html><head> <title> Semantic-UI Form Field Content </title> <link rel="stylesheet" href=</head><body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Form Field Content</h3> </div> <form class="ui container form"> <div class="field"> <label>Enter Your Date of Birth</label> <input type="date" name="dob"> </div> </form></body></html> |
Output:
Reference: https://semantic-ui.com/collections/form.html#field
Please Login to comment...