html5的新增类型,HTML5新增input类型
HTML5表单新增input类型
在HTML4等早期版本中,input元素已经有了⼀些type类型,type可取的值有下⾯这些:
text⽂本类型:
password密码类型:
radio 单选类型:选项
checkbox 多选类型:选项
file ⽂件类型:
submit 提交按钮:
reset重置按钮:
button定义按钮:
image 定义图⽚按钮:
hidden定义隐藏域:
在HTML5中,input元素新增了⼀些类型,有email邮件类型、number数字类型、range数字滑动条、url地址类型、date⽇期类型及search搜索类型。下⾯我们来逐个介绍⼀下它们。
email邮件类型
跟⽂本框类似,但它只接受符合email邮件格式的字符串,当表单提交时会⾃动检测,若不合法,则会给出提⽰。
html代码如下:
number数字类型
跟⽂本框类似,它只接受数字类型的值,表单提交时会⾃动检测,若不合法,则会给出提⽰。
html代码如下:
range数字滑动条
它展现出来是⼀个可以拖拉的滑动条,包含⼀定的数字范围,如:
当拖动滑动块时,它的value值会在1到10之间变化。
url地址类型
跟⽂本框类似,它只接受⽹址类型的值,表单提交时会⾃动检测,若不合法,则会给出提⽰。
html代码如下:
date⽇期类型
当此类表单成为焦点时,会⾃动弹出⽇历或者是调节按钮,但其样式会由于浏览器内核的不同⽽不同,此类型有⼀系列的只可选:
date:选取⽇、⽉、年
month:选取⽉、年
week:选取周、年
time:选取时间(⼩时和分钟)
datetime:选取时间、⽇、⽉、年,为UTC时间
datetime-local:选取时间、⽇、⽉、年,为本地时间
html代码如下:
html自动弹出公告代码其它的只需更改type值就可以了,就不⼀⼀列举了。
search搜索类型
跟⽂本框类似,它可以接受任意的值作为关键字,我们可以通过value获取这些关键字。html代码如下: