【Laravel】Formファザードでテキストボックスを作成するForm::textを解説します

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、10年目エンジニアです。

この記事では、 PHPのフレームワークの1つであるLaravelのBladeビューでテキストボックスを作成できるFormファザードのForm::textを丁寧に解説していきます。

前提条件：実行環境について
テキストボックスを作成するForm::textとは
Form::textを解説するプログラムの概要
1. Bladeビュー：sample.blade.phpのサンプルプログラム
2. web.phpのサンプルプログラム
実行して確認
まとめ：テキストボックスを作成するときForm::textを使ってみよう

前提条件：実行環境について

実行環境は以下の通りです。

OS	Windows10
Laravelのバージョン	8.10.0

この記事では

C:\Laravel\LaravelSample

配下にLaravelのプロジェクトを作成しています。

Formファザードを利用するには、インストールする必要があります。
インストールのやり方については、以下の記事をご参考ください。

【Laravel】Formファザード（laravelcollective/html）をインストールするやり方を解説します

テキストボックスを作成するForm::textとは

Form::textとは、テキストボックスを作成することができるFormファザードです。

Form::textは、下記のように引数を指定します。

{{ Form::text('name', 'デフォルト値', ['id' => 'id'])}}

1	{{ Form::text('name', 'デフォルト値', ['id' => 'id'])}}

第一引数	inputタグのnameに設定したい値を指定
第二引数	inputタグのvalueに設定したい値を指定ここで指定した値がデフォルト値となる
第三引数	idやmaxlengthなどのオプションを指定設定が必須ではない

第三引数のオプションはカンマ区切りで

‘キー’ => ‘値’

を[]の中に設定します。

上記の例だと、画面に表示した場合、下の画像のように表示され

HTMLでは、下記のように展開されます。

<input id="id" name="name" type="text" value="デフォルト値">

1	<input id="id" name="name" type="text" value="デフォルト値">

では、次の章で実際に使ってみます。

Form::textを解説するプログラムの概要

Form::textを解説するプログラムは、

Bladeビュー
web.php

2つを使います。

BladeビューはForm::textに

第一引数	name
第二引数	デフォルト
第三引数	id：id_name size：50 maxlength：10

を設定し、画面の表示とHTMLがどのように展開されているかを確認します。
Bladeビューは名前を【sample.blade.php】とし、viewsディレクトリ直下に格納します。

web.phpには、【http://〇〇.〇〇.〇〇:8000/sample】でアクセスした場合、【sample.blade.php】を表示させるように定義します。
ちなみにweb.phpとは、ルーティングを定義することができるファイルです。
詳しくはこちらの記事をご参考ください。

【Laravel】ルーティングを設定するweb.phpの概要を解説します

Bladeビュー：sample.blade.phpのサンプルプログラム

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>サンプル</title>
    </head>
    <body>
        <h1>Formサンプルページ</h1>
        {{Form::open()}}
            <p>名前：{{ Form::text('name', 'デフォルト', ['id' => 'id_name', 'size' => 50, 'maxlength' => 10])}}</p>
        {{Form::close()}}
    </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<h1>Formサンプルページ</h1>

<p>名前：{{ Form::text('name', 'デフォルト', ['id' => 'id_name', 'size' => 50, 'maxlength' => 10])}}</p>

</body>

</html>

web.phpのサンプルプログラム

<?php

use Illuminate\Support\Facades\Route;

Route::get('/sample', function () {
    return view('sample');
});

<?php

use Illuminate\Support\Facades\Route;

Route::get('/sample', function () {

return view('sample');

});

実行して確認

本当にテキストボックスが作成できているのかを実行して確認します。
Laravelでサーバーを立ち上げるコマンドは

php artisan serve

1	php artisan serve

です。
サーバーを立ち上げるコマンドの詳細な説明は、こちらの記事をご参考ください。

【Laravel】サーバーを立ち上げるartisan serveコマンドを解説します

http://〇〇〇.〇〇〇.〇〇〇.〇〇〇:8000/sample
※コマンドプロンプトに記載されているURL
http://localhost:8000/sample

どちらかのURLにアクセスすれば、テキストボックスが作成できていることが確認できます！

右クリックして【ページのソースを表示】を選択しHTMLを確認してみると、指定した通りinputタグが作成できていることが確認できました！

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>サンプル</title>
    </head>
    <body>
        <h1>Formサンプルページ</h1>
        <form method="POST" action="http://〇〇〇.〇〇〇.〇〇〇.〇〇〇:8000/sample" accept-charset="UTF-8"><input name="_token" type="hidden" value="3ekmm99iUI5Piaa7fBzubC21YehWQPl9eQJXQbIX">
            <p>名前：<input id="id_name" size="50" maxlength="10" name="name" type="text" value="デフォルト"></p>
        </form>
    </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<h1>Formサンプルページ</h1>

</form>

</body>

</html>

まとめ：テキストボックスを作成するときForm::textを使ってみよう

以上がLaravelのBladeビューでテキストボックスを作成できるFormファザードForm::textの解説でした！

あなたのご参考になったのなら、とても嬉しいです(*´▽｀*)
ではでは～(・ω・)ﾉｼ