Text field 输入框
/TEKST FEELD/ · noun · 输入类模式 · #077
让人往里打字的框，配一个说明要填什么的标签。标签要一直看得见——一打字就消失的占位文字不算标签。
别名：文本框、文本输入框。
你可能会这样叫它
- “可以打字的框”
- “填写内容的框”
- “表单里的输入栏”
- “输入栏”
- “填邮箱的那个框”
- “带小眼睛的密码框”
……它的名字是 输入框（Text field）。
常见问题
输入框和文本框有什么区别？
在界面设计里两者基本是同一个东西：让用户输入文字的框。Apple 和 Google 的设计规范都叫 text field，Windows 习惯叫 text box（文本框）。不过在 Word、WPS 里，“文本框”指的是一块能拖动摆放的文字，不是输入框。
密码后面的小眼睛叫什么符号？
那是“显示密码”按钮，英文叫 show password toggle 或 password visibility toggle。点一下，密码框中的圆点变成明文，再点一次又藏起来，图标也在睁开的眼睛和带斜线的眼睛之间切换。Android 的 TextInputLayout 自带这个按钮，微软 Edge 也会给网页的密码框加一个；其他地方一般要自己做。
代码里叫什么
| SwiftUI | TextField SecureField |
|---|---|
| UIKit | UITextField UITextView |
| Jetpack Compose | TextField OutlinedTextField SecureTextField |
| Android (Views) | EditText TextInputLayout TextInputEditText app:endIconMode="password_toggle" |
| Flutter | TextField TextFormField |
| Web (HTML / ARIA) | <input type="text"> <label for> <textarea> <input type="password"> |
复制给 AI 编程工具
为这个值加一个输入框：框的上方放一个一直可见的标签（不能只靠占位文字），设置正确的输入类型和键盘（email、number、tel），能用的地方加上 autocomplete 属性。需要时在下方放帮助文字；在失去焦点时校验，而不是每敲一个字就校验。值有误时保留用户输入的内容、给框描边提示，并用 aria-describedby 关联一段说明如何修改的文字。输入框高度至少 44px。