ZF2 Вертикальная форма

Question

Я создал простую форму в типичном приложении ZF2. Код класса формы - это только модифицированный код, предоставленный примером альбома Zend.

<?php 
namespace Admin\Form; 

use Zend\Form\Form; 

class CityForm extends Form 
{ 
    public function __construct($name = null) 
    { 
     parent::__construct('city'); 

     $this->setAttribute('method', 'post'); 

     $this->add(array(
      'name' => 'id', 
      'attributes' => array(
       'type' => 'hidden', 
      ), 
     )); 

     $this->add(array(
      'name' => 'name', 
      'attributes' => array(
       'type' => 'text' 
      ), 
      'options' => array(
       'label' => 'Name', 
      ), 
     )); 

     $this->add(array(
      'name' => 'province', 
      'attributes' => array(
       'type' => 'text' 
      ), 
      'options' => array(
       'label' => 'Province', 
      ), 
     )); 

     $this->add(array(
      'name' => 'country', 
      'attributes' => array(
       'type' => 'text' 
      ), 
      'options' => array(
       'label' => 'Country', 
      ), 
     )); 

     $this->add(array(
      'name' => 'coordinate', 
      'attributes' => array(
       'type' => 'text' 
      ), 
      'options' => array(
       'label' => 'Coordinate', 
      ), 
     )); 

     $this->add(array(
      'name' => 'submit', 
      'attributes' => array(
       'type' => 'submit', 
       'value' => 'Save', 
       'id' => 'submitButton', 
      ), 
     )); 
    } 
} 

И называют его, как это в CityController, типичный контроллер расширяет AbstractActionController:

public function addAction() 
{ 
    $form = new CityForm(); 

    $viewData = array(
     'form' => $form 
    ); 

    return new ViewModel($viewData); 
} 

Наконец в виду Я присоединяюсь это так:

<?php $title = 'Add New City'; ?> 
<?php $this->headtitle($title); ?> 
<h1><?php echo $this->escapehtml($title); ?></h1> 
<?php $form = $this->form; ?> 
<?php $form->setAttribute('action', $this->url('city', array('action' => 'add'))); ?> 
<?php $form->prepare(); ?> 
<?php 
echo $this->form()->openTag($form); 
echo $this->formHidden($form->get('id')); 
echo $this->formRow($form->get('name')); 
echo $this->formRow($form->get('province')); 
echo $this->formRow($form->get('country')); 
echo $this->formRow($form->get('coordinate')); 
echo $this->formSubmit($form->get('submit')); 
echo $this->form()->closeTag(); 
?> 

То, что я ожидал увидеть это вертикальная форма:

Но у меня есть u gly form вот так:

Что случилось с моим кодом? Пожалуйста помоги.

РЕДАКТИРОВАТЬ:

Когда я проверить элемент, форма генерируется странно. Элемент <input> находится внутри элемента <label>.

<form id="city" name="city" method="post" action="/karciscus/public/admin/city/add"> 
    <input type="hidden" value="" name="id"> 
    <label> 
     <span>Name</span><input type="text" value="" name="name"> 
    </label> 
    <label> 
     <span>Province</span><input type="text" value="" name="province"> 
    </label> 
    <label> 
     <span>Country</span><input type="text" value="" name="country"> 
    </label> 
    <label> 
    <span> 
     Coordinate</span><input type="text" value="" name="coordinate"> 
    </label> 
    <input type="submit" value="Save" id="submitButton" name="submit"> 
</form> 

Я уверен, что это причина моей уродливой визуализированной формы. Я думаю, что это не так. Как это исправить?

Answer 1

Исправлено. Для других, кто имеет такой же опыт со мной, просто добавить элемент идентификатор в классе формы:

$this->add(array(
    'name' => 'name', 
    'attributes' => array(
     'type' => 'text', 
     'id' => 'name', // Must have id, will render strange otherwise! 
    ), 
    'options' => array(
     'label' => 'Name', 
    ), 
)); 

Это устраняет проблему для меня.

Answer 2

Это то, что вам нужно сделать в вашем css. Дайте вашей этикетке фиксированную ширину/длину, чтобы выровнять их правильно. Если вы хотите достичь своего примера выше, добавьте display: block для меток, тогда каждый из них возьмет полную строку, как элемент блока.

Answer 3

Используйте встроенный twitter bootstrap css, который поставляется с Zf2. Используйте div для рендеринга элементов формы. Я понимаю, что все думают о данных формы, которые вы задали на своем .html, - это чистые php-данные, и вы не можете их выровнять.

<div class="row"> 
<?php $title = 'Add New City'; ?> 
<div> 

<div class="row"> 

<?php $this->headtitle($title); ?> 
<h1><?php echo $this->escapehtml($title); ?></h1> 
<?php $form = $this->form; ?> 
<?php $form->setAttribute('action', $this->url('city', array('action' => 'add'))); ?> 
<?php $form->prepare(); ?> 
<?php 
echo $this->form()->openTag($form); 
echo $this->formHidden($form->get('id')); 
echo $this->formRow($form->get('name')); 
echo $this->formRow($form->get('province')); 
echo $this->formRow($form->get('country')); 
echo $this->formRow($form->get('coordinate')); 
echo $this->formSubmit($form->get('submit')); 
echo $this->form()->closeTag(); 
?> 
</div> 

Это образец ... попробуйте сделать то, что вам нравится, так же, как то, что я показал выше, и вам хорошо идти.