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

Html5 Form Elements Tutorial

on

  • 1,696 views

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.

Statistics

Views

Total Views
1,696
Views on SlideShare
1,634
Embed Views
62

Actions

Likes
0
Downloads
24
Comments
0

2 Embeds 62

http://www.prodigyview.com 40
http://localhost 22

Accessibility

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.

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

Html5 Form Elements Tutorial Html5 Form Elements Tutorial Presentation Transcript

  • HTML5 Form Elements www.prodigyview.com
  • 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
  • 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
  • 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. www.prodigyview.com
  • UrlTags:<input type=“url” />Purpose:Ensures that the value entered in a valid url. www.prodigyview.com
  • 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. www.prodigyview.com
  • 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. www.prodigyview.com
  • Telephone Will be available in future versions of ProdigyViewTag:<input type=“tel” />Purpose:Create a field for entering a telephone number. www.prodigyview.com
  • 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