【CakePHPで検証】<form>タグの外側に送信ボタンを配置した時のマークアップ記法

対象の読者

フォーム画面の作成について、少し悩んでいるフロントエンジニアの方。

検証環境

■Windows11
■CakePHP(version 4.5.7)

記事を作成したきっかけ

タグを記載しているときに、タグの外側に送信ボタンを配置した時の書き方が新鮮で、しかもHTMLだけでタグと送信ボタンが紐づけられる利点があったため、さっそく共有したかったから。

さっそくコードを見てみよう

記載方法はとってもカンタン(^^♪
【手順】
①

タグにId属性を付ける。
②タグにform属性を付けて、属性の名前をタグのid値を付ける。

たったこれだけで、

タグと外側に配置したタグが紐づけられるんですね～。

index.php

<h1>ログインフォーム</h1>

<div class="registerFormArea">
    <form id="registerForm" class="" method="post" action="/registers/register" name="form">
        <input type="hidden" name="_csrfToken" value="<?= $this->request->getAttribute('csrfToken') ?>"/>
        <!--名前-->
        <input type="text" id="yourNAme" name="yourNAme" class="yourNAme"/>
        <!--メールアドレス-->
        <input type="email" id="yourEmail" name="yourEmail" class="yourEmail"/>
        <!--パスワード-->
        <input type="password" id="yourPassword" name="yourPassword" class="yourPassword"/>
    </form>
    <button type="submit" class="btn" form="registerForm">
        送信
    </button>
</div>

以上です。
ぜひ、試してみてくださいね🌝