Learn how to create form elements in HTML5, what browsers they work in, and how they work with ProdigyView.

1. HTML5 Form Elements
www.prodigyview.com

2. 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

3. 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

4. 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

5. Email
Tags:
<input type=“email” />
Purpose:
Ensures that input is a valid email address.
www.prodigyview.com

6. Url
Tags:
<input type=“url” />
Purpose:
Ensures that the value entered in a valid url.
www.prodigyview.com

7. 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

8. 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

9. Color
Tag:
<input type=“color” />
Purpose:
Pick a color from a color picker.
www.prodigyview.com

10. Search
Tag:
<input type=“search” />
Purpose:
Creates a search input area that is used for searching a
site.

11. Date
Tag:
<input type=“data” />
Purpose:
Defines at date field that a date must be entered into.

12. Time
Tag:
<input type=“time” />
Purpose:
Defines a time field that a time element must be entered
into.

13. Reset
Tag:
<input type=“reset” />
Purpose:
Clears all the fields in a form.
www.prodigyview.com

14. 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

15. 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