HTML の隠しフィールドの紹介と例

HTML の隠しフィールドの紹介と例
基本的な構文:

<input type="hidden" name="フィールド名" value="値">

効果:

1 隠しフィールドは、ページ上のユーザーには表示されません。フォームに隠しフィールドを挿入する目的は、フォームを処理するプログラムで使用する情報を収集または送信することです。閲覧者がフォームを送信するために「送信」ボタンをクリックすると、隠しフィールドの情報もサーバーに送信されます。

2 フォームを送信するときに、セッション キーなど、ユーザーの ID を確認するための情報をユーザーに提供する必要がある場合があります。もちろん、これらのことは Cookie を使用して実現することもできますが、隠しフィールドを使用する方がはるかに簡単です。また、ブラウザがサポートしていない、またはユーザーがクッキーを無効にしているといった問題も発生しません。

3 フォームに複数の送信ボタンがある場合があります。プログラムは、ユーザーが送信するためにどのボタンを押したかをどのように判断するのでしょうか?隠しフィールドを記述し、各ボタンに onclick="document.form.command.value="xx"" を追加することができます。その後、データを受け取った後、まずコマンドの値をチェックして、ユーザーが送信するためにどのボタンを押したかを知ることができます。

4 Web ページ上に複数のフォームが存在する場合があります。複数のフォームを同時に送信できないことはわかっていますが、これらのフォームが相互に作用する場合があります。フォームに隠しフィールドを追加して、それらを接続することができます。

5 JavaScript はグローバル変数をサポートしていませんが、グローバル変数を使用しなければならない場合もあります。最初に値を隠しフィールドに格納しておけば、その値は失われません。

6 別の例としては、ボタンが押されたときに 4 つの小さなウィンドウがポップアップ表示され、そのうちの 1 つの小さなウィンドウをクリックすると、他の 3 つのウィンドウが自動的に閉じられるというものがあります。ただし、IE は小ウィンドウ同士の呼び出しをサポートしていないため、親ウィンドウにのみ隠しフィールドを書き込むことができ、小ウィンドウは隠しフィールドの値が近いことを検出すると、自身を閉じます。

例: 送信ボタンをクリックしたときに数値に 1 を追加するには、hidden を使用します。

値の自動増分.htm

コードをコピー
コードは次のとおりです。

<form action="値増分.ashx" method="post">
<input type="hidden" name="_viewstate" value="a" />
<input type="hidden" name="_div" value="@n" />
<!-- <input name="txt" type="text" value="@value" />-->
<div>@n</div>
<input type="submit" value="click" />
</フォーム>

一般的なハンドラ実装の使用

値の自動増分.ashx

コードをコピー
コードは次のとおりです。

整数n = 0;
パブリック void ProcessRequest (HttpContext コンテキスト) {
context.Response.ContentType = "text/html";

文字列パス = context.Request.MapPath("値の増分.htm");
文字列 html = System.IO.File.ReadAllText(パス);
// ページが初めて読み込まれたかどうかを確認します
文字列viewstate = context.Request.Form["_viewstate"];
if (!string.IsNullOrEmpty(viewstate))
{
//投稿ボタンをクリック
//隠しフィールドの値を取得する
文字列 s = context.Request.Form["_div"];
if (int.TryParse(s, out n))
{
n++;
html = html.Replace("@n",n.ToString());
}
}
それ以外
{
//ページが初めて読み込まれると、divとdivに対応する隠しフィールドに値が割り当てられます
html = html.Replace("@n", n.ToString());
}
コンテキスト.Response.Write(html);
}

<<:  静的ページと動的ページの実行メカニズムの説明

>>:  M1 ProチップでVueプロジェクトを開始する方法

推薦する

MySql Group Byは複数のフィールドのグループ化を実装します

日常の開発タスクでは、データ テーブル内のグループ化フィールドに基づいて統計データを取得するために、...

DockerにJava環境をインストールするための実装手順

この記事は Linux centos8 をベースにして、docker をインストールし、イメージをプ...

JavaScript 関数のパフォーマンスを測定するさまざまな方法の比較

目次概要パフォーマンス.nowコンソール.time時間精度を短縮注意事項分割して征服する入力値に注意...

HTML テーブルの空白セル補完を実装する方法

私が初めて Web 開発を独学で学んだ頃は、いわゆる DIV/CSS レイアウトはなく、テーブル レ...

Vue のプロダクション環境と開発環境を切り替えてフィルターを使用する方法

目次1. 本番環境と開発環境を切り替える最初の方法: .envファイルを設定する2番目の方法2. フ...

CentOS 7.6 仮想ネットワーク カードのバッチ追加、変更、削除操作の紹介

1 カーネルにtunモジュールがあるかどうかを確認する modinfo tun modprobe t...

IE6 の歪み問題

質問: <form...> の下の <input type="hidde...

Docker ベースの Redis マスタースレーブ クラスタの実装

目次1. Redisイメージを取得する2. 6つのRedisコンテナを作成する3. Redisコンテ...

sshとは何ですか?使い方は?どのような誤解があるのでしょうか?

目次序文SSHとは何かssh は何に使用されますか? sshの使い方ssh 再修正要約する序文ssh...

Windows 10 システムに mysql-8.0.13 (zip インストール) をインストールする詳細なチュートリアル

インストール環境の説明•システムバージョン: windows10 •MySQL バージョン: mys...

Linux でのプロセスデーモン スーパーバイザーのインストール、構成、および使用

Supervisor は非常に優れたデーモン管理ツールです。自動起動、ログ出力、自動ログカットなど、...

ファイル書き込みを使用して Linux アプリケーションをデバッグする方法

Linux ではすべてがファイルなので、Android システム自体は Linux + Java だ...

Vue 基本チュートリアル: 条件付きレンダリングとリストレンダリング

目次序文1.1 機能1.2 要素の可視性を制御する方法1.3 初期レンダリングの比較1.4 スイッチ...

Linux に MySQL をインストールする方法 (yum とソース コードのコンパイル)

Linux に MySQL をインストールするには、yum インストールとソース コード コンパイ...

JSはじゃんけんゲームを実装します

この記事の例では、じゃんけんゲームを実装するためのJSの具体的なコードを参考までに共有しています。具...