HTMLのformタグとinput type="radio"を完全ガイド！初心者でもわかる入力フォームの作り方
新人
「HTMLでユーザーから情報を入力してもらう方法ってどうやるんですか？」
先輩
「HTMLではformタグを使って入力フォームを作ることができるよ。名前やメールアドレスの入力、性別や年齢の選択などができるようになるんだ。」
新人
「性別の選択って、丸い選択肢をクリックするやつですよね？あれもHTMLで作れるんですか？」
先輩
「そうそう。それはinput type="radio"を使うと簡単に作れるよ！それじゃあ、formタグとradioボタンの使い方を詳しく見ていこうか。」
1. HTMLのformタグとは
HTMLのformタグは、ユーザーから情報を入力してもらい、そのデータを送信するための領域を作るタグです。例えば、名前や住所、メールアドレスなどを入力してもらうときに使います。formタグの中には、様々な入力要素（input、textarea、selectなど）を入れて構成します。
基本的なformタグの構文は以下のようになります。
<form action="/submit" method="post">
<input type="text" name="username">
<input type="submit" value="送信">
</form>
2. formタグの属性について
formタグには、いくつかの大事な属性があります。
- action：フォームの送信先URLを指定します。
- method：データ送信方法を指定します。主に
getとpostの2種類があります。
例えば、actionに「/submit」、methodに「post」と書けば、送信ボタンを押したときにそのデータが「/submit」にPOST方式で送られます。
3. input type="radio"とは
inputタグのtype属性に「radio」を指定すると、丸い形をした選択肢（ラジオボタン）を作ることができます。複数の中から1つだけを選ばせたいときに便利です。例えば、「男性」「女性」などの性別の選択でよく使われます。
基本の書き方は以下のようになります。
<form>
<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性
</form>
name属性が同じだと、複数のラジオボタンのうち1つだけが選ばれるようになります。value属性には、実際に送信される値を指定します。
4. ラジオボタンにラベルをつけて使いやすくしよう
ラジオボタンにlabelタグを使うと、文字をクリックしても選択できるようになります。ユーザーにとって使いやすくなるので、labelタグを使うのがおすすめです。
<form>
<label><input type="radio" name="color" value="red"> 赤</label>
<label><input type="radio" name="color" value="blue"> 青</label>
<label><input type="radio" name="color" value="green"> 緑</label>
</form>
labelタグで囲むと、ボタン以外のテキスト部分もクリックできるようになります。スマートフォンなどでも押しやすくなります。
5. 初期状態で選択された状態にするには
ラジオボタンのうち、最初から選択状態にしたい項目があるときは、checked属性を追加します。
<form>
<label><input type="radio" name="plan" value="basic" checked> ベーシックプラン</label>
<label><input type="radio" name="plan" value="premium"> プレミアムプラン</label>
</form>
checked属性がついているラジオボタンが、ページ読み込み時に選ばれた状態で表示されます。
6. 実際のフォーム例（送信ボタン付き）
ここまでの内容を使って、性別を選んで送信できる簡単なフォームを作ってみましょう。
<form action="/submit" method="post">
<label><input type="radio" name="gender" value="male" checked> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>
<br>
<input type="submit" value="送信">
</form>
このように、formタグとinput type="radio"を使えば、簡単にユーザーが選択できるフォームを作成することができます。
まとめ
この記事では、HTMLのformタグとinput type="radio"を使った入力フォームの作り方について初心者向けに詳しく解説しました。HTMLでユーザーから情報を入力してもらう仕組みは、WebサイトやWebアプリケーションを作るうえでとても重要な基本機能です。特にHTMLのformタグは、ユーザーが入力したデータをサーバーに送信するための重要な役割を持っています。名前やメールアドレスの入力、アンケートフォーム、会員登録フォーム、ログインフォームなど、ほとんどのWebサイトで利用されている機能です。
HTMLのformタグは、入力欄を作るだけのタグではなく、送信先のURLや送信方法を指定することができるタグです。action属性を使うことで送信先のページを指定でき、method属性を使うことでデータの送信方法を指定できます。一般的なWebフォームではpost方式がよく使われますが、検索フォームなどではget方式が使われることもあります。こうしたHTMLフォームの基本を理解することで、ユーザーからの入力データを正しく処理できるようになります。
また、inputタグにはさまざまな種類がありますが、その中でもinput type="radio"は複数の選択肢の中から一つだけ選択させたいときに使われる重要な入力要素です。ラジオボタンはアンケートフォームや会員登録フォーム、設定画面などでよく使われています。例えば性別の選択、プランの選択、支払い方法の選択など、ユーザーに一つだけ選ばせたい場面で活躍します。
ラジオボタンを作るときに重要なポイントはname属性です。同じname属性を持つラジオボタンはグループとして扱われ、その中から一つだけ選択できる仕組みになります。これを理解していないと、複数のラジオボタンを同時に選択できてしまうフォームになってしまうため注意が必要です。HTMLフォームを正しく作るためには、このような基本的な属性の役割をしっかり理解しておくことが大切です。
さらに、labelタグを使うことでラジオボタンの使いやすさを大きく向上させることができます。labelタグで囲むことで文字部分をクリックしても選択できるようになるため、ユーザーにとって操作しやすいフォームになります。特にスマートフォンやタブレットでは小さなボタンを直接押すのが難しい場合があるため、labelタグを活用することはユーザー体験を高める重要なポイントになります。
また、checked属性を使うことで、ページが表示されたときに最初から選択されている状態を作ることができます。これはユーザーの入力をサポートするための便利な機能です。例えば一番よく使われる選択肢を最初から選択状態にしておくことで、ユーザーの操作を減らすことができます。このようにHTMLフォームではユーザーの使いやすさを考えて設計することがとても重要です。
HTMLのformタグとinput type="radio"を組み合わせることで、アンケートフォーム、登録フォーム、設定画面などさまざまな入力フォームを作ることができます。Web開発の現場ではフォームは非常に重要な要素であり、HTMLの基礎を学ぶうえでも必ず理解しておきたい知識です。まずはシンプルなフォームから作りながら、HTMLタグの役割や属性の意味を理解していくことが、初心者がWeb制作やフロントエンド開発のスキルを伸ばす近道になります。
サンプルフォームの復習
最後に、この記事で学んだHTMLのformタグとinput type="radio"を使った基本的な入力フォームをもう一度確認してみましょう。以下のサンプルでは、ユーザーが性別を選択して送信できるシンプルなHTMLフォームを作っています。
<form action="/submit" method="post">
<label>
<input type="radio" name="gender" value="male" checked>
男性
</label>
<label>
<input type="radio" name="gender" value="female">
女性
</label>
<br>
<input type="submit" value="送信">
</form>
このようにHTMLフォームでは、formタグで入力エリアを作り、その中にinputタグを配置して入力項目を作ります。ラジオボタンのname属性を同じ値にすることで、複数の選択肢の中から一つだけ選択できるフォームが完成します。HTMLの基本を理解すれば、問い合わせフォーム、アンケートフォーム、登録フォームなどさまざまな入力画面を作れるようになります。
生徒
今日はHTMLのformタグとラジオボタンの作り方を学びました。入力フォームを作るときにはformタグを使うこと、そしてユーザーの選択肢を作るときにはinput type radioを使うことが分かりました。
先生
その通りです。HTMLのフォームはWebサイトでユーザーとやり取りするための大切な仕組みです。問い合わせフォームや会員登録フォームなど、多くのWebページで使われています。
生徒
ラジオボタンを作るときはname属性を同じにすることで一つだけ選択できるようになることも理解できました。これを知らないとフォームが正しく動かないこともありそうですね。
先生
とても良いポイントに気付きました。HTMLの入力フォームでは属性の意味を理解することが重要です。name属性はデータを送信するときのキーにもなるため、Web開発ではとても重要な役割を持っています。
生徒
labelタグを使うと文字をクリックしても選択できるようになるのも便利だと思いました。スマートフォンで操作するときにも押しやすくなりそうです。
先生
その通りです。ユーザーが使いやすいフォームを作ることはWebデザインやフロントエンド開発ではとても重要です。labelタグを使うことでアクセシビリティも向上します。
生徒
checked属性を使えば最初から選択された状態にできることも学びました。フォームを作るときはユーザーの操作を減らす工夫も大切なんですね。
先生
はい。その考え方はとても重要です。HTMLフォームを作るときは、ユーザーが迷わず入力できるように設計することが大切です。今回学んだformタグ、inputタグ、radioボタン、labelタグ、checked属性はWeb制作の基本なのでしっかり覚えておきましょう。
