HTMLのinputタグ、hiddenで隠しデータを送信する方法

今回はHTMLのinputタグで使われるhidden属性について解説をしていきます!

hidden属性ではinputタグで、ブラウザには表示されないデータを送信させることが出来ます。

ややニッチな部分ではありますが、使い道を知っておいても損はありませんよ。

この記事では、

・フォームとは
・inputタグの使い方
・「type="hidden"」の使い方、使い道

について解説をしていきます。

わかりやすいコードを交えて解説していくのでぜひ、ご覧ください!

フォームとは

まずはinputタグが使われるフォームとはどういったものなのか、知っておきましょう。

こちらをご覧ください。

こちらは実際に使われている、侍エンジニアのお問い合わせフォームです。

このようにフォームとは、ユーザーが入力した情報をサーバーに送信するためのページになります。

サーバーとのやり取りが必要になるので、Webサイトを作る中でもこのフォームを扱うページはPHPなどの言語で書かれることが多くなります。

inputタグの使い方

ここでinputタグについても解説します。

inputタグはフォームを構成するための部品とも呼べるタグで、type属性を変えることで様々な形式を入力できるようになります。

type属性では一行のテキスト入力やパスワードの入力、チェックボックス、ラジオボタンやファイルの送信もすること出来ます。

詳しくはこちらの記事をご覧ください。

「type="hidden"」の使い方

それではtype属性をhiddenにしたときの使い方を見ていきましょう。

こちらのコードをご覧ください。

<html>
    <form action="/form.php" method="post">
        <div>
            <label for="name">名前</label>
            <input type="text" id="name" name="name">
            <input type="hidden" id="userid" name="nameid" value="012345">
        </div>
    </form>
</html>

実行結果

このように、type属性をhiddenにしたときはブラウザには何も表示されていません。

ただこちらをご覧ください。

ブラウザの検証ツールを使ってソースコードを見たとき、type属性がhiddenになっている部分があることが分かるかと思います。

「type="hidden"」の使い道

使い方はわかったものの、このコードをどの場面で使うか分からない方もいるかと思います。

type属性をhiddenにしたときの大きな特徴は、「送信したいデータがブラウザに表示されない」ということです。

ブラウザ上では見えないことを利用して、ユーザーからの命令がどのような種類なのかをサーバーに送信するときに判断させるために、hiddenを使うこともあります。

ただし、ブラウザ上では見えなくても、ソースコードを見ればどのような値を送信しているのかは見ることが出来てしまいます。

ユーザーからの命令の種類であれば見えても問題はありませんが、パスワードなどの個人情報はこのhiddenでは送信しないようにしましょう。

HTMLだけで好条件の案件獲得はできる?

HTMLはウェブサイト制作をする上では必須スキルですが、それだけでは仕事数は少なく、単価の高い案件も請けづらいです。

実際にクラウドワークスでも以下のように、お客様のご要望に応えるため、単価の高い案件を受けるためにもプログラミングスキルの習得をすすめています。

HTML・CSSコーディングは短納期で大量のページを作成する案件も多く見受けられます。クライアントの要求に応えるため、コスト(1ページあたり単価)・スピード・クオリティの優先度を見極めながら進めるバランス感覚も求められる仕事です。複雑な案件ではHTML/CSSだけに留まらず、JavaScript(AJAX)を使った機能実装、WordPressをはじめとするCMSテンプレートの開発を手がけるケースもあります。このような場合にはプログラミング言語の知識も必要となるでしょう。
引用:CrowdWorks

HTMLに合わせて学ぶべき言語とスキル

HTMLに合わせて学ぶことで仕事の幅が広がる言語は、CSSは必須で、JavaScript、PHP(WordPress)の順番で学んでいくのがおすすめです。

こちらはプログラミング学習診断アプリで学習期間なども合わせて解説していますので、みてみてください。

また、プログラミングスキル以外に、PhotoshopやIllustratorなどのデザインスキルがあるとさらに活動の幅が広がるのでおすすめです。

短期間で複数スキルを身につけるには

これらのスキルがあれば十分継続して案件を獲得でき、時間や場所に縛られずに仕事をする生活は可能ですが、独学だと時間がかかってしまったり、仕事を請けられるレベルまで達するイメージが湧かないという方もいると思います。

そんなあなたにはプログラミングスクールでの学習がおすすめです。経験者から教わることで独学ではできなかったレベルのスキルが身につき、プログラミングで仕事を請けられるイメージが湧くため、着実にレベルアップができます。

弊社「侍エンジニア」ではあなたの理想の生活を叶えるキャリアから逆算してあなた専用のカリキュラムをマンツーマン学習ですすめていくため、今学習していることが確実に未来に繋がっている実感を持ちながら、学習を続けていくことができます。

無料カウンセリングでは、効率的な学習方法やキャリアプランのご提案などをさせていただきますので、理想はあるけどどうやったらいいかわからないという方は是非お気軽にお申し込みください。オンラインでも受講可能です。

無料カウンセリングを申し込む

まとめ

この記事ではinputタグのtype属性で使われるhiddenについて解説をしてきました。

hiddenの使い方と使われる場面については分かっていただけだでしょうか?

ユーザーが見る必要のない情報を見えないようにして送るというのは、やや古典的な手法のようにも感じますが、現在も様々なWebサイトで使われる立派な手法です。

ソースコードを見れば確認できてしまうという点を踏まえて、適切な場所で使っていきましょう。

Writer

侍テック編集部

株式会社SAMURAI

侍エンジニア塾は「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。侍テック編集部では技術系コンテンツを中心に有用な情報を発信していきます。

あなたの目的に合わせた
SAMURAI ENGINEERの運営サービス

SAMURAI ENGINEER Pro

未経験でも挫折しないプログラミングスクール

詳細はこちら

SAMURAI ENGINEER Plus

日本最大級のサブスク型オンラインITスクール

詳細はこちら

SAMURAI ENGINEER Freelance

「一人で稼げる」スキルを身につける

詳細はこちら