Default Green Orange
Gemini_13's Blog
Блокнот полезных вещей
Home
    • Карта сайта
    • Обо мне
RSS

Поля форм на Yii2: textInput(), passwordInput() и hiddenInput()

Разное, Скрипты Add comments

Статейка по использованию textInput(), passwordInput() и hiddenInput().
Все варианты кастомизации textInput() подходят и для passwordInput() и hiddenInput().

Примеры содержат в себе код на PHP и получаемый результат на HTML, как его генерируем Yii2.

Внимание: Примеры будут обновляться, так как не задеты вопросы вывода ошибок и валидации полей на стороне клиента.

Список примеров:
1. Стандартное использование textInput()
2. Стандартное использование passwordInput()
3. Стандартное использование hiddenInput()
4. Убираем враппер div.form-group
5. Заменяем тег враппера div.form-group на свой тег
6. Заменяем класс враппера div.form-group на свой
7. Заменяем враппер div.form-group на свой тег и со своим классом
8. Добавляем к input свои классы
9. Добавляем к input свои классы и кастомный id


Стандартное использование textInput()
Пример стандартного использования textInput() в Yii2.

<?= $profile_form->field($model, 'username')->textInput() ?>
<div class="form-group field-users-username required">
<label class="control-label" for="users-username">Username</label>
<input id="users-username" class="form-control" name="Users&#91;username&#93;" value="" type="text">
<p class="help-block help-block-error"></p>
</div>

Стандартное использование passwordInput()
Пример стандартного использования passwordInput() в Yii2.

<?= $profile_form->field($model, 'password')->passwordInput() ?>
<div class="form-group field-users-password">
<label class="control-label" for="users-password">Password</label>
<input id="users-password" class="form-control" name="Users&#91;password&#93;" value="" type="password">
<p class="help-block help-block-error"></p>
</div>

Стандартное использование hiddenInput()
Пример стандартного использования hiddenInput() в Yii2.

<?= $profile_form->field($model, 'test')->hiddenInput() ?>
<div class="form-group field-users-test">
<label class="control-label" for="users-test">Test</label>
<input id="users-test" class="form-control" name="Users&#91;test&#93;" value="" type="hidden">
<p class="help-block help-block-error"></p>
</div>

Убираем враппер div.form-group
В данном примере видно как можно убрать враппер div.form-group внутри которого лежит input.

<?= $profile_form->field(
	$model,
	'username', [
	'options' => [
		'tag' => false
	]
])->textInput() ?>
<label class="control-label" for="users-username">Username</label>
<input id="users-username" class="form-control" name="Users&#91;username&#93;" value="" type="text">
<p class="help-block help-block-error"></p>

Заменяем тег враппера div.form-group на свой тег
Полностью заменим тег для враппера с div.form-group на span. Побочным эффектом будет тот факт, что класс .form-group пропадет.

<?= $profile_form->field(
	$model,
	'username', [
	'options' => [
		'tag' => 'span'
	]
])->textInput() ?>
<span class="field-users-username required">
<label class="control-label" for="users-username">Username</label>
<input id="users-username" class="form-control" name="Users&#91;username&#93;" value="" type="text">
<p class="help-block help-block-error"></p>
</span>

Заменяем класс враппера div.form-group на свой
Поменяем класс враппера div.form-group на div.trololo.

<?= $profile_form->field(
	$model,
	'username', [
	'options' => [
		'class'	=> 'trololo',
	]
])->textInput() ?>
<div class="trololo field-users-username required">
<label class="control-label" for="users-username">Username</label>
<input id="users-username" class="form-control" name="Users&#91;username&#93;" value="" type="text">
<p class="help-block help-block-error"></p>
</div>

Заменяем враппер div.form-group на свой тег и со своим классом
Полностью заменим тег и класс для враппера с div.form-group на span.trololo.

<?= $profile_form->field(
	$model,
	'username', [
	'options' => [
		'tag'	=> 'span',
		'class' => 'trololo'
	]
])->textInput() ?>
<span class="trololo field-users-username required">
<label class="control-label" for="users-username">Username</label>
<input id="users-username" class="form-control" name="Users&#91;username&#93;" value="" type="text">
<p class="help-block help-block-error"></p>
</span>

Добавляем к input свои классы
Добавим для тега input свои кастомные классы .form-control.empty.

<?= $profile_form->field($model, 'username')->textInput([
	'class' => 'form-control empty',
	'id' => 'trololo',
]) ?>
<div class="form-group field-users-username required">
<label class="control-label" for="users-username">Username</label>
<input type="text" id="users-username" class="form-control empty" name="Users&#91;username&#93;" value="">
<p class="help-block help-block-error"></p>
</div>

Добавляем к input свои классы и кастомный id
Добавим для тега input свои кастомные классы .form-control.empty и меняем id на свой.

<?= $profile_form->field($model, 'username')->textInput([
	'class' => 'form-control empty',
	'id' => 'trololo',
]) ?>
<div class="form-group field-trololo required">
<label class="control-label" for="trololo">Username</label>
<input type="text" id="trololo" class="form-control empty" name="Users&#91;username&#93;" value="">
<p class="help-block help-block-error"></p>
</div>

2 июня, 2016  
Tags: activeform, yii2

Leave a Reply

  • Рубрики

    • FreeBSD (20)
    • Linux (46)
    • MySQL (11)
    • Windows (14)
    • Железо (3)
    • Мои моды к TorrentPier II (16)
    • Настройка сервера (49)
    • Разное (33)
    • Скрипты (30)
  • Свежие записи

    • Поля форм на Yii2: textInput(), passwordInput() и hiddenInput()
    • Поля форм на Yii2: CheckboxList()
    • SpeedTest датацентров Digital Ocean
    • Патчим Gearman на Debian
    • nginx + Apache 2.4 и REMOTE_ADDR (решение проблемы)
    • Создание и подключение swap-файла в Debian
    • Запуск PhpStorm 9 x64 на Windows
    • Рекурсивная замена прав доступа для папок и файлов в Linux
    • VirtualBox 5 + phpVirtualBox на Debian 8.2 (jessie)
    • Обработка сессий PHP с помощью Redis + phpredis на Debian 7.8
  • Ссылки

    • My GitHub
  • Архивы

    • Июнь 2016 (2)
    • Март 2016 (2)
    • Январь 2016 (3)
    • Ноябрь 2015 (2)
    • Август 2015 (1)
    • Февраль 2015 (1)
    • Январь 2015 (7)
    • Октябрь 2014 (1)
    • Июнь 2014 (1)
    • Май 2014 (1)
    • Апрель 2014 (7)
    • Февраль 2014 (9)
    • Январь 2014 (5)
    • Декабрь 2013 (7)
    • Ноябрь 2013 (1)
    • Октябрь 2013 (3)
    • Август 2013 (4)
    • Июль 2013 (4)
    • Июнь 2013 (3)
    • Апрель 2013 (2)
    • Март 2013 (2)
    • Февраль 2013 (6)
    • Январь 2013 (2)
    • Декабрь 2012 (1)
    • Ноябрь 2012 (2)
    • Октябрь 2012 (7)
    • Сентябрь 2012 (22)
Все права защищены © 2016 Gemini_13's Blog
G13.org.ua