Skip to content
Permalink
master
Switch branches/tags
Go to file
 
 
Cannot retrieve contributors at this time
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5Forms.js Test Cases</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="useragentmanExample.css" type="text/css" media="all" />
</head>
<body id="myExample">
<fieldset>
<legend>HTML5Forms.js Test Cases</legend>
<ul class="exampleList">
<li>
<strong>My Examples that show html5Forms.js in action:</strong>
<ul>
<li><a href="patternRequired.html"><code>required</code> and <code>pattern</code> validation</a></li>
<li><a href="patternRequiredWithVisibleIf.html"><code>required</code> and <code>pattern</code> validation with <code>visibleIf</code></a></li>
<li><a href="autofocus.html"><code>autofocus</code> example</a></li>
<li><a href="placeholder.html"><code>placeholder</code> example</a></li>
<li><a href="range.html"><code>range</code> example</a></li>
<li><a href="datetime.html">the various <code>date</code> related widgets</a>. Note that because of the
huge difference between WebKit's date-picker implementation, it is possible to
<a href="datetime-forceJSCalendar.html">force the JavaScript date picker instead of the native one</a>.</li>
<li><a href="outputWithOninput.html"><code>output</code> tag with <code>oninput</code> event</a></li>
<li><a href="color.html"><code>color</code> example</a></li>
<li><a href="errorMessageStyling.html">Error message styling example.</a></li>
<li><a href="validityStyling.html">Styling of the validation state of a form field</a> (i.e. <code>:on_valid</code>, <code>:on_invalid</code>)</li>
<li><a href="example.html">And now ... everything together.</a></li>
</ul>
</li>
<li>
<strong>Various Examples from other websites:</strong>
<ul>
<li>
<a href="24ways.org/index.html">Payment Form</a>
from <a href="http://24ways.org/">Inayaili de León</a>'s
<a href="http://24ways.org/2009/have-a-field-day-with-html5-forms">
tutorial on HTML5 form
</li>
<li>
<a href="bradshawenterprises.com/index.html">HTML5 Form Demo</a>
from <a href="http://www.bradshawenterprises.com/">Richard Bradshaw</a>'s
article <a href="http://www.bradshawenterprises.com/blog/2010/fancy-forms-html5-css3-js/">Fancy Forms: HTML5 + CSS3 – JS</a>.
It is a good example of how to use CSS3 to show the validity state of the form element.
</li>
</ul>
</ul>
</fieldset>
</body>
</html>