# Introducing markdown extensions for form input

**URL:** <https://talk.commonmark.org/t/introducing-markdown-extensions-for-form-input/432>\
**Category:** Extensions\
**Created:** [September 5, 2014, 8:33pm UTC](https://talk.commonmark.org/t/introducing-markdown-extensions-for-form-input/432 "2014-09-05T20:33:13Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![bosky](https://talk.commonmark.org/user_avatar/talk.commonmark.org/bosky/32/274_2.png) [@bosky](https://talk.commonmark.org/u/bosky)\
**Post date:** [September 5, 2014, 8:33pm UTC](https://talk.commonmark.org/t/introducing-markdown-extensions-for-form-input/432/1 "2014-09-05T20:33:13Z")

</div>

_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 )**

```auto
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 )

```Choose
<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 [GitHub - bosky101/marksup: First glimpse of the lightweight markup language, to create interactive web pages, possibly to compliment with markdown · GitHub](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

---

<div class="post-metadata">

**Author:** ![mofosyne](https://talk.commonmark.org/user_avatar/talk.commonmark.org/mofosyne/32/1438_2.png) [@mofosyne](https://talk.commonmark.org/u/mofosyne)\
**Post date:** [October 21, 2014, 12:25pm UTC](https://talk.commonmark.org/t/introducing-markdown-extensions-for-form-input/432/2 "2014-10-21T12:25:59Z")

</div>

## 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?:

- 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: [W3Schools Tryit Editor](http://www.w3schools.com/html/tryit.asp?filename=tryhtml_select3)

Fiat option preselected

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

```

### Field set: [W3Schools Tryit Editor](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: [HTML datalist Tag](http://www.w3schools.com/tags/tag_datalist.asp)

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

```

* * *

Also useful to know:

[http://stackoverflow.com/questions/5759661/wiki-or-markdown-like-syntax-for-simple-forms](http://stackoverflow.com/questions/5759661/wiki-or-markdown-like-syntax-for-simple-forms)

---

<div class="post-metadata">

**Author:** ![jmatsushita](https://talk.commonmark.org/user_avatar/talk.commonmark.org/jmatsushita/32/957_2.png) [@jmatsushita](https://talk.commonmark.org/u/jmatsushita)\
**Post date:** [September 29, 2017, 3:01pm UTC](https://talk.commonmark.org/t/introducing-markdown-extensions-for-form-input/432/3 "2017-09-29T15:01:53Z")

</div>

[SlamData’s own flavor of Markdown](http://docs.slamdata.com/en/v3.0/slamdown-reference.html#section-5-form-elements) defines simple form syntax too which also aims at degrading nicely:

```auto

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)

```

---

<div class="post-metadata">

**Author:** ![jmatsushita](https://talk.commonmark.org/user_avatar/talk.commonmark.org/jmatsushita/32/957_2.png) [@jmatsushita](https://talk.commonmark.org/u/jmatsushita)\
**Post date:** [September 29, 2017, 3:04pm UTC](https://talk.commonmark.org/t/introducing-markdown-extensions-for-form-input/432/4 "2017-09-29T15:04:08Z")

</div>

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

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

```

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![jmatsushita](https://talk.commonmark.org/user_avatar/talk.commonmark.org/jmatsushita/32/957_2.png) [@jmatsushita](https://talk.commonmark.org/u/jmatsushita)\
**Post date:** [September 29, 2017, 3:09pm UTC](https://talk.commonmark.org/t/introducing-markdown-extensions-for-form-input/432/5 "2017-09-29T15:09:23Z")

</div>

[marked-form](https://www.npmjs.com/package/marked-forms) uses a variation on link syntax:

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

```

---

<div class="post-metadata">

**Author:** ![jmatsushita](https://talk.commonmark.org/user_avatar/talk.commonmark.org/jmatsushita/32/957_2.png) [@jmatsushita](https://talk.commonmark.org/u/jmatsushita)\
**Post date:** [September 29, 2017, 3:10pm UTC](https://talk.commonmark.org/t/introducing-markdown-extensions-for-form-input/432/6 "2017-09-29T15:10:50Z")

</div>

[Formdown](https://github.com/bradgessler/formdown) is for Rails and looks like:

```auto
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]

```

---

<div class="post-metadata">

**Author:** ![jmatsushita](https://talk.commonmark.org/user_avatar/talk.commonmark.org/jmatsushita/32/957_2.png) [@jmatsushita](https://talk.commonmark.org/u/jmatsushita)\
**Post date:** [September 29, 2017, 3:15pm UTC](https://talk.commonmark.org/t/introducing-markdown-extensions-for-form-input/432/7 "2017-09-29T15:15:34Z")

</div>

There is a fork of the [WMD](https://github.com/brikis98/wmd) editor which uses a syntax which seems to have directly inspired Slamdown. It also has

User friendly labels

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

```

And Required fields

```auto
zip code* = ___[50]

```

---

<div class="post-metadata">

**Author:** ![jmatsushita](https://talk.commonmark.org/user_avatar/talk.commonmark.org/jmatsushita/32/957_2.png) [@jmatsushita](https://talk.commonmark.org/u/jmatsushita)\
**Post date:** [September 29, 2017, 3:19pm UTC](https://talk.commonmark.org/t/introducing-markdown-extensions-for-form-input/432/8 "2017-09-29T15:19:13Z")

</div>

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

```auto
# Section 1

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

```

[http://texdoc.net/texmf-dist/doc/latex/hyperref/manual.pdf](http://texdoc.net/texmf-dist/doc/latex/hyperref/manual.pdf)

---

<div class="post-metadata">

**Author:** ![networkimprov](https://talk.commonmark.org/letter_avatar_proxy/v2/letter/n/eada6e/32.png) [@networkimprov](https://talk.commonmark.org/u/networkimprov)\
**Post date:** [March 15, 2021, 5:37am UTC](https://talk.commonmark.org/t/introducing-markdown-extensions-for-form-input/432/9 "2021-03-15T05:37:25Z")

</div>

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:

> **[Usage | VueJS Generators](https://vue-generators.gitbook.io/vue-generators/usage)**

Embeddable forms are implemented in the [mnm client app](https://mnmnotmail.org), and you can try them in the [**online demo**](https://mnmnotmail.org/demo.html).