<form action="httpl://helloworld.ui" onchange="patch">
<div>
<p>First name: <input name="firstName" /></p>
<p>Last name: <input name="lastName" /></p>
</div>
<output name="out"><h2>Hello, {{firstName}} {{lastName}}!</h2></output>
</form><form action="httpl://clicks.ui" method="post">
<output name="clicksForm">
<div>You've clicked {{numberOfClicks}} times</div>
<button {{#if hasClickedTooManyTimes}}disabled{{/if}}>Click me</button>
{{#if hasClickedTooManyTimes}}
<div>
That's too many clicks! Please stop before you wear out your fingers.
<button formmethod="reset">Reset clicks</button>
</div>
{{/if}}
</output>
</form><form action="httpl://simplelist.ui" method="post">
New item:
<input name="itemToAdd" type="text" onchange="patch" />
<output name="addButton" for="itemToAdd">
<button type="submit" {{#if cantAddYet}}disabled{{/if}}>Add</button>
</output>
<p>Your items:</p>
<output name="itemList">
<select multiple="multiple" width="50">
{{#each items}}<option value="{{this}}">{{this}}</option>{{/each}}
</select>
</output>
</form><output name="readout" form="controls">
<h3>What's in the model?</h3>
<table>
<tr>
<td class="label">Text value:</td>
<td>{{stringValue}}</td>
</tr>
<tr>
<td class="label">Password:</td>
<td>{{passwordValue}}</td>
</tr>
<tr>
<td class="label">Bool value:</td>
<td>{{#if booleanValue}}True{{else}}False{{/if}}</td>
</tr>
<tr>
<td class="label">Selected option:</td>
<td>{{selectedOptionValue}}</td>
</tr>
<tr>
<td class="label">Multi-selected options:</td>
<td>{{multipleSelectedOptionValues}}</td>
</tr>
<tr>
<td class="label">Radio button selection:</td>
<td>{{radioSelectedOptionValue}}</td>
</tr>
</table>
</output>
<h3>HTML controls</h3>
<form id="controls" action="httpl://controltypes.ui" onchange="patch">
<table>
<output for="stringValue" name="stringValueControls">
<tr>
<td class="label">Text value (updates on change):</td>
<td><input name="stringValue" /></td>
</tr>
<tr>
<td class="label">Text value (updates on keystroke):</td>
<td><input name="stringValue" onkeydown="patch" /></td>
</tr>
<tr>
<td class="label">Text value (multi-line):</td>
<td><textarea name="stringValue"> </textarea></td>
</tr>
</output>
<tr>
<td class="label">Password:</td>
<td><input type="password" name="passwordValue" /></td>
</tr>
<tr>
<td class="label">Checkbox:</td>
<td><input type="checkbox" name="booleanValue" /></td>
</tr>
<tr>
<td class="label">Drop-down list:</td>
<td><select name="selectedOptionValue">{{#each optionValues}}<option value="{{this}}">{{this}}</option>{{/each}}</select></td>
</tr>
<tr>
<td class="label">Multi-select drop-down list:</td>
<td><select multiple="multiple" name="multipleSelectedOptionValues">{{#each optionValues}}<option value="{{this}}">{{this}}</option>{{/each}}</select></td>
</tr>
<tr>
<td class="label">Radio buttons:</td>
<td>
<label><input type="radio" value="Alpha" name="radioSelectedOptionValue" />Alpha</label>
<label><input type="radio" value="Beta" name="radioSelectedOptionValue" />Beta</label>
<label><input type="radio" value="Gamma" name="radioSelectedOptionValue" />Gamma</label>
</td>
</tr>
</table>
</form><h2>People</h2>
<form id="people" action="httpl://collections.ui/people"></form>
<output name="peopleList" form="people">
<ul>
{{#each people}}
<li>
<div>
<span>{{this.name}}</span> has <span>{{this.childrenCount}}</span> children:
<a formmethod="post" formaction="httpl://collections.ui/people/{{this.slug}}/children">Add child</a>
{{#if showRenderTimes}}<span class='renderTime'>(person rendered at <span>{{time}}</span>)</span>{{/if}}
</div>
<ul>
{{#each this.children}}
<li>
<span>{{this.name}}</span>
{{#if showRenderTimes}}<span class='renderTime'>(child rendered at <span>{{time}}</span>)</span>{{/if}}
</li>
{{/each}}
</ul>
</li>
{{/each}}
</ul>
</output>
<form action="httpl://collections.ui/settings" onchange="post">
<label><input name="showRenderTimes" type='checkbox' /> Show render times</label>
</form><h2>Contacts</h2>
<div id='contactsList'>
<table class='contactsEditor'>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Phone numbers</th>
</tr>
<tbody>
{{#each contacts}}
<tr>
<td>
<input name="firstName" value="{{this.firstName}}" />
<div><a href='{{this.url}}' formmethod="delete">Delete</a></div>
</td>
<td><input name="lastName" value="{{this.lastName}}" /></td>
<td>
<table>
<tbody>
{{#each this.phones}}
<tr>
<td><input name="type" value={{this.type}} /></td>
<td><input name="number" value={{this.number}} /></td>
<td><a href='{{this.url}}' formmethod="delete">Delete</a></td>
</tr>
{{/each}}
</tbody>
</table>
<a href='{{this.url}}/phones' formmethod="post">Add number</a>
</td>
{{/each}}
</tr>
</tbody>
</table>
</div>
<form action="httpl://contacts.ui">
<p>
<button formmethod="post">Add a contact</button>
<button formmethod="get" formtarget="jsonOutput" formaccept="application/json" {{#if noContacts}}disabled{{/if}}>Save to JSON</button>
</p>
<textarea id="jsonOutput" rows='5' cols='60' disabled='disabled'>{{lastSavedJson}}</textarea><form action='httpl://grideditor.uri'>
<p>You have asked for {{numGifts}} gift(s)</p>
{{#if numGifts}}
<table>
<thead>
<tr>
<th>Gift name</th>
<th>Price</th>
<th />
</tr>
</thead>
<tbody>
{{each gift}}
<tr>
<td><input class='required' name="name" value="{{this.name}}" /></td>
<td><input class='required number' name="price" value="{{this.price}}" /></td>
<td><button formmethod="get" name="exclude" value="{{this.id}}">Delete</button></td>
</tr>
{{/each}}
</tbody>
</table>
{{/if}}
<button formmethod="get" name="numGifts" value="{{numGiftsPlusOne}}">Add Gift</button>
<button formmethod="post" type="submit" {{#if noGifts}}disabled{{/if}}>Submit</button>
</form><form action="{{cart_url}}" method="post">
<table width='100%'>
<thead>
<tr>
<th width='25%'>Category</th>
<th width='25%'>Product</th>
<th class='price' width='15%'>Price</th>
<th class='quantity' width='10%'>Quantity</th>
<th class='price' width='15%'>Subtotal</th>
<th width='10%'> </th>
</tr>
</thead>
<tbody>
{{#each items}}
<tr>
<td>
<select name="category" onchange="patch">
<option>Select...</option>
{{#each sampleProductCategories}}
<option value="{{this.id}}" {{#if this.selected}}selected{{/if}}>{{this.name}}</option>
{{/each}}
</select>
</td>
<output name="{{this.id}}-product" for="category">
<td>
{{#if this.category}}
<select name="product" onchange="patch">
<option>Select...</option>
{{#each this.category.products}}
<option value="{{this.id}}" {{#if this.selected}}selected{{/if}}>{{this.name}}</option>
{{/each}}
</select>
{{/if}}
</td>
<output name="{{this.id}}-price" for="category product quantity">
<td class='price'>
{{#if this.product}} {{this.product.price}} {{/if}}
</td>
<td class='quantity'>
{{#if this.product}}
<input name="quantity" value="{{this.quantity}}" onkeydown="patch" />
{{/if}}
</td>
<td class='price'>
{{#if this.product}} {{this.subtotal}} {{/if}}
</td>
</output>
<td>
<a href='{{this.url}}' formmethod="delete">Remove</a>
</td>
</output>
</tr>
{{/each}}
</tbody>
</table>
<output name="grandTotal">
<p>Total value: {{grandTotal}}</p>
</output>
<button formaction="{{cart_url}}/items">Add product</button>
<button>Submit order</button>
</form>