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"を使えば、簡単にユーザーが選択できるフォームを作成することができます。
