rest/forms-examples-fr

2008-12-19T21:08:00Z

DarerRiccc: trocgetroliv

erracrelget
= Exemples de Formulaires=
Au titre de la premiÃ¨re Ã©tape du [[process-fr|processus]] des microformats, cette page rassemble des [[examples-fr|exemples]] et meilleures/communes pratiques pour annoter les [http://www.w3.org/TR/REC-html40/interact/forms.html formulaires] HTML afin de 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" manuels et de gÃ©nÃ©rer manuellement [http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.13.4.1 de l'url encodÃ©e] ou (pire) du MIME [http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.13.4.2 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 ==
* [http://www.opendarwin.org/~drernie/ Dr. Ernie]
(traduction en cours [[Christophe Ducamp]]

== Exemples en provenance du Vrai Monde ==

=== [http://www.wdvl.com/Authoring/HTML/4/Example.html 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>

=== [http://www.cs.tut.fi/~jkorpela/forms/tables.html 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>

=== [http://www.w3schools.com/xforms/xforms_example.asp 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>

=== [http://www.orbitz.com/ 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 [http://www.w3.org/TR/REC-html40/interact/forms.html exemple] ===
:<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>

== 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="http://g-images.amazon.com/images/G/01/x-locale/common/buttons/update-t-sm.gif"
width="55" alt="Update" value="Update" name="update" height="16" border="0" />
<input type="image" src="http://g-images.amazon.com/images/G/01/x-locale/shopping-cart/save-for-later.gif"
width="75" alt="Save for Later" value="Save for Later" name="saveForLater.1" height="14" border="0" />
<input type="image" src="http://g-images.amazon.com/images/G/01/x-locale/shopping-cart/delete.gif"
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-fr|rest/forms-brainstorming]]

* Pourquoi tant de type=hidden?

== Voir aussi ==
* [http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_sformsmodule XHTML Basic Forms Module] ([http://www.w3.org/TR/2001/REC-xhtml-modularization-20010410/dtd_module_defs.html#a_module_Basic_Forms DTD])
* [http://www.la-grange.net/w3c/html4.01/interact/forms.html HTML 4.0 Formulaires] (fr)
* [http://www.w3.org/MarkUp/Forms/ Xforms]
* [http://www.w3schools.com/html/html_forms.asp Forms and input]
* [http://www.wdvl.com/Authoring/HTML/4/Example.html HTML 4 Forms Example]
* [http://simpletest.sourceforge.net/SimpleTest/tutorial_Browser.pkg.html PHP form scripting]
* [[rest-examples-fr|exemples-rest]]

Microformats Wiki - User contributions [en]

rest/forms-examples-fr