Semantic-UI | Forms

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="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.
kashishsoda
Semantic-UI
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.