新增以下type值类型:

属性值说明email邮件类型(验证)tel电话号码urlURL类型(验证)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"时,可以直接使用浏览器自带的取色工具来获取颜色值

语法:

实例:

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:

运行结果:

精彩文章

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: