Zend Framework 2 - The New HTML5 Form Fields - Part 2

Introduction

Owing to the overwhelming popularity of the first post on the new HTML5 fields in Zend Framework 2 here on Malt Blue, it’s only right to have a follow up, covering the other available elements.

If you’ve not read the first part yet, check it out now. In it, we covered the DateTime, URL, Email and Telephone elements. We looked at how they are constructed in Zend Form objects and then displayed using the new form view helpers.

To really show just how effective using these new elements is, each code snippet had an accompanying screenshot of the element, rendered in iOS on iPhone.

This time we’re taking the same approach, looking at:

• Month
• Range
• Color
• Week and
• Number

Progressive Enhancement

The killer reason for using these fields is for an enhanced user experience. Yes, we could give them the same fields which we’ve been doing since, well HTML3. You know - text input, select, textarea and so on. And then add on rock-solid JavaScript/jQuery validation (along with server-side support as well).

But through using the new fields, browsers (especially mobile) adjust to make the process (usually) quicker, simpler and easier for the user to fill out the field (if required).

Attributes

But progressive enhancement doesn’t just cover the form elements, there’s also the attributes. A number are available, but let’s hone in on some of the more likely to be used ones:

Placeholder

The placeholder attribute, allows us to set a field prompt for the user, without any use of JavaScript. If set, the text displays in the field, until the user sets the focus to it. If no text is entered, when the field loses focus, the placeholder text returns.

Autofocus

This is a handy feature, if you don’t like writing JavaScript to have a field on a page, have focus automatically when the page is loaded.

Pattern

Here’s an attribute that I love, because I’m a massive regex fan. When the pattern attribute’s set and the form’s submitted, the browser will attempt to validate the content of the field against the regex.

Very handy for sophisticated text validation (and for augmenting the rather limited validation of some of the existing HTML5 fields, i.e., Email & URL).

Required

This one goes without saying, right? If the attribute’s set, then the Browser will not submit the form if the value is not set.

The Form Fields

In the screenshot below, you’ll see what a HTML form will look like (in Google Chrome v27) with the elements in today’s tutorial.

Month

Here we see that the month element allows us to move through a list of month’s, across a range of years. In the code below, we’ve created a month element, and set two handy attributes: min and max. With these, we are able to limit the available date range.

$this->add(array(
    'name' => 'month',
    'type' => 'Month',
    'options' => array(
        'label' => 'Month',
    ),
));

$this->get('month')->setAttributes(array(
    'min' => '2012-01',
    'max' => '2015-12'
));

Here in the view script, we use the formMonth view helper to render the element. Nice and simple.

<div>
    <?php
    $element = $form->get('month');
    echo $this->formLabel($element);
    ?>
    <div>
        <?php
        echo $this->formMonth($element);
        echo $this->formElementErrors($element);
        ?>
    </div>
</div>

Week

Similar to the Month element, the Week element renders a dialog that allows us to move forward and backward through time to find the week that we want. Here, I’ve set the min and max attributes, in the attempt to limit the range available, as with the Month element.

$this->add(array(
    'name' => 'week',
    'type' => 'Week',
    'options' => array(
        'label' => 'Week',
    ),
));

$this->get('week')->setAttributes(array(
    'min' => '2012-01',
    'max' => '2015-12'
));

Then, via the formWeek view helper, the element is rendered.

<div>
    <?php
    $element = $form->get('week');
    echo $this->formLabel($element);
    ?>
    <div>
        <?php
        echo $this->formWeek($element);
        echo $this->formElementErrors($element);
        ?>
    </div>
</div>

Range

The range element above allows us to specify a value, within a range, normally rendered by a UI slider.

In the code below, we construct a new Range element, specifying the minimum value 0, the maximum 10 and the step value 2. Doing so will allow us to only pick one of 0, 2, 4, 6, 8, and 10 as our range choice.

$this->add(array(
    'name' => 'range',
    'type' => 'Range',
    'options' => array(
        'label' => 'Range',
    ),
));

$this->get('range')->setAttributes(array(
    'min' => 0,
    'max' => 10,
    'step' => 2,
));

As before, the formRange view helper makes it really easy to render the element in the view script.

<div>
    <?php
    $element = $form->get('range');
    echo $this->formLabel($element);
    ?>
    <div>
        <?php
        echo $this->formRange($element);
        echo $this->formElementErrors($element);
        ?>
    </div>
</div>

Color

The color element allows us to pick a hex color value by rendering what is largely a standard operating system color picker dialog. In the code below, we construct a new Color picker element. You can see the Mac version above.

In the code below, we’ve initialised a colour element, with the basic set of option.

$this->add(array(
    'name' => 'color',
    'type' => 'Color',
    'options' => array(
        'label' => 'Color',
    ),
));

Then we’ve rendered it with the formColor view helper.

<div>
    <?php
    $element = $form->get('color');
    echo $this->formLabel($element);
    ?>
    <div>
        <?php
        echo $this->formColor($element);
        echo $this->formElementErrors($element);
        ?>
    </div>
</div>

Number

The number element allows us to scroll from a minimum to a maximum number, usually in the form of a text element with a spinner. Here we’ve constructed a new Number element, specifying the minimum value is 1, the maximum is 10 and the step value 2. This should allow us only to enter 0, 2, 4, 6, 8, 10.

The code

$this->add(array(
    'name' => 'number',
    'type' => 'Number',
    'options' => array(
        'label' => 'Number',
    ),
));

$this->get('number')->setAttributes(array(
    'min' => 0,
    'max' => 10,
    'step' => 2,
));

Then, we’ve used the formNumber view helper to render the element.

<div>
    <?php
        $element = $form->get('number');
    echo $this->formLabel($element);
    ?>
    <div>
        <?php
        echo $this->formNumber($element);
        echo $this->formElementErrors($element);
        ?>
    </div>
</div>

Conclusion

So there you have it. We’ve looked at the new HTML5 elements available in Zend Framework 2, seen how easy it is to create them, along with what they look like from the desktop to the latest mobile operating systems.

Get out there, make yours and your users lives easier, and tell me in the comments of your successes. Got a project that’s using them? Feel free to talk about it in the comments too.

Links / Further Reading

• http://www.html5rocks.com/en/tutorials/forms/html5forms/
• http://html5doctor.com/html5-forms-introduction-and-new-attributes/
• Want to know more about HTML5 patterns
• HTML5 forms input types