Open In App

Semantic-UI | Forms

Last Updated : 23 Nov, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

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=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />
 
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
 
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </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=


"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"


        rel="stylesheet" />


 


    <script src=


"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">


    </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=


"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"


        rel="stylesheet" />


 


    <script src=


"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">


    </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=


"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"


        rel="stylesheet" />


 


    <script src="https://code.jquery.com/jquery-3.1.1.min.js"


        integrity=


"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">


    </script>


 


    <script src=


"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">


    </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=


"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"


              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=


"https://code.jquery.com/jquery-3.1.1.min.js"


                integrity=


"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="


                crossorigin="anonymous">


        </script>


 


        <script src=


"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">


        </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=


"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"


              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=


"https://code.jquery.com/jquery-3.1.1.min.js"


               integrity=


"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="


                crossorigin="anonymous">


         </script>


        <script src=


 "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">


        </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=


"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"


              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=


"https://code.jquery.com/jquery-3.1.1.min.js"


                integrity=


"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="


                crossorigin="anonymous">


        </script>


        <script src=


"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">


        </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=


"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"


              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=


"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">


        </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.
    • 



                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Semantic-UI Breadcrumb Variations
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Semantic-UI Form Types
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Bootstrap Vertical Forms, Horizontal Forms, Inline Forms
            

        
    
        
            

                Spectre Forms Horizontal forms
            

        
    
        
            

                Styling Django Forms with django-crispy-forms
            

        
    
        
            

                Difference between semantic and non-semantic elements
            

        
    
        
            

                HTML DOM forms Collection
            

        
    
        
            

                Primer CSS Kitchen Sink Forms
            

        
    
        
            

                Angular forms NgForm Directive
            

        
    
        
            

                Bootstrap 4 | Custom Forms
            

        
    
        
            

                Bootstrap 4 | Forms
            

        
    
        
            

                AngularJS | Forms
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
I

        

            
        

        

                                    


                                    

                                        iamsahil1910                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox