selectよりradio

みんな、selectよりradio使おうよ！

<select><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select>

より

<label for="select-1"><input type="radio" id="select-1">1</label>
<label for="select-2"><input type="radio" id="select-2">2</label>
<label for="select-3"><input type="radio" id="select-3">3</label>
<label for="select-4"><input type="radio" id="select-4">4</label>
<label for="select-5"><input type="radio" id="select-5">5</label>

の方が絶対使いやすいから（ label は必須）

  • selectだと
    1. selectボックスまでマウスを移動
    2. クリック
    3. 目的の選択肢を目で探す
    4. 無ければスクロールして探す（！）
    5. マウスを目的の選択肢まで移動
    6. クリック
  • radioだと
    1. 目的の選択肢を目で探す
    2. 目的の選択肢まで移動
    3. クリック