io-ui-jsonform
Version:
HTML JSON form submission polyfill based on http://darobin.github.io/formic/specs/json/ .
381 lines (363 loc) • 11.2 kB
HTML
<html>
<head>
<title>IO-UI-jsonform - send data as backend dev</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Italiana&subset=latin">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
</head>
<body>
<section id="top">
<div id="menu"><a id="toggle" href="#"><i class="icon-menu"></i></a>
<ul>
<li><a href="#introduction">Introduction</a>
</li>
<li><a href="#example1"> Example 1</a>
</li>
<li><a href="#example2"> Example 2</a>
</li>
<li><a href="#example3"> Example 3</a>
</li>
<li><a href="#example4"> Example 4</a>
</li>
<li><a href="#example5"> Example 5</a>
</li>
<li><a href="#example6"> Example 6</a>
</li>
<li><a href="#example7"> Example 7</a>
</li>
<li><a href="#example8"> Example 8</a>
</li>
<li><a href="#example9"> Example 9</a>
</li>
<li><a href="#example10"> Example 10</a>
</li>
<li><a href="#external">External Ressources</a>
</li>
</ul>
</div>
<div id="heading">
<div id="logo">Jefe.io</div>
<i class="fa fa-server fa-5x"></i>
<h1>IO-UI-jsonform</h1>
<div id="tagline">HTML JSON form submission polyfill<br>based on <a href="http://darobin.github.io/formic/specs/json/">Darobins unofficial draft</a>.</div>
</div>
</section>
<section>
<div class="content">
<h1 id="introduction">Introduction</h1>
<p>
some paragrpah
</p>
</div>
</section>
<section>
<div class="content">
<h1 id="example1">EXAMPLE 1: Basic Keys</h1>
<p>
Some Paragraph
</p>
<form enctype='application/json'>
<input name='name' value='Bender'>
<select name='hind'>
<option selected>Bitable</option>
<option>Kickable</option>
</select>
<input type='checkbox' name='shiny' checked>
<input type='submit' value='Submit'>
</form>
<div class="example"><pre class="example highlight prettyprint prettyprinted">
<form enctype='application/json'>
<input name='name' value='Bender'>
<select name='hind'>
<option selected>Bitable</option>
<option>Kickable</option>
</select>
<input type='checkbox' name='shiny' checked>
<input type='submit' value='Submit'>
</form>
// produces
{
"name": "Bender"
, "hind": "Bitable"
, "shiny": true
}</pre></div>
</div>
</section>
<section>
<div class="content">
<h1 id="example2">EXAMPLE 2: Multiple Values</h1>
<p>
Some Paragraph
</p>
<form enctype='application/json'>
<input type='number' name='bottle-on-wall' value='1'>
<input type='number' name='bottle-on-wall' value='2'>
<input type='number' name='bottle-on-wall' value='3'>
<input type='submit' value='Submit'>
</form>
<pre class="example highlight prettyprint prettyprinted" id="multiple-values">
<form enctype='application/json'>
<input type='number' name='bottle-on-wall' value='1'>
<input type='number' name='bottle-on-wall' value='2'>
<input type='number' name='bottle-on-wall' value='3'>
<input type='submit' value='Submit'>
</form>
// produces
{
"bottle-on-wall": [1, 2, 3]
}</pre></div>
</div>
</section>
<section>
<div class="content">
<h1 id="example3">EXAMPLE 3: Deeper Structure</h1>
<p>
Some Paragraph
</p>
<form enctype='application/json'>
<input name='pet[species]' value='Dahut'>
<input name='pet[name]' value='Hypatia'>
<input name='kids[1]' value='Thelma'>
<input name='kids[0]' value='Ashley'>
<input type='submit' value='Submit'>
</form>
<div class="example"><pre class="example highlight prettyprint prettyprinted">
<form enctype='application/json'>
<input name='pet[species]' value='Dahut'>
<input name='pet[name]' value='Hypatia'>
<input name='kids[1]' value='Thelma'>
<input name='kids[0]' value='Ashley'>
<input type='submit' value='Submit'>
</form>
// produces
{
"pet": {
"species": "Dahut"
, "name": "Hypatia"
}
, "kids": ["Ashley", "Thelma"]
}</pre></div>
</section>
<section>
<div class="content">
<h1 id="example4">EXAMPLE 4: Sparse Arrays</h1>
<p>
Some Paragraph
</p>
<form enctype='application/json'>
<input name='hearbeat[0]' value='thunk'>
<input name='hearbeat[2]' value='thunk'>
<input type='submit' value='Submit'>
</form>
<div class="example"><pre class="example highlight prettyprint prettyprinted" id="sparse-arrays">
<form enctype='application/json'>
<input name='hearbeat[0]' value='thunk'>
<input name='hearbeat[2]' value='thunk'>
<input type='submit' value='Submit'>
</form>
// produces
{
"hearbeat": ["thunk", null, "thunk"]
}</pre></div>
</div>
</section>
<section>
<div class="content">
<h1 id="example5">EXAMPLE 5: Even Deeper</h1>
<p>
Some Paragraph
</p>
<form enctype='application/json'>
<input name='pet[0][species]' value='Dahut'>
<input name='pet[0][name]' value='Hypatia'>
<input name='pet[1][species]' value='Felis Stultus'>
<input name='pet[1][name]' value='Billie'>
<input type='submit' value='Submit'>
</form>
<div class="example"><pre class="example highlight prettyprint prettyprinted">
<form enctype='application/json'>
<input name='pet[0][species]' value='Dahut'>
<input name='pet[0][name]' value='Hypatia'>
<input name='pet[1][species]' value='Felis Stultus'>
<input name='pet[1][name]' value='Billie'>
<input type='submit' value='Submit'>
</form>
// produces
{
"pet": [
{
"species": "Dahut"
, "name": "Hypatia"
}
, {
"species": "Felis Stultus"
, "name": "Billie"
}
]
}</pre></div>
</div>
</section>
<section>
<div class="content">
<h1 id="example6">EXAMPLE 6: Such Deep</h1>
<p>
Some Paragraph
</p>
<form enctype='application/json'>
<input name='wow[such][deep][3][much][power][!]' value='Amaze'>
<input type='submit' value='Submit'>
</form>
<div class="example"><pre class="example highlight prettyprint prettyprinted">
<form enctype='application/json'>
<input name='wow[such][deep][3][much][power][!]' value='Amaze'>
<input type='submit' value='Submit'>
</form>
// produces
{
"wow": {
"such": {
"deep": [
null
, null
, null
, {
"much": {
"power": {
"!": "Amaze"
}
}
}
]
}
}
}</span></pre></div>
</div>
</section>
<section>
<div class="content">
<h1 id="example7">EXAMPLE 7: Merge Behaviour</h1>
<p>
Some Paragraph
</p>
<form enctype='application/json'>
<input name='mix' value='scalar'>
<input name='mix[0]' value='array 1'>
<input name='mix[2]' value='array 2'>
<input name='mix[key]' value='key key'>
<input name='mix[car]' value='car key'>
<input type='submit' value='Submit'>
</form>
<div class="example"><pre class="example highlight prettyprint prettyprinted">
<form enctype='application/json'>
<input name='mix' value='scalar'>
<input name='mix[0]' value='array 1'>
<input name='mix[2]' value='array 2'>
<input name='mix[key]' value='key key'>
<input name='mix[car]' value='car key'>
<input type='submit' value='Submit'>
</form>
// produces
{
"mix": {
"": "scalar"
, "0": "array 1"
, "2": "array 2"
, "key": "key key"
, "car": "car key"
}
}</pre></div>
</div>
</section>
<section>
<div class="content">
<h1 id="example8">EXAMPLE 8: Append</h1>
<p>
Some Paragraph
</p>
<form enctype='application/json'>
<input name='highlander[]' value='one'>
<input type='submit' value='Submit'>
</form>
<div class="example"></div><pre class="example highlight prettyprint prettyprinted">
<form enctype='application/json'>
<input name='highlander[]' value='one'>
<input type='submit' value='Submit'>
</form>
// produces
{
"highlander": ["one"]
}</span></pre></div>
</div>
</section>
<section>
<div class="content">
<h1 id="example9">EXAMPLE 9: Files</h1>
<p>
Some Paragraph
</p>
<form enctype='application/json'>
<input type='file' name='file' multiple>
<input type='submit' value='Submit'>
</form>
<div class="example"><pre class="example highlight prettyprint prettyprinted">
<form enctype='application/json'>
<input type='file' name='file' multiple>
<input type='submit' value='Submit'>
</form>
// assuming the user has selected two text files, produces:
{
"file": [
{
"type": "text/plain",
"name": "dahut.txt",
"body": "REFBQUFBQUFIVVVVVVVVVVVVVCEhIQo="
},
{
"type": "text/plain",
"name": "litany.txt",
"body": "SSBtdXN0IG5vdCBmZWFyLlxuRmVhciBpcyB0aGUgbWluZC1raWxsZXIuCg=="
}
]
}</pre></div>
</div>
</section>
<section>
<div class="content">
<h1 id="example10">EXAMPLE 10: Multiple Values</h1>
<p>
Some Paragraph
</p>
<form enctype='application/json'>
<input name='error[good]' value='BOOM!'>
<input name='error[bad' value='BOOM BOOM!'>
<input type='submit' value='Submit'>
</form>
<div class="example"><pre class="example highlight prettyprint prettyprinted">
<form enctype='application/json'>
<input name='error[good]' value='BOOM!'>
<input name='error[bad' value='BOOM BOOM!'>
<input type='submit' value='Submit'>
</form>
// Produces:
{
"error": {
"good": "BOOM!"
}
, "error[bad": "BOOM BOOM!"
}</pre></div>
</div>
</section>
<section>
<div class="content">
<h1 id="external">External Resources</h1>
<p>
Some Paragraph
</p>
</div>
</section>
</body>
</html>