HTML 输入类型
本章介绍 HTML 的不同类型<input>元素。
HTML 输入类型
以下是您可以在 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"。
输入类型 文本
<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 代码在浏览器中的显示方式：
输入类型 密码
<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 代码在浏览器中的显示方式：
密码字段中的字符被屏蔽（显示为星号或圆圈）。
输入类型 提交
<input type="submit">定义一个按钮提交将数据形成为表单处理程序。
表单处理程序通常是带有用于处理输入数据的脚本的服务器页面。
表单处理程序在表单的action属性：
示例
<form action="/action_page.html">
<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.html">
<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>
亲自试一试 »
输入类型重置
<input type="reset">定义了一个复位按钮这会将所有表单值重置为其默认值：
示例
<form action="/action_page.html">
<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" value="Reset">
</form>
亲自试一试 »
这是上面的 HTML 代码在浏览器中的显示方式：
如果更改输入值然后单击"Reset" 按钮，表单数据将重置为默认值。
输入类型 收音机
<input type="radio">定义了一个单选按钮。
单选按钮允许用户仅选择有限数量的选项之一：
示例
<p>Choose your favorite Web language:</p>
<form>
<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>
</form>
亲自试一试 »
这是上面的 HTML 代码在浏览器中的显示方式：
输入类型复选框
<input type="checkbox">定义了一个复选框。
复选框允许用户从有限数量的选项中选择零个或多个选项。
示例
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
亲自试一试 »
这是上面的 HTML 代码在浏览器中的显示方式：
输入类型按钮
<input type="button">定义了一个按钮：
这是上面的 HTML 代码在浏览器中的显示方式：
输入类型 颜色
这个<input type="color">用于应包含颜色的输入字段。
根据浏览器支持，颜色选择器可以显示在输入字段中。
示例
<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
亲自试一试 »
输入类型 日期
这个<input type="date">用于应包含日期的输入字段。
根据浏览器支持，日期选择器可以显示在输入字段中。
示例
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>
亲自试一试 »
您还可以使用min和max对日期添加限制的属性：
示例
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>
亲自试一试 »
输入类型 日期时间-本地
这个<input type="datetime-local">指定日期和时间输入字段，不带时区。
根据浏览器支持，日期选择器可以显示在输入字段中。
示例
<form>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
亲自试一试 »
输入类型 电子邮件
这个<input type="email">用于应包含电子邮件地址的输入字段。
根据浏览器支持情况，电子邮件地址在提交时可以自动验证。
某些智能手机可识别电子邮件类型，并在键盘上添加 ".com" 以匹配电子邮件输入。
示例
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
亲自试一试 »
输入类型 图片
这个<input type="image">将图片定义为提交按钮。
图片的路径在src属性。
示例
<form>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
亲自试一试 »
输入类型文件
这个<input type="file">定义文件选择字段和用于文件上传的 "Browse" 按钮。
示例
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>
亲自试一试 »
输入类型隐藏
这个<input type="hidden">定义隐藏的输入字段（用户不可见）。
隐藏字段允许 Web 开发人员包含提交表单时用户无法看到或修改的数据。
隐藏字段通常存储提交表单时需要更新的数据库记录。
笔记：虽然该值不会在页面内容中向用户显示，但可以使用任何浏览器的开发人员工具或 "View Source" 功能查看（并且可以编辑）该值。不要使用隐藏输入作为安全形式！
示例
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="hidden" id="custId" name="custId" value="3487">
<input type="submit" value="Submit">
</form>
亲自试一试 »
输入类型 月份
这个<input type="month">允许用户选择月份和年份。
根据浏览器支持，日期选择器可以显示在输入字段中。
示例
<form>
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
亲自试一试 »
输入类型编号
这个<input type="number">定义了一个数字输入字段。
您还可以对接受的号码设置限制。
以下示例显示一个数字输入字段，您可以在其中输入 1 到 5 之间的值：
示例
<form>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
亲自试一试 »
输入限制
以下是一些常见输入限制的列表：
| Attribute | Description |
|---|---|
| checked | Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio") |
| disabled | Specifies that an input field should be disabled |
| max | Specifies the maximum value for an input field |
| maxlength | Specifies the maximum number of character for an input field |
| min | Specifies the minimum value for an input field |
| pattern | Specifies a regular expression to check the input value against |
| readonly | Specifies that an input field is read only (cannot be changed) |
| required | Specifies that an input field is required (must be filled out) |
| size | Specifies the width (in characters) of an input field |
| step | Specifies the legal number intervals for an input field |
| value | Specifies the default value for an input field |
您将在下一章中了解有关输入限制的更多信息。
以下示例显示一个数字输入字段，您可以在其中输入 0 到 100 之间的值，步长为 10。默认值为 30：
示例
<form>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>
亲自试一试 »
输入类型范围
这个<input type="range">定义一个用于输入数字的控件，其确切值并不重要（如滑块控件）。默认范围是 0 到 100。但是，您可以对接受的数字设置限制min,max， 和step属性：
示例
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
亲自试一试 »
输入类型搜索
这个<input type="search">用于搜索字段（搜索字段的行为类似于常规文本字段）。
示例
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
亲自试一试 »
输入类型 电话
这个<input type="tel">用于应包含电话号码的输入字段。
示例
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
亲自试一试 »
输入类型 时间
这个<input type="time">允许用户选择时间（无时区）。
根据浏览器支持，时间选择器可以显示在输入字段中。
示例
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>
亲自试一试 »
输入类型网址
这个<input type="url">用于应包含 URL 地址的输入字段。
根据浏览器支持情况，提交时可以自动验证 url 字段。
某些智能手机可识别 url 类型，并在键盘上添加 ".com" 以匹配 url 输入。
示例
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>
亲自试一试 »
输入类型周
这个<input type="week">允许用户选择一周和一年。
根据浏览器支持，日期选择器可以显示在输入字段中。
示例
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>
亲自试一试 »
HTML练习
HTML 输入类型属性
| Tag | Description |
|---|---|
| <input type=""> | Specifies the input type to display |