formタグ（form要素）はフォームを表し、ユーザーが情報を入力する入力欄を設置します。HTML5におけるform要素の意味と使い方、使用できる属性、サンプルコード、使用例について解説します。
formタグの意味と使い方
公開
フォームを表す
form
<
form/form
form要素はフォームを表します。閲覧者が情報を入力できる入力コントロール（入力欄）となる要素を配置して、入力された情報などをサーバーに送信できます。
| カテゴリー | ・パルパブルコンテンツ ・フローコンテンツ |
|---|---|
| コンテンツモデル | フローコンテンツ。ただし、form要素を子孫要素に持つことは不可 |
| 使用できる文脈 | フローコンテンツが期待される場所 |
使用できる属性
フォームで送信可能な文字コードを指定します。半角スペースで区切って複数の値を指定できます。
入力されたデータの送信先をURLで指定します。サーバー側でデータを受け取るプログラムを指定するのが一般的です。
オートコンプリートの可否を以下の2つの値で指定できます。
| on | オートコンプリートを行います（初期値）。 |
|---|---|
| off | オートコンプリートを行いません。 |
フォームが送信するデータの形式を以下の値で指定できます。
| application/x-www-form-urlencoded | データはURLエンコードされて送信されます（初期値）。 |
|---|---|
| multipart /form-data | データはマルチパートデータとして送信されます。ファイルを送信する際に必ず指定します。 |
| text/plain | データはプレーンテキストとして送信されます。 |
データを送信する方式を以下の値で指定できます。
| get | 送信されるデータは、action属性で指定されたURLにクエリ文字列として付加された状態で送信されます（初期値）。 |
|---|---|
| post | 送信されるデータは本文として送信されます。大きなデータを送信するのに向いています。通常、サーバー側のプログラムで受け取るデータはこのpostメソッドを使用します。 |
フォームに名前を付与します。
入力データの検証可否を指定します。この属性が指定された場合、フォーム送信の際のデータ検証を行いません。novalidate属性は論理属性です。
データ送信後の応答画面を表示する対象を以下の値で指定します。
| _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>
関連記事
この記事が気に入ったら
いいね！しよう
できるネットから最新の記事をお届けします。
