一个 input 的 22 种身份：type state 与值净化

<input> 是平台里最名实不符的一个元素：同一个标签，靠 type 属性切出 22 种 type state——从单行文本到日期选择器、颜色选择器、滑块、文件上传、单选复选，再到提交按钮，行为各异。规范用四件事把这 22 种身份区分开：value 属性如何被解读（四类 value 模式）、读取 value 时跑哪种 value sanitization algorithm、哪些 content attribute 对它生效、以及暴露哪些 IDL(valueAsNumber / valueAsDate / stepUp())。本页用一个 live <input> 当场切换 type，把净化与模式差异打出来。校验细节见 约束校验，提交时各 type 如何进 entry list 见 提交与编码。

1 · type 是 enumerated attribute：非法 / 缺失都回落 text

type 是一个 enumerated attribute：只有 22 个已知关键字有效；写了规范不认的值（如 type="datetimepicker"）、或干脆不写 type，它的 missing value default 与 invalid value default 都是 Text。这意味着 el.type 这个 IDL 读出来永远是规范化后的合法关键字——写非法值进去，读出来就是 "text"。

2 · 四类 value 模式：value 属性到底意味着什么

规范（4.10.5.5 起）把 22 个 type 归进四种 value 模式，核心区别是 IDL .value 反映什么、value content attribute 起什么作用：

value 模式——.value 即当前用户值，value attr 仅作默认值（dirty 前）：

default/on 模式——关键是 checkedness，value attr 默认 "on"：

filename 模式——.value 只读出占位路径，脚本只能置空：

default 模式——value attr 只是按钮文案，无用户值：

3 · type 与净化在 IDL 上的对应

<!-- type 是 enumerated attribute：非法 / 缺失都回落 text -->
<input type="datetimepicker">   <!-- el.type === "text" -->
<input>                         <!-- el.type === "text"（缺失默认） -->

<!-- value sanitization：设进去脏值，读出来已净化 -->
const n = document.createElement('input');
n.type = 'number';
n.value = '12abc';   n.value;          // ""（非 valid float，抹空）
n.value = '3.14';    n.valueAsNumber;  // 3.14
n.stepUp();          n.value;          // 受 step / min / max 约束

const c = document.createElement('input');
c.type = 'color';    c.value = 'red';  c.value;  // "#ff0000"（可解析的 CSS 颜色 → 十六进制）

const e = document.createElement('input');
e.type = 'email';    e.multiple = true;
e.value = ' a@x.com , b@y.com ';       // 各段去首尾空白

<!-- 四类 value 模式的 .value 含义不同 -->
checkbox.checked      // default/on：收的是 checkedness，不是文本
file.value            // filename："C:\\fakepath\\photo.png"（藏真实路径）
file.files            // FileList —— 真正拿文件的入口
submit.value          // default：只是按钮上的文字