Webページから情報を入力することはよくあると思います。これらはどのように作られているか確認しましょう。
フォームとは
フォームとは、HTMLで作られたWebページでユーザから情報を入力してらう仕組みです。
例えば、名前やメールアドレスの入力、アンケート、ログイン画面などに使われます。
この学習中にも、感想の提出やファイルの提出、テストなど入力を行うページがあります。これらはすべてフォームを使っています。
フォーム構造の基本
HTMLでフォームは次のような構造になります。
フォームの構造の基本
<form action="送信先URL" method="GETまたはPOST">入力部品（テキストボックスやボタンなど）
</form>
具体例は次のようになります。
<form action="submit.php" method="POST">
<label>名前：<input type="text" name="username"></label><br>
<label>年齢：<input type="number" name="age"></label><br>
<input type="submit" value="送信">
</form>
上のHTMLはWebブラウザでは次のように表示されます。
この例では、名前と年齢を入力して送信ボタンを押すと送信を行います。
フォームは「formタグ」で作成されます。フォームで利用しているタグは次のような意味があります。
| 🧩 タグ / 属性 | 説明 |
|---|---|
| <form> | フォームを指定するタグ。 <form>～ </form>の範囲にデータを入力する部品を指定する。 |
| 🔧 action属性 | formタグで指定する項目。入力されたデータを送る先のURLやファイル（たとえばPHP）を指定する。 |
| 🔧 method属性 |
formタグで指定する項目。データの送り方（GETまたはPOST）を指定する。get: URLにデータが見えるpost: URLに見えず、安全性がやや高い
|
| <input> |
ユーザーが情報を入力するための入力欄などの部品を指定する。 例：<input type="入力部品" name="部品名"> |
| 🔧 type属性 |
inputタグで指定する項目。入力部品の種類を指定する。 text：1行の文字列入力 number：1行の数字入力 password：パスワード checkbox：チェックボックス radio：ラジオボタン などがある。 |
| 🔧 name属性 | inputタグで指定する項目。入力項目の名前（サーバー側で使う）を指定する。 |
| <input type="submit"> | 送信ボタン。formタグ内の部品に入力された値を送信する。 |
これらの入力部品を使ってWebページから情報を入力します。inputタグの使用例は下記のリンクから確認できます。
入力部品サンプル数値入力は数字しか入らないんだ。アルファベットキー押しても入力されなかった。
パスワードはちゃんと入力した文字がわからなくなってるし、結構色々あるんですね。
フォーム送信の流れ
フォームで入力された情報は「submitボタン」で、送信され処理されます。入力からの流れを再度確認しましょう。
フォーム送信の流れ
このように、HTMLで作成されたフォームで入力された情報はsubmitボタンで、サーバサイドのPHPなどのプログラムで処理され、結果がWebブラウザに戻されます。
処理の流れを理解したところで、サンプルプログラムを見ていきましょう。
