h5新特性
一.表单元素的补充
1.电子邮箱:<input type="email" name="表单元素名称" placeholder="提示文字",自动校验
2.网址:<input type="url" name="表单元素名称" placeholder="提示文字">,自动校验
3.电话:<input type="tel" name="表单元素">,自动校验
4.数量1:<input type="number" name="表单元素名称" min="最小值" max="最大值" step="步长">
5.数量2:<input type="range" name="表单元素名称" min="最小值" max="最大值" step="步长值">
6.搜索框:<input type="search" name="表单元素名称">
7.日期和时间类额表单元素(没有完全被兼容)
(1)包含日期和时间:<input type="datetime-local" name="表单元素名称">
(2)包含日期:<input type="date" name="表单元素名称">
(3)包含时间:<input type="time" name="表单元素名称">
(4)包含年、月:<input type="month" name="表单元素名称">
(5)包含年、周<input type="week" name="表单元素名称">
8.<optgroup></optgroup>标签:作用是对select中的option选项进行分组,包含的属性为label,属性值为分组的标题名称,格式如下
9.<datalist></datalist>标签:该标签的作用是可以让文本框有选项列表,使用时需要和文本框结合使用,格式如下
10.<button></button>标签:作用是在页面中插入按钮,如果要在该按钮上显示文字,那么需要将文字写在开始标签和结束标签间,如<button>提示文字</button>,该按钮默认的功能是提交数据,包含的属性为type,属性值为submit(默认),reset,button
11.<details></details>标签:用来描述文档某个部分的细节(简单说就是可以折叠和展示某个部分),包含的属性为open,属性值为open,该属性的作用是设置文档的某个部分默认为显示状态,details中可以包含一个子标签,即<summary></summary>标签,该标签的作用是设置标题
12.<video></video>标签:作用是在页面中插入视频,支持的视频格式为MP4、WebM、Ogg,包含的属性为
(1)width:设置宽度,属性值可以是像素值或百分比,注意会等比例缩放
(2)height:设置高度,属性值为像素值或百分比
(3)src:设置视频文件的地址路径
(4)controls:显示控制面板,默认不显示,属性名和属性值相同
(5)autoplay:自动放映,属性名和属性值相同
(6)loop:循环放映,属性名和属性值相同
(7)poster:视频播放前显示一个图像,属性值为图像所在的路径
13.<audio></audio>标签:作用是在页面中插入音频,支持的格式为MP3、Wav、Ogg,包含的属性为
(1)src:设置音频路径
(2)autoplay:自动播放
(3)controls:显示控制面板
(4)loop:循环播放
二.表单新增的属性
1.required属性:作用是设置必填效果
2.placeholder属性:设置提示文字,它和value的区别是
(1)value和placeholder都可以设置提示文字,placeholder是新的属性,IE中不支持,而value是早期就有的属性
(2)如果value和placeholder同时存在,那么value的值优先显示
(3)value的值可以提交到服务器,但是placeholder的值不会提交到服务器
3.autofocus:自动获得焦点,属性值和属性名相同
4.accesskey:通过设置组合键,使表单元素获得焦点,属性值为键盘上按键的名称,如accesskey=”A”,当按Alt+A键时可以获得焦点
5.tabindex:设置当按Tab键时光标的跳转顺序,属性值为数值,跳转时从小到大跳转
6.autocomplete:设置是否开启自动记忆功能,属性值为on(默认,开启)、off(关闭)
7.pattern:通过设置正则表达式,对输入的内容进行验证,如<input type="text" name="user" patter="^\d{4}$">
8.form属性:页面中如果需要将位于标签外面的表单元素和form标签关联起来,那么就可以使用form属性了,格式
9.novalidate:该属性的作用是在表单提交时不验证表单元素中添加的数据是否符合格式要求,属性值和属性名相同,注意该属性值是<form>标签的属性
10.表单重写属性:该属性添加到提交按钮上
(1)formaction:重写form的action地址
(2)formmethod:重写form的method方式
(3)formtarget:重写form的target方式