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);
}
<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);
}
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
HTMLの使用は、制限されたipの投票サイト不正プログラムを達成するために
-
HTMLのテキスト外表示省略... テキストオーバーフローの実装
-
cssを使ったhtmlフォームコントロールの美化（フォームビューティフィケーション）の詳細例
-
htmlインライン要素とhtmlブロックレベル要素の概要と相違点
-
IEタグLIテキスト改行不具合について
-
画像ボタンをリセットフォームボタンとして使用する方法
-
HTMLのテーブル関連タグ10選
-
dl,dt,ddはどのような場合に使用するのが適切ですか？
-
XHTMLコードでのMarqueeタグの使用方法
-
inputなどのHTMLテキストボックスは、読み取り専用で編集できない