Introducing markdown extensions for form input

Extensions
1

tl;dr A few years ago, i created some extensions for markdown - specifically for collecting user input. Scroll to the bottom for an example of creating a form.

markdown has been great for rendering read-only content over the years, i found it useful to be able to create forms using my extensions (i’m calling it marksup), and many folks with no programming experience seem to agree.

on my github repo I have a grammar, via a lex/yac implementation and a makefile to run my demo.

here is a preview of

  • creating a input field, a password field, a textarea, a submit button (implemented)
  • a radio button, a checkboxes ( not implemented ) 
Choose an Email ?
_____

Choose a password
******

Describe why you want to register
____
_____

Gender
male/female

Which of these features will you need?
[+] simplicity
[-] Don't know
[-] complete

[ok]

This should generate the following HTML when compiled ( make test )

<input type="text" name="Choose an Email ?"/>
<BR>
Choose a password
<input type="password" name="Choose a password"/>
<BR>
Describe why you want to register
<textarea name="Describe why you want to register"><textarea>   
<BR>
<input type="button" value="ok" />

marksup ( up signifying user-input ) in its current form is over at http://github.com/bosky101/marksup

i may not be the best person to take this up or come up with specs, but think this may be the best place to talk about it. i also think this is a simple but worthwhile attempt.

~Bosky

1 Like
2

This is best done as a generic directive input

Generic Directive Style Brainstorming. The idea is that you could potentially print this as it is and fill it out if you really needed to.

A field starts with a field description of this form, which is always ended by a :

<field description. Field name autodetected in here> :

After the field description, the fieldtype is indicated via examples shown below.

Each field name is either autodetected, or can be pointed via *fieldname* or {fieldname}

!form: Form Header Name
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Choose an *email*?:  ______________
Choose a *password*: ***___________

Describe why you want to register:
[________________________________]
[________________________________]{description}

*Gender*: [ "male" / "female" ]

Which of these *features* will you need?:
* [X] simplicity
* [ ] Don't know
* [ ] complete

Radio Button. Which *pet* do you want most?:
* (X) cat
* ( ) dog
* ( ) bird

          [>>  OK   <<] [!! RESET !!]

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
{action="MAILTO:someone@example.com" method="post" enctype="text/plain"}

Designed to fail gracefully

Choose an email?: ______________
Choose a password: ***___________

Describe why you want to register:
[________________________________]
________________________________

Gender: [ “male” / “female” ]

Which of these features will you need?:

  • [X] simplicity
  • [ ] Don’t know
  • [ ] complete

Radio Button. Which pet do you want most?:

  • (X) cat
  • ( ) dog
  • ( ) bird

[>> OK <<] [!! RESET !!]

##Other form inputs:

Buttons

  • submit button: [>> TEXT HERE <<]
  • reset button: [!! TEXT HERE !!]

Drop down list: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_select3

Fiat option preselected

Choose a *car*:
*  [  Volvo  ]
*  [  Saab   ]
*  [- Fiat  -]
*  [  Audi   ]

Field set: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_fieldset 

# is first level fieldset
## Second level fieldset

e.g.

# Login Details
Choose a Username: ______________
Choose a password: ***___________

# Personal Details
Gender: [ "male" / "female" ]
Religion: ________

Datalist: http://www.w3schools.com/tags/tag_datalist.asp 

What is your *browser*?:  ______________
* Internet Explorer
* Firefox
* Chrome
* Opera
* Safari

Also useful to know:

1 Like
3

SlamData’s own flavor of Markdown defines simple form syntax too which also aims at degrading nicely:


name = ____
interests = ________ (SlamData)
year = #________  (1999)
commute = () car (x) bus () bike
phones = [x] iPhone [] Blackberry [x] Android
city = {BOS, SFO, NYC}

date = ____-__-__ (2016-04-19)
time = __:__ (02:30 PM)

start = ____-__-__ __:__ (2016-04-19 14:00)
4

markdown-form for PHP has its own format meant to be mixed with HTML form tags

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

<form role="form" markdown="1">
  ?{text}("Name" "" "Name..."){.form-control}
  ?{email}("Email" "" "Email..."){.form-control}
  ?{text}("Subject" "" "Subject..."){.form-control}
  ?{textarea}("Message" "" "Message..." 3*20){.form-control}
  ?{submit}("" "Send!"){.form-control}
</form>
5

marked-form uses a variation on link syntax:

[Provide a Name ??]()
[Choose one ?select?](nme)
- option1
- option2
- option3
[?checklist?](name)
- check1
- check2
- check3
[Radiolist with a label before ?radiolist?](name)'
- radio1
- radio2
- radio3
[Submit text ?submit?]()
6

Formdown is for Rails and looks like:

Hi _________(Name)

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

Could I have your email address? __________@(Email)

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

[ Submit your feelings ]
7

There is a fork of the WMD editor which uses a syntax which seems to have directly inspired Slamdown. It also has

User friendly labels

city = {BOS -> Boston, SFO -> San Francisco, (NYC -> New York City)}

And Required fields

zip code* = ___[50]
8

Hyperref is a tex extension which also allows form fields which can generate both PDF and HTML field with the following syntax:

# Section 1

\TextField[name=Field1, width=\hsize]{Input here:}

http://texdoc.net/texmf-dist/doc/latex/hyperref/manual.pdf

9

Forms are commonly reused, and often intricate, so I wouldn’t support an inline form composition syntax like that described above. I think that breaks down beyond a trivial form.

But certainly forms are an essential web feature, so I’d suggest enabling them as embedded objects, e.g. ?[label](form_ref). Of course this requires the renderer to load a form definition, and how that’s done is outside the scope of CommonMark.

Form definitions could be common <form>...</form> trees. I’d further suggest that JSON definitions also be considered, for example as in this Vue.js module:
https://vue-generators.gitbook.io/vue-generators/usage

Embeddable forms are implemented in the mnm client app, and you can try them in the online demo.