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+JavaSwing に基づくスーパーマーケット商品管理システムの設計と実装

目次1. 機能紹介2. キーコード2.1 ホームページの機能2.2 製品情報を追加する2.3 データ...

Mysql 日付クエリの詳細な紹介

現在の日付を照会する CURRENT_DATE() を選択します。 CURDATE() を選択する;...

Linux クラウド サーバーに新しいディスクをマウントする方法

背景社内に新しいサーバーが追加され、2Tのハードディスクがマウントされました。sshでログイン後、マ...

現在のブラウザが JavaScript でヘッドレス ブラウザであるかどうかを検出する方法

目次ヘッドレスブラウザとは何ですか?なぜ「ヘッドレス」ブラウザと呼ばれるのでしょうか?ヘッドレスブラ...

Ubuntuのソースリスト(ソースリスト)を変更する方法詳細説明

導入Ubuntu のデフォルトのソースは国内サーバーではないため、更新されたソフトウェアのダウンロー...

Vue3の一般的なAPIの使用方法の紹介

目次ライフサイクルの変化反応的な参照vue2.x では ref を使用して要素タグを取得します。vu...

MySQL スロークエリログの役割と公開

序文MySQL スロー クエリ ログは、MySQL が提供するログ レコードの一種です。これは、応答...

H5レイアウト実装手順における天井と底部の吸引を解決するための純粋なCSS

どのような製品について言及したいですか?最近、ユーザーがマーケティングの変化をよりよく観察できるよう...

MongoDB の起動エラーを解決します: 共有ライブラリのロード中にエラーが発生しました: libstdc++.so.6: 共有オブジェクト ファイルを開けません:

MongoDB を起動すると、プロンプトは次のようになります。共有ライブラリのロード中にエラーが発...

tomcat8の最新のLinuxインストールプロセス

ダウンロード参考:ダウンロードするコアパッケージを選択してくださいダウンロード後、ファイルをサーバー...

jQuery は、画像を切り替えるための左ボタンと右ボタンのクリックを実装します。

この記事では、左ボタンと右ボタンをクリックすることで画像を切り替えるjQueryの具体的なコードを例...

Vue+Openlayerはmodifyを使用して要素の完全なコードを変更します

Vue+Openlayerはmodifyを使って要素を変更します。具体的な内容は以下のとおりです。 ...

DIV共通属性コレクション

1. 物件リストコードをコピーコードは次のとおりです。色: #999999 テキスト色フォントファミ...

CSS スタイルの競合を解決するいくつかの方法 (要約)

1. セレクターを調整するコンビネータを使用すると、セレクターの説明をより正確に記述できます (C...

WeChatアプレットはシンプルなチャットルームを実装します

この記事では、WeChatアプレットの具体的なコードを共有し、簡単なチャットルームを実装します。具体...