ラジオボタンあれこれ備忘録【HTML】

スポンサーリンク

ラジオボタンのあれこれをいつも忘れてしまうので、自分用メモとしてブログに残しました。

ラジオボタンのテキスト部もクリック可能にする

ラジオボタンのボタン部分しかクリックできないサイトって、イケてないですよね。
テキスト部分もクリックできるようにしろよ!って思います。

ボタン部分しかクリックできない書き方

    <form>
        <input type="radio" id="choice1"  >選択肢1
        <input type="radio" id="choice2"  >選択肢2
        <input type="radio" id="choice3"  >選択肢3
    </form>


見た目はこんな感じ↓↓

f:id:tkhstol-929:20181124231852p:plain


画像では伝わりませんが、この書き方ではラジオボタンのボタン部分(青いところ)しかクリックが効きません。 「選択肢1」のテキスト部もクリック可能にしたい!


テキスト部もクリックできる書き方

やり方は2つあります。
まずひとつめ↓↓

    <form>
      <label>
        <input type="radio" id="choice1"  >選択肢1
      </label>
      <label>
        <input type="radio" id="choice2"  >選択肢2
      </label>
      <label>
        <input type="radio" id="choice3"  >選択肢3
      </label>
    </form>

<label><input>を囲みましょう。

2つ目のやりかたはこちら↓↓

<form>
        <input type="radio" id="choice1">
        <label for="choice1">
          選択肢1
        </label>

        <input type="radio" id="choice2">
        <label for="choice2">
          選択肢2
        </label>

        <input type="radio" id="choice3">
        <label for="choice3">
          選択肢3
        </label>
      </form>

<label>選択肢1 選択肢2 選択肢3 をそれぞれ囲みます。
labelタグのforと、inputタグのidを揃えないといけない点に注意する。また、選択肢ごとにlabelを用意しないといけません。

注意点として、1つ目のやりかたはIE5,6では対応していません。まあ今時そんな激古IEを使っている人はかなり少数だと思いますが、一応気に留めておいたほうがいいです。


ラジオボタンの複数選択を許可しないようにする

f:id:tkhstol-929:20181124231852p:plain


↑の画像みたいに複数選択をさせたくない場合はどうするか。
答はこうです。

    <form>
      <label for="choice1">
        <input type="radio" id="choice1" name="testForm" >選択肢1
      </label>
      <label for="choice2">
        <input type="radio" id="choice2" name="testForm" >選択肢2
      </label>
      <label for="choice3">
        <input type="radio" id="choice3" name="testForm" >選択肢3
      </label>
    </form>


inputタグにname属性をつけて、3つとも同じ値に設定すればOK
動作をGIFで確認してみましょう。
f:id:tkhstol-929:20181124233532g:plain



また、ソースを以下のように応用するとおもしろいことができます。

    <form>
      <label for="choice1">
        <input type="radio" id="choice1" name="testForm" >選択肢1
      </label>
      <label for="choice2">
        <input type="radio" id="choice2" name="sampleForm" >選択肢2
      </label>
      <label for="choice3">
        <input type="radio" id="choice3" name="sampleForm" >選択肢3
      </label>
    </form>


選択肢1のname属性を"testForm"にし、選択肢2,3を"sampleForm"とすると、「1と2」「1と3」は複数選択できるが「2と3」はできないようにすることができます。

つまり、同じname属性同士は複数選択が許されないが違うname属性は複数選択できる、ということです。

f:id:tkhstol-929:20181124233912g:plain

にほんブログ村 IT技術ブログへ
にほんブログ村