tests/html5Forms/index.html

<!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>