rest/forms-examples: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
Line 11: Line 11:


== Real-World Examples ==
== Real-World Examples ==
* Canonical HTML 4 [http://www.w3.org/TR/REC-html40/interact/forms.html example]:
=== Canonical HTML 4 [http://www.w3.org/TR/REC-html40/interact/forms.html example] ===
:<FORM action="http://somesite.com/prog/adduser" method="post">
:<FORM action="http://somesite.com/prog/adduser" method="post">
::<P>
::<P>
Line 26: Line 26:
:</FORM>
:</FORM>


* [http://www.google.com/ Google]
=== [http://www.google.com/ Google] ===
:<form action=/search name=f>
:<form action=/search name=f>
::<script>...</script>
::<script>...</script>
Line 37: Line 37:
:</form>
:</form>


* [http://www.expedia.com Expedia]
=== [http://www.expedia.com Expedia] ===
:<form name=FltWiz method=post action="MoreInfo.asp" style="margin-top:14;margin-bottom:0">
:<form name=FltWiz method=post action="MoreInfo.asp" style="margin-top:14;margin-bottom:0">
:&lt;table ...>
:&lt;table ...>

Revision as of 22:28, 6 October 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 Examples

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:
    • form: name, method, action
    • input: type, name, maxlength, value
    • select: name, onChange
    • option: value

Proposal

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

See Also