HTMLでラジオボタンとチェックボックスを表示する方法【初心者向け】

HTMLの初心者向けに、「ラジオボタン」と「チェックボックス」を表示する方法を解説した記事です。いずれも【input type】のタグを使って実装可能です。データの管理上便利な、name属性とvalue属性も紹介。業務でも役立つ知識です。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

HTMLについて今さら聞けない!という初心者のために、HTMLの基礎を紹介する記事です。

今回は、ラジオボタンとチェックボックスを表示する方法について、初心者の方にも分かりやすく2人のキャラクターを用いて解説しています。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのHTMLのカリキュラムをもとに執筆しています。

 

入力フォームの選択ボタン

入力フォームでよく見かける選択ボタンに、ラジオボタンとチェックボックスがあります。どちらも<input>タグにtype属性を指定することで簡単につくることができます。

<input>タグについては HTMLのinputタグとtextareaタグを使ってテキスト入力欄を表示する方法 をご覧ください。

radiobutton_checkbox

ラジオボタン、チェックボックスは以下のタグで表示することが可能です。

・ラジオボタン  <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">女性

 

これでどちらか一方を選択できるボタンができました。

radiobutton

 

上記の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つの選択ツールができました。

radiobutton2

このとき、name属性を”trigger”に書き換え忘れて”gender”のままにしておくと、”gender”と名付けられたすべての項目「男性、女性、facebook、twitter、はてなブックマーク、知人からの紹介」から、どれか一つの項目を選択することになってしまいます。

複数の選択群をつくる際には、必ずカテゴリーごとにしっかりとname属性を分けるように注意しましょう

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

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">その他

 

これで複数選択が可能なチェックボックスができました。小さな四角をクリックするとチェックが入ります。

checkbox

同じ要領で、スキルについてのチェックボックスを追加してみましょう。上記の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

 

今度は、スキルについてのチェックボックスが追加されました。

checkbox2

このとき、ラジオボックスのときと同じく”skill”のname属性を書き換えず”course”のままにしておくと、”word”も”excel”も”poweroint”もスキルについての値ではなく、”course”の項目として認識されてしまいます。

するとデータ上では受けてみたい”course”のなかに、”word”や”excel”が混ざってしまうことになります。このようなことを防ぐためにもname属性での名前付けは習慣化しておきましょう。

 

name属性とvalue属性はブラウザの表示には直接反映されることはありませんが、カテゴリーを区別したり、送信された値を受け手がデータとして管理する際にのちのち重要になってくるものです。しっかり覚えておきましょう。

HTMLを使ったフォームの実装方法を学びたい場合は、HTMLでドロップダウンメニューを表示する方法も合わせてご覧ください。

 

 

大石ゆかり

へぇ〜ラジオボタンとチェックボックスの違いって初めて知りましたっ!

田島悠介

実際に作る側に立たないと意識しなもんね!

大石ゆかり

とても勉強になりました。

 

今回はラジオボタンとチェックボックスを表示する方法についてご紹介しました。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。HTMLの基礎から学ぶことができます。