纯 CSS 表单

表单在网站中必不可少，可以为各种目的收集数据或信息。使用纯 CSS，我们可以创建不同类型的表单。

纯 CSS 表单类：

• 默认表格
• 堆叠形式
• 对齐形式
• 分组输入

默认表单：将类“pure-form”添加到任何

元素以创建默认表单。这种形式本质上是内联的。

句法：

...

例子：

HTML

    
    
  
    
    

  

    
    

    

        
Default Form
  
        
        
        


        
        
            Remember me
        
  
        
        Log in
        
    
    

输出：

Stacked Form：在

元素内的 pure-form 旁边添加类“pure-form-stacked” ，以创建一个带有标签下方的输入元素的堆叠表单。

句法：

...

例子：

HTML

  
    
    
  
    
    
  
  
  
    
    

      

        
Stacked Form
  
         First Name
        
  
         Last Name
        
  
        Email
        
        
             This is a required field.
        
  
        Password
        
  
        Gender
        
          Male
          Female
          Other
        
  
        
          
           I accept the Terms & Conditions
        
  
        
          Submit
        
      
    
  

输出：

对齐表单：在

元素内的 pure-form 旁边添加类“pure-form-aligned”，以创建对齐表单。在这种类型的表单中，标签与表单输入控件右对齐，但在小屏幕上恢复为堆叠表单。

句法：

...

例子：

HTML

  
    
    
  
    
    
  
  
  
    
    

      

        
Aligned Form
  
        

           
           First Name
          
          
        
  
        

           
           Last Name
          
          
        
  
        

          Email
          
          
            This is a required field.
        
  
        

           Password
          
        
  
        

          Gender
          
            Male
            Female
            Other
          
        
  
        

          
            
              I accept the Terms & Conditions
          
  
          
            Submit
          
        
      
    
  

输出：

分组输入表单：如果您想为移动设备创建注册表单，此表单是最佳选择。使用“pure-group”类名将一组基于文本的输入元素包装在

元素中以创建这样的表单。它要求您的页面上存在纯响应式网格。

句法：

...

例子：

HTML

  
    
    
  
    
    
  
    
    
  
  
  
    

      
      

        
        
        
        
      
  
      

        
                
      
  
      
        Submit
      
    
  

输出：