【HTMLだけ】フォームの送信をクリック後に任意の位置に移動する方法

お問い合わせなどのフォームで使えるテクニック。フォームの送信をクリック後にページ内の任意の位置に移動することができます。

例えば、必須項目未入力で送信をクリックした場合、フォームの頭に移動させる。ということもできます。

それでは「必須項目未入力で送信をクリックした場合、フォームの頭に移動させる」ことを例にして具体的な方法を解説していきます。HTMLだけで実装可能です。

まずは移動させたい箇所にidでアンカーポイントを作成します。

<form id="#myform">

続いてformタグのaction属性の末尾に先程つけたアンカーポイントのid名を追記します。

<form action="contact.php#myform" id="#myform">

以上で完成です。送信ボタンをクリックして未入力の必須項目があった場合、フォームの頭に移動します。