HTML标签/tag输入框实现方法
先直接说结论：原生的 和 本身并非为标签输入而设计。要实现“输入一段话，按下回车就变成一个独立、可点击删除的小标签”这种交互，JavaScript 是无法绕过的环节。要么自行编写一套逻辑，要么引入现成的库。 有意思的是，浏览器至今没有提供类似 type="tag" 的原生控件。因此，这项功能仍需要开
先直接说结论：原生的 和 本身并非为标签输入而设计。要实现“输入一段话，按下回车就变成一个独立、可点击删除的小标签”这种交互，JavaScript 是无法绕过的环节。要么自行编写一套逻辑，要么引入现成的库。
有意思的是，浏览器至今没有提供类似 type="tag" 的原生控件。因此，这项功能仍需要开发者自行实现。
原生输入框为什么搞不定标签输入
标签输入的核心逻辑非常清晰：用户输入文字 → 按下空格、回车或逗号 → 这段文字立即变成一个独立的、带删除按钮的“标签块”。但原生 只支持一个字符串值，无法管理多个独立的“值”。 虽然支持换行，但既不能在视觉上把每个标签分开，也无法提供点击即删单个标签的 UI。
这里面有几个难以回避的问题：
- 提交时怎么把标签传出去？
name属性只能绑定一个值，要么拼成逗号分隔的字符串，要么序列化成 JSON 数组。 - 键盘事件需要自行处理。按回车、逗号，或者退格键删除最后一个标签，这些默认行为都必须拦截，换成自己的逻辑。
- 每个标签都需要独立的 DOM 节点（例如
JavaScript），原生 input 内部无法直接内嵌 HTML。 - 焦点管理尤其棘手。光标需要始终停留在输入框末尾，但用退格键删除最后一个标签时，又需要把焦点自动拉回输入框。
手把手搭建一个最简标签输入框
抛开框架不谈，最朴素的方式是用一个隐藏的 逻辑上需要重点关注以下几个关键点： 不过，真正有帮助的反而是那些容易被忽略的语义化属性，例如 自己手写一个标签输入框，看起来似乎只有几行逻辑，一两个小时就能搞定。但现实往往并非如此： 这些边界情况会迅速拖垮开发节奏。因此，项目一旦需要上线，建议直接使用成熟方案： 需要特别提醒：无论选用哪种方案，hidden input 的 其实标签输入真正的难点从来不是“如何加上去”，而是“如何删得自然”“粘贴时不崩溃”“让读屏软件知道当前有几个标签”。在基础交互上重复造轮子，尤其是项目即将上线时，实在不是明智之举。 来存放最终要提交的数据，再搭配一个
keydown 事件，捕获 Enter、,、Space。一旦触发，提取当前输入内容，清空输入框，然后动态创建并插入一个新标签节点。data-value 属性，并绑定点击删除事件。点击后，不仅要移除该 DOM 节点，还要同步更新 hidden input 的 value。value 最好使用 JSON 字符串（例如 ["html","css"]），或者用逗号分隔，但需确保后台能正确解析。blur 事件。如果用户在输入框中输入了一半就失焦（例如点击其他地方），输入框里的内容应自动转成一个标签，否则用户会误以为输入丢失。别再指望
autocomplete 和 list 属性了 配合 只能提供下拉建议列表，既不能限制用户输入，也不能自动把选中的选项转为标签。如果需要“既可以从预设列表里选，又能自由输入”的标签输入框，唯一的方法是自己构建一个下拉面板（用 position: absolute），然后手动管理选中状态与标签列表的同步。
autocomplete 设为 off 对标签输入同样没用。浏览器无法记住“多个标签”这种组合结构。list 属性只影响单次输入的建议，与标签的创建流程毫无关系。aria-label（如 aria-label="添加技术标签"）和 role="textbox"，这些能让屏幕阅读器更好地理解控件的用途。生产环境就别自己造轮子了
react-tag-input，原生 JS 项目可用 Tagify（它也支持 Vue、React、Angular）。，都可以直接使用。name 必须与后端约定一致。如果后端期望接收一个数组，前端提交时应当用 JSON.stringify() 处理，或者让后端解析逗号分隔的字符串。