備忘録

【HTML】iPhoneでフォームのsubmitボタンが反応しなかった原因

hidden要素を含むフォームを作成した際、iPhoneにおいてsubmitボタンが反応しなくなるという不具合が発生しました。

GET値やPOST値が空になるなどではなく、そもそもボタンを押しても無反応(サーバーにリクエストしている様子がない)状態です。

AndroidやWindowsでは問題ありません。(Macは確認できていません。)

なお該当端末ではSafariでもLINE内のブラウザでも症状は発生し、ブラウザ固有の問題ではない様子でした。

以下が該当のソースコード(そのままではありませんが)です。

<form method="post">
    <input type="number" name="hoge" value="999" required hidden>
    <button type="submit">submit</button>
</form>

どこに問題があるか分かりますか?

ボタンが反応していなかったことから、問題はサーバー側の処理ではないことは予想できていたのですが、それでも、思い込みも含めて発見までに少し時間がかかってしまいました。

iPhoneを含めて正常に動くコードはこちらです。

<form method="post">
    <input type="hidden" name="hoge" value="999" required>
    <button type="submit">submit</button>
</form>

違いには気づいていただけましたか?

<input hidden>が<input type=”hidden>に変わっています。

要素を隠したい場合、CSSでdisplay:none;とかvisibility:hidden;とかすることが多いので、あまり深く理解していなかったのですが、何も考えずに

「確かタグにhidden付けたら非表示にできたはず……行けた行けた、WindowsでもAndroidでも問題なし」

と済ませてしまったことで、不具合を生じさせる結果となってしまいました。

しかも、この現象が検索しても出て来ず(調べ方が下手だっただけかもしれません)、マニュアルでinputタグを再確認して初めて怪しいと気がつきました。

もしかしたらやってしまいがち??なミスかもしれません。

この記事が解決のお役に立てれば幸いです。