◆当サイトで人気のプログラミング教室のおすすめランキングはこちら!
プログラミングは独学では非効率で、時間を無駄にするリスクがあります。効率的なカリキュラムで学べるスクールを受講しましょう。

WEBCAMP【マンツーマンサポート】1ヶ月短期集中でプログラミングを学ぶスクール
1ヶ月通い放題・メンター常駐の教室環境でプログラミングを学びたい方!
TechAcademyオンラインで開講しているプログラミングスクール
オンラインでどこでも学べる!/教室に行くのが忙しい人でも安心!
Tech Camp教養としてのITスキルを学べるスクール
Webデザイン/AI(人工知能)/IOS/Androidアプリ制作/VRを学びたい方!
WEBCAMP PRO転職保証付き!エンジニアとして転職したい人におすすめ!
未経験からプロのエンジニアへ3ヶ月で転職する為のスクールです!
1月生募集中!当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のWebCamp Proコース。
11月生は満員となっております。12月生募集に向け、お早めの申込みをオススメします。
プログラミング未経験でもエンジニア転職を絶対成功させたい
スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください!

ラジオボタンとは入力フォームにある、丸い選択式のボタンのことです。いくつかの選択肢から答えがひとつしか選べないので、入力値を1つだけに限定したい場合に役立ちます。今回はこのラジオボタンの役割や、使い方などについてご紹介していきたいと思います。

・学習ステップを確認したい方は、【入門者向け】プログラミング初心者がHTMLを学ぶ6つのステップ」の記事を参考にしてください。

ラジオボタンとは?

ラジオボタンとは入力フォームに使われる選択式のボタンのことです。丸い形でクリックすると中の丸に色がつきます。複数の選択肢からひとつだけ選ぶことができるので、答えをひとつに絞ってもらいたいときに重宝するボタンです。

ラジオボタンはinputタグの属性のひとつで、type属性をradioにすることによってフォーム内に表示することができます。そのほかの属性でラジオボタンの選択肢のグループ名の設定や、クリックされたとき送信する値の設定などを行います。

・学習におすすめの本を探している方は、「【初心者向け】htmlの学習におすすめの本12選!」の記事を参考にしてください。

ラジオボタンの使い方

inputタグのtype属性をradioに設定

ラジオボタンをフォーム内に表示するには、inputタグを使います。inputタグのtype属性の値に、radioの文字列を設定することで、ラジオボタンを表示できます。
またinputタグだけでは選択肢の文字列を表示することができないので、inputタグの後に表示させたい選択肢の文字列を入力しておくようにしましょう。

<input type=”radio”>選択肢

ラジオボタンの名前を設定する

ラジオボタンは複数の選択肢からひとつの値を選んでもらう入力要素です。これだけの選択肢の中から選んだということを、データを送られたページやサーバサイドで判断することが必要なので、選択肢をグループ化して名前をつけることができます。

選択肢のinputタグのname属性すべてに同じ名前をつけることで、選択肢をグループ化することができます。別の選択肢のグループをつくるときはname属性を違う名前にする必要があるので注意が必要です。

<input type=”radio” name=”test1”>選択肢1
<input type=”radio” name=”test1”>選択肢2

・楽しみながら、プログラミング学習をしたいという人は【初心者入門】ゲーム感覚で遊びながらプログラミングを学習できるサイト4選!を参考にしてみてください。

ラジオボタンの値を設定する

クリックされたラジオボタンの値を取得するために、ラジオボタンの属性valueに値を設定します。ラジオボタンで選択された値はsubmitボタンを押すことで、遷移先のページやサーバサイドに送信されます。

この際class名とvalue名が同時に送信されるので、「class名のグループのラジオボタンはvalueが選択された」という情報を取得することができるのです。

<input type=”radio” name=”test1” value=”1”>選択肢1
<input type=”radio” name=”test1” value=”2”>選択肢2

ラジオボタンをあらかじめ選択状態にする

checked属性を使うとラジオボタンをあらかじめ選択することもできます。checkedはグループのラジオボタンの中でひとつだけ使うことができ、inputタグのなかにcheckedの文字列を設定したラジオボタンは最初から選択状態で表示されます。

どうしても値を空にしたくないときにcheckedを設定しておくと、選択されなかった場合に空白の文字列が値として送信されるのを防ぐことが可能です。

<input type=”radio” name=”test1” value=”1” checked>選択肢1
<input type=”radio” name=”test1” value=”2”>選択肢2

ラジオボタンを入力できなくする

ラジオボタンの選択肢を選択して欲しくないときに、disabledを設定するとラジオボタンが選択できなくなります。

例えばチェックボックスでチェックされたらラジオボタンを使用可能にしたいときなどにdisabled属性を使うことができるでしょう。

<input type=”radio” name=”test1” value=”1” disabled>選択肢1
<input type=”radio” name=”test1” value=”2” disabled>選択肢2

・HTMLのコーディングの概要をまとめてみたので、

HTMLのコーディングの仕方を解説を参考にしてみてください。

html5から追加された属性はこちら

form

submitボタンが押されたときに関連付けるformを指定することができます。ただし関連付けるformを設定するのはformタグ、formタグ以外でもsubmitボタンで行うことが多いので、ラジオボタンで設定するのは特殊なケースが多いでしょう。

autofocus

フォーカスを設定することができます。autofocusが設定されているinputタグは、最初から選択された状態で表示されます。

<input type=”radio” name=”test1” value=”1” autofocus>選択肢1
<input type=”radio” name=”test1” value=”2”>選択肢2

required

inputタグにrequiredを設定しておくと、ブラウザが空白チェックを行ってくれます。表示される警告文はブラウザによって微妙に異なりますが、いずれかのラジオボタンを選択していないとメッセージが表示されて別のページに遷移できません。

<input type=”radio” name=”test1” value=”1” required>選択肢1
<input type=”radio” name=”test1” value=”2”>選択肢2

・学習サイトでの練習を考えている方は、「【初心者向け】htmlの練習ができる学習サイト8選!」の記事を参考にしてください。

ラジオボタンのその他の特徴について

ラジオボタンのいずれの値も選択されずにsubmitボタンが押された場合、ラジオボタンの名称、値双方とも遷移先に送信されませんので注意が必要です。

またすべて未選択の状態のラジオボタンのどれかひとつを選択してしまうと、未選択の状態に戻せません。選択肢を選択しないケースも存在する場合は、ラジオボタンの使用よりもチェックボックスの使用の方が適しているかもしれません。

・プログラミングは8割はerrorとの戦いです。そんな時に役立つよくある間違いをまとめてみました。こちらのよくある間違いを紹介!【HTML初心者入門】を参考にしてみてください。

 

まとめ

いかがでしたか?ラジオボタンの役割や使い方についてご理解いただけましたか?

ラジオボタンはフォームの入力機能のひとつです。複数の選択肢の中からひとつだけ選択することができ、ひとつの値だけを取得したい場合に便利なボタンとなっています。

属性もいくつか指定することができ、サイトの作り方に合わせて多彩な使い方ができるツールのひとつです。いろいろと使い方を試して、便利な使い方をマスターしていってください。

1ヶ月でHTML・CSSができる!「WebCamp」とは?

WebCampは1ヶ月でプログラミング・Webデザインスキルを学ぶ通い放題のプログラミングスクールです。

参加する方の90%は未経験者です!

短期集中型のスクールなので、期間を決めて圧倒的に効率よくサイト制作スキルを身に着けたい方におすすめです!

わからないことを講師にすぐ質問できたり、通い放題で自分のスケジュールに合わせて来校することができるので、独学で学習するよりも早く確実にスキルが身につきます。

学習の疑問点やWebスキルのマスターの仕方がわかる無料説明会も開催しています。ぜひお気軽にお申込みください!

1月枠も残りわずか当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のWebCamp Proコース。
11月受入枠は満員となっております。12月枠に向け、お早めの申込みをオススメします。
プログラミング未経験でもエンジニア転職を絶対成功させたい
スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください!

▼未経験から1ヶ月でWebデザイン・プログラミングを学びたい方はこちら!

▼ついに開講!オンラインでWebデザインを学びたい方はこちら!

おすすめの記事