php - ZF2 立式

Question

我在典型的 ZF2 应用程序中创建了一个简单的表单。表单类代码只是 Zend 的 Album 示例提供的修改代码。

<?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();
?>

我期望看到的是这样的垂直形式：

但我得到的是这样一个丑陋的形式：

我的代码有什么问题？请帮忙。

编辑：

当我检查元素时，生成的表单很奇怪。<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

使用 Zf2 自带的内置 twitter bootstrap css。使用 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>

这就是示例......尝试做你喜欢的，就像我上面展示的那样，你很高兴。

Answer 2

这是你必须在你的 CSS 中做的事情。给你的标签一个固定的宽度/长度将使它们正确对齐。如果您想实现上面的示例，请为标签添加 display:block ，然后它们将占据一整行，就像块元素一样。

Answer 3

固定的。对于其他与我有相同经验的人，只需在表单类中添加元素 id：

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

这为我解决了这个问题。