HTML 输入类型
本章描述 <input> 元素的输入类型。
输入类型
以下是可以在 HTML 中使用的不同输入类型:
<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text"><input type="time"><input type="url"><input type="week">
提示: type 默认值是 "text"。
输入类型:text
<input type="text"> 定义供文本输入的单行输入字段:
实例
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
亲自试一试 »
以上 HTML 代码在浏览器中看上去是这样的:
First name:Last name:
输入类型:password
<input type="password"> 定义密码字段:
实例
<form>
<label for="username">Username:</label><br>
<input type="text"
id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
亲自试一试 »
以上 HTML 代码在浏览器中看上去是这样的:
Username:Password:
注释:password 字段中的字符会被做掩码处理（显示为星号或实心圆）。
输入类型:submit
<input type="submit"> 定义提交表单数据至表单处理程序的按钮。
表单处理程序（form-handler）通常是包含处理输入数据的脚本的服务器页面。
在表单的 action 属性中规定表单处理程序（form-handler）:
实例
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
亲自试一试 »
以上 HTML 代码在浏览器中看上去是这样的:
如果您省略了提交按钮的 value 属性，那么该按钮将获得默认文本:
实例
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit">
</form>
亲自试一试 »
输入类型:Reset
<input type="reset"> 定义将所有窗体值重置为其默认值的重置按钮:
实例
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
亲自试一试 »
以上 HTML 代码在浏览器中看上去是这样的:
如果更改输入值，然后单击 "Reset" 重置按钮，则表单数据将重置为默认值。
输入类型:Radio
<input type="radio"> 定义单选按钮。
单选按钮允许用户仅选择选项中的一个:
实例
<form>
<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>
</form>
亲自试一试 »
以上 HTML 代码在浏览器中看上去是这样的:
输入类型: checkbox
<input type="checkbox"> 定义复选框。
复选框允许用户在有限数量的选项中选择零个或多个选项。
实例
<form>
<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>
</form>
亲自试一试 »
以上 HTML 代码在浏览器中看上去是这样的:
输入类型: button
<input type="button"> 定义按钮:
以上 HTML 代码在浏览器中看上去是这样的:
输入类型: Color
<input type="color"> 用于应该包含颜色的输入字段。
根据浏览器支持，颜色选择器会出现输入字段中。
实例
<form>
<label for="favcolor">选择您喜欢的颜色:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
亲自试一试 »
输入类型: Date
<input type="date"> 用于应该包含日期的输入字段。
根据浏览器支持，日期选择器会出现输入字段中。
实例
<form>
<label for="birthday">生日:</label>
<input
type="date" id="birthday" name="birthday">
</form>
亲自试一试 »
使用 min 和 max 属性为日期添加限制:
实例
<form>
<label for="datemax">输入 1980-01-01 之前的日期:</label>
<input type="date" id="datemax" name="datemax"
max="1979-12-31"><br><br>
<label for="datemin">输入 2000-01-01 之后的日期:</label>
<input type="date" id="datemin" name="datemin"
min="2000-01-02">
</form>
亲自试一试 »
输入类型:Datetime-local
<input type="datetime-local"> 允许用户选择日期和时间（无时区）。
根据浏览器支持，日期选择器会出现输入字段中。
实例
<form>
<label for="birthdaytime">生日（日期和时间）:</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
亲自试一试 »
输入类型:Email
<input type="email"> 用于应该包含电子邮件地址的输入字段。
根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。
某些智能手机会识别 email 类型，并在键盘增加 ".com" 以匹配电子邮件输入。
实例
<form>
<label for="email">输入您的 email 邮箱:</label>
<input type="email" id="email" name="email">
</form>
亲自试一试 »
输入类型:File
<input type="file"> 定义文件选择和文件上传的 "Browse" 按钮。
实例
<form>
<label for="myfile">选择一个文件:</label>
<input type="file" id="myfile" name="myfile">
</form>
亲自试一试 »
输入类型:Month
<input type="month"> 允许用户选择月份和年份。
根据浏览器支持，日期选择器会出现输入字段中。
实例
<form>
<label for="bdaymonth">生日（年月）:</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
亲自试一试 »
输入类型:Number
<input type="number"> 定义数字输入字段。
您还可以对接受的数字设置限制。
以下示例显示一个数字输入字段，可以接受其中输入 1 到 5 之间的值:
实例
<form>
<label for="quantity">数量（1到5之间）:</label>
<input type="number" id="quantity" name="quantity"
min="1" max="5">
</form>
亲自试一试 »
输入限制
以下是一些常见输入限制的列表:
| 属性 | 描述 |
|---|---|
| checked | 指定在页面加载时应预先选择输入字段（对于 type="checkbox" 或 type="radio"） |
| disabled | 规定输入字段应该被禁用。 |
| max | 规定输入字段的最大值。 |
| maxlength | 规定输入字段的最大字符数。 |
| min | 规定输入字段的最小值。 |
| pattern | 规定通过其检查输入值的正则表达式。 |
| readonly | 规定输入字段为只读（无法修改）。 |
| required | 规定输入字段是必需的（必需填写）。 |
| size | 规定输入字段的宽度（以字符计）。 |
| step | 规定输入字段的合法数字间隔。 |
| value | 规定输入字段的默认值。/td> |
您将在下一章学到更多有关输入限制的知识。
下面的示例显示一个数字输入字段，您可以在其中以10为单位输入0到100之间的值。默认值为30:
实例
<form>
<label for="quantity">数量:</label>
<input
type="number" id="quantity" name="quantity" min="0" max="100" step="10"
value="30">
</form>
亲自试一试 »
输入类型:Range
<input type="range"> 用于应该包含一定范围内的值的输入字段。您能够使用如下属性来规定限制:min、max、step、value。
根据浏览器支持，输入字段能够显示为滑块控件。
实例
<form>
<label for="vol">音量（0 到 50 之间）:</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
亲自试一试 »
输入类型 Search
<input type="search"> 用于搜索字段（搜索字段的表现类似常规文本字段）。
实例
<form>
<label for="gsearch">搜索 Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
亲自试一试 »
输入类型 Tel
<input type="tel"> 用于应该包含电话号码的输入字段。
实例
<form>
<label for="phone">输入电话号码:</label>
<input type="tel" id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
亲自试一试 »
输入类型 Time
<input type="time"> 允许用户选择时间（无时区）。
根据浏览器支持，时间选择器会出现输入字段中。
输入类型 Url
<input type="url"> 用于应该包含 URL 地址的输入字段。
根据浏览器支持，在提交时能够自动验证 url 字段。
某些智能手机识别 url 类型，并向键盘添加 ".com" 以匹配 url 输入。
实例
<form>
<label for="homepage">添加您的网页:</label>
<input type="url" id="homepage" name="homepage">
</form>
亲自试一试 »
输入类型 Week
<input type="week"> 允许用户选择周和年。
根据浏览器支持，日期选择器会出现输入字段中。
实例
<form>
<label for="week">选择一个星期:</label>
<input type="week" id="week" name="week">
</form>
亲自试一试 »
HTML 实验
输入类型属性
| 标签 | 描述 |
|---|---|
| <input type=""> | 指定要显示的输入类型 |
