Yii2. Виджет ActiveForm

06.03.2019

Теги: HTMLPHPWeb-разработкаYii2КнопкаТеорияФорма

Рассмотрим часто использующийся при разработке виджет ActiveForm. Виджет позволяет добавить на сайт форму с полями ввода, кнопками, списками выбора, чекбоксами, радио кнопками. Для создания формы подключаем в шаблоне следующие классы:

// подключаем помощник html разметки
use yii\helpers\Html;
// подключаем виджет для работы с формами
use yii\widgets\ActiveForm;
// для добавления captcha
use yii\captcha\Captcha;
// вместо yii\widgets\ActiveForm можно использовать версию под
// bootstrap 3, которая предоставляет дополнительные возможности
use yii\bootstrap\ActiveForm;

Инициализация формы

$form = ActiveForm::begin([
    // идентификатор формы
    'id' => 'feedback-form',
    'options' => [
        // класс формы
        'class' => 'form-horizontal',
        // возможность загрузки файлов
        'enctype' => 'multipart/form-data'
     ]
]);
/* Сюда добавляем поля формы */
ActiveForm::end();
<form id="feedback-form" class="form-horizontal" action="/web/index.php?r=page%2Ffeedback" method="post">
    <input type="hidden" name="_csrf" value=".....">
</form>

Текстовое поле

Простое текстовое поле

echo $form->field($model,'name'); 
<form id="feedback-form" class="form-horizontal" action="/web/index.php?r=page%2Ffeedback" method="post">
    <input type="hidden" name="_csrf" value=".....">
    <div class="form-group field-feedbackform-name">
        <label class="control-label" for="feedbackform-name">Name</label>
        <input type="text" id="feedbackform-name" class="form-control" name="FeedbackForm[name]">
        <div class="help-block"></div>
    </div>
</form>

Текстовое поле с подсказкой и описанием

echo $form->field($model, 'name')->textInput()->hint('Введите имя')->label('Имя');
<form id="feedback-form" class="form-horizontal" action="/web/index.php?r=page%2Ffeedback" method="post">
    <input type="hidden" name="_csrf" value=".....">
    <div class="form-group field-feedbackform-name">
        <label class="control-label" for="feedbackform-name">Имя</label>
        <input type="text" id="feedbackform-name" class="form-control" name="FeedbackForm[name]">
        <div class="hint-block">Введите имя</div>
        <div class="help-block"></div>
    </div>
</form>

Текстовое поле для e-mail

Простое поле для e-mail

echo $form->field($model, 'email')->input('email');
<form id="feedback-form" class="form-horizontal" action="/web/index.php?r=page%2Ffeedback" method="post">
    <input type="hidden" name="_csrf" value=".....">
    <div class="form-group field-feedbackform-email">
        <label class="control-label" for="feedbackform-email">Email</label>
        <input type="email" id="feedbackform-email" class="form-control" name="FeedbackForm[email]">
        <div class="help-block"></div>
    </div>
</form>

Поле с подсказкой и описанием

echo $form->field($model, 'email')->input('email')->hint('Введите адрес почты')->label('Электронный адрес');
<form id="feedback-form" class="form-horizontal" action="/web/index.php?r=page%2Ffeedback" method="post">
    <input type="hidden" name="_csrf" value=".....">
    <div class="form-group field-feedbackform-email">
        <label class="control-label" for="feedbackform-email">Электронный адрес</label>
        <input type="email" id="feedbackform-email" class="form-control" name="FeedbackForm[email]">
        <div class="hint-block">Введите адрес почты</div>
        <div class="help-block"></div>
    </div>
</form>

Поле для ввода пароля

Простое поле для пароля

// первый вариант
echo $form->field($model, 'password')->passwordInput();
// второй вариант
echo $form->field($model, 'password')->input('password');
<form id="feedback-form" class="form-horizontal" action="/web/index.php?r=page%2Ffeedback" method="post">
    <input type="hidden" name="_csrf" value=".....">
    <div class="form-group field-feedbackform-password">
    <label class="control-label" for="feedbackform-password">Password</label>
    <input type="password" id="feedbackform-password" class="form-control" name="FeedbackForm[password]">
    <div class="help-block"></div>
    </div>
</form>

Поле с подсказкой и описанием

echo $form->field($model, 'password')
          ->passwordInput()
          ->hint('Пароль должен содержать латинские символы и буквы')
          ->label('Введите пароль');
<form id="feedback-form" class="form-horizontal" action="/web/index.php?r=page%2Ffeedback" method="post">
    <input type="hidden" name="_csrf" value=".....">
    <div class="form-group field-feedbackform-password">
        <label class="control-label" for="feedbackform-password">Введите пароль</label>
        <input type="password" id="feedbackform-password" class="form-control" name="FeedbackForm[password]">
        <div class="hint-block">Пароль должен содержать латинские символы и буквы</div>
        <div class="help-block"></div>
    </div>
</form>

Многострочное текстовое поле

Простое многострочное поле

echo $form->field($model, 'body')->textarea();
<form id="feedback-form" class="form-horizontal" action="/web/index.php?r=page%2Ffeedback" method="post">
    <input type="hidden" name="_csrf" value=".....">
    <div class="form-group field-feedbackform-body">
        <label class="control-label" for="feedbackform-body">Body</label>
        <textarea id="feedbackform-body" class="form-control" name="FeedbackForm[body]"></textarea>
        <div class="help-block"></div>
    </div>
</form>

Многострочное поле определенного размера с описанием

echo $form->field($model, 'body')->textarea(['rows'=>4,'cols'=>10])->label('Сообщение');
<form id="feedback-form" class="form-horizontal" action="/web/index.php?r=page%2Ffeedback" method="post">
    <input type="hidden" name="_csrf" value=".....">
    <div class="form-group field-feedbackform-body">
        <label class="control-label" for="feedbackform-body">Сообщение</label>
        <textarea id="feedbackform-body" class="form-control" name="FeedbackForm[body]" rows="4" cols="10"></textarea>
        <div class="help-block"></div>
    </div>
</form>

Поиск: HTML • PHP • Web-разработка • Yii2 • Кнопка • Форма

Каталог оборудования
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Производители
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Функциональные группы
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.