Creating an online budget form 1/5

Keeping track of spending is an ongoing chore. It is also a good first step in getting on top of your finances and can be fun to see where all the money is going. To help in keeping track of spending I am building an online budget form that will let me enter in monthly spending and total the amounts so I have a good idea of what my normal expenses are.

The first step in creating this online budget form is to set up the basic html.

First part is a form containing the option to add a new item.

 <form> <label>Item</label> <input type="text"> <label>Amount</label> <input type="number"> <button>Add</button> </form> <h3>Items</h3> 

The second part is to add a table that will contain the budget items.

 <table> <thead> <tr> <th>Item</th> <th>Amount</th> </tr> </thead> <tbody> <tr> <td>Car</td> <td>$1.00</td> </tr> </tbody> <tfooter> <tr> <td>Total</td> <td>$1.00</td> </tr> </tfooter> </table> 

The table is split into 3 parts thead, tbody and tfooter. And the form currently looks like this:

Not much to look at obviously but in the coming posts I will show how to add dynamic functionality to the form and how to style the form so that it looks professional. Finally I will show how to use the form to feed into a submission to a CRM so that this could be used on the website of a financial counsellor.