Zend 形式：如何用超链接包围图像元素？

Question

如何用 HTML <a href>-Tag 包围 Zend 表单内的图像元素？我特别不想要 JS onClick()-Event，因为它在我的情况下似乎无法正常工作（请参阅问题 Zend: Redirect from form without validation）。

这就是我在表单中添加图像元素的方式，现在超链接显示为图像旁边的文本“链接”：

    $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" 元素在默认情况下不会在点击时执行任何操作，因此您应该不会遇到以前遇到的任何问题。

$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;
}

文本缩进将文本标签移出视图。如果您绝对不希望在样式表中使用这些规则，则可以通过传递样式属性将它们内联到表单元素中。