Doubts how to create a layout for editing information

Question

I am developing an internal tool to control travel expenses of employees, however I am with a great doubt.

I will explain the steps I followed to the moment.

--> first the person enters the portal and asks for a trip with date of departure, date of return, destination and some more information.

--> this person’s superior receives a notification email that the same is requesting a trip, he can authorize or deny the trip.

--> assuming the superior authorized the trip, the employee will receive a new email notifying that his trip has been authorized.

--> at this time the collaborator has already made the trip and comes to account for the trip he made.

my doubt is here

--> the journey is divided by days, one-way day to the return day EX: 01/01/2018 until 01/03/2018, and I have to fill in the travel information as shown in the attached image

What better way to work with this layout in html? Someone knows a tool or can give me an idea of how to proceed. Thank you all.

This is a picture of the spreadsheet that people use today

Answer 1

Look guys thanks for the help you all, I solved the problem with a basic form but I used a lib called angular-Steps where it works with "tabs"

follows picture of how it looked.

Answer 2

About layout you can use tables with Labels and inputs normally, ex:

            <table border="1">
                <tr>
                    <td>
                        <label>Horário de entrada</label>
                    </td>
                    <td>
                        <input type="text" name="entrada">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>Horário de saída</label>
                    </td>
                    <td>
                        <input type="text" name="saida">
                    </td>
                </tr>
            </table>

You’re gonna look like an Excell, which I think is what you want