Skip to content

Commit

Permalink
Added HTML5 forms tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@robnyman
robnyman committed Feb 12, 2012
1 parent d2ae6ca commit 9b79599
Show file tree
Hide file tree
Showing 6 changed files with 779 additions and 0 deletions.
162 changes: 162 additions & 0 deletions html5demos/forms/attributes.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Forms - robertnyman.com</title>
<link rel="stylesheet" href="css/base.css" type="text/css" media="screen">
<style>
form {
overflow: hidden;
}

form div {
float: left;
width: 45%;
min-height: 50px;
margin-bottom: 20px;
padding: 5px;
}

@media screen and (max-width: 320px) {
form div {
float: none;
width: 100%;
}
}

input {
font-size: 12px;
}

input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=month],
input[type=number],
input[type=week] {
/* Larger font size to cover up for Opera bug */
font-size: 16px;
}
</style>
</head>

<body>

<div class="container">

<div class="main">
<article class="main-content" role="main">
<h1>HTML5 Forms attributes</h1>

<form action="attributes.html">

<div>
<h3>Autocomplete</h3>
<input type="text" name="autocomplete" autocomplete="off">
</div>

<div>
<h3>Autofocus</h3>
<input type="text" name="autofocus" autofocus>
</div>

<div>
<h3>Formaction</h3>
<input type="submit" formaction="http://example.org/save" value="Save">
</div>

<div>
<h3>Formenctype</h3>
<input type="submit" formenctype="application/x-www-form-urlencoded" value="Save with enctype">
</div>

<div>
<h3>Formmethod</h3>
<input type="submit" formmethod="POST" value="Send as POST">
</div>

<div>
<h3>Formnovalidate</h3>
<p>Does the same thing as if the attribute novalidate had been applied to the &lt;form&gt; element.</p>
<input type="submit" formnovalidate value="Don't validate">
</div>

<div>
<h3>Formtarget</h3>
<input type="submit" formtarget="_blank" value="Post to new tab/window">
</div>

<div>
<h3>list</h3>
<input type="text" name="characters" list="data-list">
<datalist id="data-list">
<option value="Hugo Reyes">
<option value="Jack Shephard">
<option value="James 'Sawyer' Ford">
<option value="John Locke">
<option value="Sayid Jarrah">
</datalist>
</div>

<div>
<h3>max</h3>
<input type="range" max="95">
</div>

<div>
<h3>min</h3>
<input type="range" min="2">
</div>

<div>
<h3>multiple</h3>
<input type="file" multiple>
</div>

<div>
<h3>readonly</h3>
<input type="text" readonly>
</div>

<div>
<h3>required</h3>
<input type="text" name="required" required>
</div>

<div>
<h3>Pattern (only allows uppercase letters)</h3>
<input type="text" pattern="[A-Z]*">
</div>

<div>
<h3>Placeholder</h3>
<input type="text" name="placeholder" placeholder="Enter text here">
</div>

<div>
<h3>Spellcheck</h3>
<input type="text" spellcheck="true">
</div>

<div>
<h3>Step</h3>
<input type="number" step="5">
</div>

<div>
<input type="submit" value="Send">
</div>
</form>

</article>
</div>

<footer class="page-footer" role="contentinfo">
Created by <a href="http://robertnyman.com/">Robert Nyman</a><br>
<a href="https://github.com/robnyman/robnyman.github.com">All demo code at GitHub</a>.
</footer>

</div>

</body>
</html>
37 changes: 37 additions & 0 deletions html5demos/forms/css/base.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
body {
font: 12px "Helvetica Neue", "Helvetica", sans-serif;
background: #ccc;
}

h2 {
margin-top: 40px;
}

.container {
width: 600px;
background: #fff;
border-radius: 10px;
margin: 0 auto;
padding: 30px;
}

img {
padding: 10px;
box-shadow: 0 0 10px 2px #000;
margin-bottom: 5px;
}

figcaption {
font-style: italic;
}

.additional-content {
float: right;
}

.page-footer {
border-top: 1px solid #000;
margin-top: 30px;
padding-top: 10px;
}

115 changes: 115 additions & 0 deletions html5demos/forms/elements.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Forms - robertnyman.com</title>
<link rel="stylesheet" href="css/base.css" type="text/css" media="screen">
<style>
form {
overflow: hidden;
}

form div {
float: left;
width: 45%;
min-height: 50px;
margin-bottom: 20px;
padding: 5px;
}

@media screen and (max-width: 320px) {
form div {
float: none;
width: 100%;
}
}

input {
font-size: 12px;
}

input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=month],
input[type=number],
input[type=week] {
/* Larger font size to cover up for Opera bug */
font-size: 16px;
}
</style>
</head>

<body>

<div class="container">

<div class="main">
<article class="main-content" role="main">
<h1>HTML5 Forms elements</h1>

<form id="the-form" action="elements.html">

<div>
<h3>Datalist</h3>
<input type="text" name="characters" list="data-list">
<datalist id="data-list">
<option value="Hugo Reyes">
<option value="Jack Shephard">
<option value="James 'Sawyer' Ford">
<option value="John Locke">
<option value="Sayid Jarrah">
</datalist>
</div>

<div>
<h3>Keygen</h3>
<keygen name="key"></keygen>
</div>

<div>
<h3>Meter</h3>
<meter min="0" max="10" value="7"></meter>
</div>

<div>
<h3>Output</h3>
<p>If input type="range" and the oninput event on forms are supported in your web browser, slide the range below to see the value in the output element.</p>
<input type="range" id="range" name="range">
<output for="range" id="output"></output>
</div>

<script>
(function () {
var theForm = document.getElementById("the-form");
if ("oninput" in theForm) {
theForm.addEventListener("input", function () {
output.value = range.value;
}, false);
}
})();
</script>

<div>
<h3>Progress</h3>
<progress max="100" value="70">70%</progress>
</div>

<div>
<input type="submit" value="Send">
</div>

</form>

</article>
</div>

<footer class="page-footer" role="contentinfo">
Created by <a href="http://robertnyman.com/">Robert Nyman</a><br>
<a href="https://github.com/robnyman/robnyman.github.com">All demo code at GitHub</a>.
</footer>

</div>

</body>
</html>
Loading

0 comments on commit 9b79599

Please sign in to comment.