| Even the most basic style of interaction would be amazing: 1. Associate a form element with a non-JS action, ie: add-element, remove-element, modify-element. 2. Allow those actions to make use of <template> elements when adding or modifying elements, and/or XPath selectors. 3. Add a new <input type=id> (or similar) that auto-generates unique UUIDs for form rows. A mockup of what we'd get, though it's actually focused on pure HTML (it would be XML-compatible, however). This is 100% a straw-man, probably not even fully-self-consistent, but giving an idea of what I would want: <h1>Declarative Form Example</h1>
<form action="/update" method="post">
<table id="people">
<thead>
<tr>
<th>First</th><th>Last</th><th>Email</th><th></th>
</tr>
</thead>
<tbody>
<!-- rows appear here -->
</tbody>
</table>
<button type="submit">Save</button>
</form>
<template id="row-template">
<tr data-row data-row-id data-bind:dataset(rowId)="row_id">
<td data-bind:text="first"><input type="hidden" name="first"><input type="uuid" name="row_id" autogenerate></td>
<td data-bind:text="last"><input type="hidden" name="last"></td>
<td>
<a data-bind:attr(href)="email_link" data-bind:text="email"></a>
<input type="hidden" name="email"><input type="hidden" name="email_link">
</td>
<td>
<button formmutate="remove"
formtarget='tr[data-row-id="{{row_id}}"]'
aria-label="Remove row"></button>
</td>
</tr>
</template>
<form id="add-person">
First <input name="first" required>
Last <input name="last" required>
Email <input name="email" type="email" required>
<input type="hidden" name="email_link" value="mailto:{{email}}">
<button formmutate="add" formtarget="#people > tbody" formtemplate="#row-template">Add</button>
</form>
Some existing standards/specs/proposals I cribbed this from:- https://html.spec.whatwg.org/multipage/scripting.html#the-te... - (defunct) https://html.spec.whatwg.org/multipage/form-elements.html#th... |