html5 labels属性,html5 常用标签和属性

html5出现了很多让人兴奋的标签和属性，以前一些功能我们自己需要写组件或者去找组件，现在html5原生的就直接帮我们集成了，这当中就表单组件的一些常用功能。

html5 input 组件

时间日期类型

month

week

date

time

datetime-local

校验类型,当点提交按钮的时候，能看到具体的效果

tel

url

email

form>

其他input类型

number

range

color

image

form>

type=image和type=submit都可以相应回车，并且都能提交。不过唯一的区别就是type=image的input提交方式会把按钮点击的位置坐标x,y提交过去

html5 input 属性

maxlength 和 minlength 表示输入框能输入字符串的长度

size 输入框最多只能显示5个字符，你可以输入无数个

required 必填字段

type = "text" required />

multiple multiple 表示多输入框选择多个内容输入，注意用逗号分割

联系人: label>

datalist>

pattern 自定义正则表达式规则，校验输入框字符

min and max 允许输入框最大和最小值，通常用于type是日期，number，range类型

step 通常用于日期，number和range类型，用来表示单步的值

"sleepStart" type=time min="21:00" max="06:00" step="60" value="00:00">`

list 用于指定下拉表单的对象数据

Cc: label>

datalist>

placeholder 在表单中显示提示信息

type="email" name="email" placeholder ="输入邮箱" />

10.Autocomplete 是否打开自动匹配输入功能，它通过cookie把上次填写submit的表单value存了下来，作为自动匹配的项，autocomplete = “on||off”，可以在form直接autocomplete = “off”把整个表单自动匹配输入功能去掉

type = "text" name = "inputName" autocomplete="off" />

type = "text" name = "inputAge" autocomplete="on" />

type = "submit" value = "提交"/>

html5 一些常用标签

label 常用用来包裹input和提示文字，如下面，当你点击男或女的文字时，自动会触发radio的点击，不用直接点击radiao才会触发点击事件

男：type = "radio" name = "sex"/>label>

女：type = "radio" name = "sex"/>label>

optgroup 可以对下拉菜单选项进行分组

"c">

"8.01 Physics I: Classical Mechanics">

Lecture 01: Powers of Ten

Lecture 02: 1D Kinematics

Lecture 03: Vectors

"8.02 Electricity and Magnestism">

Lecture 01: What holds our world together?

Lecture 02: Electric Field

Lecture 03: Electric Flux

"8.03 Physics III: Vibrations and Waves">

Lecture 01: Periodic Phenomenon

Lecture 02: Beats

Lecture 03: Forced Oscillations with Damping

datalist 数据列表，常用用来和input的list属性一起用，可以输入自动匹配，类似autocomplete

联系人: label>

datalist>

progress 进度条标签设置value可以显示当前进度

Progress: 0span>%progress>p>

html5 语义化文档结构标签

header 结构的头部

menu 菜单标签

aside 理解为结构左边栏，通常放一些目录

nav 导航标签，例如面包屑导航

section 模块标签，和div差不多，但是比div语义化重一些，一般我做web app开发，一个tab页处理作为一个section

article 文章标签，一般是有明确标题，内容，底部作者等等的语义

sumary 摘要标签

main 一个article里面的主要内容

details 详细标签

address 表示地址标签

time 表示时间标签

footer 结构的底部

自己理解分析的一个图：

换衣有错指出，一起交流

博客参考：

https://dev.w3.org/html5/html-author/