How to not escape html entities in a submit button value?

Question

In my form class I am adding a submit button:

$this->add([
    'name' => 'submit',
    'attributes' => [
        'type' => 'submit',
        'value' => 'Login ▹',
    ],
]);

The output is:

<input name="submit" type="submit" value="Login &amp;#9657;">

How do I stop the value from being escaped?

Edit

Based on @RubenButurca answer, here is the output:

Answer 1

It felt odd escaping the value of my submit input. When I tried values such as <i class="fa fa-caret-right"></i> it, well, didn't escape the quotes and I ended up with random attributes in my input element. As such, I've swapped from an input field to a button.

$this->add([
    'name' => 'submit',
    'type' => 'button',
    'attributes' => [
        'type' => 'submit',
        'required' => 'required',
        'value' => 'Login <i class="fa fa-caret-right"></i>',
    ],
    'options' => [
        'label_options' => [
            'disable_html_escape' => true,
        ],
    ],
]);

ZendButon requires a label, which I didn't want. So I extended the view helper to take the label value from the element value ($buttonContent). Because there is no label attribute there is no label echoed, but the escaped value is still shown in the button tags.

FormButton:

use Zend\Form\View\Helper\FormButton as ZendFormButton;
use Zend\Form\ElementInterface;

class FormButton extends ZendFormButton
{
    /**
     * Invoke helper as functor
     *
     * Proxies to {@link render()}.
     *
     * @param  ElementInterface|null $element
     * @param  null|string           $buttonContent
     * @return string|FormButton
     */
    public function __invoke(ElementInterface $element = null, $buttonContent = null)
    {
        if (!$element) {
            return $this;
        }

        // New code here
        if(is_null($buttonContent)) {
            $buttonContent = $element->getValue();
        }
        return $this->render($element, $buttonContent);
    }

}

Output:

<button type="submit" name="submit" value="Login <i class=&quot;fa fa-caret-right&quot;></i>">Login <i class="fa fa-caret-right"></i></button>

Answer 2

If I understand correctly, you want to display Login ▹

First of all, your result suggests that you have a function somewhere in the code that replaces the escape characters with their codes. Second, after you find that piece of code that replaces & with its code, you might have to write "Login ▹" in order to obtain "Login ▹" in your HTML code.

Check your code for a function that replaces special characters with their escape codes. It's difficult to figure out without knowing how your code ends-up in the browser, what code is calling it on its turn, etc.

However I am 100% sure you have a function that takes the value and substitutes the special characters with their escape codes - I found your code here: http://www.w3schools.com/charsets/ref_utf_geometric.asp

Answer 3

I have had to extend the FormSubmit view helper:

use Zend\Form\ElementInterface;
use Zend\Form\View\Helper\FormSubmit as ZendFormSubmit;

class FormSubmit extends ZendFormSubmit
{
    protected $_options;

    /**
     * Render a form <input> element from the provided $element
     *
     * @param  ElementInterface $element
     * @throws Exception\DomainException
     * @return string
     */
    public function render(ElementInterface $element)
    {
        $this->_options = $element->getOptions();
        return parent::render($element);
    }

    /**
     * Create a string of all attribute/value pairs
     *
     * Escapes all attribute values
     *
     * @param  array $attributes
     * @return string
     */
    public function createAttributesString(array $attributes)
    {
        $attributes = $this->prepareAttributes($attributes);
        $escape     = $this->getEscapeHtmlHelper();
        $escapeAttr = $this->getEscapeHtmlAttrHelper();
        $strings    = [];

        foreach ($attributes as $key => $value) {
            $key = strtolower($key);

            if (!$value && isset($this->booleanAttributes[$key])) {
                // Skip boolean attributes that expect empty string as false value
                if ('' === $this->booleanAttributes[$key]['off']) {
                    continue;
                }
            }

            //check if attribute is translatable
            if (isset($this->translatableAttributes[$key]) && !empty($value)) {
                if (($translator = $this->getTranslator()) !== null) {
                    $value = $translator->translate($value, $this->getTranslatorTextDomain());
                }
            }

            if(array_key_exists('disable_html_escape', $this->_options) &&
                    array_key_exists($key, $this->_options['disable_html_escape']) &&
                    $this->_options['disable_html_escape'][$key] === TRUE) {
                $strings[] = sprintf('%s="%s"', $escape($key), $value);
                continue;
            }

            //@TODO Escape event attributes like AbstractHtmlElement view helper does in htmlAttribs ??
            $strings[] = sprintf('%s="%s"', $escape($key), $escapeAttr($value));
        }

        return implode(' ', $strings);
    }
}

This code saves the element options in a protected variable so it can be accessed in the createAttributesString function. Inside this function, just before the @todo, I check if the escape html option exists, and if set to true then don't escape the attribute value.

Use is:

$this->add([
    'name' => 'submit',
    'attributes' => [
        'type' => 'submit',
        'value' => 'Login ▹',
    ],
    'options' => [
        'disable_html_escape' => [
            'value' => true,
            ],
        ],
]);

I am using an array so that I may select, specifically, which attribute to not escape - in this case value.

Rendered output is:

<input type="submit" name="submit" value="Login &#9656;">