Formdown: rapid HTML form development

I'm working on a prototype for a web based application. For this prototype I need to create a lot of screens including forms. This is time consuming and not much fun if you need to change them every now and then. I would like to have something to:

• Create forms quickly and easily
• Modify forms quickly and easily
• Generate the forms as (semantic) HTML so I can create a click through prototype

basically I would like to have something like Markdown to generate forms. I really like the fact that the syntax is simple and readable. So I came up with Formdown. I implemented a javascript version of Formdown. This still needs some work. I needed it quickly so the code might need some optimization. Please contact me if you would like to port this to other languages or if you have ideas to improve this version.

Update 2006-04-06: This version has bugs (fieldset don't work under IE, definition data isn't closed etc.)! I will fix them, but I'm not sure when.

Syntax

Start a form:

%get|post action id

Start a fieldset (legend is optional):

+ Legend ---------------

Close a fieldset (dashes are optional):

+-----------------------

Field label (exclamation mark indicates required field):

Field label !:

Buttons:

{{Submit button}} {Other button}

Input fields must be preceded by a label

Text input:

[_____________]
[_Value_]

Textarea:

[[_____________]]
[[_Value_]]

Select:

> Option
>* Selected option

Checkbox:

[ ] Unchecked
[*] Checked

Radio button:

( ) Unchecked
(*) Checked

Formdown example

Input:

%get action.do myform

+ Personal data -----------------

Name            !: [_Jasper de Vries_]
Nickname         : [________]
Gender           : (*) male
                   ( ) female
Interests        : [*] Blogger
                   [*] speed skating
                   [ ] rain
Select something : > First option
                   >* Second option is selected
                   > Third option is no option
Remarks          : [[__________]]

+--------------------------------

{{Submit}} {Cancel}

Output:

<form method="get" action="action.do" id="myform">
<fieldset>
<legend>Personal data</legend>
<dl>
<dt><strong>Name</strong></dt>
<dd>
<input type="text" value="Jasper de Vries" />
<dt>Nickname</dt>
<dd>
<input type="text" value="" />
<dt>Gender</dt>
<dd>
<label><input type="radio" checked="checked"/> male</label><br />
<label><input type="radio" /> female</label><br />
<dt>Interests</dt>
<dd>
<label><input type="checkbox" checked="checked"/> Blogger</label><br />
<label><input type="checkbox" checked="checked"/> speed skating</label><br />
<label><input type="checkbox" /> rain</label><br />
<dt>Select something</dt>
<dd>
<select>
<option>First option</option>
<option selected="selected">Second option is selected</option>
<option>Third option is no option</option>
</select>
</dd>
<dt>Remarks</dt>
<dd>
<textarea cols="60" rows="6"></textarea>
</dd>
</dl>
</fieldset>
<p class="buttons">
<button type="submit" class="Submit">Submit</button>
<button type="button" class="Cancel">Cancel</button>
</p>
</form>

Tags:

• Formdown
• form
• HTML
• GUI
• UI
• prototype
• prototyping
• CSS
• javascript