Difference between revisions of "rest/forms-brainstorming"

From Microformats Wiki
Jump to navigation Jump to search
(→‎Forms Brainstorming: removed older examples)
Line 22: Line 22:
 
  <a class="deth" href="http//somesite.com/prog/adduser">label</a>
 
  <a class="deth" href="http//somesite.com/prog/adduser">label</a>
  
=== Complete Forms Design Pattern ===
+
=== Forms Design Pattern ===
  
 
  <form class="deth" action="http://somesite.com/users" method="post">
 
  <form class="deth" action="http://somesite.com/users" method="post">
Line 46: Line 46:
 
   <label for="description">Description:</label>
 
   <label for="description">Description:</label>
 
   <textarea id="description">Default text</textarea>
 
   <textarea id="description">Default text</textarea>
</li>
 
</ol>
 
<input type="submit" value="Send" />
 
<input type="reset" />
 
</form>
 
 
=== Table Design Pattern ===
 
 
<form class="deth" action="http//somesite.com/users" 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/users" 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>
 
  </li>
 
  </ol>
 
  </ol>

Revision as of 04:06, 12 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. Must use action with appropriate URI (no scripts)
  3. Recommend: use a label with every input
  4. Make the for of the label match the id of input
  5. Optionally, group label with input using or <li>
    1. If <li>, group input inside label
    2. If , place label in first , and input in second.
  6. Always place submit and reset outside grouping

Patterns

Anchor Design Pattern

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

Forms Design Pattern

<form class="deth" action="http://somesite.com/users" method="post">
 <ol>
 <li>
  <label for="firstname">First name:</label><input type="text" id="firstname" />
</li><li>
   <label for="lastname">Last name:</label><input type="text" id="lastname" />
</li><li>
  <input type="radio" name="sex" value="male">Male</input>
  <input type="radio" name="sex" value="female">Female</input>
</li><li>
  <input type="checkbox" name="travel" value="car">Car</input>
  <input type="checkbox" name="travel" value="bike">Bicycle</input>
</li><li>
 <label for="age">Age:
 <select>
   <option val=0>< 18</option>
   <option val=18>18-64</option>
   <option val=65>65+</option>
</select>
</li><li>
 <label for="description">Description:</label>
 <textarea id="description">Default text</textarea>
</li>
</ol>
<input type="submit" value="Send" />
<input type="reset" />
</form>