纯 CSS 堆叠形式

纯 CSS是 CSS 的一个框架。它是一个免费的开源工具集，用于创建响应式网站和 Web 应用程序。 Pure CSS 由 Yahoo 开发，用于创建更快、更美观且响应迅速的网站。它可以用作 Bootstrap 的替代品。

在本文中，我们将讨论如何使用纯 CSS 创建堆叠表单。

堆叠表单是一种用于创建堆叠表单的 HTML 表单。在这种类型的表单中，标签位于输入字段下方。

纯 CSS 堆叠表单类：

• pure-form ：用于在纯 CSS 中创建 HTML 表单。
• pure-form-stacked ：用于创建堆叠形式，其中标签显示在输入字段下方。

句法：

  ....

示例 1：此示例描述了纯 CSS 中的堆叠表单。

HTML

  

    

  

    
GeeksforGeeks
 
    Pure CSS Stacked form 
    

    

        

            

                Enter your First Name
                
                
                    *This is a Required field.
                
            
        

          Enter your Last Name
          
            
                *This is a Required field.
            
        
        

           Enter your email id
          
        
        

           Enter your Mobile no.
          
        
        

          
                Register
          
        
      
    
  

输出：

简单的堆叠形式

示例 2：此示例描述了纯 CSS 中的堆叠表单。

HTML

  

    

  

    
GeeksforGeeks
    Pure CSS Stacked form 
    

    

        

            Name
             
             
                 This is a required field.
             
            Email
             
                
                    This is a required field.
                
            Password
            
            Year of passing
            
                2022
                2023
                2023
            
            
                
                I agree 
            
             
                Submit form 
            
        
    

输出：

堆叠形式

参考： https://purecss.io/forms/#stacked-form