A universal form module.
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.
<head>
<link href="node_modules/rocket-form/css/form.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- Your content goes here -->
<script src="node_modules/rocket-tools/js/tools.min.js"></script>
<script src="node_modules/rocket-form/js/form.min.js"></script>
</body>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.
<div class="mod-form">
<label for="input-example">Example Label<label>
<input id="input-example" type="text">
</div>
<script>
Rocket.form();
</script>Each initialisation will bind to new form targets but will overlook existing ones. However existing form targets will have its state updated.
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. |
Rocket.form({
target: '.form-element',
colour: 'red',
label: 'shift',
style: 'raised'
});You can also overwrite the module options globally by altering the Rocket defaults. To do so reference the defaults object property, for example:
Rocket.defaults.form.target = '.new-form-class';
Rocket.defaults.form.colour = 'green';There are a variety of unique form elements with each being viable targets. See an example of each below:
<!-- Regular input (applies to text, email, search etc...) -->
<div class="mod-form">
<label for="text-1">Text Field</label>
<input id="text-1" type="text">
</div>
<!-- Password input -->
<div class="mod-form">
<label for="password-1">Password Field</label>
<input id="password-1" type="password">
</div>
<!-- With icon -->
<div class="mod-form">
<label for="text-2">Text Field</label>
<div class="mod-form-icon">
<i class="fa fa-cog"></i>
<input id="text-2" type="text">
</div>
</div><div class="mod-form">
<label for="textarea-1">Text Area</label>
<textarea id="textarea-1"></textarea>
</div>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.
<div class="mod-form">
<input id="check-1" type="checkbox">
<label for="check-1">Checkbox 1</label>
</div>
<!-- Checked example -->
<div class="mod-form">
<input id="check-2" type="checkbox" checked="checked">
<label for="check-2">Checkbox 2</label>
</div>A toggler is a special modifier made to a checkbox. It just looks cool.
<div class="mod-form">
<input type="checkbox" class="_mod-make-toggler">
</div>Radio buttons have the same element order as checkboxes.
<div class="mod-form">
<input id="radio-1" type="radio" name="radio-option" checked="checked">
<label for="radio-1">Radio Option</label>
</div>
<div class="mod-form">
<input id="radio-2" type="radio" name="radio-option">
<label for="radio-2">Radio Option</label>
</div>
<div class="mod-form">
<input id="radio-3" type="radio" name="radio-option">
<label for="radio-3">Radio Option</label>
</div><div class="mod-form">
<select>
<option>Select Option 1</option>
<option>Select Option 2</option>
<option>Select Option 3</option>
</select>
</div>In order to rebuild production files you will first need to install the Rocket Command Line Tool. To do so run the following npm command in your terminal. NOTE that this package is installed globally and can take a while as it has quite a few dependencies.
npm install rocket-command -g
Once installed navigate to the Rocket Form root and run the following command:
rocket build
The relevant minified CSS and JS will now be rebuilt.
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.
Created and maintained by Chris Humboldt
Website: chrishumboldt.com
Twitter: twitter.com/chrishumboldt
GitHub github.com/chrishumboldt
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.