laravel-html チートシート

:::note info
本記事はアジアクエスト - [アジアクエスト Advent Calendar 2024](https://qiita.com/advent-calendar/2024/asiaquest) の記事です。
:::

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

# HTMLビルダー
## aタグ
`function a($href = null, $text = null): A`
```php
// 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`

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

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

### submitボタン
`function submit($text = null): Button`

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

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

## formタグ
```php
// 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ヘルパが対応しているため、
以下でも記載が可能です。
```php
{{ html()->form('PUT')->route('item.update') }}
```

## labelタグ
`function label($contents = null, $for = null): Label`

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

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

## inputタグ
`function input($type = null, $name = null, $value = null): Input`

```php
// 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`
```php
// Laravel-html
{{ html()->text('name', '田中太郎') }}

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

#### email
`function email($name = null, $value = null): Input`
```php
// 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`
```php
// 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`
```php
// 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`
```php
// Laravel-html
{{ html()->password('new_password') }}

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

### textarea
`function textarea($name = null, $value = null): Textarea`
```php
// Laravel-html
{{ html()->textarea('memo', 'メモ') }}

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

### checkbox
`function checkbox($name = null, $checked = false, $value = '1'): Input`
```php
// 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`
```php
// 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`
```php
// 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`
```php
// 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`
```php
// 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`
```php
// 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`
```php
// Laravel-html
{{ html()->date('open_time') }}

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

`function datetime($name = '', $value = null, $format = true): Input`
```php
// 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`
```php
// Laravel-html
{{ html()->time('tel_time') }}

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


### ファイル選択
#### file
`function file($name = null): File`
```php
// Laravel-html
{{ html()->file('input_file') }}

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


### その他
#### hidden
`function hidden($name = null, $value = null): Input`
```php
// Laravel-html
{{ html()->hidden('hidden_id', '123') }}

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

#### token
`function token(): Input`
```php
// Laravel-html
{{ html()->token() }}

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

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


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

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

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

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

```

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

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

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

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

## attribute
```php
// 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
```php
// Laravel-html
{{ html()->text('name')->data('value', 'TEST') }}

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

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

```php
// 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