HTML5新增input类型

一、HTML5新增input类型

1、type="date" 表示选择年、月、日,可选择，可手输

样式图：

---

2、type="month" 表示选择年、月

样式图：

---

3、type="week"  表示选择年、周

样式图：

---

4、type="time" 表示选择具体时间，只有时和分钟

样式图：

---

5、type="datetime  表示选择年、月、日、时间(指的是UTC时间，格林威治时间) 

（文本框相似，需要手动输入具体时间）

样式图：

---

6、type="datetime-local " 表示选择年、月、日、时间

     (本地时间，即电脑设置的时间 ）

样式图：

---

7、 type="number"

min表示最小值

max表示最大值

step表示两个数字之间的间隔，一次增加或减少的值

value表示默认值 --

---

8、type="range"

---

9、 type="email" 

           电子邮件地址文本框，提交表单时会自动验证email的值

            要按照这种格式： 123123@qq.com 

样式图：

---

10、 type="url" 

            网页的URL，提交表单时会自动验证url的值

            要按照这种格式：http://www.百度.com或者https://www.百度.com 

样式图：

---

11、type="color" 

               主要用于选取颜色

         #44be86是地址栏转义后的颜色值  

    可以通过js方法 decodeURIComponent('#44be86')来转成 真正的16进制的颜色#44be86

样式图：

---

12、type="search" 

         用于搜索引擎（搜索框）语义化表示搜索框  

样式图：

这篇好文章是转载于：学新通技术网