HTML <input> type 属性

定义和用法

type 属性规定要显示的 <input> 元素的类型。

如果未指定 type 属性,则默认类型为 "text"。

实例

包含两个输入字段的 HTML 表单;一个文本字段和一个提交按钮:

<form action="/action_page.php">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username"><br>
  <input type="submit" value="提交">
</form>

亲自试一试

页面底部提供更多实例。

语法

<input type="value">

属性值

描述
button 定义可点击的按钮(主要与 JavaScript 一起使用以激活脚本)。
checkbox 定义复选框。
color 定义颜色选择器(拾色器)。
date 定义日期控件(年月日,无时间)。
datetime-local 定义日期和时间控件(年、月、日、时间,无时区)。
email 定义用于输入电子邮件地址的字段。
file 定义文件选择字段和“浏览”按钮(用于文件上传)。
hidden 定义隐藏的输入字段。
image 定义图像作为提交按钮。
month 定义月份和年份控件(无时区)。
number 定义用于输入数字的字段。
password 定义密码字段。
radio 定义单选按钮。
range 定义范围控件(如滑块控件)。
reset 定义重置按钮。
search 定义用于输入搜索字符串的文本字段。
submit 定义提交按钮。
tel 定义用于输入电话号码的字段。
text 默认。定义单行文本字段。
time 定义输入时间的控件(无时区)。
url 定义用于输入 URL 的字段。
week 定义周和年控件(无时区)。

更多实例

输入类型:button

一个在被点击时激活 JavaScript 的按钮:

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

亲自试一试

输入类型:checkbox

复选框允许用户从有限数量的选择中选择一个或多个选项:

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1">我有一辆自行车</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">我有一辆车</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3">我有一艘船</label><br>

亲自试一试

输入类型:color

从颜色选择器中选择一种颜色:

<label for="favcolor">请选择您喜欢的颜色:</label>
<input type="color" id="favcolor" name="favcolor">

亲自试一试

输入类型:date

定义日期控件:

<label for="birthday">生日:</label>
<input type="date" id="birthday" name="birthday">

亲自试一试

输入类型:datetime-local

定义日期和时间控件(无时区):

<label for="birthdaytime">生日(日期和时间):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">

亲自试一试

输入类型:email

定义电子邮件地址字段(提交时将自动进行验证):

<label for="email">请输入您的电子邮件:</label>
<input type="email" id="email" name="email">

亲自试一试

输入类型:file

定义文件选择字段和“浏览...”按钮(用于文件上传):

<label for="myfile">请选择一个文件:</label>
<input type="file" id="myfile" name="myfile">

亲自试一试

输入类型:hidden

定义隐藏字段(对用户不可见)。

隐藏字段通常存储提交表单时需要更新的数据库记录:

<input type="hidden" id="custId" name="custId" value="3487">

亲自试一试

输入类型:image

将图像定义为提交按钮:

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

亲自试一试

输入类型:month

定义月份和年份控件(无时区):

<label for="bdaymonth">生日(年月):</label>
<input type="month" id="bdaymonth" name="bdaymonth">

亲自试一试

输入类型:number

定义用于输入数字的字段(您也可以对接受的数字设置限制):

<label for="quantity">数量(1 到 5 之间):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">

亲自试一试

请使用以下属性来指定限制条件:

  • max - 指定允许的最大值
  • min - 指定允许的最小值
  • step - 指定合法的数字间隔
  • value - 指定默认值

输入类型:password

定义密码字段(字符被掩码):

<label for="pwd">密码:</label>
<input type="password" id="pwd" name="pwd">

亲自试一试

输入类型:radio

单选按钮让用户只能从有限数量的选项中选择一个:

<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>

亲自试一试

输入类型:range

定义输入数字的控件,它的确切值并不重要(比如滑块控件)。默认范围是从0到100。但是,您可以使用 min、max 和 step 属性设置对所接受数字的限制:

<label for="vol">音量(0 到 50 之间):</label>
<input type="range" id="vol" name="vol" min="0" max="50">

亲自试一试

请使用以下属性来规定限制条件:

  • max - 指定允许的最大值
  • min - 指定允许的最小值
  • step - 指定合法的数字间隔
  • value - 指定默认值

输入类型:reset

定义重置按钮(将所有表单值重置为默认值):

<input type="reset">

亲自试一试

提示:请谨慎使用重置按钮!对于意外激活重置按钮的用户来说,这可能会很烦人。

输入类型:search

定义搜索字段(如站点搜索或 Google 搜索):

<label for="gsearch">搜索 Google:</label>
<input type="search" id="gsearch" name="gsearch">

亲自试一试

输入类型:submit

定义提交按钮:

<input type="submit">

亲自试一试

输入类型:tel

定义用于输入电话号码的字段:

<label for="phone">请输入您的电话号码:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">

亲自试一试

输入类型:text

定义两个单行文本字段,用户可以在其中输入文本:

<label for="fname">名字:</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">姓氏:</label>
<input type="text" id="lname" name="lname"><br>

亲自试一试

输入类型:time

定义输入时间的控件(不带时区):

<label for="appt">请选择时间:</label>
<input type="time" id="appt" name="appt">

亲自试一试

输入类型:url

定义用于输入 URL 的字段:

<label for="homepage">请添加您的主页:</label>
<input type="url" id="homepage" name="homepage">

亲自试一试

提示:iPhone 上的 Safari 浏览器可以识别 URL 输入类型,并更改屏幕键盘来匹配它(添加 .com 选项)。

输入类型:week

定义周和年控件(无时区):

<label for="week">请选择一周:</label>
<input type="week" id="week" name="week">

亲自试一试

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持