Creating a form in HTML

Lesson Details:

June 29, 2020

I: Introduction

The cloud is a network of computers that can be accessed over the internet. In recent years the growth in processing power and the falling prices of servers have allowed cloud computing to become more common.

One area where this has been applied is machine learning. A common use case for machine learning is an app which needs to classify a new input. For example, a camera app might take a picture of a flower and try to determine what type of flower it is. This can be solved by feeding a database of images of flowers through a neural network and having the neural network determine what classifies as a flower.

This is a good approach when you don’t expect massive amounts of data, but if your data set grows larger than what you can store locally then the next approach would be to upload the data to the cloud and run the neural network there. Storage costs are lower in the cloud and it’s probably more convenient to connect to a server in the cloud than to upload the data manually.

II: Body

A: Creating a form in html

To create a form in html we use the

...

tags, we do this inside a ... tag.

For example, here is an html form that allows us to enter our favourite colour:

What is your favourite colour?
Send 1 2 3 4 5 6 7 8 9 10 11 What is your favourite colour?
Send

B: Saving form data locally

To save this data on our computer we’ll need to make sure it’s saved on our computer when the user presses the submit button. We can do this by creating a new file for this data, called ‘formdata.json’. The file should contain our form data. For example:

{"colour":"red"} 1 { "colour" : "red" }

B: Saving form data locally (with javascript)

We’ll also need to get the form data from the body of our html page using javascript. For example, if we wanted to get the value of an input with id ‘colour’, we could do something like this:

var text = document.getElementById("colour").value; 1 var text = document . getElementById ( "colour" ) . value ;

Now that we have our form data in our formdata.json file, how do we send it to the cloud? We’ll need to POST it to our server, but before we do that we’ll need an API key. You can get one for free here. Now that we have an API key, let’s save our formdata.json file on our server (you can see my code below). As well as saving the file on the server, we’ll also POST it to our server using jQuery’s $.post function (you can see my code below). If everything works correctly, when you press ‘send’ the url of your application (my url was http://localhost:3000/api/v1) should change to show that your post request is in progress. When the response comes back from the server your browser will reload your page with either “success” or “error” at the top of your browser window. Here is my code:

//save form data locally $("#color").val('').on('keyup',function(){ var val = $(this).val(); if(val){ $("#color2").val(val); $("#color3").val(val); $("#color4").val(val); $("#color5").val(val); $("#color6").val(val); $("#color7").val(val); $("#color8").val(val); $("#color9").val(val); $("#color10").val(val); var json = JSON.stringify({'colour': val}); var frmdata = 'http://localhost:3000/api/v1'; $.post(frmdata,json,function(){ location.reload() }); } }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 //save form data locally $ ( "#color" ) . val ( '' ) . on ( 'keyup' , function ( ) { var val = $ ( this ) . val ( ) ; if ( val ) { $ ( "#color2" ) . val ( val ) ; $ ( "#color3" ) . val ( val ) ; $ ( "#color4" ) . val ( val ) ; $ ( "#color5" ) . val ( val ) ; $ ( "#color6" ) . val ( val ) ; $ ( "#color7" ) . val ( val ) ; $ ( "#color8" ) . val ( val ) ; $ ( "#color9" ) . val ( val ) ; $ ( "#color10" ) . val ( val ) ; var json = JSON . stringify ( { 'colour' : val } ) ; var frmdata = 'http://localhost:3000/api/v1' ; $ . post ( frmdata , json , function ( ) { location . reload ( ) } ) ; } } ) ; //server side code var fs = require('fs'); var express = require('express'); var app = express(); app.get('/api/v1', function(req, res){ res.json({ 'success': true, 'data': {} }); }); app.post('/api/v1', function(req, res){ res.json({ 'success': false, 'error': 'Something went wrong!' }); }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 //save form data locally $ ( "#color" ) . val ( '' ) . on ( 'keyup' , function ( ) { var val = $ ( this ) . val ( ) ; if ( val ) { $ ( "#color2" ) . val ( val ) ; $ ( "#color3" ) . val ( val ) ; $ ( "#color4" ) . val ( val ) ; $ ( "#color5" ) . val ( val ) ; $ ( "#color6" ) . val ( val ) ; $ ( "#color7" ) . val ( val ) ; $ ( "#color8" ) . val ( val ) ; $ ( "#color9" ) . val ( val ) ; $ ( "#color10" ) . val ( val ) ; var json = JSON . stringify ( { 'colour' : val } ) ; var frmdata = 'http://localhost:3000/api/v1' ; $ . post ( frmdata , json , function ( ) { location . reload ( ) } ) ; } } ) ; //server side code var fs = require ( 'fs' ) ; var express = require ( 'express' ) ; var app = express ( ) ; app . get ( '/api/v1' , function ( req , res ) { res . json ( { 'success' : true , 'data' : { } } ) ; } ) ; app . post ( '/api/v1' , function ( req , res ) { res . json ( { 'success' : false , 'error' : 'Something went wrong!' } ) ; } ) ;

C: Saving