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プロジェクトを開始する方法

推薦する

CSSレイアウトで中央揃えレイアウトを実現する方法

1. 親コンテナーをテーブルに設定し、子をインライン要素に設定します。テキストを表示するサブコンテン...

Innodb で MySQL の 2T テーブルをすばやく削除する方法の例

序文この記事は主に、MySQL の Innodb で 2T の大きなテーブルをすばやく削除する方法に...

MySQL データベース面接に必須の 3 つのログの紹介

目次1. redo ログ (MySQL ストレージ エンジン InnoDB のトランザクション ログ...

すべてのウェブ開発者が知っておくべき61のこと

通常、全員のスピーチを最初から最後まで読む必要があります。ただし、Stack Overflow には...

MySQL の一般的な日付比較および計算関数

MySql での時間比較の実装unix_timestamp() unix_timestamp 関数は...

Docker-compose を使用して ELK をデプロイするためのサンプル コード

環境ホストIP 192.168.0.9 Docker バージョン 19.03.2 docker-co...

Docker で MySQL マスター スレーブ レプリケーションを実装するためのサンプル コード

目次1. 概要1. 原則2. 実装3. スレーブインスタンスを作成する4. マスタースレーブ構成要約...

CentOS 7.5 が Varnish キャッシュサーバー機能を導入

1. ワニスの紹介Varnish は、高性能なオープンソースのリバースプロキシサーバーおよび HTT...

MySQL 外部キー制約の一般的な操作の例 [表示、追加、変更、削除]

この記事では、例を使用して、MySQL 外部キー制約の一般的な操作について説明します。ご参考までに、...

Ubuntu 19にTheanoをインストールする際の問題を解決する

解決: pythearn2 パッケージをダウンロードしたディレクトリで、setup.py ファイルを...

vue+element カスタムクエリコンポーネント

この記事では主に Vue プロジェクトを紹介します。要素の導入を前提として、コンポーネントを 2 回...

CentOS SVN サーバーで複数のプロジェクトを管理する方法

一つの要求一般的に、企業には複数のプロジェクトがあります。SVN サーバーを設定した後は、プロジェク...

擬似静的およびクライアント適応型 Nginx の設定方法

バックエンドは thinkphp3.2.3 フレームワークを使用します。他の言語を使用している場合は...

CentOS 7.6 への MySQL 5.7 GA バージョンのインストール チュートリアル図

目次環境の準備環境の準備mariadbをアンインストールする rpm -qa | grep mari...

jQueryは記事の折りたたみと展開の機能を実装します

この記事の例では、記事の折りたたみと展開の機能を実現するためのjQueryの具体的なコードを参考まで...