Difference between revisions of "rest/forms-examples"
Jump to navigation
Jump to search
<label ...>
<input ...>
(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> | ||
+ | <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 | + | * 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
Contents
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
- Canonical HTML 4 example:
- <FORM action="http://somesite.com/prog/adduser" method="post">
- <LABEL for="firstname">First name: </LABEL>
- <INPUT type="text" id="firstname">
- <INPUT type="text" id="firstname">
- <LABEL for="lastname">Last name: </LABEL>
- <INPUT type="text" id="lastname">
- <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">
- <INPUT type="text" id="email">
- </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>
- <input type=hidden name=hl value=en><input maxLength=256 size=55 name=q value="">
- </form>
<form name=FltWiz method=post action="MoreInfo.asp" style="margin-top:14;margin-bottom:0">... ... ... ... ...
Departing from: |
<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: