Rails Datagrid生成text类型input含multiple属性的HTML合规问题

在热门Rails gem Datagrid中，配置整数范围过滤器会生成如下HTML代码：

<form class="datagrid-form artists_grid" id="new_artists_grid" action="/en/artists" accept-charset="UTF-8" method="get">
  <div class="datagrid-filter filter">
    <label for="artists_grid_birth_year">Year</label>
    <input class="birth_year integer_filter from" multiple="multiple" value="" type="text" name="artists_grid[birth_year][]">
    <span class="separator integer"> - </span>
    <input class="birth_year integer_filter to" multiple="multiple" value="" type="text" name="artists_grid[birth_year][]">
  </div>
</form>

W3C验证器提示**"此处不允许input元素使用multiple属性"**，根据W3C HTML Living Standard规范，multiple属性仅允许用于file和email类型的input。但Firefox和Chrome能按Datagrid预期处理，返回数组。针对这个场景，有以下技术疑问及解答：

1. 该错误仅针对HTML5吗？此前HTML规范是否允许text类型input使用multiple属性？ #

• 并非仅针对HTML5。在所有HTML规范（包括HTML4及更早版本）中，text类型的input都不允许使用multiple属性。multiple属性从诞生起就只限定用于特定表单控件，比如HTML4中的file输入，HTML5新增了email类型的支持，但从未扩展到text类型。

2. 多数主流浏览器是否会将<input type="text" multiple="multiple">识别为多字段并返回数组？若否，HTML表单中如何合法指定共用标签的文本字段对/列表？ #

• 多数主流浏览器（Chrome、Firefox、Safari等）会忽略text类型input上的multiple属性，但只要输入框的name属性带有[]后缀（比如artists_grid[birth_year][]），浏览器就会自动将多个同名输入值打包成数组提交。不过这属于浏览器兼容行为，并非规范强制要求。
• 合规实现方式：保留两个独立的text输入框，仅通过name属性的[]后缀实现数组提交，无需添加multiple属性，示例代码如下：

  <input type="text" name="artists_grid[birth_year][]">
  <input type="text" name="artists_grid[birth_year][]">
  

  这种写法既符合HTML规范，又能让后端正确接收数组格式的参数。

3. 如何让datagrid生成符合HTML5规范的代码？ #

• 临时修复（旧版本Datagrid）：自定义范围过滤器模板，移除multiple属性。在项目中创建局部模板app/views/datagrid/filters/range/_integer.html.erb，内容如下：

  <%= datagrid_label filter %>
  <%= datagrid_text_field filter, :from, class: "#{filter.param_name} integer_filter from" %>
  <span class="separator integer"> - </span>
  <%= datagrid_text_field filter, :to, class: "#{filter.param_name} integer_filter to" %>
  

• 彻底解决：升级Datagrid到2.0及以上版本（2024年11月发布），该版本已从根源修复范围过滤器的HTML合规问题，移除了不必要的multiple属性。

示例细节 #

上述违规HTML由以下Datagrid配置生成：

filter(:birth_year, :integer, range: true, header: 'Year')

输入1960和2010后，浏览器生成的GET参数（解码后）：

http://localhost:3000/en/artists?artists_grid[birth_year][]=1960&artists_grid[birth_year][]=2010&commit=Apply

可见浏览器能正确识别为共用标签的多输入字段，返回数组参数。

更新（2024年11月已彻底解决） #

Rails Datagrid gem已于2024年11月升级至2.0版本，从根本上解决了范围过滤器的W3C HTML合规问题，相关讨论见项目Issue #325。

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