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.

Output:

👁 Image

Example 2: In the below example, we have created fields content.

Output:

👁 Image

Example 3: In the below example, we have created a form with textarea.

Output:

👁 Image

Example 4: In the below example, we have created a form with checkboxes.

Output:

👁 Image

Example 5: In the below example, we have created a form with radio checkboxes.

Output:

👁 Image

Example 6: In the below example, we have created a form with a dropdown.

Output:

👁 Image

Example 7: In the below example, we have created a form with multiple select.

Output:

👁 Image

Example 8: In the below example, we have created a form with HTML Select.

Output:

👁 Image

Example 9: In the below example, we have created a form with a success message.

Output:

👁 Image

Reference: https://semantic-ui.com/collections/form.html