HTMLフォーム

この章で得られるスキル：

✅ フォームの役割を説明できる
✅ <form>要素を作成できる
✅ <input>タグ（text, password, email, number）を使える
✅ checkbox、radioボタンを使える
✅ <select>タグでドロップダウンを作成できる
✅ <textarea>で複数行入力欄を作成できる
✅ <label>要素でラベルを付けられる

Step 0: まず体験してみよう

説明の前に、まず フォームがないと何が困るのか を体験しよう。

シナリオ：ユーザー登録機能を作る

Webサービスでユーザー登録をしてもらいたいとする。

フォームがない場合：

ユーザー名、メールアドレス、パスワードをどうやって入力してもらうのか？
送信ボタンはどうするのか？

フォームがないと、ユーザーから情報を受け取ることができない。

フォームがある場合：

入力欄を用意できる
送信ボタンでサーバーにデータを送れる
バリデーション（入力チェック）もできる

フォームは、Webサービスにとって 必須の機能 である。

やってみよう：基本的なフォームを試す

以下は、ユーザー登録フォームの例である。各入力欄に文字を入力し、「登録」ボタンを押してみよう。

なぜフォームが必要なのか？

フォームがなければ、ユーザーから情報を入力してもらう手段がない。Webサービスの基本機能である。

Step 1: フォームとは何か

フォーム とは、ユーザーから情報を入力してもらい、サーバーに送信するための仕組みである。

フォームの役割

フォームは、以下のような場面で使われる：

ユーザー登録・ログイン：メールアドレス、パスワードの入力
お問い合わせ：名前、メッセージの入力
検索：検索キーワードの入力
アンケート：選択肢の選択、コメントの入力

フォームの基本的な構造

<form action="/submit" method="POST">
  <!-- ここに入力欄を配置 -->
  <input type="text" name="username">
  <button type="submit">送信</button>
</form>

action：送信先のURL
method：送信方法（GETまたはPOST）

Step 2: form要素の基本

`<form>`タグ

<form action="/submit" method="POST">
  <!-- フォームの内容 -->
</form>

属性：

action：フォームデータの送信先URL
method：データの送信方法
- GET：URLにデータを付けて送信（検索など）
- POST：HTTPリクエストの本文にデータを含めて送信（ログイン、登録など）

重要

GETとPOSTの使い分け：

GET：データを取得する場合（検索、フィルタリング）
POST：データを送信・保存する場合（ログイン、登録、お問い合わせ）

パスワードなどの機密情報は 必ずPOST を使う。GETはURLにデータが表示されてしまう。

やってみよう：formの基本構造を理解する

以下のフォームで、「送信」ボタンを押したときに何が起こるか観察しよう。（実際にはaction先がないため、ページがリロードされるだけである）

なぜformタグが必要なのか？

<form>で囲むことで、入力データを一括してサーバーに送信できる。また、Enter キーで送信する動作も自動的に有効になる。

Step 3: input（text, password, email, number）

<input>タグは、1行の入力欄を作成する。

テキスト入力：`type="text"`

<label for="username">ユーザー名：</label>
<input type="text" id="username" name="username">

やってみよう：テキスト入力欄を試す

以下のテキスト入力欄に、何か文字を入力してみよう。

なぜtype="text"なのか？

type="text"は最も汎用的な入力欄である。ユーザー名、住所、コメントなど、自由なテキストを入力させる場合に使う。

パスワード入力：`type="password"`

<label for="password">パスワード：</label>
<input type="password" id="password" name="password">

入力内容が ●●● のように隠される

やってみよう：パスワード入力欄を試す

以下のパスワード入力欄に文字を入力してみよう。入力した文字が隠されることを確認しよう。

なぜ入力内容が隠されるのか？

パスワードは機密情報なので、他人に見られないようにするためである。セキュリティの基本原則である。

メールアドレス入力：`type="email"`

<label for="email">メールアドレス：</label>
<input type="email" id="email" name="email">

メールアドレスの形式チェックが自動で行われる

やってみよう：メール入力欄を試す

以下のメール入力欄に、正しいメールアドレス（@を含む）と、間違った形式を入力してみよう。送信ボタンを押すと、バリデーションが動作する。

なぜtype="email"を使うのか？

ブラウザが自動でメールアドレスの形式をチェックしてくれる。また、スマートフォンでは@キーが表示されるキーボードになる。

数値入力：`type="number"`

<label for="age">年齢：</label>
<input type="number" id="age" name="age" min="0" max="120">

数値のみ入力可能
min, maxで範囲を指定できる

やってみよう：数値入力欄を試す

以下の数値入力欄で、数値以外の文字を入力しようとしてみよう。また、▲▼ボタンで値を増減できることを確認しよう。

なぜtype="number"を使うのか？

数値のみを受け付けることで、不正な入力を防げる。また、スマートフォンでは数字キーボードが表示される。

HTML5の入力タイプ

HTML5では、他にも多くの入力タイプがある：

tel：電話番号
url：URL
date：日付
time：時刻
color：色

これらを使うことで、スマートフォンで適切なキーボードが表示される。

Step 4: checkboxとradio

checkbox（複数選択）

<p>好きな果物を選んでください（複数選択可）：</p>
<label>
  <input type="checkbox" name="fruit" value="apple">
  りんご
</label>
<label>
  <input type="checkbox" name="fruit" value="banana">
  バナナ
</label>
<label>
  <input type="checkbox" name="fruit" value="orange">
  オレンジ
</label>

複数選択が可能
nameは同じにする
valueで送信される値を指定

やってみよう：checkboxで複数選択する

以下のcheckboxで、複数の項目を選択できることを確認しよう。

なぜ複数選択できるのか？

checkboxは、それぞれが独立したON/OFF状態を持つ。そのため、複数同時に選択できる。

radio（単一選択）

<p>性別を選んでください：</p>
<label>
  <input type="radio" name="gender" value="male">
  男性
</label>
<label>
  <input type="radio" name="gender" value="female">
  女性
</label>
<label>
  <input type="radio" name="gender" value="other">
  その他
</label>

1つだけ選択できる
nameを同じにすることで、グループ化される

やってみよう：radioで単一選択する

以下のradioボタンで、1つしか選択できないことを確認しよう。別の選択肢をクリックすると、前の選択が解除される。

なぜ1つしか選択できないのか？

radioボタンは、同じnameを持つグループ内で排他的に動作する。性別や配送方法など、「どれか1つ」を選ばせる場合に使う。

ポイント

checkboxとradioの使い分け：

checkbox：複数選択を許可する場合（趣味、興味のある分野など）
radio：1つだけ選択させる場合（性別、配送方法など）

Step 5: selectとoption

ドロップダウンリスト を作成する。

基本的な使い方

<label for="prefecture">都道府県：</label>
<select id="prefecture" name="prefecture">
  <option value="">選択してください</option>
  <option value="tokyo">東京都</option>
  <option value="osaka">大阪府</option>
  <option value="fukuoka">福岡県</option>
</select>

<select>で全体を囲む
<option>で各選択肢を定義
valueで送信される値を指定

やってみよう：selectを操作する

以下のドロップダウンリストをクリックして、選択肢を選んでみよう。

なぜselectを使うのか？

選択肢が多い場合、radioボタンだと画面が縦に長くなってしまう。selectなら、コンパクトに表示できる。

デフォルト選択

<option value="tokyo" selected>東京都</option>

selected属性で初期選択状態にする

グループ化

<select name="country">
  <optgroup label="アジア">
    <option value="japan">日本</option>
    <option value="korea">韓国</option>
  </optgroup>
  <optgroup label="ヨーロッパ">
    <option value="france">フランス</option>
    <option value="germany">ドイツ</option>
  </optgroup>
</select>

Step 6: textarea

複数行のテキスト入力欄 を作成する。

<label for="message">メッセージ：</label>
<textarea id="message" name="message" rows="5" cols="40"></textarea>

rows：行数
cols：列数（文字数）

やってみよう：textareaで複数行入力する

以下のtextareaに、複数行のテキストを入力してみよう。Enterキーで改行できることを確認しよう。

なぜtextareaを使うのか？

<input type="text">は1行しか入力できない。お問い合わせ内容やコメントなど、長文を入力させる場合はtextareaを使う。

サイズをCSSで指定

textarea {
  width: 100%;
  height: 150px;
  resize: vertical;  /* 縦方向のみリサイズ可能 */
}

重要

<textarea>は 終了タグが必要 である：

<!-- 正しい -->
<textarea></textarea>

<!-- 誤り -->
<textarea />

Step 7: label要素

label要素 は、入力欄にラベル（説明）を付ける。

for属性で関連付ける

<label for="username">ユーザー名：</label>
<input type="text" id="username" name="username">

for属性にinputのidを指定
ラベルをクリックすると、入力欄がフォーカスされる

入力欄を囲む方法

<label>
  ユーザー名：
  <input type="text" name="username">
</label>

for属性が不要になる

やってみよう：labelの効果を確認する

以下の2つの入力欄を比較しよう。上はlabelなし、下はlabelあり。ラベルのテキストをクリックして、どちらがクリック領域が広いか確認しよう。

なぜlabelを使うと良いのか？

labelを使うと、ラベルのテキストをクリックしても入力欄がフォーカスされる。クリック領域が広がり、ユーザビリティが向上する。

labelの重要性

<label>を使うことで：

クリック領域が広がる：ラベルをクリックしても入力欄がフォーカスされる
アクセシビリティ向上：スクリーンリーダーが読み上げてくれる
ユーザビリティ向上：何を入力すれば良いかが明確になる

必ず<label>を使うべきである。

演習

この章で学んだ内容を確認するため、以下の演習問題に取り組んでください。

演習問題は、docs/src/questions/frontend/html_forms/フォルダにあります：

k1.mdx: フォームの役割を説明できる
w1.mdx: form要素を作成できる
w2.mdx: inputタグ（text, password, email, number）を使える
w3.mdx: checkbox、radioボタンを使える
w4.mdx: selectタグでドロップダウンを作成できる
w5.mdx: textareaで複数行入力欄を作成できる
w6.mdx: label要素でラベルを付けられる

まとめ

この章では、 HTMLフォーム について学んだ。

🎯 達成できたこと

✅ フォームの役割（ユーザー入力を受け取る）を理解した
✅ form要素の基本（action, method）を理解した
✅ 様々なinputタイプを使えるようになった
✅ checkbox、radio、selectを使えるようになった
✅ textareaとlabelを使えるようになった

📚 学んだ内容

フォームは <form>タグで囲む
GETは取得、POSTは送信・保存に使う
<input type="...">で様々な入力欄を作れる
checkboxは 複数選択、radioは 単一選択
<label>を使うことでユーザビリティが向上する

🚀 次のステップ

次の章では、 フォームとバリデーション について学ぶ。不正な入力を防ぐためのHTML5のバリデーション機能を習得する。

💡 よくある質問

Q1: フォームの送信先（action）を指定しないとどうなるのか？

A: actionを省略すると、現在のページに送信される。

ただし、バックエンド（サーバー側）の処理がないと、何も起こらない。通常は明示的に指定する。

Q2: GETとPOSTはどう使い分けるのか？

用途	メソッド	例
データを取得	GET	検索、フィルタリング
データを送信・保存	POST	ログイン、登録、お問い合わせ
機密情報の送信	POST	パスワード、クレジットカード番号

GETはURLにデータが表示されるため、機密情報には使わない。

Q3: name属性は必須か？

A: サーバーにデータを送信する場合は必須である。

name属性がないと、サーバー側でそのデータを受け取れない。

<!-- nameがないとデータが送信されない -->
<input type="text">

<!-- nameがあればデータが送信される -->
<input type="text" name="username">

Q4: placeholderとvalueの違いは？

placeholder：入力欄のヒント（入力すると消える）
value：実際の値（初期値または入力された値）

<input type="text" placeholder="例：山田太郎" value="">

placeholderは説明、valueは実際のデータである。

Q5: checkboxで初期選択状態にするには？

A: checked属性を付ける：

<input type="checkbox" name="agree" value="yes" checked>
利用規約に同意する

radioでも同様。

Q6: `<button>`と`<input type="submit">`の違いは？

<button type="submit">：柔軟性が高い（HTMLを含められる）
<input type="submit">：シンプル（テキストのみ）

現代では <button>を使う方が推奨される：

<button type="submit">
  <img src="icon.png" alt="送信">
  送信
</button>

Q7: フォームのデータはどこに送られるのか？

A: action属性で指定したURLに送信される。

通常は、バックエンド（サーバー側）のプログラム（Java、Python、PHPなど）がデータを受け取って処理する。

Springでは、コントローラーメソッドでデータを受け取る（Springの章で学習）。

Step 0: まず体験してみよう​

シナリオ：ユーザー登録機能を作る​

やってみよう：基本的なフォームを試す​

Step 1: フォームとは何か​

フォームの基本的な構造​

Step 2: form要素の基本​

<form>タグ​

やってみよう：formの基本構造を理解する​

Step 3: input（text, password, email, number）​

テキスト入力：type="text"​

やってみよう：テキスト入力欄を試す​

パスワード入力：type="password"​

やってみよう：パスワード入力欄を試す​

メールアドレス入力：type="email"​

やってみよう：メール入力欄を試す​

数値入力：type="number"​

やってみよう：数値入力欄を試す​

Step 4: checkboxとradio​

checkbox（複数選択）​

やってみよう：checkboxで複数選択する​

radio（単一選択）​

やってみよう：radioで単一選択する​

Step 5: selectとoption​

基本的な使い方​

やってみよう：selectを操作する​

デフォルト選択​

グループ化​

Step 6: textarea​

やってみよう：textareaで複数行入力する​

サイズをCSSで指定​

Step 7: label要素​

for属性で関連付ける​

入力欄を囲む方法​

やってみよう：labelの効果を確認する​

演習​

まとめ​

🎯 達成できたこと​

📚 学んだ内容​

🚀 次のステップ​

💡 よくある質問​

Q1: フォームの送信先（action）を指定しないとどうなるのか？​

Q2: GETとPOSTはどう使い分けるのか？​

Q3: name属性は必須か？​

Q4: placeholderとvalueの違いは？​

Q5: checkboxで初期選択状態にするには？​

Q6: <button>と<input type="submit">の違いは？​

Q7: フォームのデータはどこに送られるのか？​