https://github.com/ar-to/html-forms
Tests using forms, inputs and server side handlers via nodejs, express, and more.
https://github.com/ar-to/html-forms
body-parser browser-sync browserify css3 expressjs html-form html5 nodejs nodejs-server nodemon watchify
Last synced: 7 days ago
JSON representation
Tests using forms, inputs and server side handlers via nodejs, express, and more.
- Host: GitHub
- URL: https://github.com/ar-to/html-forms
- Owner: ar-to
- License: mit
- Created: 2017-08-17T06:18:02.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-09-25T02:58:28.000Z (over 8 years ago)
- Last Synced: 2025-05-07T12:43:21.063Z (12 months ago)
- Topics: body-parser, browser-sync, browserify, css3, expressjs, html-form, html5, nodejs, nodejs-server, nodemon, watchify
- Language: JavaScript
- Size: 147 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# html-forms
Tests using forms, inputs and server side handlers via nodejs, express, and more.
## Instructions
make sure you have a current version of node installed
clone git repository and move into directory
```
git clone https://github.com/ar-to/html-forms.git
cd html-forms
```
install dependencies
`npm i`
start server
`npm start` or `node server.js`
test forms
test [localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) by checking the dev tools.
## Development
If you want to experiment with the code and make new forms or changes to the existing forms then follow the notes below. You will notice that I did not use a task runner like gulp/grunt because I wanted to test how all of these tools would work independently but also because I tend to run them globally when I'm making test projects like these.
This project uses:
[nodemon](https://github.com/remy/nodemon#nodemon) - to reload server when file are changed
[browser-sync](https://www.browsersync.io/docs) - to reload browser when files are changed. When you run browser-sync it will give you the option to use your computer loop IP called locahost or your local network IP so you can see it in any computer or device connected to the same internet.
[browserify](http://browserify.org) - to bundle the javascript modules inside `www/js/`
[watchify](https://github.com/substack/watchify) - to watch for file changes and rebuild the bundle.js.
Install browserify, watchify, nodemon and browser-sync
`npm i --save-dev browserify watchify nodemon browser-sync`
to watch for changes in your files and restart server, open terminal and run
`npm run nodemon`
to watch changes in inside public directory `./www` and serve them to reload browser, open new terminal window and run
`npm run browser-sync`
to create bundle.js once, open new terminal window and run
`npm run browserify`
or to watch for changes inside main.js and re-bundle
`npm run watchify`
## Future Features
1. Use cookies to save form data within browser
2. Use built-in browser database to store data
3. Get emails to work
4. Setup foreman to automate all the npm scripts at once
## Resources
* [Form Basics](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form)
* [form widgets](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/The_native_form_widgets)
* [Sending data- server side](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data)
* [using cookies with forms](http://www.the-art-of-web.com/javascript/setcookie/)
* [Forms with NodeJS](https://www.sitepoint.com/creating-and-handling-forms-in-node-js/)
* [Forms with NodeJS and Express](https://www.gitbook.com/book/kevinchisholm/handling-post-requests-with-express-and-node-js/details)
* [express body-parser](https://github.com/expressjs/body-parser/)
* [Fetch API](https://developer.mozilla.org/en-US/docs/AJAX)
* [ReactJS forms](https://facebook.github.io/react/docs/forms.html)
### Sending emails
I tested this using nodemailer but could not get gmail to work so need to test mailgun then google again some time.
* [nodemailer](https://nodemailer.com/about/)
* [nodemailer example with express](https://blog.ragingflame.co.za/2012/6/28/simple-form-handling-with-express-and-nodemailer)
* [mailgun](http://blog.mailgun.com/how-to-send-transactional-emails-in-a-nodejs-app-using-the-mailgun-api/)