Zend窗體：如何用超鏈接包圍圖像元素？

Question

我如何使用HTML <a href> -Tag將Zend表單中的圖像元素包圍起來？我特別不想要JS onClick（） - 事件，因爲它似乎不能在我的情況下正常工作（請參閱問題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動作，使其按照您的需要進行操作。由於輸入類型=「按鈕」元素默認情況下不會執行任何操作，因此您不應該遇到以前遇到的任何問題。

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

文本縮進移動的文本標籤移出視野。如果你絕對不想在你的樣式表中使用這些規則，你可以通過傳遞樣式屬性來將它們嵌入到表單元素中。