基础 CSS 遵守初始状态

Foundation CSS是由 ZURB 于 2011 年 9 月创建的开源和响应式前端框架，可以轻松创建可在任何设备上运行的令人惊叹的响应式网站、应用程序和电子邮件。许多公司，如 Facebook、eBay、Mozilla、Adobe，甚至迪士尼，都在使用它。该框架基于bootstrap，类似于SaaS。该框架建立在类似 Saas 的引导程序上。它更加复杂、灵活且易于定制。它还带有 CLI，因此很容易与模块捆绑器一起使用。它提供了 Fastclick.js 工具，用于在移动设备上更快地呈现。

Abide in Foundation CSS 是一个表单验证库，用于使用自定义验证器验证表单。 Foundation CSS Abide Initial State用于指定表单中的输入字段处于初始/开始状态。创建具有不同自定义验证器属性的表单很有用。有几种不同的方法可以添加错误状态、忽略的输入、强制要求的复选框或单选框。这里讨论了表单初始状态创建的基础知识。

基础 CSS 遵守初始状态类：

• is-invalid-input：该类用于启用根据使用的输入标签检查输入是否有效。
• form-error is-visible ：此类用于表明该字段是必须的。

基础 CSS 遵守初始状态属性：

• data-abide ：此属性用于定义使用 abide 验证表单。
• data-abide-error ：该属性用于指定元素处于错误状态。
• type=”hidden” ：这种类型的属性用于隐藏元素。
• type=”reset” ：这种类型的属性用于重置/清空表单。
• disabled ：这种类型的属性用于禁用元素的任何输入。

句法：

   
  
   
   ...
   ...

示例 1：此示例说明了Foundation CSS 中的 abide Initial 状态。

HTML

  

    Foundation CSS Abide Initial State
    
    
    
    
    
    

  

    GeeksforGeeks
    Foundation CSS Abide Initial State
  
    
        
            There are some errors in the form.
  
        
        
            GFG Courses
            
            
                This field is required.
            
        
        
            SUBMIT
        
        
            RESET
        
    
  
    
        $(document).ready(function () {
            $(document).foundation();
        })
    

  

输出 ：

基础 CSS 遵守初始状态

示例 2 ：此示例说明了在 Foundation CSS 中禁用输入字段的遵守初始状态。

HTML

  

    Foundation CSS Abide Initial State
    
    
    
    
    
    

  

    GeeksforGeeks
    Foundation CSS Abide Initial State
  
    
        
            There are some errors in the form.
        
        
            GFG Courses (input field disabled)
            
            
                This field is required.
            
        
        
          SUBMIT
        
        
          RESET
        
    
  
    
        $(document).ready(function () {
            $(document).foundation();
        })
    

  

输出：

基础 CSS 遵守初始状态

参考： https://get.foundation/sites/docs/abide.html#initial-state