解释 HTML5 中的表单新输入类型？

在本文中，我们将讨论 HTML5 提供的新表单输入类型的功能。有时，在填写注册表或任何在线表格时，需要遵循正确的格式来填写特定数据。现在可以很容易地使用网络表单来填写日期、电子邮件、url等常用数据。HTML5 表单中引入了近 13 种新的输入类型。我们将看到所有输入类型并一一理解它们。

输入类型属性：

1. color ：此输入类型允许用户从颜色选择器中选择颜色。
2. 日期：这个 输入类型允许用户从下拉日历中选择日期。
3. 时间： 这种输入类型允许用户输入时间。
4. datetime：此输入类型允许用户选择日期和时间以及时区。
5. datetime-local：此输入类型允许用户选择本地日期和时间。
6. week ：此输入类型允许用户从下拉日历中选择星期和年份。
7. email ：此输入类型允许用户输入电子邮件地址。
8. month ：此输入类型允许用户从下拉日历中选择月份和年份。
9. number：这种输入类型允许用户输入一个数值。
10. range：这种输入类型允许用户在一个范围内输入一个数值 指定范围。
11. 搜索：此输入类型允许用户在输入字段中输入搜索字符串。
12. tel：此输入类型允许用户输入电话号码。
13. url：此输入类型允许用户输入 URL。

我们将使用上述属性并通过示例了解它们的用法。

示例 1：在本示例中，您将了解颜色、日期和时间输入类型。

日期语法：

时间语法：

颜色语法：

注意： Internet Explorer 和 Safari 浏览器不支持日期和时间。

HTML

  

    

  

    
Welcome To GeeksforGeeks
  
    

        Select Color : 
        
    
    

  
    

        Select Date : 
        
    
    

  
    

        Select Time :
        
    

  

输出：

示例 2：在本示例中，您将了解datetime、datetime-local和week输入类型。

日期时间语法：

<输入类型=“日期时间”>

日期时间本地语法：

周语法：

注意：Firefox、Safari 和 Internet Explorer 浏览器不支持 datetime-local和week 。

HTML

  

    

  

    
Welcome To GeeksforGeeks
  
    

        Enter Date-Time : 
        
    
    

  
    

        Select Date-Time Local : 
        
    
    

  
    

        Select Week : 
        
    

  

输出：

示例 3：在本示例中，您将了解电子邮件、月份、数字和范围输入类型。

电子邮件语法：

月份语法：

注意： Firefox、Safari 和 Internet Explorer 浏览器不支持月份。

数字语法：

范围语法：

HTML

  

    

  

    
Welcome To GeeksforGeeks
  
    

        Enter Email : 
        
    
    

  
    

        Select Month : 
        
    
    

  
    

        Select Number : 
        
    
    

  
    

        Select Number in Range : 
        
    

  

输出：

示例 4：在本示例中，您将了解搜索、电话和url输入类型。

搜索语法：

电话语法：

注意：目前任何浏览器都不支持tel 。

网址语法：

HTML

  

    

  

    
Welcome To GeeksforGeeks
  
    

        Enter Search string : 
        
    
    

  
    

        Enter Telephone No. : 
        
    
    

  
    

        Enter Url : 
        
    

  

输出：