Zend Form Mastery with Zend Config – Part 2 Core Form Configuration

By Matthew Setter | May 15, 2012 | Tags: forms, html, zend config xml, Zend Form

This is a Multi Part Series. Check out the other parts:

Ok, this should have been part one, but irrespective, here’s the second installment in zend form mastery with zend config – core form configuration. As the W3c Form spec says, there are 8 attributes applicable to forms. These are:

action – what the form will do when submitted
method – the method of submission, usually GET or POST
enctype – the language encoding of the content that is submitted
accept – a csv list of content types that the script processing the form will accept
name – the name of the form in the DOM hierarchy
onsubmit – what will be done on submit
onreset – what will be done on reset
accept-charset – character encodings accepted by the script processing this form on submission

There are also id, class, dir, style, title, target and a series of intrinsic events. So how do we use a Zend Config XML file to set all these properties? Well, it’s pretty straight-forward to do, hence why this part in the series should have come first, not second.

Let’s have a look at a slightly modified version of the XML snippet from the first part of the series below:

<?xml version="1.0" encoding="UTF-8"?>
  <forms>
    <action>process-me.php</action>
    <method>POST</method>
    <name>formSimpleProcessor</name>
    ...
  </forms>
</xml>

Here we have the outline of one form, called radios. It has three properties already set: action, method and name. When we pass our Zend_Config_Xml object, configured with that, we’re going to get a form that is configured as below

<form action="process-me.php" method="POST" name="formSimpleProcess">
  ...
</form>

That’s all well and good, but what about all the other elements? Gladly it’s pretty straight-forward. Below is the full XML configuration required to configure each form attribute that we need.

<?xml version="1.0" encoding="UTF-8"?>
  <forms>
    <simpleForm>
      <action>/forms/index/index/</action>
      <method>post</method>
      <id>simpleForm</id>
      <name>simpleForm</name>
      <class>simpleFormClass</class>
      <enctype>application/x-www-form-urlencoded</enctype>
      <accept-charset>UTF-8</accept-charset>
      <lang>en</lang>
      <accept>text/html</accept>
      <style>border: 1px solid #ccc;padding: 15px;</style>
      <title>Simple Form</title>
      <target>_blank</target>
      <onsubmit>javascript:alert('w00t');return true;</onsubmit>
      <elements>
        <name>
          <type>text</type>
          <options>
            <label>Name:</label>
            <size>30</size>
            <validators>
              <notempty>
                <validator>NotEmpty</validator>
                <options>
                  <messages>
                    <isEmpty>A name is required</isEmpty>
                  </messages>
                </options>
              </notempty>
            </validators>
          <required>true</required>
        </options>
      </name>
      <submit>
        <type>submit</type>
        <ignore>true</ignore>
        <options>
          <label>Process</label>
        </options>
      </submit>
    </elements>
  </simpleForm>
</forms>

Form Output

From this configuration, we’ll get a form that renders like the image below:

Form Configuration

The html of the form will be as below:

<form id="simpleForm"
  enctype="application/x-www-form-urlencoded"
  action="/forms/index/index/"
  method="post"
  class="simpleFormClass"
  accept-charset="UTF-8"
  lang="en"
  accept="text/html"
  style="border: 1px solid #ccc;padding: 15px;"
  title="Simple Form"
  target="_blank"
  onsubmit="javascript:alert('w00t');return true;">
<dl class="zend_form">
  <dt id="name-label">
    <label for="name" class="required">Name:</label>
  </dt>
  <dd id="name-element">
    <input type="text" name="name" id="name" value="" size="30"></dd>
  <dt id="submit-label">&nbsp;</dt>
  <dd id="submit-element">
    <input type="submit" name="submit" id="submit" value="Process">
  </dd>
</dl>
</form>

There you go. Now, with a pretty simple XML file, we have a fully configured form, that does everything we could need it to do. If we need to change the class, action, method or anything else in it, we don’t have to change any code, just the XML configuration and re-load (depending on your caching strategies of course).

Grab the Code

In a hurry? Grab a compressed copy of the code from Github.com. It’s a module that you can drop straight in to an existing Zend Framework project, ready to use.

Bio
Latest Posts

Matthew Setter

Matthew is a freelance technical writer and technical editor and regular contributor to a number of tech publications, including PHP Architect, PHPMaster, CloudSpring and New Relic. When he's not contributing there, he's writing content here on Malt Blue. What can he say, he's an avid technical writer and software developer. Get in touch if you want awesome, up to the minute, technical content for your blog, business or publication.