Semantic-UI Form Message 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 Message Content is used to create a form element that contains a message element. Message content is found into info, error, success, or warning message blocks inside a form element that is hidden by default.
Semantic-UI Form Message Content Used Class:
- message: This class is used to create a form element that contains a message element.
Syntax:
<div class="ui form">
<div class="ui message">
...
</div>
...
</div>
Example 1: In this example, we will describe the use of Semantic-UI Form Message Content.
HTML
<!DOCTYPE html><html><head> <title> Semantic-UI Form Message Content </title> <link href= rel="stylesheet" /></head><body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Form Message Content</h3> <div class="ui form"> <div class="ui message"> <div class="header"> GeeksforGeeks Subjects </div> <ul class="list"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>Bootstrap</li> </ul> </div> </div> </div></body></html> |
Output:
Example 2: In this example, we will describe the use of Semantic-UI Form Message Content.
HTML
<!DOCTYPE html><html><head> <title> Semantic-UI Form Message Content </title> <link href= rel="stylesheet" /></head><body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Form Message Content</h3> </div> <div class="ui container form"> <div class="field"> <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="ui message"> <div class="header"> GeeksforGeeks Subjects </div> <ul class="list"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>Bootstrap</li> </ul> </div> </div> </div></body></html> |
Output:
Reference: https://semantic-ui.com/collections/form.html#message
Please Login to comment...