Form Field 表单字段（Form Field） web
Every part of a labeled input — label, placeholder, helper text, and the red error line
带标签输入框的每个部分 —— 标签、占位文本、辅助文本和那行红色错误信息
We’ll only use this to sign you in.
Please enter a valid email address.
标本可交互 —— 点点看。Specimen is live — try it.
Anatomy — every part, named解剖 —— 每个部件的名字
-
1 Label标签（Label）
<label for="…">“The word above the box” is the label — a real <label> tied to the input by for/id, so clicking it focuses the field.
“框上面的那个词”就是标签 —— 一个真正的 <label>，通过 for/id 绑到输入框，点击它会聚焦字段。
Prompt fragmentPrompt 片段a real <label for> element above the input, tied to it by for/id
输入框上方真正的 <label for> 元素，通过 for/id 绑定
-
2 Required indicator必填标记（Required indicator）
required“The little red star” marks a required field — the asterisk is decoration; the input itself carries the required attribute.
“小红星”标记必填字段 —— 星号只是装饰；真正起作用的是输入框上的 required 属性。
Prompt fragmentPrompt 片段the required-field asterisk beside the label, backed by the required attribute on the input
标签旁的必填星号，由输入框上的 required 属性支撑
-
3 Placeholder占位文本（Placeholder）
::placeholder“The gray text inside the box that disappears when you type” is the placeholder — an example or hint, never a substitute for the label.
“框里一打字就消失的灰字”就是占位文本 —— 一个示例或提示，永远代替不了标签。
Prompt fragmentPrompt 片段the placeholder hint inside the input (placeholder attribute, styled via ::placeholder), used as a hint only
输入框内的占位提示（placeholder 属性，用 ::placeholder 设置样式），仅作提示
-
4 Helper text辅助文本（Helper text）
aria-describedby“The small gray line under the field” is helper text — link it to the input with aria-describedby so screen readers announce it.
“字段下面的灰色小字”就是辅助文本 —— 用 aria-describedby 关联到输入框，屏幕阅读器才会念出来。
Prompt fragmentPrompt 片段the helper/hint text below the input, linked with aria-describedby
输入框下方的辅助/提示文本，用 aria-describedby 关联
-
5 Error message错误信息（Error message）
aria-invalid="true"“The red text under the box” is the validation message — pair the red border (aria-invalid, :user-invalid) with a message the field references.
“框下面的红字”就是校验信息 —— 红色边框（aria-invalid、:user-invalid）要配一条字段能引用的信息。
Prompt fragmentPrompt 片段the inline validation error below the field: aria-invalid="true" on the input, red border, and an error message linked via aria-describedby
字段下方的内联校验错误：输入框设 aria-invalid="true"、红色边框，错误信息用 aria-describedby 关联
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
Build the form field with full anatomy: a real <label for> above the input (clicking it focuses the field), placeholder text as a hint only — never as the label, helper text below linked via aria-describedby, and required marked with the required attribute plus a visual asterisk. On invalid input set aria-invalid="true", style the red state with :user-invalid, and point aria-describedby at the error message.
构建完整结构的表单字段：输入框上方放真正的 <label for>（点击它聚焦字段），placeholder 只作提示 —— 绝不当标签用，下方辅助文本用 aria-describedby 关联，必填用 required 属性加视觉星号标出。输入无效时设 aria-invalid="true"，用 :user-invalid 画红色状态，并把 aria-describedby 指向错误信息。
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
Debug my form field (label for/id, aria-describedby, placeholder). Rule out: the placeholder doing the label's job and vanishing on first keystroke; the label not associated so clicking it does not focus the input; error text not linked via aria-describedby so screen readers never hear it; autofill's yellow/blue fill overriding your styles (-webkit-autofill). The symptom:
调试我的表单字段（label for/id、aria-describedby、placeholder）。逐项排除：placeholder 干了标签的活，敲第一个键就消失；label 没关联，点击不能聚焦输入框；错误文本没通过 aria-describedby 关联，屏幕阅读器永远读不到；自动填充的黄/蓝底色覆盖你的样式（-webkit-autofill）。症状是：
In code代码里叫什么
| Framework框架 | Symbol符号 | Note说明 |
|---|---|---|
| HTML | <label for> | |
| CSS | ::placeholder | |
| ARIA | aria-describedby | links helper/error text to the input把辅助/错误文本关联到输入框 |
| ARIA | aria-invalid | |
| CSS | :user-invalid | invalid only after interaction只在交互之后才判定无效 |
| HTML | required |