勉強したことのメモ

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

  関連記事

HTML内に動画(mp4ファイル)を埋め込んで配信する方法

Webページ内にYoutubeとかを用いずに動画(mp4)ファイルを配信したいと ...

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

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

lazyload.js等のライブラリを使わずHTMLのみで画像の遅延読み込みを行う方法

画像を遅延読み込みさせるとなるとだいぶ前に書いたlazyload.jsを用いる方 ...

readonlyについて

日付ピッカーとかをテキストボックスに入れた際に、 ピッカー入力とあわせて直接入力 ...

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

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