Markdown is a lightweight markup language that can be converted into HTML. The main inspiration behind its syntax is to copy what most people have used for years to decorate plain text emails. For example, if you emphasize a word by surrounding it with *asterisks*, you get <em>asterisks</em>. If you try to put in a page divider with a bunch of dashes ---------------, you get <hr/>. The syntax visually represents the type of HTML output you desire; in a way, Markdown is the onomatopoeia of markup languages.

Markdown

Markdown was created by John Gruber and Aaron Swartz Markdown is very easy to read and write, so it’s a great choice for CMS, wiki and WYSIWYG use cases. GitHub and StackOverflow both make heavy use of Markdown and have created their own Markdown extensions and implementations: GitHub flavored Markdown and MarkdownSharp. I too am a fan of Markdown: I think it’s perfect for formatting answers on StackOverflow, it’s a slick way to support rich text formatting in Resume Builder, and in my open source projects, it’s an elegant solution for readme files that are perfectly readable with or without a Markdown interpreter.

Proposal

In this blog post, I’m going to propose a small extension to the Markdown syntax: support for forms. There are a number of CMS and wiki use cases where I’ve wanted to allow users to create a custom form (e.g. a simple poll or event RSVP) without having to write out the full HTML for it. I even created a github project (forked from wmd) to try to implement this extension, though I’ve been too damn busy to get to it. Perhaps someone will be inspired by this post and help me get this thing rolling :)

Text fields

name = ________
<label for="name">Name:</label> 
<input type="text" id="name" name="name"/>

Radio buttons

sex = (x) male () female
<label>Sex:</label> 
<input type="radio" name="sex" id="male" value="male" checked="checked"/><label for="male">Male</label>
<input type="radio" name="sex" id="female" value="female"/><label for="female">Female</label>

Check boxes

phones = [] Android [x] iPhone [x] Blackberry
<label>Phones:</label> 
<input type="checkbox" name="phones" id="Android" value="Android"/><label for="Android">Android</label>
<input type="checkbox" name="phones" id="iPhone" value="iPhone" checked="checked"/><label for="iPhone">iPhone</label>
<input type="checkbox" name="phones" id="Blackberry" value="Blackberry" checked="checked"/><label for="Blackberry">Blackberry</label>
city = {BOS, SFO, (NYC)}
<label for="city">City:</label>
<select id="city" name="city">
  <option value="BOS">BOS</option>
  <option value="SFO">SFO</option>
  <option value="NYC" selected="selected">NYC</option>
</select>

Required fields

zip code* = ________
<label for="zip-code" class="required-label">Zip code*:</label>
<input type="text" name="zip-code" id="zip-code" class="required-input"/>

Feedback

Hopefully, merely looking at the examples above makes my proposal clear. If not, I’ve clearly failed, as Markdown’s central goal is readability. Either way, let me know what you think in the comments. Also, feel free to fork my github project for this proposal and start hacking away!

Update: Geoff saw this post, forked my project, and implemented the proposal! Awesome work Geoff!