yii2/docs/guide-ru/helper-html.md

Html-помощник
=============

Каждое веб-приложение формирует большое количество HTML-разметки. Если разметка статическая, её можно эффективно
сформировать [смешиванием PHP и HTML в одном файле](http://php.net/manual/ru/language.basic-syntax.phpmode.php), но
когда разметка динамическая, становится сложно формировать её без дополнительной помощи. Yii предоставляет такую помощь
в виде Html-помощника, который обеспечивает набор статических методов для обработки часто-используемых HTML тэгов, их
атрибутов и содержимого.

> Примечание: Если ваша разметка близка к статической, лучше использовать непосредственно HTML. Нет никакой
  необходимости в том, чтобы всё подряд оборачивать вызовами Html-помощника.


## Основы <span id="basics"></span>

Так как формирование динамической HTML-разметки при помощи конкатенации строк очень быстро вносит хаос в проект, Yii 
предоставляет набор методов для управления атрибутами тэгов и формирования тэгов на основе этих атрибутов.


### Формирование тэгов <span id="generating-tags"></span>

Код формирования тэга выглядит следующим образом:

```php
<?= Html::tag('p', Html::encode($user->name), ['class' => 'username']) ?>
```

Здесь первый аргумент - это название тэга. Второй - содержимое, которое будет заключено между открывающим и закрывающим
тэгами. Заметьте, что мы используем `Html::encode`. Это связано с тем, что содержимое не экранируется автоматически,
чтобы можно было по-необходимости использовать чистый HTML. Третий аргумент - это массив настроек для HTML-кода, а
другими словами - массив атрибутов для тэга. В этом массиве ключи являются названиями атрибутов, например `class`,
`href` или `target`, а значения в массиве являются значениями этих атрибутов.

Вышеприведённый код сформирует следующую HTML-разметку:

```html
<p class="username">samdark</p>
```

В тех случаях, когда вам необходимо только закрыть или открыть тэг, можно использовать методы `Html::beginTag()` и
`Html::endTag()`.

Дополнительные атрибуты используются во многих методах Html-помощника и в различных виджетах. Во всех этих случаях в
дело вступают механизмы дополнительной обработки данных, о которых следует знать:

- Если значение равно null, соответствующий атрибут не будет выведен.
- Атрибуты, значения которых имеют тип boolean, будут интерпретированы как
  [логические атрибуты](http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes).
- Значения атрибутов будут экранированы с использованием метода [[yii\helpers\Html::encode()|Html::encode()]].
- Если в качестве значения атрибута передан массив, он будет обработан следующим образом:

   * Если атрибут является одним из атрибутов данных, указанных в [[yii\helpers\Html::$dataAttributes]], например `data`
     или `ng`, то будет сформирован список атрибутов по одному для каждого элемента массива. Например, код
     `'data' => ['id' => 1, 'name' => 'yii']` сформирует `data-id="1" data-name="yii"`; а код 
     `'data' => ['params' => ['id' => 1, 'name' => 'yii'], 'status' => 'ok']` сформирует
     `data-params='{"id":1,"name":"yii"}' data-status="ok"`. Заметьте, что в последнем примере используется формат JSON
     для формирования вывода вложенного массива.
     
   * Если атрибут НЕ является атрибутом данных, значение будет сконвертировано в формат JSON. Например, код
     `['params' => ['id' => 1, 'name' => 'yii']` сформирует `params='{"id":1,"name":"yii"}'`.


### Формирование CSS классов и стилей <span id="forming-css"></span>

При формировании атрибутов для HTML-тэгов часто приходится начинать с некоторых атрибутов по умолчанию, которые затем
необходимо изменять. Для того, чтобы добавить или удалить CSS-класс, можно использовать следующий подход:

```php
$options = ['class' => 'btn btn-default'];

if ($type === 'success') {
    Html::removeCssClass($options, 'btn-default');
    Html::addCssClass($options, 'btn-success');
}

echo Html::tag('div', 'Всё получилось!', $options);

// в случае, если $type содержит строку 'success', будет сформирован вывод
// <div class="btn btn-success">Всё получилось!</div>
```

Можно указать несколько CSS-классов, используя синтаксис массива:

```php
$options = ['class' => ['btn', 'btn-default']];

echo Html::tag('div', 'Сохранить', $options);
// выведет '<div class="btn btn-default">Сохранить</div>'
```

При добавлении или удалении классов тоже можно использовать массивы:

```php
$options = ['class' => 'btn'];

if ($type === 'success') {
    Html::addCssClass($options, ['btn-success', 'btn-lg']);
}

echo Html::tag('div', 'Сохранить', $options);
// выведет '<div class="btn btn-success btn-lg">Сохранить</div>'
```

`Html::addCssClass()` предотвращает дублирование классов, поэтому можно не беспокоиться о том, что какой-либо класс
будет добавлен дважды:

```php
$options = ['class' => 'btn btn-default'];

Html::addCssClass($options, 'btn-default'); // класс 'btn-default' уже добавлен

echo Html::tag('div', 'Сохранить', $options);
// выведет '<div class="btn btn-default">Сохранить</div>'
```

Если CSS-класс задаётся с помощью массива, можно использовать именованные ключи массива для обозначения логического
предназначения класса. В этом случае класс с таким же ключом будет проигнорирован во время использования
`Html::addCssClass()`:

```php
$options = [
    'class' => [
        'btn',
        'theme' => 'btn-default',
    ]
];

Html::addCssClass($options, ['theme' => 'btn-success']); // ключ 'theme' уже использован

echo Html::tag('div', 'Сохранить', $options);
// отобразит '<div class="btn btn-default">Сохранить</div>'
```

CSS-стили могут быть установлены схожим образом с помощью атрибута `style`:

```php
$options = ['style' => ['width' => '100px', 'height' => '100px']];

// в результате будет style="width: 100px; height: 200px; position: absolute;"
Html::addCssStyle($options, 'height: 200px; position: absolute;');

// в результате будет style="position: absolute;"
Html::removeCssStyle($options, ['width', 'height']);
```

При использовании метода [[yii\helpers\Html::addCssStyle()|addCssStyle()]] можно указать массив, пары ключ-значение
которого соответствуют названиям и значениям CSS-свойств, или строку, например `width: 100px; height: 200px;`. Эти два
формата могут быть преобразованы друг в друга с помощью методов
[[yii\helpers\Html::cssStyleFromArray()|cssStyleFromArray()]] и
[[yii\helpers\Html::cssStyleToArray()|cssStyleToArray()]]. Метод
[[yii\helpers\Html::removeCssStyle()|removeCssStyle()]] принимает на вход массив атрибутов, которые следует удалить.
Если удаляется всего один атрибут, его можно передать строкой.


### Экранирование контента <span id="encoding-and-decoding-content"></span>

Для корректного и безопасного отображения контента специальные символы в HTML-коде должны быть экранированы. В чистом
PHP это осуществляется с помощью функций [htmlspecialchars](http://www.php.net/manual/ru/function.htmlspecialchars.php)
и [htmlspecialchars_decode](http://www.php.net/manual/ru/function.htmlspecialchars-decode.php). Проблема использования
этих функций заключается в том, что приходится указывать кодировку и дополнительные флаги во время каждого вызова.
Поскольку флаги всё время одинаковы, а кодировка остаётся одной и той же в пределах приложения, Yii в целях
безопасности предоставляет два компактных и простых в использовании метода:

```php
$userName = Html::encode($user->name);
echo $userName;

$decodedUserName = Html::decode($userName);
```


## Формы <span id="forms"></span>

Разметка форм состоит из повторяющихся действий и часто приводит к ошибкам, поэтому есть целый набор методов, которые
помогают справиться с этой задачей.

> Примечание: Рассмотрите возможность использования [[yii\widgets\ActiveForm|ActiveForm]], если работаете с моделями и
  нуждаетесь в валидации данных.


### Создание форм <span id="creating-forms"></span>

Открывающий тэг формы может быть выведен с помощью метода [[yii\helpers\Html::beginForm()|beginForm()]] как показано
ниже:

```php
<?= Html::beginForm(['order/update', 'id' => $id], 'post', ['enctype' => 'multipart/form-data']) ?>
```

Первый аргумент - это URL-адрес, на который будет отправлена форма. Он может быть задан в виде Yii-маршрута и
параметров, подходящих для передачи в метод [[yii\helpers\Url::to()|Url::to()]]. Второй аргумент - способ отправки
данных: по умолчанию это `post`. Третий аргумент - массив атрибутов формы. В данном примере мы изменяем способ
кодирования данных в POST-запросе на `multipart/form-data`. Это необходимо для загрузки файлов.

Закрыть тэг формы можно простым кодом:

```php
<?= Html::endForm() ?>
```


### Кнопки <span id="buttons"></span>

Для формирования кнопок можно использовать следующий код:

```php
<?= Html::button('Нажми меня!', ['class' => 'teaser']) ?>
<?= Html::submitButton('Отправить', ['class' => 'submit']) ?>
<?= Html::resetButton('Сбросить', ['class' => 'reset']) ?>
```

Первый аргумент во всех трёх методах - это название кнопки, а второй - её атрибуты. Название кнопки не экранируется,
поэтому при получении данных от конечных пользователей экранируйте их с помощью метода
[[yii\helpers\Html::encode()|Html::encode()]].


### Поля ввода <span id="input-fields"></span>

Методы формирования полей ввода делятся на две группы. Первые начинаются со слова `active` и называются "active inputs",
а вторые не содержат в своём названии слова `active`. "Active inputs" формируют поля ввода, которые получают данные из
указанного атрибута модели, в то время как обычные методы формирования полей ввода непосредственно принимают данные.

Наиболее общие методы для формирования полей ввода:

```php
// тип, название поля ввода, установленное в поле значение, атрибуты поля ввода
<?= Html::input('text', 'username', $user->name, ['class' => $username]) ?>

// тип, модель, атрибут модели, атрибуты поля ввода
<?= Html::activeInput('text', $user, 'name', ['class' => $username]) ?>
```

Если вам заранее известен тип поля ввода, удобнее будет пользоваться этими вспомогательными методами:

- [[yii\helpers\Html::buttonInput()]]
- [[yii\helpers\Html::submitInput()]]
- [[yii\helpers\Html::resetInput()]]
- [[yii\helpers\Html::textInput()]], [[yii\helpers\Html::activeTextInput()]]
- [[yii\helpers\Html::hiddenInput()]], [[yii\helpers\Html::activeHiddenInput()]]
- [[yii\helpers\Html::passwordInput()]] / [[yii\helpers\Html::activePasswordInput()]]
- [[yii\helpers\Html::fileInput()]], [[yii\helpers\Html::activeFileInput()]]
- [[yii\helpers\Html::textarea()]], [[yii\helpers\Html::activeTextarea()]]

Сигнатура методов для формирования радио-переключателей и чекбоксов немного отличается: 

```php
<?= Html::radio('agree', true, ['label' => 'Я согласен']);
<?= Html::activeRadio($model, 'agree', ['class' => 'agreement'])

<?= Html::checkbox('agree', true, ['label' => 'Я согласен']);
<?= Html::activeCheckbox($model, 'agree', ['class' => 'agreement'])
```

Выпадающие и обычные списки могут быть сформированы следующим образом:

```php
<?= Html::dropDownList('list', $currentUserId, ArrayHelper::map($userModels, 'id', 'name')) ?>
<?= Html::activeDropDownList($users, 'id', ArrayHelper::map($userModels, 'id', 'name')) ?>

<?= Html::listBox('list', $currentUserId, ArrayHelper::map($userModels, 'id', 'name')) ?>
<?= Html::activeListBox($users, 'id', ArrayHelper::map($userModels, 'id', 'name')) ?>
```

Первый аргумент - это значение атрибута `name` для поля ввода, второй - выбранное в нём значение и, наконец, 
третий аргумент - это массив, ключами которого является список значений для формирования списка, а значениями массива
являются названия пунктов в нём.

Если вы хотите сделать в списке доступными для выбора несколько вариантов, хорошим выбором будет список чекбоксов:

```php
<?= Html::checkboxList('roles', [16, 42], ArrayHelper::map($roleModels, 'id', 'name')) ?>
<?= Html::activeCheckboxList($user, 'role', ArrayHelper::map($roleModels, 'id', 'name')) ?>
```

Если же нет, используйте радио-переключатель:

```php
<?= Html::radioList('roles', [16, 42], ArrayHelper::map($roleModels, 'id', 'name')) ?>
<?= Html::activeRadioList($user, 'role', ArrayHelper::map($roleModels, 'id', 'name')) ?>
```


### Тэги label и отображение ошибок <span id="labels-and-errors"></span>

Также как и для полей ввода, есть два метода формирования тэгов label для форм. Есть "active label", считывающий
данные из модели и обычный тэг "label", принимающий на вход непосредственно сами данные:

```php
<?= Html::label('Имя пользователя', 'username', ['class' => 'label username']) ?>
<?= Html::activeLabel($user, 'username', ['class' => 'label username'])
```

Для отображения общего списка ошибок формы на основе модели или моделей можно использовать следующий подход:

```php
<?= Html::errorSummary($posts, ['class' => 'errors']) ?>
```

Для отображения одной отдельной ошибки:

```php
<?= Html::error($post, 'title', ['class' => 'error']) ?>
```


### Атрибуты name и value для полей ввода <span id="input-names-and-values"></span>

Также имеются методы для получения значений атрибутов id, name и value для полей ввода, сформированных на основе
моделей. Эти методы используются в основном внутренними механизмами, но иногда могут оказаться подходящими и для прямого
использования:

```php
// Post[title]
echo Html::getInputName($post, 'title');

// post-title
echo Html::getInputId($post, 'title');

// моё первое сообщение
echo Html::getAttributeValue($post, 'title');

// $post->authors[0]
echo Html::getAttributeValue($post, '[0]authors[0]');
```

В вышеприведённом коде первый аргумент - это модель, а второй аргумент - выражение для поиска атрибута модели. В самом
простом случае оно представляет собой название атрибута модели, а вообще это может быть название, которому предшествует
(и/или после которого следует) индекс массива. Такой формат используется в основном для табличного ввода данных:

- `[0]content` используется для табличного ввода данных, чтобы указать на атрибут "content" первой модели табличного
  ввода;
- `dates[0]` указывает на первый элемент массива, с помощью которого задан атрибут модели "dates";
- `[0]dates[0]` указывает на первый элемент массива, с помощью которого задан атрибут "dates" первой модели табличного
  ввода.

Для того, чтобы получить название атрибута модели в чистом виде (без суффиксов и префиксов), можно использовать
следующий подход:

```php
// dates
echo Html::getAttributeName('dates[0]');
```


## Подключение встроенных стилей и скриптов <span id="styles-and-scripts"></span>

Для формирования встроенных скриптов и стилей есть два метода:

```php
<?= Html::style('.danger { color: #f00; }') ?>

Результатом будет:

<style>.danger { color: #f00; }</style>


<?= Html::script('alert("Привет!");', ['defer' => true]);

Результатом будет:

<script defer>alert("Привет!");</script>
```

Если вы хотите подключить внешний CSS-файл:

```php
<?= Html::cssFile('@web/css/ie5.css', ['condition' => 'IE 5']) ?>

В результате получится:

<!--[if IE 5]>
    <link href="http://example.com/css/ie5.css" />
<![endif]-->
```

Первый аргумент - URL-адрес. Второй - массив настроек. Помимо обычных настроек можно указать следующие:

- `condition` для оборачивания тэга `<link` с помощью условных комментариев с определённым условием. Надеемся, что вам
  никогда не понадобятся условные комментарии ;)
- `noscript` может быть установлен в значение `true`, чтобы обернуть тэг `<link` с помощью тэга `<noscript>`, таким
  образом скрипт будет подключён только в том случае, если у пользователя в браузере нет поддержки JavaScript или же 
  пользователь сам отключил его.

Для подключения JavaScript-файла используйте код:

```php
<?= Html::jsFile('@web/js/main.js') ?>
```

Как и в случае с CSS, первый аргумент указывает ссылку на файл, который должен быть подключен. Настройки задаются во
втором аргументе. Можно указать настройку `condition` таким же образом, каким она указывается для метода `cssFile`.


## Ссылки <span id="hyperlinks"></span>

Существует удобный метод формирования ссылок:

```php
<?= Html::a('Профиль', ['user/view', 'id' => $id], ['class' => 'profile-link']) ?>
```

Первый аргумент - это текст ссылки. Он не экранируется, поэтому при использовании данных, полученных от конечных 
пользователей, необходимо экранировать его с помощью `Html::encode()`. Второй аргумент - это содержимое атрибута `href`
тэга `<a`. Смотрите [Url::to()](helper-url.md) для получения подробностей относительно значений, которые могут быть
переданы в качестве второго аргумента. Третий аргумент - массив атрибутов для тэга.

Если нужно сформировать ссылку `mailto`, можно использовать следующий подход:

```php
<?= Html::mailto('Обратная связь', 'admin@example.com') ?>
```


## Изображения <span id="images"></span>

Для формирования тэга изображения используйте следующий код:

```php
<?= Html::img('@web/images/logo.png', ['alt' => 'Наш логотип']) ?>

в результате получится:

<img src="http://example.com/images/logo.png" alt="Наш логотип" />
```

Помимо [псевдонимов](concept-aliases.md) первый аргумент может принимать маршруты, параметры и URL-адреса таким же образом
как и метод [Url::to()](helper-url.md).


## Списки <span id="lists"></span>

Неупорядоченные списки могут быть сформированы следующим образом:

```php
<?= Html::ul($posts, ['item' => function($item, $index) {
    return Html::tag(
        'li',
        $this->render('post', ['item' => $item]),
        ['class' => 'post']
    );
}]) ?>
```

Для формирования упорядоченных списков используйте `Html::ol()`.