HTML講座 / formの構造とGET・POSTによる送信
HTMLフォームはformの中の入力値を、actionで指定した宛先へmethodの方法で送ります。GETは主にURLのクエリーに値を入れ、POSTはリクエスト本文に値を入れます。どちらでも、フォームの作成とサーバー側の受信処理は別に用意する必要があります。
小さな検索フォームを作る
次の断片をHTML文書のbodyへ入れます。/searchは説明用の宛先なので、実際に利用するには処理できるURLへ変更してください。labelのforはinputのidと一致させます。
<form action="/search" method="get"> <label for="keyword">Search term</label> <input id="keyword" name="q" type="search"> <button type="submit">Search</button> </form>
name="q"が送信時の項目名で、HTMLと入力すると通常は?q=HTMLのようなクエリーになります。idだけでは通常その値は送信されません。actionを省略すると現在の文書が宛先、methodを省略するとGETです。空白や日本語はURL上で符号化される場合があります。label・id・nameの違いでも役割を比較できます。
GETとPOSTを選ぶ
| 方法 | 値の置き場所 | 主な用途と注意 |
|---|---|---|
| GET | URLのクエリー | 検索や絞り込み。URLを共有しやすい一方、秘密情報を入れない。 |
| POST | リクエスト本文 | 登録やメッセージ送信など。POST自体は暗号化ではない。 |
<form action="/contact" method="post"> <label for="message">Message</label> <textarea id="message" name="message"></textarea> <button type="submit">Send</button> </form>
/contactも例示のパスで、受信するサーバー処理がなければエラーになります。POSTにしただけで秘密を守れるわけではなく、HTTPSと適切な受信処理が必要です。ローカルファイルで/から始まるURLを指定しても、動作する受信サービスにはなりません。実習には実在の個人情報を使わないでください。
送信せずにフォームの値を調べる
次の完全なコードをinspect-form.htmlに保存します。現在の文書を宛先にするためactionを省略しています。空のaction=""を明示する方法とは区別します。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form-data practice</title>
</head>
<body>
<h1>Inspect submitted fields</h1>
<form id="inspect-form" method="get">
<p><label for="query">Search term</label>
<input id="query" name="q" value="HTML" required></p>
<p><label for="limit">Result limit</label>
<input id="limit" name="limit" value="5" readonly></p>
<p><label for="coupon">Unavailable coupon</label>
<input id="coupon" name="coupon" value="DEMO" disabled></p>
<p><label><input type="checkbox" name="news" value="yes" checked> News</label></p>
<button type="submit">Inspect values in the URL</button>
</form>
</body>
</html>
開いたページの開発者ツールのConsoleで次を実行すると、現在のフォームデータを確認できます。FormDataはフォームの名前と値の一覧を作るWeb APIです。このコマンド自体は送信も入力検証も行いません。
Array.from(new FormData(document.getElementById("inspect-form")).entries())
[["q", "HTML"], ["limit", "5"], ["news", "yes"]]
読み取り専用のlimitは含まれ、無効なcouponは含まれません。Newsを外すとその項目が消えます。検索語を空にして一覧を作る操作と、送信ボタンでrequiredに止められる操作を比較し、元へ戻してください。HTTPで配信したページではNetworkで実際のGETのURLやPOSTのForm Dataを調べます。ローカルのfile://は同じ条件ではありません。
送信されない値とサーバーのエラーを区別する
最初にnameがあるか、次に無効化されていないか、チェック項目が選ばれているかを確認します。disabledは送信されず、対応する入力型のreadonlyは送信対象にできます。ファイル送信には追加の設定とサーバー処理が必要です。
404や405などの応答は、宛先や許可されたメソッドの問題かもしれません。要求が送られたこと、サーバーが成功と応答したこと、値が保存されたことは分けて確認します。入力制約はフォームの検証、仕様はHTMLの送信属性、FormData、form要素を参照できます。
labelのforとinputのidを対応させる方法を学びます。idと送信時のnameの違い、重複IDの問題、placeholderがラベルの代わりにならない理由も説明します。
aとhrefによるリンク、絶対URLと相対URL、ページ内の移動を学びます。新しいタブ、メール、ダウンロードの条件と、三つのファイルでパスを確認する実習も紹介します。
HTML講座 / タイトル・説明・言語・文字コードを設定する
title、meta description、charset、viewportとhtmlのlangを整理します。タブと本文の違い、文字化けの調査、検索結果の説明が必ず採用されるわけではない点も学べます。
header、nav、main、article、section、aside、footerの役割を学びます。見た目の配置と意味を区別し、複数のナビゲーションを識別する方法も紹介します。
見出し、リンク、画像、フォームを意味のあるHTMLで作る方法を学びます。スキップリンク、キーボード、フォーカス、ズームを確認する小さなページと、検査の限界も紹介します。
HTML講座 / placeholderと入力中も残る案内文を付ける
label、placeholder、valueの違いを学びます。inputとtextareaの例、aria-describedbyによる説明の関連付け、フォームデータで送られる値の確認方法も紹介します。
HTML講座 / figureとfigcaptionで図と説明をまとめる
図とキャプションを一つのまとまりとして表す方法を学びます。altとキャプションの役割、出典の示し方、figureを使わなくてもよい場面も説明します。
HTML講座 / formの構造とGET・POSTによる送信
action、method、nameの役割とGET・POSTの違いを学びます。FormDataと開発者ツールを使い、送信対象の値、入力検証、サーバー処理を分けて確認します。
HTML講座 / fieldset・legend・autocompleteでフォームを説明する
関連する入力をfieldsetでまとめ、legendで質問を示す方法を学びます。ラジオグループを独立させるnameと、自動入力の目的を示すautocompleteの違いも解説します。
doctype、html、head、bodyの役割と、文字コード・文書タイトル・viewportの設定を解説します。ファイルの保存から表示確認、表示されない場合の調べ方まで学べます。