HTML要素 ・ フォーム
<form>
フォーム全体
入力欄やボタンをまとめ、入力内容を送信するための要素です。action で送信先を、method で送信方法を指定します。
01
サンプルコード
HTML
1<form action="/contact" method="post">
2 <p>
3 <label for="name">お名前</label>
4 <input type="text" id="name" name="name">
5 </p>
6 <p>
7 <label for="email">メールアドレス</label>
8 <input type="email" id="email" name="email">
9 </p>
10 <button type="submit">送信する</button>
11</form>
CSS
1label {
2 display: block;
3 margin-bottom: 4px;
4}
5input, textarea, select {
6 padding: 6px 10px;
7 border: 1px solid #bbb;
8 border-radius: 4px;
9 font: inherit;
10}
11button {
12 padding: 8px 20px;
13}
02
実行結果
ブラウザでの表示プレビューでは送信されません
03
解説
form は、利用者が入力したデータをサーバーに送るための入れ物です。中の入力欄の値が、送信ボタンを押したときにまとめて送られます。
action 属性に送信先のURLを、method 属性に送信方法を書きます。検索フォームのようにURLに値を付けて送るなら get、お問い合わせなど内容を見せずに送るなら post を使います。
送信される値の名前は、各入力欄の name 属性で決まります。name がない入力欄の値は送信されません。
HTMLだけでは、送られてきたデータを受け取って処理する（メールを送る・保存するなど）ことはできません。受け取り側は、PHP などのサーバー側のプログラムや、フォームの送信サービスで用意します。
04
応用例・注意点
主な属性
| 属性 | 説明 |
|---|---|
action | 送信先のURL |
method | get・post・dialog の3種類（下の行を参照） |
method="get" | URLの末尾にデータを連結して送信する |
method="post" | URLに表示せずにデータを送信する |
method="dialog" | dialog 要素の中で使い、送信せずにダイアログを閉じる |
autocomplete | 自動入力の有効・無効 |
novalidate | ブラウザの入力チェックを無効にする |
サイト内検索フォーム
method="get" にすると、検索語がURLに付いて送信されます。
HTML
1<form action="/search" method="get" role="search">
2 <input type="search" name="q" aria-label="サイト内検索">
3 <button>検索</button>
4</form>
注意点
- 01form の中に form を入れることはできません。
- 02サンプルの送信先は架空のため、プレビューで送信しても何も起こりません。
- 03method を省略すると get になります。お問い合わせなど個人情報を含むフォームでは post を指定します。