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の再帰問題

MySQL自体は再帰構文をサポートしていませんが、自己接続を通じていくつかの単純な再帰を実現できます...

HTMLシールドの右クリックメニューと左クリック入力機能の例

右クリックメニューを無効にする <body oncontextmenu=self.event....

Vue で動的に読み込まれたローカル画像を処理する方法

問題を見つける今日は、vue ファイルにローカル画像を導入する際に問題が発生したので、この記事を書き...

JavaScript モバイル H5 画像生成ソリューションの説明

現在、WeChatパブリックアカウントの運用活動が多く、写真を生成する必要があります。生成された写真...

Linuxグループの基礎知識ポイントまとめ

1. Linuxグループの基本紹介Linux では、すべてのユーザーはグループに所属する必要があり、...

DockerにRedisをインストールし、パスワードを設定して接続する方法

Redis は分散キャッシュ サービスです。キャッシュは、大規模システムの開発やパフォーマンスの最適...

MySQL の 3 つの Binlog 形式の概要と分析

1つ。 Mysql Binlog フォーマットの紹介 Mysql binlog ログには、State...

Python MySQL データベース テーブルの変更とクエリ

Python は MySQL に接続してデータベース テーブルを変更およびクエリします。 pytho...

Adobe Brackets の簡単な使い方のグラフィックチュートリアル

Adobe Brackets は、HTML、CSS、JavaScript 用のオープンソースでシンプ...

Vue+nodeはオーディオ録音・再生機能を実現

結果: コードロジックを実装するのが主な部分であり、具体的なページ構造を一つ一つ紹介することはありま...

NodeJSとブラウザにおけるこのキーワードの違い

序文JavaScript を学習した人なら誰でも、さまざまな環境で this がどこを指すかという問...

Linux/Mac に MySQL をインストールするときにパスワードを忘れた場合の解決策

序文この記事では主に、Linux/Mac に MySQL をインストールするときにパスワードを忘れた...

MySQLデータベーストリガーの詳細な説明

目次1 はじめに2 トリガーの紹介3 トリガーを作成する4 トリガーを表示5. トリガーの削除6 結...

MySQLでテーブルを接続するいくつかの方法

MySQL テーブルでの接続方法は実は非常に簡単なので、ここではその特徴を簡単にリストします。テーブ...

Centos7 で crontab + シェル スクリプトによる定期的な自動ファイル削除の問題を解決する

問題の説明:最近、rsyncで毎回同期するデータ量が多いが、データベースのbakファイルを保持する必...