Open In App

Semantic-UI Input Action Variation

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 the same as a bootstrap for use and has great different elements to use to make your website look more amazing.

Semantic UI has a bunch of components for user interface design. One of them is “Inputs”. Inputs are used for various purposes on a web page. It is useful in taking information from the user in real-time and saving it in a database.  Depending on the requirements of the usage of inputs there are different variations of inputs. One of them is the action variation.

Semantic UI Input Action Variation is used to show the action associated with the inputs.  To depict the purpose of the inputs action variation comes in handy.  

Semantic UI Input Action Variation Class:

  • action: This class is used to relate input with an action button.

Syntax:

<div class="ui action input">
 ....
</div>

Example 1:  This example demonstrates the input action variations depicting alert actions. You can see the output in the image below which shows alert input. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic-UI Input Action Variation</title>
    <link href=
          rel="stylesheet" />
</head>
  
<body>
    <div class="ui container">
        <br/><br />
        <h2 class="ui header green">GeeksforGeeks</h2>
        <strong>Semantic UI Image Action Variation</strong>
        <hr><br/>
        <strong>Input with alert action:</strong><br /><br />
        <div class="ui action input">
            <input type="text" id="input"
                   placeholder="Enter your message">
            <button onclick="sendAlert()" 
                    class="ui teal right labeled icon button">
                <i class="bell icon"></i>
                Click to alert
            </button>
        </div>
    </div>
    <script>
        function sendAlert() {
            /* Getting text input value */
            var Text = document.getElementById("input");
  
            /* Showing user the alert */
            alert("Your Message: " + Text.value);
        }
    </script>
</body>
  
</html>


Output:

Semantic-UI Input Action Variation

Semantic-UI Input Action Variation

Example 2: This example demonstrates the input action variations depicting copy actions. You can see the output in the image below which shows copy input. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic-UI Input Action Variation</title>
    <link href=
          rel="stylesheet" />
</head>
  
<body>
    <div class="ui container">
        <br/><br/>
        <h2 class="ui header green">GeeksforGeeks</h2>
        <strong>Semantic UI Image Action Variation</strong>
        <hr><br />
        <strong>Input with copy action:</strong><br/><br/>
        <div class="ui action input">
            <input type="text" id="input">
            <button onclick="copy()" 
                    class="ui teal right labeled icon button">
                <i class="copy icon"></i>
                Click to Copy
            </button>
        </div>
    </div>
    <script>
        function copy() {
            /* Getting text input value */
            var Text = document.getElementById("input");
  
            /* Copying function */
            navigator.clipboard.writeText(Text.value);
  
            /* Showing user the copied text */
            alert("Copied text value: " + Text.value);
        }
    </script>
</body>
  
</html>


Output:

Semantic-UI Input Action Variation

Semantic-UI Input Action Variation

Reference link:  https://semantic-ui.com/elements/input.html#action



Last Updated : 27 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads