关于HTML5 data-*属性是否随POST请求提交的技术问询

嘿，你的假设完全正确！HTML5的data-*属性默认不会被包含在表单的POST请求中，下面我详细拆解你的问题：

表单提交的核心规则 #

浏览器默认只会收集表单中带有name属性的表单控件（比如<input>、<select>、<textarea>等）的value值，将其作为键值对发送到服务器。没有name属性的控件，哪怕它有value或者其他自定义属性，都不会被自动提交。

针对你给出的代码示例 #

看这段代码：

<input id="food" data-id="28" value="pizza">

首先，这个<input>没有name属性，所以连它的value="pizza"都不会被提交到服务器，更别说data-id="28"了——data-*属性从设计之初就是为客户端场景服务的：

• 可以通过JavaScript的element.dataset.id（或者getAttribute('data-id')）读取这个值，用于前端逻辑处理；
• 也可以通过CSS的属性选择器（比如input[data-id="28"]）来定位元素、设置样式。

如果想把data-*的值发送到服务器怎么办？ #

如果需要将data-id的内容传递给服务器，你可以用这几种方式：

• 给原<input>添加name属性，同时把data-id的值同步到value（不过这样会覆盖原来的value="pizza"，适合不需要保留原value的场景）；
• 添加一个隐藏的<input>控件，把data-id的值赋值给它的value，并给这个隐藏input设置name：

  <input id="food" data-id="28" value="pizza">
  <input type="hidden" name="food_id" value="28">
  

• 用JavaScript监听表单的提交事件，手动收集data-id的值，通过FormData对象添加到请求数据中，或者用AJAX发送请求时主动带上这个参数。

内容的提问来源于stack exchange，提问作者NAs