HTML5 Form Elements

www.prodigyview.com
 Overview
Objective

Learn about HTML5 form elements, the browsers they are

supported in, and how to use them in ProdigyView..

Requirements

 Basic understanding of form elements

Estimated Time

10 minutes

www.prodigyview.com
 Follow Along With A Code
Example
1. Download a copy of the example code at
www.prodigyview.com/source.
2. Install the system in an environment you feel comfortable testing in.
3. Proceed to examples/template/Form_Html5.php
 Browser Support
Not every element is supported in very browser. In this tutorial
you will notice the following images on slides.

If the element IS NOT supported in a browser, the

browser will have an X over it, like below.

Note: Any IE support is assumed to be IE9+

Support for elements in browsers will change, current support is of 1/2/2012

 Email

Tags:
<input type=“email” />
Purpose:
Ensures that input is a valid email address.

www.prodigyview.com
 Url

Tags:

<input type=“url” />

Purpose:

Ensures that the value entered in a valid url.

www.prodigyview.com
 Number

Tag:

<input type=“number” />

Purpose:

Ensures that the value entered is a numeric value.

Set parameter to increment or decrement a number by 2

 Range

Tag:

<input type=“range” />

Purpose:

Check that the numbers entered is between a certain

range.

Set the min and max numbers allowed in the field

 Color

Tag:

<input type=“color” />

Purpose:

Pick a color from a color picker.

www.prodigyview.com
 Search

Tag:

<input type=“search” />

Purpose:

Creates a search input area that is used for searching a

site.
 Date

Tag:

<input type=“data” />

Purpose:

Defines at date field that a date must be entered into.

 Time

Tag:

<input type=“time” />

Purpose:

Defines a time field that a time element must be entered

into.
 Reset

Tag:

<input type=“reset” />

Purpose:

Clears all the fields in a form.

www.prodigyview.com
 Telephone

Will be available in future

versions of ProdigyView
Tag:

<input type=“tel” />

Purpose:

Create a field for entering a telephone number.

www.prodigyview.com
 API Reference
For a better understanding of the HTML elements, check
out the api at the two links below.

PVForms

More Tutorials
For more tutorials, please visit:

http://www.prodigyview.com/tutorials

www.prodigyview.com