Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

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...



Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: