formから長い文字列を送信するときに気をつけること

formから画像をBase64に変換した文字列を送信する必要があって、inputタグにその文字列を入れて送信していたのだけど、たまに失敗することがあった。

<form action="/path/to/api" method="POST">
  <input type="hidden" name="base64" value="Base64">
</form>

調べてみると長い文字列はinputでなくtextareaに入れた方が安定して送信できるようだ。

<form action="/path/to/api" method="POST">
  <textarea name="base64">Base64</textarea>
</form>

formは見せる必要がなかったのでvisibility: hiddenにしていたのだけど、これをdisplay: noneにしたら動作が速くなった。どのブラウザでも送信してからのページのレスポンスが明らかに速くなったと体感できるほどに。

formの仕様上、disabled属性を付加しないと送信されない以外は、非表示になっていても送信される。なので特に表示する必要のないformならdisplay: noneをつけておいた方が良いみたいだ。