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>选择您最喜欢的网页语言：</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>
自己试一试 »
输入类型日期时间（本地）
<input type="datetime-local"> 指定一个日期和时间输入字段，没有时区。
根据浏览器支持，日期选择器可能会显示在输入字段中。
示例
<form>
<label for="birthdaytime">生日（日期和时间）：</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
自己试一试 »
输入类型电子邮件
<input type="email"> 用于应包含电子邮件地址的输入字段。
根据浏览器支持，电子邮件地址在提交时可能会自动验证。
一些智能手机会识别电子邮件类型，并在键盘上添加 ".com" 以匹配电子邮件输入。
示例
<form>
<label for="email">输入您的电子邮件：</label>
<input type="email" id="email" name="email">
</form>
自己试一试 »
输入类型图片
<input type="image"> 将图片定义为提交按钮。
图片的路径在 src 属性中指定。
输入类型文件
The <input type="file"> 定义了一个文件选择字段和一个用于文件上传的“浏览”按钮。
示例
<form>
<label for="myfile">选择一个文件:</label>
<input type="file" id="myfile" name="myfile">
</form>
自己试一试 »
输入类型隐藏
The <input type="hidden"> 定义了一个隐藏的输入字段（对用户不可见）。
隐藏字段允许 Web 开发人员包含用户在提交表单时无法看到或修改的数据。
隐藏字段通常存储表单提交时需要更新的数据库记录。
注意: 虽然值不会显示在页面内容中，但可以使用任何浏览器的开发者工具或“查看源代码”功能来查看（并可以编辑）。不要使用隐藏输入作为安全措施！
示例
<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>
自己试一试 »
输入类型月份
The <input type="month"> 允许用户选择月份和年份。
根据浏览器支持，日期选择器可能会显示在输入字段中。
示例
<form>
<label for="bdaymonth">生日（月和年）:</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
自己试一试 »
输入类型数字
The <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 | 指定输入字段的默认值 |
您将在下一章中学习更多关于输入限制的信息。
以下示例显示了一个数值输入字段，您可以在其中输入 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>
自己试一试 »
输入类型范围
The <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>
自己试一试 »
输入类型搜索
The <input type="search"> 用于搜索字段（搜索字段的行为类似于普通文本字段）。
示例
<form>
<label for="gsearch">搜索 Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
自己试一试 »
输入类型电话
The <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>
自己试一试 »
输入类型时间
The <input type="time"> 允许用户选择时间（没有时区）。
根据浏览器支持情况，时间选择器可能会显示在输入字段中。
示例
<form>
<label for="appt">选择一个时间:</label>
<input type="time" id="appt" name="appt">
</form>
自己试一试 »
输入类型 URL
The <input type="url"> 用于应该包含 URL 地址的输入字段。
根据浏览器支持情况，url 字段在提交时可以自动验证。
一些智能手机识别 url 类型，并在键盘上添加“.com”以匹配 url 输入。
示例
<form>
<label for="homepage">添加您的主页:</label>
<input type="url" id="homepage" name="homepage">
</form>
自己试一试 »
输入类型星期
The <input type="week"> 允许用户选择一周和年份。
根据浏览器支持，日期选择器可能会显示在输入字段中。
HTML 输入类型属性
| 标签 | 描述 |
|---|---|
| <input type=""> | 指定要显示的输入类型 |
