DEV Community


Posted on • Updated on


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">
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git