勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

form送信後にURLにアンカータグ(ハッシュタグ)をつける方法

   2024/01/29  HTML

フォームからGETもしくはPOSTで送信し、その後のURLにアンカータグ(ハッシュタグ)をつけたかった。データを受け取った後にPHPでリダイレクトとかさせるのかと思ったけどもっと単純にいけた。以下にサンプルとソースコードをメモ。

 

サンプル

https://taitan916.info/sample/anchor/

上記サンプルページにてフォーム送信後にURLにアンカータグが付与されるのを確認できる。

 

ソースコード

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>title</title>
</head>
<body>
    <h1>POST</h1>
    <form action="<?php echo $_SERVER['PHP_SELF'];?>#test1" method="post">
        <input type="text" name="name">
        <input type="submit" value="submit">
    </form>
    <hr>

    <h1>GET</h1>
    <form action="<?php echo $_SERVER['PHP_SELF'];?>#test2" method="get">
        <input type="text" name="name2">
        <input type="submit" value="submit">
    </form>
</body>
</html>

action属性にアンカータグをつけるだけ。

 - HTML

  関連記事

formのinput="file"でディレクトリを選択させ、ディレクトリ内のファイルを全てアップロードする方法

フォームで複数のファイルをアップロードしたい場合、input="file"を複数 ...

JSやCSSをCDN呼び出しする際のintegrity / crossorigin / referrerpolicy属性について

JavaScriptやCSSをCDN呼び出しする際、<script> ...

ajaxを使わずに非同期っぽくsubmitする

ajaxを使わずに見た目はページ遷移せず、 画像を含めたformをsubmitし ...

formでdisplay:none;にしてても送信される

formで特定の部分をdisplay:none;で非表示にしてても 内容は送信さ ...

mp3ファイルのアップロードと再生方法

mp3ファイルをformでアップロードしたかったのと、Webサイト上で再生したか ...