Html5 Form Elements Tutorial

1,707 views

Published on

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

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,707
On SlideShare
0
From Embeds
0
Number of Embeds
63
Actions
Shares
0
Downloads
35
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5 Form Elements Tutorial

  1. 1. HTML5 Form Elements www.prodigyview.com
  2. 2. OverviewObjectiveLearn about HTML5 form elements, the browsers they aresupported in, and how to use them in ProdigyView..Requirements Basic understanding of form elementsEstimated Time10 minutes www.prodigyview.com
  3. 3. Follow Along With A Code Example1. 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. 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. 5. EmailTags:<input type=“email” />Purpose:Ensures that input is a valid email address. www.prodigyview.com
  6. 6. UrlTags:<input type=“url” />Purpose:Ensures that the value entered in a valid url. www.prodigyview.com
  7. 7. NumberTag:<input type=“number” />Purpose:Ensures that the value entered is a numeric value. Set parameter to increment or decrement a number by 2
  8. 8. RangeTag:<input type=“range” />Purpose:Check that the numbers entered is between a certainrange. Set the min and max numbers allowed in the field
  9. 9. ColorTag:<input type=“color” />Purpose:Pick a color from a color picker. www.prodigyview.com
  10. 10. SearchTag:<input type=“search” />Purpose:Creates a search input area that is used for searching asite.
  11. 11. DateTag:<input type=“data” />Purpose:Defines at date field that a date must be entered into.
  12. 12. TimeTag:<input type=“time” />Purpose:Defines a time field that a time element must be enteredinto.
  13. 13. ResetTag:<input type=“reset” />Purpose:Clears all the fields in a form. www.prodigyview.com
  14. 14. Telephone Will be available in future versions of ProdigyViewTag:<input type=“tel” />Purpose:Create a field for entering a telephone number. www.prodigyview.com
  15. 15. API ReferenceFor a better understanding of the HTML elements, checkout the api at the two links below.PVForms More TutorialsFor more tutorials, please visit:http://www.prodigyview.com/tutorials www.prodigyview.com

×