HTML5的<input>元素通过type属性支持text、password、email、number、date等类型，分别实现文本输入、密码掩码、邮箱校验、数字限制和日期选择，并具备原生验证、软键盘适配及语义化功能。
HTML5 中的 <input> 元素通过设置 type 属性可创建多种功能控件，如文本输入、密码输入、邮箱、数字、日期等。不同 type 值会触发浏览器原生验证、软键盘适配及语义化提示。以下是常用 type 类型的具体用法：
一、type="text" —— 普通单行文本框
该类型用于接收纯文本输入，是 type 的默认值，无特殊校验，适用于姓名、标题等通用文本字段。
1、在 HTML 文件中插入 <input> 标签，并显式设置 type="text"。
2、添加 name 属性以确保表单提交时能被服务器识别，例如 name="username"。
立即学习“前端免费学习笔记（深入）”；
3、可选添加 placeholder 属性提供灰色提示文字，例如 placeholder="请输入用户名"。
4、使用 maxlength 限制最大字符数，例如 maxlength="20"。
二、type="password" —— 密码输入框
该类型将用户输入内容以掩码（圆点或星号）显示，防止旁观者窥视，但不加密传输，仅提供视觉保护。
1、设置 type="password"，浏览器自动启用字符隐藏机制。
2、必须配合 name 属性（如 name="pwd"），否则提交时该字段值不会被包含。
3、可添加 autocomplete="off" 禁用浏览器自动填充（部分浏览器可能忽略此属性）。
4、建议搭配 required 属性强制用户输入，避免空提交。
三、type="email" —— 邮箱格式验证输入框
该类型触发浏览器内置邮箱格式校验，提交前自动检查是否含 "@" 符号和域名结构，提升前端数据准确性。
1、设置 type="email"，例如 <input type="email" name="contact">。
2、添加 required 属性确保必填，防止用户跳过。
3、可使用 pattern 属性进一步限定规则，例如 pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"。
4、若需支持多个邮箱，添加 multiple 属性，允许用逗号分隔输入多个地址。
四、type="number" —— 数字输入框
该类型限制用户只能输入数字，同时提供上下微调按钮（spin buttons），并支持 min、max 和 step 属性控制取值范围与步长。
1、设置 type="number"，例如 <input type="number" name="age">。
2、指定最小值：添加 min="0"；最大值：添加 max="120"。
3、设定步长：添加 step="1" 表示每次增减整数，step="0.5" 支持半数。
4、设置初始值：使用 value 属性，例如 value="18"。
五、type="date" —— 日期选择器
该类型调用浏览器原生日期选择控件（日历弹窗），用户无需手动输入格式，避免格式错误和解析失败。
1、设置 type="date"，例如 <input type="date" name="birth_date">。
2、使用 min 和 max 限定可选日期范围，例如 min="1950-01-01" max="2025-12-31"。
3、设置默认日期：value 属性值必须为 YYYY-MM-DD 格式，例如 value="2000-01-01"。
4、注意：value 返回的是字符串而非 Date 对象，JavaScript 中需用 new Date() 解析。
