HTML & CSS

最終更新日:
公開日:

リファレンス

HTML

フォーム

form要素

閲覧者が何か情報を入力するフォームを表します。こちらの要素の子孫要素としてinput要素を配置し使用します。入力されたデータはサーバーへ送信され、サーバー側で処理を行う形となります。

サンプルコード

<form method="post" action="">
	<p>氏名</p>
	<input type="text" name="nameForm" value="">
	<p>フリガナ</p>
	<input type="text" name="furiganaForm" value="">
</form>
  • カテゴリー

    フローコンテンツ、パルパブルコンテンツ

  • コンテンツモデル

    フローコンテンツ。ただし、form要素を子孫要素に持つことはできない

  • 使用ケース

    フローコンテンツが期待される場所

属性

グローバル属性

下記の属性に加え、グローバル属性を指定することもできます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。

accept-charset

入力値として受け付ける文字コードを指定します。

action

フォームの送信先となるURLを指定します。空の場合、現在のURL(同一ページ)となります。

autocomplete

ブラウザによる自動入力機能を設定します。

  • on

    ユーザーが以前に入力した値をもとに自動補完

  • off

    ブラウザによる自動補完を行わない設定になります。

enctype

送信時のデータ形式を指定します。

  • application/x-www-form-urlencoded

    データをURLエンコードして送信(初期値)

  • multipart/form-data

    マルチパートデータとして送信。フォームの中でファイルアップロードを受け付ける場合には必ず指定します。

  • text/plain

    プレーンなテキストデータとして送信

method

送信方式を指定します。

  • get

    データをURLにパラメータとして設定し、通信を行います。「検索文字列」や「ページ番号」など、小さいデータを送信する場合に使用します。初期値です。

  • post

    データを本文として送信します。お問い合わせフォームなどで入力値が多い場合、ファイルのアップロードがある場合などはこちらを使用します。

name

送信されたとき、サーバーサイドで処理する際の名前を指定します。

novalidate

フォーム送信時に入力データの検証をスキップしたい場合に指定します。論理属性です。

target

データ送信後のページ遷移について指定します。

  • _self

    現在のブラウジング・コンテキストへ展開します。target属性が指定されていない場合は、この値が初期値として設定されます。

  • _blank

    新しいブラウジング・コンテキストへ展開します。
    タブブラウザであれば、新しいタブを開いて展開。

  • _parent

    現在の親ブラウジング・コンテキスト(1つ上のブラウジング・コンテキスト)へ展開します。親がない場合、_selfと同じ動作になります。

  • _top

    トップレベルのブラウジング・コンテキストで開きます。親要素がない場合、_selfと同じ動作になります。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。