rest/forms-brainstorming

From Microformats Wiki
Revision as of 03:58, 12 October 2005 by DrErnie (talk | contribs) (→‎Patterns: better)
Jump to navigation Jump to search

Forms Brainstorming

This page collects ideas from 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>

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

  • <label for="lastname">Last name:</label><input type="text" id="lastname" /> </li>
  • <input type="radio" name="sex" value="male">Male</input> <input type="radio" name="sex" value="female">Female</input> </li>
  • <input type="checkbox" name="travel" value="car">Car</input> <input type="checkbox" name="travel" value="bike">Bicycle</input> </li>
  • <label for="age">Age: <select> <option val=0>< 18</option> <option val=18>18-64</option> <option val=65>65+</option> </select> </li>
  • <label for="description">Description:</label> <textarea id="description">Default text</textarea> </li> </ol> <input type="submit" value="Send" /> <input type="reset" /> </form> </body> </html>

    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>
    </ol>
    <input type="submit" value="Send" />
    <input type="reset" />
    </form>