HTML CSS JAVASCRIPT BOOTSTRAP JQUERY PHP SQL PYTHON PYTHON2 JAVA C C++ C# Linux AI 教程库 参考手册 测验 练习 HOWTO FAQ

HTML <input> type 属性

❮ HTML <input> 标签

实例

带有两种不同输入类型的 HTML 表单，text 和 submit：

<form action="/action_page.php">
  <label for="username">Username: </label>
  <input type="text" id="username" name="username"><br>
  <input type="submit" value="提交">
</form>
亲自试一试 »

下面有更多实例。

定义和用法

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

默认类型是：text。

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

浏览器支持

属性
type Yes Yes Yes Yes Yes

语法

<input type="value">

属性值

值 描述
button 定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。
checkbox 定义复选框。
color 定义拾色器。
date 定义 date 控件（包括年、月、日，不包括时间）。
datetime-local 定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。
email 定义用于 e-mail 地址的字段。
file 定义文件选择字段和 "浏览..." 按钮，供文件上传。
hidden 定义隐藏输入字段。
image 定义图像作为提交按钮。
month 定义 month 和 year 控件（不带时区）。
number 定义用于输入数字的字段。
password 定义密码字段（字段中的字符会被遮蔽）。
radio 定义单选按钮。
range 定义用于精确值不重要的输入数字的控件（比如 slider 控件）。
reset 定义重置按钮（重置所有的表单值为默认值）。
search 定义用于输入搜索字符串的文本字段。
submit 定义提交按钮。
tel 定义用于输入电话号码的字段。
text >默认。定义一个单行的文本字段（默认宽度为 20 个字符）。
time 定义用于输入时间的控件（不带时区）。
url 定义用于输入 URL 的字段。
week 定义 week 和 year 控件（不带时区）。

更多实例

输入类型: button

定义可点击的按钮，在用户单击按钮时启动一段 JavaScript：

<input type="button" value="Click me" 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"> I have a boat</label><br>
亲自试一试 »

输入类型: color

从拾色器中选取颜色：

<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
亲自试一试 »

输入类型: date

定义 date 控件：

<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
亲自试一试 »

输入类型: datetime-local

定义 date 和 time 控件（带有时区）：

<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
亲自试一试 »

输入类型: email

定义用于 e-mail 地址的字段（当提交表单时会自动对 email 字段的值进行验证）：

<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
亲自试一试 »

输入类型: file

定义文件选择字段和 "浏览..." 按钮，供文件上传：

<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
亲自试一试 »

输入类型: hidden

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

<input type="hidden" id="custId" name="custId" value="3487">
亲自试一试 »

输入类型: image

定义图像作为提交按钮：

<input type="image" src="img_submit.gif" alt="Submit">
亲自试一试 »

输入类型: month

定义 month 和 year 控件（不带时区）：

<label for="bdaymonth">Birthday (month and year):</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">Password:</label>
<input type="password" id="pwd" name="pwd">
亲自试一试 »

输入类型: radio

允许用户在一定数量的选择中选取一个选项：

<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
亲自试一试 »

输入类型: range

定义用于精确值不重要的输入数字的控件（比如 slider 控件）。您也可以设置可接受数字的限制：

<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
亲自试一试 »

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

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

输入类型: reset

定义重置按钮（重置所有表单值为默认值）：

<input type="reset">
亲自试一试 »

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

输入类型: search

定义搜索字段（比如站内搜索或谷歌搜索等）：

<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
亲自试一试 »

输入类型: submit

定义提交按钮：

<input type="submit">
亲自试一试 »

输入类型: tel

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

<label for="电话">Enter your phone number:</label>
<input type="tel" id="电话" name="电话" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
亲自试一试 »

输入类型: text

定义两个用户可向其中输入文本的单行的文本字段：

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br>
亲自试一试 »

输入类型: time

定义用于输入时间的控件（不带时区）：

<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
亲自试一试 »

输入类型: url

定义用于输入 URL 的字段：

<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
亲自试一试 »

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

输入类型: week

定义 week 和 year 控件（不带时区）：

<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
亲自试一试 »

❮ HTML <input> 标签