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.

          <input type="text">
          <input type="number">

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


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.

Leave a comment

Your email address will not be published. Required fields are marked *