formObject.enctypeプロパティ

formObject.enctypeは、form要素(フォーム要素)のenctype属性を取得、もしくは、設定するプロパティ。

enctype属性には、送信データのエンコード方法を指定することができる。

構文

取得

var $enctype = $formObject.enctype;

戻り値

form要素(フォーム要素)のenctype属性の値。

設定

$formObject.enctype = "encodeType";
encodeType
送信データのエンコード方法を指定する。
  • application/x-www-form-urlencoded:全ての文字をURLエンコードする。
  • multipart/form-data:フォームにファイルを送信する機能がある場合に指定する。
  • text/plain:スペースだけ「+」記号に変換する。その他の特殊文字はエンコードしない。
初期設定値は「application/x-www-form-urlencoded」。

サンプル

変更後のform要素のenctype属性の値:

検索語:

サンプルの動作について

  • 「application/x-www-form-urlencoded」ボタンをクリックすると、form要素のenctype属性の値を「application/x-www-form-urlencoded」にする。「変更後のform要素のenctype属性の値:」の右横に「application/x-www-form-urlencoded」と表示する。
  • 「multipart/form-data」ボタンをクリックすると、form要素のenctype属性の値を「multipart/form-data」にする。「変更後のform要素のenctype属性の値:」の右横に「multipart/form-data」と表示する。
  • 「text/plain」ボタンをクリックすると、form要素のenctype属性の値を「text/plain」にする。「変更後のform要素のenctype属性の値:」の右横に「text/plain」と表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function setEnctype( $enctype ) {
    var $elementReference = document.getElementById( "sampleForm" );
    $elementReference.enctype = $enctype;
    var $enctype = $elementReference.enctype;
    document.getElementById( "sampleOutput" ).innerHTML = $enctype;
}
</script>

HTML

<button onclick="setEnctype('application/x-www-form-urlencoded');">application/x-www-form-urlencoded</button>
<button onclick="setEnctype('multipart/form-data');">multipart/form-data</button>
<button onclick="setEnctype('text/plain');">text/plain</button>
<p>変更後のform要素のenctype属性の値:<span id="sampleOutput"></span></p>
<form id="sampleForm" method="get" enctype="application/x-www-form-urlencoded" action="http://alphasis.info/" target="_blank">
    検索語:<input type="text" name="s" value="JavaScript">
    <br />
    <button type="submit">送信</button>
</form>

CSS

<style>
#sampleForm * {
    margin: 0;
}
</style>

スポンサード リンク

カテゴリー: DOM, Formオブジェクト, JavaScript, プロパティ, リファレンス パーマリンク