Skip to content
Related Articles

Related Articles

Semantic-UI Form Content

View Discussion
Improve Article
Save Article
  • Last Updated : 31 May, 2022
View Discussion
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!