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

HTML DOM フォームの enctype プロパティとは？設定方法と使い方を実例で解説

HTML DOM の Form enctype プロパティは、form 要素の enctype 属性と連動するプロパティです。このプロパティを使うことで、フォームの enctype 属性値を取得したり、新しい値を設定したりできます。

enctype 属性は、method 属性の値が「POST」である場合にのみ機能します。サーバーへ送信するフォームデータをどのようにエンコード（符号化）するかを指定するための属性です。

enctype プロパティの構文

enctype プロパティを設定する際の基本構文は以下の通りです。

formObject.enctype = encoding

指定できる3つのエンコードタイプ

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

  • application/x-www-form-urlencoded：送信前にすべての文字がエンコードされます。デフォルトのエンコード方式です。
  • multipart/form-data：文字をエンコードしません。ファイルをサーバーへアップロードする場合に使用されます。
  • text/plain：スペースを「+」記号に変換するだけで、それ以外のエンコードは行いません。セキュリティ上の理由から、この方式は使用しないことが推奨されています。

Form enctype プロパティの使用例

ここでは、ボタンをクリックするとフォームの enctype 値が変更されるサンプルを見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
    form{
        border:2px solid blue;
        margin:2px;
        padding:4px;
    }
</style>
<script>
    function changeEnc() {
        document.getElementById("FORM1").enctype = "application/x-www-form-urlencoded";
        document.getElementById("Sample").innerHTML = "enctype 属性の値は 'application/x-www-form-urlencoded' に変更されました";
    }
</script>
</head>
<body>
<h1>Form enctype プロパティの例</h1>
<form id="FORM1" method="post" enctype="multipart/form-data">
<label>ユーザー名 <input type="text" name="usrN"></label> <br><br>
<label>パスワード <input type="password" name="pass"></label>
</form>
<br>
<button onclick="changeEnc()">CHANGE</button>
<p id="Sample"></p>
</body>
</html>

実行結果

上記のコードを実行すると、青い枠線で囲まれたフォームが表示されます。

HTML DOM フォームの enctype プロパティとは？設定方法と使い方を実例で解説

「CHANGE」ボタンをクリックすると、以下のように enctype の変更内容が画面に表示されます。

HTML DOM フォームの enctype プロパティとは？設定方法と使い方を実例で解説

コードの解説

まず、id=「FORM1」、method=「post」、enctype=「multipart/form-data」を設定したフォームを作成しています。enctype はフォームデータのエンコード形式を指定する属性で、ここではファイルアップロードに適した「multipart/form-data」が設定されています。フォーム内にはテキストフィールドとパスワードフィールドが配置されています。

<form id="FORM1" method="post" enctype="multipart/form-data">
<label>ユーザー名 <input type="text" name="usrN"></label> <br><br>
<label>パスワード <input type="password" name="pass"></label>
</form>

次に、ユーザーがクリックすると changeEnc() メソッドを実行する「CHANGE」ボタンを作成しました。

<button onclick="changeEnc()">CHANGE</button>

changeEnc() メソッドでは、getElementById() メソッドを使って form 要素を取得し、その enctype プロパティを「application/x-www-form-urlencoded」に設定しています。これにより、すべての文字がエンコードされるデフォルトのエンコード方式へと切り替わります。さらに、id=「Sample」の段落要素の innerHTML プロパティを使って、変更後の状態をテキストとしてユーザーに表示しています。

function changeEnc() {
    document.getElementById("FORM1").enctype = "application/x-www-form-urlencoded";
    document.getElementById("Sample").innerHTML = "enctype 属性の値は 'application/x-www-form-urlencoded' に変更されました";
}

まとめ

Form enctype プロパティを利用すれば、JavaScript から動的にフォームデータのエンコード方式を切り替えることが可能です。通常のテキスト送信には「application/x-www-form-urlencoded」、ファイルアップロードには「multipart/form-data」と、用途に応じて適切な値を選択することが重要です。

  1. HTML DOM Textareaのformプロパティとは？使い方をサンプル付きで解説

    Textarea の form プロパティとは？HTML DOM の Textarea オブジェクトが持つ form プロパティは、対象のテキストエリア（<textarea> 要素）を囲んでいる <form> 要素への参照を返します。このプロパティを利用すると、JavaScript からそのテキストエリアがどのフォームに所属しているのかを簡単に特定できます。なお、テキストエリアがどのフォームにも属していない場合は null が返される点に注意してください。構文form プロパティの基本的な構文は次のとおりです。object.form戻り値テキストエリアを含む <f

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

    HTML DOM Object の form プロパティとはHTML DOM の form プロパティは、<object> 要素が配置されている親フォーム（enclosing form）への参照を返すプロパティです。このプロパティを使うことで、JavaScript からオブジェクト要素がどのフォームに属しているかを動的に取得できます。構文form オブジェクトへの参照を取得する場合、以下のように記述します。ObjectElement.form戻り値として、該当する <object> 要素を囲んでいるフォームオブジェクトが返されます。もし <object> 要