HTML5 input elements [HTML5 Support]

Zend Framework 2.0 now supports all of the newly specified HTML5 input types; these inputs are available under Zend\Form\Element like any other input types. The following table describes each of these elements along with their class names:

datetime         ‹    Element: Zend\Form\Element\DateTime

◆      Used to render the Date/Time Element input field with the time zone set to UTC

◆      HTML tag: <input type="datetime" name="element- date-time">

◆      The datetime element rendered in Opera 12.0 is shown in the following screenshot:

datetime-local   ‹    Element: Zend\Form\Element\DateTimeLocal

◆      Used to render the Date/Time Local Element input field for the client browser's time zone

◆      HTML tag: <input type="datetime-local" name="element-date-time-local">

◆      The datetime-local element rendered in Opera 12.0 is shown in the following screenshot:

Input type                     Description

time             ‹    Element: Zend\Form\Element\Time

◆      Used to render the Time Element field

◆      HTML tag: <input type="time" name="element-time">

◆      The time element rendered in Opera 12.0 is shown in the following screenshot:

date             ‹    Element: Zend\Form\Element\Date

◆      Used to render the Date Element field

◆      HTML tag: <input type="date" name="element-date">

◆      The date element rendered in Opera 12.0 is shown in the following screenshot:

week             ‹    Element: Zend\Form\Element\Week

◆      Used to render the Week Element field

◆      HTML tag: <input type="week" name="element-week">

◆      The week element rendered in Opera 12.0 is shown in the following screenshot:

month            ‹    Element: Zend\Form\Element\Month

◆      Used to render the Month Element field

◆      HTML tag: <input type="month" name="element- month">

◆      The month element rendered in Opera 12.0 is shown in the following screenshot:

email            ‹    Element: Zend\Form\Element\Email

◆      Used to render the Email input field

◆      HTML tag: <input type="email" name="element- email">

url              ‹    Element: Zend\Form\Element\Url

◆      Used to render the URL input field

◆      HTML tag: <input type="url" name="element-url"> number   ‹    Element: Zend\Form\Element\Number

◆      Used to render the Number Element input field

◆      HTML tag: <input type="number" name="element- number">

◆      The number element rendered in Opera 12.0 is shown in the following screenshot:

range            ‹    Element: Zend\Form\Element\Range

◆      Used to render the Range Element input field using slider control

◆      HTML tag: <input type="range" name="element- range">

◆      The range element rendered in Opera 12.0 is shown in the following screenshot:

color            ‹    Element: Zend\Form\Element\Color

◆      Used to render the Color Element input field with a color picker

◆      HTML tag: <input type="color" name="element- color">

◆      The color element rendered in Opera 12.0 is shown in the following screenshot:

In this example we will be creating a test HTML5 form for rendering various types of HTML5 input elements:

1.       Create a test action for rendering the form element formAction(); it can be created under the new controller Html5TestController                  - module/Users/ src/Users/Controller/Html5TestController.php.

2.       Add references to Zend\Form\Form and Zend\Form\Element:

use Zend\Form\Element; use Zend\Form\Form;

3.       Add various HTML5 form elements to the form:

$form  = new Form();

// Date/Time Element

$dateTime = new Element\DateTime('element-date-time');

$dateTime

->setLabel('Date/Time Element')

->setAttributes(array(

'min'  => '2000-01-01T00:00:00Z',

'max'  => '2020-01-01T00:00:00Z', 'step' => '1',

));

$form->add($dateTime);

// Date/Time Local Element

$dateTime = new Element\DateTimeLocal('element-date-time-local');

$dateTime

->setLabel('Date/Time Local Element')

->setAttributes(array(

'min'  => '2000-01-01T00:00:00Z',

'max'  => '2020-01-01T00:00:00Z', 'step' => '1',

));

$form->add($dateTime);

// Time Element

$time = new Element\Time('element-time');

$time->setLabel('Time Element');

$form->add($time);

// Date Element

$date = new Element\Date('element-date');

$date

->setLabel('Date Element')

->setAttributes(array( 'min'  => '2000-01-01', 'max'  => '2020-01-01', 'step' => '1',

));

$form->add($date);

// Week Element

$week = new Element\Week('element-week');

$week->setLabel('Week Element');

$form->add($week);

// Month Element

$month = new Element\Month('element-month');

$month->setLabel('Month Element');

$form->add($month);

// Email Element

$email = new Element\Email('element-email');

$email->setLabel('Email Element');

$form->add($email);

// URL Element

$url = new Element\Url('element-url');

$url->setLabel('URL Element');

$form->add($url);

// Number Element

$number = new Element\Number('element-number');

$number->setLabel('Number Element');

$form->add($number);

// Range Element

$range = new Element\Range('element-range');

$range->setLabel('Range Element');

$form->add($range);

// Color Element

$color = new Element\Color('element-color');

$color->setLabel('Color Element');

$form->add($color);

What just happened?

We have created a simple form purely using HTML5 elements that are supported by Zend Framework 2.0. The form in its current shape can be rendered by creating the necessary view. Our next task will be to build the view for this form with the use of HTML5 helpers and render all the form elements that were added to the form.