LoginSignup
19
7

More than 3 years have passed since last update.

[HTML] GET メソッドの form で URL のクエリパラメータが消えてしまう

Last updated at Posted at 2019-12-04

問題

GET メソッドの form 要素の action 属性で指定した URL のクエリパラメータが消えてしまう

<!-- 送信時に URL のクエリパラメータから part=bass が消える。 -->
<form action="/members?part=bass" method="GET">
  <input type="text" name="members[name]">
  <input type="submit"> 
</form>

原因

仕様らしい。W3C 仕様書 には次のように書かれている。

Let query be the result of encoding the form data set using the application/x-www-form-urlencoded encoding algorithm, interpreted as a US-ASCII string.
Let destination be a new URL that is equal to the action except that its <query> component is replaced by query (adding a U+003F QUESTION MARK character (?) if appropriate).

意訳: 送信先を action 属性の値と同じ URL にする。ただし、URL の query 部分は form データをエンコードした結果で置き換えられる。

仕様がないね。

対策

input[type="hidden"] を使ってフォームデータにパラメータを加える。

<!-- 送信時にクエリパラメータから part=bass が消える。 -->
<form action="/members" method="GET">
  <input type="hidden" name="part" value="bass">
  <input type="text" name="members[name]">
  <input type="submit"> 
</form>

参考

19
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
7