2006-03-25

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>

2006-03-08

Single left click tab opener user script

I browse a lot on my laptop. Since my laptop has a touchpad without a middle mouse button I need to right click links and then select "Open link in new tab". Not a big deal really, but I would like to be able to open new tabs easier. I thought up two ways to do this using a Greasemonkey user script:

  1. When you have your pointer on a link create a new link near the pointer which opens the link in a new tab.
  2. Open a new tab when you keep the left mouse button down for a while.

I choose the second option. The single left click tab opener user script was born.

Update 2006-02-21: I know that you could use Ctrl + Left click in Firefox to open links in a new tab. Since I can't use my left arm fully the Ctrl key isn't really an option for me.