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を押下したらサブミットされる。
課題
やむを得ない事情で、以下のような構造の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