Difference between revisions of "rest/forms-brainstorming"

From Microformats Wiki
Jump to navigation Jump to search
Line 11: Line 11:
 
# Recommend: use a ''label'' with every ''input''
 
# Recommend: use a ''label'' with every ''input''
 
# Make the ''for'' of the ''label'' match the ''id'' of ''input''
 
# Make the ''for'' of the ''label'' match the ''id'' of ''input''
# Optionally, group ''label'' with ''input'' using ''<tr>'' or ''&lt;li>''
+
# Group ''label'' with ''input'' using ''<dl><dt><dd>''
##If ''&lt;li>'', group ''input'' inside ''label''
 
##If ''<tr>'', place ''label'' in first ''<td>'', and ''input'' in second.
 
 
# Always place ''submit'' and ''reset'' outside grouping
 
# Always place ''submit'' and ''reset'' outside grouping
  

Revision as of 00:17, 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. Group label with input using
  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"
  }
}