表单与输入

表单与输入（HTML Forms & Inputs）

目录

• 表单基础
• 常用控件 <input>
• 标签与常用属性
• 原生校验要点
• 组合控件
• 文件上传与拖拽
• 可用性与自动完成
• 实战要点小结

表单基础：<form>

<form action="/submit" method="post" enctype="application/x-www-form-urlencoded">
  <!-- 各种表单控件 -->
</form>

• action：提交的目标 URL；可相对/绝对；留空则为当前页。
• method：get（查询、非敏感、URL 参数有长度限制）/ post（敏感或大量数据）。
• enctype（仅 post 有效）：application/x-www-form-urlencoded（默认）、multipart/form-data（文件上传）、text/plain（调试用）。
• novalidate：关闭整表单原生校验（用 JS 全权接管时可用）。

常用控件 <input>

文本类：text / password / email / url / tel / search
数值类：number（配合 min/max/step）/ range（滑块）
日期时间：date / time / datetime-local / month / week
文件/隐藏：file multiple（需 multipart/form-data）/ hidden
按钮：submit、reset、button（建议多用 <button>，可含图标/HTML）

日期类在部分旧浏览器可能回退为文本框，注意兼容策略。

标签与常用属性

• label 关联：for + id 或直接包裹输入，点击可聚焦，利于无障碍。
• placeholder：占位提示；value：默认值。
• readonly：只读，提交会包含；disabled：禁用，提交不包含。
• required：必填校验。

原生校验要点（Constraint Validation）

• pattern：正则匹配整串，如 pattern="^[a-zA-Z0-9_]{4,16}$"。
• min/max/step：数值/日期范围与步长。
• minlength/maxlength：字符长度限制（input/textarea 通用）。
• 伪类：:required、:optional、:valid、:invalid、:in-range、:out-of-range

  input:required:invalid { border-color: red; }
  input:required:valid   { border-color: green; }

组合控件

• 下拉：select / option / optgroup；multiple 多选，size 可见行数。
• 多行文本：textarea（多用 CSS 控制尺寸）。
• 联想：datalist 与 input[list] 搭配。
• 分组：fieldset + legend，提升语义与可访问性。

文件上传与拖拽

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="files" multiple accept=".jpg,.png,image/*">
  <button type="submit">上传</button>
</form>

• multiple：多选；accept：限制类型（MIME 或后缀）。
• 拖拽思路：设定拖拽区 → 监听 dragover/drop → 读取 dataTransfer.files → 用 FormData + fetch/XHR 上传。

可用性与自动完成

• 错误提示：可监听 invalid 事件，自定义消息与样式；将错误提示放在控件附近。
• autocomplete：可设在 form 或单个控件。常用值：on/off、email、username、current-password、new-password、tel、postal-code 等。合理开启可减轻重复输入、提升登录/注册体验。

实战要点小结

• 优先用语义化类型（如 email、url、date），获得原生校验与移动端键盘优化。
• label、fieldset、legend 改善无障碍与表单可理解性。
• 在原生校验基础上，用 JS 做统一提示与增强；必要时用 novalidate 关掉默认气泡。
• 文件/拖拽上传建议封装为组件，统一处理校验、预览与错误提示。