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>
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>
<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>
#sampleForm * {
margin: 0;
}
</style>