rest/forms-examples: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
 
(17 intermediate revisions by 2 users not shown)
Line 10: Line 10:
* [http://www.opendarwin.org/~drernie/ Dr. Ernie]
* [http://www.opendarwin.org/~drernie/ Dr. Ernie]


== Real-World Examples ==
== 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] ===
=== [http://www.cs.tut.fi/~jkorpela/forms/tables.html Structuring (HTML2) Forms Using Tables] ===
Line 140: Line 188:
:</table>
:</table>
:</form>
:</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) ===
    &lt;td>&lt;a href="/users/show/10">Show&lt;/a>&lt;/td>
    &lt;td>&lt;a href="/users/edit/10">Edit&lt;/a>&lt;/td>
    &lt;td>&lt;a href="/users/destroy/10" onclick="return confirm('Are you sure?');">Destroy&lt;/a>&lt;/td>
=== Amazon (Shopping Cart) ===
  &lt;span class="tiny">Make any changes below?&lt;/span>
  &lt;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" />
  &lt;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" />
  &lt;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" />&lt;/td>
=== Blogger (Edit Posts) ===
&lt;td class="author">&lt;span> Ernest &lt;/span>&lt;/td>
&lt;td class="link">&lt;span class="">
  &lt;a href="http://chitheory.blogspot.com/" target="_new"> View &lt;/a>
&lt;/span>&lt;/td>
&lt;td class="weaklink">  &lt;span>&lt;a href="/delete-post.g?blogID=3470364&amp;postID=93557990"> Delete &lt;/a>&lt;/span>


== Existing Practices ==  
== Existing Practices ==  
(first guess)
(first guess)
* Everybody seems to use tables, not labels
* Everybody seems to use tables, not labels
** Standards-oriented web designers are moving away from tables
* Common tags are:  
* Common tags are:  
** label: for
** label: for
Line 150: Line 266:
** select: name, onChange
** select: name, onChange
** option: value
** option: value
** fieldset
** legend


== Proposal ==  
== Proposal ==  
* Best design pattern so far:
 
&lt;FORM action="http://somesite.com/prog/adduser" method="post">
See [[rest/forms-brainstorming]]
&lt;table class="form">
&lt;tr>
  &lt;td>&lt;LABEL for="firstname">First name:&lt;/LABEL>&lt;/td>
  &lt;td>&lt;INPUT type="text" id="firstname">&lt;/td>
&lt;/tr>&lt;tr>
  &lt;td>&lt;LABEL for="lastname">Last name:&lt;/LABEL>&lt;/td>
  &lt;td>&lt;INPUT type="text" id="lastname">&lt;/td>
&lt;/tr>&lt;tr>
  &lt;td>&lt;LABEL for="email">Email:&lt;/LABEL>&lt;/td>
  &lt;td>&lt;INPUT type="text" id="email">&lt;/td>
&lt;/tr>&lt;tr>
  &lt;td>&lt;LABEL for="sex">Sex:&lt;/LABEL>&lt;/td>
  &lt;td>
    &lt;INPUT type="radio" name="sex" value="Male">Male &lt;/input>
    &lt;INPUT type="radio" name="sex" value="Female">Female &lt;/input>
  &lt;/td>
&lt;/tr>&lt;tr>
  &lt;td>&lt;LABEL for="age">Age:&lt;/LABEL>&lt;/td>
  &lt;td>&lt;select>
    &lt;option val=0>&lt; 18 &lt;/option>
    &lt;option val=18>18-64 &lt;/option>
    &lt;option val=65>65+ &lt;/option>
  &lt;/td>&lt;/select>
&lt;/tr>
&lt;/table>
&lt;INPUT type="submit" value="Send">  &lt;INPUT type="reset">
&lt;/FORM>


* Why so much type=hidden?
* Why so much type=hidden?


== See Also ==  
== 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/TR/REC-html40/interact/forms.html HTML 4.0 Forms]
* [http://www.w3.org/MarkUp/Forms/ Xforms]
* [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]]

Latest revision as of 07:23, 10 November 2006

Forms Examples

As the first stage of the microformats process, this page collects examples of best/common practice for annotating 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 urlencoded, or (worse) MIME 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

Real-World Forms Examples

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>

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>

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>

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 example

<FORM action="http://somesite.com/prog/adduser" method="post">

<LABEL for="firstname">First name: </LABEL>
<INPUT type="text" id="firstname">
<LABEL for="lastname">Last name: </LABEL>
<INPUT type="text" id="lastname">
<LABEL for="email">email: </LABEL>
<INPUT type="text" id="email">
<INPUT type="radio" name="sex" value="Male"> Male
<INPUT type="radio" name="sex" value="Female"> Female
<INPUT type="submit" value="Send"> <INPUT type="reset">

</FORM>

Google

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

Expedia

<form name=FltWiz method=post action="MoreInfo.asp" style="margin-top:14;margin-bottom:0">
<table ...>
...
<td>
Departing from:
<input type=text name=Fcity1 class=buntext1 maxlength=100 value="">
...
<select class=size11 name=Fday1 onChange="SetDay(1)">
<option value=1>1
</select>
...
<select class=size11 name=Ftime1>
<option value=420>AM
<option selected value=720 selected>Noon
<option value=1020>PM
</select>
...
 
<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="">
<input type=Submit name=Search value="Search" class=bungreenGoBtn>
...
</table>
</form>

A list apart

Forms marked up with (un)ordered lists:

<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>

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="update-t-sm.gif"
    width="55" alt="Update" value="Update" name="update" height="16" border="0" />
 <input type="image" src="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="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