HTMLスキル - 第4章 Lesson8

<radio>タグでラジオボタンを作る方法

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

<radio>タグを使って、ラジオボタンを作る方法について解説します。



この動画で学べること

・ラジオボタンの作り方



ラジオボタンを作成する方法


ラジオボタンは、チェックボックスとは違い、1つしか選択できないのが特長です。
選択肢が少ないときによく使います。



では、作り方をみていきましょう。
<input>タグのtype属性を「radio」にします。
また、ラジオボタンを作成する場合にはname属性を追加してカテゴリを入力することが必要になります。
今回はこのカテゴリを「区分」としておきます。
そしてもう一つ、value属性も追加しましょう。
value属性を追加することで、選んだ選択をプログラムに伝えることができます。



<input  type="radio" name="区分" value="個人の方">
<input type="radio" name="区分" value="企業の方">



<label>タグでラベルをつけよう

最後に、ラベルの設定もしましょう。
ラベルを設定してid名をつけることによって、<input>タグとラベルを紐付けすることができます。
カテゴリを示す「区分」も<label>タグで囲んでおきましょう。



<label>区分</label>
<input id="personal" type="radio" name="区分" value="個人の方">
<label for="personal">個人の方</label>
<input id="corporation" type="radio" name="区分" value="企業の方">
<label for="corporation">企業の方</label>



ここまでできたら、保存してブラウザで見てみましょう。
選択肢が追加されました。