HTML5-新增表单元素

新增以下type值类型：

属性值	说明
email	邮件类型（验证）
tel	电话号码
url	URL类型（验证）
range	取数字（滑块方式）
number	取数字（微调方式）
color	取颜色
date	取日期（如2018-11-11）
time	取时间（如08:05）
month	取月份
week	取周数

验证型

email

概念：当type属性为"email"时，表示这是输入电子邮件的文本框

语法：

注意：在电子邮件文本框中或输入非电子邮件格式的字符时，然后点击提交按钮，会发现无法提交并且弹出提示内容

tel

概念：当type属性取值为"tel"时，表示这是输入电话号码的文本框

语法：

注意：当我们输入非电话号码格式的字符，然后点击【提交】按钮，是可以提交的。这是因为tel类型文本框并不具备完备的验证功能。想要达到验证效果，则需要pattern属性来实现

url元素

概念：当type属性取值为“url”时，表示这是输入URL的文本框

语法：

注意:URL格式字符指的是以"http://"或者"https://"开头的网络地址。它本身跟tel元素一样不具备完整的验证机制，需结合pattern属性来弥补

取值型

range

概念：当type属性取值为“range”时，可以通过拖动滑块条获取某一个范围内的数字

语法:

range属性值

属性名	描述
max	规定允许的最大值
min	规定允许的最小值
step	规定合法的数字间隔（如果step="3",则合法的数可能是-3，0，3，6等，增加的数在前一个加上3）
value	规定默认值

实例:

 数字:
    

number

概念：当type属性取值为number时，number类型的input控件用于通过微调按钮来获取某一个范围的数字。

语法:

number的属性值

属性名	描述
max	规定允许的最大值
min	规定允许的最小值
step	规定合法的数字间隔（如果step="3",则合法的数可能是-3，0，3，6等，增加的数在前一个加上3）
value	规定默认值

实例：

 请输入数字：
    

说明：在运行结果中的number类型文本框中，可以直接输入数字，也可以通过右侧的微调按钮来改变数字

color

概念：当type属性取值为"color"时，可以直接使用浏览器自带的取色工具来获取颜色值

语法：

实例：

    color属性:
    

Date Pickers类型

Date Pickers类型是日期时间类型。

日期时间选择器类型

注意：UTC即协调世界时，又称世界标准时间

date

概念：当type属性取值为“date”时，可以直接使用浏览器自带的日历工具来获取日期（年，月，日）

语法

说明：value属性用于设置日期初始值，格式必须如“2023-12-20”，像“2023--12-20”是无效的

time

概念：当type属性取值为"time"时，直接通过浏览器自带的工具来获取时间（时，分）

语法

说明：value属性用于设置时间初始值，格式必须如"08:01"，像“8:1”这种是无效的

month

概念：当type属性取值为month时，直接通过浏览器自带的工具来获取月数

语法

说明：value属性用于设置初始值，格式必须如”2023-09“

week

概念：当type属性取值为"week",直接通过浏览器自带的工具来获取周数

语法

说明：value属性用于设置初始值，格式必须如”2023-W03“.其中，”W“是”week“的缩写

实例

            date:

            month:

            week:

            time:

            datetime:

            datetime-local:

            
        

运行结果：