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要素を参照できます。
行と列を持つデータをHTMLの表で表す基本を学びます。見出しセルとデータセル、theadとtbody、横幅が広い表のスクロール方法も紹介します。
doctype、html、head、bodyの役割と、文字コード・文書タイトル・viewportの設定を解説します。ファイルの保存から表示確認、表示されない場合の調べ方まで学べます。
HTML講座 / HTMLとは何か、Webページでの役割を理解する
HTMLで文書の意味と構造を表す方法を、CSS・JavaScriptとの違いとともに学びます。実際にHTMLファイルを保存して、ブラウザーで確認する手順も紹介します。
HTML講座 / audio・video・iframeでメディアを埋め込む
音声、動画、外部文書の埋め込みを学びます。字幕ファイル、代替リンク、画面幅への対応と、ファイル形式や提供元の制限による読み込み失敗の確認方法も説明します。
labelのforとinputのidを対応させる方法を学びます。idと送信時のnameの違い、重複IDの問題、placeholderがラベルの代わりにならない理由も説明します。
HTML講座 / detailsとsummaryで開閉できる説明を作る
JavaScriptなしで開閉する補足説明を作ります。open属性の真偽、分かりやすいsummaryの書き方、Tab・Enter・Spaceによる操作の確認方法も紹介します。
header、nav、main、article、section、aside、footerの役割を学びます。見た目の配置と意味を区別し、複数のナビゲーションを識別する方法も紹介します。
見出し、リンク、画像、フォームを意味のあるHTMLで作る方法を学びます。スキップリンク、キーボード、フォーカス、ズームを確認する小さなページと、検査の限界も紹介します。
aとhrefによるリンク、絶対URLと相対URL、ページ内の移動を学びます。新しいタブ、メール、ダウンロードの条件と、三つのファイルでパスを確認する実習も紹介します。
HTML講座 / textarea・select・option・buttonを使う
複数行入力、選択メニュー、送信・リセット・通常ボタンを使い分けます。表示ラベルと送信値、初期値と現在値を実際のフォームで比較する方法も紹介します。