Chromeでページを翻訳した際にinputタグが動かない

Chromeの翻訳機能を使ってページを翻訳した際に、inputボタンがサブミット出来ない事案が発生。

経緯

  1. 翻訳したページでボタン(input[type=submit])が実行できないとの報告が上がる
  2. 翻訳前の状態では問題なくサブミットできるのに、翻訳後にサブミットできない事象を再現
  3. 調べてみるとHTMLの構造に問題があることがわかった

事象

翻訳前は問題なくサブミットできるのに…

翻訳機能を使う前

サブミットできる

翻訳後はサブミットできない。

翻訳機能をONにした状態

サブミットできない

原因

formタグがtableタグとtrタグの間にあったため。

対策/修正方法

formタグをtableの外、またはtdの中に移動する。
⇛tableタグとtrタグの間に他のタグが無い状態にする

または

所感

調べてみてもなかなか根本的な原因を書いているサイトは見当たらなかったけど、そもそもtableタグとformタグが入れ子になっているのはHTML的に健全な状態ではないし、翻訳にあたってページを再構築する際に発生する問題なのだろうと推測している。

ややこしいのは、input[type=submit]タグをbuttonタグに変更するとtableとtrタグの間にformがある状態のままでも動いてしまう(サブミットできてしまう)ということ。
ただinputタグかbuttonタグかというのは問題の本質ではなくて、根本原因はやはりtableタグ以下の構造の部分だと思う。

今回はtableタグ、trタグ、formタグの構造が問題だったけど、もしかしたら他のタグでも構造的な問題があると同様にページが機能しなくなるといった問題は発生するのかもしれない。

あらためて正しいHTMLを書くことの重要性を感じた事案でした。

ではでは。

Leave a Reply

Your email address will not be published. Required fields are marked *