【HTML】enctype属性でデータをエンコードしてサーバーに送信

このページについて

このページではHTMLで使う事ができるenctype属性の機能と使い方を解説しています。

enctypeはフォームで受け取ったデータをサーバーに送信する際に、どのようにエンコードするかを指定する機能を持っています。enctype属性が使えるタグはformタグ1つのみとなります。

enctype属性は対象のformタグに入れるだけでOKです。ただしformタグのmethod属性がpostである必要があります。

<form enctype="エンコード方式" method="post">
中略
</form>

enctypeのエンコード方式には3種類あります。

最初のURLエンコードが初期値として設定されています。キーと値のセットで扱われ、複数ある場合は&で区切られます。そしてキーと値に使われているテキストで英数字以外だった場合に、パーセントエンコーディングを行います。これが初期値です。

multipart/form-dataは上のURLエンコードでは扱う事が適切とされていない、バイナリデータを扱うときにも使われます。

text/plainはそのままですね。プレーンテキストです。

formenctype属性と言うものがありますが、これはinputタグとbuttonタグがtype=”submit”である時に使える属性となります。これらは「formタグのenctype属性を無視してそれぞれの指定したエンコード方式を使う」という、簡単に言えば上書き効果を持っています。

<form method="post" enctype="text/plain">
<button type="submit" formenctype="multipart/form-data">送信ボタン</button>
</form>

このように書いた場合、送信ボタンはmultipartの方のエンコードを行います。

enctype属性はformタグでしか使えませんが、受け取る際のデータをエンコードしてくれます。methodがpostでないと使えない点には注意しましょう。

formenctypeはbuttonタグとinputタグで使う事ができます。必要に応じてそちらも使いましょう。