rest/forms-examples-fr: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
m (Reverted edit of BkdRgz, changed back to last version by ChristopheDucamp)
mNo edit summary
Line 14: Line 14:


=== [http://www.wdvl.com/Authoring/HTML/4/Example.html Exemple WDVL] ===
=== [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">
:&lt;table ...>
::...
::&lt;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>&nbsp;
:::<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>...
:&lt;/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) ===
    &lt;td>&lt;a href="/users/show/10">Show&lt;/a>&lt;/td>
    &lt;td>&lt;a href="/users/edit/10">Edit&lt;/a>&lt;/td>
    &lt;td>&lt;a href="/users/destroy/10" onclick="return confirm('Are you sure?');">Destroy&lt;/a>&lt;/td>
=== Amazon (Shopping Cart) ===
  &lt;span class="tiny">Make any changes below?&lt;/span>
  &lt;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" />
  &lt;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" />
  &lt;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" />&lt;/td>
=== Blogger (Edit Posts) ===
&lt;td class="author">&lt;span> Ernest &lt;/span>&lt;/td>
&lt;td class="link">&lt;span class="">
  &lt;a href="http://chitheory.blogspot.com/" target="_new"> View &lt;/a>
&lt;/span>&lt;/td>
&lt;td class="weaklink">  &lt;span>&lt;a href="/delete-post.g?blogID=3470364&amp;postID=93557990"> Delete &lt;/a>&lt;/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]]

Revision as of 22:36, 7 June 2007

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

(traduction en cours Christophe Ducamp

Exemples en provenance du Vrai Monde

Exemple WDVL

Retrieved from "http://microformats.org/wiki/index.php?title=rest/forms-examples-fr&oldid=17255"