最終更新日

form要素

ユーザーが入力や選択した値をサーバーに送信できる「フォーム」用の各要素をform要素内に含めることで、HTMLドキュメント内にフォームを作成できます。ユーザーがフォームの送信操作を実行すると、データは、form要素のaction属性で送信先に指定されたサーバー上のプログラムに送信されます。ブラウザから送られたデータを実際に受け取って処理するためには、サーバー上でのプログラムの設置や設定が必要です。

form要素のaction属性は、フォームデータの送信先URLを指定します。フォーム送信のために使われる文字コードは、accept-charset属性で指定できます。文字コードを複数指定する場合は半角スペースで区切ります。

name属性では、form要素の集合内で他と区別するためのフォームの名前を指定します。空の文字列や、同じドキュメント内で別のform要素と重複する値は使用できません。

autocomplete属性は新しい属性で、オートコンプリート機能によって以前の入力内容を利用できるようにするかどうかを「on」または「off」のキーワードで指定できます。省略時の既定値は「on」で、「off」を指定すると、フォーム内のinput要素のオートコンプリート機能が無効になります。

enctype属性は、送信するデータの形式を以下のMIMEタイプのいずれかで指定します。

application/x-www-form-urlencoded(通常のフォームのデータ形式)
multipart/form-data(ファイル)
text/plain(テキスト)

method属性は、フォームのデータ送信の方法を、「get」または「post」のいずれかで指定します。GETメソッドでは、データがURLの後ろに付けられた形で送信されます。それに対しPOSTメソッドでは、データはブラウザからサーバーへ直接、送信されます。この場合は大量データの送信が可能です。method属性の指定を省略すると、データはGETメソッドで送信されます。

novalidate属性も新しい属性です。指定した場合は、フォーム送信の際に入力の内容を確認しません。この属性はたとえば、ユーザーがフォームへのデータ入力の際に入力内容を途中で保存できる「保存ボタン」を提供する場合などに有用です。

target属性は、フォーム送信後に開くページの表示方法について、_blank、_self、_parent、_topなどのキーワードか、またはウィンドウ名などの文字列で指定します。

form要素は、Flowコンテンツの記述箇所で使用できます。

HTML5での変更点
・autocomplete、novalidateの各属性が新たに追加されました。
カテゴリ タグの省略 親要素 子要素
Flowコンテンツ 省略不可 Flowコンテンツを子にできる要素 Flowコンテンツ(子孫にform要素を入れてはいけない)
属性 説明
accept-charset 文字コード フォームデータの送信時に使われる文字コードを指定します。
action URL フォームデータの送信先URLを指定します。
autocomplete on|off オートコンプリートのオンオフを指定します。省略時は「on」です。
enctype キーワード 送信するデータの形式を、「application/x-www-form-urlencoded」「multipart/form-data」「text/plain」のいずれかのキーワードで指定します。省略時は「application/x-www-form-urlencoded」が適用されます。
method get|post フォームデータの送信方法を、getまたはpostのいずれかで指定します。省略時は「get」です。
name 文字列 フォームの名前を指定します。
novalidate novalidate 論理属性。フォーム送信時の入力内容の確認を省略する際に指定します。
target 文字列 送信結果ページの表示方法について、キーワードかウィンドウ名で指定します。キーワードは4つあり、「_self」は現在のウィンドウ、「_parent」は親ウィンドウ、「_top」は最上位のウィンドウ、「_blank」は新しいウィンドウに、それぞれ表示されます。
グローバル属性 - -
イベント属性 - -
サンプルコード
<body>
  <form method="post" action="contact.php">
    <fieldset>
      <legend>お問い合わせ</legend>
      <p><label>メールアドレス:<input type="email" name="mailad"></label></p>
      <p><label>タイトル:<input type="text" name="title"></label></p>
      <p><label>メッセージ:<textarea name="message"></textarea></label></p>
    </fieldset>
    <p>
      <input type="submit" name="submit" value="送信">
      <input type="reset" name="reset" value="リセット">
    </p>
  </form>
</body>
参考文献:W3C HTML5「4.10.3 The form element」外部リンク
HOME
当サイトの活動をサポートしてみませんか?気軽にクリエイターの支援ができます。