こわれたHTML構造でもEnter押下時のimplicit submissionをサポートする方法

implicit submission とは

formタグ内でEnterを押したらformがサブミットされるという仕様。

以下のように、formタグ内に input type="submit" 要素があると、

<!doctype html>
<html>
<body>
  <form>
    <input type="text" name="id" />
    <input type="text" name="password" />
    <button type="submit">submit</button>
  </form>
</body>
</html>

Enterを押下したらサブミットされる。

f:id:kimulla:20191201210440g:plain

課題

やむを得ない事情で、以下のような構造のHTMLを書くと、implicit submittion がサポートされない。 Bootstrapのmodalとかな！レイアウトがそんなに大事なんかワレ！
参考: Bootstrap Modal

<!doctype html>
<html>
<body>
  <form>
    <input type="text" name="id" />
    <input type="text" name="password" />
  </form>
  <button type="submit">submit</button>
</body>
</html>

解決方法

HTML5から追加されたform属性を使うとimplicit submission をサポートできる。これで各要素が指定されたform要素に含まれるかのように扱われる。

<!doctype html>
<html>
<body>
  <form id="my-form">
    <input type="text" name="id" />
    <input type="text" name="password" />
  </form>
  <!-- formの属性にformタグのidを指定する -->
  <button type="submit" form="my-form">submit</button>
</body>
</html>

検証環境

Google Chrome 63.0.3239.84

参考

implicit submission

<!doctype html>
<html>
<body>
  <form>
    <input type="text" name="id" />
    <input type="text" name="password" />
    <button type="submit">submit</button>
  </form>
</body>
</html>