Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Semantic-UI | Forms

  • Last Updated : 23 Nov, 2021

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is 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, and checkbox, etc.
Example 1: This example creating a simple Log In Form. 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
 
    <script src=
    </script>
 
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
 
    <script src=
    </script>
</head>
 
<body>
    <div class="ui container">
        <h2>Log In</h2>
        <form class="ui form">
            <div class="field">
                <label>Username</label>
                <input type="text" name="Username"
                        placeholder="Username">
            </div>
            <div class="field">
                <label>Password</label>
                <input type="password" name="password"
                        placeholder="Password">
            </div>
            <div class="field">
                <div class="ui checkbox">
                    <input type="checkbox" tabindex="0"
                            class="hidden">
                    <label>Remember Me</label>
                </div>
            </div>
            <button class="ui button" type="submit">
                Log In
            </button>
        </form>
    </div>
 
    <script>
        $('.ui.checkbox').checkbox(); 
    </script>
</body>
 
</html>

Output: 

Example 2: This example creating a form that contains input fields placing parallelly.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
 
    <script src=
    </script>
</head>
 
<body>
    <div class="ui container">
        <div class="ui form">
            <div class="fields">
                <div class="field">
                    <label>Name</label>
                    <input type="text"
                        placeholder="Name">
                </div>
                <div class="field">
                    <label>E-mail</label>
                    <input type="email"
                        placeholder="E-mail">
                </div>
                <div class="field">
                    <label>Password</label>
                    <input type="password"
                        placeholder="Password">
                </div>
            </div>
        </div>
    </div>
</body>
 
</html>

Output: 



Example 3: This example creating a Text Area.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
 
    <script src=
    </script>
</head>
 
<body>
    <div class="ui container">
        <div class="ui form">
            <div class="field">
                <label>Enter Text</label>
                <textarea rows="6"></textarea>
            </div>
        </div>
    </div>
</body>
 
</html>

Note: You can skip the rows attribute and get standard size textarea. 
Output: 

Example 4: This example creating the Checkbox. There are a variety of checkbox styles present in semantic-ui, like the standard checkbox, toggle, and slide. 
And for this, you need the jQuery library imported. 

$('.ui.checkbox').checkbox();

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
 
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
    </script>
 
    <script src=
    </script>
</head>
 
<body>
    <div class="ui container">
        <div class="ui form">
            <h2>Checkbox</h2>
            <div class="inline field">
                <div class="ui checkbox">
                    <input type="checkbox"
                        tabindex="0" class="hidden">
                    <label>Checkbox</label>
                </div>
            </div>
            <h2>Toggle</h2>
            <div class="inline field">
                <div class="ui toggle checkbox">
                    <input type="checkbox"
                        tabindex="0" class="hidden">
                    <label>Toggle</label>
                </div>
            </div>
            <h2>Slider</h2>
            <div class="inline field">
                <div class="ui slider checkbox">
                    <input type="checkbox"
                        tabindex="0" class="hidden">
                    <label>Slider</label>
                </div>
                <label></label>
            </div>
        </div>
    </div>
     
    <script>
        $('.ui.checkbox').checkbox();
    </script>
</body>
 
</html>

Output: 

Example 5: This example creating the Radio Button. For this, you need a jQuery library imported.  



$('.ui.radio.checkbox').checkbox();

Complete Code: 

html




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
              rel="stylesheet" />      
    </head>
    <body>
        <div style="margin-top: 20px;" class="ui container">
          <div class="ui form">
            <h2>Inline Radio Button</h2>
            <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 class="field">
                <div class="ui radio checkbox">
                  <input type="radio" name="gender"
                         tabindex="0" class="hidden">
                  <label>Rather not Say</label>
                </div>
              </div>
            </div>
            <h2>Grouped Radio Button </h2>
            <div class="grouped fields">
              <label for="branch">Select your Branch</label>
              <div class="field">
                <div class="ui radio checkbox">
                  <input type="radio" name="branch"
                         checked="" tabindex="0" class="hidden">
                  <label>CSE</label>
                </div>
              </div>
              <div class="field">
                <div class="ui radio checkbox">
                  <input type="radio" name="branch"
                         tabindex="0" class="hidden">
                  <label>IT</label>
                </div>
              </div>
              <div class="field">
                <div class="ui radio checkbox">
                  <input type="radio" name="branch"
                         tabindex="0" class="hidden">
                  <label>ECE</label>
                </div>
              </div>
              <div class="field">
                <div class="ui radio checkbox">
                  <input type="radio" name="branch"
                         tabindex="0" class="hidden">
                  <label>ME</label>
                </div>
              </div>
            </div>
          </div>
        </div>
        <script src=
                integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
                crossorigin="anonymous">
        </script>
 
        <script src=
        </script>
        <script>
          $('.ui.radio.checkbox').checkbox();
        </script>
    </body>
</html>

Output: 

Example 6: This example creating a Dropdown list. For this, you need to import the jQuery library. 

$(function() {
   $('.ui.dropdown').dropdown();
}); 

Complete Code: 

html




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
              rel="stylesheet" />
    </head>
    <body>
        <div style="margin-top: 20px;" class="ui container">
          <label>Choose Language</label>
          <div class="ui selection dropdown">
            <input type="hidden" name="language">
            <i class="dropdown icon"></i>
            <div class="default text">Choose Language</div>
            <div class="menu">
                <div class="item" data-value="0">C++</div>
                <div class="item" data-value="1">Java</div>
                <div class="item" data-value="2">Python3</div>
            </div>
        </div>
        </div>
        <script src=
               integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
                crossorigin="anonymous">
         </script>
        <script src=
        </script>
        <script>
          $(function() {
              $('.ui.dropdown').dropdown();
          });       
        </script>
    </body>
</html>

Output: 

Example 7: This example creating the Multiple Select dropdown menu. For this, you need to import the jQuery library. 

$(function() {
   $('.ui.dropdown').dropdown();
}); 

Complete Code: 

html




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
              rel="stylesheet" /> 
    </head>
 
    <body>
        <div style="margin-top: 50px;" class="ui container">
            <div class="field">
              <label>Programming Language</label>
              <select multiple="" class="ui dropdown">
                <option value="">Select Programming Language</option>
                <option value="cpp">C++</option>
                <option value="java">Java</option>
                <option value="py3">Python3</option>
                <option value="php">PHP</option>
                <option value="ruby">Ruby</option>
                <option value="js">JavaScript</option>
              </select>
            </div>
          </div>
        <script src=
                integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
                crossorigin="anonymous">
        </script>
        <script src=
        </script>
        <script>
          $(function() {
              $('.ui.dropdown').dropdown();
          });       
        </script>
    </body>
</html>

Output: 

Example 8: This example creating the status of statement. The state can be any like success, error, warning.

html




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
              rel="stylesheet" />   
    </head>
 
    <body>
        <div style="margin-top: 20px;" class="ui container">
          <h2>State</h2>
          <div class="ui form success">
            <div class="field">
              <label>Enter email to get latest news</label>
              <input type="email" placeholder="joe@schmoe.com">
            </div>
            <div class="ui success message">
              <div class="header">Success</div>
               
<p>You're all signed up for the newsletter.</p>
 
            </div>
            <div class="ui submit button">Submit</div>
          </div>
          </div>
        <script src=
        </script>
    </body>
</html>

Output: 

Note: 

  • You can replace success with error or warning to show that state.
  • You can use a tiny, small, large, medium, huge class to change the size of the form.



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!