form要素の使い方
HTMLのform要素は、入力欄やボタンをひとまとめにして、ユーザーが入力したデータを送信するための土台です。
先に結論
formの中にinput、select、textarea、buttonなどを置き、actionで送信先、methodで送信方法を指定します。
フォームは入力画面を作るだけで、データを保存するものではありません。送信先のサーバー側にも、受け取ったデータを処理する仕組みが必要です。
最小の例
<form action="/search" method="get">
<label for="keyword">検索語</label>
<input id="keyword" name="q" type="search">
<button type="submit">検索</button>
</form>labelは入力欄の説明、nameは送信データの名前、valueはその値です。actionとmethodを省略すると、送信先は現在のページ、方法は基本的にGETになります。
試してみる
この例では、送信先を省略しているため、このページ自身にGETで送信します。メールアドレスを空欄のまま送信すると、ブラウザーの入力チェックが働きます。
フォームの中に置くもの
| 要素 | 主な役割 | 例 |
|---|---|---|
input | 1行の文字、日付、チェックなどを入力・選択する | 名前、メール、同意 |
select | 用意した選択肢から選ぶ | 都道府県、カテゴリ |
textarea | 複数行の文章を入力する | お問い合わせ内容 |
button | 送信、リセット、JavaScriptの操作を開始する | 送信する、戻す |
label | 入力コントロールの名前や説明を関連付ける | メールアドレス |
見た目を整えるための要素と、入力の意味を表す要素は分けて考えます。フォーム全体のレイアウトはCSSで設定します。
actionとmethod
| 指定 | 何をするか | よく使う場面 |
|---|---|---|
action | データを送るURL | 検索処理や登録処理の受付先 |
method="get" | データをURLのクエリにして送る | 検索や絞り込みなど、結果をURLで共有したい処理 |
method="post" | データをリクエストの本文で送る | 登録・更新など、URLにデータを載せたくない処理 |
method="dialog" | ネットワーク送信をせず、フォームを含むdialogを閉じる | 確認や選択の結果をdialogから受け取る処理 |
POSTにすれば暗号化されるわけではありません。通信内容を守るにはHTTPSを使い、サーバー側でも認証・認可や入力値の確認を行います。
送信されるデータ
コントロールにnameがあると、その名前と値が送信データの候補になります。nameがない入力欄は、通常のフォーム送信でデータとして送られません。
disabledのコントロールは、通常のフォーム送信に含まれません。- チェックされていないチェックボックスは、通常のフォーム送信に含まれません。
- 送信ボタンは、送信を開始したボタンの値だけが送信対象になります。
- 送信された値は、クライアント側の画面だけで信頼せず、サーバー側で確認します。
<input name="color" value="blue">
<input type="checkbox" name="terms" value="yes" checked>
送信データの例:
color=blue
terms=yeslabelとfieldsetで分かりやすくする
各コントロールには、何を入力・選択するのかが分かるlabelを付けます。複数の選択肢をひとつの質問としてまとめるときは、fieldsetとlegendを使います。
<fieldset>
<legend>連絡方法</legend>
<label><input type="radio" name="contact" value="email"> メール</label>
<label><input type="radio" name="contact" value="phone"> 電話</label>
</fieldset>placeholderは入力例を示す補助情報であり、固定して表示されるlabelの代わりにはなりません。
入力をチェックする
required、type="email"、min、max、patternなどで、ブラウザーが入力を確認する条件を指定できます。
<label for="age">年齢</label>
<input id="age" name="age" type="number" min="0" max="130" required>ブラウザーの入力チェックは、入力ミスを減らすための補助です。利用者は送信処理を変更できるため、重要なデータは必ずサーバー側でも検証します。
よくある間違い
formの中に別のformを入れる。フォームの入れ子はできません。nameを付け忘れる。画面に表示されても、送信データの名前がなければ受け取りにくくなります。- 送信しない操作の
buttonにtypeを書かない。通常のフォーム内では、type="submit"が既定になるため、操作ボタンにはtype="button"などを明示します。 POSTだけで秘密が守られると思う。HTTPS、認証・認可、サーバー側検証も必要です。
Atlasで確認する
formのcontent model、form owner、entry list、制約検証、HTMLFormElement APIまで確認したい場合は、Yugien Atlasのform要素を参照してください。計算結果を表示するoutputと送信データの違いはoutput要素ページ、dialog内でのmethod="dialog"と選択結果はdialog要素ページ、フォーム部品の名前付けと関連付けはYugienのlabel要素ページ、複数行の文章入力はtextarea要素ページでも説明しています。