Zend_Form with CSS - zend-framework

i am new to zend i have coded up to some extent but dont know further how to decorate my form using decorators etc
this is my old HTML
<div class="col_6 pre_3 padding_top_60" style="padding-top:0">
<div class="widget clearfix">
<div class="widget_inside">
<p class="margin_bottom_15">Kindly enter Username and Password.</p>
<span><?= $this->error;?></span>
<form method='post' action='<?php echo $this->url(array(), 'login') ?>' onsubmit="return validateForm();">
<div class="form">
<div class="clearfix" id="div_username">
<label class="lable-2">Username</label>
<div class="input">
<input type="text" class="xlarge" name="username" id="username" value="<?php echo $this->form['username'] ?>"/>
<span id="error_message_username"></span>
</div>
</div>
<div class="clearfix" id="div_password">
<label class="lable-2">Password</label>
<div class="input">
<input type="password" class="xlarge" name="password" id="password" value="<?php echo $this->form['password'] ?>"/>
<span id="error_message_Password"></span>
</div>
</div>
<div class="clearfix">
<label></label>
<div class="input">
<input type="checkbox" name="remember" value="1" <?php echo ($this->form['remember'] == 1)?'checked="checked"':'' ?>/></span> Stay signed in
<span style="margin-left:10px">Forgot User ID or Password </span>
</div>
</div>
<div class="clearfix">
<label></label>
<div class="input">
<input type="submit" value="Login" class="medium button blue blue-1"/>
</div> </div>
</div>
</form>
</div>
</div>
This is my Form
<?php
class Application_Form_Loginform extends Zend_Form{
public function init()
{
/* Form Elements & Other Definitions Here ... */
$this->setMethod('post');
$this->addElement('text','username',array(
'label' => 'UserName :',
'required' => true,
'filters' => array('StringTrim')
));
$this->addElement('password','password',array(
'label' => 'Password',
'required' => 'true',
'filters' => array('StringTrim')
));
$this->addElement('submit','submit',array(
'ignore'=>'true',
'label'=>'Login'
));
}
}
Question is How can i make my form made with php equal to the above HTML ??

Zend Form is a pain to use, especially decorators.
You should use the View Script decorator instead.
See here: http://framework.zend.com/manual/en/zend.form.standardDecorators.html#zend.form.standardDecorators.viewScript
Aside from Zend Form decorators having a high learning curve, it mixes view code with logic and validation code.
This is not a good thing, especially if you have frontend developers styling and working with the forms.
It also makes prototyping the look of the forms difficult since you have to keep adjusting the decorator code.
With that said, Zend Form does a good job of making validation relatively painless. But one other gripe with it is that I don't think it fits well model validation.

I agree that decorators are complex, but they save a GREAT DEAL of time, when you know how to use them. We use them for our admin panel. We recently changed it from table layout to few fieldsets and divs and it took only few hours to change 70+ forms.
Your validators should be something like:
Form:
form,
htmlTag (div, class=form)
formElements
Elements:
viewHelper
error, placement => append
htmlTag (div, class input)
Label, placement => prepend
htmlTag (div, class=clearfix)
just keep in mind you need to set different keys for each htmlTag decorator, or else they would be overwritten. Like this:
....
array('inputHtmlTag' => 'htmlTag, array('tag' => 'div', 'class' => 'input'),
....
To see how I deal with complex Twitter Bootstrap decorators see https://github.com/tomasfejfar/Zend-Form-Bootstrap/blob/master/library/Bootstrap/Form.php There you can find clues how to implement your own markup.

Related

how to add data-mask in zend form

How to convert below html text field into zend form,
<div class="control-group">
<label class="control-label">IP</label>
<div class="controls">
<input placeholder="" data-mask="999.999.999.999" class="text login_input" type="text">
<span class="help-inline">192.168.110.310</span>
</div>
I use zend 1.2 ,my challenge is data-mask="999.999.999.999"how to add a zend form,
I give below code, but not working,
$ipRange = new Zend_Form_Element_Text('ipRange');
$ipRange->class = "text login_input";
$ipRange->data-mask = "999.999.999.999";
$ipRange->addValidator('Ip', array('allowipv6' => false));
$ipRange->setDecorators(array('ViewHelper','Description'));
$ipRange->setAttrib('required', 'required');
$ipRange->setRequired(true);
$this->addElement($ipRange);
Try this:
$ipRange->setAttrib('data-mask', '999.999.999.999');

Zend Form Rendering and Decorators (Use correctly with bootstrap)

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?
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

can we apply class to checkbox input instedad of container div in cakephp

Here the code for checkbox generation
//code
echo $this->Form->select('Model.field', $options, array(
'multiple' => 'checkbox','div'=>'col-md-9',
'class' => 'required'
));
//output
<div class="required" aria-required="true">
<input type="checkbox" id="FormData6783" value="83" name="data[Model][field][]">
<label for="FormData6783">Sr. Secondary</label>
</div>
<div class="required" aria-required="true">
<input type="checkbox" id="FormData6783" value="83" name="data[Model][field][]">
<label for="FormData6783">Secondary</label>
</div>
it applies class to container div instead of input.. Is there any way to apply class to input ?
You will have to extend the FormHelper with your own helper and then overload the select method to change the code that generates the select. Check the BoostCake plugin to get an idea of one way o changing FormHelpers output.
You can then alias the helper to replace it app wide:
public $helpers = ['Form' => ['className' => 'MyForm']];

How to add name as show[xyz], show[abc], etc for multiple checkboxes in zend form

Hii... I want multiple checkboxes to be displayed as and so on...name="show[adgroups]", how can i do this using zend form code?? Please see below example how I wanted my output to be viewed:
Instructions
<div class="fieldgrp">
<label for="show_adgroups">Campaign/Ad-groups</label>
<div class="field"><input type="checkbox" name="show[adgroups]" id="show_adgroups" class="" value="adgroups" checked="checked" /></div>
</div>
<div class="fieldgrp">
<label for="show_keywords">Keywords</label>
<div class="field"><input type="checkbox" name="show[keywords]" id="show_keywords" class="" value="keywords" checked="checked" /></div>
</div>
Ignoring the "why", you can achieve what you want using a subform.
Simply name the subform "show" and add your "adgroups" and "keywords" checkboxes to it.
$form = new Zend_Form;
$show = new Zend_Form_SubForm();
$show->addElement('checkbox', 'adgroups', array(
'label' => 'Campaign/Ad-groups',
'checked' => true
));
$show->addElement('checkbox', 'keywords', array(
'label' => 'Keywords',
'checked' => true
));
$form->addSubForm($show, 'show');

How to change the layout of a form with Zend_Form decorators?

I'm totally confused about how decorators work. This is the html structure that I'm trying to achieve:
<form id="" action="" method="post">
<fieldset><legend>Contact form</legend>
<p>
<label for="name">Name</label>
<input type="text" name="name" id="name" size="30" />
</p>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" size="30" />
</p>
<p>
<label for="web">Website</label>
<input type="text" name="web" id="web" size="30" />
</p>
<p>
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
</p>
<p class="submit"><button type="submit">Send</button></p>
</fieldset>
</form>
How do I get rid of the definition list format and use a paragraph tag based layout instead?
Update: Is there a way for me to apply this style to all the forms I have created? instead of having to apply the decorators to each and every form?
If you want to change the elements of your form you have to reset the Decorators of your Form and it's elements.
Example of enclosing a field in a p-tag
class Default_Form_Contact extends Zend_Form
{
public function init()
{
$name = new Zend_Form_Element_Text('name');
$name->setLabel('Name:')
->setDecorators(
array(
array('ViewHelper', array('helper' => 'formText')),
'Errors',
array('Description', array('tag' => 'p', 'class' => 'description')),
array('HtmlTag', array('tag' => 'p', 'id' => 'name-element')),
array('Label', array('class' => 'label')),
)
);
$this->addElement($name);
}
}
Which decorators you really need you have to consider yourself. For the form decorators you can do in the init()
$this->setDecorators(array(some decorators));
After a while, I just gave up and used just the ViewRenderer decorator. Here is a good post explaining how to do that (http://weierophinney.net/matthew/archives/215-Rendering-Zend_Form-decorators-individually.html). The rest of that series is good as well if you really want to know how to use decorators.
With the ViewRenderer decorator, you're basically rendering your form against a template (not unlike MVC itself). This way gives you the ultimate control over everything, but of course what you gain in flexibility, you lose in RAD, and you make up in complexity.