HTML builder | laravel-html | Spatie

 SPATIE

  Laravel HTML
===============

spatie.be/open-source

  [Docs](https://spatie.be/docs)  [Laravel-html](https://spatie.be/docs/laravel-html/v3)  General-usage  HTML builder

 Version   v3   v2   v1

 Other versions for crawler [v3](https://spatie.be/docs/laravel-html/v3) [v2](https://spatie.be/docs/laravel-html/v2) [v1](https://spatie.be/docs/laravel-html/v1)

- [ Introduction ](https://spatie.be/docs/laravel-html/v3/introduction)
- [ Postcardware ](https://spatie.be/docs/laravel-html/v3/postcardware)
- [ Installation & setup in Laravel ](https://spatie.be/docs/laravel-html/v3/installation-setup)
- [ Upgrading ](https://spatie.be/docs/laravel-html/v3/upgrading)
- [ Questions and issues ](https://spatie.be/docs/laravel-html/v3/questions-issues)
- [ Changelog ](https://spatie.be/docs/laravel-html/v3/changelog)

General usage
-------------

- [ Core concepts ](https://spatie.be/docs/laravel-html/v3/general-usage/core-concepts)
- [ Extending the package ](https://spatie.be/docs/laravel-html/v3/general-usage/extending)
- [ HTML builder ](https://spatie.be/docs/laravel-html/v3/general-usage/html-builder)
- [ Element classes ](https://spatie.be/docs/laravel-html/v3/general-usage/element-classes)
- [ Element methods ](https://spatie.be/docs/laravel-html/v3/general-usage/element-methods)
- [ The class() helper ](https://spatie.be/docs/laravel-html/v3/general-usage/the-class-helper)

 HTML builder
============

###  On this page

1. [ Building general elements ](#content-building-general-elements)
2. [ Working with a model ](#content-working-with-a-model)
3. [ Form building ](#content-form-building)
4. [ Form-related elements ](#content-form-related-elements)

Building general elements
-----------------------------------------------------------------------------------------------------------------------------------

The following builder methods can be used to generate general HTML elements like links, `div`s, `span`s, etc... All these methods return instances of `Spatie\Html\Elements`. Of course all [element methods](/laravel-html/general-usage/element-methods) are available on the returned instances.

- `function a($href = null, $text = null): A`
- `function button($text = null, $type = 'button'): Button`
- `function div($contents = null): Div`
- `function element($tag): Element`
- `function mailto($email, $text = null): A`
- `function span($contents = null): Span`
- `function tel($number, $text = null): A`

Working with a model
--------------------------------------------------------------------------------------------------------------------

You can couple the HTML builder to a model using the `model()` method. This way elements will be built with the given model and its attributes in mind. Generally speaking this simply means that form fields will automatically try to use the values from the corresponding model attributes.

```
$user = new User(['name' => 'Johnny']);
html()->model($user);
echo html()->text('name');
// Outputs:
```

If you're working with forms you can use the `modelForm()` and `closeModelForm()` helper methods to generate forms coupled to a model.

The `endModel()` method is used to stop using a given model to build elements.

Form building
-----------------------------------------------------------------------------------------------

The HTML builder has some great methods for building entire forms. By default all fields in these forms will automatically use their corresponding `session()->old()` values if available.

### `form()` method

```
function form($method = 'POST', $action = null)
```

The `form()` method will return a `Spatie\Html\Elements\Form` class. It will have the `_token` and `_method` fields as children by default.

Generally speaking you'll want to use this in combination with `open()` and `close()` to generate the opening and closing tags for the form in your template.

```
{{ html()->form('PUT', '/update-url')->open() }}

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

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

```

The `route()` method can be chained to `form()` to simplify the specification of a form's action URI:

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

This uses Laravel's [`route()` helper](https://laravel.com/docs/10.x/helpers#method-route) under the hood and accepts the same arguments.

### Building a form with a model

To make things easier we've added the `modelForm()` and `closeModelForm()` methods to easily open and close a form that's coupled to a model. Under the hood the `model()` and `endModel()` methods are used.

```

{{ html()->modelForm($user, 'PUT', '/update-url')->open() }}

    {{ html()->text('name') }}
    {{ html()->email('email')}}

{{ html()->closeModelForm() }}

```

Form-related elements
-----------------------------------------------------------------------------------------------------------------------

- `function checkbox($name = null, $checked = false, $value = '1'): Input`
- `function email($name = null, $value = null): Input`
- `function input($type = null, $name = null, $value = null): Input`
- `function fieldset($legend = null): Fieldset`
- `function hidden($name = null, $value = null): Input`
- `function label($contents = null, $for = null): Label`
- `function legend($contents = null): Legend`
- `function multiselect($name = null, $options = [], $value = null): Select`
- `function option($text = null, $value = null, $selected = false): Option`
- `function password($name = null): Input`
- `function radio($name = null, $checked = false, $value = null): Input`
- `function select($name = null, $options = [], $value = null): Select`
- `function submit($text = null): Button`
- `function text($name = null, $value = null): Input`
- `function search($name = null, $value = null): Input`
- `function date($name = '', $value = null, $format = true): Input`
- `function datetime($name = '', $value = null, $format = true): Input`
- `function time($name = '', $value = null, $format = true): Input`
- `function range($name = '', $value = '', $min = null, $max = null, $step = null): Input`
- `function number($name = null, $value = null, $min = null, $max = null, $step = null): Input`
- `function textarea($name = null, $value = null): Textarea`
- `function file($name = null): File`
- `function token(): Input`