How to add attributes to a label generated with Zend/Form in Zend framework 2

Question

I'm adding forms to my page using Zend/Form.

I'm adding elements by defining them as follows:

    $this->add(array(
            'name' => 'value',
            'attributes' => array(
                    'type'  => 'text',
                    'id' => 'value',
                    'autocomplete' => 'off',
                    'placeholder' => 'Cost',
            ),
            'options' => array(
                    'label' => 'Cost',
            ),
    ));

As you can see there is a 'label' => 'cost' node, this generated a label to go with the input element.

How do I add classes, attributes to this label ?

Trencherman

Answer 1

Please try this, i haven't tested or used this, but going by the source it should function properly:

$this->add(array(
    'name'       => 'value',
    'attributes' => array(),
    'options'    => array(
        'label_attributes' => array(
            'class'  => 'mycss classes'
        ),
        // more options
    ),        
));

If this does not function, please leave me a comment. If it won't function, it is not possible using this approach, since the FormLabel restricts the validAttributes quite a bit:

protected $validTagAttributes = array(
    'for'  => true,
    'form' => true,
);

Preconceive

Hello Sam, I've changed the element as follows: $this->add(array( 'name' => 'value', 'attributes' => array( 'type' => 'text', 'id' => 'value', 'autocomplete' => 'off', 'placeholder' => 'Cost', ), 'options' => array( 'label' => 'Cost', ), 'label_attributes' => array( 'class' => 'css', ) )); Still no luck though. However, it's being rendered as: <label for="value">Cost</label> Any idea about the "for" ? – Trencherman

I will have to check this out later, can't promise anything though the framework points out that this will work: $element->setLabelAttributes(array('class' => 'control-label')); Maybe try adding label_attributes as a sub- of options - see the editted version – Preconceive

Under options ! =) So leave the edited version for the world to see! ;-) – Trencherman

Do this in the view, always. Your view must not leak into your classes. – Cesaria

@mike While genereally I agree, Forms - in general - are an extreme edge case of web-development. Forms SUCK. You CAN NOT DO FORMS RIGHT. Forms will always be a mess. Assigning the CSS-Class per default in the Form-Object that is supposed to be automatically rendered is prefectly fine. – Preconceive

I disagree. Can you provide some arguments why they suck? My forms are unit testable and provide my system with perfect, fully validated input from the user. – Cesaria

@mike Forms suck because - by very nature - they are a component that are both Model and View layer. They are intertwined, they can not be disconnected. Of course you can have a great Form Component, but that doesn't mean that they still don't suck ;) – Preconceive

Well its people who bind objects into forms and mix models with the view then. Component itself is handy when used the right way. – Cesaria

@mike indeed. When talking about a component like Zend\Form that is most often what you want to do. I'd argue that more experienced programmers don't bother with Forms anymore. They write InputFilters and Mapper / Hydrators but leave the form completely to the frontend guys - which in my experience as well is the best thing to do. – Preconceive

Answer 2

This works well in Zend Framework 2.3 :

$this->add(array(
  'name' => 'userName',
  'attributes' => array(
      'type'  => 'text',
      'class' => 'form-control',
      'placeholder' =>'Username',
  ),
  'options' => array(
      'label' => 'Username',
      'label_attributes' => array('class' => 'control-label')
  ),

));

Spalding

Answer 3

$element->setOptions(array('label_class' => array('class' => 'control-label')));

Produces code like this:

<label class="control-label">
  <input type="radio" name="option1" id="option1" value="1">
  Option 1
</label>
<label class="control-label">
  <input type="radio" name="option2" id="option2" value="2">
  Option 2
</label>

I have tried this. It works in Zend Framework One.

Note if you use

$element->setOptions(array('label_attributes' => array('class' => 'control-label')));

you get the undesirable effect for some reason of

<label attributes="control-label">
  <input type="radio" name="option1" id="option1" value="1">
  Option 1
</label>

Vicious

I have tried this. It works in Zend Framework One. That's great, but this is a ZF2 question, it doesn't work there. – Dominoes

Answer 4

For programmatic approach on ZF2+ try this:

$element->setOptions(array(
    'label_attributes' => array(
        'style' => 'color:gray;'
    )
));

Inspired by Damon's answer.

Imprint