@patternslib/patternslib
Version:
Patternslib is a JavaScript library that enables designers to build rich interactive prototypes without the need for writing any Javascript. All events are triggered by classes and other attributes in the HTML, without abusing the HTML as a programming la
212 lines (211 loc) • 8.76 kB
HTML
<html>
<head>
<title>Subform</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/style/common.css" />
<script src="/bundle.min.js"></script>
</head>
<body class="home">
<div class="row">
<div class="seven columns">
<h3>Auto-vanilla in auto-vanilla (same action)</h3>
<form
action="/src/pat/subform/form-response.html"
method="get"
class="concise"
>
<fieldset class="vertical pat-autosubmit">
<label
>Name <input name="name" type="text" value=""
/></label>
</fieldset>
<fieldset class="vertical pat-subform pat-autosubmit">
<label
>Zipcode <input name="zipcode" type="text" value=""
/></label>
</fieldset>
</form>
<h3>
Auto-inject in auto-vanilla (other action via
data-pat-inject="url: ...")
</h3>
<form
action="/src/pat/subform/form-response.html"
method="get"
class="concise"
>
<fieldset class="vertical pat-autosubmit">
<label
>Name <input name="name" type="text" value=""
/></label>
</fieldset>
<fieldset
class="vertical pat-subform pat-autosubmit pat-inject"
data-pat-inject="url: /src/pat/subform/subform-response.html; target: #subform-target"
>
<label
>Zipcode <input name="zipcode" type="text" value=""
/></label>
</fieldset>
</form>
<h3>
Auto-inject in auto-inject (other action via
data-pat-inject="url: …")
</h3>
<form
action="/src/pat/subform/form-response.html"
method="get"
class="concise pat-inject"
data-pat-inject="target: #form-target"
>
<fieldset class="vertical pat-autosubmit">
<label
>Name <input name="name" type="text" value=""
/></label>
</fieldset>
<fieldset
class="vertical pat-subform pat-autosubmit pat-inject"
data-pat-inject="url: /src/pat/subform/subform-response.html; target: #subform-target"
>
<label
>Zipcode <input name="zipcode" type="text" value=""
/></label>
</fieldset>
</form>
<h3>
Auto-inject in auto-inject (other action via
data-pat-inject="url: …", different delays)
</h3>
<form
action="/src/pat/subform/form-response.html"
method="get"
class="concise pat-inject pat-autosubmit"
data-pat-inject="target: #form-target"
>
<fieldset class="vertical">
<label
>Name <input name="name" type="text" value=""
/></label>
</fieldset>
<fieldset
class="vertical pat-subform pat-autosubmit pat-inject"
data-pat-inject="url: /src/pat/subform/subform-response.html; target: #subform-target"
data-pat-autosubmit="delay: 1000ms"
>
<label
>Zipcode <input name="zipcode" type="text" value=""
/></label>
</fieldset>
</form>
<h3>
Manual-inject in Manual-inject (other action via
data-pat-inject="url: …")
</h3>
<form
action="/src/pat/subform/form-response.html"
method="get"
class="concise pat-inject"
data-pat-inject="target: #form-target"
>
<fieldset class="vertical">
<label
>Name <input name="name" type="text" value=""
/></label>
</fieldset>
<fieldset
class="vertical pat-subform pat-inject"
data-pat-inject="url: /src/pat/subform/subform-response.html; target: #subform-target"
>
<label
>Zipcode <input name="zipcode" type="text" value=""
/></label>
<button
class="pat-button"
type="submit"
name="localsubmit"
value="clicked"
>
Local
</button>
</fieldset>
<button
class="pat-button"
type="submit"
name="globalsubmit"
value="clicked"
>
Global
</button>
</form>
<h3>
Manual-inject in Manual-inject (other action via
data-pat-inject="url: …")
</h3>
<form
action="/src/pat/subform/form-response.html"
method="get"
class="concise pat-inject"
data-pat-inject="target: #form-target"
>
<fieldset class="vertical">
<label
>Name <input name="name" type="text" value=""
/></label>
</fieldset>
<fieldset
class="vertical pat-subform pat-inject"
data-pat-inject="url: /src/pat/subform/subform-response.html; target: #subform-target"
>
<label
>Zipcode <input name="zipcode" type="text" value=""
/></label>
<button
class="pat-button"
type="submit"
name="localsubmit"
value="clicked"
>
Local
</button>
<button
class="pat-button"
type="submit"
name="othersubmit"
value="clicked"
formaction="/src/pat/subform/subform-other-response.html"
>
Local (other action)
</button>
<button class="pat-button" type="reset">
Reset the fields of this subform
</button>
</fieldset>
<button
class="pat-button"
type="submit"
name="globalsubmit"
value="clicked"
>
Global
</button>
</form>
</div>
<div class="four columns pat-bumper">
<div id="form-target">
<p>
Some content will appear here if you change name or
address in the form…
</p>
</div>
<br />
<div id="subform-target">
<p>
Some content will appear here if you change zipcode or
city in the form…
</p>
</div>
</div>
</div>
</body>
</html>