1. ホーム
  2. Web制作
  3. HTML/Xhtml

htmlにおけるhiddenフィールドの役割とその使用例

2022-01-14 18:43:23
基本的な構文
<input type="hidden" name="field__name" value="value">
役割です。
1 ヒドゥンフィールドは、ページ上でユーザーから見えないようになっています。フォームに隠しフィールドを挿入する目的は、フォームを処理するプログラムが使用できる情報を収集または送信することです。閲覧者が「送信」ボタンをクリックしてフォームを送信すると、隠しフィールドの情報もサーバーに送信されます。
2 ユーザーがフォームを送信する際に、sessionkeyなど、ユーザーを識別するための情報を与えたいことがあります。もちろん、こうしたことはクッキーを使ってもできますが、hidden fieldを使う方がずっと簡単です。また、ブラウザが対応していなかったり、ユーザーがクッキーを無効にしたりといった面倒なこともありません。
3 フォーム内に複数の送信ボタンがあることがありますが、ユーザーがどのボタンを押して送信したかをプログラムで判断するにはどうしたらよいでしょうか。hiddenフィールドを書いて、onclick="document.form.command.value="xx"を追加すれば、データを受け取った後に最初にコマンド値をチェックして、ユーザーがどのボタンを押して送信したかを知ることができます。
4 ページ内に複数のフォームが存在することがあり、複数のフォームを同時に送信できないことは分かっていますが、相互に作用することもあるので、フォームに隠しフィールドを追加してリンクさせることができます。
5 javascriptはグローバル変数をサポートしていませんが、グローバル変数を使わなければならない場合もあるので、最初にhiddenフィールドに値を入れておけば、その値が失われることはありません。
6 他にも、例えば、ボタンを押すと4つの小窓が現れ、そのうちの1つをクリックすると他の3つが自動的に閉じるといった例がある。しかし、IEは小窓同士の呼び出しをサポートしていないので、親窓に隠しフィールドを書き、小窓が隠しフィールドの値がcloseであることを確認したら、自ら閉じるしかない。
例 サブミットボタンのクリック数に1を加算するためにhiddenを使用する場合
数値の自己インクリメント.htm
コピーコード
コードは以下の通りです。

<form action="numeric self-increment.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" />
</form>

一般的なハンドラを使用して実装
数値の自己インクリメント.ashx
コピーコード
コードは以下の通りです。

int n = 0;
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/html";
string path = context.Request.MapPath("value self-incrementing.htm");
string html = System.IO.File.ReadAllText(path);
// Determine if the page is being loaded for the first time
string viewstate = context.Request.Form["_viewstate"];
If (!string.IsNullOrEmpty(viewstate))
{
//click the button post
//Get the value of the hidden field
string s = context.Request.Form["_div"];
if (int.TryParse(s, out n))
{
n++;
html = html.Replace("@n",n.ToString());
}
}
else
{
//The first time the page loads, assign values to the divs and the corresponding hidden fields of the divs
html = html.Replace("@n", n.ToString());
}
context.Response.Write(html);
}