Rocket Form
A universal form module.
Getting Started
Install via NPM.
npm install rocket-form
NOTE that this module has a dependency Rocket Tools (28kb) which will automatically be installed as well.
Start by including the necessary files.
<!-- Your content goes here -->
Basic Example
You will need to wrap your form elements with an identifier of your choice. Below is an example of executing the module complete with required HTML and Javascript.
Example Label
Initialisation
Each initialization will bind to new form targets but will overlook existing ones. However existing form targets will have the state updated.
Options
See the different options you have available on initialisation.
Name | Default | Options | Description |
---|---|---|---|
target |
.mod-form |
Set the HTML target. | |
colour |
blue |
grey black white aqua blue green orange pink purple red grey-blue |
Set the colour of the form elements. |
label |
normal |
normal shift |
Set an animation on the form label. |
style |
line |
flat line raised |
Set the style of the form elements. |
Rocketform target: '.form-element' colour: 'red' label: 'shift' style: 'raised';
Defaults
You can also overwrite the module options globally by altering the Rocket defaults. To do so reference the defaults object property, for example:
Rocketdefaultsformtarget = '.new-form-class';Rocketdefaultsformcolour = 'green';
HTML Examples
There are a variety of unique form elements with each being viable targets. See an example of each below:
Basic Inputs
<!-- Regular input (applies to text, email, search etc...) --> Text Field <!-- Password input --> Password Field <!-- With icon --> Text Field
Text Area
Text Area
Checkboxes
In this example the only difference to basic inputs is the oder of the elements and the type. Although it is not 100% necessary to change the order, it is good practice.
Checkbox 1 <!-- Checked example --> Checkbox 2
Toggler
A toggler is a special modifier made to a checkbox. It just looks cool.
Radio Buttons
Radio buttons have the same element order as checkboxes.
Radio Option Radio Option Radio Option
Select Element
Select Option 1 Select Option 2 Select Option 3
Formplate Deprecated
The original library, Formplate, has been deprecated. The entire Webplate project is being refactored and rebranded with a new development philosophy. Formplate will be maintained only with bug fixes under the formplate branch.
Author
Created and maintained by Chris Humboldt
Website: chrishumboldt.com
Twitter: twitter.com/chrishumboldt
GitHub github.com/chrishumboldt
Copyright and License
Copyright 2018 Rocket Project
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.