web-form is a web form as a riot-based webcomponent and semantic-ui css-based with some extra features.
npm install web-form
![Bower]()
web-form is a custom web form as a riot-based webcomponent, semantic-ui framework for design and fetch polyfill for web request and handle response. Please see all examples for more information.
This webcomponent can be used to validate information using ajax. For example, when it register new user, can verify if username or email already it was registered.
- single input
- horizontal inputs
- vertical inputs
- mixed inputs
Because semantic-ui allows load only the components that you need via cnd. For example, web-form uses only form.min.css.
Because jquery is a library with many features. web-form needs a library that work only with ajax, no more features.
``bash `
bower install web-form --save
`bash
npm install web-form --save
// web-form does not compile from the server side. You must move web-form from node_modules to another static folder such as bower_component or public folder.
// If web-form is compile from the server side, it will be generated only static html content.
`
`html
`
To customize web-form desing you should check out semantic-ui forms);
- options: (Is an object)
- checkbox: (Is an object)
- show: Is a boolean. If true, checkbox is displayed on the webform
- label: Is a string. A custom message next to checkbox
- button: (Is an object)
- class: Is a special class name used for customize the button. It's necesary when you use semantic-ui botton.
- label: Is a string. Specifies a name for the button
- fetch: (Is an object).
- url: Is a string. Typically this is an absolute URL without the host component, e.g. "/api".
- options: Is a object.
- method: Is a string. By default is get
- For more options, please you should checkout out options
- inputs: Is an array that containt objects
- class: Is a special class name used for customize the inputs. (e.g.: 'field', 'fields', 'two fields', 'three fields'. You should check out semantic-ui forms))
- block: Is an array that containt objects. Each objects is an input. If you specifies 3 objects there are 3 inputs. (See the examples for customize inputs)
- class: Is a special class name used for determine the wide of the input. (e.g.: 'two wide', 'three wide', 'six wide', etc you should check out semantic-ui forms))
- label: Is a string that defines a label for the tag
- name: Is a string that defines a name for the tag
- placeholder: Is a string that defines a placeholder for the tag
- type: Is a string that defines a type for the tag ('text', 'password', etc)
- api: (Not obligatory) Is a boolean. You should specified this value to true if you want to make request via ajax.
a) execute
`bash`
npm run build
b) add link script for bundle file
`html
``
You should please check out the examples online
If you need help using web-form, or have found a bug, please create an issue on the Github repo
[MIT License]()