HTML5 attributes [HTML5 Support]

You might have noticed in the beginning of the chapter that we were using new attributes such as min, max, and step. These are new attributes that are defined

in the HTML5 specification that allow developers to specify additional configuration on the input element. Some important attributes are discussed in the following list:

◆        max: Applicable to the Number, Range, and Date fields; allows specification of

maximum value in the input.

◆        min: Applicable to the Number, Range, and Date fields; allows specification of a

minimum value in the input.

◆        step: Applicable to the Number, Range, and Date fields; allows specification of an increment value in the input.

◆        list: Applicable to various textbox style inputs. Allows developers to map the field to a data list, thus allowing end users to pick them from the list.

◆        placeholder: Applicable to various textbox style inputs. Allows developers to show placeholder text until the element gains focus.

◆        pattern: Applicable to various textbox style inputs. Allows developers to validate the user input against a regular express-and-throw-a-validation error.

◆        required: Prevents users from submitting the form with empty values in the required fields.

◆        multiple: Applicable to file input; allows multiple file uploads from a single file control.

Multiple file uploads

For implementing multiple file uploads, you will need to set the multiple attribute on the file input element to TRUE. If the browser supports multiple file uploads, then the user will be allowed to select multiple files, otherwise the control will limit to just one file selection.

Perform the following steps for HTML5 multiple file uploads:

1.       Create a new ImageUpload form; make sure that the multiple attribute for the

File element is set to TRUE:

<?php

// filename : module/Users/src/Users/Form/MultiImageUploadForm.php namespace Users\Form;

use Zend\Form\Form;

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

class MultiImageUploadForm extends Form

{

public function   construct($name = null, $options = array())

{

parent:: construct($name, $options);

$this->addElements();

$this->addInputFilter();

}

public function addElements()

{

$imageupload = new Element\File('imageupload');

$imageupload->setLabel('Image Upload')

->setAttribute('id', 'imageupload')

->setAttribute('multiple', true);

//Enables multiple file uploads

$this->add($imageupload);

$submit = new Element\Submit('submit');

$submit->setValue('Upload Now');

$this->add($submit);

}

public function addInputFilter()

{

$inputFilter = new InputFilter\InputFilter();

// File Input

$fileInput = new InputFilter\FileInput('imageupload');

$fileInput->setRequired(true);

$fileInput->getFilterChain()->attachByName( 'filerenameupload',

array(

'target' => './data/images/temp.jpg', 'randomize' => true

)

);

$inputFilter->add($fileInput);

$this->setInputFilter($inputFilter);

}

}

2.       Set up an action to handle the file uploads, and to redirect the user to an upload confirmation page:

public function multiUploadAction()

{

// prepare form

$form = $this->getServiceLocator()->get('MultiImageUploadForm');

$request = $this->getRequest(); if ($request->isPost()) {

$post = array_merge_recursive(

$request->getPost()->toArray(),

$request->getFiles()->toArray()

);

$form->setData($post);

if ($form->isValid()) {

$data = $form->getData();

// Form is valid, save the form!

return $this->redirect()->toRoute('users/html5-test', array('action' => 'processMultiUpload'));

}

}

$viewModel  = new ViewModel(array('form' => $form)); return $viewModel;

}

3.       Now test the form in your browser that supports multiple file uploads with HTML5, for example, Opera 12. You will see that the file selector interface allows the selection of more than one file as shown in the following screenshot:

5.      You can verify if the files are uploaded successfully and the filters are applied by navigating through the data/images directory and looking up for the uploaded files. You can see that all files start with temp and have a _<random_number> suffix in their filenames:

What just happened?

We have now created an HTML5 multiple file upload form using HTML5 attributes and Zend form elements. We have also applied a filter to rename the uploaded files and have also seen how filters work in multiple file uploads.

Q1. Which of the following methods is a newly supported HTML5 input type?

1.       text

2.       radio

3.       checkbox

4.       number

Which of the following input types do not have a Form element defined in ZF 2.1?

1.       tel

2.       date

3.       color

4.       search

Summary

HTML5 is a very robust and powerful specification of HTML which is still partially supported by most browsers. As newer versions of browsers come out in the market, you will get to see much more enhanced support for this specification. In our next chapter, we will be using ZF2 to build mobile web applications.