Difference between revisions of "rest/forms-examples"

From Microformats Wiki
Jump to navigation Jump to search
(data)
Line 3: Line 3:
  
 
== The Problem ==
 
== 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 ==
 
== Participants ==
Line 9: Line 11:
  
 
== Real-World Examples ==
 
== Real-World Examples ==
 +
* 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>&nbsp;
 +
    <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>
  
 
== Existing Practices ==  
 
== Existing Practices ==  
  
== Proposal (N/A) ==  
+
* Everybody seems to use tables, not labels
 +
 
 +
== Proposal ==  
 +
* Is the optimal design pattern:
 +
<dt><label ...></dt>
 +
  <dd><input ...></dd>
  
 
== See Also ==  
 
== See Also ==  
 
* [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]

Revision as of 22:19, 6 October 2005

Forms Examples

As the first stage of the microformats The microformats process, this page collects Best Practices for Examples Pages 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 Examples

<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>
<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>
<form name=FltWiz method=post action="MoreInfo.asp" style="margin-top:14;margin-bottom:0">
... ... ... ... ...
  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>
</form>

Existing Practices

  • Everybody seems to use tables, not labels

Proposal

  • Is the optimal design pattern:
<label ...>
<input ...>

See Also