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

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