Podstawowym sposobem korzystania z formularzy w Yii jest użycie ActiveForm. Ten sposób powinien byÄ używany, jeÅli formularz jest bazowany na modelu. Dodatkowo, klasa Html zawiera sporo użytecznych metod, które zazwyczaj używane sÄ do dodawania przycisków i tekstów pomocniczych do każdego formularza.
Formularz, który jest wyÅwietlany po stronie klienta, w wiÄkszoÅci przypadków, posiada odpowiedni model, który jest używany do walidacji danych wejÅciowych po
stronie serwera (sprawdź sekcjÄ Walidacja danych wejÅciowych aby uzyskaÄ wiÄcej szczegóÅów).
Podczas tworzenia formularza na podstawie modelu, pierwszym krokiem jest zdefiniowanie samego modelu.
Model może byÄ bazowany na klasie Active Record, reprezentujÄ
c dane z bazy danych, lub może byÄ też bazowany na klasie generycznej Model,
aby przechwytywaÄ dowolne dane wejÅciowe, np. formularz logowania.
Wskazówka: JeÅli pola formularza sÄ różne od kolumn tabeli w bazie danych lub też wystÄpuje tu formatowanie i logika specyficzna tylko dla tego formularza, zaleca siÄ stworzenie oddzielnego modelu rozszerzajÄ cego yii\base\Model.
W poniższym przykÅadzie pokażemy, jak model generyczny może byÄ użyty do stworzenia formularza logowania:
<?php
class LoginForm extends \yii\base\Model
{
public $username;
public $password;
public function rules()
{
return [
// zasady walidacji
];
}
}
W kontrolerze przekażemy instancjÄ tego modelu do widoku, gdzie widżet ActiveForm zostanie użyty do wyÅwietlenia formularza:
<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
$form = ActiveForm::begin([
'id' => 'login-form',
'options' => ['class' => 'form-horizontal'],
]) ?>
<?= $form->field($model, 'username') ?>
<?= $form->field($model, 'password')->passwordInput() ?>
<div class="form-group">
<div class="col-lg-offset-1 col-lg-11">
<?= Html::submitButton('Login', ['class' => 'btn btn-primary']) ?>
</div>
</div>
<?php ActiveForm::end() ?>
begin()
i end()
¶W powyższym kodzie, begin() nie tylko tworzy instancjÄ formularza, ale zaznacza też jego poczÄ
tek.
CaÅa zawartoÅÄ poÅożona pomiÄdzy begin() i end() zostanie otoczona tagiem HTML'owym <form>
.
Jak w przypadku każdego widżetu, możesz okreÅliÄ kilka opcji z jakimi widżet powinien byÄ skonfigurowany przez przekazanie tablicy do metody begin
.
W tym przypadku dodatkowa klasa CSS i identyfikator ID zostaÅy przekazane do otwierajÄ
cego tagu <form>
.
Aby zobaczyÄ wszystkie dostÄpne opcje, zajrzyj do dokumentacji API ActiveForm.
Do utworzenia formularza, wraz z elementami etykiet oraz wszelkimi walidacjami JavaScript, wywoÅywana jest metoda field(), która zwraca instancjÄ obiektu ActiveField. Kiedy rezultat tej metody jest bezpoÅrednio wyÅwietlany, tworzone jest regularne pole tekstowe. Aby dostosowaÄ pola, możesz używaÄ dodatkowych metod ÅÄ czonych ActiveField:
// pole hasÅa
<?= $form->field($model, 'password')->passwordInput() ?>
// dodanie podpowiedzi oraz zmiana etykiety
<?= $form->field($model, 'username')->textInput()->hint('Please enter your name')->label('Name') ?>
// utworzenie pola email w formacie HTML5
<?= $form->field($model, 'email')->input('email') ?>
Powyższy kod utworzy tagi <label>
, <input>
oraz wszystkie inne, wedÅug pól formularza zdefiniowanych w template.
Nazwa pola okreÅlana jest automatycznie z modelu formName() i nazwy atrybutu.
Dla przykÅadu, nazwÄ
pola dla atrybutu username
w powyższym przykÅadzie bÄdzie LoginForm[username]
.
Ta zasada nazewnictwa spowoduje, że tablica wszystkich atrybutów z formularza logowania bÄdzie dostÄpna w zmiennej $_POST['LoginForm']
po stronie serwera.
OkreÅlanie atrybutów modelu może byÄ wykonane w bardziej wyrafinowany sposób.
Dla przykÅadu, kiedy atrybut bÄdzie potrzebowaÅ pobieraÄ tablicÄ wartoÅci, podczas przesyÅania wielu plików lub wybrania wielu pozycji, możesz okreÅliÄ go jako tablicÄ dodajÄ
c []
do
nazwy atrybutu:
// pozwól na przesÅanie wielu plików
echo $form->field($model, 'uploadFile[]')->fileInput(['multiple'=>'multiple']);
// pozwól na zaznaczenie wielu pozycji
echo $form->field($model, 'items[]')->checkboxList(['a' => 'Item A', 'b' => 'Item B', 'c' => 'Item C']);
BÄ dź ostrożny podczas nazywania elementów formularza takich jak przyciski wysyÅania. OdnoszÄ c siÄ do dokumentacji jQuery, istnieje kilka zarezerwowanych nazw, które mogÄ powodowaÄ konflikty.
Formularz i jego elementy podrzÄdne powinny nie używaÄ nazw pól lub nazw identyfikatorów które tworzÄ konflikt z wÅaÅciwoÅciami formularza, takich jak
submit
,length
lubmethod
. Konflikty nazw mogÄ powodowaÄ mylÄ ce bÅÄdy. Kompletna lista zasad oraz walidator znaczników dla tych problemów znajduje siÄ na stronie DOMLint.
Dodatkowe tagi HTML mogÄ zostaÄ dodane do formularza używajÄ c czystego HTML'a lub używajÄ c metody z klasy pomocniczej - Html, tak jak byÅo to zrobione w przykÅadzie wyżej z submitButton().
Wskazówka: JeÅli używasz Twitter Bootstrap CSS w Twojej aplikacji, możesz użyÄ yii\bootstrap\ActiveForm zamiast yii\widgets\ActiveForm. Rozszerza on ActiveForm i podczas generowania pól formularza używa stylu specyficznego dla Bootstrap.
Wskazówka: JeÅli chcesz oznaczyÄ wymagane pola gwiazdkÄ , możesz uzyÄ poniższego kodu CSS:
div.required label:after { content: " *"; color: red; }
Wyróżniamy trzy typy list:
Aby stworzyÄ listÄ, musisz najpierw przygotowaÄ jej elementy. Można to zrobiÄ rÄcznie:
$items = [
1 => 'item 1',
2 => 'item 2'
]
lub też pobierajÄ c elementy z bazy danych:
$items = Category::find()
->select(['label'])
->indexBy('id')
->column();
Elementy $items
muszÄ
byÄ nastÄpnie przetworzone przez odpowiednie widżety list.
WartoÅÄ pola formularza (i aktualnie aktywny element) bÄdzie automatycznie ustawiony przez aktualnÄ
wartoÅÄ atrybutu $model
.
Możemy użyÄ metody klasy ActiveForm yii\widgets\ActiveForm::dropDownList() do utworzenia rozwijanej listy:
/* @var $form yii\widgets\ActiveForm */
echo $form->field($model, 'category')->dropdownList([
1 => 'item 1',
2 => 'item 2'
],
['prompt'=>'Wybierz kategoriÄ']
);
Do stworzenia takiej listy możemy użyÄ metody ActiveField yii\widgets\ActiveField::radioList():
/* @var $form yii\widgets\ActiveForm */
echo $form->field($model, 'category')->radioList([
1 => 'radio 1',
2 => 'radio 2'
]);
Do stworzenia takiej listy możemy użyÄ metody ActiveField yii\widgets\ActiveField::checkboxList():
/* @var $form yii\widgets\ActiveForm */
echo $form->field($model, 'category')->checkboxList([
1 => 'checkbox 1',
2 => 'checkbox 2'
]);
Widżet Pjax pozwala na aktualizacjÄ okreÅlonej sekcji strony, zamiast przeÅadowywania jej caÅkowicie. Możesz użyÄ go do odÅwieżenia formularza i podmieniÄ jego zawartoÅÄ po wysÅaniu danych.
Możesz skonfigurowaÄ $formSelector, aby wskazaÄ,
które formularze powinny wyzwalaÄ użycie pjaxa. JeÅli nie zostanie to ustawione inaczej,
wszystkie formularze z atrybutem data-pjax
objÄte widżetem Pjax bÄdÄ
wyzwalaÅy jego użycie.
use yii\widgets\Pjax;
use yii\widgets\ActiveForm;
Pjax::begin([
// opcje Pjaxa
]);
$form = ActiveForm::begin([
'options' => ['data' => ['pjax' => true]],
// wiÄcej opcji ActiveForm
]);
// zawartoÅÄ ActiveForm
ActiveForm::end();
Pjax::end();
Wskazówka: Należy byÄ ostrożnym z użyciem linków wewnÄ trz widżetu Pjax, ponieważ ich cel również zostanie wyrenderowany wewnÄ trz widżetu. Aby temu zapobiec, należy użyÄ atrybutu HTML
data-pjax="0"
.
Znane sÄ
problemy z użyciem jQuery.serializeArray()
podczas obsÅugi
[[https://github.com/jquery/jquery/issues/2321|plików]] i
[[https://github.com/jquery/jquery/issues/2321|wartoÅci przycisku submit]], które nie
bÄdÄ
jednak rozwiÄ
zane i zamiast tego zostaÅy porzucone na rzecz klasy FormData
wprowadzonej w HTML5.
Oznacza to, że oficjalne wsparcie dla plików i wartoÅci przycisku submit używanych w poÅÄ
czeniu
z ajaxem lub widżetem Pjax zależy od
[[https://developer.mozilla.org/en-US/docs/Web/API/FormData#Browser_compatibility|wsparcia przeglÄ
darki]]
dla klasy FormData
.
NastÄpna sekcja Walidacja danych wejÅciowych dotyczy walidacji przesÅanych przed formularz danych po stronie serwera, przy użyciu ajax oraz walidacji po stronie klienta.
Aby przeczytaÄ o bardziej zÅożonych użyciach formularzy możesz zajrzeÄ do poniższych sekcji:
Found a typo or you think this page needs improvement?
Edit it on github !
Signup or Login in order to comment.