https://github.com/xyproto/simpleform

:large_blue_diamond: Simple language for creating HTML forms
https://github.com/xyproto/simpleform

classless dsl form generator html

Last synced: 27 days ago
JSON representation

:large_blue_diamond: Simple language for creating HTML forms

• Host: GitHub
• URL: https://github.com/xyproto/simpleform
• Owner: xyproto
• License: mit
• Created: 2020-11-20T16:09:53.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2020-11-23T16:20:51.000Z (about 4 years ago)
• Last Synced: 2024-12-25T09:22:48.729Z (about 1 month ago)
• Topics: classless, dsl, form, generator, html
• Language: CSS
• Homepage:
• Size: 66.4 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# :large_blue_diamond: SimpleForm description language

[![Build Status](https://travis-ci.com/xyproto/simpleform.svg?branch=main)](https://travis-ci.com/xyproto/simpleform) [![GoDoc](https://godoc.org/github.com/xyproto/simpleform?status.svg)](http://godoc.org/github.com/xyproto/simpleform) [![Go Report Card](https://goreportcard.com/badge/github.com/xyproto/simpleform)](https://goreportcard.com/report/github.com/xyproto/simpleform)

SimpleForm is a language for constructing HTML forms out of very little text.

Here is an example of a form definition:

```ruby

Login

Welcome dear user!

Username: {{ username }}

Password: {{ password }}

[Login](/login)

```

* The first line is recognized as the title, and is used both for the title (like this: `Login` and as a title in the body, like this: `
Login
`.

* The lines with `{{` and `}}` are recognized as single line input fields, where the label is the word before `:`.

* The `[Login](/login)` is recognized as a button that can submit the contents of the form as a POST request to `/login`.

* The syntax is inspired by `Jinja2` and `Markdown`.


Here's the generated HTML from the login form above:

```html

  

    Login

  

  

    
Login

    
Welcome dear user!

    

      Username:



      Password:



      



    

  


```

Unstyled, it looks like this:

![loginform](img/loginform.png)

When styled with [MVP.CSS](https://andybrewer.github.io/mvp/), this is how it looks:

![loginform_styled](img/loginform_styled.png)

## Features and limitations

* If the input ID starts with `password` or `pwd`, then the input type `"password"` is used.

* Multiple buttons can be provided on a single line.

* All text that is not recognized as either the title or as form elements is combined and returned in a `
` tag.

* If `[[` and `]]` are used instead of `{{` and `}}`, then a multi-line text input box is created instead.

# TODO

* Formal spec (or at least a PDF describing the language).

* Radio button support, with options separated by `|`.

* Support for required fields, by using the exclamation mark.

* Spport all available form elements, while keeping complexity low.

## General Info

* Version: 0.2.0

* License: MIT

* Author: Alexander F. Rødseth <[email protected]>