用 创建单行文本框，需设 name 属性以确保提交；多行用 ，内容写在标签内，支持换行；布尔属性如 required 存在即生效，移除需用 removeattribute。
怎么用 <input> 添加单行文本框
直接写 <input type="text"> 就行，这是最基础也最常用的文本输入方式。浏览器默认渲染为单行可编辑框，支持键盘输入、选中、复制粘贴。
常见错误是漏掉 type 属性——不写时浏览器按 type="text" 回退，但显式声明更可靠，尤其在旧版 IE 或严格模式下。
-
name属性必须设，否则表单提交时这个字段不会被发送（后端收不到） - 加
id和for配合<label></label>，能点标签聚焦输入框，对可访问性很关键 - 别依赖
value当占位提示——它会变成初始值；要用placeholder属性做灰色提示文字
为什么 <textarea></textarea> 不能用 type="text" 替代
<input type="text"> 只能输入单行，按 Enter 不换行，而是可能触发表单提交；<textarea></textarea> 是独立标签，天生支持多行、自动换行、滚动条和软回车。
典型误用：想让用户写地址或反馈，却用了 <input type="text">，结果用户输到一半发现没法换行，或者提交后所有内容挤成一行。
立即学习“前端免费学习笔记（深入）”；
-
<textarea></textarea>的内容写在开始和结束标签之间，不是靠value属性 - 用
rows和cols控制初始尺寸，但更推荐用 CSS 的height/width或resize属性控制行为 - 如果需要限制字数，
maxlength在<textarea></textarea>上有效，但注意它按字符计，中文、emoji 都算一个
required、disabled 这些布尔属性怎么写才生效
html 中这类属性只要存在就为真，不需要赋值。写成 required="true" 或 required="" 都可以，但最简写法是只写 required。
容易踩的坑是 js 动态操作时混淆：用 el.setAttribute('required', 'false') 并不会取消校验，因为只要属性存在，浏览器就认为“必填”。正确做法是 el.removeAttribute('required')。
-
disabled会让字段不参与表单提交，且不可聚焦、不可编辑；readonly则仍可提交、可聚焦，只是不能改——选场景比选样式更重要 -
autofocus页面加载后自动聚焦，但同一页面只能有一个生效，多个时以 HTML 中第一个为准 - 移动端上，
inputmode（如inputmode="numeric"）比type="number"更可控，后者在 ios 上可能弹出奇怪键盘或强制格式化
表单提交时，文本框内容没传过去？检查这三点
最常发生的不是代码写错，而是三个低级但隐蔽的问题：没设 name、父容器是 <form></form> 外的孤立元素、或者用了 display: none 却忘了 disabled 也能阻止提交（但语义不同）。
-
<input>必须在<form></form>内，或通过form="form-id"显式关联，否则 submit 事件不收集它的值 -
display: none的输入框仍会提交；想隐藏又不提交，得用disabled或移除 dom - 前后端约定的字段名大小写要一致——
name="userName"和后端期待的username对不上，数据就丢了
复杂点往往藏在关联逻辑里：比如用 JS 动态增删文本框，但忘了给新增的节点补 name，或者用 cloneNode(true) 复制时没重置 id 导致 label 绑定错位。