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サイトを公開できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
