rest/forms-examples

From Microformats Wiki
Jump to navigation Jump to search

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