@jsnodor/form-lib v0.0.1
form-lib
A library to create html forms from schema like objects in javascript (inpired by you know which framework).
Example
let schema = {
name: String,
color:{
type: String,
specificType:'color'
},
gender: {
choices:['male','female'],
type:String,
default:'male'
},
isRegistered: Boolean,
age: {
type: Number,
min: 0,
required: true
},
date_of_birth: Date
}
class MyForm extends Form {
configure() {
return {
schema
}
}
}
console.log(new MyForm() + '')
Will generate
<!-- Example form -->
<form>
<div>
<div><label for='name'>Name</label></div>
<div><input type='text' name='name' id='name'></div>
</div>
<div>
<div><label for='color'>Color</label></div>
<div><input type='color' name='color' id='color'></div>
</div>
<div>
<div><label for='gender'>Gender</label></div>
<div><select name='gender' id='gender'>
<option value='male' selected='selected'>male</option>
<option value='female'>female</option>
</select></div>
</div>
<div>
<div><label for='isRegistered'>Is registered</label></div>
<div><input type='checkbox' name='isRegistered' id='isRegistered'></div>
</div>
<div>
<div><label for='age'>Age</label></div>
<div><input type='number' required='required' min='0' name='age' id='age'></div>
</div>
<div>
<div><label for='date_of_birth'>Date of birth</label></div>
<div><input type='date' name='date_of_birth' id='date_of_birth'></div>
</div>
</form>
Usage
Depend on this library in the node environment or importing it in the browser (via the FORM_LIB
global object).
<form></form>
<script src="path/to/FORM_LIB/dist/index.js"></script>
<script>
let Form = FORM_LIB.Form
let schema= ...
class MyForm extends Form {
configure(){
this.FormTag=false
return {
schema
}
}
}
let form = new MyForm
document.querySelector('form').innerHTML=form.toString()
</script>
or
let { Form } = require('@jsnodor/form-lib')
...
res.send(form.toString())
...
Capabilities
Uses very simple configuration, the most basic of configuration requires you implementing the
configure
methodDerived label names from
camelCase
orsnake_case
Has a private internal configurable API for future features
Optionally ignore the form tag by setting
this.FormTag=false
Able to generate html in 3 modes,
paragraph
(form.asP()),table
form.asTable() anddiv (default)
form.asDiv()Able to fill the fields in the form based on the first argument of the form (incoming data)
Does partial validation of date values
Sets some html attributs
id
,value
,selected
, e.t.c (try out for more)
Pending features
- Incorporate bootstrap css classes for the form
Special thanks to @chilusoft, @lembani, @WazaDev.
Dedicated to @MissK for your Birthday. Enjoy your new year as you start your career in computer science!
10 months ago