Microformats Wiki - User contributions [en]

rest/forms-examples

2006-11-10T07:23:54Z

SanderMarechal: /* Existing Practices */

= Forms Examples =
As the first stage of the microformats [[process]], this page collects [[examples]] of best/common practice for annotating HTML [http://www.w3.org/TR/REC-html40/interact/forms.html form] to describe input data.

== The Problem ==
The vast majority of websites use some kind of forms to receive input -- far more than provide any kind of web services. Currently, people who want to call into those websites need to manually screen-scape and generate [http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.13.4.1 urlencoded], or (worse) MIME [http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.13.4.2 multipart].

The purpose of this exploration is to determine if there is any consistent design patterns used by forms and/or semantic tagging that would allow automatic extraction of the information needed to generate HTML input.

== Participants ==
* [http://www.opendarwin.org/~drernie/ Dr. Ernie]

== Real-World Forms Examples ==

=== [http://www.wdvl.com/Authoring/HTML/4/Example.html WDVL Example] ===

<FORM Action="">
<TABLE Border = "2" frame="hsides" rules="groups" cellpadding=8>
<COLGROUP align="right">
<COLGROUP align="center">
<COLGROUP align="left">
<THEAD valign="top">
<TR>
<TH class="Head"> Label </TH> <TH class="Head"> Control </TH>
<TH class="Head"> Access </TH>
</TR>
<TBODY>
<TR>
<TH class="Info"> <LABEL for="fname" accesskey="A">First Name: </LABEL> </TH>
<TD class="Info"> <INPUT type="text" name="firstname" id="fname"> </TD>
<TD class="Info"> A </TD>
</TR>
<TR>
<TH class="Info"> <LABEL for="lname" accesskey="B">Last Name: </LABEL> </TH>
<TD class="Info"> <INPUT type="text" name="lastname" id="lname"> </TD>
<TD class="Info"> B </TD>
</TR>
<TR>
<TH class="Info" rowspan=2> Sex: </TH>
<TD class="Info">
<LABEL for="F" accesskey="F"> Female: </LABEL>
<INPUT type="radio" name="sex" value="FeMale" id="F"> </TD>
<TD class="Info"> F </TD>
</TR>
<TR>
<TD class="Info">
<LABEL for="M" accesskey="M"> Male: </LABEL>
<INPUT type="radio" name="sex" value="Male" id="M"> </TD>
<TD class="Info"> M </TD>
</TR>
<TBODY>
<TR>
<TH> <BUTTON name="submit" value="submit" type="submit">
<b>Send </b> <IMG src="/Icons/smile.gif" alt="Yes!"> </BUTTON>
</TH>
<TH> <BUTTON name="reset" type="reset">
<em>Reset </em> <IMG src="/Icons/mr_yuk.gif" alt="No!"> </BUTTON>
</TH>
</TR>
</TABLE>
</FORM>

=== [http://www.cs.tut.fi/~jkorpela/forms/tables.html Structuring (HTML2) Forms Using Tables] ===
<FORM METHOD="POST" ACTION="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
<TABLE BORDER="1">
<TR>
<TD>Your name </TD>
<TD>
<INPUT TYPE="TEXT" NAME="name" SIZE="20">
</TD>
</TR>
<TR>
<TD>Your E-mail address </TD>
<TD> <INPUT TYPE="TEXT" NAME="email" SIZE="25"> </TD>
</TR>
</TABLE>
<P> <INPUT TYPE="SUBMIT" VALUE="Submit" NAME="B1"> </P>
</FORM>

=== [http://www.w3schools.com/xforms/xforms_example.asp Xforms Tutorial] ===

<xforms>
<model>
<instance>
<person>
<fname/>
<lname/>
</person>
</instance>
<submission id="form1" method="get"
action="submit.asp"/>
</model>
<input ref="fname">
<label>First Name</label>
</input>
<input ref="lname">
<label>Last Name</label>
</input>
<submit submission="form1">
<label>Submit</label>
</submit>
</xforms>

=== [http://www.orbitz.com/ Orbitz] ===
:<form method="get" id="productNavMenu" action="">
::<div id="productNav" class="productNav">
::<div class="singleProduct">
::<ul>
:::<li><label for="airChoice"><input type="radio" name="product" id="airChoice" class="chk" botid="air" href="" target="" dp="" checked="checked" />Flight<span class="onlyFlag"> only</span></label></li>
:::<li><label for="htlChoice"><input type="radio" name="product" id="htlChoice" class="chk" botid="htl" href="" target="" dp="" />Hotel<span class="onlyFlag"> only</span></label></li>
:::<li><label for="carChoice"><input type="radio" name="product" id="carChoice" class="chk" botid="car" href="" target="" dp="" />Car<span class="onlyFlag"> only</span></label></li>
::</ul>
::</div>
::<div class="packageProduct">
::<ul>
:::<li><label for="aphChoice"><input type="radio" name="product" id="aphChoice" class="chk" botid="aph" href="" target="" dp="" />Flight + Hotel</label></li>
:::<li><label for="hpcChoice"><input type="radio" name="product" id="hpcChoice" class="chk" botid="hpc" href="" target="" dp="" />Hotel + Car</label></li>
::</ul>
::</div>
::<div class="promoBox">
:::<p><span></span>
:::<a href="/App/PackageSavingsInfo?popupsDisabled=false" onClick="return popUpGen('/App/PackageSavingsInfo?popupsDisabled=false','400','200');" > Book together and <span class="saveLabel">save</span> <span class="savings">$169</span></a>
:::<span class="note">on average</span></p>
::</div>
::</div>
:</form>

=== Canonical HTML 4 [http://www.w3.org/TR/REC-html40/interact/forms.html example] ===
:<FORM action="http://somesite.com/prog/adduser" method="post">
::<P>
::<LABEL for="firstname">First name: </LABEL>
:::<INPUT type="text" id="firstname"><BR>
::<LABEL for="lastname">Last name: </LABEL>
:::<INPUT type="text" id="lastname"><BR>
::<LABEL for="email">email: </LABEL>
:::<INPUT type="text" id="email"><BR>
:::<INPUT type="radio" name="sex" value="Male"> Male<BR>
:::<INPUT type="radio" name="sex" value="Female"> Female<BR>
:::<INPUT type="submit" value="Send"> <INPUT type="reset">
::</P>
:</FORM>

=== [http://www.google.com/ Google] ===
:<form action=/search name=f>
::<script>...</script>
::<table>...Web..Images..Groups..News..Froogle...</table>
::<table>
:::<input type=hidden name=hl value=en>
:::<input maxLength=256 size=55 name=q value=""><br>
:::<input type=submit value="Google Search" name=btnG>
:::<input type=submit value="I'm Feeling Lucky" name=btnI>
::</table>
:</form>

=== [http://www.expedia.com Expedia] ===
:<form name=FltWiz method=post action="MoreInfo.asp" style="margin-top:14;margin-bottom:0">
:<table ...>
::...
::<td>
:::<font face=Arial size=1 class=size11>Departing from:<br>
::::<input type=text name=Fcity1 class=buntext1 maxlength=100 value="">
:::</font>
::</td>...
::<td>
:::<select class=size11 name=Fday1 onChange="SetDay(1)">
::::<option value=1>1
:::</select>
::</td>...
::<td>
:::<select class=size11 name=Ftime1>
::::<option value=420>AM
::::<option selected value=720 selected>Noon
::::<option value=1020>PM
:::</select>
::</td>...
::<td> 
:::<INPUT TYPE=HIDDEN NAME=opts VALUE="spec">
:::<INPUT TYPE=HIDDEN NAME=Fns VALUE="1">
:::<input type=hidden name="RM1CHILD1AGE" value="">
:::<input type=hidden name="RM1CHILD2AGE" value="">
:::<input type=hidden name="RM1CHILD3AGE" value="">
:::<input type=hidden name="RM1CHILD4AGE" value="">:::
:::<input type=hidden name="RM1CHILD5AGE" value="">
:::<input type=hidden name="RM1CHILD6AGE" value="">
::</td>
::<td align=right>
:::<input type=Submit name=Search value="Search" class=bungreenGoBtn>
::</td>...
:</table>
:</form>

=== [http://www.alistapart.com/articles/prettyaccessibleforms/ A list apart] ===
Forms marked up with (un)ordered lists:

<pre>
<fieldset>
<legend>Delivery Details</legend>
<ol>
<li>
<label for="name">Name<em>*</em></label>
<input id="name" />
</li>
<li>
<label for="address1">Address<em>*</em></label>
<input id="address1" />
</li>
<li>
<label for="address2">Address 2</label>
<input id="address2" />
</li>
<li>
<label for="town-city">Town/City</label>
<input id="town-city" />
</li>
<li>
<label for="county">County<em>*</em></label>
<input id="county" />
</li>
<li>
<label for="postcode">Postcode<em>*</em></label>
<input id="postcode" />
</li>
<li>
<fieldset>
<legend>Is this address also your invoice address?<em>*</em></legend>
<label><input type="radio" name="invoice-address" /> Yes</label>
<label><input type="radio" name="invoice-address" /> No</label>
</fieldset>
</li>
</ol>
</fieldset>
</pre>

== Real-World Tunneling Examples ==

Note that HTML forms currently only allow POST and GET (for odd historic reasons, which probably ought to be fixed). Still, websites have evolved ways to accomplish the equivalent of PUT and DELETE. This section documents examples of such.

=== Ruby on Rails (default Scaffold) ===
<td><a href="/users/show/10">Show</a></td>
<td><a href="/users/edit/10">Edit</a></td>
<td><a href="/users/destroy/10" onclick="return confirm('Are you sure?');">Destroy</a></td>

=== Amazon (Shopping Cart) ===
<span class="tiny">Make any changes below?</span>
<input type="image" src="http://g-images.amazon.com/images/G/01/x-locale/common/buttons/update-t-sm.gif"
width="55" alt="Update" value="Update" name="update" height="16" border="0" />
<input type="image" src="http://g-images.amazon.com/images/G/01/x-locale/shopping-cart/save-for-later.gif"
width="75" alt="Save for Later" value="Save for Later" name="saveForLater.1" height="14" border="0" />
<input type="image" src="http://g-images.amazon.com/images/G/01/x-locale/shopping-cart/delete.gif"
width="44" alt="Delete" value="Delete" name="delete.1" height="14" border="0" /></td>

=== Blogger (Edit Posts) ===
<td class="author"><span> Ernest </span></td>
<td class="link"><span class="">
<a href="http://chitheory.blogspot.com/" target="_new"> View </a>
</span></td>
<td class="weaklink"> <span><a href="/delete-post.g?blogID=3470364&postID=93557990"> Delete </a></span>

== Existing Practices ==
(first guess)
* Everybody seems to use tables, not labels
** Standards-oriented web designers are moving away from tables
* Common tags are:
** label: for
** form: name, method, action
** input: type, name, maxlength, value [size, botid, href, target, dp]
** select: name, onChange
** option: value
** fieldset
** legend

== Proposal ==

See [[rest/forms-brainstorming]]

* Why so much type=hidden?

== See Also ==
* [http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_sformsmodule XHTML Basic Forms Module] ([http://www.w3.org/TR/2001/REC-xhtml-modularization-20010410/dtd_module_defs.html#a_module_Basic_Forms DTD])
* [http://www.w3.org/TR/REC-html40/interact/forms.html HTML 4.0 Forms]
* [http://www.w3.org/MarkUp/Forms/ Xforms]
* [http://www.w3schools.com/html/html_forms.asp Forms and input]
* [http://www.wdvl.com/Authoring/HTML/4/Example.html HTML 4 Forms Example]
* [http://simpletest.sourceforge.net/SimpleTest/tutorial_Browser.pkg.html PHP form scripting]
* [[rest-examples]]

rest/forms-examples

2006-11-10T07:13:28Z

SanderMarechal: /* A list apart */

= Forms Examples =
As the first stage of the microformats [[process]], this page collects [[examples]] of best/common practice for annotating HTML [http://www.w3.org/TR/REC-html40/interact/forms.html form] to describe input data.

== The Problem ==
The vast majority of websites use some kind of forms to receive input -- far more than provide any kind of web services. Currently, people who want to call into those websites need to manually screen-scape and generate [http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.13.4.1 urlencoded], or (worse) MIME [http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.13.4.2 multipart].

The purpose of this exploration is to determine if there is any consistent design patterns used by forms and/or semantic tagging that would allow automatic extraction of the information needed to generate HTML input.

== Participants ==
* [http://www.opendarwin.org/~drernie/ Dr. Ernie]

== Real-World Forms Examples ==

=== [http://www.wdvl.com/Authoring/HTML/4/Example.html WDVL Example] ===

<FORM Action="">
<TABLE Border = "2" frame="hsides" rules="groups" cellpadding=8>
<COLGROUP align="right">
<COLGROUP align="center">
<COLGROUP align="left">
<THEAD valign="top">
<TR>
<TH class="Head"> Label </TH> <TH class="Head"> Control </TH>
<TH class="Head"> Access </TH>
</TR>
<TBODY>
<TR>
<TH class="Info"> <LABEL for="fname" accesskey="A">First Name: </LABEL> </TH>
<TD class="Info"> <INPUT type="text" name="firstname" id="fname"> </TD>
<TD class="Info"> A </TD>
</TR>
<TR>
<TH class="Info"> <LABEL for="lname" accesskey="B">Last Name: </LABEL> </TH>
<TD class="Info"> <INPUT type="text" name="lastname" id="lname"> </TD>
<TD class="Info"> B </TD>
</TR>
<TR>
<TH class="Info" rowspan=2> Sex: </TH>
<TD class="Info">
<LABEL for="F" accesskey="F"> Female: </LABEL>
<INPUT type="radio" name="sex" value="FeMale" id="F"> </TD>
<TD class="Info"> F </TD>
</TR>
<TR>
<TD class="Info">
<LABEL for="M" accesskey="M"> Male: </LABEL>
<INPUT type="radio" name="sex" value="Male" id="M"> </TD>
<TD class="Info"> M </TD>
</TR>
<TBODY>
<TR>
<TH> <BUTTON name="submit" value="submit" type="submit">
<b>Send </b> <IMG src="/Icons/smile.gif" alt="Yes!"> </BUTTON>
</TH>
<TH> <BUTTON name="reset" type="reset">
<em>Reset </em> <IMG src="/Icons/mr_yuk.gif" alt="No!"> </BUTTON>
</TH>
</TR>
</TABLE>
</FORM>

=== [http://www.cs.tut.fi/~jkorpela/forms/tables.html Structuring (HTML2) Forms Using Tables] ===
<FORM METHOD="POST" ACTION="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
<TABLE BORDER="1">
<TR>
<TD>Your name </TD>
<TD>
<INPUT TYPE="TEXT" NAME="name" SIZE="20">
</TD>
</TR>
<TR>
<TD>Your E-mail address </TD>
<TD> <INPUT TYPE="TEXT" NAME="email" SIZE="25"> </TD>
</TR>
</TABLE>
<P> <INPUT TYPE="SUBMIT" VALUE="Submit" NAME="B1"> </P>
</FORM>

=== [http://www.w3schools.com/xforms/xforms_example.asp Xforms Tutorial] ===

<xforms>
<model>
<instance>
<person>
<fname/>
<lname/>
</person>
</instance>
<submission id="form1" method="get"
action="submit.asp"/>
</model>
<input ref="fname">
<label>First Name</label>
</input>
<input ref="lname">
<label>Last Name</label>
</input>
<submit submission="form1">
<label>Submit</label>
</submit>
</xforms>

=== [http://www.orbitz.com/ Orbitz] ===
:<form method="get" id="productNavMenu" action="">
::<div id="productNav" class="productNav">
::<div class="singleProduct">
::<ul>
:::<li><label for="airChoice"><input type="radio" name="product" id="airChoice" class="chk" botid="air" href="" target="" dp="" checked="checked" />Flight<span class="onlyFlag"> only</span></label></li>
:::<li><label for="htlChoice"><input type="radio" name="product" id="htlChoice" class="chk" botid="htl" href="" target="" dp="" />Hotel<span class="onlyFlag"> only</span></label></li>
:::<li><label for="carChoice"><input type="radio" name="product" id="carChoice" class="chk" botid="car" href="" target="" dp="" />Car<span class="onlyFlag"> only</span></label></li>
::</ul>
::</div>
::<div class="packageProduct">
::<ul>
:::<li><label for="aphChoice"><input type="radio" name="product" id="aphChoice" class="chk" botid="aph" href="" target="" dp="" />Flight + Hotel</label></li>
:::<li><label for="hpcChoice"><input type="radio" name="product" id="hpcChoice" class="chk" botid="hpc" href="" target="" dp="" />Hotel + Car</label></li>
::</ul>
::</div>
::<div class="promoBox">
:::<p><span></span>
:::<a href="/App/PackageSavingsInfo?popupsDisabled=false" onClick="return popUpGen('/App/PackageSavingsInfo?popupsDisabled=false','400','200');" > Book together and <span class="saveLabel">save</span> <span class="savings">$169</span></a>
:::<span class="note">on average</span></p>
::</div>
::</div>
:</form>

=== Canonical HTML 4 [http://www.w3.org/TR/REC-html40/interact/forms.html example] ===
:<FORM action="http://somesite.com/prog/adduser" method="post">
::<P>
::<LABEL for="firstname">First name: </LABEL>
:::<INPUT type="text" id="firstname"><BR>
::<LABEL for="lastname">Last name: </LABEL>
:::<INPUT type="text" id="lastname"><BR>
::<LABEL for="email">email: </LABEL>
:::<INPUT type="text" id="email"><BR>
:::<INPUT type="radio" name="sex" value="Male"> Male<BR>
:::<INPUT type="radio" name="sex" value="Female"> Female<BR>
:::<INPUT type="submit" value="Send"> <INPUT type="reset">
::</P>
:</FORM>

=== [http://www.google.com/ Google] ===
:<form action=/search name=f>
::<script>...</script>
::<table>...Web..Images..Groups..News..Froogle...</table>
::<table>
:::<input type=hidden name=hl value=en>
:::<input maxLength=256 size=55 name=q value=""><br>
:::<input type=submit value="Google Search" name=btnG>
:::<input type=submit value="I'm Feeling Lucky" name=btnI>
::</table>
:</form>

=== [http://www.expedia.com Expedia] ===
:<form name=FltWiz method=post action="MoreInfo.asp" style="margin-top:14;margin-bottom:0">
:<table ...>
::...
::<td>
:::<font face=Arial size=1 class=size11>Departing from:<br>
::::<input type=text name=Fcity1 class=buntext1 maxlength=100 value="">
:::</font>
::</td>...
::<td>
:::<select class=size11 name=Fday1 onChange="SetDay(1)">
::::<option value=1>1
:::</select>
::</td>...
::<td>
:::<select class=size11 name=Ftime1>
::::<option value=420>AM
::::<option selected value=720 selected>Noon
::::<option value=1020>PM
:::</select>
::</td>...
::<td> 
:::<INPUT TYPE=HIDDEN NAME=opts VALUE="spec">
:::<INPUT TYPE=HIDDEN NAME=Fns VALUE="1">
:::<input type=hidden name="RM1CHILD1AGE" value="">
:::<input type=hidden name="RM1CHILD2AGE" value="">
:::<input type=hidden name="RM1CHILD3AGE" value="">
:::<input type=hidden name="RM1CHILD4AGE" value="">:::
:::<input type=hidden name="RM1CHILD5AGE" value="">
:::<input type=hidden name="RM1CHILD6AGE" value="">
::</td>
::<td align=right>
:::<input type=Submit name=Search value="Search" class=bungreenGoBtn>
::</td>...
:</table>
:</form>

=== [http://www.alistapart.com/articles/prettyaccessibleforms/ A list apart] ===
Forms marked up with (un)ordered lists:

<pre>
<fieldset>
<legend>Delivery Details</legend>
<ol>
<li>
<label for="name">Name<em>*</em></label>
<input id="name" />
</li>
<li>
<label for="address1">Address<em>*</em></label>
<input id="address1" />
</li>
<li>
<label for="address2">Address 2</label>
<input id="address2" />
</li>
<li>
<label for="town-city">Town/City</label>
<input id="town-city" />
</li>
<li>
<label for="county">County<em>*</em></label>
<input id="county" />
</li>
<li>
<label for="postcode">Postcode<em>*</em></label>
<input id="postcode" />
</li>
<li>
<fieldset>
<legend>Is this address also your invoice address?<em>*</em></legend>
<label><input type="radio" name="invoice-address" /> Yes</label>
<label><input type="radio" name="invoice-address" /> No</label>
</fieldset>
</li>
</ol>
</fieldset>
</pre>

== Real-World Tunneling Examples ==

Note that HTML forms currently only allow POST and GET (for odd historic reasons, which probably ought to be fixed). Still, websites have evolved ways to accomplish the equivalent of PUT and DELETE. This section documents examples of such.

=== Ruby on Rails (default Scaffold) ===
<td><a href="/users/show/10">Show</a></td>
<td><a href="/users/edit/10">Edit</a></td>
<td><a href="/users/destroy/10" onclick="return confirm('Are you sure?');">Destroy</a></td>

=== Amazon (Shopping Cart) ===
<span class="tiny">Make any changes below?</span>
<input type="image" src="http://g-images.amazon.com/images/G/01/x-locale/common/buttons/update-t-sm.gif"
width="55" alt="Update" value="Update" name="update" height="16" border="0" />
<input type="image" src="http://g-images.amazon.com/images/G/01/x-locale/shopping-cart/save-for-later.gif"
width="75" alt="Save for Later" value="Save for Later" name="saveForLater.1" height="14" border="0" />
<input type="image" src="http://g-images.amazon.com/images/G/01/x-locale/shopping-cart/delete.gif"
width="44" alt="Delete" value="Delete" name="delete.1" height="14" border="0" /></td>

=== Blogger (Edit Posts) ===
<td class="author"><span> Ernest </span></td>
<td class="link"><span class="">
<a href="http://chitheory.blogspot.com/" target="_new"> View </a>
</span></td>
<td class="weaklink"> <span><a href="/delete-post.g?blogID=3470364&postID=93557990"> Delete </a></span>

== Existing Practices ==
(first guess)
* Everybody seems to use tables, not labels
* Common tags are:
** label: for
** form: name, method, action
** input: type, name, maxlength, value [size, botid, href, target, dp]
** select: name, onChange
** option: value

== Proposal ==

See [[rest/forms-brainstorming]]

* Why so much type=hidden?

== See Also ==
* [http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_sformsmodule XHTML Basic Forms Module] ([http://www.w3.org/TR/2001/REC-xhtml-modularization-20010410/dtd_module_defs.html#a_module_Basic_Forms DTD])
* [http://www.w3.org/TR/REC-html40/interact/forms.html HTML 4.0 Forms]
* [http://www.w3.org/MarkUp/Forms/ Xforms]
* [http://www.w3schools.com/html/html_forms.asp Forms and input]
* [http://www.wdvl.com/Authoring/HTML/4/Example.html HTML 4 Forms Example]
* [http://simpletest.sourceforge.net/SimpleTest/tutorial_Browser.pkg.html PHP form scripting]
* [[rest-examples]]