HTMLでinputタグのradio属性値を使ってラジオボタンを作る方法を現役デザイナーが解説【初心者向け】
初心者向けにHTMLでinputタグのradio属性値を使ってラジオボタンを作る方法について解説しています。ラジオボタンは選択肢内からひとつの要素だけを選択できるものです。radio属性の基本の使い方をソースコードと実際の画面で確認しましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
ここでは、お問い合わせフォームなどでよく利用されるラジオボタンについて解説していきます。
仮に、HTMLの記述方法がわからない場合には、 HTMLの書き方 の記事を読むとさらに理解が深まるでしょう。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
inputタグのradio属性値を使ってラジオボタンを作る方法について詳しく説明していくね！
お願いします！
ラジオボタンとは
ラジオボタンとは、<form>の中で使用する、複数の選択肢から1つを選択するボタンです。例えば、HTMLの<input>タグのtype属性を使用して以下のように書きます。
HTML:
<input type="radio">
inputのtype属性の値によってラジオボタンの他に、チェックボックス、入力エリアなどを作成することが可能です。
HTMLのinputタグとtextareaタグを使ってテキスト入力欄を表示する方法を参考にしてみると良いでしょう。
ラジオボタンは単体で使用することはありません。通常は下記画像のように、<form>の中でラジオボタンと送信ボタン、さらに名前などを入力するエリアとセットで使用します。
例：
ラジオボタンで使う属性を学ぶ
ラジオボタンを活用する場合、送信される情報を設定しましょう。以下のようなフォームを例にして、ラジオボタンの役割について考えてみます。
このコードではラジオボタンを選択し、送信をクリックした場合、
好きなフルーツ→バナナorりんごorぶどう
好きな野菜→ゴーヤorレタスor玉ねぎ
という情報を送信できるように設定する必要があります。
そのためにラジオボタンに対して、name属性とvalue属性を設定します。Webページを読み込んだ時点であらかじめチェックをつけておきたい場合に使用するchecked属性も考慮しましょう。
- name：情報の項目(例：フルーツ)
- value：情報の値(例；バナナ)
- checked：あらかじめチェックをつけておきたい要素に使用
上記を踏まえると、ラジオボタンのHTMLは以下のように記述します。
HTML：
<input type="radio" name="フルーツ" value="バナナ" checked>
また、属性はユーザーには見えない状態なので、ラジオボタンの内容を表示するテキストとセットで使用します。あらかじめ選択肢の「バナナ」にチェックを付けておきたい場合は、下記のように記述してみましょう。
HTML：
<input type="radio" name="フルーツ" value="バナナ" checked> バナナ
入力フォームにラジオボタンを付けてみよう
ラジオボタンで、好きなフルーツと好きな野菜を選択してもらうアンケートフォームを作成します。
例：
<html> <head> <meta charset="utf-8"> <title>ラジオボタン</title> <link rel="stylesheet" href="./css/style.css"> </head> <body> <form> 名 前：<input type="text" name="お名前"><br> メール：<input type="email" name="email"><br> <p>好きなフルーツは？</p> <input type="radio" name="フルーツ" value="バナナ" checked> バナナ<br> <input type="radio" name="フルーツ" value="りんご"> りんご<br> <input type="radio" name="フルーツ" value="ぶどう"> ぶどう<br> <p>好きな野菜は？</p> <input type="radio" name="野菜" value="ゴーヤ" checked> ゴーヤ<br> <input type="radio" name="野菜" value="レタス"> レタス<br> <input type="radio" name="野菜" value="玉ねぎ"> 玉ねぎ<br> <input type="submit" value="送信"> </form> </body>
このとき1つの項目につき、1つだけ選択できるようになっているか確認してみましょう。
実際に操作してみると、ラジオボタンのタグ(<input type=”radio”>)を使用する場合、クリックに反応するエリアが狭いため、操作性はあまり良くないと感じるかもしれません。そのよう場合は<label>タグを用いたり、CSSを設定して、ユーザーにとって使いやすい入力フォームになるように工夫すると良いでしょう。
<label>タグについてはフォーム作成に必須！HTMLでlabelタグを使う方法を参考にしてください。
監修してくれたメンター
| メンター 橋本真理
フリーのweb/グラフィックデザイナー 会社・店舗・自治体等のwebサイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動、TechAcademyではWebデザインコース・WordPressコースを担当しています。 ラジオとバナナが好き。 |
inputタグのradio属性値を使ってラジオボタンを作る方法がよくわかりました！
ゆかりちゃん、他にも分からないことがあったらどんどん質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
