form要素とは

<form（フォーム）>要素は、interactive（インタラクティブ） form（フォーム）の略で、フォームを表す要素です。この<form>要素には、action属性を使って、フォームの送信先を指定します。なお、HTMLは、<form>要素を使ってデータを送信することは可能ですが、受け取ることが出来ません。データの受取には、PHPやPerl、Rubyなどのサーバーサイドのプログラミング言語を使います。

意味・役割

フォームを表す要素

利用できるバージョン（HTML4.01以降）

全てのバージョン

コンテンツ・カテゴリ

• フロー・コンテンツ
• パルパブル・コンテンツ

（HTML5より前：ブロックレベル要素）

コンテンツ・モデル（梱包できる要素）

フロー・コンテンツ
ただし、子孫に<form>要素は配置できない。
（HTML5より前：<form>以外のブロックレベル要素、<script>。インライン要素は非推奨）

この要素を配置できる親要素

フロー・コンテンツが配置できる要素

form要素で使える属性

どの要素にでも使えるグローバル属性と以下の属性が使えます。

action属性

action（アクション）属性は、フォームの送信先を指定する属性です。送信先は一般的に PHPなどのサーバーサイドのプログラムファイルになります。値を空にした場合や、この属性自体を省略した場合（HTML5から）は、自身にデータを送信します。なお、"mailto:メールアドレス" と指定すると、直接そのメールアドレスにデータを送信できますが、仕様上は定義されていないですし、文字化けも発生するので利用しないほうがいいでしょう。

<form action="空または、フォームデータ送信先のパス">

属性値

• 空 （自身にデータを送信）
• 送信先ファイルのパス

利用できるバージョン（HTML4.01以降）

全てのバージョン

<form action="conf.php">

method属性

method（メソッド）属性は、 フォームの送信方法を指定する属性です。フォームの送信方法には "get" と "post" があります。"get"は、URLの後ろにデータを付けて送信する方法で、そのデータを利用したページにリンクを貼ることも出来ます。そのことから、サイト内検索や、ページングなどに利用されます。"post"は、HTTPリクエストのリクエストボディ部分（ブラウザがWEBサーバーにデータの送信先ファイルを要求する内容部分）にデータを付ける方法で、基本的には目に見えない部分でデータを送信します。そのことから、お問い合わせフォームや、ログインフォームなど、ユーザーの情報を送信するフォームに利用されます。

<form method="get または、post">

属性値

• "get"： HTTP GETメソッド。データをURLの末尾に付加して送信 （初期値）
• "post"： HTTP POSTメソッド。データをHTTPリクエストのリクエストボディに付加して送信

利用できるバージョン（HTML4.01以降）

全てのバージョン

<form method="post">

enctype属性

enctype（エンクタイプ）属性は、 encode（エンコード） type（タイプ）の略で、method属性に、"post" が指定されている時に、送信するデータのMIME Typeを指定する属性です。この属性はフォームのデータをWEBサーバが正しく解釈するための属性で、ファイルなどをフォームからアップロードする際は、"multipart/form-data" を指定する。

<form method="post" enctype="MIME Type">

属性値

• "application/x-www-form-urlencoded"： 「name属性の名前=value属性の値」の書式でURLエンコードされ送信される （初期値）
• "multipart/form-data"： フォームからファイルを送信する場合に指定
• "text/plain"： 変換されずに送信 （action属性に "mailto:メールアドレス" を指定した際などに指定）

利用できるバージョン（HTML4.01以降）

全てのバージョン

<form enctype="multipart/form-data">

accept-charset属性

accept（アクセプト）-charset（キャラセット）属性は、フォームに受け入れる文字コードを指定する属性です。複数指定することも可能で、その場合は 半角スペース で区切って指定します。（HTML5より前は、",（半角カンマ）"区切りでも指定できます。）

<form accept-charset="文字コード">

属性値

文字コード （複数指定する場合は、半角スペースで区切る）

利用できるバージョン（HTML4.01以降）

全てのバージョン

<form accept-charset="utf-8 euc-jp">

autocomplete属性 HTML5で追加

autocomplete（オートコンプリート）属性は、 <input>要素に、ブラウザによる自動補完を利用するかを指定する属性です。ただし、現状（2017年1月現在）は、この属性で自動補完を "off" に指定してもブラウザによっては自動補完はされるものもあります。

<form autocomplete="onまたは、off">

属性値

• "on"： 以前の入力内容をもとに自動補完を ON にする
• "off"： 自動補完を OFF にする

利用できるバージョン（HTML4.01以降）

HTML5 〜

<form autocomplete="off">

novalidate属性 HTML5で追加

novalidate（ノーバリデート）属性は、 フォームが送信された時に、入力内容の妥当性のチェックを無効にする属性です。

<form novalidate="novalidate">

属性値

"novalidate"：　妥当性のチェックを無効にする

利用できるバージョン（HTML4.01以降）

HTML5 〜

<form novalidate="novalidate">

name属性

name（ネーム）属性は、 フォームに名前を指定する属性です。他のフォームのname属性と重複したり、空文字にすることはできません。なお、HTML4.01では推奨されておらず、XHTML1.0でも非推奨、XHTML1.1では廃止されているので注意が必要です。代わりに、id属性を使いましょう。

<form name="フォームの名前">

属性値

文字列

利用できるバージョン（HTML4.01以降）

HTML4.01、 XHTML1.0 （Transition/Frameset）、 HTML5 〜

<form name="contact">

target属性

target（ターゲット）属性は、 データを受け取るファイルを表示する場所を指定する属性です。属性値にはウインドウまたはタブの名前を指定するか、アンダースコアから始まる特別なキーワードが指定できます。

<form target="表示する場所">

属性値

ウインドウまたはタブの名前または、以下のアンダースコアから始まる特別なキーワード

• "_blank"： 新しいウインドウまたはタブでリンク先のページを表示
• "_self"： 現在のウインドウまたはタブでリンク先のページを表示（初期値）
• "_parent"： <iframe>要素を使っていて親ページがある場合は親のウインドウまたはタブに表示。なければ_seftと同じ
• "_top"： <iframe>要素を使っていて親ページがある場合は、最も上位の親のウインドウまたはタブに表示。なければ_seftと同じ

利用できるバージョン（HTML4.01以降）

HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）、 HTML5 〜

<form target="_blank">

accept属性 HTML5で廃止

accept（アクセプト）属性は、 受け取るデータのMIME Typeを指定する属性です。複数指定する場合は ",（半角カンマ）"で区切って指定します。なお、この属性はHTML5で廃止されました。

<form accept="MIME Type">

属性値

MIME Type

利用できるバージョン（HTML4.01以降）

HTML4.01、 XHTML1.0、 XHTML1.1

<form method="post" accept="image/gif,image/jpeg,image/png">

form要素のサンプル

シンプルなお問い合わせフォームの例

<form action="" method="post">
  <dl>
    <dt><label for="your_name">お名前</label></dt>
    <dd>
      <input type="text" name="your_name" id="your_name">
    </dd>
    <dt><label for="your_email">メールアドレス</label></dt>
    <dd>
      <input type="email" name="your_email" id="your_email">
    </dd>
    <dt><label for="message">お問い合わせ内容</label></dt>
    <dd>
      <textarea name="message" id="message" cols="30" rows="10"></textarea>
    </dd>
  </dl>
  <p><input type="submit" value="送信"></p>
</form>

サイト内検索フォームの例

<form action="">
  <div>
    <label for="searchbox">サイト内検索</label>
    <input type="search" name="s" id="searchbox" placeholder="検索キーワード">
    <input type="submit" value="検索">
  </div>
</form>

ファイル送信フォームの例

ファイルを送信する際は、enctype属性に "multipart/form-data" を指定する

<form action="" method="post" enctype="multipart/form-data">
  <dl>
    <dt>添付ファイル</dt>
    <dd>
      <input type="file" name="attachment">
    </dd>
  </dl>
  <p><input type="submit" value="送信"></p>
</form>

仕様

HTML5.1

4.10.3. The form element

HTML5

4.10.3 The form element

HTML4.01

17.3 The FORM element

関連する要素

• <input>要素
• <textarea>要素
• <select>要素
• <option>要素
• <optgroup>要素
• <button>要素
• <label>要素
• <fieldset>要素
• <legend>要素

関連するレッスン

フォーム関連の要素 HTML 入門#16

お問い合わせフォームなどで使うフォーム関連の要素を学習しましょう。