【前端基础入门】学习笔记（二）——HTML5新特性之增型表单

---

日期：2020.2.19
大纲：
一、增型表单
二、新的表单属性
1. 新的form属性
2. 新的input属性

---

一、增型表单标签

html5新增了多个表单输入类型，提供了更好的输入控制和验证。只有Opera能完美适配这些新的输入类型。

• email类型
  表单在提交的时候会自动校验是否符合邮箱的正则表达式。

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

• url类型
  表单在提交的时候会自动校验是否符合网址的正则表达式。
  注：Safari浏览器支持url类型输入，并且会改变触摸键盘配合。

  	<input type="email" name="url" placeholder="请输入网址"/>
  	````
  

• number类型
  number 类型用于应该包含数值的输入域。还能够设定对所接受的数字的限定：

  	<input type="number" name="number" min="1" max="100" step="1"/>
  

  min:标识当前输入框输入的最小值
  max:标识当前输入框输入的最大值
  step:标识点击增大/减小的时候，增加/减小的步长

  效果大概长这样：
  

• range类型
  包含一定范围内数字值得输入域。显示为一条滑条，能够设定对所接受的数字的限定：

  <form oninput="output.value = parseInt(range.value)"/>
  <input type="range" min="1" max="10"  step="1" name="range" value="0"