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

<input type="hidden">は、ユーザの目に触れなくても良い、フォームの整理やコントロールのための値を送信するのに使います。送信先は <form>要素のaction属性で指定したプログラムです。

そんなわけで、hidden で作った部品はブラウザでは非表示。プレビューされません。
でも、HTMLソースを見ればわかりますけどね。

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

hidden は「隠れた。隠された」と言う意味です。
そう言えば昔「ヒドゥン(The Hidden)」 っていう映画があったな。確か宇宙人がらみのSFでした。

正直 hidden って、PHPなどでプログラム書く人じゃないと使わないと思います。
で、今回は、知識として<input type="hidden">がどんなものか分かればいっか…的な内容です。

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

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

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">は、表示されていませんね。

お名前  :

パスワード:

質問の内容:

このサンプルでは、page=inquiry、recipient=yamada という情報が、送られます。
プログラムに例えば、「inquiry」などとラベルを付けて山田さんのメルアドに送信、などの「処理」をさせます。

Google検索トップページでも hidden を使ってましたので、ソースをコピペしておきます。
(関連部分だけ抜き出しました)

<form action="/search" id="tsf" method="GET" onsubmit="return q.value!=''"
role="search" name="f" style="display:block;background:none">
<input type=hidden name=hl value="ja">
<input type=hidden name=site value="">
<input name="source" type="hidden" value="hp">
<input class="lst lst-tbb" id="lst-ib" name="q" maxlength="2048" value=""
title="検索" size="41" type="text" autocomplete="off">
<input value="Google 検索" name="btnK" type="submit" jsaction="sf.chk">
<input value="I'm Feeling Lucky" name="btnI" type="submit" jsaction="sf.lck">
</form>

3ヶ所(グリーンのところ)に type="hidden" を使っていますね。
たぶん、日本語ページだとか、モバイルじゃないとか、いろいろ情報を集めてから、それに合った検索結果を出力するんだろうと思います。
(どうでもいいけど、テキストフィールドに2048文字も書けるって知らんかった(笑)

ちなみに、上のソースで「 " (ダブルクォーテーションマーク) 」を使っていない箇所もありますね。
これは、HTML なら属性値を「 " " 」で囲む事が必須ではないからOKみたいです。
XHTML や XML だと「 " " 」で囲むよう推奨されています。

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

HTML5のフォームサンプル

HTML5での新要素を使ったフォームのサンプル。
(今回の「hidden」は使ってないけど、恒例なので一応リンクを貼っときます)

クリックするとサンプルHTMLで見られます。
Sample46_HTML5のフォーム (サンプル)

次回予告

次回は、送信ボタン、リセットボタンなどを作りましょう。
いままでも「送信ボタン」はさんざん出てきましたけどね。
まだまだ input要素のtype属性が続きますよ。
<input type="submit">で送信ボタンを、<input type="reset">でリセットボタンを作ります。
<input type="button">では「戻る」とか「次へ」などの汎用性のあるボタンを作ります。

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 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 -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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