从HTML原有基础过渡到如今的HTML5,HTML5新增了一些表单元素及属性,和一些其他元素。HTML5以下是对此情况进行的一些相关的简单概括和举例,用以巩固对HTML5的学习。
表单元素
progress
表示任务的完成情况,常用于进度条
<progress max="100" value="20"></progress>
output
表示用户动作产生的结果
<output for="">内容</output>
meter
元素表示规定范围内的数量值。
<meter min="0" max="100" low="40" high="60" optimum="50"></meter>
datalist
表示其他控件可用的值,其值通过<option>
作为datalist
的子元素存在。
<datalist id="one">
<!-- option中不用内容只用写value -->
<option value="1"></option>
<option value="2"></option>
</datalist>
【注意】details
与select
的option
的对比:
- 如果在option标签内部写了内容的话,点击option之后,datalist显示的是option的value,select那边显示的是option的元素内容。
- 数据提交都提交的是option的value值。
- datalist在火狐和谷歌上显示的区别,火狐上只显示内容,谷歌上显示value跟内容。
表单属性
- 在H5中,新增了一些表单属性。
form
属性,值为一个form
标签的id值 。
formaction
属性,指定提交按钮提交数据的地址。
formaction
属性一般用于提交按钮和图片按钮上,用于指定处理表单提交的后台程序,可以重写form
中的action
属性。
formenctype
一般用于提交按钮和图片按钮上,用于指定处理表单的内容类型。
formmethod
属性,指定表单提交的方式。
formnovalidate
属性,指定表单是否验证,布尔属性,写上就代表不验证 。
formtarget
属性,指定响应打开的方式。
autofocus
当页面加载完毕的时候,默认聚焦。在页面中,只能有一个表单元素具有该属性,值为boolean类型。
list
取值为元素的id,用于显示提示内容。
max/min
表单组件能够接受到的最大值/最小值。
placeholder
对用户的输入进行提示,常用于搜索框,不要出现回车换行。
pattern
取值为正则表达式,用于表单验证。
required
表示在表单提交之前必须表单组件中必须输入值。
其他元素
- 高亮、引用、缩略词
<mark></mark>
高亮黄底
<cite></cite>
引用,倾斜
<abbr title="">
缩略词
- 媒体元素
音频:<audio src=“” controls autoplay loop muted></audio>
视频:<video src=“” controls autoplay loop muted></video>
controls 控制条
loop 循环播放
muted 静音播放
autoplay 自动播放