Zend Framework Zend_Form Decorators: <span> Inner Button Element?

Question

I have a button element that I created like this:

$submit = new Zend_Form_Element_Button('submit'); $submit->setLabel('My Button'); $submit->setDecorators(array( 'ViewHelper', array('HtmlTag', array('tag' => 'li')) )); $submit->setAttrib('type', 'submit'); 

This generates the following HTML:

 <li> <label for="submit" class="optional">My Button</label> <button name="submit" id="submit" type="submit">My Button</button> </li> 

I would like to wrap the inside of the button with a <span>, like this:

 <button...><span>My Button</span></button> 

What is the best way to do this with Zend_Form?

Answer 1

I tried and, ultimately, could not achieve this myself, using the same approach. It would seem the easiest way to do this:

 ... $submit->setLabel('<span>My Button</span>'); ... 

However, the span will be shielded. You can completely disable the screening of the labyrinth decorator, however, adding a label decorator makes the output incorrect, for example:

 $decorator = array( array('ViewHelper'), array('HtmlTag', array('tag' => 'li')), array('Label', array('escape' => false)) ); $submit = new Zend_Form_Element_Button('submit'); $submit->setLabel('<span>My Button</span>'); $submit->setDecorators($decorator); $submit->setAttrib('type', 'submit'); 

... displays:

 <label for="submit" class="optional"><span>My Button</span></label> <li> <button name="submit" id="submit" type="submit">&lt;span&gt;My Button&lt;/span&gt</button> </li> 

... which, in addition to semantically incorrect (easily fixed), still avoids span tags inside the element.

So what are you doing?

Well, I think the best approach (and this is my metaconsultation when it comes to tight control over Zend_Form rendering) is to use a ViewScript decorator.

 $submit = new Zend_Form_Element_Button('submit'); $submit->setLabel('My Button'); $submit->setDecorators(array(array('ViewScript', array('viewScript' => '_submitButton.phtml')))); $submit->setAttrib('type', 'submit'); 

... then in _submitButton.phtml define the following:

 <li> <?= $this->formLabel($this->element->getName(), $this->element->getLabel()); ?> <button <?php $attribs = $this->element->getAttribs(); echo ' name="' . $this->escape($this->element->getName()) . '"' . ' id="' . $this->escape($this->element->getId()) . '"' . ' type="' . $this->escape($attribs['type']) . '"'; ?> <?php $value = $this->element->getValue(); if(!empty($value)) { echo ' value="' . $this->escape($this->element->getValue()) . '"'; } ?> > <span> <?= $this->escape($this->element->getLabel()); ?> </span> </button> </li> 

The _submitButton.phtml file should be in the script directory (it’s best to add it for your form decorators using $view->addScriptPath('/path/to/my/form/decorators') ).

This should do what you are looking for. I was just starting to look at the ViewScript decorator because of the flexibility issues that I experience at work. You will notice that my script is not flexible and, of course, not in BNF, considering all the members that can be populated with an element object. However, this is the beginning, and it solves your problem.

Answer 2

You can do it:

 $this->addElement(new Zend_Form_Element_Button( 'send', array( 'label' => '<span>registrieren</span>', 'class' => 'button-red', 'type' => 'submit', 'escape' => false, 'required' => false, 'ignore' => false, ) )); 

Answer 3

Simple shortcut escaping works great. It only breaks when someone starts messing with the label decorator (this usually happens when customizing tags).

You can use the Zend_Form function setElementDecorators () and exclude some styling elements. Read Example # 3 Installing Decorators for Some Items in the Zend_Form Guide (including a Note!) For more details.

For those who are still confused, here is a sample code for styling a table form and a button enclosed in a double range:

 //(...)putting some other elements in the form first //now add submit button $form ->addElement('button', 'submit', array( 'label' => '<span><span>SUBMIT</span></span>', 'value' => 'submit' )); $form //set decorators for non-button elements ->setElementDecorators(array( 'ViewHelper', 'Errors', array(array('data' => 'HtmlTag'), array('tag' => 'td', 'class' => 'element')), array('Label', array('tag' => 'td')), array(array('row' => 'HtmlTag'), array('tag' => 'tr'))), array('submit'), false) //and then for button elements only ->setElementDecorators(array( 'ViewHelper', 'Errors', array(array('data' => 'HtmlTag'), array('tag' => 'td', 'class' => 'element')), array(array('row' => 'HtmlTag'), array('tag' => 'tr'))), array('submit'), true) //and finally for the form ->setDecorators(array( 'FormElements', array('HtmlTag', array('tag' => 'table')), 'Form' )); 

where $ form is the Zend_Form element. Hope this helps!

Answer 4

I would add a class to the button, and then define this class in your CSS to make it act like a span. I'm sure you want to do more than just stick with it in between.

Just add another call to setAttrib ():

 $submit->setAttrib('class', 'submitButton'); 

Then in your CSS:

 .submitButton { display:inline; font-weight:bold; /* Or whatever you're wanting to do */ } 

I added the display: inline, as this will make the button act like a span. It should start at a minimum. Of course, you could base your CSS on the button id, just use display: inline to get the range behavior.

Answer 5

Try

 $element->addDecorator('Label', array('tag' => 'span', 'class' => 'aClass'))