SIerだけど技術やりたいブログ

5年目のSIerのブログです

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

通常はformタグ内に input type="submit" 要素があれば、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>

Enterを押下したらPOSTされることがわかる。
f:id:kimulla:20171223161447g:plain

が、たまに、以下のようにこわれた構造のHTMLを書くときがある。
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>

このときに implicit submission をサポートする方法は、HTML5から追加されたform属性を使うこと。
これで各要素が指定された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>