Flight Search Form — Travel Booking HTML CSS JS

Every travel booking site opens with the same widget: an origin/destination pair, departure and return dates, a passenger count, and a search button — yet getting the small interactions right (swapping cities, picking a traveler count without a clunky native select, validating dates) is what separates a form that feels professional from one that feels like a prototype. This snippet builds the full pattern in plain HTML, CSS, and vanilla JavaScript.

Round trip vs. one way

A pill-style tab toggle switches between "Round trip" and "One way". Choosing one way hides the return-date field by setting its visibility to hidden (not display: none, which would reflow the row and shift the passenger field) and disables its input so a hidden date can't be submitted. This keeps the three-column date row visually stable while the modes change.

The swap button

Between the From and To fields, a circular button swaps the two input values directly — a one-line value exchange — and adds a .spun class that rotates the icon 180° via a CSS transform transition, removed after 250ms with setTimeout. Because only transform is animated, the rotation is GPU-friendly and converts safely to every export target.

Passenger stepper popover

Rather than a native <select> (which can't show "Adults" and "Children" as separate counters), the traveler field opens a popover with two stepper rows, each with decrement/increment buttons bound to a shared fsfStep(key, delta) function. The function enforces a floor of one adult, a floor of zero children, and a combined cap of eight travelers, then updates both the visible counts and a computed summary label ("2 adults, 1 child") on the trigger button. The popover animates in with opacity and transform: translateY() scale() only — never height — so it stays smooth after every framework export. A document-level click listener closes it when you click outside, and a "Done" button closes it explicitly.

Submit validation

Clicking Search runs through ordered checks — both fields filled, origin and destination not identical (case-insensitive), a departure date chosen, and (in round-trip mode) a return date on or after departure — surfacing the first failing message in a red error line above the button. Passing validation triggers a simulated search: the button disables, shows a spinning ring icon and "Searching…", then resolves to a checkmark label before resetting, so the interaction reads as asynchronous even without a real API call.

Sensible defaults

On load, the departure date defaults to two weeks out and the return date to one week after that, so the form never starts on today's date (which would make the date pickers feel arbitrary) and demonstrates working dates immediately.