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 the user. We can group a set of input fields of different types such as text, password, number, etc in a form. Let’s have a look at various Form Content.
Semantic UI Form Content:
- Field: A Semantic UI field item contains a label and an input tag that is custom styled.
- Fields: A set of fields are grouped together into one.
- Textarea: A semantic UI styled textarea allows the user to enter user-defined input.
- Checkbox: A semantic UI-styled checkbox can be created on a form.
- Radio Checkbox: A semantic UI-styled radio checkbox can be created on a form.
- Dropdown: A semantic UI-styled dropdown can be created on a form using JavaScript.
- Multiple Select: A semantic UI-styled multiple select can be created on a form from which the user can select multiple choices.
- HTML Select: A dropdown can be created with HTML, when the option to use JavaScript, is disabled.
- Message: A message can be displayed to the user when he/she interacts with the form.
Syntax:
<form class="ui form">
...
</form>
Note: Use the above syntax according to the need by using a combination of the above-mentioned classes. Refer to the examples below for a better understanding of the classes.
Example 1: In the below example, we have created a form with field content.
HTML
<!DOCTYPE html><html><head> <title>Semantic UI Form Content</title> <link href= rel="stylesheet" /> <script src= integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= </script></head><body> <div class="ui container"> <h2 class="ui green header">GeeksforGeeks</h2> <h4>Semantic UI Form Content</h4> <hr> <br /> <div class="ui form"> <div class="field"> <label>Username</label> <input type="text" placeholder="Enter Your Username"> </div> <div class="ui submit button">Submit</div> </div> </div></body></html> |
Output:
Field Content
Example 2: In the below example, we have created fields content.
HTML
<!DOCTYPE html><html><head> <title>Semantic UI Form Content</title> <link href= rel="stylesheet" /> <script src= integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= </script></head><body> <div class="ui container"> <h2 class="ui green header">GeeksforGeeks</h2> <h4>Semantic UI Form Content</h4> <hr> <br /> <div class="ui form"> <div class="two fields"> <div class="field"> <label>Username</label> <input type="text" placeholder="Enter Your Username"> </div> <div class="field"> <label>Password</label> <input type="password" placeholder="Enter Your Password"> </div> </div> <div class="ui submit button">Submit</div> </div> </div></body></html> |
Output:
Fields Content
Example 3: In the below example, we have created a form with textarea.
HTML
<!DOCTYPE html><html><head> <title>Semantic UI Form Content</title> <link href= rel="stylesheet" /> <script src= integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= </script></head><body> <div class="ui container"> <h2 class="ui green header">GeeksforGeeks</h2> <h4>Semantic UI Form Content</h4> <hr> <br /> <div class="ui form"> <div class="field"> <label>Tell Us about yourself</label> <textarea spellcheck="true"></textarea> </div> <div class="ui submit button">Submit</div> </div> </div></body></html> |
Output:
Form with textarea
Example 4: In the below example, we have created a form with checkboxes.
HTML
<!DOCTYPE html><html><head> <title>Semantic UI Form Content</title> <link href= rel="stylesheet" /> <script src= integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= </script></head><body> <div class="ui container"> <h2 class="ui green header">GeeksforGeeks</h2> <h4>Semantic UI Form Content</h4> <hr> <br /> <div class="ui form"> <div class="inline field"> <label>Select the domains you are experienced in</label> <div class="ui checkbox"> <input type="checkbox" tabindex="0" class="hidden"> <label>Python</label> </div> <div class="ui checkbox"> <input type="checkbox" tabindex="0" class="hidden"> <label>Node.js</label> </div> <div class="ui checkbox"> <input type="checkbox" tabindex="0" class="hidden"> <label>React</label> </div> </div> <div class="ui submit button">Submit</div> </div> </div> <script> $('.ui.checkbox').checkbox(); </script></body></html> |
Output:
Form with checkbox
Example 5: In the below example, we have created a form with radio checkboxes.
HTML
<!DOCTYPE html><html><head> <title>Semantic UI Form Content</title> <link href= rel="stylesheet" /> <script src= integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= </script></head><body> <div class="ui container"> <h2 class="ui green header">GeeksforGeeks</h2> <h4>Semantic UI Form Content</h4> <hr> <br /> <div class="ui form"> <div class="inline fields"> <label for="gender">Gender:</label> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="gender" checked="" tabindex="0" class="hidden"> <label>Male</label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="gender" tabindex="0" class="hidden"> <label>Female</label> </div> </div> </div> <div class="ui submit button">Submit</div> </div> </div> <script> $('.ui.radio.checkbox').checkbox(); </script></body></html> |
Output:
Form with radio checkboxes
Example 6: In the below example, we have created a form with a dropdown.
HTML
<!DOCTYPE html><html><head> <title>Semantic UI Form Content</title> <link href= rel="stylesheet" /> <script src= integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= </script></head><body> <div class="ui container"> <h2 class="ui green header">GeeksforGeeks</h2> <h4>Semantic UI Form Content</h4> <hr> <br /> <div class="ui form"> <div class="ui selection dropdown"> <input type="hidden" name="language"> <i class="dropdown icon"></i> <div class="default text"> Select your favourite language </div> <div class="menu"> <div class="item" data-value="0">Java</div> <div class="item" data-value="1">Python</div> <div class="item" data-value="2">JavaScript</div> <div class="item" data-value="3">C++</div> </div> </div> <div class="ui submit button">Submit</div> </div> </div> <script> $('.dropdown').dropdown(); </script></body></html> |
Output:
Form with a dropdown
Example 7: In the below example, we have created a form with multiple select.
HTML
<!DOCTYPE html><html><head> <title>Semantic UI Form Content</title> <link href= rel="stylesheet" /> <script src= integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= </script></head><body> <div class="ui container"> <h2 class="ui green header">GeeksforGeeks</h2> <h4>Semantic UI Form Content</h4> <hr> <br /> <div class="ui form"> <div class="ui field"> <label>Languages</label> <select multiple="" class="ui dropdown"> <option value=""> Select the languages you are familiar with </option> <option value="Java">Java</option> <option value="Python">Python</option> <option value="Node.js">Node.js</option> <option value="React">React</option> <option value="MongoDb">MongoDb</option> <option value="SQL">SQL</option> </select> </div> <div class="ui submit button">Submit</div> </div> </div> <script> $('.dropdown').dropdown(); </script></body></html> |
Output:
Form with multiple select
Example 8: In the below example, we have created a form with HTML Select.
HTML
<!DOCTYPE html><html><head> <title>Semantic UI Form Content</title> <link href= rel="stylesheet" /> <script src= integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= </script></head><body> <div class="ui container"> <h2 class="ui green header">GeeksforGeeks</h2> <h4>Semantic UI Form Content</h4> <hr> <br /> <div class="ui form"> <div class="ui field"> <label>Languages</label> <select> <option value=""> Select the languages you are familiar with </option> <option value="Java">Java</option> <option value="Python">Python</option> <option value="Node.js">Node.js</option> <option value="React">React</option> <option value="MongoDb">MongoDb</option> <option value="SQL">SQL</option> </select> </div> <div class="ui submit button">Submit</div> </div> </div></body></html> |
Output:
Form with HTML Select
Example 9: In the below example, we have created a form with a success message.
HTML
<!DOCTYPE html><html><head> <title>Semantic UI Form Content</title> <link href= rel="stylesheet" /> <script src= integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= </script></head><body> <div class="ui container"> <h2 class="ui green header">GeeksforGeeks</h2> <h4>Semantic UI Form Content</h4> <hr> <br /> <div class="ui form success"> <div class="two fields"> <div class="field"> <label>Username</label> <input type="text" placeholder="Enter Your Username"> </div> <div class="field"> <label>Password</label> <input type="password" placeholder="Enter Your Password"> </div> </div> <div class="ui success message"> <div class="header">Submitted Successfully</div> <p>Form has been submitted Successfully.</p> </div> <div class="ui submit button">Submit</div> </div> </div></body></html> |
Output:
Form with a success message
Reference: https://semantic-ui.com/collections/form.html
Please Login to comment...