HTML <input>标签 type属性

  HTML <input> 标签

type属性定义<input>标签的类型，默认属性是text。

案例

本案例设置了两个type="text"的输入框

<input type="text" name="xing" value="张">
<input type="text" name="ming" value="三">

type类型

支持浏览器

语法

<input type="类型值">

type属性值

值	描述
text	type属性的默认值。定义一个单行的文本字段（默认宽度为 20 个字符）。
hidden	设置一个隐藏字段
password	设置为密码字段（字段中的字符会被小黑点替换）
email	e-mail格式字段
file	上传文件控件
button	表单按钮
checkbox	多选框
color	拾色器
date	日期控件（包括年、月、日）
datetime	日期和时间控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）
datetime-local	日期和时间控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）
month	年份和月份控件(不带时区)
time	时间控件（不带时区）
week	年份和第几周控件（不带时区）
number	只能输入数字的字段
image	图像按钮
radio	单选元素
range	拖动数字选项
reset	重置按钮，重置则恢复其默认值
search	搜索字段，让浏览器知道这个一个搜索框，会为其展示其搜索的样式
submit	提交按钮
tel	用于输入电话号码的字段
url	网址字段，在提交表单时会自动验证输入的值是否是空或者正确的URL格式。

更多案例

type属性值:text

案例解释	支持浏览器
本案例设置了可输入的两个单行文本字段

姓氏：<input type="text" name="xing" value="张"><br>
名字: <input type="text" name="ming" value="三"><br>

运行代码

type属性值:hidden

案例解释	支持浏览器
本案例设置一个隐藏字段，隐藏字段用户不可建，通常用于查询数据库的ID之类

名字: <input type="hidden" name="ming" value="三"><br>

运行代码

type属性值:password

案例解释	支持浏览器
设置为密码字段，密码显示时会被小黑点代替

密码:<input type="password" name="ming">

运行代码

type属性值:email

案例解释	支持浏览器
这是为e-mail格式字段(标题提交时会验证该字段是否为e-mail格式)

email:<input type="email" name="ming">

运行代码

type属性值:file

案例解释	支持浏览器
设置为一个上传文件控件

选择一个文件: <input type="file" name="ming">

运行代码

type属性值:button

案例解释	支持浏览器
设置为按钮，按钮可以提交表单，可以用与启动JavaScript脚本

<input type="button" value="点我" onclick="msg()">

运行代码

type属性值:checkbox

案例解释	支持浏览器
设置多选框，用户可选中一个或者多个选项

  <input type="checkbox" name="ming" value="PHP"> PHP教程<br>
  <input type="checkbox" name="ming" value="HTML"> HTML教程<br>
  <input type="checkbox" name="ming" value="CSS"> CSS教程<br>

运行代码

type属性值:color

案例解释	支持浏览器
从拾色器中选取颜色

 选择你喜欢的颜色: <input type="color" name="ming">

运行代码

type属性值:date

案例解释	支持浏览器
设置为日期控件（包括年、月、日）

日期: <input type="date" name="ming">

运行代码

type属性值:datetime

案例解释	支持浏览器
设置为日期和时间控件（带有时区）

日期和时间（带有时区）: <input type="datetime" name="ming">

运行代码

type属性值:datetime-local

案例解释	支持浏览器
设置为日期和时间控件（不带有时区）

日期和时间（不带有时区）: <input type="datetime-local" name="ming">

运行代码

type属性值:month

案例解释	支持浏览器
设置年份和月份控件(不带时区)

日期：年和月份（不带有时区）: <input type="month" name="ming">

运行代码

type属性值:time

案例解释	支持浏览器
设置时间控件（不带时区）

选择时间: <input type="time" name="ming">

运行代码

type属性值:week

案例解释	支持浏览器
设置年份和第几周控件（不带时区）

选择年份和周（不带时区）: <input type="week" name="ming">

运行代码

type属性值:number

案例解释	支持浏览器
设置只能输入数字的字段

请输入在[1-3]之外的数: <input type="number" name="ming" min="1" max="3" />

运行代码

请使用下面的属性来规定限制：

• max - 规定允许的最大值。

• min - 规定允许的最小值。

• step - 规定合法数字间隔。

• value - 规定默认值。

type属性值:image

案例解释	支持浏览器
设置图像按钮

<input type="image" src="/Template/Test/img/778.png" alt="Submit" width="50" height="49">

运行代码

type属性值:radio

案例解释	支持浏览器
设置单选元素

<p>性别：</p>
     <input type="radio" name="ming" value="女"/>女
     <input type="radio" name="ming" value="男"/>男

运行代码

type属性值:range

案例解释	支持浏览器
设置拖动数字选项

<p>数量(1/10)：</p>
     <input type="range" name="ming" step="1" min="1" max="10">

运行代码

请使用下面的属性来规定限制：

• max - 规定允许的最大值。

• min - 规定允许的最小值。

• step - 规定合法数字间隔。

• value - 规定默认值。

type属性值:reset

案例解释	支持浏览器
设置重置按钮，重置则恢复其默认值（就是value的值）

<input type="reset" value="重置">

运行代码

type属性值:search

案例解释	支持浏览器
设置为搜索字段，让浏览器知道这个一个搜索框，会为其展示其搜索的样式（比如说输入框为椭圆形，有“X”去除按钮），在不同的手机展示时会出现搜索按钮。

搜索：<input type="search" name="ming" value="">

运行代码

type属性值:submit

案例解释	支持浏览器
设置提交按钮

<input type="submit" value="提交">

运行代码

type属性值:tel

案例解释	支持浏览器
用于输入电话号码的字段,目前几乎主流浏览器都不支持tel属性

type属性值:url

案例解释	支持浏览器
设置网址字段，在提交表单时会自动验证输入的值是否是空或者正确的URL格式。

输入网址: <input type="url" name="ming">

运行代码