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.