html5 input新类型

input新元素类型标签             

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week 

        <input type="color" name="" id=""><br>   

                <!-- 颜色 -->                                     

        <input type="date" name="" id=""><br>
        <!-- 一个日期框，年月日 -->
        <input type="datetime-local" name="" id=""><br>
        <!-- 日期框加时间 -->
        <input type="email" name="" id=""><br>
        <!-- 验证输入的邮箱是否有效 -->
        <input type="month" name="" id=""><br>
        <!-- 日期框的规定到某月 -->

<input type="week" name="" id=""><br>
            <!-- 日期框选择某一年的某一周 -->
            <input type="time" name="" id=""><br>
            <!-- 时间框，选择时间 -->
            <input type="number" name="" id="" min="-5" max="9"><br>
            <!-- 号码框，输入号码 -->
            <input type="range" step="10" name="" id="" min="0" max="100"><br>
            <!--滑块控制条 step属性规定一下拉取的进度，10就是一下拉10% -->

<br><input type="url" name="" id="">
            <!-- 验证输入的网址 -->

input:color
Input 类型: color
color 类型用在input字段主要用于选取颜色
<input type="color" name="" id="">

Input 类型: date
date 类型允许你从一个"日期选择器"选择一个日期
<input type="date" name="" id="">

Input 类型: datetime
datetime 类型允许你选择一个日期（UTC 时间）
注意：在页面预览中没有弹窗
<input type="datetime" name="" id="">

Input 类型: datetime-local
datetime-local 类型允许你选择一个日期和时间 (无时区).
注意：在页面预览中，火狐浏览器看不到效果，谷歌浏览器可以看到效果
<input type="datetime-local" name="" id="">

Input 类型: email
email 类型用于应该包含 e-mail 地址的输入域
<input type="email" name="" id="">

Input 类型: month
month 类型允许你选择一个月份
注意：在页面预览中，火狐浏览器看不到效果，谷歌浏览器可以看到效果
<input type="month" name="" id="">

Input 类型: week
week 类型允许你选择周和年
注意：在页面预览中，火狐浏览器看不到效果，谷歌浏览器可以看到效果
<input type="week" name="" id="">

Input 类型: time
time 类型允许你选择一个时间
注意：在页面预览中，火狐浏览器能看到样子，但是操作不了，谷歌浏览器可以看到效果
<input type="time" name="" id="">

Input 类型: number
number 类型用于应该包含数值的输入域
能够设定对"所接受的数字"的限定 取值范围
<input type="number" name="" id="" min="0" max="5">

Input 类型: range
range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条
<input type="range" name="" id="" min="0" max="100" step="20">

Input 类型: search
search 类型用于搜索域，比如站点搜索或 Google 搜索
注意：在页面预览中，谷歌浏览器下输入内容的时候，会在输入框的右侧出现“关闭”按钮，可以看到效果，在火狐浏览器下没有
<input type="search" name="" id="">

Input 类型: tel
定义输入电话号码字段
<input type="tel" name="" id="">

Input 类型: url
url 类型用于应该包含 URL 地址的输入域。
在提交表单时，会自动验证 url 域的值
注意：网址一定要有协议头https:// 或 http://
<input type="url" name="" id="">