Permalink
Browse files

added forms demos

  • Loading branch information...
PeterHimschoot committed Oct 6, 2011
1 parent 008c4d6 commit c436a5e8784fbe76ee86d0c197e4d4ec6159b336
@@ -0,0 +1,10 @@
+<!DOCTYPE html >
+<html>
+<head>
+ <title>Using autocomplete attribute</title>
+</head>
+<body>
+ <input type="text" name="username" autocomplete autofocus />
+ <input type="text" name="creditcard" autocomplete="off" />
+</body>
+</html>
View
@@ -0,0 +1,135 @@
+/* html5 css file, Peter Lubbers, Kaazing */
+
+body {
+ background-color:#CCCCCC;
+ font-family:Geneva,Arial,Helvetica,sans-serif;
+ margin: 0px auto;
+ max-width:900px;
+ border:solid;
+ border-color:#FFFFFF;
+}
+
+header {
+ background-color: #F47D31;
+ display:block;
+ color:#FFFFFF;
+ text-align:center;
+ width:100%;
+}
+
+h1 {
+ font-size: 72px;
+ margin: 0px;
+}
+
+h2 {
+ font-size: 24px;
+ margin: 0px;
+ text-align:center;
+ color: #F47D31;
+}
+
+h3 {
+ font-size: 18px;
+ margin: 0px;
+ text-align:center;
+ color: #F47D31;
+}
+
+h4 {
+ color: #F47D31;
+ background-color: #fff;
+ -webkit-box-shadow: 2px 2px 20px #888;
+ -webkit-transform: rotate(-45deg);
+ position: absolute;
+ padding: 0px 150px;
+ top: 50px;
+ left: -120px;
+ text-align:center;
+
+}
+
+header h2 {
+ margin: 0px;
+}
+
+nav {
+ display:block;
+ width:25%;
+ float:left;
+}
+
+nav a:link, nav a:visited {
+ display: block;
+ border-bottom: 3px solid #fff;
+ padding: 10px;
+ text-decoration: none;
+ font-weight: bold;
+ margin: 5px;
+}
+
+nav a:hover {
+ color: white;
+ background-color: #F47D31;
+}
+
+nav h3 {
+ margin: 15px;
+ color: white;
+}
+
+#container {
+ background-color: #888;
+}
+
+section {
+
+ display:block;
+ width:50%;
+ float:left;
+}
+
+article {
+ background-color: #eee;
+ display:block;
+ margin: 10px;
+ padding: 10px;
+ -webkit-border-radius: 10px;
+ -moz-border-radius: 10px;
+ border-radius: 10px;
+}
+
+article h2 {
+}
+
+aside {
+ display:block;
+ width:25%;
+ float:left;
+}
+
+footer {
+ clear: both;
+ display: block;
+ background-color: #F47D31;
+ color:#FFFFFF;
+ text-align:center;
+ padding: 15px;
+}
+
+
+/* links */
+a {
+ color: #F47D31;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+/*
+input:invalid
+{
+ background: red;
+}
+*/
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Password Match</title>
+ <link href="forms.css" rel="stylesheet" />
+ <script src="/js/jquery-1.6.4.js" type="text/javascript"></script>
+ <script>
+ function checkPasswords()
+ {
+ var pass1 = document.getElementById("password1");
+ var pass2 = document.getElementById("password2");
+
+ if (pass1.value != pass2.value)
+ pass1.setCustomValidity("Your passwords do not match. Please recheck that your new password is entered identically in the two fields.");
+ else
+ pass1.setCustomValidity("");
+
+ var v = document.getElementById("validity");
+ if (v)
+ {
+ // v.innerHTML = document.passwordChange.password1.validity.customError;
+ v.innerHTML = document.passwordChange.password1.validationMessage;
+ }
+ }
+
+ function invalidHandler(evt)
+ {
+ // set the label's text color to red
+ evt.srcElement.style.background = 'red';
+ // stop the event from propagating higher
+ evt.stopPropagation();
+ // stop the browser's default handling of the validation error
+ evt.preventDefault();
+ }
+
+ // function validHandler(evt)
+ // {
+ // // set the label's text color to red
+ // evt.srcElement.style.background = 'white';
+ // // stop the event from propagating higher
+ // evt.stopPropagation();
+ // // stop the browser's default handling of the validation error
+ // evt.preventDefault();
+ // }
+
+ function loadDemo() {
+
+ $('check').click(checkPasswords);
+
+ // register an event handler on the form to
+ // handle all invalid control notifications
+ document.passwordChange.addEventListener("invalid", invalidHandler, true);
+ // document.passwordChange.addEventListener("valid", validHandler, true);
+ }
+
+ window.addEventListener("load", loadDemo, false);
+ </script>
+</head>
+<body>
+ <form name="passwordChange">
+ <p>
+ <label for="password1">
+ New Password:</label>
+ <input type="password" id="password1" onchange="checkPasswords()"></p>
+ <p>
+ <label for="password2">
+ Confirm Password:</label>
+ <input type="password" id="password2" onchange="checkPasswords()"></p>
+ <p>
+
+ </form>
+ <button id="check">
+ Check Validity</button>
+ <div id="validity">
+ </div>
+</body>
+</html>
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Pattern List</title>
+ <!--
+This demo does not yet work in any browsers at the time of publication.
+It was planned to be an additional Practical Extra called "Natural (List) Selection".
+
+It was meant to show how you can use patterns to restrict the values in a datalist
+live so that as the user types, the datalist options are filtered. Datalists are only
+supported in Opera at the moment, and this demo works there. Sort of. Unfortunately,
+when the pattern is applied, the visuals of the list don't actually reflect that
+until the next keypress. So it always lags behind by one key. I tried everything I
+could to force it to refresh the list immediately, but to no avail. Maybe this will
+work when other browsers like Chrome and Safari add their datalist support.
+-->
+ <script>
+ function filterList(field)
+ {
+ // get the current value from the field
+ var currVal = field.value;
+
+ // escape any regular expression characters from the entered text
+ currVal = currVal.replace(/([.*+?|(){}[\]\\])/ig, "\\$1");
+
+ field.pattern = currVal + ".*";
+ }
+
+ </script>
+</head>
+<body>
+ <form name="listForm">
+ <p>
+ <label for="patternList">
+ Select from the list:</label>
+ <input type="text" id="patternChoice" list="fullList" onkeydown="filterList(this)"></p>
+ <datalist id="fullList">
+ <option value="one">
+ <option value="two">
+ <option value="three">
+ <option value="four">
+ <option value="five">
+ <option value="six">
+ <option value="seven">
+ <option value="eight">
+ <option value="nine">
+ <option value="ten">
+ </datalist>
+ <span>Type in the field to filter the options.</span>
+ </form>
+</body>
+</html>
View
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Range min and max</title>
+</head>
+<script src="Scripts/jquery-1.6.3.min.js" type="text/javascript"></script>
+<script>
+ $(function ()
+ {
+ var x = document.querySelector('#x');
+ x.valueAsNumber(10);
+ $('#x').bind('change', function () { $('#val').val($('#x').valueAsNumber()); });
+ });
+
+</script>
+<body>
+ <form name="ranges">
+ <div>
+ <span id="min">5</span>
+ <input id="x" type="range" min="5" max="10" />
+ <span id="max">10</span> <span id="val"></span>
+ </div>
+ <div>
+ <input type="range" min="0" max="100" step="10" />
+ </div>
+ </form>
+</body>
+</html>
Oops, something went wrong.

0 comments on commit c436a5e

Please sign in to comment.