HTML5 新增的 input 类型

1. type="email"

邮箱：<input type="email" name="emailname" id="">

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

2. type="url"

网址：<input type="url" name="urlname" id="">

作用：使用网页的url表单类型，提交表单时会自动验证url的值

 

url这种文本框的网址格式：要为以http:// 或者https:// 开头，比如http://www.baidu.com 或者https://www.baidu.com

3. type="color"

颜色：<input type="color" name="colorname" id="">

       颜色框样式如左图，主要用于选取颜色。

 4. type="search"

搜索：<input type="search" name="searchname" id="">

 

搜索框用于搜索引擎，它与输入框的不同，是它具有语义化 。所以我们实际开发中，搜索框都是使用type="search"。

5.type="search"

<!-- min属性表示范围的最小值 -->
<!-- max属性表示范围的最大值 -->
<!-- step属性表示步长，即一次增加或者减少多少 -->
<!-- value属性表示规定的默认值 -->
数字：<input type="number" name="numbername" id="" min="2" max="10" step="2" 
value="5">

 该类型是限制用户输入的值必须为数字类型。

 6.type="range"

<!-- min属性表示范围的最小值 -->
<!-- max属性表示范围的最大值 -->
<!-- step属性表示步长，即一次增加或者减少多少 -->
<!-- value属性表示规定的默认值 -->
数字条：<input type="range" name="range" id="" min="10" max="90" step="5"
 value="30">

 该类型与type="number"的用法和属性相似。

7.type="date"

日期：<input type="date" name="date" id="">

 date表示选择年、月、日，具体样式如左图。

 8.type="month"

<input type="month" name="month" id="">

 month表示选择年、月，具体样式如左图。

  8.type="week"

<input type="week" name="week" id="">

 week表示选择年、周，具体样式如左图。

  9.type="time"

时间：<input type="time" name="time" id="">

 time表示选择具体时间，只有小时和分钟，具体样式如左图。

   10.type="datetime"

<input type="datetime" name="datetime" id="">

 

datetime表示选择年、月、日、时间(指的是UTC时间，格林威治时间)，上图是样式效果，看起来和文本框相似，需要手动输入具体时间，实际开发用的较少。

11.type="datetime-local"

 <input type="datetime-local" name="datetime-local" id="">

 

datetime-local类型表示选择年、月、日、时间(本地时间，即电脑设置的时间）——可以直接选择，也可以手动输入，只能到分钟，没有秒 。