语义 UI 输入状态

Semantic UI是一个开源框架，它为我们提供了特殊的类来创建令人惊叹的响应式用户界面。它利用 jQuery 和 CSS 创建令人愉悦的用户界面，非常类似于 bootstrap。它有许多类用于在 HTML 网页结构中设置不同元素的样式。

输入标签是 HTML 中最重要的标签之一。它们构成

标签的基础，帮助用户与他人共享信息。语义 UI 有不同的类来增强输入标签的 UI 设计。 UI 和输入类创建基本的输入 UI。但是为了使用不同的输入状态，我们使用不同的类。以下是语义 UI 输入元素中的不同输入状态：

语义 UI 输入状态：

• 焦点状态：此状态用于显示用户当前正在与输入字段进行交互。要将输入字段转换为焦点状态，我们使用“焦点”类以及父 div 中的 UI 和输入类。
• 加载状态：该状态用于显示输入字段当前正在加载数据。要将输入字段转换为加载状态，我们使用“加载”类以及父 div 中的 UI 和输入类。
• 禁用状态：此状态用于显示输入字段已禁用。要将输入字段转换为禁用状态，我们使用“禁用”类以及父 div 中的 UI 和输入类。
• 错误状态：此状态用于显示输入字段数据错误。要将输入字段转换为错误状态，我们使用“错误”类以及父 div 中的 UI 和输入类。

句法：

下面的示例说明了语义 UI 输入状态：

示例 1：以下示例涵盖了文本输入中的所有不同状态。

HTML

   
       
    
    
    
    
        body{
            margin-left: 15px;
        }
    


    
        Geeksforgeeks
        Semantic-UI Input States
    
     
    Default state:
    
        
    
    
    Focus state:
     
    
        
    
    
    Disabled state:
     
    
        
    
    
    Loading state:
     
    
        
    
    
    Error state:
     
    
        
    

输出：

语义 UI 输入状态

示例 2：以下示例涵盖了不同输入标签中的所有不同状态。

HTML

   
       
    
    
    
    
        body{
            margin-left: 15px;
        }
    


    
        Geeksforgeeks
        Semantic-UI Input States
    
     
    Loading State text input:  
    
        
        
      
    Disbaled State date input:
    
        
    
    Error State file input:
    
        
    

输出：

语义 UI 输入状态

参考： https ://semantic-ui.com/elements/input.html