ZF2 Vertical Form - php

Question

I created a simple form in typical ZF2 application. The form class code is just a modified code provided by Zend's Album example.
<?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',
),
));
}
}
And call it like this in CityController, a typical controller extends AbstractActionController:
public function addAction()
{
$form = new CityForm();
$viewData = array(
'form' => $form
);
return new ViewModel($viewData);
}
Finally in view I echo it like this:
<?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();
?>
What I expected to see is a vertical form like this:
But what i got is an ugly form like this:
What's wrong with my code? Please help.
EDIT:
When I inspect element, the form generated is strange. The <input> element is inside the <label> element.
<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>
I'm pretty sure it is the cause of my ugly rendered form. I think it is not supposedly like that. How to fix it?

Answer 1

That's something you have to do in your css.
Give your label a fixed width/length will align them correctly.
If you want to achieve your example above, add display:block for labels then they will each take a full line, like a block element.

Answer 2

Fixed. For other who has the same experience with me, just add element id in form class:
$this->add(array(
'name' => 'name',
'attributes' => array(
'type' => 'text',
'id' => 'name', // Must have id, will render strange otherwise!
),
'options' => array(
'label' => 'Name',
),
));
This fixes the issue for me.

Answer 3

Use the built in twitter bootstrap css which comes with Zf2. Use divs to render your form elements. I understand that everyone thinks about the form data that you set on your .html is pure php data and you cant align it.
<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>
Thats the sample....try doing what you like just like what i have shown above and you are good to go.