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 | 定义日期和时间控件(年、月、日、时间,无时区)。 |
定义用于输入电子邮件地址的字段。 | |
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 |
支持 | 支持 | 支持 | 支持 | 支持 |