Это первая статейка с примерами из серии работы с полями в ActiveForm в Yii2. Постараемся, чтобы эта серия статей максимально покрывала самые популярные варианты использования полей. Чтение официальной документации никто не отменял 😀
Примеры содержат в себе код на PHP и получаемый результат на HTML, как его генерируем Yii2.
Внимание: Примеры будут обновляться, так как не задеты вопросы вывода ошибок и валидации полей на стороне клиента.
Список примеров:
1. Стандартное использование
2. Убираем враппер div.form-group
3. Заменяем класс form-group на свой
4. Заменяем враппер div.form-group на свой тег и со своим классом
5. Кастомный вид одного чекбокса
Небольшая оговорка для упрощения примеров. Под переменной $interest_categories подразумевается такой вот массив:
$interest_categories = [ 1 => 'Mind Body Spirit Events/Workshops/Courses/Tours', 2 => 'New Age/Paranormal/Metaphysical Publications', 3 => 'UFO, Paranormal Events & Tours', 4 => 'Films & Documentaries/Sc-Fi Releases', 5 => 'Merchandise/Health Products and Services', 6 => 'None. (Its OK, We Are Not Offended)', ];
Стандартное использование
Пример стандартного использования checkboxlist() в Yii2.
<?= $interest_form->field($interest_model, 'interest_category_id')->checkboxlist($interest_categories);?>
<div class="form-group field-usersinterestcategoriesform-interest_category_id required"> <input type="hidden" name="UsersInterestCategoriesForm[interest_category_id]" value=""> <div id="usersinterestcategoriesform-interest_category_id"> <div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm[interest_category_id][]" value="1">Mind Body Spirit Events/Workshops/Courses/Tours</label></div> <div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm[interest_category_id][]" value="2">New Age/Paranormal/Metaphysical Publications</label></div> <div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm[interest_category_id][]" value="3">UFO, Paranormal Events & Tours</label></div> <div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm[interest_category_id][]" value="4">Films & Documentaries/Sc-Fi Releases</label></div> <div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm[interest_category_id][]" value="5">Merchandise/Health Products and Services</label></div> <div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm[interest_category_id][]" value="6">None. (Its OK, We Are Not Offended)</label></div> </div> </div>
Убираем враппер div.form-group
В данном примере видно как можно убрать враппер div.form-group внутри которого лежат чекбоксы.
<?= $interest_form->field( $interest_model, 'interest_category_id', [ 'options' => [ 'tag' => false, ] ])->checkboxlist($interest_categories);?>
<input type="hidden" name="UsersInterestCategoriesForm[interest_category_id]" value=""> <div id="usersinterestcategoriesform-interest_category_id"> <div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm[interest_category_id][]" value="1">Mind Body Spirit Events/Workshops/Courses/Tours</label></div> <div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm[interest_category_id][]" value="2">New Age/Paranormal/Metaphysical Publications</label></div> <div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm[interest_category_id][]" value="3">UFO, Paranormal Events & Tours</label></div> <div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm[interest_category_id][]" value="4">Films & Documentaries/Sc-Fi Releases</label></div> <div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm[interest_category_id][]" value="5">Merchandise/Health Products and Services</label></div> <div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm[interest_category_id][]" value="6">None. (Its OK, We Are Not Offended)</label></div> </div>
Заменяем класс form-group на свой
Поменяем класс враппера div.form-group на div.trololo.
<?= $interest_form->field( $interest_model, 'interest_category_id', [ 'options' => [ 'class' => 'trololo', ] ])->checkboxlist($interest_categories);?>
<div class="trololo field-usersinterestcategoriesform-interest_category_id required"> <input type="hidden" name="UsersInterestCategoriesForm[interest_category_id]" value=""> <div id="usersinterestcategoriesform-interest_category_id"> <div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm[interest_category_id][]" value="1">Mind Body Spirit Events/Workshops/Courses/Tours</label></div> <div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm[interest_category_id][]" value="2">New Age/Paranormal/Metaphysical Publications</label></div> <div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm[interest_category_id][]" value="3">UFO, Paranormal Events & Tours</label></div> <div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm[interest_category_id][]" value="4">Films & Documentaries/Sc-Fi Releases</label></div> <div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm[interest_category_id][]" value="5">Merchandise/Health Products and Services</label></div> <div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm[interest_category_id][]" value="6">None. (Its OK, We Are Not Offended)</label></div> </div> </div>
Заменяем враппер div.form-group на свой тег и со своим классом
Полностью заменим тег и класс для враппера с div.form-group на span.trololo.
<?= $interest_form->field( $interest_model, 'interest_category_id', [ 'options' => [ 'tag' => 'span', 'class' => 'trololo', ] ])->checkboxlist($interest_categories);?>
<span class="trololo field-usersinterestcategoriesform-interest_category_id required"> <input type="hidden" name="UsersInterestCategoriesForm[interest_category_id]" value=""> <div id="usersinterestcategoriesform-interest_category_id"> <div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm[interest_category_id][]" value="1">Mind Body Spirit Events/Workshops/Courses/Tours</label></div> <div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm[interest_category_id][]" value="2">New Age/Paranormal/Metaphysical Publications</label></div> <div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm[interest_category_id][]" value="3">UFO, Paranormal Events & Tours</label></div> <div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm[interest_category_id][]" value="4">Films & Documentaries/Sc-Fi Releases</label></div> <div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm[interest_category_id][]" value="5">Merchandise/Health Products and Services</label></div> <div class="checkbox"><label><input type="checkbox" name="UsersInterestCategoriesForm[interest_category_id][]" value="6">None. (Its OK, We Are Not Offended)</label></div> </div> </span>
Кастомный вид одного чекбокса
В этом примере видно как можно кастомизировать внешний вид одноо чекбокса. Для комбинации можно применить опции из примеров выше.
<?= $form->field($model, 'country_id')->checkboxlist($interest_categories, [
'item' => function($index, $label, $name, $checked, $value)
{
return '<div class="checkbox">
<label for="interview-'. $index .'">
<input id="interview-'. $index .'" name="'. $name .'" type="checkbox" '. $checked .' value="'. $value .'">
<span></span>
'. $label .'
</label>
</div>';
}
]);?>
<div class="form-group field-users-country_id required"> <input type="hidden" name="Users[country_id]" value=""><div id="users-country_id"> <div class="checkbox"> <label for="interview-0"> <input id="interview-0" name="Users[country_id][]" type="checkbox" value="1"> <span></span> Mind Body Spirit Events/Workshops/Courses/Tours </label> </div> <div class="checkbox"> <label for="interview-1"> <input id="interview-1" name="Users[country_id][]" type="checkbox" value="2"> <span></span> New Age/Paranormal/Metaphysical Publications </label> </div> <div class="checkbox"> <label for="interview-2"> <input id="interview-2" name="Users[country_id][]" type="checkbox" value="3"> <span></span> UFO, Paranormal Events & Tours </label> </div> <div class="checkbox"> <label for="interview-3"> <input id="interview-3" name="Users[country_id][]" type="checkbox" value="4"> <span></span> Films & Documentaries/Sc-Fi Releases </label> </div> <div class="checkbox"> <label for="interview-4"> <input id="interview-4" name="Users[country_id][]" type="checkbox" value="5"> <span></span> Merchandise/Health Products and Services </label> </div> <div class="checkbox"> <label for="interview-5"> <input id="interview-5" name="Users[country_id][]" type="checkbox" value="6"> <span></span> None. (Its OK, We Are Not Offended) </label> </div> </div>
Июнь 2nd, 2016
Tags: activeform, yii2