勉強したことのメモ

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

  関連記事

ブラウザがWebP対応の場合はそのまま表示し、非対応の場合はjpg/png画像を表示させる方法

ページ表示時にブラウザがWebP画像に対応している場合はそのまま表示し、非対応の ...

FileReader APIを用いて画像をアップロードせずにサムネイル表示

以前にFile APIを用いてファイル名やサイズ、形式(拡張子)を取得するメモを ...

スマホでフォームの画像アップロード部分でカメラを起動させる方法

formの画像アップロード部分で、スマホの場合にカメラで撮影させたい。以下に対応 ...

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

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

フォームの入力内容をjQueryで取得し、本文として設定した上でメーラーを起動させる方法

formで何らかを入力してもらいボタンをクリックするとメーラーが開き、先ほど入力 ...