Home » Html » Wiki or Markdown-like syntax for simple forms?

Wiki or Markdown-like syntax for simple forms?

Posted by: admin November 29, 2017 Leave a comment

Questions:

Is there any simple language similar to Markdown or one of the Wiki Markups that gets converted into HTML form elements?

For example:

name* = ___________
sex = (x) Male () Female
phones = [] Android [x] iPhone [] Blackberry
city = {BOS, (SFO), NYC}

Would get converted to:

<label>Name (required):</label><input type="text" name="name" id="name"/>
<label>Sex:</label><input type="radio" name="sex" value="Male" checked="checked"/> <input type="radio" name="sex" value="Female"/>
<label>Phones:</label><input type="check" name="phones" value="Android"/> <input type="check" name="phones" value="iPhone" checked="checked"/> <input type="check" name="phones" value="Blackberry"/>
<label>City:</label> 
<select name="city">
  <option value="BOS">BOS</option>
  <option value="SFO" selected="selected">SFO</option>
  <option value="NYC">NYC</option>
</select>

It would be simple to create one myself, but if any existing library/language supports it already, it would save me some time in implementation, documentation and maintenance. It would be preferable if the library worked either in Java (so we could run it server-side) or JavaScript (so we could run it client-side).

Update: I created a github project for this and maleldil implemented it. Feel free to try it out!

Answers:

I have not been able to find a library that suits my needs, so I forked the WMD project (which SO uses for its Markdown syntax highlighting) and put the project on on Github. I didn’t have time to implement it, but maleldil kindly did it himself, so try it out!

Questions:
Answers:

Not an answer.

I think it should read

sex = () Male () Female

in order to get radio buttons, because

sex = [] Male [] Female

would result in checkboxes (meaning you could be both male and female)

If your going to implement it. Also, you would hae to require one question per line, so you would know what to group up, otherwise any two () would be linked.

I also suggest you do not try to put values inside the () or [], since its easier to search for them w/o text inside. But you might also add () as selected and [] as checked. If you use that tho, you cant have that stream of characters apear in the questions.

Just my 2 cents in case your going to implement it.

Questions:
Answers:

I took a swing at the problem at https://github.com/bradgessler/formdown with a slightly different syntax:

Hi _________(Name)

How are you doing today? () Good () Ok () Bad

Could I have your email address? [email protected](Email)

Write a few lines that describe your mood: ____________///(Mood)

[ Submit your feelings ]

This is packaged up as the formdown gem and can be used in Rails to render forms via the .fmd file extension (e.g. app/views/users/edit.fmd.html).

Questions:
Answers:

i came across http://www.jspwiki.org/Wiki.jsp?page=WikiFormsPlugin some time back. not sure f you can reuse the class tho.

Questions:
Answers:

I am working on a PHP solution that extends Michelf Markdown. Currently, basic <input> and <textarea> elements are supported.
It uses this syntax:

?{type}("label" "value" "placeholder" rows*cols){.class}

Where type can be an input type (<input type="...") or textarea which results in a textarea.

See https://github.com/rbnvrw/markdown-forms for the code and feel free to contribute.

Questions:
Answers:
<< GET "/post.php";
    label*: __|n="inputname"|v|p|i|c|l|disabled|readonly; 
    password: *|n|v|p|i|c;
    select: { 'multi word value'= 'Option', 'value2'='Option 2', !'value1'='Option 3' }&|n|i|c;
    (!)|n|v :label for previous radio; ()|n|v :label for previous;
    label for checkboxes: [!]|n|v; []|n|v;
    Message:____|rows|cols|c|p|v;
    File: ^|size||types|i|c
    @submit|v="Send Message";
    @reset|v="Reset Form";
>>
  • << and >> are form start and end signs
  • "this is a label":
  • * immediately after the label is for required fields
  • __ is text input
  • | attributes are separated with pipes (n="name of the field"|c="class of the field")
  • ; is for field separation
  • {} select is much like an associative array.
  • ! is for checked/selected values
  • :"label that comes after the value" for radios and checkboxes
  • ____ is textarea
  • ^ caret is for file input (up sign for upload)
  • @submit for buttons

.. now only if someone implemented this. 🙂