[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">で「戻る」とか「次へ」などの汎用性のあるボタンを作ります。

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

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

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
01 | 2018/02 | 03
- - - - 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 - - -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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