HTML <input> type 属性
实例
带有两种不同输入类型的 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 控件(包括年、月、日、时、分、秒、几分之一秒,不带时区)。 |
定义用于 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
输入类型: 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
输入类型: 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">
亲自试一试 »
请使用下面的属性来规定限制:
输入类型: 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">
亲自试一试 »
请使用下面的属性来规定限制:
输入类型: reset
提示: 请谨慎使用重置按钮!对于用户来说,不慎点击了重置按钮是件很恼火的事情。
输入类型: search
定义搜索字段(比如站内搜索或谷歌搜索等):
<label for="gsearch">Search Google:</label>
<input type="search"
id="gsearch" name="gsearch">
亲自试一试 »
输入类型: 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> 标签