语义 UI 输入动作变体

Semantic UI 是一个开源框架，它使用 CSS 和 jQuery 构建出色的用户界面。它与使用的引导程序相同，并且有很多不同的元素可用于使您的网站看起来更令人惊叹。

语义 UI 有一堆用于用户界面设计的组件。其中之一是“输入”。输入用于网页上的各种目的。它对于实时从用户那里获取信息并将其保存在数据库中很有用。根据输入使用的要求，输入有不同的变化。其中之一是动作变化。

Semantic UI Input Action Variation 用于显示与输入关联的操作。描述输入动作变化的目的就派上用场了。

语义 UI 输入动作变体类：

• action ：此类用于将输入与操作按钮相关联。

句法：

 ....

示例 1 ：此示例演示了描述警报操作的输入操作变体。您可以在下图中看到显示警报输入的输出。

HTML

  

    Semantic-UI Input Action Variation
    

  

    
        
        GeeksforGeeks
        Semantic UI Image Action Variation
        
        Input with alert action:
        
            
            
                
                Click to alert
            
        
    
    
        function sendAlert() {
            /* Getting text input value */
            var Text = document.getElementById("input");
  
            /* Showing user the alert */
            alert("Your Message: " + Text.value);
        }
    

  

输出：

语义 UI 输入动作变体

示例 2：此示例演示了描述复制操作的输入操作变体。您可以在下图中看到显示复制输入的输出。

HTML

  

    Semantic-UI Input Action Variation
    

  

    
        
        GeeksforGeeks
        Semantic UI Image Action Variation
        
        Input with copy action:
        
            
            
                
                Click to Copy
            
        
    
    
        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);
        }
    

  

输出：

语义 UI 输入动作变体

参考链接： https://semantic-ui.com/elements/input.html#action