rest/forms-examples

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

• Dr. Ernie

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=""
    width="55" alt="Update" value="Update" name="update" height="16" border="0" />
 <input type="image" src=""
    width="75" alt="Save for Later" value="Save for Later" name="saveForLater.1" height="14" border="0" />
 <input type="image" src=""
    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

• XHTML Basic Forms Module (DTD)
• HTML 4.0 Forms
• Xforms
• Forms and input
• HTML 4 Forms Example
• PHP form scripting
• rest-examples