ZF2 Vertical Form

Posted by yunhasnawa on Stack Overflow See other posts from Stack Overflow or by yunhasnawa
Published on 2013-11-12T04:30:23Z Indexed on 2013/11/12 9:54 UTC
Read the original article Hit count: 196

Filed under:
|
|
|

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: Awesome vertical form

But what i got is an ugly form like this: Yikes!

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?

© Stack Overflow or respective owner

Related posts about php

Related posts about html