Core concepts | laravel-html | Spatie

 SPATIE

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

spatie.be/open-source

  [Docs](https://spatie.be/docs)  [Laravel-html](https://spatie.be/docs/laravel-html/v2)  General-usage  Core concepts

 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/v2/introduction)
- [ Postcardware ](https://spatie.be/docs/laravel-html/v2/postcardware)
- [ Installation & setup in Laravel ](https://spatie.be/docs/laravel-html/v2/installation-setup)
- [ Upgrading ](https://spatie.be/docs/laravel-html/v2/upgrading)
- [ Questions and issues ](https://spatie.be/docs/laravel-html/v2/questions-issues)
- [ Changelog ](https://spatie.be/docs/laravel-html/v2/changelog)

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

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

      You are viewing the documentation for **an older version** of this package. You can check the version you are using with the following command:

 `                                    composer show spatie/laravel-html                                                                                                                                                                                                                                    `

Core concepts
=============

###  On this page

1. [ The Difference Between Builder Params and Element Methods ](#content-the-difference-between-builder-params-and-element-methods)
2. [ Checking radio and checkboxes ](#content-checking-radio-and-checkboxes)
3. [ Rendering elements ](#content-rendering-elements)

`Element` classes
-------------------------------------------------------------------------------------------------------

This package contains several element classes under the `Spatie\Html\Elements` namespace. It's possible to generate any HTML element with any attribute via these classes and the [fluent element methods](/laravel-html/v1/general-usage/element-methods).

`Element` classes on their own don't have any knowledge of the outside world. That's where the `Spatie\Html\Html` builder comes into play.

`Html` Builder class
----------------------------------------------------------------------------------------------------------------

The `Spatie\Html\Html` builder is used to build proper HTML using its [builder methods](/laravel-html/v1/general-usage/html-builder). It will also couple `Spatie\Html\Elements` to other concepts like requests, sessions and models.

For example when building input fields the `Html` builder will pull old values from the session (on a failed form request) or use values of a given model for the `value` attribute of the input.

Because the `Html` builder will generally return `Spatie\Html\Elements`, you can chain most of the [elements' fluent methods](/laravel-html/v1/general-usage/element-methods) directly onto the builder.

The Difference Between Builder Params and Element Methods
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Say we're adding a text input field in a form that's bound to a model:

```
{{ html()->model(new User(['name' => 'Sebastian'])) }}
{{ html()->text('name', 'Alex') }}
//
```

Since we're passing the input field's name `name` to the builder, it will try to infer it from the model, filling in `Sebastian` despite us providing `Alex` as its value. If we want to ensure that `Alex` is the value of the input element, we need to set the value *after* the element has been created by the HTML builder.

```
{{ html()->model(new User(['name' => 'Sebastian'])) }}
{{ html()->input('name')->value('Alex') }}
//
```

Here, the builder creates a field, using `Sebastian` as its value. Afterwards, we chain a `value` call on the element object itself, which doesn't have any outside context, to overwrite the value, which was previously set, to `Alex`.

Checking radio and checkboxes
-----------------------------------------------------------------------------------------------------------------------------------------------

To correctly check/uncheck radio and checkboxes use the `checked` method:

```
{{ html()->model(new User(['title' => 'Mr'])) }}
{{ html()->radio('title')->value('Mr')->checked(old('title', $user->title === 'Mr')) }}
{{ html()->radio('title')->value('Ms')->checked(old('title', $user->title === 'Ms')) }}
//
//
```

Rendering elements
--------------------------------------------------------------------------------------------------------------

Every `Element` instance can be rendered to an HTML string using the `render()` method or simply by using it in a string context.

```
echo Div::render();
// ""

$elementInstance = new Div();
$htmlString = (string) $elementInstance;
// $htmlString is now ""
```

Since elements implement Laravel's `Htmlable` interface, we don't need to use any special tags to prevent the output from being escaped.

```
{!! html()->div() !!}
{{ html()->div() }}
```