打印

HF9009: 各浏览器对表单元素单选按钮组设置非 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" 属性1处理,具体处理策略为没有设置 "name" 属性的单选按钮都不可点击。
  • IE8(S) Chrome Safari 中,多个单选按钮没有设置 "name" 属性和属性值为空字符串时表现一致,这说明浏览器会将两种情况等同为无 "name" 属性1处理,具体处理策略为没有设置 "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])、连字符 ("-")、下划线 ("_")、冒号 (":") 和句号 (".") 组成。

参见

知识库

相关问题

测试环境

操作系统版本: Windows 7 Ultimate build 7600
浏览器版本: IE6
IE7
IE8
Firefox 3.6.9
Chrome 7.0.517.8 dev
Safari 5.0.2
Opera 10.62
测试页面: radiobuttons.html
本文更新时间: 2010-09-17

关键字

radio name CDATA