最直接方式是写，需显式声明type、必配name属性以确保表单提交，加id并与label关联提升可访问性，placeholder仅作提示不提交，value才是初始可提交值。
怎么用 <input> 标签创建基础文本输入框
最直接的方式就是写 <input type="text">，浏览器会渲染成单行可编辑框。它默认没有宽度限制，但实际显示受 CSS 控制；不加 name 属性的话，提交表单时这个字段不会被发送。
-
type="text"是显式声明，不写 type 时多数浏览器也按 text 处理，但建议写全，避免在某些上下文（如严格模式或旧 IE）中行为异常 - 必须加
name才能参与表单提交，比如<input name="username">，后端收到的键就是username - 加
id后可以配合<label for="xxx"></label>实现点击标签聚焦输入框，这是可访问性的基本要求 - 不要依赖
value做占位提示——那是placeholder的事；value是真实初始值，会参与提交
为什么 placeholder 不是“默认值”，而 value 是
placeholder 只是视觉提示，用户一输入就消失，且不会随表单提交；value 是字段的真实初始内容，如果设了 value="admin"，表单提交时就会带上 username=admin（假设 name 是 username）。
- 常见错误：把登录框的 placeholder 写成
placeholder="请输入用户名"，同时又误设value="请输入用户名"，结果表单一提交就发了无意义字符串 - 动态场景下，用 JavaScript 改
input.value会改变可提交内容；改input.placeholder只影响提示文字 - 若需“有默认内容但允许清空”，用
value；若只是引导输入格式（如 “yyyy-mm-dd”），用placeholder
如何让密码框和邮箱框按预期工作
用 type="password" 和 type="email" 不仅改变 UI（密码掩码、键盘类型），还会触发浏览器原生校验逻辑。
-
type="password"会隐藏字符，但不会加密传输——HTTPS 才管传输安全；它也不阻止右键“查看源码”看到 value 值 -
type="email"在部分移动端会调出 @ 符号优先的键盘，并在form.checkValidity()时做基础格式检查（比如必须含 @） - 别以为
type="email"能替代后端验证：它不查域名是否存在，也不防test@fake.这种无效地址 - 所有
type值都应与语义匹配，否则可能破坏屏幕阅读器识别或禁用自动填充（如用type="text"写密码框，浏览器就不会提供密码管理器填入）
遇到 input 不响应点击或无法输入，先查这三件事
不是代码写错，而是常被忽略的 DOM 状态或样式干扰。
- 父容器或自身有
pointer-events: none或user-select: none，会导致点击穿透或无法聚焦 - 写了
disabled或readonly却没意识到区别：disabled字段不提交、不聚焦、灰显；readonly可聚焦、可复制、会提交，只是不能编辑 - CSS 中设置了
width: 0、opacity: 0或visibility: hidden，看起来“没渲染出来”，其实元素还在，只是不可见不可交互
复杂点在于：这些限制可能来自框架注入的 class、重置 CSS、或者某层父级的 transform 缩放导致点击区域偏移——调试时先临时移除所有自定义样式，再逐个加回确认问题源头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
