laravel12.laravel_022
R e i - D r e a m
for Laravel
TOP > Laravel Ver.12 > テンプレート(FORM)
Guest
login
Archive Menu
CakePHP2
Python3
遺伝子検査chatGENE Pro

最終投稿日：2026年2月22日

フォーム（FORM）ビルダー
インストール
画面といえばやはり「フォーム部品」です。
HTMLの基本である「<form>」「<input>」タグを利用する方法もありますが、
Laravelではサードパーティ製パッケージ「フォームビルダー」の相性が良いのでこれを使いたいと思います。
標準パッケージではないため、インストールが必要となります。
『composer.json』のいるディレクトリからターミナルで以下を叩きます。
ターミナル

C:\～\laravel_12>composer require spatie/laravel-html
    ～ 中略 ～
    82 packages you are using are looking for funding.
    Use the `composer fund` command to find out more!
    > @php artisan vendor:publish --tag=laravel-assets --ansi --force
        [37;44m INFO [39;49m No publishable resources for tag [1m[laravel-assets] [22m.
    No security vulnerability advisories found.
    Using version ^3.12 for spatie/laravel-html

C:\～\laravel_12>

ポイント

以前は「ファサード」という機能で各種部品を作成していましたが、
2023年2月13日リリース、Laravel 10（v6.4.0）までの対応との事でした。

フォーム（FORM）部品一覧
フォームビルダーを使用した部品の一覧は以下となります。
{{ html()->form() }} <form>
{{ html()->submit() }} <button type="submit">
{{ html()->button() }} <button>
{{ html()->text() }} <input type="text">
{{ html()->email() }} <input type="email">
{{ html()->password() }} <input type="password">
{{ html()->number() }} <input type="number">
{{ html()->range() }} <input type="range">
{{ html()->date() }} <input type="date">
{{ html()->datetime() }} <input type="datetime-local">
{{ html()->time() }} <input type="time">
{{ html()->radio() }} <input type="radio">
{{ html()->label() }} <label>
{{ html()->checkbox() }} <input type="checkbox">
{{ html()->select() }} <select>
{{ html()->textarea() }} <textarea>
{{ html()->a() }} <a>
{{ html()->hidden() }} <input type="hidden">
フォーム（FORM）部品詳細
{{ html()->form() }}

{{ html()->form('POST')->route('hoge.index', ['param' => '123'])->id('form_id')->open() }}
{{ html()->form()->close() }}

レンダリング結果

<form method="POST" action="http://localhost/laravel_12/hoge?param=123" id="form_id">
<input type="hidden" name="_token" value="AV1L7i16VbmTRoyLUu1099ccDXiKaf9DNPZibwRL">
</form>

ポイント

[action属性]はメソッドチェーン『route』からの設定の他に『form』タグの第２引数から設定する方法もあります。
　form('POST', '/laravel_12/hoge')

また、ファイルを扱いたい場合、メソッドチェーンで『->acceptsFiles()』を追加してください。
　※ レンダリングされると「enctype="multipart/form-data"」が付与されています

{{ html()->submit() }}

{{ html()->submit('送信')->id('send')->name('sub_name')->value('9')->class('hoge_class')->style('width:50px;height:30px;')->attribute('onclick', 'alert("OK")') }}

レンダリング結果

<button class="hoge_class" type="submit" id="send" name="sub_name" value="9" style="width:50px;height:30px;" onclick="alert("OK")">送信</button>

{{ html()->button() }}

{{ html()->button('ボタン')->type('button')->id('btn_id')->name('btn_name')->value('execute')->class('form-btn')->style('width:120px;height:40px;font-size:18px;')->attribute('onclick', 'alert("OK")') }}

レンダリング結果

<button class="form-btn" type="button" id="btn_id" name="btn_name" value="execute" style="width:120px;height:40px;font-size:18px;" onclick="alert("OK")">ボタン</button>

{{ html()->text() }}

{{ html()->text()->id('text_id')->name('text_name')->value(old('text_name'))->class($errors->has('text_name') ? 'form-text is-error' : 'form-text')->style('width:200px;height:20px;') }}

レンダリング結果

<input class="form-text" type="text" id="text_id" name="text_name" value style="width:200px;height:20px;">

{{ html()->email() }}

{{ html()->email()->id('email_id')->name('email_name')->value(old('text_name'))->class('hoge_class')->style('width:200px;height:20px;')->attribute('onclick', 'alert("OK")') }}

レンダリング結果

<input class="hoge_class" type="email" id="email_id" name="email_name" value style="width:200px;height:20px;" onclick="alert("OK")">
　※ 自動的に「email」形式のバリデーションが発火します

{{ html()->password() }}

<script>
    function togglePassword() {
        const passwordField = document.getElementById('pass_id');
        const toggleIcon = event.target;
        if (passwordField.type === 'password') {
            passwordField.type = 'text';
            toggleIcon.textContent = ' ';
        } else {
            passwordField.type = 'password';
            toggleIcon.textContent = ' ';
        }
    }
</script>

{{ html()->password()->id('pass_id')->name('pass_name')->placeholder('パスワード')->class('hoge_class')->style('width:200px;height:20px;')->attribute('onclick', 'alert("OK")') }}
<span class="password-toggle" onclick="togglePassword()">◆</span>

レンダリング結果

<input class="hoge_class" type="password" id="pass_id" name="pass_name" placeholder="パスワード" style="width:200px;height:20px;" onclick="alert("OK")">
<span class="password-toggle" onclick="togglePassword()">◆</span>
　※ パスワード内容の《表示|非表示》リンク付き

{{ {{ html()->date() }} }}

{{ html()->date()->id('date_id')->name('date_name')->value(old('date_name'))->class('hoge_class')->style('width:120px;height:20px;')->attribute('onclick', 'alert("OK")') }}

レンダリング結果

<input class="hoge_class" type="date" id="date_id" name="date_name" value style="width:120px;height:20px;" onclick="alert("OK")">
　※「2026-02-10」の様に取得できる（設定しない場合は《NULL》です）

{{ html()->radio() }}

<div class=" {{$errors->has('gender') ? 'is-error-radio' : 'form-area-border'}} " style="width:135px;">
    <!-- 男性 -->
    {{ html()->radio('gender', old('gender', 'man') == 'man', 'man')->id('gender_man')->class('form-radio') }}
    <label for="gender_man">男性</label>
    <!-- 女性 -->
    {{ html()->radio('gender', old('gender') == 'woman', 'woman')->id('gender_woman')->class('form-radio') }}
    <label for="gender_woman">女性</label>
</div>
　※ 初期値を設定するには、関数「old」の第２引数に自身の値を設定するのがミソです

レンダリング結果

<div class=" form-area-border " style="width:135px;">
    <!-- 男性 -->
    <input class="form-radio" type="radio" name="gender" id="gender_man" value="man" checked>
    <label for="gender_man">男性</label>
    <!-- 女性 -->
    <input class="form-radio" type="radio" name="gender" id="gender_woman" value="woman">
    <label for="gender_woman">女性</label>
</div>

{{ html()->checkbox() }}

【複数チェックボックス】 <div class=" {{$errors->has('cars') ? 'is-error-radio' : 'form-area-border'}} " style="width:260px;">
@foreach($check_cars as $car)
    {{ html()->checkbox('cars[]', in_array($car, old('cars', [])), $car)->id('car_' . $car)->class('form-check') }}
    <label class="form-check-label" for="car_{{ $car }}">{{ $cars_name[$car] }}</label>
@endforeach
</div>

レンダリング結果

<div class=" form-area-border " style="width:260px;">
    <input class="form-check" type="checkbox" name="cars[]" id="car_demi" value="demi">
    <label class="form-check-label" for="car_demi">デミオ</label>
    <input class="form-check" type="checkbox" name="cars[]" id="car_cresta" value="cresta">
    <label class="form-check-label" for="car_cresta">クレスタ</label>
    <input class="form-check" type="checkbox" name="cars[]" id="car_rx7" value="rx7">
    <label class="form-check-label" for="car_rx7">rx-7</label>
</div>
　※ 画面に表示される各項目は内部で利用する値となってしまうため、これを添え字とした連想配列をアサインする等で対応する

{{ html()->checkbox() }}

【単数チェックボックス】 {{ html()->checkbox('yes_name', old('yes_name'), '1')->id('yes_id')->class('hoge_class') }}
<label for="yes_id">同意する</label>

レンダリング結果

<input class="hoge_class" type="checkbox" name="yes_name" id="yes_id" value="1">
<label for="yes_id">同意する</label>

{{ html()->select() }}

<label class="form-select" >
{{ html()->select('books', ['' => '--', 'bk_1' => 'まんが', 'bk_2' => '小説', 'bk_3' => '写真集'], old('books', ''))->id('books')->attribute('onchange', 'alert("OK")') }}
</label>
　※ 初期値を設定するには、関数「old」の第２引数に自身の値を設定するのがミソです

レンダリング結果

<label class="form-select" >
    <select name="books" id="books" onchange="alert("OK")">
        <option value selected="selected">--</option>
        <option value="bk_1">まんが</option>
        <option value="bk_2">小説</option>
        <option value="bk_3">写真集</option>
    </select>
</label>

{{ html()->textarea() }}

{{ html()->textarea()->id('area_id')->name('area_name')->value(old('area_name'))->rows(5)->cols(30)->placeholder('ここに本文を入力...')->class('hoge_class') }}

レンダリング結果

<textarea class="hoge_class" id="area_id" name="area_name" rows="5" cols="30" placeholder="ここに本文を入力..." ></textarea>

{{ html()->a() }}

{{ html()->a(route('hoge.index', ['param1' => '123', 'param2' => '456']),'リンク')->target('_blank')->class('hoge_class') }}

レンダリング結果

<a class="hoge_class" href="http://localhost/laravel_12/hoge?param1=123&param2=456" target="_blank" onclick="alert("OK")">リンク</a>

{{ html()->img() }}

{{ html()->img(asset('img/hoge.jpg'))->style('width:299px;')->alt('ほげ') }}

レンダリング結果

<img src="http://localhost/{コンテキスト}/img/hoge.jpg" style="width:299px;" alt="ほげ">

{{ html()->hidden() }}

{{ html()->hidden()->id('hid_id')->name('hid_name')->value('隠し') }}

レンダリング結果

<input type="hidden" id="hid_id" name="hid_name" value="隠し">

ポイント

緑背景のフォームは実は、CSSと組合わせる事で「見た目」「エラー効果」を意識した作りになっています。
コントローラにバリデーションを実装し、以下のCSSを適用してみてください。

style.css

/* テキスト */
.form-text {
    border: solid 1px #AAA;
    outline: none;
    padding: 5px;
    border-radius: 8px;
}
閲覧するにはログインが必要です。

ビューで使えるグローバル関数
○ URL・パス関連
{{ route('hoge.index', ['hoge' => '123']) }}
「～\routes\web.php」の[name]属性名に対応するURLを出力します。
第２引数は省略できますが、パラメータを設定する事も可能です。
{{ url('hoge/foo', ['hoge' => '123']) }}
コンテキスト名以降のURLを設定できます。
第２引数は省略できますが、パラメータを設定する事も可能です。
{{ config_path('hoge') }}
「～\config」までの絶対パスを出力。
引数は省略できますが、パスを繋げる事が可能です。
他に以下があります。
・public_path()
・storage_path()
・base_path()
・app_path()
・resource_path()
・database_path()
○ 日時関連
{{ now()->format('Y-m-d') }}
「フォーマットの引数は他に以下があります
・Y年m月d日　　　⇒ 2026年02月19日
・Y/m/d H:i:s　　　⇒ 2026/02/19 00:34:00
・M d, Y　　　　　 ⇒ Feb 19, 2026
{{ today()->format('Y-m-d') }}
「フォーマットの引数は他に以下があります
・Y年m月d日　　　⇒ 2026年02月19日
・Y/m/d (D)　　　 ⇒ 2026/02/19 (木)
○ 値取得関連
{{ config('app.conf_hoge', 'デフォ値') }}
「～\config\app.php」に設定した連想配列キー名「conf_hoge」の値を出力する。
第２引数は省略できますが、デフォルト値となります。
{{ session('hoge', 'デフォ値') }}
セッションに登録した値を出力する。 第２引数は省略できますが、デフォルト値となります。
{{ auth()->check() ? 'OK' : 'NG' }}
ログイン状態かを判断でき、他に以下があります。
・auth()->id()
・auth()->user()->name
「@」を使った構文
@csrf CSRFトークン自動生成
@if()
@elseif()
@else
@endif		 if(1==1){
       ～処理～
}elseif(1==2){
       ～処理～
}else{
        ～処理～
}
@isset({変数})
       ～処理～
@endisset		 if(isset($hoge)){
       ～処理～
}
@empty({変数})
    ～処理～
@endempty		 if(empty($hoge)){
       ～処理～
}
@auth
       ～処理～
@endauth		 ログイン済みの場合のみ発火
@guest
       ～処理～
@endguest		 非ログインの場合のみ発火
@switch({変数})
@case('hoge')
    ～処理～
    @break
@case('foo')
    ～処理～
    @break
@default
    ～処理～
@endswitch		 switch($hoge){
case 'hoge':
    ～処理～
    break;
case 'foo':
    ～処理～
    break;
default:
    ～処理～
}
@foreach($users as $user)
    {{ $user->name }}
@endforeach		 foreach($users as $user){
    $user['name'];
}
@while($i < 10)
    {{ $i++ }}
@endwhile		 while($i < 10){
    $++;
}
@for($i=0; $i < 5; $i++)
    {{ $i }}
@endfor		 for($i=0; $i < 5; $i++){
    ～処理～
}
ログインしてコメントを残そう!!


きっぷる
きっぷる
[テンプレート]画面へ
ReiDream Co., Ltd.
[テンプレート(ヘルパー)]画面へ