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

Zend Form Mastery with Zend Config

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:

Zend Form configured with Zend_Config_XML

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.

Intermediate PHP Tutorial Zend Config Zend Form