1
votes

The Bootstrap Example Code

http://getbootstrap.com/css/#forms

Copying a simple email input element from getbootstrap.com suggests we format the HTML in the following way:

<div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input id="exampleInputEmail1" class="form-control" type="email" placeholder="Email">
</div>

Above we have a <label> tag that closes straight after it's text content, "Email address".

I would now like to create the same form group using Zend Framework.


module/MyApp/src/MyModule/Form/MyForm.php

namespace MyModule\Form;

use Zend\Form\Form;

class MyModuleForm extends Form {

 public function __construct($name = null)
 {

     $this->add(array(
         'name' => 'email_address',
         'type' => 'Email',             
         'options' => array(
             'label' => 'Email address',
         ),
         'attributes' => array(
            'class'  => 'form-control',
            'placeholder' => 'Email'

         )                
     ));

The Zend Framework generated code

<div class="form-group">
    <label>
        <span>Email address</span>
        <input class="form-control" type="email" placeholder="Email" id="exampleInputEmail1">
    </label>
</div>

In the above HTML you can see that Zend has not closed the <label> tag. Instead the <label> ecapsulates its children.

How do I change the way the Zend rendering works?

1

1 Answers

0
votes

I assume you are using ZF2 FormRow view helper to render your form element in your view script, e.g. $this->formRow($this->form->get('email_address'));

To render it differently you need to use the following view helpers

FormLabel

FormText

FormElementErrors

If for example you wanted to render as a definition list you would use something like

<dl class="zend_form">
    <dt><?php echo $this->formLabel($this->form->get('email_address')); ?></dt>
    <dd><?php echo $this->formText($this->form->get('email_address')); ?>
        <?php echo $this->formElementErrors($this->form->get('email_address')); ?></dd>
</dl>

I hope this points you in the right direction