[HTML入門]hidden属性とは？フォームで使う「見えないデータ」の仕組みを解説

はじめに

フォームを使って情報を送信するWebページを作る中で、「ユーザーに見せたくはないけど、裏でデータを送りたい」というケースが発生することがあります。

その際に活用できるのが、hidden属性です。

①hidden属性とは？

HTMLにおけるhiddenは、見た目には表示されないが、フォーム送信時には値を持たせておける属性です。

基本構文:

<input type="hidden" name="user_id" value="123">

• type="hidden"　→　ユーザーには見えない
• name="user_id" →　送信先で取り出すキー
• value="123" →　実際に送られる値

②どんなときに使うの？

③Laravelでの使用例

<form action="{{ route('posts.store') }}" method="POST">
    @csrf
    <input type="hidden" name="user_id" value="{{ Auth::id() }}">
    <input type="text" name="title" placeholder="タイトル">
    <button type="submit">投稿する</button>
</form>

• @csrf → Laravelのセキュリティ対策
• Auth::id() →　ログイン中のユーザーIDを取得してhiddenに渡している

④サーバー側(コントローラー)での受け取り

public function store(Request $request)
{
    $userId = $request->input('user_id');

    Post::create([
        'user_id' => $userId,
        'title' => $request->input('title')
    ]);
}

⑤注意点

• hiddenの値はHTMLソース上で見えるので、改ざんされる可能性がある
• 信頼できない値は、サーバー側で再確認・認証を行うのが安全

⑥まとめ

ユーザーには見せたくないけれど、送信しておきたい情報を扱う際に、hiddenはとても便利です。
Laravelでもよく使われるので、フォーム構築の中で自然に使いこなせるようになっておくと実務でも役立ちます！