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

最終更新日:2018年01月31日  (初回投稿日:2013年08月23日)

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

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

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

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

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

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

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>要素で「送信ボタン」などを作りましょう。
(今までも「送信ボタン」はさんざん出てきましたけどね)

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

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.