hcard-input-repeatable

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.

This page is an attempt gather together the evidence of why this is an important authoring pattern that needs to be addressed. It would be great to hear different views on this and alternative solutions. Please add them to 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 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@gamil.com” />
</div>
<div class="email ">
<label for="tel1">telephone</label>
<input class="value" id=”tel1” name="tel" type="text" 
value=”glennjonesnet@gamil.com” />
</div>

• +1 Glenn Jones 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.

see also

• hcard-input
• hcard-input-examples
• hcard-input-formats