Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

アジアクエストAdvent Calendar 2024

Day 2
@Bluewind1997(百々)inアジアクエスト株式会社

laravel-html チートシート

Last updated at Posted at 2024-12-01

本記事はアジアクエスト - アジアクエスト Advent Calendar 2024 の記事です。

Laravel11からLaravel Collectiveが利用できなくなります。1
そこで、移行先の1つとして出されているLaravel-html（Spatie HTML package）2のHTMLビルダー記法についてまとめてました。

HTMLビルダー

aタグ

function a($href = null, $text = null): A

// Laravel-html
{{ html()->a('https://qiita.com/advent-calendar/2024/asiaquest', 'リンク') }}

// 実際のHTML
<a href="https://qiita.com/advent-calendar/2024/asiaquest">リンク</a>

buttonタグ

通常ボタン

function button($text = null, $type = 'button'): Button

// Laravel-html
{{ html()->button('検索', 'button') }}

// 実際のHTML
<button type="button">検索</button>

submitボタン

function submit($text = null): Button

// Laravel-html
{{ html()->submit('確定') }}

// 実際のHTML
<button type="submit">確定</button>

formタグ

// Laravel-html
{{ html()->form("POST", "https://qiita.com/advent-calendar/2024/asiaquest")->open() }}

{{ html()->form()->close() }}

// 実際のHTML
<form method="POST" action="https://qiita.com/advent-calendar/2024/asiaquest">
    <input type="hidden" name="_token" value="XXXXX"> //CSRF対策用トークン
</form>

Laravelのrouteを利用する場合、routeヘルパが対応しているため、
以下でも記載が可能です。

{{ html()->form('PUT')->route('item.update') }}

labelタグ

function label($contents = null, $for = null): Label

// Laravel-html
{{ html()->label('名前', 'name') }}

// 実際のHTML
<label for="name">名前</label>

inputタグ

function input($type = null, $name = null, $value = null): Input

// Laravel-html
{{ html()->input('text', 'key', 'value') }}

// 実際のHTML
<input type="text" name="key" id="key" value="value">

入力系

text

function text($name = null, $value = null): Input

// Laravel-html
{{ html()->text('name', '田中太郎') }}

// 実際のHTML
<input type="text" name="name" id="name" value="田中太郎">

email

function email($name = null, $value = null): Input

// Laravel-html
{{ html()->email('mail_address', 'XXX@example.com') }}

// 実際のHTML
<input type="email" name="mail_address" id="mail_address" value="XXX@example.com">

search

function search($name = null, $value = null): Input

// Laravel-html
{{ html()->search('search_text', '初期値') }}

// 実際のHTML
<input type="search" name="search_text" id="search_text" value="初期値">

number

function number($name = null, $value = null, $min = null, $max = null, $step = null): Input

// Laravel-html
{{ html()->number('height', 0, 0, 999, 0.1) }}

// 実際のHTML
<input type="number" name="height" id="height" value="0" min="0" max="999" step="0.1">

password

function password($name = null): Input

// Laravel-html
{{ html()->password('new_password') }}

// 実際のHTML
<input type="password" name="new_password" id="new_password">

textarea

function textarea($name = null, $value = null): Textarea

// Laravel-html
{{ html()->textarea('memo', 'メモ') }}

// 実際のHTML
<textarea name="memo" id="memo">メモ</textarea>

checkbox

function checkbox($name = null, $checked = false, $value = '1'): Input

// Laravel-html
{{ html()->checkbox('accept', false, '1') }}

// 実際のHTML
<input type="checkbox" name="accept" id="accept" value="1">

選択系

select

function select($name = null, $options = [], $value = null): Select

// Laravel-html
{{ html()->select('fruit', [1 => 'りんご', 2 => 'みかん', 3 => 'バナナ'], 1) }}

// 実際のHTML
<select name="fruit" id="fruit">
    <option value="1" selected="selected">りんご</option>
    <option value="2">みかん</option>
    <option value="3">バナナ</option>
</select>

multiselect

function multiselect($name = null, $options = [], $value = null): Select

// Laravel-html
{{ html()->multiselect('food', [1 => 'ラーメン', 2 => 'ピザ', 3 => '寿司'], 1) }}

// 実際のHTML
<select name="food[]" id="food" multiple="">
    <option value="1" selected="selected">ラーメン</option>
    <option value="2">ピザ</option>
    <option value="3">寿司</option>
</select>

option

function option($text = null, $value = null, $selected = false): Option

// Laravel-html
<select name="custom_option">
    {{ html()->option('オプション1', 1, true) }}
    {{ html()->option('オプション2', 2, false) }}
    {{ html()->option('オプション3', 3, false) }}
</select>

// 実際のHTML
<select name="custom_option">
    <option value="1" selected="selected">オプション1</option>
    <option value="2">オプション2</option>
    <option value="3">オプション3</option>
</select>

range

function range($name = '', $value = '', $min = null, $max = null, $step = null): Input

// Laravel-html
{{ html()->range('volume', 50, 0, 100, 1) }}

// 実際のHTML
<input type="range" name="volume" id="volume" value="50" min="0" max="100" step="1">

radio

function radio($name = null, $checked = false, $value = null): Input

// Laravel-html
{{ html()->radio('gender', true, 'man') }}
{{ html()->radio('gender', false, 'woman') }}

// 実際のHTML
<input type="radio" name="gender" id="gender_man" value="man" checked="">
<input type="radio" name="gender" id="gender_woman" value="woman">

日付系

date

function date($name = '', $value = null, $format = true): Input

// Laravel-html
{{ html()->date('open_time') }}

// 実際のHTML
<input type="date" name="open_time" id="open_time">

function datetime($name = '', $value = null, $format = true): Input

// Laravel-html
{{ html()->datetime('open_time') }}

// 実際のHTML
<input type="datetime-local" name="open_time" id="open_time">

function time($name = '', $value = null, $format = true): Input

// Laravel-html
{{ html()->time('tel_time') }}

// 実際のHTML
<input type="time" name="tel_time" id="tel_time">

ファイル選択

file

function file($name = null): File

// Laravel-html
{{ html()->file('input_file') }}

// 実際のHTML
<input type="file" name="input_file" id="input_file">

その他

hidden

function hidden($name = null, $value = null): Input

// Laravel-html
{{ html()->hidden('hidden_id', '123') }}

// 実際のHTML
<input type="hidden" name="hidden_id" id="hidden_id" value="123">

token

function token(): Input

// Laravel-html
{{ html()->token() }}

// 実際のHTML
<input type="hidden" name="_token" value="XXXXXXXXXXXX">

要素追加

classやidの要素は、メソッドをつなげることで付与が可能です。3
使用例とともにいくつか記載します。

class

// Laravel-html
{{ html()->text('name')->class('form-control') }}

// 実際のHTML
<input class="form-control" type="text" name="name" id="name">

id

// Laravel-html
{{ html()->text('id')->id('account_id') }}

// 実際のHTML
<input type="text" name="id" id="account_id">

disabled

// Laravel-html
{{ html()->text('id')->disabled() }}

// 実際のHTML
<input type="text" name="id" id="id" disabled="disabled">

placeholder

// Laravel-html
{{ html()->text('name')->placeholder('名前') }}

// 実際のHTML
<input type="text" name="name" id="name" placeholder="名前">

attribute

// Laravel-html
{{ html()->text('name')->attribute('onclick', 'javascript:alert("TEST")') }}

// 実際のHTML
<input type="text" name="name" id="name" onclick="javascript:alert(&quot;TEST&quot;)">

data

// Laravel-html
{{ html()->text('name')->data('value', 'TEST') }}

// 実際のHTML
<input type="text" name="name" id="name" data-value="TEST">

If

要素追加のメソッドにIfをつけることによって、第一引数を条件式として付与の可否を行わせることが可能です。

// Laravel-html
{{ html()->text('true-name')->classIf(true, 'form-controle') }}

{{ html()->text('false-name')->classIf(false, 'form-controle') }}

// 実際のHTML
<input class="form-controle" type="text" name="true-name" id="true-name">

<input type="text" name="false-name" id="false-name">

終わりに

以上が、Laravel Collectiveの代替案であるLaravel-htmlの記法のまとめ・紹介になります。

Laravel-htmlにはその他様々なhtmlタグ、メソッドの利用方法について記載されています。
興味を持ったり深く利用を行いたい方はぜひご覧ください。

  1. https://laravel-news.com/collective-html-abandoned ↩

  2. https://spatie.be/docs/laravel-html/v3/introduction ↩

  3. https://spatie.be/docs/laravel-html/v3/general-usage/element-methods ↩

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?