html5 form elements tutorial
DESCRIPTION
Learn how to create form elements in HTML5, what browsers they work in, and how they work with ProdigyView.TRANSCRIPT
![Page 2: Html5 Form Elements Tutorial](https://reader033.vdocuments.net/reader033/viewer/2022061206/54828796b4af9f8c0d8b482b/html5/thumbnails/2.jpg)
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
![Page 3: Html5 Form Elements Tutorial](https://reader033.vdocuments.net/reader033/viewer/2022061206/54828796b4af9f8c0d8b482b/html5/thumbnails/3.jpg)
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
![Page 4: Html5 Form Elements Tutorial](https://reader033.vdocuments.net/reader033/viewer/2022061206/54828796b4af9f8c0d8b482b/html5/thumbnails/4.jpg)
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
![Page 5: Html5 Form Elements Tutorial](https://reader033.vdocuments.net/reader033/viewer/2022061206/54828796b4af9f8c0d8b482b/html5/thumbnails/5.jpg)
Tags:
<input type=“email” />
Purpose:
Ensures that input is a valid email address.
www.prodigyview.com
![Page 6: Html5 Form Elements Tutorial](https://reader033.vdocuments.net/reader033/viewer/2022061206/54828796b4af9f8c0d8b482b/html5/thumbnails/6.jpg)
Url
Tags:
<input type=“url” />
Purpose:
Ensures that the value entered in a valid url.
www.prodigyview.com
![Page 7: Html5 Form Elements Tutorial](https://reader033.vdocuments.net/reader033/viewer/2022061206/54828796b4af9f8c0d8b482b/html5/thumbnails/7.jpg)
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
![Page 8: Html5 Form Elements Tutorial](https://reader033.vdocuments.net/reader033/viewer/2022061206/54828796b4af9f8c0d8b482b/html5/thumbnails/8.jpg)
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
![Page 9: Html5 Form Elements Tutorial](https://reader033.vdocuments.net/reader033/viewer/2022061206/54828796b4af9f8c0d8b482b/html5/thumbnails/9.jpg)
Color
Tag:
<input type=“color” />
Purpose:
Pick a color from a color picker.
www.prodigyview.com
![Page 10: Html5 Form Elements Tutorial](https://reader033.vdocuments.net/reader033/viewer/2022061206/54828796b4af9f8c0d8b482b/html5/thumbnails/10.jpg)
Search
Tag:
<input type=“search” />
Purpose:
Creates a search input area that is used for searching a site.
![Page 11: Html5 Form Elements Tutorial](https://reader033.vdocuments.net/reader033/viewer/2022061206/54828796b4af9f8c0d8b482b/html5/thumbnails/11.jpg)
Date
Tag:
<input type=“data” />
Purpose:
Defines at date field that a date must be entered into.
![Page 12: Html5 Form Elements Tutorial](https://reader033.vdocuments.net/reader033/viewer/2022061206/54828796b4af9f8c0d8b482b/html5/thumbnails/12.jpg)
Time
Tag:
<input type=“time” />
Purpose:
Defines a time field that a time element must be entered into.
![Page 13: Html5 Form Elements Tutorial](https://reader033.vdocuments.net/reader033/viewer/2022061206/54828796b4af9f8c0d8b482b/html5/thumbnails/13.jpg)
Reset
Tag:
<input type=“reset” />
Purpose:
Clears all the fields in a form.
www.prodigyview.com
![Page 14: Html5 Form Elements Tutorial](https://reader033.vdocuments.net/reader033/viewer/2022061206/54828796b4af9f8c0d8b482b/html5/thumbnails/14.jpg)
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
![Page 15: Html5 Form Elements Tutorial](https://reader033.vdocuments.net/reader033/viewer/2022061206/54828796b4af9f8c0d8b482b/html5/thumbnails/15.jpg)
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