Expand your HTML skills through an MDN Fellowship - Apply by April 1 http://mzl.la/MDNFellowship

mozilla
Your Search Results

    form 要素

    概要

    HTML の form要素 (<form>) は、ユーザが Web サーバーに情報を送信できるようにするインタラクティブなコントロールを含むドキュメントセクションを表します。

    form 要素 には、:valid 及び、:invalid の 2 つの CSS 擬似クラスが使用可能です。

    属性

    他のすべての HTML要素と同じく、この要素はグローバル属性をサポートしています。

    accept HTML 4
    サーバが受け付けるコンテンツ・タイプのカンマ区切りリスト。

    使用上の注意: この属性は HTML5 の仕様から削除されており、既に使用不可となっています。代わりに個々の <input> 要素の accept属性を使用します。

    accept-charset
    サーバーを受け付ける文字エンコーディングのリスト。リストはスペースまたはカンマで区切ることができます。ブラウザは、それらがリストされている順序を優先順位として使用します。 フォーム要素を含むドキュメントのエンコーディングに対応する場合には、デフォルト値は予約語の "UNKNOWN" となります。
    HTML 4: HTML の以前の版では、さまざまな文字エンコーディングをスペースまたはカンマで区切ることができました。これは HTML5 では当てはまらず、スペースだけが適切です。
    action
    フォーム経由で送信された情報を処理するプログラムの URI。 この値は <button> または <input>formaction属性 によって上書きする事が可能です。
    autocomplete HTML5
    フォーム内のコントロールがデフォルトで、ブラウザによる値の入力補完を受けるかを示します。この設定はフォームに属する要素の autocomplete 属性で上書きできます。以下の値が指定可能です。
    • off: ユーザは、フォームを使用する度に全ての値を入力するか、もしくは独自の入力補完を使用する必要があります。ブラウザが入力補完をサポートする事はありません。
    • on: ブラウザはユーザが以前に入力した値に基づき、これを自動補完の為の候補として使用する事ができます。

    注記: ドキュメントで独自の入力補完を提供するため autocompleteoff に設定する場合は、フォーム内で入力補完が可能な各 input 要素でも autocompleteoff に設定するべきです。詳しくは、Google Chrome に関する補足をご覧ください。

    enctype
    method 属性の値が post であるとき、この属性はフォームをサーバに送信する際に使用する、コンテンツの MIME type を示します。以下の値が指定可能です。
    • application/x-www-form-urlencoded: 初期値。属性を指定していない場合、この値が使用されます。
    • multipart/form-data: type 属性で "file" を指定した <input> 要素を使用する場合は、この値を使用します。
    • text/plain (HTML5)

    この値は、<button> または <input>formtarget属性によって上書きする事が可能です。

    method
    フォームを送信する際にブラウザが使用する HTTP メソッドです。以下の値が指定可能です。
    • post: HTTP POST メソッドに相当します。フォームのデータはボディに収めてサーバに送信します。
    • get: HTTP GET メソッドに相当します。フォームのデータは '?' をセパレータとして action 属性の URI に追加して、その結果となる URI をサーバに送信します。フォームが ASCII 文字列だけを含み、まったく副作用がない場合にのみ、このメソッドを使用してください。

    この値は、<button> または <input>formtarget属性によって上書きする事が可能です。

    name
    フォームの名前です。HTML 4 では推奨されていません (代わりに id を用いるべきです)。name 属性は文書内で固有のものでなくてはならず、また常に何らかの内容を持たねばなりません。
    novalidate HTML5
    フォームが送信された時にバリデートしない事を示す真偽値です。もしこの属性が指定されていない(つまりバリデートされる)場合、この設定の初期値は <button> もしくは <input>formnovalidate属性によって上書きする事が可能です。
    target
    フォームを送信した後に受け取った応答の表示位置を示す名前またはキーワードです。これは、HTML 4 ではフレームの名前またはキーワードでした。HTML5 では、ブラウズ・コンテキスト の名前またはキーワードです (例えば、タブ、ウィンドウ、インラインフレームなど)。以下のキーワードは特別な意味を持ちます:
    • _self: 応答を現在と同じ HTML 4 フレーム (または HTML5 ブラウズ・コンテキスト) に表示します。この値は、属性が指定されていない場合のデフォルト値です。
    • _blank: 応答を新しい名前のつけられていない、HTML 4 ウィンドウまたは HTML5 のブラウズ・コンテキストに読み込みます。
    • _parent: 応答を現在のフレームの HTML 4 フレームセットの親要素または HTML5 の現在の親ブラウズ・コンテキストに読み込みます。親要素がない場合、このオプションは _self と同じ振る舞いをします。
    • _top: HTML 4 では、応答を元のウィンドウ全体に読み込み、他のフレームをすべてキャンセルします。HTML5 では、応答をトップレベルのブラウズ・コンテキストに読み込みます (現在のブラウズ・コンテキストの祖先にあたり、それ以上親のない要素です)。親要素がない場合、このオプションは _self と同じ振る舞いをします。
    • iframename: 応答を、名前のついた <iframe> に読み込みます。

    HTML5: この値は、<button> または <input>formtarget属性によって上書きする事が可能です。

    <!-- GET 要求を送信する簡単なフォーム -->
    <form action="">
      <label for="GET-name">Name:</label>
      <input id="GET-name" type="text" name="name">
      <input type="submit" value="Save">
    </form>
    
    <!-- POST 要求を送信する簡単なフォーム -->
    <form action="" method="post">
      <label for="POST-name">Name:</label>
      <input id="POST-name" type="text" name="name">
      <input type="submit" value="Save">
    </form>
    
    <!-- fieldset、 legend、label を用いたフォームのマークアップの例 -->
    <form action="" method="post">
      <fieldset>
        <legend>Title</legend>
        <input type="radio" name="radio" id="radio"> <label for="radio">Click me</label>
      </fieldset>
    </form>
    

    仕様

    仕様書 策定状況 コメント
    WHATWG HTML Living Standard Living Standard  
    HTML5 勧告候補  
    HTML 4.01 Specification 勧告  

    ブラウザ実装状況

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
    基本サポート 1.0 1.0 (1.7 or earlier) (有) (有) (有)
    novalidate 属性 1.0 4.0 (2.0) 未サポート ? ?
    機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    基本サポート (有) 1.0 (1.0) (有) (有) (有)
    novalidate 属性 ? 4.0 (2.0) ? ? ?

    Google Chrome に関する補足

    Google Chrome の自動補完 UI の要件は異なっており、フォームだけでなく input 要素の autocompleteoff であるかにも依存します。特に form 要素の autocompleteoff に、またフォーム内の input 要素の autocomplete フィールドを設定しないときは、ユーザが input 要素で自動補完の候補を求めた場合に、Chrome が "このフォームでは自動補完が無効" というメッセージを表示します。一方、form および input 要素の両方で autocompleteoff に設定すると、ブラウザはメッセージを表示しません。このため、独自の入力補完を使用する各 input で autocompleteoff に設定するとよいでしょう。

    関連情報

    ドキュメントのタグと貢献者

    Contributors to this page: ethertank, yyss
    最終更新者: yyss,