开发者

Add text/html behind a form element?

How can I add a text behind a fo开发者_C百科rm element in Zend Framework? Let's say I have a text input field, first there is a label, bellow the label there is an actual input field but I want to add some additional text (2-3 sentences) behind the input field. Something like a short tip or suggestion what is the best value for that field.


You can simply add a description to the input element, e.g.

$element = new Zend_Form_Element_Text('itemName', array(
      'label' => 'My Label',
      'description' => 'Enter some text'
));

From the ZF Manual Chapter 23.7.3. Zend_Form_Decorator_Description:

By default, if no description is present, no output is generated. If the description is present, then it is wrapped in an HTML p tag by default, though you may specify a tag by passing a tag option when creating the decorator, or calling setTag(). You may additionally specify a class for the tag using the class option or by calling setClass(); by default, the class 'hint' is used.

So to modify the decorator you would write something like

$element->setDecorators(
    array(
        'ViewHelper',
        'Errors',
        array('Description', array('placement' => 'append', 
                                   'escape' => false, 
                                   'tag' => 'span')),
        array('HtmlTag', array('tag' => 'dd')),
        array('Label', array('tag' => 'dt', 'escape' => false))
 )); 

You also might want to check this series of tutorials about Zend Form Decorators.


You can use the description option as an element option to add a <p> tag with your description, after the element (with default decorators.)

You strategy then simply requires some CSS to position the description in the right place. Something like

dd.myelement{
position: relative;
}

dd.myelement p {
position: absolute;
top:0;
right: 0;
}

You'll probably need z-index properties on the input and p too:

dd.myelement p {
z-index: 1;
}

dd.myelement input {
z-index: 2;
}

There might be a CSS property missing (I've written that from memory) but I hope you get the idea :)


Richard,

you need a decorator! :) They are sometimes a little complicated, but I've been using the following tutorial, which is probably a little outdated, but not less helpful. Especially check the use of legend. I think that's perfect for what you want to do.

Hope this helps!

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜