Semantic-UI Form Fields Content Last Updated : 10 Mar, 2022 Comments Improve Suggest changes Like Article Like Report 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 Fields Content is used to display the grouped input fields of the form element. It can group multiple input fields and display it in a single row. Semantic-UI Form Fields Content Used Class: fields: This class is used to display the grouped input fields of the form element. Syntax: <div class="ui form"> <div class="fields"> <div class="field"> ... </div> ... </div> </div> Example 1: In this example, we will describe the use of Semantic-UI Form Fields Content. HTML <!DOCTYPE html> <html> <head> <title> Semantic-UI Form Fields Content </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"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Form Fields Content</h3> <form class="ui 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="text" name="pwd" placeholder="Enter Password"> </div> </div> <button class="ui button right" type="submit"> Submit </button> </form> </div> </body> </html> Output: Example 2: In this example, we will describe the use of Semantic-UI Form Fields Content. HTML <!DOCTYPE html> <html> <head> <title> Semantic-UI Form Fields Content </title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Form Fields Content</h3> </div> <form class="ui container form"> <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> <button class="ui button right" type="submit"> Submit </button> </form> </body> </html> Output: Reference: https://semantic-ui.com/collections/form.html#fields Comment More infoAdvertise with us Next Article Semantic-UI Form Fields Content B blalverma92 Follow Improve Article Tags : Web Technologies CSS Geeks Premier League Geeks-Premier-League-2022 Semantic-UI Semantic-UI Collections +1 More Similar Reads 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 2 min read Semantic-UI Form 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 make your website look more amazing. It uses a class to add CSS to the elements. Forms provide us with a way to take input from t 6 min read Semantic-UI Feed 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. Feed elements are used to document the we 4 min read Semantic-UI Form Dropdown Content Semantic UI is an open-source framework that used CSS and jQuery to make our websites look beautiful and responsive. It has predefined classes like bootstrap for use to make our website more interactive. It has some pre-built semantic components and we can use these components to create a responsive 2 min read Semantic-UI Header 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. Semantic-UI header provides a short summary of content and it's can contain 3 content 2 min read Semantic-UI List Item 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 looks more amazing. It uses a class to add CSS to the elements. Semantic UI List Item Content is used to 2 min read Semantic-UI List Content Semantic UI is an open-source framework that has some predefined classes to make our website look beautiful and responsive. It is similar to bootstrap as it has pre-defined classes for use. It used CSS and jQuery to build the interface. It has some different types of elements that help us to create 4 min read Semantic-UI Label 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. The best part about this framework is that it creates beautiful and responsive layout 3 min read Semantic-UI Item Content Header 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. Semantic UI Item content offers us different content like image, content, header, met 2 min read Semantic-UI Placeholder 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 is equipped with pre-built Semantic components that help create responsive layouts 3 min read Like