フォームを表す

form

< form 【 フォーム 】 属性="属性値">< /form >

form要素はフォームを表します。閲覧者が情報を入力できる入力コントロール（入力欄）となる要素を配置して、入力された情報などをサーバーに送信できます。

カテゴリー ・パルパブルコンテンツ
・フローコンテンツ
コンテンツモデル フローコンテンツ。ただし、form要素を子孫要素に持つことは不可
使用できる文脈 フローコンテンツが期待される場所
カテゴリーとコンテンツモデル

使用できる属性

accept-charset 【アクセプト・キャラクター・セット 】

フォームで送信可能な文字コードを指定します。半角スペースで区切って複数の値を指定できます。

action 【アクション 】

入力されたデータの送信先をURLで指定します。サーバー側でデータを受け取るプログラムを指定するのが一般的です。

autocomplete 【オート・コンプリート 】

オートコンプリートの可否を以下の2つの値で指定できます。

on オートコンプリートを行います（初期値）。
off オートコンプリートを行いません。

enctype 【エンコード・タイプ 】

フォームが送信するデータの形式を以下の値で指定できます。

application/x-www-form-urlencoded データはURLエンコードされて送信されます（初期値）。
multipart /form-data データはマルチパートデータとして送信されます。ファイルを送信する際に必ず指定します。
text/plain データはプレーンテキストとして送信されます。

method 【メソッド 】

データを送信する方式を以下の値で指定できます。

get 送信されるデータは、action属性で指定されたURLにクエリ文字列として付加された状態で送信されます（初期値）。
post 送信されるデータは本文として送信されます。大きなデータを送信するのに向いています。通常、サーバー側のプログラムで受け取るデータはこのpostメソッドを使用します。

name 【ネーム 】

フォームに名前を付与します。

novalidate 【ノー・ヴァリデート 】

入力データの検証可否を指定します。この属性が指定された場合、フォーム送信の際のデータ検証を行いません。novalidate属性は論理属性です。

target 【 ターゲット 】

データ送信後の応答画面を表示する対象を以下の値で指定します。

_blank 送信されるデータは、action属性で指定されたURLにクエリ文字列として付加された状態で送信されます（初期値）。
_parent リンクは現在のブラウジングコンテキストの1つ上位のブラウジングコンテキストを対象に展開されます。
_self リンクは現在のブラウジングコンテキストに展開されます。
_top リンクは現在のブラウジングコンテキストの最上位のブラウジングコンテキストを対象に展開されます。
ブラウジングコンテキスト

グローバル属性

すべての要素で使用できる属性です。
グローバル属性とイベントハンドラ属性

使用例キーワード検索用のフォームを作成する

<form method="get">
<input type="search"><input type="submit">
</form>

以下の例は、キーワードによる検索フォームの基本的な構造です。まず、閲覧者がキーワードを入力するための入力欄には、input要素のtype="search"を利用します。次に、入力されたキーワードをデータとして送信するためには、input要素のtype="submit"を利用します。これら2つの要素をfrom要素で内包することで、フォームを表しています。

<form method="get" action="cgi.bin/example.cgi">
  <input type="search" name="search" value="" placeholder="検索キーワードを入力">
  <input type="submit" name="submit" value="検索">
</form>

関連記事