html5 form elements tutorial

HTML5 Form Elements

www.prodigyview.com

OverviewObjective

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

Tag:

<input type=“tel” />

Purpose:

Create a field for entering a telephone number.

Will be available in future versions of ProdigyView

www.prodigyview.com

API ReferenceFor a better understanding of the HTML elements, check out the api at the two links below.

PVForms

www.prodigyview.com

More Tutorials

For more tutorials, please visit:

http://www.prodigyview.com/tutorials