Html5 Form Elements Tutorial
Upcoming SlideShare
Loading in...5

Html5 Form Elements Tutorial



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

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



Total Views
Views on SlideShare
Embed Views



2 Embeds 62 40
http://localhost 22


Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Html5 Form Elements Tutorial Html5 Form Elements Tutorial Presentation Transcript

  • HTML5 Form Elements
  • 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
  • Follow Along With A Code Example1. Download a copy of the example code at Install the system in an environment you feel comfortable testing in.3. Proceed to examples/template/Form_Html5.php
  • 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
  • EmailTags:<input type=“email” />Purpose:Ensures that input is a valid email address.
  • UrlTags:<input type=“url” />Purpose:Ensures that the value entered in a valid url.
  • NumberTag:<input type=“number” />Purpose:Ensures that the value entered is a numeric value. Set parameter to increment or decrement a number by 2
  • RangeTag:<input type=“range” />Purpose:Check that the numbers entered is between a certainrange. Set the min and max numbers allowed in the field
  • ColorTag:<input type=“color” />Purpose:Pick a color from a color picker.
  • SearchTag:<input type=“search” />Purpose:Creates a search input area that is used for searching asite.
  • DateTag:<input type=“data” />Purpose:Defines at date field that a date must be entered into.
  • TimeTag:<input type=“time” />Purpose:Defines a time field that a time element must be enteredinto.
  • ResetTag:<input type=“reset” />Purpose:Clears all the fields in a form.
  • Telephone Will be available in future versions of ProdigyViewTag:<input type=“tel” />Purpose:Create a field for entering a telephone number.
  • API ReferenceFor a better understanding of the HTML elements, checkout the api at the two links below.PVForms More TutorialsFor more tutorials, please visit: