Create template with multiple tabs (differents options) for one form


I want migrate a application that i don’t know exacly the code to a django app.

In the original application, there is a website with only 1 url, that has multiple tabs, to select differents options and then filter data from database that options was selected before.

This is the main page, where you can select date, Estadistics, Parameters, etc.

Once the Inicio tab options are selected, must go into Area tab and select also new options. When you click it into de Area tab the url not change, but content change as you can see below.

Once you select all options from the differents tabs, you must click to the search button, and the data are appeared filtered from options selected before.

My question is how to make this part that changes (Inicio, Area, Tipología tab) in a Django template and link all options selected from differents tabs into one django form?

Now, in my django project and template, I linked each tab into new url, but I think this is not the best options or solution…


Typically, you use some kind of JavaScript library / framework to manage the tabs. For example, we use Bootstrap tabs.

The entire page gets pre-generated with all the data for all tabs.

JavaScript can be attached to elements on a tab for those cases where a selection on “Tab A” is going to affect what is seen on “Tab B”.
(I have one project in progress where we’re using HTMX for that work.)

But that’s all client-side functionality. It’s still only one page being generated - what the tabs do is affect what you see at any one point in time.

First of all thanks for reply.

Well in my case i don’t have much idea about JavaScript.

During these days i was working a little bit with the new website in django. Now I have all the forms fields in 1 url called /seitep/ as you can see.

Then if i click in the Area tab goes to the corresponding url, but tab Area not goes to “active”.

it’s possible when I click into Area url, get the url to put it as active the Area tab and then redirect to /seitep/ to show all the elements from the form?


Those wouldn’t be “tabs” in that case. What you’re describing is just a typical menu.