第8章html5新增input标签(1)

https://www.w3school.com.cn/html5/att_input_type.asp
标记5的为新增的

目标

• 新增input输入类型(掌握)
• 文件和多媒体(掌握)
• 新增加的表单属性（了解）
• 新增的表单元素（datalist）

html5新增表单类型

13个

search：圆角文本框 safari浏览器和Chrome浏览器 输入后带删除标志
email：邮箱 -带验证 @
url：网址 -带验证 http:// https:// ftp://
number：数字-带验证 包含小数点
tel：电话 -不带验证，移动端打开数字键盘
range：滑动条
color：颜色 可以选
时间|日期
time：时间
date：日期
datetime:日期加时间（大多数浏览器不支持，safari支持）
datetime-local：本地日期加时间（大多数浏览器支持,用它）
month:月
week：年份和周数

其中：number|range和时间|日期类型的支持以下属性设置：
min-最小值
max-最大值
step-步长
value-默认值
time默认时分，step=1时显示秒
例子：

搜索：

请输入E-mail地址: 

请输入网址: 

请输入数值：

请输入电话号码：

请输入数值(滑动条）：

请选择一种颜色

请选择或输入时间: 

请选择或输入时间: 

请输入日期：

请输入月份：

请输入年份和周数：

其他：
file：可用于附件上传
image：图片显示 类似img

附件
image:

[ 和 用法区别]

会发生表单提交两次的现象，经常会造成表单元素被重复提交，数据库被写入异常！！
原因：：HTML 中 image的描述是“创建一个图像控件，该控件单击后将导致表单立即被提交。”。
请 尽量 少用以免造成不必要的异常！！！

video audio

    视频：

    音频：

image.png

表单元素

            Webpage: 
            

新标准中已废弃，浏览器支持不好

了解-浏览器支持不好

表单属性

新属性：
autocomplete
novalidate

新属性：
placeholder() :提示
autofocus():自动获取焦点
autocomplete()：必须曾经提交过，必须有name属性 autocomplete="on|off"
required()：必须输入
pattern (regexp)()：正则验证 pattern="^(+86)?1\d{10}$"
multiple():file时多文件 email时多邮箱用逗号分隔 [email protected],[email protected]
min 与 max()
step()
form(*):表单元素属于哪个form，有表单的id绑定，利于排版

form的这些不常用，建议了解。
formaction
formenctype

form 默认：enctype="application/x-www-form-urlencoded"    普通文本类型，可以带文件

form表单里如果想上传文件（表单里有input type=file） 那么 enctype="multipart/form-data"
formmethod（get/post）
formnovalidate
formtarget (在哪儿打开)

height 与 width
list ：配合datalist用

新增表单事件

这些事件，未来会与js配合使用

oninput:内容改变时触发
onkeyup:键盘弹起时触发
oninvalid:验证不通过时触发

    
        手机号：
        
    
    

进度条

progress:有max value属性
meter:度量器 high:高值 low：低值 max min value:当前值

    

    高

    中

    低

image.png

语义元素

详见结构标签

https://www.runoob.com/html/html5-semantic-elements.html

h5新增加和废弃的标签

https://www.cnblogs.com/yjxFive/p/9145577.html

filedset

组合表单中的相关元素：

health information

height:
weight: