value属性仅支持字符串，对象会转为"[object Object]"；应使用data-*属性存JSON或用ID映射对象，表单提交复杂数据需隐藏域+JSON.stringify或AJAX。
value 属性在 <button></button> 和 <option></option> 中不能直接传递复杂数据（如对象、数组），它只接受字符串。强行塞入对象会自动调用 .toString()，结果通常是 [object Object] —— 这不是你想要的。
button.value 只能是字符串，别试图塞对象
点击按钮时，button.value 仅用于显示按钮文本或作为表单提交时的字段值。它不参与 DOM 数据绑定逻辑，也不支持序列化嵌套结构。
-
<button value="{" width>Submit</button>→ 实际存入的是字面量字符串"{"width":100,"height":200}"，不是解析后的对象 - JavaScript 读取时：
btn.value返回字符串，需手动JSON.parse()，但前提是内容合法且未被 HTML 转义破坏 - 若按钮在表单中且
type="submit"，该value会作为键值对（如submit=xxx）发往服务端，后端收到的仍是原始字符串 - 更安全的做法是用
data-*属性存结构化数据：<button data-config='{"width":100,"height":200}'></button>，再用btn.dataset.config+JSON.parse()
option.value 不支持对象，但可用间接方式关联复杂项
<select></select> 的每个 <option></option> 的 value 属性必须是字符串，这是 HTML 规范强制要求。浏览器不会解析其中的 JSON，也不会保留引用关系。
- 错误写法：
<option value="{" width: height:>Size A</option>→ 模板引擎可能报错，或输出为value="[object Object]" - 正确思路：用简单唯一标识符（如 ID、索引、短编码）作
value，再在 JS 中查表映射到真实数据 - 例如：
<option value="size-1">Small</option>，配合一个const sizes = { "size-1": { w: 80, h: 60 } } - 如果用 React / Vue 等框架，
<select></select>本身不“持有”对象，而是靠状态管理驱动，value仍应为字符串（对应 state key），对象存在组件 state 里
表单提交时想传复杂结构？绕开 value，改用隐藏域或 JSON 字段
当需要把结构化数据随表单一起提交，又不想依赖 JavaScript 动态拼接请求体，有两个实用路径：
立即学习“前端免费学习笔记（深入）”；
- 用
<input type="hidden" name="config">，JS 在提交前设其value为JSON.stringify(obj)；后端接收后解析即可（注意 XSS 风险，需服务端校验） - 若用现代 Fetch / Axios，可完全跳过表单 submit 事件，收集所有字段后构造
FormData或 JSON body，此时value属性只是初始值参考，不决定最终 payload - ASP.NET Web Forms 中的
HtmlSelect.Value或HtmlTextArea.Value也仅返回字符串，复杂对象必须自行序列化进隐藏字段或通过 AJAX 提交
真正容易被忽略的是：HTML 原生表单机制从设计上就只处理扁平键值对。所谓“传递复杂数据”，本质是开发者在字符串与结构之间做编解码。别指望 value 自动帮你完成这一步 —— 它连类型检查都没有。
