illegalCreed

中文

English

中文

English

Appearance

参考 ​

基于 HTML Living Standard · 核于 2026-06

速查 ​

  • 表单容器：<form action method enctype target novalidate>；数据靠各控件的 name 提交
  • method：get（查询，拼 URL）/ post（敏感、有副作用、上传）/ dialog（关 <dialog>）
  • enctype：application/x-www-form-urlencoded（默认）/ multipart/form-data（文件上传）/ text/plain
  • input 22 种类型，type 决定 UI + 校验 + 移动端键盘；默认 text
  • 每控件必有 <label>（首选 for + id）；单选 / 复选组用 <fieldset> + <legend>
  • 约束：required / pattern / min / max / step / minlength / maxlength + type 校验
  • API：el.validity（ValidityState）/ checkValidity() / reportValidity() / setCustomValidity()
  • 样式优先 :user-invalid / :user-valid（交互后才生效），别用一上来就标红的 :invalid
  • 移动端：type → inputmode → autocomplete（区分 new-password / current-password）→ enterkeyhint
  • 红线：客户端校验仅为体验，服务器端必须再校验一次

<form> 属性速查 ​

属性用途
action提交到的 URL（省略=当前页）
methodget / post / dialog
enctype编码方式（仅 post 有意义）
target响应打开位置：_self / _blank / _top / _parent
name表单名（document.forms）
novalidate跳过约束校验
autocomplete全表单自动填充开关（on / off）
accept-charset提交字符编码（现代固定 UTF-8）

<input type> 速查 ​

type作用关键属性
text单行文本（默认）maxlength / pattern / list
search搜索框同 text
email邮箱（校验格式）multiple / required
url网址（校验格式）pattern
tel电话（不校验）pattern（自定义）
password密码（遮蔽）minlength / autocomplete
number数值（步进器）min / max / step
range滑块min / max / step
date time datetime-local month week日期时间min / max / step
color取色器value（#rrggbb）
file选文件accept / multiple / capture
checkbox复选（多选）checked / value
radio单选（同 name 互斥）checked / value
hidden不可见，仍提交value
submit reset button提交 / 重置 / 普通按钮value / form*
image图片提交按钮src / alt

通用 / 校验属性速查 ​

属性作用
name提交字段名（无则不提交）
value值 / 初始值
required必填 → valueMissing
pattern正则（匹配整值）→ patternMismatch
min / max范围 → rangeUnderflow / rangeOverflow
step步长 → stepMismatch
minlength / maxlength长度 → tooShort / tooLong
placeholder占位提示（不替代 label）
disabled禁用，灰显，不提交
readonly只读，仍提交
autofocus加载即聚焦（每页一个）
autocomplete自动填充字段名
inputmode虚拟键盘提示（不校验）
enterkeyhint回车键文案
list关联 <datalist> 的 id
multiple多值（email / file / select）
form用 id 关联到表单
formaction / formmethod / formenctype / formtarget / formnovalidate提交按钮覆盖 <form> 设置

校验状态伪类速查 ​

伪类匹配
:required / :optional有 / 无 required
:valid / :invalid满足 / 不满足约束（页面一加载即生效）
:user-valid / :user-invalid同上，但仅用户交互后生效（推荐）
:in-range / :out-of-range在 / 不在 min–max
:placeholder-shown正显示占位符
:read-only / :read-write只读 / 可写
:checked / :default选中 / 初始选中
:enabled / :disabled可用 / 禁用

Constraint Validation API 速查 ​

ValidityState（el.validity）的布尔属性：

属性含义
valueMissingrequired 为空
typeMismatch不符 type（邮箱 / URL）
patternMismatch不匹配 pattern
tooLong / tooShort超 maxlength / 不足 minlength
rangeOverflow / rangeUnderflow超 max / 低于 min
stepMismatch不符 step
badInput无法转换的输入
customError设过 setCustomValidity(非空)
valid全部通过

方法 / 属性：checkValidity()（静默）· reportValidity()（提示）· setCustomValidity(msg)（设 / 清错误）· validationMessage（提示文案）· willValidate（是否参与校验）· invalid 事件。

autocomplete 常用字段名速查 ​

类别token
姓名name / given-name / family-name / additional-name / nickname
账号username / new-password / current-password / one-time-code
联系email / tel / tel-country-code / tel-national / url / impp
地址street-address / address-line1～3 / address-level1（省/州）/ address-level2（市）/ postal-code / country / country-name
支付cc-name / cc-number / cc-exp / cc-exp-month / cc-exp-year / cc-csc / cc-type
前缀section-* / shipping / billing / home / work / mobile /（末尾）webauthn

inputmode / enterkeyhint 速查 ​

  • inputmode：text（默认）/ none / numeric / decimal / tel / email / url / search
  • enterkeyhint：enter / done / go / next / previous / search / send

现代特性 Baseline 状态（2026-06 核） ​

特性状态用法建议
内置约束校验（required / pattern / min / max…）✅ Baseline 广泛可用放心用
Constraint Validation API（setCustomValidity 等）✅ Baseline 广泛可用放心用
:user-valid / :user-invalid✅ Baseline（2023 起广泛）优先于 :invalid
autocomplete 字段名✅ 广泛可用放心用，填准 token
inputmode / enterkeyhint✅ 广泛可用放心用（仅移动端可见效果）
<datalist>✅ 广泛可用放心用（各类型支持度略有差异）
one-time-code 自动填充🟡 渐进增强iOS / Android 支持，桌面忽略
可定制 <select>（appearance: base-select）🟠 较新查 Baseline，渐进增强
<input type="checkbox" switch>🟠 实验性谨慎，需降级

权威链接 ​

标准 / 规范

课程 / 指南

兼容性 / 调试

相关页 ​