A quick shorthand for creating HTML forms, inspired by Markdown.
| Element name | Markform code | HTML equivalent |
|---|---|---|
| Form start | [+] |
<form> |
| Text input | [_] |
<input type="text"> |
| Textarea | [[ ]] |
<textarea></textarea> |
| Email input | [@] |
<input type="email"> |
| Password input | [*] |
<input type="password"> |
| Number input | [$] |
<input type="number"> |
| Range input | [%] |
<input type="range"> |
| File upload | [^] |
<input type="file"> |
| Submit button | [( )] |
<button type="submit"><button> |
| Form end | [-] |
</form> |
Markform:
[+]
First name [_]
Last name [_]
Email address [@]
Choose a password [*]
[(Create my account)]
[-]
Converted to HTML:
<form>
<div>
<label for="markform-text-input-first-name">First name</label>
<input id="markform-text-input-first-name" type="text">
</div>
<div>
<label for="markform-text-input-last-name">Last name</label>
<input id="markform-text-input-last-name" type="text">
</div>
<div>
<label for="markform-email-input-email-address">Email address</label>
<input id="markform-email-input-email-address" type="email">
</div>
<div>
<label for="markform-password-input-choose-a-password">Choose a password</label>
<input id="markform-password-input-choose-a-password" type="password">
</div>
<div>
<button id="markform-submit-button-create-my-account" type="submit">Create my account</button>
</div>
</form>
Markform:
[+]
Image file to rescale [^]
Horizontal resolution [$]
Vertical resolution [$]
[(Upload image)]
[-]
Converted to HTML:
<form>
<div>
<label for="markform-file-input-image-file-to-rescale">Image file to rescale</label>
<input id="markform-file-input-image-file-to-rescale" type="file">
</div>
<div>
<label for="markform-number-input-horizontal-resolution">Horizontal resolution</label>
<input id="markform-number-input-horizontal-resolution" type="number">
</div>
<div>
<label for="markform-number-input-vertical-resolution">Vertical resolution</label>
<input id="markform-number-input-vertical-resolution" type="number">
</div>
<div>
<button id="markform-submit-button-upload-image" type="submit">Upload image</button>
</div>
</form>