Creating an HTML template for an air ticket booking site involves structuring various sections such as navigation, search form, flight options, booking details, and footer. This template provides a comprehensive structure for an air ticket booking website, including essential functionalities like flight search, displaying flight details, and confirming bookings. Adjust and expand it according to your specific requirements and business logic.
Create a HTML template of air ticket booking site
Here are some steps:
- Header Section: Contains the website title (
<h1>) and navigation links (<nav>). - Home Section: Includes a flight search form (
<form>) with input fields for departure city, destination city, departure date, and number of passengers. The form has an event listener to handle form submission. - Flights Section: Initially displays flight search results (
<div id="flight-results">). Each flight item (<div class="flight-item">) includes flight details and a “Select Flight” button that triggers JavaScript to display flight details and booking form. - Flight Details Section: Shows details of the selected flight (
<div id="selected-flight">) and a booking form (<div id="booking-form">) for passengers to confirm their booking. - About Section: Provides information about the air ticket booking service (
<h2>and<p>). - Contact Section: Displays contact details for inquiries or support (
<h2>,<p>). - Footer: Contains copyright information (
<footer>).
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Air Ticket Booking</title>
<link rel="stylesheet" href="styles.css"> <!-- Link to your external CSS file -->
</head>
<body>
<header>
<div class="container">
<h1>Air Ticket Booking</h1>
<nav>
<a href="#home">Home</a>
<a href="#flights">Flights</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
</div>
</header>
<section id="home">
<div class="container">
<h2>Find Your Flights</h2>
<form action="#" method="GET" id="search-form">
<div class="form-group">
<label for="departure">Departure:</label>
<input type="text" id="departure" name="departure" placeholder="Enter departure city" required>
</div>
<div class="form-group">
<label for="destination">Destination:</label>
<input type="text" id="destination" name="destination" placeholder="Enter destination city" required>
</div>
<div class="form-group">
<label for="departure-date">Departure Date:</label>
<input type="date" id="departure-date" name="departure-date" required>
</div>
<div class="form-group">
<label for="passengers">Passengers:</label>
<input type="number" id="passengers" name="passengers" min="1" max="10" required>
</div>
<button type="submit">Search Flights</button>
</form>
</div>
</section>
<section id="flights">
<div class="container">
<h2>Available Flights</h2>
<div id="flight-results">
<!-- Flight search results will be dynamically added here -->
</div>
</div>
</section>
<section id="flight-details">
<div class="container">
<h2>Flight Details</h2>
<div id="selected-flight">
<!-- Selected flight details will be dynamically added here -->
</div>
<div id="booking-form">
<h3>Book Your Flight</h3>
<form action="#" method="POST">
<div class="form-group">
<label for="fullname">Full Name:</label>
<input type="text" id="fullname" name="fullname" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" required>
</div>
<button type="submit">Confirm Booking</button>
</form>
</div>
</div>
</section>
<section id="about">
<div class="container">
<h2>About Us</h2>
<p>Learn more about our airline booking service.</p>
</div>
</section>
<section id="contact">
<div class="container">
<h2>Contact Us</h2>
<p>Reach out to us for any inquiries or support.</p>
<p>Email: [email protected]</p>
<p>Phone: +1 (123) 456-7890</p>
</div>
</section>
<footer>
<div class="container">
<p>© 2024 Air Ticket Booking. All rights reserved.</p>
</div>
</footer>
<!-- Example JavaScript for handling form submission and dynamic content -->
<script>
// Example JavaScript for handling form submission and dynamic content
document.getElementById('search-form').addEventListener('submit', function(event) {
event.preventDefault();
// Replace with actual search functionality (fetching data from server)
// Example: Fetch flight data based on form inputs
const departure = document.getElementById('departure').value;
const destination = document.getElementById('destination').value;
const departureDate = document.getElementById('departure-date').value;
const passengers = document.getElementById('passengers').value;
// Dummy data for demonstration
const dummyFlights = [
{ flightNumber: 'FL123', departure: 'City A', destination: 'City B', date: 'DD/MM/YYYY', price: 'XX.XX' },
{ flightNumber: 'FL456', departure: 'City C', destination: 'City D', date: 'DD/MM/YYYY', price: 'XX.XX' }
];
// Display dummy flight results (replace with actual fetched data)
const flightResultsDiv = document.getElementById('flight-results');
flightResultsDiv.innerHTML = '';
dummyFlights.forEach(flight => {
const flightItem = document.createElement('div');
flightItem.classList.add('flight-item');
flightItem.innerHTML = `
<h3>${flight.flightNumber}</h3>
<p>Departure: ${flight.departure}</p>
<p>Destination: ${flight.destination}</p>
<p>Date: ${flight.date}</p>
<p>Price: $${flight.price}</p>
<button onclick="selectFlight('${flight.flightNumber}')">Select Flight</button>
`;
flightResultsDiv.appendChild(flightItem);
});
});
function selectFlight(flightNumber) {
// Replace with actual functionality to fetch and display flight details
const selectedFlightDiv = document.getElementById('selected-flight');
selectedFlightDiv.innerHTML = `
<h3>Selected Flight: ${flightNumber}</h3>
<p>Details of the selected flight will be displayed here.</p>
`;
// Show booking form after selecting a flight
document.getElementById('booking-form').style.display = 'block';
}
</script>
</body>
</html>
OUTPUT:
