HTML5 Input类型完全指南
编程小白的HTML5输入类型知识大全 | 通俗易懂的解释和实用示例
什么是HTML5 Input类型？
HTML5为表单输入引入了多种新类型，让开发者可以创建更智能、更用户友好的表单。这些新输入类型提供了更好的输入控制和验证，同时可以在移动设备上触发更适合的虚拟键盘。
Text类型
最基本的文本输入框，用于输入单行文本。
<input type="text" placeholder="请输入姓名">
这是最常用的输入类型，当你不确定该使用什么类型时，默认使用text类型总是安全的。
Password类型
用于输入密码的字段，输入的内容会被遮挡显示。
<input type="password" placeholder="请输入密码">
密码字段只是在前端隐藏显示，实际传输时仍然需要HTTPS等安全措施来保护数据。
Email类型
专门用于输入电子邮件地址的字段，会自动验证邮箱格式。
<input type="email" required placeholder="邮箱地址">
不支持的浏览器会降级为普通文本输入框，所以放心使用！
Number类型
用于输入数字，通常会显示一个微调器控件（上下箭头）。
<input type="number" min="0" max="100" step="5">
可以使用 min, max 和 step 属性来限制数值范围和步长。
Date类型
用于选择日期（年月日），浏览器会提供日期选择器。
<input type="date" min="2020-01-01" max="2030-12-31">
Range类型
以滑块形式选择一个范围内的数值，适用于音量控制、价格范围选择等场景。
<input type="range" min="0" max="100" value="50">
滑块本身不显示当前值，通常需要配合JavaScript来显示选择的数值。
Color类型
提供颜色选择器，让用户可以选择颜色。
<input type="color" value="#ff0000">
如果不设置value属性，默认值为黑色(#000000)。
File类型
允许用户选择一个或多个文件上传到服务器。
<input type="file" accept=".jpg,.png" multiple>
accept 属性可以限制文件类型，multiple 属性允许选择多个文件。
Search类型
用于搜索字段，样式可能和普通文本框稍有不同（例如带清除按钮）。
<input type="search" placeholder="搜索关键词">
在移动设备上，搜索框可能会显示更适合搜索的键盘布局。
Tel类型
用于输入电话号码，在移动设备上会显示电话号码键盘。
<input type="tel" pattern="[0-9]{3}-[0-9]{4}">
可以结合 pattern 属性使用正则表达式验证电话号码格式。
URL类型
用于输入URL地址，会自动验证是否包含协议（如http://）。
<input type="url" placeholder="https://example.com">
浏览器验证要求输入的值包含协议，如http://或https://。
Hidden类型
隐藏字段，用户不可见，但值会随表单一起提交。
<input type="hidden" name="user_id" value="12345">
常用于存储用户ID、CSRF令牌等需要在表单提交时传递但不需要用户看到的数据。