rest/forms-examples-fr

Exemples de Formulaires

Au titre de la première étape du processus des microformats, cette page rassemble des exemples est meilleures/communes pratiques pour annoter les formulaires HTML pour décrire des données en entrée de saisie.

Le Problème

La vaste majorité des sites web utilisent quelque forme de formulaires pour recevoir des entrées -- bien plus que pour fournir quelque type de services web. Actuellement, les personnes qui veulent appeler dans ces sites web ont besoin de "screen-scaper" manuellement et générer manuellement urlencoded, ou (pire) MIME multipart.

Le but de cette exploration est de déterminer s'il existe quelques modèles cohérents de conception utilisé par les formulaires et/ou le tag sémantique qui permettrait une extraction automatique de l'information exigée pour générer une entrée HTML.

Participants

• Dr. Ernie

(traduction en cours Christophe Ducamp

Exemples en provenance du Vrai Monde

Exemple WDVL

<FORM   Action="">
<TABLE    Border	= "2"	frame="hsides"	rules="groups" cellpadding=8>
    <COLGROUP align="right">
    <COLGROUP align="center">
    <COLGROUP align="left">
<THEAD valign="top">
  <TR>
    <TH class="Head">	Label	 </TH> <TH class="Head">	Control	 </TH>
    <TH class="Head">	Access	 </TH>
  </TR>
<TBODY>
  <TR>
    <TH class="Info">     <LABEL for="fname" accesskey="A">First Name:	 </LABEL>	 </TH>
    <TD class="Info">     <INPUT type="text" name="firstname" id="fname"> </TD>
    <TD class="Info">    A	 </TD>
  </TR>
  <TR>
    <TH class="Info">	 <LABEL for="lname" accesskey="B">Last Name:	 </LABEL>	 </TH>
    <TD class="Info">	 <INPUT type="text" name="lastname" id="lname">	 </TD>
    <TD class="Info">    B	 </TD>
  </TR>
  <TR>
    <TH class="Info" rowspan=2>	Sex:	 </TH>
    <TD class="Info">
        <LABEL for="F" accesskey="F">	Female:	 </LABEL>
   	 <INPUT type="radio" name="sex" value="FeMale" id="F"> 	 </TD>
    <TD class="Info">    F	 </TD>
  </TR>
  <TR>
    <TD class="Info"> 
        <LABEL for="M" accesskey="M">	Male:	 </LABEL>
   	 <INPUT type="radio" name="sex" value="Male" id="M">	 </TD>
    <TD class="Info">    M	 </TD>
  </TR>
<TBODY>
  <TR>
    <TH>	 <BUTTON name="submit" value="submit" type="submit">
    <b>Send </b>	 <IMG src="/Icons/smile.gif" alt="Yes!"> </BUTTON>
    </TH>
    <TH>	 <BUTTON name="reset" type="reset">
    <em>Reset </em>	 <IMG src="/Icons/mr_yuk.gif" alt="No!"> </BUTTON>
    </TH>
  </TR>
</TABLE>
</FORM>

Formulaires Structurant (HTML2) utilisant des Tables

<FORM METHOD="POST" ACTION="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
<TABLE BORDER="1">
  <TR>
    <TD>Your name </TD>
    <TD>
      <INPUT TYPE="TEXT" NAME="name" SIZE="20">
    </TD>
  </TR>
  <TR>
    <TD>Votre adresse email </TD>
    <TD> <INPUT TYPE="TEXT" NAME="email" SIZE="25"> </TD>
  </TR>
</TABLE>
<P> <INPUT TYPE="SUBMIT" VALUE="Submit" NAME="B1"> </P>
</FORM>

Tutoriels Xforms

<xforms>
<model>
 <instance>
  <person>
   <fname/>
   <lname/>
  </person>
 </instance>
 <submission id="form1" method="get"
 action="submit.asp"/>
</model>
<input ref="fname">
 <label>First Name</label>
</input>
<input ref="lname">
 <label>Last Name</label>
 </input>
<submit submission="form1">
 <label>Submit</label>
 </submit>
</xforms>

Orbitz

<form method="get" id="productNavMenu" action="">

<div id="productNav" class="productNav">

<div class="singleProduct">

<ul>

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

</ul>

</div>

<div class="packageProduct">

<ul>

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

</ul>

</div>

<div class="promoBox">

<p><span></span>

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

</div>

</div>

</form>

HTML 4 canonique exemple

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

Exemples de Tunnel du Vrai Monde

Remarquez que les formulaires HTML n'autorisent actuellement que POST et GET (pour des raisons historiques étranges, ce qui devraient probablement être réparé). Une fois de plus, les sites web ont fait évoluer des moyens d'accomplir l'équivalent de PUT et DELETE. Cette section documente de tels exemples.

Ruby on Rails (échafaudage par défaut)

   <td><a href="/users/show/10">Show</a></td>
   <td><a href="/users/edit/10">Edit</a></td>
   <td><a href="/users/destroy/10" onclick="return confirm('Are you sure?');">Destroy</a></td>

Amazon (Shopping Cart)

 <span class="tiny">Make any changes below?</span>
 <input type="image" src=""
    width="55" alt="Update" value="Update" name="update" height="16" border="0" />
 <input type="image" src=""
    width="75" alt="Save for Later" value="Save for Later" name="saveForLater.1" height="14" border="0" />
 <input type="image" src=""
    width="44" alt="Delete" value="Delete" name="delete.1" height="14" border="0" /></td>

Blogger (Edit Posts)

<td class="author"><span> Ernest </span></td>
<td class="link"><span class="">
  <a href="http://chitheory.blogspot.com/" target="_new"> View </a>
</span></td>
<td class="weaklink">  <span><a href="/delete-post.g?blogID=3470364&postID=93557990"> Delete </a></span>

Pratiques Existantes

(first guess)

• Tout le monde semble utiliser des tables, pas des étiquettes
• Les tags communs sont :
  • label: for
  • form: name, method, action
  • input: type, name, maxlength, value [size, botid, href, target, dp]
  • select: name, onChange
  • option: value

Proposition

Voir rest/forms-brainstorming

• Pourquoi tant de type=hidden?

Voir aussi

• XHTML Basic Forms Module (DTD)
• HTML 4.0 Formulaires (fr)
• Xforms
• Forms and input
• HTML 4 Forms Example
• PHP form scripting
• exemples-rest