カスタム検索

hidden(隠し項目)

<input>タグの属性で、type="hidden"を指定すると、隠し項目を定義します。隠し項目はブラウザには表示されません。

主に隠し項目は、プログラムには値を渡したいが、ブラウザには表示させたくないという場合に使用されます。例えば、住所などの情報を入力してもらい、メールでその情報を受け取る場合プログラム(フォームメール)を考えた場合、流れとして必要なページは、

  1. フォームに入力してもらうページ
  2. 入力内容の確認と、実際に送信するためのボタンがあるページ

が必要になることが多いと思います。この場合、2のページが表示された段階では、まだ確認段階で、実際にメールが送信されるのは、2のページの送信ボタンがクリックされ、プログラムにデータ(名前と値のセット)が渡されたときになります。この際、2のページで隠し項目を定義しておき、1のページで入力された内容を含ませておくことで、プログラムにデータを渡すことができます。

隠し項目で使用できる属性はnameとvalueのみで、この2つの属性は必須となります。

隠し項目の属性
属性 name   value  

name属性

name属性は、<input>要素に名前を付けます。ここで付けられた名前は、送信されたフォームを処理するプログラムなどから参照されます。type="hidden"を指定した場合、このname属性は必須となります。

プログラムから参照されるので、名前の付け方には注意が必要です。当然、日本語はダメで、記号等も使わないでください。また、最初の文字が数字にならないようにし、スペースが必要な場合は、代わりに「_」(アンダーバー)を使用するようにしてください。そうしないとプログラムでの処理に問題が発生する場合があります。

フォームでのname属性は、<a>タグ等で使用されるname属性とは役割が異なるものです。

value属性

value属性には、フォームが送信された場合にプログラムに渡す値を指定します。隠し項目にはvalue属性は必須です。

入力例

入力例です。この場合、送信ボタンがクリックされると、product_no=CRCS3220とproduct_name=CREAR_CASEがプログラムに渡されます。

input_hidden.html
<html>
    <head>
        <title>&lt;input type="hidden" /&gt;の例</title>
    </head>
    <body>
        <form action="プログラムのパス" method="get">
            <input type="hidden" name="product_no" value="CRCS3220" />
            <input type="hidden" name="product_name" value="CREAR_CASE" />
            <input type="submit" value="資料請求" />
        </form>
    </body>
</html>
CopyLeft 2010 Webデザインレッスン プライバシーポリシー サイト管理者に連絡