HTML5改良的input元素

01 Url类形

HTML5改良的input元素_第1张图片
url类形
HTML5改良的input元素_第2张图片
url当url输入不正确

email属性

HTML5改良的input元素_第3张图片
email属性
HTML5改良的input元素_第4张图片
email属性

date属性


中文翻译:日期


HTML5改良的input元素_第5张图片
date属性

time属性

HTML5改良的input元素_第6张图片
time属性

datetime属性


与time属性区别是UTC时间

HTML5改良的input元素_第7张图片
datetime属性

datetime-local属性


本地时间

HTML5改良的input元素_第8张图片
datetime-local属性

month元素


中文翻译:月

HTML5改良的input元素_第9张图片
month最多选择到月

week元素


中文翻译:周

HTML5改良的input元素_第10张图片
week元素

number元素


number是专门输入数字的元素(并且对提交进行检查)

HTML5改良的input元素_第11张图片
number元素

可设置最大最小值和每次递增递减数step设置

HTML5改良的input元素_第12张图片
小案例实现加法运算

range元素


中文翻译:范围

range属性

search属性


中文翻译:搜索

HTML5改良的input元素_第13张图片
search属性

tel属性


设计为专门输入电话号码的文本框

color类形

HTML5改良的input元素_第14张图片
color类形

output元素追加

HTML5改良的input元素_第15张图片
output元素

表单验证

HTML5改良的input元素_第16张图片
1
HTML5改良的input元素_第17张图片
image.png

你可能感兴趣的:(HTML5改良的input元素)