HTML Form 里 radio list 的用户体验细节

HTML Form 里 radio list 的用户体验细节相当赞:

  • 可支持方向键
  • 当 radio 最后一个选中时,按小键盘后会自动跳回第一个
  • checked 可自动触发 onclick
  • 支持各种浏览器, cross-browser

用这个特性,可以做一个无障碍的 TabView :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Rank's HTML document</title>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 <meta http-equiv="Creator.name" content="Rank">
 <style type="text/css" title="default" media="screen">
 /*<![CDATA[*/
    body { font:13px/1.5 arial; }
 /*]]>*/
 </style>
 </head>
 <body>
    <h1>radio list 的妙用</h1>

    <ol>
      <li>可支持方向键</li>
      <li>当 radio 最后一个选中时,按小键盘后会自动跳回第一个</li>
      <li>checked 可自动触发 onclick</li>
      <li>支持各种浏览器,cross-browser</li>
    </ol>

    <h2>demo</h2>

    <p id="wrap">
    <input name="radio_n" type="radio"><input name="radio_n" type="radio"><input name="radio_n" type="radio"><span id="ad"></span>
    </p>

    <script type="text/javascript">//<![CDATA[
    document.getElementById('wrap').onclick = function () {
      document.getElementById('ad').innerHTML = ('never-online \'s weblog') + Math.random();
    }
    //]]></script>
 </body>
</html>

-- EOF --

Comments