HTMLでラジオボタンとチェックボックスを表示する方法【初心者向け】
HTMLの初心者向けに、「ラジオボタン」と「チェックボックス」を表示する方法を解説した記事です。いずれも【input type】のタグを使って実装可能です。データの管理上便利な、name属性とvalue属性も紹介。業務でも役立つ知識です。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。
今回は、ラジオボタンとチェックボックスを表示する方法について、初心者の方にも分かりやすく2人のキャラクターを用いて解説しています。
そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
ラジオボタンとチェックボックスを表示する方法について詳しく説明していくね！
お願いします！
入力フォームの選択ボタン
入力フォームでよく見かける選択ボタンに、ラジオボタンとチェックボックスがあります。どちらも<input>タグにtype属性を指定することで簡単につくることができます。
<input>タグについては HTMLのinputタグとtextareaタグを使ってテキスト入力欄を表示する方法 をご覧ください。
ラジオボタン、チェックボックスは以下のタグで表示することが可能です。
・ラジオボタン <input type=”radio”>
選択肢のなかから、ひとつだけを選択するボタン
（※同一name属性内で、一項目しか選択できない）
・チェックボックス <input type=”checkbox”>
選択肢のなかから、複数選択ができるボタン
（※同一name属性はひとまとまりのデータとして扱われる）
・value属性
選択項目をデータとして送信する際に、データの受けとり手に値を知らせます。
・name属性
要素（ここでは<input type=”●●”>）に名前をつけて、なんの要素（選択ボタン）であるかを指定します。
typeを使うと他にもいろいろ設定できるんですかー？
他にも送信ボタンであったり、文字を入力できるフォームも簡単に作れるんだよ！
へぇ〜じゃあアンケートページとかでよく使われてそうですね！
それでは具体的な実装方法をみていきましょう。
ラジオボタン
ラジオボタンという名前は、昔の自動車に搭載されていたカーラジオが、ひとつの局のボタンを押すと、他の局のボタンが選択できない仕様だったことから来ているそうです。
ラジオボタンは選択肢のなかから、ひとつだけを選択する入力ツールになります。
<input type=”radio”>にname属性を”gender”、valueを”male”と”female”に設定して性別選択ボタンをつくりましょう。タグの終わりには、実際にブラウザで表示される項目名(男性・女性)を書きます。選択肢の値(value)が”male”と”female”の、”gender”という名前(name)がついたラジオボタン（<input type=”radio”>）です。
<input type="radio" name="gender" value="male">男性 <input type="radio" name="gender" value="female">女性
これでどちらか一方を選択できるボタンができました。
上記のHTMLをコピー&ペーストして、もうひとつラジオボタンをつくってみましょう。ここでは、Webページの訪問者からサイトを知った経緯を知りたいと仮定して、選択肢の値(value)にサイトを知るきっかけとなった項目を設定し、”trigger”という名前のついたラジオボタンをつくります。
<input type="radio" name="trigger" value="facebook">facebook <input type="radio" name="trigger" value="twitter">twitter <input type="radio" name="trigger" value="hatebu">はてなマーク <input type="radio" name="trigger" value="syoukai">知人からの紹介
今度は、”gender”と”trigger”の2つの選択ツールができました。
このとき、name属性を”trigger”に書き換え忘れて”gender”のままにしておくと、”gender”と名付けられたすべての項目「男性、女性、facebook、twitter、はてなブックマーク、知人からの紹介」から、どれか一つの項目を選択することになってしまいます。
複数の選択群をつくる際には、必ずカテゴリーごとにしっかりとname属性を分けるように注意しましょう。
disabled属性
disabled属性は、フォーム部品を無効化することができます。
この属性で指定することで、フォーム部品の選択や書き換えを行うことができます。
用途の目的としては、同じフォーム流用するが、ユーザーの選択肢によってdisabeld属性を使用し一部の選択肢の書き換えを禁止する時に使用します。
disabled属性の実例
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"></head>
<body>
<!-- 性別選択 -->
<input type="radio" name="gender" value="male" disabled/>男性
<input type="radio" name="gender" value="male"/>女性
<br>
<br>
<!-- サイトを知ったきっかけ -->
<input type="radio" name="trigger" value="facebook">facebook
<input type="radio" name="trigger" value="twitter">twitter
<input type="radio" name="trigger" value="hatebu">はてなマーク
<input type="radio" name="trigger" value="syoukai">知人からの紹介
</body>
</html>
disabled属性の表示結果
disabledを見ただけでは何が違うのかわかりづらいかもしれません。
今回は、次の部分にdisabledを指定しました。
<input type=”radio” name=”gender” value=”male” disabled/>男性
このことで、男性のラジオボタンをチェックすることができなくなっています。
つまり、女性のみ選択する事ができる状態です。
checked属性
disabled属性を指定した際、女性のみ選択できるようになりました。
それならばいっその事、最初から女性を選択してあげるとユーザビリティが向上します。
ユーザビリティとは、画面を見ているユーザーの操作がよりわかりやすくなるという意味です。
ユーザビリティを向上させ、女性の選択肢を選択済みの状態で表示する方法としてchecked属性があります。
この属性で注意する点は、一つのグループで一つだけ選択できるという点です。
checked属性の実例
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"></head>
<body>
<!-- 性別選択 -->
<input type="radio" name="gender" value="male" />男性
<input type="radio" name="gender" value="male" checked/>女性
<br>
<br>
<!-- サイトを知ったきっかけ -->
<input type="radio" name="trigger" value="facebook">facebook
<input type="radio" name="trigger" value="twitter">twitter
<input type="radio" name="trigger" value="hatebu">はてなマーク
<input type="radio" name="trigger" value="syoukai">知人からの紹介
</body>
</html>
checked属性の表示結果
以上のように、disabled属性とchecked属性を使用することで、ラジオボタンの使用用途の幅を広げることができます。
このdisabeld属性とchedked属性以外にも、次のような属性が存在します。
form属性
formとの関連性を示す
autofocus属性
自動的に該当部分をフォーカスさせる。
required属性
入力必須項目に指定する
ラジオボタンの名前の由来っておもしろいですね〜♪
おもしろいよね！だから1つだけ選択させたい場合は、ラジオボタンが便利なんだよ。
なるほど〜！！
複数選択できるのはチェックボックスなんだけど、この次に説明していくね！
チェックボックス
続いて、複数選択が可能なチェックボックスです。
<input type=”checkbox”>にname属性を”course”、valueを各項目に設定して、これから学んでみたいものを選択するチェックボックスをつくりましょう。選択肢の値(value)が各項目名、名前(name)が”course”のチェックボックス（<input type=”checkbox”>）です。
<input type="checkbox" name="course" value="html">HTML <input type="checkbox" name="course" value="ruby">Ruby <input type="checkbox" name="course" value="php">PHP <input type="checkbox" name="course" value="seo">SEO <input type="checkbox" name="course" value="others">その他
これで複数選択が可能なチェックボックスができました。小さな四角をクリックするとチェックが入ります。
同じ要領で、スキルについてのチェックボックスを追加してみましょう。上記のHTMLをコピー&ペーストして、nameを”skill”に、valueを各スキルの項目に設定します。
<input type="checkbox" name="skill" value="word">Word <input type="checkbox" name="skill" value="excel">Excel <input type="checkbox" name="skill" value="powerpoint">PowerPoint
今度は、スキルについてのチェックボックスが追加されました。
このとき、ラジオボックスのときと同じく”skill”のname属性を書き換えず”course”のままにしておくと、”word”も”excel”も”poweroint”もスキルについての値ではなく、”course”の項目として認識されてしまいます。
するとデータ上では受けてみたい”course”のなかに、”word”や”excel”が混ざってしまうことになります。このようなことを防ぐためにもname属性での名前付けは習慣化しておきましょう。
name属性とvalue属性はブラウザの表示には直接反映されることはありませんが、カテゴリーを区別したり、送信された値を受け手がデータとして管理する際にのちのち重要になってくるものです。しっかり覚えておきましょう。
HTMLを使ったフォームの実装方法を学びたい場合は、HTMLでドロップダウンメニューを表示する方法も合わせてご覧ください。
へぇ〜ラジオボタンとチェックボックスの違いって初めて知りましたっ！
実際に作る側に立たないと意識しなもんね！
とても勉強になりました。
この記事を監修してくれた方
| 中本賢吾（なかもとけんご） アジマッチ有限会社 代表取締役社長 開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。 ボランティア活動：小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースする市クラブ講座活動を行っている。 |
HTMLを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
HTMLを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
