Author: | krasenslavov |
---|---|
Views Total: | 636 views |
Official Page: | Go to website |
Last Update: | March 19, 2020 |
License: | MIT |
Preview:

Description:
FormaJS is a Vanilla JavaScript form creator library to create a customizable, interactive, pretty nice HTML form from minimal form markup.
Features:
- Switches between form fields with Tab key.
- Auto shows or hides form fields on page load.
- Auto generates description and placeholder text for each field.
- Supports native HTML5 Form validation attributes with build-in or custom validation messages.
- Disable the Submit button when the form is invalid.
- Easy to create your own form styles using CSS.
Basic usage:
1. Download and load the FormaJS’ files in the document.
<!-- With All Styles --> <link href="dist/css/forma.css" rel="stylesheet" /> <!-- With Bare-bones Styles --> <link href="dist/to/css/forma-barebone.css" rel="stylesheet" /> <!-- With Basic Styles --> <link href="dist/to/css/forma-base.css" rel="stylesheet" /> <!-- Boilerplate CSS --> <link href="dist/to/css/forma-boilerplate.css" rel="stylesheet" />
<script src="dist/js/forma.min.js"></script>
2. Code the HTML form.
<form class="forma"> <input data-label="Email" type="email" name="email-address" /> <input data-label="First Name" type="text" name="first-name" /> <input data-label="Last Name" type="text" name="last-name" /> <button type="submit">Submit</button> </form>
3. Initialize the library to transform the form into an interactive, well-designed form as follows:
forma(); // =>
<form class="forma"> <fieldset class="forma"> <legend></legend> <div class="forma-wrap forma-open"> <label for="email-address" class=""> <span class="forma-label forma-invalid"> Email Address <div class="forma-description"></div> <div class="forma-input"></div> <div class="forma-message">Please fill in this field.</div> </span> <div class="forma-fieldset"> <input data-label="Email" type="email" name="email-address" required="" id="email-address" class="forma-control forma-invalid" placeholder="" /> </div> </label> </div> <div class="forma-wrap forma-open"> <label for="first-name" class=""> <span class="forma-label"> First Name <div class="forma-description"></div> <div class="forma-input"></div> <div class="forma-message"></div> </span> <div class="forma-fieldset"> <input data-label="First Name" type="text" name="first-name" id="first-name" class="forma-control" placeholder="" /> </div> </label> </div> <div class="forma-wrap forma-open"> <label for="last-name" class=""> <span class="forma-label"> Last Name <div class="forma-description"></div> <div class="forma-input"></div> <div class="forma-message"></div> </span> <div class="forma-fieldset"> <input data-label="Last Name" type="text" name="last-name" id="last-name" class="forma-control" placeholder="" /> </div> </label> </div> <button type="submit">Submit</button> </fieldset> </form>
4. Customize the validation rules & messages.
<input data-label="Email" type="email" name="email-address" pattern="(\S+@\S+\.\S+)" title="Email address must contain digits, letters, and @_. characters." required />
5. Configuration options to customize the HTML form.
forma({ // default selector container: '.forma', // enables Tab key to switch between fields tab: false, // shows all form fields on page load show: false, // shows auto-generated descriptsions and placeholders auto: false, // adds open/close buttons to form rows manual: false, // disables Submit button when the form is invalid submit: false, // text added before the auto-generated text prefix: 'Enter', // text added after the auto-generated text suffix: '...', // an array of supported elements. // e.g. ['select', 'input'] support: [], // use other HTML tags to build you forms // e.g. {title: '', abbr: false, wrap} struct: {}, // integrate with 3rd party frameworks // e.g. 'bootstrap' integrate: '' });