[uf-discuss] Proposal for 'repeatable' class - Comments and suggestions needed

[Glenn Jones]

Hi All

At the recent Brighton meet-up we discussed the use of microformats to mark up forms. The only major point of disagreement seemed to be over the proposed "repeatable" class. This class would be used to demark parts of forms that can be repeated, so users can pick multiples of one item.

I have tried to gather together the evidence for why I think this is an important authoring pattern that needs to be addressed. It would be great to hear different views on this and alternative solutions.

I have added a wiki page with the information please feel free to edit it. 
http://microformats.org/wiki/hcard-input-repeatable


Below is the current content of the page:  
 
Evidence of repeating sub form patterns in the wild
This commonly used authoring pattern allows a user to add multiples of one item. The UI often has a JavaScript text link offering to add another form element or group forms i.e. "Add another email address". The additional form elements are nearly always added using JavaScript.  This type of UI is most commonly used in social network profile pages and web based address book applications. 
As the examples below are a complex mixture of HTML, CSS and JavaScript it's not possible to copy the code into the wiki. Instead I have listed a number of high profile sites that use this UI design and the current elements where they are allowing the user to add multiples of one item.
   
https://profiles.google.com/ profile edit page - Emails, Addresses, Phones, URLs, Employment, Education 
http://www.plaxo.com/ profile edit page -  Emails, Addresses, Phones, IM, Webpages
http://www.facebook.com/ profile edit page - Employment, Education, Interests, Emails, IM, Phones 
http://address.mail.yahoo.com/ edit contact page - Email, Address, URLs, Phone, IM, URLs, Birthdays (dates), Notes 
https://mail.google.com/ edit contact page - Email Phone Address, Birthdays (dates), URLs


 
Evidence of repeater patterns in declarative languages 
There are examples of declarative languages that have repeatable attributes or elements - i.e. <repeatable> or <element repeatable="true">. They do tend to be where data binding is an integral part of the mark-up.  

ASPX
http://msdn.microsoft.com/en-us/library/x4s0xktt(v=VS.71).aspx
<asp:repeater id=Repeater1 runat="server" datasource="<%# dataView1 >">
<ItemTemplate></ItemTemplate>
</asp:repeater>
 
XFORMS
https://developer.mozilla.org/en/XForms/User_Interface_Elements/Repeat
<repeat id="lineset" nodeset="/my:lines/my:line">
<input ref="my:price">
<label>Line Item</label>
</input>
<input ref="@name">
<label>Name</label>
</input>
</repeat>

FLEX
http://livedocs.adobe.com/flex/3/html/help.html?content=repeater_3.html
<mx:Repeater id="myrep" dataProvider="{myAC}"> 
<mx:Label id="Label1" text="This is loop #{myrep.currentItem}"/>
</mx:Repeater>

 
Current Proposal
When more than one item is stored in the pasted data and the corresponding HTML element  has the "repeatable" class, an auto-fill application will duplicate the whole DOM node and append it as a sibling underneath the original.

<div class="email repeatable">
   <label for="tel">telephone</label>
   <input class="value" id="tel" name="tel" type="text" />
</div>
 
If we had two emails in the data, the auto-fill application would produce the DOM structure below, from the mark-up above.
 
<div class="email repeatable">
   <label for="tel">telephone</label>
   <input class="value" name="tel" type="text" value="glennjonesnet at gamil.com" />
</div>
<div class="email ">
   <label for="tel1">telephone</label>
   <input class="value" id="tel1" name="tel" type="text" value="glennjonesnet at gamil.com" />
</div>
 
I know that forms constructed this way are so complex it may not be practical to use this repeatable feature idea, but it does provide a level of authoring flexibility which seems appropriate for a large number of use cases. Without it the full proposal for marking up forms with microformats becomes quite a bit weaker.  The word repeater seems a good label in line with the original W3C description for the use of the class attribute.

Thanks 
Glenn