Zend Framework 2 - The New HTML5 Form Fields - Part 2
In today’s post, we look at more HTML5 Form fields in Zend Framework 2: Month, Range, Color, Week and Number, as well as element properties and attributes. Come look around more of the great new elements available.
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:
- Week and
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).
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:
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).
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.
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.
Here in the view script, we use the formMonth view helper to render the element. Nice and simple.
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.
Then, via the formWeek view helper, the element is rendered.
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.
As before, the formRange view helper makes it really easy to render the element in the view script.
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.
Then we’ve rendered it with the formColor view helper.
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.
Then, we’ve used the formNumber view helper to render the element.
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
- Want to know more about HTML5 patterns
- HTML5 forms input types
You might also be interested in...
- Simplify Form Validation and Reuse, Use Validation Groups
- Zend Framework 2 - The New HTML5 Form Fields
- Zend Form Mastery with Zend Config – Part 3 Standard Form & Element Options
- Zend Form Mastery with Zend Config - Part 2 Core Form Configuration
- Basic CSV Output in Zend Framework 2
comments powered by Disqus