Difference between revisions of "rest/forms-examples"

From Microformats Wiki
Jump to navigation Jump to search
Line 185: Line 185:
== See Also ==  
== See Also ==  
* [http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_sformsmodule XHTML Basic Forms Module]
* [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]
* [http://www.w3.org/MarkUp/Forms/ Xforms]

Revision as of 18:23, 11 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.


Real-World Examples

Structuring (HTML2) Forms Using Tables

<FORM METHOD="POST" ACTION="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
    <TD>Your name </TD>
      <INPUT TYPE="TEXT" NAME="name" SIZE="20">
    <TD>Your E-mail address </TD>
    <TD> <INPUT TYPE="TEXT" NAME="email" SIZE="25"> </TD>

Xforms Tutorial

 <submission id="form1" method="get"
<input ref="fname">
 <label>First Name</label>
<input ref="lname">
 <label>Last Name</label>
<submit submission="form1">


<form method="get" id="productNavMenu" action="">
<div id="productNav" class="productNav">
<div class="singleProduct">
<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>
<div class="packageProduct">
<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>
<div class="promoBox">
<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>

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 action=/search name=f>
<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 name=FltWiz method=post action="MoreInfo.asp" style="margin-top:14;margin-bottom:0">
<table ...>
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 class=size11 name=Ftime1>
<option value=420>AM
<option selected value=720 selected>Noon
<option value=1020>PM
<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>

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


  • Best design pattern so far:
<FORM action="http://somesite.com/prog/adduser" method="post">
<table class="form">
 <td><LABEL for="firstname">First name:</LABEL></td>
 <td><INPUT type="text" id="firstname"></td>
 <td><LABEL for="lastname">Last name:</LABEL></td>
 <td><INPUT type="text" id="lastname"></td>
 <td><LABEL for="email">Email:</LABEL></td>
 <td><INPUT type="text" id="email"></td>
 <td><LABEL for="sex">Sex:</LABEL></td>
   <INPUT type="radio" name="sex" value="Male">Male </input>
   <INPUT type="radio" name="sex" value="Female">Female </input>
 <td><LABEL for="age">Age:</LABEL></td>
    <option val=0>< 18 </option>
    <option val=18>18-64 </option>
    <option val=65>65+ </option>
<INPUT type="submit" value="Send">  <INPUT type="reset">
  • Why so much type=hidden?

See Also