女性向けエンジニアスクール
3秒でわかる
利用者の入力をまとめて受け取り送信するHTMLの仕組み。文字入力や選択の部品をひとまとめにし、宛先と送信方法を指定して届けます。
もう少し詳しく
どういうものか
フォームは、利用者が入力した値をまとめて送るための HTML の仕組みです。form 要素で囲み、action に宛先の URL、method に送り方を指定します。中に置く部品は、一行入力の input、複数行の textarea、選択肢の select、送信の button です。input は type の指定で見た目と挙動が変わり、text、email、password、number、checkbox、radio、date などがあります。
送られる値は、部品の name 属性と入力値の組です。name が無い部品の値は送られないため、見た目が正しくても中身が届かない原因になります。
なぜ必要か
会員登録、ログイン、検索、問い合わせ、注文。利用者から情報を受け取る画面はすべてフォームです。標準の仕組みに乗せておくと、Enter キーでの送信、必須項目の警告、ブラウザの入力補完、パスワード管理ソフトとの連携、支援技術による読み上げが、自分で書かなくても働きます。
具体例
<form action="/signup" method="post">
<label for="email">メールアドレス</label>
<input id="email" name="email" type="email" required>
<label for="plan">プラン</label>
<select id="plan" name="plan">
<option value="free">無料</option>
<option value="pro">有料</option>
</select>
<label><input type="checkbox" name="agree" value="yes" required> 規約に同意する</label>
<button type="submit">登録する</button>
</form>JavaScript で送信を横取りし、非同期で送る形もよく使います。
form.addEventListener("submit", (e) => {
e.preventDefault();
const data = Object.fromEntries(new FormData(form));
<a href="/glossary/fetch-api" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">fetch</a>("/signup", { method: "POST", body: JSON.stringify(data) });
});つまずきやすいところ
GET と POST の選び方でつまずきます。GET は値が URL に並ぶので検索や絞り込み向き、POST はパスワードや長い本文向きです。GET でパスワードを送ると履歴とアクセスログに残ります。
ラジオボタンは name を揃えて初めて排他になります。別々の name を付けると全部選べてしまいます。checkbox は選んでいないと項目そのものが送られない点も、受け取り側の処理で見落とされがちです。
required や type による検査はブラウザ側の親切であって、防御ではありません。開発者ツールで外せますし、フォームを介さない要求も送れます。サーバー側で同じ検査をもう一度行うことが前提です。
覚え方
フォームは「箱と宛名」。囲むのが form、名札が name、送り方が method。この三つが揃って初めて値が届きます。
