If you were using Internet Explorer 6 or 7 on a Windows machine or Opera 9, this demo would actually work!
Intro
Validation
Date and time types
Range control
Repetition
Calculated fields
Datalist
Autofocus
Prefilling forms
Roundtripping data
Input mode

Repetition

WF2 introduces a very convinient method to create repeating blocks.

This form can have an arbitrary number of fields, just click [Add Item] to add one more

The initial HTML look like this:

<form>
    <div id="row1" repeat="template">
        <input type="text" name="product.[template1]" value=""><button type=remove>Remove</button>
    </div>
    <button type=add template=row1>Add Item</button>
</form>

The attribute repeat="template" declares that the element is an template which can be repeated.

The new button types add and remove is used for adding and removing instances of the template.

The template may contain several fields. Here is a slightly more complex example:

I want to buy:
Item Quantity Gift

Submission format

How does this look on the server side?

Recieved by the server:

Recieved by the server:
I want to buy:
Item Quantity Gift

Moving blocks

If the order of the items is important, two additional button types can be used for moving up and down:

Item Quantity

The HTML is: <button type=move-up>Up</button> <button type=move-down>Down</button>

Repeat-start

By default, one instance based on the template is inserted in the document initially. This can be overridden by setting the repeat-start attribute to a number. (If the number is 0, no blocks is inserted initially). The attributes repeat-min and repeat-max defines the minimum ans maximum allowed blocks.

This expample has repeat-start=3, repeat-min=2 and repeat-max=5 :

Nested repeat

You can have nested repetition-elements:

  1. Planet

    Moons