「フォームでhidden属性を使って隠れた項目を作成したい」
「formタグでどのようにhidden属性を使えばいいのかわからない」
このようなお悩みをお持ちではありませんか？
HTMLの<input type=”hidden”>タグは、ユーザーに見えない形でデータをサーバーに送信するために使われる便利な機能です。しかし、具体的な使い方や安全な活用方法で迷う方も多いのではないでしょうか。
本記事では、<input type=”hidden”>の基本情報や活用場面、利用時の注意点までをわかりやすく解説します。
見えない項目をフォームで作成し、ユーザーの見やすさを向上しましょう。
見えない項目を作成したい方は、フォーム作成ツール「formrun（フォームラン）」がおすすめです。
「formrun（フォームラン）」は、以下の特徴があります。
- hidden項目を設置することが可能
- プログラミング不要
- 集計がリアルタイムで行える
- 入力補助機能が付けられる
- 条件分岐項目を付けられるため、回答数はそのままでそれぞれにあった質問に答えてもらえる
- ワンクリックでrecaptcha設定可能
- マウス操作でデザイン設定可能
- お問い合わせ管理、メール対応も可能
- 自動メールやChatworkなどツール通知まで付いている
- 有料プランも無料でトライアル可能→その後自動で請求始まることはない
ビジネス用フォーム作成ツール「formrun」では、複数人でデザイン性の高いフォームを管理できます。クリック操作で手軽にフォームの作成ができ、回答の集計も簡単です。詳しくはこちらをご覧ください。
目次 [非表示]
hidden属性は、HTMLフォームで非表示データをサーバーに送信するための重要な属性です。
この属性を使用することで、ブラウザ上に表示されないデータを含めて送信可能です。例えば、ユーザーが操作する必要のない情報（例：ユーザーIDやセッションIDなど）を、サーバーに送る場合に利用されます。
hidden属性の主な役割は、サーバー通信で必要なデータを見せずに保持することです。ソースコードを確認すれば値は見えるため、パスワードなどの機密情報には適しませんが、識別情報や処理用データなどに活用できます。
formタグに存在する主な4つのタグ
HTMLのformタグは、フォームを作成する際の基本です。formタグに関連して、よく使用される主なタグは、以下の4つです。
- inputタグ
- labelタグ
- textareaタグ
- selectタグ
ここでは、それぞれのタグを詳しく解説します。
inputタグ
inputタグは、ユーザーがデータを入力するための基本的なフィールドを作成するタグです。
type属性を使用することで、入力形式を指定でき、例えばtext、email、passwordなどがあります。さらに、name属性を設定することで、サーバー側でデータを処理する際の識別が可能です。
id属性と組み合わせてlabelタグと関連付けることで、フォームのアクセシビリティが向上します。また、type=”submit”を指定することで送信ボタンを簡単に実装できます。
labelタグ
labelタグは、入力フィールドに名前を付け、フィールドの目的を明確にするタグです。
for属性を用いて対応するidを持つinputタグと関連付けることで、ユーザーがクリックした際に自動的に対応するフィールドがアクティブになる仕組みを実現します。
このタグを使用することで、フォーム全体のアクセシビリティが向上し、視覚的には説明文として表示されます。pタグなどでも代用可能ですが、構造的に正確なコーディングの観点からlabelタグの使用がおすすめです。
textareaタグ
textareaタグは、複数行のテキスト入力フィールドを作成するためのタグです。
rows属性やcols属性を指定することで、フィールドの高さや幅を調整可能です。このタグは特に詳細な入力を求める場合に便利で、短文よりも長文の入力に適しています。
また、idとname属性を付与することで、labelタグとの関連付けやデータ識別が可能です。inputタグとの大きな違いは、textareaタグが複数行の入力に対応している点です。
selectタグ
selectタグは、ユーザーが複数の選択肢から1つまたは複数を選ぶためのドロップダウンメニューを作成するためのタグです。
内部にoptionタグを複数含み、それぞれが選択肢として表示されます。name属性を使用することで、選択された値をサーバーに送信可能です。
また、multiple属性を追加すると複数選択が許可されます。主に、UI設計で選択肢を効率的に作成するために広く活用されています。
HTMLの<input type=”hidden”>タグは、ユーザーに表示する必要のないデータをサーバーに送信する際に使用されます。name属性とvalue属性を組み合わせて情報を格納する形です。
コード例は以下の通りです。
<form action="/action_page.php" method="post">
<input type="hidden" name="時間" value="<現在時刻を取得するコード>">
<button type="submit">送信</button>
</form>このコードでは、ボタンを押すと現在時刻がサーバーに送信されます。JavaScriptを使うことで、送信直前に値を変更することも可能です。
かといって、自身で1からプログラミングを行うのは難しい方も多いのではないでしょうか。コードを使わず簡単に見えない項目を作りたい方は、こちらをご覧ください。
>> 【応用】見えない項目が入ったフォームを作成する手順
フォーム内でhidden属性を使う場面は主に以下の3つです。
- データベースの管理
- セキュリティの向上
- ユーザーが入力するデータ以外の送信
ここでは、それぞれの場面を詳しく解説します。
パラメータに関して更に詳細に知りたい方は、こちらをご覧ください。
>> 【便利な機能】パラメータを使ってフォーム入力の手間を削減！初期値の設定と活用シーン紹介
データベースの管理
1つ目は、データベースを管理したい場面です。
フォーム編集時に、対象データのIDをhiddenフィールドに保持することで、サーバーはどのデータを処理すべきかを識別できます。
この仕組みは、特定のレコードを更新する際に重要です。例えば、ブログ記事の編集フォームでは、記事IDをhiddenフィールドに設定しておき、送信後にサーバーで対応するデータを特定する形で活用されます。
この方法により、ユーザーがデータIDを直接入力する手間を省き、効率的なデータ操作が可能です。
セキュリティの向上
2つ目は、セキュリティを向上したい場面です。
例えば、フォーム送信時にCSRFを防ぐトークンをhiddenフィールドに埋め込むことで、不正なデータ送信を阻止できます。
また、ユーザーの認証情報やセッションデータを安全に送信する用途にも適しています。ただし、hiddenフィールドの値はブラウザ開発者ツールで確認できるため、機密性が高いデータを扱う場合はさらに高度なセキュリティ対策が必要です。
ユーザーが入力するデータ以外の送信
3つ目は、ユーザーが入力するデータ以外の送信を行う場面です。
hiddenフィールドは、ユーザーが直接入力しないデータをサーバーに送信する際にも役立ちます。
例えば、現在のページ状態や表示データに関連する情報、またはサーバーが必要とする初期データを保持して送信します。この技術は、多言語対応や動的なページ生成でも使用され、特定の条件下でのフォーム動作を柔軟に設定可能です。
hidden属性で設定された値はソースコード上に記述されているため、誰でも簡単にその内容を確認できます。
そのため、hidden属性にはアカウントIDやパスワードなど、重要な情報を含めないようにしましょう。特に、フォーム作成時にhidden属性を利用する際は、万が一その値が漏洩しても問題のない内容であることを事前に確認する必要があります。
また、個人情報を含むデータをhidden属性に使用することは避けましょう。この場合は、サーバーサイドでの処理を行う設計の採用がおすすめです。ユーザーのプライバシーを保護し、不正利用やデータ漏洩のリスク軽減につながります。
フォームに見えない項目を作成するならフォーム作成ツール「formrun」がおすすめ！
formrunには予約フォームに活用できる以下の特徴があります。formrunを利用するメリットは下記の3点です。
- フォーム作成が簡単にできる
- 万全のセキュリティ
- テンプレートが豊富
フォーム作成が簡単にできる
非エンジニアでもマウスだけの簡単な操作中心でフォームが作成できるため、フォーム利用までに準備期間が短い場合にも役立ちます。
同じフォーム作成ツールのGoogleフォームと比べてもセキュリティ条件が高く、細かい設定まで機能が豊富となっているため、ビジネス利用目的では、formrunのユーザーのうち7割がGoogleフォームから変更しています。
メールアドレスがあれば無料登録可能！無期限で無料プランが利用できるのでformrunでぜひフォームを作成してみてください。
テンプレートはこちらをご覧ください。
>> テンプレート一覧
万全のセキュリティ
セキュリティが高いのもformrun(フォームラン)の魅力のポイントです。「ISO 27001 (ISMS)」の認証取得やプライバシーマークの付与認定、SSL/ TLSによる暗号化通信、24時間365日のサーバー監視体制などさまざまな対策がとられています。
フォームは、名前や住所、メールアドレスなど重要な個人情報を取り扱います。ユーザーに安心してフォームを利用してもらうためにも、フォームのセキュリティは重要です。
安全なフォーム運用や個人情報の取り扱いは、顧客からの信用に大きく影響するため、セキュリティを重視している方にはformrunの利用がおすすめです。
テンプレートが豊富
formrun（フォームラン）は、120種類以上のテンプレートが用意されています。
アンケートフォームで使えるテンプレートは16種類あり、主に顧客アンケート、イベント・セミナーアンケート、社内アンケートなど用途に合わせたテンプレートが選べます。
formrunのテンプレートはそのまま利用できるリッチな見た目で、用途に合わせて必要な設問が最適な順番で配置されているため、設問タイトルを少し修正するだけで簡単に高クオリティのフォームを作成可能です。
テンプレートの設問に項目の追加・削除・順番の変更などもワンクリックで簡単に修正できます。ぜひformrunのテンプレートを使用して高クオリティなフォームを作成してみてください。
本記事では、HTMLフォームで使用する<input type=”hidden”>タグの基本や主な使い方、利用時の注意点を詳しく解説しました。
<input type=”hidden”>は、ユーザーに表示する必要のないデータをサーバーに送信する際に便利な機能です。特に、データベース管理やセキュリティ向上、ユーザーが入力しないデータの送信など、幅広い場面で活用されています。
ただし、hidden属性で設定された値は誰でも確認できるため、重要な情報を扱う際には注意が必要です。本記事を参考に、安全で便利なフォーム作成を行い、業務の効率化とデータ管理の向上を実現しましょう。
見えない項目を安全に作成したい方は、フォーム作成ツール「formrun（フォームラン）」がおすすめです。
「formrun（フォームラン）」は、以下の特徴があります。
- hidden項目を設置することが可能
- プログラミング不要
- 集計がリアルタイムで行える
- 入力補助機能が付けられる
- 条件分岐項目を付けられるため、回答数はそのままでそれぞれにあった質問に答えてもらえる
- ワンクリックでrecaptcha設定可能
- マウス操作でデザイン設定可能
- お問い合わせ管理、メール対応も可能
- 自動メールやChatworkなどツール通知まで付いている
- 有料プランも無料でトライアル可能→その後自動で請求始まることはない
ビジネス用フォーム作成ツール「formrun」では、複数人でデザイン性の高いフォームを管理できます。クリック操作で手軽にフォームの作成ができ、回答の集計も簡単です。詳しくはこちらをご覧ください。
formrunやフォーム作成や顧客管理に関する情報を発信しております。
EFO（エントリーフォーム最適化）や問い合わせ対応など、
フォームに関するお悩みを解決します。
