新增以下type值类型:
属性值说明email邮件类型(验证)tel电话号码urlURL类型(验证)range取数字(滑块方式)number取数字(微调方式)color取颜色date取日期(如2018-11-11)time取时间(如08:05)month取月份week取周数
验证型
概念:当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“的缩写
实例
运行结果:
精彩文章
发表评论