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つだけ選択させたい場合は、ラジオボタンが便利なんだよ。
なるほど〜！！
複数選択できるのはチェックボックスなんだけど、この次に説明していくね！
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
チェックボックス
続いて、複数選択が可能なチェックボックスです。
<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デザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
