隠しデータフィールド(input type=”hidden”)を設置する

よくコードに関するお問い合わせを頂くので、webエンジニアに人気のslackでゆるコミュを作りました。
コードに関する質問はゆるコミュでお願いします。ゆるコミュの参加・質問は無料です。

HTML / css / laravel / Django / wordpress / shopify / php / python / javascript / jQuery / React / AWS など初心者から中級者の質問を中心にお答え致します。

メンターとしての参加も大歓迎です。

フォームのinput要素の隠しデータフィールドはWebブラウザの画面には表示されないので、ユーザーはフィールドの入力も値の確認もできないHTMLフォーム項目です。

フォームが送信されると隠しデータフィールドの値も一緒に送信されます。

この記事では隠しデータフィールドの使い方やjavascript(jQuery)を使って、隠しデータフィールドの値を取得・セットなどの操作方法をご紹介します。

隠しデータフィールドはユーザーがフィールドの入力も値の確認もできませんが、デバグツールなどを使うと簡単に値を変更することができます。

送信された入力値が正しい数字であるかサーバー側で検証する必要があります。

目次

フォームで隠しデータフィールドの用途

隠しデータフィールドは表示されないので、ユーザーが入力することも値を確認することもできません。

そのため、隠しデータフィールドではユーザーが入力・確認する必要はないが、フォーム送信後のデータ処理で必要なデータを隠しデータフィールドに持たせます。

具体的には以下のような使用例があります。

  • セキュリティ目的でサーバーとフォームの隠しフィールドでランダムの同じ文字列(トークン)を持たせる。フォーム送信後に同じ文字列であることを確認し、データを処理する。クロスサイトリクエストフォージェリ(CSRF)に対するセキュリティ。
  • ある商品情報を変更するときには商品IDが必要になるが、ユーザーに商品IDを確認して貰う必要はない。そのため、隠しデータフィールドに商品IDを持たせる。

フォームで隠しデータフィールドの使い方

inputのtype属性をhiddenにすると隠しデータフィールドとなります。

隠しデータフィールドのvalueに値を入れても次のように表示されないので、ユーザーは確認することも入力することもできません。

<form method=“POST” ...>
  <input type="hidden" name="id" value="1">
  <input type="submit">
<form>

隠しデータフィールドはユーザーが操作するフィールドではないので、required属性を使うことはできません。

<form method=“POST” ...>
  <!-- required属性は挙動しない -->
  <input type="hidden" name="id" value="" required>
  <input type="submit">
<form>

隠しデータフィールドの値をサーバーで受け取る

隠しデータフィールドにname属性とvalue属性を指定することで、フォーム送信後にサーバーで隠しデータフィールドの値を受け取ることができます。

サーバー側での隠しデータフィールドの値の受け取り方はテキストボックスなどと同じように受け取ることができます。

PHPでは次のように受け取ることができます。

$id = $_POST['id'];
// 1

Laravelでは次のように受け取ることができます。

$id = $request->get('id');
// 1

隠しデータフィールドで複数の要素を配列で送信

隠しデータフィールドで複数の値を同じnameで送信することができます。

サーバーで受け取るときは配列で受け取ることができます。

<form method=“POST” ...>
  <input type="hidden" name="ids[]" value="1">
  <input type="hidden" name="ids[]" value="2">
  <input type="hidden" name="ids[]" value="3">
  ...
<form>
// phpで受け取る
$ids = $_POST['id[]'];
// ["1", "2", "3"]

// Laravelで受け取る
$ids = $request->get('id[]');
// ["1", "2", "3"]

また、配列の順序を指定したり、連想配列にしてサーバーで受け取ることもできます。

<!-- 配列の順序を指定 -->
<form method=“POST” ...>
  <input type="hidden" name="ids[0]" value="1">
  <input type="hidden" name="ids[1]" value="2">
  <input type="hidden" name="ids[2]" value="3">
  ...
<form>

<!-- 連想配列 -->
<form method=“POST” ...>
  <input type="hidden" name="ids[product_1]" value="1">
  <input type="hidden" name="ids[product_2]" value="2">
  <input type="hidden" name="ids[product_3]" value="3">
  ...
<form>

formのinput valueを配列で受け取りたい場合のname属性ではinputのname属性によってサーバーで受け取れるデータがどのように違うか詳しく説明しています。

ファイルをアップロードするフィールドを非表示にする

ファイルアップロードのフィールドを作るにはinputのtype属性にfileを指定します。
しかし、よくテキストやボタンでファイルアップロードをするフィールドがあります。

ファイルアップロードフィールド

テキストでファイルを選択

これはファイルアップロードのフィールドのtype属性をhiddenにしているのではなく、CSSによってファイルアップロードのフィールドを消しています。

具体的には次のようなコードによってボタンやテキストでファイルをアップロードしています。

<form method=“POST” ...>
  <input id="inputImage" type="file" name="image" value="" style="display: none;">
  <label for="inputImage">
    アップロードファイル選択
  </label>
  <input type="submit">
<form>

javascriptを使ってフォームで隠しデータフィールドを操作する

隠しデータフィールドはjavascriptで値を取得したりセットしたりすることができます。

データの取得をしやすくするために隠しデータフィールドにidを付与します。

<form id="product-form" method=“POST” ...>
  <input id="product_id" type="hidden" name="product_id" value="1">
  <input type="submit">
<form>

隠しデータフィールドの値の取得

javascriptでデータを取得する場合は次のように取得します。
テキストフィールドの値を取得するときと変わりません。

var product_id = document.getElementById("product_id").value;
// 1

jQueryで取得する場合は次のように取得します。

var product_id = $('#product_id').val();
// 1

または次のように要素と属性を指定して値を取得することもできます。

var product_id = $('input:hidden[name=product_id]').val();
// 1

隠しデータフィールドの値をセットする

javascriptで隠しデータフィールドの値をセットするときは次のようにします。
テキストフィールドの値を取得するときと変わりません。

var obj = document.getElementById("product_id")
obj.value = 2;

jQueryで値をセットする場合は次のようにセットします。

$('#product_id').val('2');

または次のように要素と属性を指定して値をセットすることもできます。

$('input:hidden[name=product_id]').val('2');

隠しデータフィールドを追加する

隠しデータフィールドを追加する場合は次のように追加することができます。

$('#product-form').insertAdjacentHTML('afterbegin','<input type="hidden" name="editor" value="5">');

隠しデータフィールドの値を配列で送信したい場合は、次のようにname属性を次のように変更すると配列で送る要素を追加することができます。

$('#product-form').insertAdjacentHTML('afterbegin','<input type="hidden" name="tagIds[]" value="3">');
$('#product-form').insertAdjacentHTML('afterbegin','<input type="hidden" name="tagIds[]" value="4">');
$('#product-form').insertAdjacentHTML('afterbegin','<input type="hidden" name="tagIds[]" value="5">');

まとめ

隠しデータフィールドは表示されないので、隠しデータフィールドではユーザーが入力・確認する必要はないが、フォーム送信後のデータ処理で必要なデータを隠しデータフィールドに持たせます。

この隠しデータフィールドは次のような使用例があります。

  • セキュリティ目的でサーバーとフォームの隠しフィールドでランダムの同じ文字列(トークン)を持たせる。フォーム送信後に同じ文字列であることを確認し、データを処理する。クロスサイトリクエストフォージェリ(CSRF)に対するセキュリティ。
  • ある商品情報を変更するときには商品IDが必要になるが、ユーザーに商品IDを確認して貰う必要はない。そのため、隠しデータフィールドに商品IDを持たせる。

inputのtype属性をhiddenにすると隠しデータフィールドとなります。

隠しデータフィールドのvalueに値を入れても次のように表示されないので、ユーザーは確認することも入力することもできません。

<form method=“POST” ...>
  <input type="hidden" name="id" value="1">
  <input type="submit">
<form>

よくコードに関するお問い合わせを頂くので、webエンジニアに人気のslackでゆるコミュを作りました。
コードに関する質問はゆるコミュでお願いします。ゆるコミュの参加・質問は無料です。

HTML / css / laravel / Django / wordpress / shopify / php / python / javascript / jQuery / React / AWS など初心者から中級者の質問を中心にお答え致します。

メンターとしての参加も大歓迎です。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

エンジニアを目指す方必見!おすすめプログラミングスクール

最短でエンジニアになるには、いかに効率よく学習するかが重要です。モチベーションを維持しながら最短でエンジニアを目指すならプログラミングスクールを利用するのもおすすめです。

コメント

コメントする

目次
閉じる