HTML 5 <input> type 属性

w3school 在线教程

## HTML5 教程

- HTML5 教程
- HTML5 简介
- HTML5 视频
- HTML5 视频/DOM
- HTML5 音频
- HTML5 拖放
- HTML5 画布
- HTML5 SVG
- HTML5 画布 vs SVG
- HTML5 地理定位
- HTML5 Web 存储
- HTML5 应用缓存
- HTML5 Web Workers
- HTML5 服务器发送事件

## HTML5 表单

- HTML5 输入类型
- HTML5 表单元素
- HTML5 表单属性

## HTML5 测验

- HTML5 测验

## HTML5 参考手册

- HTML5 标签
- HTML5 属性
- HTML5 事件
- HTML5 视频/音频
- HTML5 画布
- HTML 有效 DTD

# HTML 5 <input> type 属性

HTML 5 <input> 标签

## 实例

带有不同输入类型的表单：

    <form action="demo_form.asp" method="get">
      First name: <input type="text" name="fname" /><br />
      Last name: <input type="text" name="lname" /><br />
      <input type="submit" value="Submit" />
    </form>

亲自试一试

（下面有更多实例）

## 定义和用法

type 属性规定 input 元素的类型。

注释：该属性不是必需的，但是我们认为您应该始终使用它。

## HTML 4.01 与 HTML 5 之间的差异

以下类型是 HTML5 中的新类型：color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url。

## 语法

    <input type="value">

### 属性值

值 | 描述
--- | ---
button | 定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
checkbox | 定义复选框。
color | 定义拾色器。
date | 定义日期字段（带有 calendar 控件）
datetime | 定义日期字段（带有 calendar 和 time 控件）
datetime-local | 定义日期字段（带有 calendar 和 time 控件）
month | 定义日期字段的月（带有 calendar 控件）
week | 定义日期字段的周（带有 calendar 控件）
time | 定义日期字段的时、分、秒（带有 time 控件）
email | 定义用于 e-mail 地址的文本字段
file | 定义输入字段和 "浏览..." 按钮，供文件上传
hidden | 定义隐藏输入字段
image | 定义图像作为提交按钮
number | 定义带有 spinner 控件的数字字段
password | 定义密码字段。字段中的字符会被遮蔽。
radio | 定义单选按钮。
range | 定义带有 slider 控件的数字字段。
reset | 定义重置按钮。重置按钮会将所有表单字段重置为初始值。
search | 定义用于搜索的文本字段。
submit | 定义提交按钮。提交按钮向服务器发送数据。
tel | 定义用于电话号码的文本字段。
text | 默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。
url | 定义用于 URL 的文本字段。

## 输入类型 - text

定义单行输入字段的文本输入类型，用户可在其中输入文本。

### 实例

    Email: <input type="text" name="email" /><br />
    Pin: <input type="text" name="pin" />

亲自试一试

## 输入类型 - button

button 输入类型定义可点击的按钮，这个按钮本身不会做任何事情。button 类型常用于在用户单击按钮时启动一段 JavaScript。

### 实例

    <input type="button" value="Click me" onclick="msg()" />

亲自试一试

## 输入类型 - checkbox

checkbox 输入类型定义复选框。复选框允许用户在一定数量的选择中选取一个或多个选项。

### 实例

    <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
    <input type="checkbox" name="vehicle" value="Car" /> I have a car

亲自试一试

## 输入类型 - color

color 输入类型用于规定颜色。

该输入类型允许您从拾色器中选取颜色：

### 实例

    Color: <input type="color" name="user_color" />

亲自试一试

## 日期和时间选择器

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

- date - 选择日、月、年
- month - 选择月、年
- week - 选择周、年
- time - 选择时间（时、分）
- datetime - 选择时间、日期、月、年（UTC 时间）
- datetime-local - 选择时间、日期、月、年（本地时间）

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

### 实例

    Date: <input type="date" name="user_date" />

亲自试一试

输入类型 "month": 亲自试一试

输入类型 "week": 亲自试一试

输入类型 "time": 亲自试一试

输入类型 "datetime": 亲自试一试

输入类型 "datetime-local": 亲自试一试

## 输入类型 - email

email 输入类型用于应该包含电邮地址的输入字段。

当提交表单时，会自动地对 email 字段的值进行验证。

### 实例

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

亲自试一试

提示：iPhone 的 Safari 浏览器会识别 email 输入类型，然后改变触摸屏的键盘来适应它（添加 @ 和 .com 选项）。

## 输入类型 - file

file 输入类型用于文件上传。

### 实例

    Select images: <input type="file" name="img" />

亲自试一试

## 输入类型 - hidden

hidden 输入类型定义隐藏字段。隐藏字段对于用户是不可见的。隐藏字段常常存储默认值，或者由 JavaScript 改变它们的值。

### 实例

    <input type="hidden" name="country" value="Norway" />

亲自试一试

## 输入类型 - image

image 输入类型将图像定义为提交按钮。

对于 <input type="image">，src 和 alt 属性是必需的。

### 实例

    <input type="image" src="img_submit.gif" alt="Submit" />

亲自试一试

## 输入类型 - number

number 输入类型用于包含数字值的输入字段。

您可以设置可接受数字的限制。

### 实例

    Points: <input type="number" name="points" min="1" max="10" />

亲自试一试

请使用下面的属性来为 number 类型规定限制：

属性 | 值 | 描述
--- | --- | ---
max | number | 规定允许的最大值。
min | number | 规定允许的最小值。
step | number | 规定合法数字间隔（如果 step="3"，则合法的数字是 -3,0,3,6, 以此类推）
value | number | 规定默认值。

提示：iPhone 的 Safari 浏览器会识别 number 输入类型，然后改变触摸屏的键盘来适应它（显示数字）。

## 输入类型 - password

password 输入类型定义密码字段。密码字段中的字符会被遮蔽（显示为星号或实心圆）。

### 实例

    <input type="password" name="pwd" />

亲自试一试

## 输入类型 - radio

radio 输入类型定义单选按钮。单选按钮允许用户选择有限数目的选项。

### 实例

    <input type="radio" name="sex" value="male" /> Male<br />
    <input type="radio" name="sex" value="female" /> Female

亲自试一试

## 输入类型 - range

range 输入类型用于应该包含指定范围值的输入字段。

range 类型显示为滑块。

您也可以设置可接受数字的限制：

### 实例

    <input type="range" name="points" min="1" max="10" />

亲自试一试

请使用下面的属性来规定 range 类型的限定：

属性 | 值 | 描述
--- | --- | ---
max | number | 规定允许的最大值。
min | number | 规定允许的最小值。
step | number | 规定合法数字间隔（如果 step="3"，则合法数字是 -3,0,3,6，以此类推）
value | number | 规定默认值。

## 输入类型 - reset

Reset 输入类型定义重置按钮。重置按钮会把所有表单字段重置为初始值。

提示：请谨慎使用重置按钮！对于用户来说，不慎点击了重置按钮是件很恼火的事情。

### 实例

    <input type="reset" />

亲自试一试

## 输入类型 - search

search 输入类型用于搜索字段，比如站内搜索或谷歌搜索等。

搜索字段的外观与常规的文本字段无异。

## 输入类型 - submit

submit 输入类型定义提交按钮。

提交按钮用于向服务器发送表单数据。数据会被发送到在表单的 action 属性中规定的页面。

### 实例

    <form action="form_action.asp" method="get">
    Email: <input type="text" name="email" /><br />
    <input type="submit" />
    </form>

亲自试一试

## 输入类型 - tel

tel 输入类型用于应该包含电话号码的输入字段。

### 实例

    Mobile: <input type="tel" name="user_mobile" />

亲自试一试

## 输入类型 - url

url 输入类型用于应该包含 URL 地址的输入字段。

会在提交表单时对 url 字段的值自动进行验证。

### 实例

    Homepage: <input type="url" name="user_url" />

亲自试一试

提示：iPhone 的 Safari 浏览器会识别 url 输入类型，然后改变触摸屏的键盘来适应它（添加 .com 选项）。

HTML 5 <input> 标签