[uf-discuss] Microformats in Form Fields

[Steve Ganz]

On Thursday, September 28, 2006 9:21 AM Drew McLellan Wrote
> 
> On 28/9/2006, "Ryan Cannon" <ryan at ryancannon.com> wrote:
> 
> >> What if I was to mark up the form (and fields) with hCard classes?
> >> Good idea? Bad idea? I strikes me that it could be useful for auto- 
> >> complete applications, but not sure if it would ‘pollute’ the web 
> >> with effectively a useless/empty hCard when the form is published.
> >
> > Wouldn't a solution to this be not to wrap the form fields in a *.vcard 
> > block?
> > The information would then never actually generate a vcard using a 
> > parser, and a blank form is not technically a vcard in HTML.
> >
> > Alternately, you could use @name to supply your semantics instead of 
> > @class.
> 
> That's the ticket. But you'd need a mixture of name and class 
> to account for everything... e.g.
> 
> <fieldset class="fn  n">
>    <input type="text" name="given-name" />
>    <input type="text" name="family-name" /> </fieldset>
> 
> (obviously incomplete example)

	I've been thinking about this a lot lately too. I've had a note on
my fridge for about 2 months now that says simply "Paste hCard". :)

	I recently wrote a form and it just made sense to mark it up with
hCard semantics. To avoid polluting the uF-o-sphere, I didn't use the
"vcard" as the @class on the root element. For each pair of label/inputs, I
created a parent div with the @class of "fieldrow + input name". Here's a
sample fieldset of address fields:

<fieldset class="adr billing-address">
<legend>Billing Address</legend>
<div class="fieldrow street-address">
  <label for="street-address" title="Address Line 1">Address:</label>
  <input type="text" name="street-address" id="street-address" />
</div>
<div class="fieldrow optional extended-address">
  <label for="extended-address" title="Address Line 2">Address Line
2:</label>
  <input class="optional" type="text" name="extended-address"
id="extended-address" />
</div>
<div class="fieldrow locality">
  <label for="locality">City:</label>
  <input type="text" name="locality" id="locality" />
</div>
<div class="fieldrow region">
  <label for="region">State:</label>
  <select name="region" id="region">
    <option value="AL">AL</option>
	...
  </select>
</div>
<div class="fieldrow postal-code">
  <label for="postal-code">Postal code:</label>
  <input type="text" name="postal-code" id="postal-code" size="10" />
</div>
<div class="fieldrow country">
  <label for="country">Country:</label>
  <select name="country" id="country" size="1">
    <option value="US">United States</option>
	...
  </select>
</div>
</fieldset>

- Steve