🐇 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

🔧 Installation

npm install --save formit

Then, import it into your Javascript workflow:

import Formit from 'formit'

The UMD build is also available via unpkg:

<script src="https://unpkg.com/form/dist/index.umd.js"></script>

🕹 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:

<form>
  <div id="Form"></div>
</form>

2. Generate with Formit

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

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 <label> (if generated) with the field.

<div id="form">
  <div class="FormElements-FieldGroup FormElements-id-0">
    <label for="FormElements-0" class="FormElements-Label">
      <div class="FormElements-Label__text">First name</div>
      <input type="text" id="FormElements-0" placeholder="First" autofocus="true" class="FormElements-Field">
    </label>
  </div>
  <div class="FormElements-FieldGroup FormElements-id-1">
    <label for="FormElements-1" class="FormElements-Label">
    <div class="FormElements-Label__text">Last name</div>
    <input type="text" id="FormElements-1" placeholder="Last" class="FormElements-Field">
    </label>
  </div>
  <div class="FormElements-FieldGroup FormElements-id-2">
    <input type="submit" id="FormElements-2" value="Go!" class="FormElements-Field">
  </div>
</div>

📒 Notes

Tests and additional docs coming soon!

❤️ Thanks

A big thanks to developit for his amazing tools and for being a source of inspiration.