CSS |造型形式

CSS 表单用于为用户创建交互式表单。它提供了多种设置样式的方法。

有许多可用的 CSS 属性可用于创建和设置 HTML 表单样式以使其更具交互性，下面列出了其中一些：

• 属性选择器：输入表单的属性类型可以根据用户的选择采取多种形式。它可以是任何可能的类型，如文本、搜索、url、电话、电子邮件、密码、日期选择器、数字、复选框、收音机、文件等。用户需要在创建表单时指定类型。

  例子：

  
  
      
          
      
    
      
          
              Is Geeksforgeeks useful ?
              
  
                   
                  Yes 
  
                   
                  Definitely Yes  
              
          
      
                      
  

  输出：
  考虑另一个输入类型只是文本的示例：

  
  
  
      
  
    
  
      
      
  
          Do you find Geeksforgeeks helpful?   
              
  
          
  
      
      
  
                      
  

  输出：
  

• 设置输入宽度的样式： width属性用于设置输入字段的宽度。考虑以下示例，其中宽度设置为整个屏幕的 10%。

  
  
  
      
  
    
  
      
      
  
          Do you find Geeksforgeeks helpful?
              
  
          
  
      
      
  
                      
  

  输出：
  

• 在输入中添加填充：填充属性用于在文本字段内添加空格。考虑下面的例子：

  
  
  
      
  
    
  
      
          
  
              Do you find Geeksforgeeks helpful?
  
              
  
          
      
  
                      
  

  输出：
  

• 为输入设置边距：边距属性用于在输入字段外添加空间。当有很多输入时，它很有帮助。考虑下面带有两个输入的示例，并观察它们之间的空间(边距)。

  
  
  
      
  
    
  
      
      
  
          Mention two topics that you liked on Geeksforgeeks
              
  
          
  
          
  
      
      
  
                      
  

  输出：
  

• 添加 Border 和 Border-radius ： border属性用于改变边框的大小和颜色，而 border-radius 属性用于添加圆角。

  考虑下面的示例，其中创建了一个 2px实心红色边框，边框半径为4px 。

  
  
  
      
  
    
  
      
          
  
              
                  Mention two topics that you liked on 
                  Geeksforgeeks
              
              
  
              
  
              
  
          
      
  
                      
  

  输出：
  

  注意：用户还可以在任何特定边设置边框并删除其他边框或使用不同颜色的所有边框。考虑下面的示例，其中用户只需要顶部(蓝色)和底部(红色)的边框。

  
  
  
      
  
    
  
      
          
  
              
                  Mention two topics that you liked on 
                  Geeksforgeeks
              
              
  
              
  
              
  
          
      
  
                      
  

  输出：
  

• 为文本和背景添加颜色： color属性用于更改输入中文本的颜色， background-color属性用于更改输入字段的背景颜色。

  考虑下面的示例，其中文本颜色为黑色，背景颜色设置为绿色。

  
  
  
      
  
    
  
      
          
  
              
                  Mention two topics that you liked 
                  on Geeksforgeeks
              
              
  
              
  
              
  
          
      
  
                      
  

  输出：
  

• 焦点选择器：当我们点击输入字段时，它会得到一个蓝色的轮廓。您可以使用 :focus 选择器更改此行为。

  考虑以下示例，其中用户在聚焦时需要 3px 纯红色轮廓和绿色背景。

  
  
  
      
  
    
  
      
      
  
          
              Mention two topics that you liked 
              on Geeksforgeeks
          
          
  
          
  
          
  
      
      
  
                      
  

  输出：
  

• 在输入表单中添加图像： background-image属性可用于将图像放入输入表单中，并且可以使用 background-position 属性对其进行定位，用户还可以决定是否重复。

  考虑下面的示例，背景为无重复模式的图像。

  
  
  
      
  
    
  
      
      
  
          Search on Geeksforgeeks
  
          
  
      
      
  
                      
  

  输出：
  

• 过渡属性：过渡属性可用于输入字段，通过指定松弛宽度和聚焦宽度以及操作将发生的时间段来改变字段的大小。

  考虑下面的示例，其中放松的输入字段宽度为 15%，当焦点在 1 秒内更改为 30%。

  
  
  
      
  
    
  
      
      
  
          Search on Geeksforgeeks
  
          
  
      
      
  
                      
  

  输出：
  放松时——
  
  专注时——