Difference between revisions of "rest/forms-brainstorming"

From Microformats Wiki
Jump to navigation Jump to search
Line 25: Line 25:
  
 
  <form class="deth" action="http://somesite.com/users" method="post">
 
  <form class="deth" action="http://somesite.com/users" method="post">
   <ol>
+
   <dl>
   <li>
+
   <dt><label for="firstname">First name:</label></dt>
  <label for="firstname">First name:</label><input type="text" id="firstname" />
+
  <dd><input type="text" id="firstname" />
  </li><li>
+
  </dd><dt>
     <label for="lastname">Last name:</label><input type="text" id="lastname" />
+
     <label for="lastname">Last name:</label></dt>
  </li><li>
+
  <dd><input type="text" id="lastname" />
   <input type="radio" name="sex" value="male">Male</input>
+
  </dd><dt>Sex</dt>
 +
   <dd><input type="radio" name="sex" value="male">Male</input>
 
   <input type="radio" name="sex" value="female">Female</input>
 
   <input type="radio" name="sex" value="female">Female</input>
  </li><li>
+
  </dd><dt>Travel</dt>
   <input type="checkbox" name="travel" value="car">Car</input>
+
   <dd>  <input type="checkbox" name="travel" value="car">Car</input>
 
   <input type="checkbox" name="travel" value="bike">Bicycle</input>
 
   <input type="checkbox" name="travel" value="bike">Bicycle</input>
  </li><li>
+
  </dd><dt>
   <label for="age">Age:
+
   <label for="age">Age:</dt>
 +
  <dd>
 
   <select>
 
   <select>
     &lt;option val=0>< 18&lt;/option>
+
     &lt;option val=0>&lt; 18&lt;/option>
 
     &lt;option val=18>18-64&lt;/option>
 
     &lt;option val=18>18-64&lt;/option>
 
     &lt;option val=65>65+&lt;/option>
 
     &lt;option val=65>65+&lt;/option>
 
  &lt;/select>
 
  &lt;/select>
  &lt;/li>&lt;li>
+
  &lt;/dd>&lt;dt>
   &lt;label for="description">Description:&lt;/label>
+
   &lt;label for="description">Description:&lt;/label>&lt;/dt>
  &lt;textarea id="description">Default text&lt;/textarea>
+
  &lt;dd>&lt;textarea id="description">Default text&lt;/textarea>
  &lt;/li>
+
  &lt;/dd>
  &lt;/ol>
+
  &lt;/dl>
 
  &lt;input type="submit" value="Send" />
 
  &lt;input type="submit" value="Send" />
 
  &lt;input type="reset" />
 
  &lt;input type="reset" />

Revision as of 00:16, 13 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">
 <dl>
 <dt><label for="firstname">First name:</label></dt>
  <dd><input type="text" id="firstname" />
</dd><dt>
   <label for="lastname">Last name:</label></dt>
  <dd><input type="text" id="lastname" />
</dd><dt>Sex</dt>
  <dd><input type="radio" name="sex" value="male">Male</input>
  <input type="radio" name="sex" value="female">Female</input>
</dd><dt>Travel</dt>
  <dd>  <input type="checkbox" name="travel" value="car">Car</input>
  <input type="checkbox" name="travel" value="bike">Bicycle</input>
</dd><dt>
 <label for="age">Age:</dt>
  <dd>
 <select>
   <option val=0>< 18</option>
   <option val=18>18-64</option>
   <option val=65>65+</option>
</select>
</dd><dt>
 <label for="description">Description:</label></dt>
  <dd><textarea id="description">Default text</textarea>
</dd>
</dl>
<input type="submit" value="Send" />
<input type="reset" />
</form>

Sample Python Binding

order=[
 "firstname","lastname","sex",'"travel", "age","description"
]
dict={
 "@@tag":"form",
   "@action":"http://somesite.com/users/",
   "@class":"deth",
   "@enctype":"application/x-www-form-urlencoded",
   "@method":"post",
 "@@order":order,
 "firstname":"First name:",
 "lastname":"Last name:",
 "sex":{"@type":"radio", "male":"Male", "female":"Female"},
 "travel":{"@type":"checkbox", "car":"Car", "bike":"Bicycle"},
 "age":{"@@body":"Age:", "@type":"select",
        "0":"< 18", "18":"18-64", "65":"65+"
  },
 "description":{
   "@@body":"Description:",
   "@type":"textarea",
   "@value":"Default text"
  }
}