Difference between revisions of "rest/forms-brainstorming"

From Microformats Wiki
Jump to navigation Jump to search
Line 5: Line 5:
 
DETH = Dictionaries Encoding/Transmitting HTML
 
DETH = Dictionaries Encoding/Transmitting HTML
  
== Anchor Design Pattern ==
+
== Rules (Strawman) ==
 +
 
 +
# Only use XHTML Basic Forms Module
 +
# Recommend: use a ''label'' with every ''input''
 +
# Make the ''for'' of the ''label'' match the ''id'' of ''input''
 +
# Optionally, group ''label'' with ''input'' using ''<tr>'' or ''<li>''
 +
**If ''<li>'', group ''input'' inside ''label''
 +
**If ''<tr>'', place ''label'' in first ''<td>'', and ''input'' in second.
 +
# Always place ''submit'' and ''reset'' outside grouping
 +
 
 +
== Patterns ==
 +
 
 +
=== Anchor Design Pattern ===
  
 
  &lt;a class="deth" href="http//somesite.com/prog/adduser">label&lt;/a>
 
  &lt;a class="deth" href="http//somesite.com/prog/adduser">label&lt;/a>
  
== Table Design Pattern ==
+
=== Table Design Pattern ===
  
 
  &lt;form class="deth" action="http//somesite.com/prog/adduser" method="post">
 
  &lt;form class="deth" action="http//somesite.com/prog/adduser" method="post">
Line 47: Line 59:
 
  &lt;/form>
 
  &lt;/form>
  
== List Design Pattern ==
+
=== List Design Pattern ===
  
 
  &lt;form class="deth" action="http//somesite.com/prog/adduser" method="post">
 
  &lt;form class="deth" action="http//somesite.com/prog/adduser" method="post">

Revision as of 21:37, 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

Rules (Strawman)

  1. Only use XHTML Basic Forms Module
  2. Recommend: use a label with every input
  3. Make the for of the label match the id of input
  4. Optionally, group label with input using or
    • If
    • , group input inside label
    • If , place label in first , and input in second.
  1. Always place submit and reset outside grouping

Patterns

Anchor Design Pattern

<a class="deth" href="http//somesite.com/prog/adduser">label</a>

Table Design Pattern

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

List Design Pattern

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