[49-9] input要素で非表示のデータを送ろう ( hidden )

<input type="hidden">は、ユーザの目に触れなくても良い、フォームの「整理やコントロールのための値」を送信するのに使います。

hidden（ヒドゥン）は「隠れた。隠された」と言う意味。
そんなわけで、type="hidden" で作った部品はブラウザでは非表示。プレビューされません。（HTMLソースを見ればわかりますけどね）

ユーザの目に触れること無く、ユーザが書いた内容と この hidden のデータ（name属性の名前と value属性の値）をセットで送信できるというものです。

	type属性の値	部品の役割
<input>要素で作る 「非表示データ」を送信するための部品	type="hidden"	非表示データの送信

ほかの属性で機能を追加できます

この hidden も、type属性以外の属性を使って機能を追加できます。
（各属性については、それぞれのリンクで詳細をご覧ください。）

• form属性で <form>要素の外に出す
• disabled属性で「使用不可」にする

type="hidden" で「非表示データ」を送ろう

hidden は <input type="hidden" name="○○○" value="●●●">というカタチで使います。（○○○や●●●は任意のテキストを書きます）
ユーザに入力してもらったデータと一緒に、name属性でつけた名前とvalue属性の値をセットで送信することが目的なので、必ずこの2つは書きます。

では、サンプルコードです。

<form>
  <input type="hidden" name="page" value="inquiry">
  <input type="hidden" name="recipient" value="yamada">
  <p>お名前：<input type="text" name="名前"></p>
  <p>パスワード：<input type="password" name="パスワード"></p>
  <p>質問の内容：<textarea name="内容"></textarea></p>
  <input type="submit" value="送信" >
  <input type="reset" value="リセット">
</form>

プレビューはこちら。<input type="hidden">は、表示されていませんね。

お名前　　：

パスワード：

質問の内容：

このサンプルでは、<input type="hidden"> によって
「page=inquiry&recipient=yamada」という情報が、ユーザの入力した情報と共に送られます。
これをプログラムに、例えば「inquiry（問い合わせ）ラベルを付けて山田さんのメアドに送信」などの「処理」をさせれば便利ですね。

他に hidden の具体的な使用例として、
複数ページにまたがるフォーム（「次へ」ボタンなどで次のフォームに行くような）場合、入力済みのフォームの内容を、次のフォームに hidden で記述させ、最後のフォームでまとめて送る、などがあるそうです。

<input>要素の 索引ページ

<input>要素は「type属性の値」でいろいろなフォームの部品になります。
今回の「非表示データ」送信の部品以外は、下記の一覧をご覧ください。

• <input>要素の type属性の値一覧

<input>要素は、type属性以外にもたくさんの属性があり、それによってフォーム部品に機能などを加えられます。詳しくは下記の一覧をご覧ください。

• <input>要素の 他の属性一覧

次回予告

次回は、<input>要素で「送信ボタン」などを作りましょう。
（今までも「送信ボタン」はさんざん出てきましたけどね）

<input type="submit">で送信ボタン、<input type="reset">でリセットボタンを、<input type="button">で「戻る」とか「次へ」などの汎用性のあるボタンを作ります。