HTML input常用类型概览
文本输入（text）
在前端开发中，文本输入是最常用的 input 类型，用于接收单行字符。type="text"控制输入的基本类型，value属性表示初始值或正在编辑中的当前值，便于在提交表单前完成快速校验与数据处理的准备工作。
为了提升可用性和可访问性，可以结合
<input type="text" name="username" value="guest" maxlength="20" pattern="[A-Za-z0-9_]+" required />密码输入（password）
密码输入会将文本以圆点或圆圈形式显示，type="password"确保明文不可见，从而提升隐私保护水平。
在安全性方面，避免在页面初始值中放置敏感信息，若需要自动填充，请结合autocomplete属性与浏览器的密码管理策略进行控制。
<input type="password" name="pwd" value="" autocomplete="current-password" />数字输入（number）
数字输入专门用于接收数值，浏览器会对输入进行基本数值校验，用户也可以通过控件增减数字。
相关属性如min、max、step用于限制范围与步进；在移动设备上可结合inputmode设为“numeric”以提升数字键盘的可用性。
<input type="number" name="age" min="0" max="120" step="1" value="25" />邮箱与网址输入（email、url）
type="email"会对输入值进行基本的邮箱格式校验，帮助尽早捕获格式错误的地址；type="url"则对输入进行 URL 的基本格式检查。
在实际应用中，可以结合的required属性以及后端校验以确保数据完整性与安全性。
<input type="email" name="mail" value="user@example.com" />
<input type="url" name="site" value="https://example.com" />日期与时间输入（date、time、datetime-local）
日期与时间相关的输入提供本地化的控件，type="date"通常以“YYYY-MM-DD”格式显示，time为“HH:MM:SS”的形式，datetime-local在某些环境下显示为组合日期时间。
设置初始值时，遵循相应格式规范非常重要；当然，也可以让用户通过控件选择并最终通过value属性获取完整的时间信息。
<input type="date" name="birthday" value="1990-01-01" />
<input type="time" name="alarm" value="08:30" />
<input type="datetime-local" name="meeting" value="2025-08-23T10:00" />单选与复选框（radio、checkbox）
单选框通过同一组 name 属性实现互斥选择，value 决定提交到服务器的具体数据；复选框可单独选择，也可以组合成多选。
默认选中状态可以通过checked属性实现，value用于提交的实际值。对一组选项而言，提交值会以键值对形式出现并随表单一起发送。
<input type="radio" name="gender" value="male" checked />
<input type="radio" name="gender" value="female" />
<input type="checkbox" name="subscribe" value="1" checked />提交与隐藏字段（hidden、submit）
隐藏字段用于在页面上不可见的情况下携带数据，例如 CSRF token、版本号等；type="hidden"的值会在表单提交时随之发送。
提交按钮（submit）触发行为提交操作的按钮，通常配合表单控件实现完整的数据提交流程。
<input type="hidden" name="token" value="abc123" />
<input type="submit" value="提交" />value属性使用方法与注意事项
value属性的基本用法
value属性用于设定控件的当前值，是表单提交时实际发送的数据来源；HTML 中的初始值通常直接写在 value 属性内，便于后端接收与前端校验。
在表单提交时，浏览器会将每个控件的 name 与 value 一起发送，只有被激活的控件才会包含在提交结果中，因此合理设置 required 与初始 value 能提升数据完整性。
<input type="text" name="city" value="Shanghai" />默认值与占位符的区别
value代表控件的实际值，会随提交一起发送；而 placeholder只是一个提示文本，在输入框为空时显示，提交时不会把 placeholder 作为数据发送，因此两者用途不同。
为了避免混淆，通常在需要提交默认值时使用 value，在需要给用户输入提示时使用 placeholder，并结合 required、pattern等实现前端约束。
<input type="email" name="contact" placeholder="name@example.com" />动态更新与框架配合
通过脚本或框架控制 value 可以实现动态填充、表单预填充等场景；需要注意的是，直接修改 DOM 的 input.value 会影响当前控件的显示值以及随后的提交数据。
下面示例展示通过脚本设置值的基本方式，同时保留了 HTML 初始值的可控性：注意，在某些场景中，框架会绑定数据，采用框架绑定方式会更稳健。
document.getElementById('city').value = 'Beijing';<input type="text" id="city" name="city" value="" />