Prettier Accessible Forms with Zend Form and Zend Config
When I first started working with Zend Framework and showed a designer the output from Zend Form we had a few days of conversations back and forth and researched on whether or not the dl/dt setup was going to be sufficient for what we wanted and also “correct usage”.
While working through our first project we ran into issues with this structure of forms. I didn’t run into any problems but in order to stop the complaints from the designers in our office I decided to work on getting Zend Form to generate forms in the style laid out at A List Apart.
I didn’t figure this would really be all that difficult because most of the documentation for Zend Framework fairly good. Little did I know that the documentation and examples for Zend Form with Zend Config were fairly hard to find. When I did find documentation the decorators stilled confused me for a while. Then everything just seemed to click one day and I was successful in getting exactly what I wanted. Now I don’t have designers complaining anymore because they have forms structured exactly the way they want(Sorry Rob
). In order to get the results I wanted I ended up with a form defined in my ini file like the following:
[signInForm] form.id = "signInForm" form.method = "post" form.action = "/sign-in/" ; Form Decorators form.disableLoadDefaultDecorators = true form.decorators.formElements.decorator = "FormElements" form.decorators.description.decorator = "Description" form.decorators.form.decorator = "Form" ; Global Element Decorators form.elementDecorators.decorator = "ViewHelper" form.elementDecorators.error.decorator = "Errors" form.elementDecorators.description.decorator = "Description" form.elementDecorators.label.decorator = "Label" form.elementDecorators.formElements.decorator = "HtmlTag" form.elementDecorators.formElements.options.tag = "li" ; Group Decorators form.displayGroupDecorators.decorator = "FormElements" form.displayGroupDecorators.formElements.decorator = "HtmlTag" form.displayGroupDecorators.formElements.options.tag = "ol" form.displayGroupDecorators.fieldset.decorator = "FieldSet" ; Form Groups form.displayGroups.signinGroup.elements.username = "username" form.displayGroups.signinGroup.elements.password = "password" form.displayGroups.signinGroup.elements.rememberMe = "rememberMe" form.displayGroups.submitGroup.elements.submit = "submit" ; username element form.elements.username.type = "text" form.elements.username.options.validators.notempty.validator = "NotEmpty" form.elements.username.options.validators.notempty.breakChainOnFailure = true form.elements.username.options.validators.strlen.validator = "StringLength" form.elements.username.options.validators.strlen.options.min = 6 form.elements.username.options.validators.strlen.options.max = 20 form.elements.username.options.required = true form.elements.username.options.label = "Username:" ; password element form.elements.password.type ="password" form.elements.password.options.validators.notempty.validator = "NotEmpty" form.elements.password.options.validators.notempty.breakChainOnFailure = true form.elements.password.options.validators.strlen.validator = "StringLength" form.elements.password.options.validators.strlen.options.min = "6" form.elements.password.options.required = true form.elements.password.options.label = "Password:" ; remember me element form.elements.rememberMe.type = "checkbox" form.elements.rememberMe.options.label = "Remember Me?" ; login button element form.elements.submit.type = "button" form.elements.submit.options.name = "SignIn" form.elements.submit.options.value = "Sign In" form.elements.submit.options.label = "Sign In"
I hope this helps someone else as I could not find a good solid example of how to get this working. If anyone has any feedback on a better way of handling this let me know in the comments.
Thanks,
Chris

robalan
July 18th, 2008 at 8:01 am
Score!
Antonio
July 25th, 2008 at 2:31 am
Hi, i’m from Italy and i appreciate your article! Good