html5 常用标签和属性

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

html5 input 组件

1. 时间日期类型

  month     <input type = "month" /><br><br>  <!-- 年月 -->
  week     <input type = "week" /><br><br>  <!-- 年周 -->
 date     <input type = "date" /><br><br>   <!-- 年月日 -->
time     <input type = "time" /><br><br>   <!-- 小时分 -->
datetime-local  <input type = "datetime-local" /><br><br> <!-- 年月日小时分 -->

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

 <form>
  tel     <input type = "tel" /><br><br>  <!-- 电话校验 ,没有严格的匹配，因为电话号码，国家和地区可能不同，你可以自己定义patten属性自定义匹配规则-->
  url     <input type = "url" /><br><br>  <!-- URL校验 -->
 email     <input type = "email" /><br><br>   <!-- 邮箱校验 -->
<input type = "submit" value = "提交"/>
</form>

1. 其他input类型

<form>
  number     <input type = "number" /><br><br>  <!--细调数字-->
  range      <input type = "range" /><br><br>  <!-- 范围拉条-->
  color      <input type = "color" /><br><br>   <!-- 获取颜色 -->
  image      <input type = "image" src = "color.png" alt = "图片数据"/><br><br>   <!-- 可作为图片提交按钮提交表单 -->
<input type = "submit" value = "提交"/>
</form>

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

html5 input 属性

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

<input type = "text" maxlength = 10 minlength = 2 /><br><br> <!-- 最多可以输入10个字符，最小可以输入俩个字符 -->

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

<input type = "text" size = 5 /><br><br> <!-- 输入框最多只能显示5个字符，你可以输入无数个 -->

1. required 必填字段

<input type = "text" required /><br><br>

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

  <label>联系人: <input type=email multiple name=cc list="contacts"></label>
<datalist id="contacts">
<option value="[e-mail]">
<option value="[e-mail]">
<option value="[e-mail]">
<option value="[e-mail]">
</datalist>

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

 <input type = "text" patten = "^([0-9]){7,18}(x|X)?$" /><!--校验身份证-->

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

<input name=bday type=date max="1979-12-31">
<input name=quantity required="" type="number" min="1" value="1">

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

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

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

 <label>Cc: <input type=email name=cc list="contacts"></label>
<datalist id="contacts">
<option value="[e-mail]">
<option value="[e-mail]">
<option value="[e-mail]">
<option value="[e-mail]">
</datalist>

1. placeholder 在表单中显示提示信息

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

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

 <form >
  <label>
   <input type = "text" name = "inputName" autocomplete="off" />
    <input type = "text" name = "inputAge" autocomplete="on" />
   <input type = "submit" value = "提交"/>
  </form>

html5 一些常用标签

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

<label>男：<input type = "radio" name = "sex"/></label>
<label>女：<input type = "radio" name = "sex"/></label>

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

 <select name="c">
   <optgroup label="8.01 Physics I: Classical Mechanics">
    <option value="8.01.1">Lecture 01: Powers of Ten
    <option value="8.01.2">Lecture 02: 1D Kinematics
    <option value="8.01.3">Lecture 03: Vectors
   <optgroup label="8.02 Electricity and Magnestism">
    <option value="8.02.1">Lecture 01: What holds our world together?
    <option value="8.02.2">Lecture 02: Electric Field
    <option value="8.02.3">Lecture 03: Electric Flux
   <optgroup label="8.03 Physics III: Vibrations and Waves">
    <option value="8.03.1">Lecture 01: Periodic Phenomenon
    <option value="8.03.2">Lecture 02: Beats
    <option value="8.03.3">Lecture 03: Forced Oscillations with Damping
  </select>

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

<label>联系人: <input type=email name=cc list="contacts"></label>
<datalist id="contacts">
<option value="[e-mail]">
<option value="[e-mail]">
<option value="[e-mail]">
<option value="[e-mail]">
</datalist>

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

<p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>

html5 语义化文档结构标签

1. header 结构的头部
2. menu 菜单标签
3. aside 理解为结构左边栏，通常放一些目录
4. nav 导航标签，例如面包屑导航
5. section 模块标签，和div差不多，但是比div语义化重一些，一般我做web app开发，一个tab页处理作为一个section
6. article 文章标签，一般是有明确标题，内容，底部作者等等的语义
7. sumary 摘要标签
8. main 一个article里面的主要内容
9. details 详细标签
10. address 表示地址标签
11. time 表示时间标签
12. footer 结构的底部

自己理解分析的一个图：

换衣有错指出，一起交流

博客参考：

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