Html5 Form Elements Tutorial
15
HTML5 Form Elements www.prodigyview.com
-
Upload
prodigyview -
Category
Technology
-
view
1.789 -
download
1
description
Learn how to create form elements in HTML5, what browsers they work in, and how they work with ProdigyView.
Transcript of Html5 Form Elements Tutorial
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
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
