SYNCERのロゴ
アイキャッチ画像

FormData - フォームの内容

FormDataは、フォームの内容を管理するための機能を備えたインターフェイスです。

概要

名前
FormData
IDL
[Constructor(optional HTMLFormElement form),
 Exposed=(Window,Worker)]
interface FormData {
  void append(USVString name, USVString value);
  void append(USVString name, Blob blobValue, optional USVString filename);
  void delete(USVString name);
  FormDataEntryValue? get(USVString name);
  sequence<FormDataEntryValue> getAll(USVString name);
  boolean has(USVString name);
  void set(USVString name, USVString value);
  void set(USVString name, Blob blobValue, optional USVString filename);
  iterable<USVString, FormDataEntryValue>;
};

typedef (File or USVString) FormDataEntryValue;
仕様書
https://xhr.spec.whatwg.org/#formdata

チュートリアル

FormDataはコンストラクタで作成します。

var formData = new FormData() ;
formData.append( "name", "あらゆ" ) ;
formData.append( "age", "18" ) ;

form要素(HTMLFormElement)を引数にすると、その内容がオブジェクトに反映されます。

<form action="regist.php" method="post" id="hoge">
	<input name="name" value="あらゆ">
	<input name="age" value="18">
</form>
var element = document.getElementById( "hoge" ) ;
var formData = new FormData( element ) ;

オブジェクトは、ajax通信の際、XMLHttpRequestの引数にすることができます。HTMLのform要素で送信するのと同じように、ajax通信でデータを送信できます。

var xhr = new XMLHttpRequest() ;
xhr.open( "POST", "regist.php" ) ;
xhr.send( formData ) ;

iterable属性があるため、Array.prototype.forEach()でループ処理にかけることができます。コールバック関数には、第1引数に値、第2引数にキー名が渡されます。

formData.forEach( function ( value, name ) {
	console.log( value, name ) ;
} ) ;

// "あらゆ", "name"
// "18", "age"

コンストラクタ

FormData()

新しいFormDataのオブジェクトを作成します。

プロパティ

固有のプロパティはありません。

メソッド

append()

フォームにデータを追加します。

delete()

フォームのデータを削除します。

get()

ある名前のフォームのデータを1つ取得します。

getAll()

あるキー名のフォームのデータを全て取得します。

has()

フォームのデータが存在するか確認します。

set()

フォームのデータを更新します。

定数

固有の定数はありません。

イベント

固有のイベントハンドラはありません。

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
FormData 5.1+ 10+ 12+ 4.0+
append() 5.1+ 10+ 12+ 4.0+
delete() 50+ 39+××× 37+××
FormData() 5.1+ 10+ 12+ 4.1+
get() 50+ 39+××× 37+××
getAll() 50+ 39+××× 37+××
has() 50+ 39+××× 37+××
set() 50+ 39+××× 37+××
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月24日 (火)
コンテンツを公開しました。