Difference between revisions of "rest/forms-brainstorming"

From Microformats Wiki
Jump to navigation Jump to search
Line 3: Line 3:
 
This page collects ideas from [[forms-examples]] how to best encode form data into a microformat
 
This page collects ideas from [[forms-examples]] how to best encode form data into a microformat
  
== Best design pattern so far ==
 
 
DETH = Dictionaries Encoding/Transmitting HTML
 
DETH = Dictionaries Encoding/Transmitting HTML
  
&lt;a class="deth" href="http://somesite.com/prog/adduser">label</a>
+
== Table Design Pattern ==
  
  &lt;form class="deth" action="http://somesite.com/prog/adduser" method="post">
+
&lt;a class="deth" href="http//somesite.com/prog/adduser">label&lt;/a>
  &lt;table>
+
 
 +
  &lt;form class="deth" action="http//somesite.com/prog/adduser" method="post">
 +
  &lt;table class="form">
 
  &lt;tr>
 
  &lt;tr>
   &lt;td>&lt;label for="firstname">First name:&lt;/label>&lt;/td>
+
   &lt;td>&lt;label for="firstname">First name&lt;/label>&lt;/td>
 
   &lt;td>&lt;input type="text" id="firstname">&lt;/td>
 
   &lt;td>&lt;input type="text" id="firstname">&lt;/td>
 
  &lt;/tr>&lt;tr>
 
  &lt;/tr>&lt;tr>
   &lt;td>&lt;label for="lastname">Last name:&lt;/label>&lt;/td>
+
   &lt;td>&lt;label for="lastname">Last name&lt;/label>&lt;/td>
 
   &lt;td>&lt;input type="text" id="lastname">&lt;/td>
 
   &lt;td>&lt;input type="text" id="lastname">&lt;/td>
 
  &lt;/tr>&lt;tr>
 
  &lt;/tr>&lt;tr>
   &lt;td>&lt;label for="email">Email:&lt;/label>&lt;/td>
+
   &lt;td>&lt;label for="email">Email&lt;/label>&lt;/td>
 
   &lt;td>&lt;input type="text" id="email">&lt;/td>
 
   &lt;td>&lt;input type="text" id="email">&lt;/td>
 
  &lt;/tr>&lt;tr>
 
  &lt;/tr>&lt;tr>
   &lt;td>&lt;label for="sex">Sex:&lt;/label>&lt;/td>
+
   &lt;td>&lt;label for="sex">Sex&lt;/label>&lt;/td>
 
   &lt;td>
 
   &lt;td>
 
     &lt;input type="radio" name="sex" value="Male">Male &lt;/input>
 
     &lt;input type="radio" name="sex" value="Male">Male &lt;/input>
Line 26: Line 27:
 
   &lt;/td>
 
   &lt;/td>
 
  &lt;/tr>&lt;tr>
 
  &lt;/tr>&lt;tr>
   &lt;td>&lt;label for="age">Age:&lt;/label>&lt;/td>
+
  &lt;td>&lt;label for="travel">Travel&lt;/label>&lt;/td>
 +
  &lt;td>
 +
    &lt;input type="checkbox" name="travel" value="car">Car&lt;/input>
 +
    &lt;input type="checkbox" name="travel" value="bike">Bicycle&lt;/input>
 +
  &lt;/td>
 +
&lt;/tr>&lt;tr>
 +
   &lt;td>&lt;label for="age">Age&lt;/label>&lt;/td>
 
   &lt;td>&lt;select>
 
   &lt;td>&lt;select>
 
     &lt;option val=0>&lt; 18 &lt;/option>
 
     &lt;option val=0>&lt; 18 &lt;/option>
Line 34: Line 41:
 
  &lt;/tr>
 
  &lt;/tr>
 
  &lt;/table>
 
  &lt;/table>
  &lt;input type="submit" value="Send" />
+
  &lt;input type="submit" value="Send">  &lt;input type="reset">
  &lt;input type="reset" />
 
 
  &lt;/form>
 
  &lt;/form>

Revision as of 21:25, 11 October 2005

Forms Brainstorming

This page collects ideas from rest/forms-examples how to best encode form data into a microformat

DETH = Dictionaries Encoding/Transmitting HTML

Table Design Pattern

<a class="deth" href="http//somesite.com/prog/adduser">label</a>
<form class="deth" action="http//somesite.com/prog/adduser" method="post">
<table class="form">
<tr>
 <td><label for="firstname">First name</label></td>
 <td><input type="text" id="firstname"></td>
</tr><tr>
 <td><label for="lastname">Last name</label></td>
 <td><input type="text" id="lastname"></td>
</tr><tr>
 <td><label for="email">Email</label></td>
 <td><input type="text" id="email"></td>
</tr><tr>
 <td><label for="sex">Sex</label></td>
 <td>
   <input type="radio" name="sex" value="Male">Male </input>
   <input type="radio" name="sex" value="Female">Female </input>
 </td>
</tr><tr>
 <td><label for="travel">Travel</label></td>
 <td>
   <input type="checkbox" name="travel" value="car">Car</input>
   <input type="checkbox" name="travel" value="bike">Bicycle</input>
 </td>
</tr><tr>
 <td><label for="age">Age</label></td>
 <td><select>
    <option val=0>< 18 </option>
    <option val=18>18-64 </option>
    <option val=65>65+ </option>
 </td></select>
</tr>
</table>
<input type="submit" value="Send">  <input type="reset">
</form>