Zend表单:如何用超链接包围图像元素

Question

如何用HTML <a href> -Tag包围Zend表单中的图像元素?我特别不想要一个JS的onClick()-事件，因为它似乎不能正常工作在我的情况下(见问题Zend:重定向从表单没有验证)。

这是我如何在表单中添加图像元素，现在超链接显示为文本"Link"右边的图像:

    $this->addElement('image', 'btnBack', array (
        'name' => 'btnBack',
        'id'   => 'btnBack',
        'label' => '',
        'title' => 'Go back',
        'alt' => 'Go back',
        'src' => '/img/undo.png'
    ));
    $this->getElement('btnBack')
            ->setDescription('<a href="/admin/groupoverview">Link</a>')
            ->setDecorators(array(
                'ViewHelper',
                array('Description', array('escape' => false, 'tag' => false)),
                array('HtmlTag', array('tag' => 'dd')),
                array('Label', array('tag' => 'dt')),
                'Errors',
              ));

Answer 1

这听起来不是个好主意。从你的其他问题来看，所有你想要的是一个图像"按钮"，去到一个特定的URL。您不应该尝试对图像输入执行此操作，因为这是一种提交按钮，因此单击它将提交表单。如果你试图用javascript重写这个，或者用HTML链接包装整个东西，你试图解决错误的问题。

最简单的方法可能是使用按钮输入。然后，您可以使用CSS对其进行样式设置，使其看起来像图像，并添加javascript onclick操作以使其执行您想要的操作。由于input type="button"元素在默认情况下不做任何onclick操作，因此您应该不会遇到之前遇到的任何问题。

$this->addElement('button', 'btnBack', array(
    'id'   => 'btnBack',
    'label' => 'Go back',
    'onclick' => "window.location='/admin/groupoverview'"
));

然后在样式表中(将宽度和高度替换为正确的图像尺寸):

#btnBack {
    background-image: url(/img/undo.png);
    width: 123px;
    height: 123px;
    border: 0;
    text-indent: -1000px;
    cursor: pointer;
}

text-indent将文本标签移出视图。如果你绝对不想在样式表中使用这些规则，你可以通过传递style属性将它们内联到form元素中。