rest/forms-examples: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
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] ===
=== [http://www.wdvl.com/Authoring/HTML/4/Example.html WDVL Example] ===
Line 188: Line 188:
:</table>
:</table>
:</form>
:</form>
== 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.
=== Rails ===


== Existing Practices ==  
== Existing Practices ==  

Revision as of 21:02, 7 November 2005

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>

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.

Rails

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