HTML5：input元素大全

比眉伴天荒 2022-11-19 04:20 117阅读 0赞

**目录**

一、HTML5 新增 Input元素

二、浏览器支持

三、Input 类型

1- email

2 - url

3 - number

4 - range

5 - Date Pickers（日期选择器）

6 - search

--------------------

## 一、HTML5 新增 Input元素 ##

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

本章全面介绍这些新的输入类型：

*  email
 *  url
 *  number
 *  range
 *  Date pickers (date, month, week, time, datetime, datetime-local)
 *  search
 *  color

--------------------

## 二、浏览器支持 ##

<table> 
 <tbody> 
  <tr> 
   <th>Input type</th> 
   <th>IE</th> 
   <th>Firefox</th> 
   <th>Opera</th> 
   <th>Chrome</th> 
   <th>Safari</th> 
  </tr> 
  <tr> 
   <td>email</td> 
   <td>No</td> 
   <td>4.0</td> 
   <td>9.0</td> 
   <td>10.0</td> 
   <td>No</td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td>No</td> 
   <td>4.0</td> 
   <td>9.0</td> 
   <td>10.0</td> 
   <td>No</td> 
  </tr> 
  <tr> 
   <td>number</td> 
   <td>No</td> 
   <td>No</td> 
   <td>9.0</td> 
   <td>7.0</td> 
   <td>No</td> 
  </tr> 
  <tr> 
   <td>range</td> 
   <td>No</td> 
   <td>No</td> 
   <td>9.0</td> 
   <td>4.0</td> 
   <td>4.0</td> 
  </tr> 
  <tr> 
   <td>Date pickers</td> 
   <td>No</td> 
   <td>No</td> 
   <td>9.0</td> 
   <td>10.0</td> 
   <td>No</td> 
  </tr> 
  <tr> 
   <td>search</td> 
   <td>No</td> 
   <td>4.0</td> 
   <td>11.0</td> 
   <td>10.0</td> 
   <td>No</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>No</td> 
   <td>No</td> 
   <td>11.0</td> 
   <td>No</td> 
   <td>No</td> 
  </tr> 
 </tbody> 
</table>

**注释：**Opera 对新的输入类型的支持最好。不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。

## 三、Input 类型 ##

### 1- email ###

*  email 类型用于应该包含 e-mail 地址的输入域。
 *  在提交表单时，会自动验证 email 域的值。

E-mail: <input type="email" name="user_email" />

**提示**：iPhone 中的 Safari 浏览器支持 email 输入类型，并通过改变触摸屏键盘来配合它（添加 @ 和 .com 选项）。

### 2 - url ###

*  url 类型用于应该包含 URL 地址的输入域。
 *  在提交表单时，会自动验证 url 域的值。

**提示：i**Phone 中的 Safari 浏览器支持 url 输入类型，并通过改变触摸屏键盘来配合它（添加 .com 选项）。

### 3 - number ###

*  number 类型用于应该包含数值的输入域。

您还能够设定对所接受的数字的限定：

请使用下面的属性来规定对数字类型的限定：

<table> 
 <tbody> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>max</td> 
   <td><em>number</em></td> 
   <td>规定允许的最大值</td> 
  </tr> 
  <tr> 
   <td>min</td> 
   <td><em>number</em></td> 
   <td>规定允许的最小值</td> 
  </tr> 
  <tr> 
   <td>step</td> 
   <td><em>number</em></td> 
   <td>规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）</td> 
  </tr> 
  <tr> 
   <td>value</td> 
   <td><em>number</em></td> 
   <td>规定默认值</td> 
  </tr> 
 </tbody> 
</table>

**提示：**iPhone 中的 Safari 浏览器支持 number 输入类型，并通过改变触摸屏键盘来配合它（显示数字）。

### 4 - range ###

*  range 类型用于应该包含一定范围内数字值的输入域。
 *  range 类型显示为滑动条。

您还能够设定对所接受的数字的限定：

请使用下面的属性来规定对数字类型的限定：

### 5 - Date Pickers（日期选择器） ###

HTML5 拥有多个可供选取**日期和时间的新输入类型：**

*  date - 选取日、月、年
 *  month - 选取月、年
 *  week - 选取周和年
 *  time - 选取时间（小时和分钟）
 *  datetime - 选取时间、日、月、年（UTC 时间）
 *  datetime-local - 选取时间、日、月、年（本地时间）

下面的例子允许您从日历中选取一个日期：

### 6 - search ###

*  search 类型用于搜索域，比如站点搜索或 Google 搜索。
 *  search 域显示为常规的文本域。