form要素

使用例

<form action="/" method="get" target="_blank">
    <input type="text" name="foo" value="ABC" />
    <input type="submit" />
</form>

実行例

送信をクリックすると、actionの送信先に対してmethodの方式でリクエストし、レスポンスをtargetに表示します。またリクエストには、input要素の「name=value」のパラメータが付加されます。

属性

action (必須)

送信するデータを処理するプログラムの、URIを指定します。

これを""にように空の文字列とすると、form要素が置かれたページ自身へ送信されます。しかしブラウザによってフラグメントが残される場合とそうではない場合があるため、それが問題となるならば何らかの文字列を指定します。

これをクリックするとURIにフラグメントを付加できます。そして下の送信ボタンを押して、アドレスバーのURIを確認してください。

属性値 実行例
action=""
action="./"

mailtoスキーム

action属性のURIにmailtoスキームを指定することで、フォームからメールクライアントへデータを渡すことができます。ただしmailtoの動作はクライアントの環境に依存するため、可能ならばPHPなどへデータを渡し、そこから送信すべきです。

<form action="mailto:someone@example.com" method="get">
    <input type="text" name="subject" />
    <textarea name="body"></textarea>
    <input type="submit" value="メールを送信" />
</form>
件名:
本文:

method

HTTPのメソッド (method) を指定します。

  • get … GETメソッド (既定)
  • post … POSTメソッド

いずれの方式でも英数字以外のテキストはURLエンコードされるため、データサイズに注意が必要です。たとえばUTF-8の「あ」は「%E3%81%82」となり、1文字に9バイト費やします。

enctype

method="post"のときのMIMEタイプを指定します。

<form action="" method="post" enctype="multipart/form-data">
    <input type="file" name="data" />
    <input type="submit" />
</form>

target

データ送信後に表示するページを指定します。

  • _blank
  • _self
  • _parent
  • _top
  • フレーム名 (frame要素のname属性の値) またはウィンドウ名
<form action="sample.php" method="get" target="frameName">
    <input type="text" name="data" value="" />
    <input type="submit" />
</form>

<iframe name="frameName"></iframe>

このformでsubmitした場合、sample.phpのページへinput要素のvalue属性の値がGETで渡されます。PHPで処理するとき、そのページでは渡された値へ$_GET['data']でアクセスでき、そこでの出力はiframe要素に表示されます。

actionに無効なアドレスが指定されていると、ブラウザによってはtargetの指定が無視され'_self'で開かれます。これはInternet ExplorerやEdgeで確認できます。

<form action="http://" method="get" target="frameName">

accept-charset

サーバが処理可能な符号化方式 (エンコーディング) を指定します。この属性を省略したときは、そのページの符号化方式と同じそれで送信されます

<form action="" accept-charset="UTF-8">

Internet Explorerは、この属性を無視します。

この属性に指定できる値の一覧が、Character Set Recognition (Internet Explorer)にあります。

  ラベル 別名
UTF-8 utf-8 unicode-1-1-utf-8、unicode-2-0-utf-8、x-unicode-2-0-utf-8
US-ASCII us-ascii ANSI_X3.4-1968、ANSI_X3.4-1986、ascii、cp367、csASCII、IBM367、ISO_646.irv:1991、ISO646-US、iso-ir-6us
Shift_JIS shift_jis csShiftJIS、csWindows31J、ms_Kanji、shift-jis、x-ms-cp932、x-sjis

※このページはUTF-8で、送信先のページも同様です。

受信データ

トラブル対処法

送信されない

form要素内にform要素が内包されていると、input要素からsubmitしてもブラウザが反応しないことがあります。このような記述は仕様に反しますが、form要素を記述する位置によっては動作します。

  • 内包されたform要素が、<input type="submit" />より前にある場合
    <form action="/">
        <input type="text" name="foo" value="ABC" />
        <form action="/"></form>
        <input type="submit" />
    </form>
    
  • 内包されたform要素が、<input type="submit" />より後にある場合
    <form action="/">
        <input type="text" name="foo" value="ABC" />
        <input type="submit" />
        <form action="/"></form>
    </form>
    
HTMLの情報サイトから、まとめて検索