An open API service indexing awesome lists of open source software.

https://github.com/itsjonq/formit

๐Ÿ‡Formit: A speedy way to create HTML forms.
https://github.com/itsjonq/formit

Last synced: about 2 months ago
JSON representation

๐Ÿ‡Formit: A speedy way to create HTML forms.

Awesome Lists containing this project

README

          

# ๐Ÿ‡ Formit

> A speedy way to create HTML forms.

* โšก๏ธ **Tiny**, around 1.35 KB gzipped
* ๐Ÿ™Œ **Zero dependences**
* ๐Ÿ–Œ **Styleless** by design, allowing you to add your own.

**[Check out the demo](http://formit.surge.sh/)**

## ๐Ÿ”ง Installation

```
npm install --save formit
```

Then, import it into your Javascript workflow:

```js
import Formit from 'formit'
```

The UMD build is also available via [unpkg](https://unpkg.com):

```html

```

## ๐Ÿ•น Usage

Here's a quick example of how you can compose HTML forms with Formit:

#### 1. Prepare the HTML

Create somewhere for your Formit elements to render to:

```html

```

#### 2. Generate with Formit

Target your selector, and pass in the Formit elements you want to generate:

```js
Formit('#form', [
{
label: 'First name',
type: 'text',
placeholder: 'First',
autofocus: true,
},
{
label: 'Last name',
placeholder: 'Last',
type: 'text',
},
{
type: 'submit',
value: 'Go!'
},
])
```

#### 3. Check out your rendered form

Aw yea! Your selector is now populated with ready-to-use form elements.

A cool feature of Formit is that it'll automatically generate unique IDs and associate the `` (if generated) with the field.

```html




First name






Last name








```

## ๐Ÿ“’ Notes

Tests and additional docs coming soon!

## โค๏ธ Thanks

A big thanks to [developit](https://github.com/developit) for his amazing tools and for being a source of inspiration.