HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM 送信ボタンの formEnctype プロパティの使い方を徹底解説

HTML DOM の formEnctype プロパティは、送信(submit)ボタンの formEnctype 属性値を取得または設定するために使用されるプロパティです。HTML5 で導入され、type="submit" を持つ input 要素に対して利用できます。このプロパティを使うことで、フォームのデータがサーバーへ送信される際に、どのような方法でエンコードするかを指定することができます。

なお、このプロパティが機能するのは、フォームの method 属性が "post" に設定されている場合のみです。また、送信ボタンに指定した formEnctype 属性の値は、<form> 要素に関連付けられている enctype 属性の値を上書きするという点にも注意が必要です。

構文

formEnctype プロパティを設定するための構文は以下のとおりです。

submitObject.formEnctype = encoding

encoding には、次の3種類の値を指定できます。

1. application/x-www-form-urlencoded

すべての文字が送信前にエンコードされる方式です。何も指定しない場合に適用されるデフォルトのエンコード方式です。

2. multipart/form-data

文字を一切エンコードしない方式です。サーバーへファイルをアップロードする場合に使用されます。

3. text/plain

空白文字を「+」記号に変換するだけで、それ以外のエンコードは行われない方式です。セキュリティ上の問題があるため、実際の開発では使用しないことが推奨されています。

サンプルコード

ここで、formEnctype プロパティの具体的な使用例を見てみましょう。ボタンをクリックすると、送信ボタンの formEnctype 属性値が変更される仕組みです。

<!DOCTYPE html>
<html>
<head>
<script>
    function changeEnc() {
        document.getElementById("SUBMIT1").formEnctype = "application/x-www-form-urlencoded";
        document.getElementById("Sample").innerHTML = "formenctype属性の値は現在 'application/x-www-form-urlencoded' です";
    }
</script>
</head>
<body>
<h1>Submit formEnctype プロパティの例</h1>
<form id="FORM_1" action="/Sample.php" style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Loc"> <br><br>
<input type="submit" id="SUBMIT1" formenctype="multipart/form-data">
</form>
<br>
<button onclick="changeEnc()">CHANGE</button>
<p id="Sample"></p>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOM 送信ボタンの formEnctype プロパティの使い方を徹底解説

初期状態では、送信ボタンの formEnctype 属性には「multipart/form-data」が設定されています。ここで「CHANGE」ボタンをクリックすると、JavaScript の changeEnc() 関数が呼び出され、formEnctype の値が「application/x-www-form-urlencoded」に変更されます。

HTML DOM 送信ボタンの formEnctype プロパティの使い方を徹底解説

このように、formEnctype プロパティを使用すれば、JavaScript から動的にフォームデータのエンコード方式を切り替えることが可能です。特にファイルアップロードの有無によってエンコード方式を使い分けたい場合などに役立ちます。

  1. HTML DOM 送信ボタンの formTarget プロパティとは？使い方を徹底解説

    HTML DOM の Input Submit formTarget プロパティは、フォームの送信ボタン（input type=submit）における formtarget 属性の値を取得・設定するためのプロパティです。このプロパティで指定した場所に、フォーム送信後のサーバーからのレスポンスが表示されます。なお、formTarget プロパティを設定すると、<form> 要素自体に指定された target 属性の値が上書きされる点に注意してください。この属性は HTML5 において、type=submit を持つ input 要素向けに新たに導入されました。構文（シンタックス）fo

  2. HTML DOMのInput Submit formNoValidateプロパティとは？使い方とサンプルコードを解説

    HTML DOM の Input Submit（送信ボタン）における formNoValidate プロパティは、送信ボタンの formNoValidate 属性値を取得・設定するために使用されます。このプロパティを使うことで、フォームデータがサーバーへ送信される際にバリデーション（妥当性検証）を行うかどうかを制御できます。<form> 要素に設定された novalidate 属性よりも優先される点が大きな特徴で、HTML5 において type=submit の input 要素向けに新たに導入されました。 構文 formNoValidate プロパティを設定する場合の構文は以下の