iilab / contentascode

Content as Code
http://iilab.github.io/contentascode
GNU General Public License v3.0
34 stars 7 forks source link

Forms with Markdown #59

Open jmatsushita opened 7 years ago

jmatsushita commented 7 years ago

There is a CommonMark extension on the list of proposed extensions

https://talk.commonmark.org/t/introducing-markdown-extensions-for-form-input/432

I remember talking about this also with Greenhost in relation to Quizzes for TOTEM which uses EdX which also has its form like markdown syntax:

http://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/multiple_choice.html#example-multiple-choice-problem

There are a number of modules in NodeJS:

Comparison of syntaxes

Proposed Extension

!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"}

EdX Quizzes

>>What Apple device competed with the portable CD player?<<
    (!) The iPad
    ( ) Napster
    (x) The iPod
    ( ) The vegetable peeler {{Label:: Feedback for learners who select this answer.}}
    (@) All of the above

SlamDown

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)

Markdown Forms

https://github.com/rbnvrw/markdown-forms

?{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>

Marked Forms

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?]()

Formdown

Formdown is for Rails:

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 ]

WMD Fork

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]