This is really a side-note for this section, which is about communicating with a server. But I want to mention one other thing since we've now introduced HTML forms. Earlier, we implemented a simple set of tabs using JavaScript like this: [PageSource]. This seems to be the way such things are usually done.

I don't know how often it is used, but it is possible to make tabs without JavaScript. JavaScript responds to user clicks, then sets the z-index (or it can be done with display or visibility) accordingly. JavaScript can remember and control which tab is displayed rather naturally, since it is a programming language. For the JavaScript tabs, this is done by simply updating the the DOM.

Using just HTML and CSS seems a problem, since they do not hold state. Except … HTML input elements do. We can use that to make tabs with just HTML and CSS, like so: [PageSource]. This works by using radio buttons to decide which tab appears. Radio buttons are placed before each content div, but set with display:none so they do not appear. They become checked by making the tabs into labels which control each button, so clicking a tab selects its button. The :checked pseudo-class is used to recover the status of the button and control the z-index of the associated tab content box and make it appear on top.

When I first heard about this, it seemed quite insane. Having actually tried it, it seems pretty reasonable.

It is also possible to make click-on overlays, such as more-information boxes, by controlling with a simple check box.