轻松上手,快乐学习!

HTML Input 类型


本章描述 <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 代码在浏览器中看上去是这样的:

First name:

Last name:


如果您省略了提交按钮的 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 代码在浏览器中看上去是这样的:

First name:

Last name:


如果更改输入值,然后单击 "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"> 定义按钮:

实例

<input type="button" onclick="alert('Hello World!')" value="点击我!">
亲自试一试 »

以上 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>
亲自试一试 »

使用 minmax 属性为日期添加限制:

实例

<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"> 允许用户选择时间(无时区)。

根据浏览器支持,时间选择器会出现输入字段中。

实例

<form>
  <label for="appt">选择时间:</label>
  <input type="time" id="appt" name="appt">
</form>
亲自试一试 »

输入类型 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 实验

学习训练

练习题:

在下表中,为文本添加一个名为 "username" 的输入字段。

<form action="/action_page.php">
<>
</form>

开始练习


输入类型属性

标签 描述
<input type=""> 指定要显示的输入类型