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">名:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">姓:</label><br>
<input type="text" id="lname" name="lname">
</form>
自己动手试一试 »
以上 HTML 代码在浏览器中的显示效果如下
姓姓氏
输入类型密码
<input type="password"> 定义一个密码字段
示例
<form>
<label for="username">用户名:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">密码:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
自己动手试一试 »
以上 HTML 代码在浏览器中的显示效果如下
用户名密码
密码字段中的字符会被遮盖（显示为星号或圆点）。
输入类型提交
<input type="submit"> 定义一个用于将表单数据提交到表单处理程序的按钮。
表单处理程序通常是一个带有处理输入数据脚本的服务器页面。
表单处理程序在表单的 action 属性中指定
示例
<form action="/action_page.php">
<label for="fname">名:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">姓:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="提交">
</form>
自己动手试一试 »
以上 HTML 代码在浏览器中的显示效果如下
如果您省略提交按钮的 value 属性，该按钮将获得一个默认文本
示例
<form action="/action_page.php">
<label for="fname">名:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">姓:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit">
</form>
自己动手试一试 »
输入类型重置
<input type="reset"> 定义一个重置按钮，该按钮将所有表单值重置为默认值
示例
<form action="/action_page.php">
<label for="fname">名:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">姓:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
自己动手试一试 »
以上 HTML 代码在浏览器中的显示效果如下
如果您更改输入值，然后点击“重置”按钮，表单数据将被重置为默认值。
输入类型单选
<input type="radio"> 定义一个单选按钮。
单选按钮允许用户在有限数量的选项中仅选择一个
示例
<p>选择您最喜欢的 Web 语言:</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"> 我有一辆自行车</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 代码在浏览器中的显示效果如下
输入类型按钮
<input type="button"> 定义一个按钮
以上 HTML 代码在浏览器中的显示效果如下
输入类型颜色
<input type="color"> 用于应包含颜色的输入字段。
根据浏览器支持情况，输入字段中可能会出现一个颜色选择器。
示例
<form>
<label for="favcolor">选择您喜欢的颜色:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
自己动手试一试 »
输入类型日期
<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"> 用于应包含电子邮件地址的输入字段。
根据浏览器支持情况，提交时电子邮件地址可以自动验证。
某些智能手机会识别电子邮件类型，并在键盘上添加“.com”以匹配电子邮件输入。
示例
<form>
<label for="email">输入您的电子邮件:</label>
<input type="email" id="email" name="email">
</form>
自己动手试一试 »
输入类型 Image
<input type="image"> 定义一个图像作为提交按钮。
图像的路径在 src 属性中指定。
输入类型文件
<input type="file"> 定义一个文件选择字段和一个用于文件上传的“浏览”按钮。
示例
<form>
<label for="myfile">选择一个文件:</label>
<input type="file" id="myfile" name="myfile">
</form>
自己动手试一试 »
输入类型隐藏
<input type="hidden"> 定义一个隐藏的输入字段（用户不可见）。
隐藏字段允许网页开发者包含用户提交表单时无法看到或修改的数据。
隐藏字段通常存储提交表单时需要更新的数据库记录。
注意： 虽然值不会在页面内容中显示给用户，但使用任何浏览器的开发者工具或“查看源代码”功能都可以看到（并可以编辑）。不要将隐藏输入作为一种安全形式！
示例
<form>
<label for="fname">名:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="hidden" id="custId" name="custId" value="3487">
<input type="submit" value="提交">
</form>
自己动手试一试 »
输入类型月份
<input type="month"> 允许用户选择月份和年份。
根据浏览器支持情况，输入字段中可能会出现一个日期选择器。
示例
<form>
<label for="bdaymonth">生日 (月份和年份):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
自己动手试一试 »
输入类型数字
<input type="number"> 定义一个数字输入字段。
您还可以设置接受数字的限制。
以下示例显示一个数字输入字段，您可以在其中输入 1 到 5 之间的值
示例
<form>
<label for="quantity">数量 (1 到 5 之间):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
自己动手试一试 »
输入限制
以下是一些常见的输入限制列表
| Attribute | 描述 |
|---|---|
| checked | 指定页面加载时应预先选择输入字段（用于 type="checkbox" 或 type="radio"） |
| disabled | 指定应禁用输入字段 |
| max | 指定输入字段的最大值 |
| maxlength | 指定输入字段的最大字符数 |
| 分钟 | 指定输入字段的最小值 |
| pattern | 指定用于检查输入值的正则表达式 |
| readonly | 指定输入字段为只读（不能更改） |
| required | 指定输入字段为必填（必须填写） |
| 大小 | 指定输入字段的宽度（以字符为单位） |
| step | 指定输入字段的合法数字间隔 |
| value | 指定输入字段的默认值 |
您将在下一章中了解更多关于输入限制的信息。
以下示例显示一个数字输入字段，您可以在其中输入 0 到 100 之间的值，步长为 10。默认值为 30
示例
<form>
<label for="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">音量 (0 到 50 之间):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
自己动手试一试 »
输入类型搜索
<input type="search"> 用于搜索字段（搜索字段的行为与常规文本字段相同）。
示例
<form>
<label for="gsearch">搜索 Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
自己动手试一试 »
输入类型电话
<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>
自己动手试一试 »
输入类型时间
<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>
自己动手试一试 »
输入类型周
<input type="week"> 允许用户选择周和年份。
根据浏览器支持情况，输入字段中可能会出现一个日期选择器。
示例
<form>
<label for="week">选择一周:</label>
<input type="week" id="week" name="week">
</form>
自己动手试一试 »
HTML 输入类型属性
| 标签 | 描述 |
|---|---|
| <input type=""> | 指定要显示的输入类型 |
