各浏览器对表单元素单选按钮组设置非 CDATA 标准的 name 属性值解析不同

标准参考

根据 W3C HTML4.01 规范中的描述，"name" 属性值必须以字母 ([A-Za-z]) 开头 ，其后由任何字母、数字 ([0-9])、连字符 ("-")、下划线 ("_")、冒号 (":") 和句号 (".") 组成。

更详细内容可以参考 HTML 4.01 规范 6.2 SGML basic types - ID and NAME tokens。

单选按钮多个单选按钮共享相同控件名称 (name)，如果这个 name 值是合法的，那么同值单选按钮将组成一组，它们是互斥的，只有一个单选按钮是选中状态，其余的所有具有相同控件名称的单选按钮是未选中状态。

关于单选按钮 (radio buttons) 的详细信息，请参考 HTML 4.01 规范 17.2.1 中的内容。

问题描述

单选按钮的 "name" 属性是用来为多个单选按钮分组的，"name" 属性值相同的按钮为同组，同组按钮中同一时刻仅可以有一个按钮呈现选中状态。

如果 "name" 属性内值不符合 CDATA 规范范围，则不同浏览器对此非法值采取的处理方式不同。

造成的影响

当给多个单选按钮设置 name="" 时：

• IE6 IE7 IE8 Chrome Safari 会认为多个单选按钮没有设置 "name" 属性。此时，IE6 IE7 IE8(Q) 的具体处理策略为，单选框不可被选中；而 IE8(S) Chrome Safari 的具体处理策略为，任意单选框均可被选中。
• Firefox Opera 会认为多个单选按钮有相同的 "name" 属性值——空字符串，单选按钮会被正常分组，选择状态良好。

受影响的浏览器

所有浏览器

问题分析

根据规范中对 name 属性的 CDATA 约定描述，我们构造以下六组实例，第一组为无 "name" 属性组，其余五组为非法 "name" 值代码：

<form>
  <input type="radio"/>无 NAME 组
  <input type="radio"/>无 NAME 组
  <input type="radio"/>无 NAME 组
  <input type="radio"/>无 NAME 组
</form>
<br />
<form>
  <input type="radio" name="" />空字符单选组
  <input type="radio" name="" />空字符单选组
  <input type="radio" name="" />空字符单选组
  <input type="radio" name="" />空字符单选组
</form>
<br />
<form>
  <input type="radio" name=":" />冒号字符单选组
  <input type="radio" name=":" />冒号字符单选组
  <input type="radio" name=":" />冒号字符单选组
  <input type="radio" name=":" />冒号字符单选组
</form>
<br />
<form>
  <input type="radio" name="." />点字符单选组
  <input type="radio" name="." />点字符单选组
  <input type="radio" name="." />点字符单选组
  <input type="radio" name="." />点字符单选组
</form>
<br />
<form>
  <input type="radio" name="-" />减号字符单选组
  <input type="radio" name="-" />减号字符单选组
  <input type="radio" name="-" />减号字符单选组
  <input type="radio" name="-" />减号字符单选组
</form>
<br />
<form>
  <input type="radio" name="囧" />中文字符单选组
  <input type="radio" name="囧" />中文字符单选组
  <input type="radio" name="囧" />中文字符单选组
  <input type="radio" name="囧" />中文字符单选组
</form>

上面代码在各浏览器中点击单选按钮结果汇总如下：

	IE6 IE7 IE8(Q)	IE8(S) Chrome Safari	Firefox Opera
无 NAME 组	无法选中任意一项	可以选中任意项
空字符单选组	无法选中任意一项	可以选中任意项	单选
冒号字符单选组	单选
点字符单选组	单选
减号字符单选组	单选
中文字符单选组	单选

各浏览器对 "name" 属性值解析如下：

	Chrome Safari	IE6 IE7 IE8 Firefox Opera
无 NAME 组	<input type="radio"/>
空字符单选组	<input type="radio" name />	<input type="radio" name="" />
冒号字符单选组	<input type="radio" name=":" />
点字符单选组	<input type="radio" name="." />
减号字符单选组	<input type="radio" name="-" />
中文字符单选组	<input type="radio" name="囧" />

根据以上两表可见：

• IE6 IE7 IE8(Q) 中，多个单选按钮没有设置 "name" 属性和属性值为空字符串时表现一致，这说明浏览器会将两种情况等同为无 "name" 属性¹处理，具体处理策略为没有设置 "name" 属性的单选按钮都不可点击。
• IE8(S) Chrome Safari 中，多个单选按钮没有设置 "name" 属性和属性值为空字符串时表现一致，这说明浏览器会将两种情况等同为无 "name" 属性¹处理，具体处理策略为没有设置 "name" 属性的单选按钮都可随意点击，不受分组限制。另外，从浏览器解析的源码可以看出，Chrome Safari解析后 "name" 属性的空字符串值已经被去掉，此时 "name" 属性语法已经并不符合规范约定，因而整个单选按钮等同无 "name" 属性设置情况。
• Firefox Opera中，多个单选按钮没有设置 "name" 属性时，浏览器具体处理策略为单选按钮都可随意点击，不受分组限制。但是，在多个单选按钮的 "name" 属性为空字符串是，浏览器会识别它是个有效值 "name" 值，并根据此值进行单选按钮分组。
• 对于其他非法 "name" 属性值，所有浏览器均可以正常识别，并执行单选分组，这部分的客户端具体实现与 HTML 4.01 规范相关描述不符。

【注】：HTML 4.01 规范中没有明确说明单选按钮无 "name" 属性时应如何处理，这由客户端负责具体实现。

解决方案

不要忘记书写单选按钮的 "name" 属性。

虽然各浏览器都很宽容的处理了非空字符串值 "name" 属性的情况，仅在 "name" 属性值为空字符串时存在处理差异，但还是建议正确书写代码 —— "name" 属性值必须以字母 ([A-Za-z]) 开头 ，其后由任何字母、数字 ([0-9])、连字符 ("-")、下划线 ("_")、冒号 (":") 和句号 (".") 组成。