html5第八章怎么做,第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

表单元素

掌握:可以选择，也可以输入,缺点是firefox里不支持value

Webpage:

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

了解-浏览器支持不好

表单属性

新属性：

autocomplete

novalidate

新属性：

placeholder() :提示

autofocus():自动获取焦点

autocomplete()：必须曾经提交过，必须有name属性 autocomplete="on|off"

required()：必须输入

pattern (regexp)()：正则验证 pattern="^(+86)?1\d{10}$"

multiple():file时多文件 email时多邮箱用逗号分隔 a@a.com,b@b.com

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: