Railway Reservation System

Railway Reservation System – HTML प्रोजेक्ट को आसान हिंदी में समझिए

आज के डिजिटल दौर में ऑनलाइन टिकट बुकिंग एक आम चीज़ हो गई है, खासकर रेलवे में। यदि आप HTML और CSS सीख रहे हैं, तो "Railway Reservation System" का यह डेमो प्रोजेक्ट आपको असली वेबसाइट की फील देने के लिए काफी है।
आइए इस प्रोजेक्ट के हर हिस्से को देखिए और समझिए कि यह कैसे काम करता है।

1️⃣ Structure: क्या-क्या है इस पेज में?

• Header: सबसे ऊपर “Railway Reservation System” का टाइटल।
• Booking Form (Main Form): टिकट बुक करने के लिए एक सुंदर फॉर्म।
• Footer: सबसे नीचे पेज के राइट्स की जानकारी।

2️⃣ Header सेक्शन – पेज की पहचान

Railway Reservation System

• ये हिस्सा नीले रंग के बैकग्राउंड के साथ है।
• पेज के टॉप पर टाइटल को सेंटर में शो करता है।

3️⃣ Main Container और फॉर्म – टिकट की सारी डिटेल्स

सारा फॉर्म एक container में है जिसे स्टाइलिंग के लिए कार्ड जैसा लुक दिया गया है। इसमें यूज़र को अपनी टिकट बुक करने के लिए जरूरी डिटेल्स डालनी हैं।

फॉर्म में क्या-क्या पूछा गया?

1. From: स्टेशन का नाम जहाँ से यात्रा शुरू होगी
2. To: डेस्टिनेशन स्टेशन का नाम
3. Date of Travel: किस तारीख को सफर करना है
4. Class: टिकट की क्लास (Sleeper, 3A, 2A, 1A)
5. Number of Seats: कितनी सीट्स चाहिए (1 से 4 तक)
6. Passenger Name: यात्री का नाम
7. Phone Number: कांटैक्ट नंबर

फॉर्म कैसे बना है?

• हर इनफॉर्मेशन के लिए के अंदर और इनपुट बॉक्स है।
• टिकट क्लास और सीट संख्या के लिए `` टैग है जिसमें ड्रॉपडाउन से चून सकते हैं।
• फॉर्म सबमिट करने के लिए "Book Now" बटन है।

Form का कोड:

<form>
  <!-- हर फील्ड की HTML जैसी ऊपर दिखाया गया है -->
  <input type="submit" value="Book Now" />
</form>

4️⃣ Footer – पेज का अंतिम हिस्सा

© 2025 Railway Reservation System. All rights reserved.

• हर पेज के नीचे कॉपीराइट सूचना।
• डिजाइन में यह फिक्स्ड है—यानि हमेशा स्क्रीन के नीचे रहेगा।

5️⃣ CSS – पेज को सुंदर बनाने का तरीका

इस प्रोजेक्ट में CSS का भी खूब ध्यान रखा गया है:

• Background Color: हल्का ग्रे
• Container/Card: गोल किनारे और शैडो
• Header/Footer: नीला रंग, व्हाइट टेक्स्ट
• इंटरेक्टिव बटन: Button hover पर रंग बदल जाता है
• Responsive: मोबाइल-व्यू के लिए भी स्टाइलिंग

6️⃣ User Experience – ये पेज कैसे आसान बनाता है?

• सारी इनफार्मेशन Step-wise & Clear UI में।
• मोबाइल पर भी सुंदर दिखता है।
• ज़रूरी फील्ड्स जैसे नाम, फोन अनिवार्य है (required)।
• हर इनपुट को यूज़र गाइड (placeholder) से समझाया गया है।

7️⃣ यह प्रोजेक्ट कैसे मदद करता है?

• HTML Form Handling सीखना: Input, Select, Label सही तरीके से लगाना।
• Responsive Design: CSS की सहायता से मोबाइल-अनुकूल बनाना।
• प्रैक्टिस: IT/CS स्टूडेंट्स को फॉर्म डिज़ाइन, लेआउट और बेसिक वैलिडेशन समझने के लिए एक शानदार बेसिक प्रोजेक्ट।

निष्कर्ष

इस तरह के Railway Reservation HTML पेज से आप समझ सकते हैं कि असली बुकिंग फॉर्म में यूज़र से क्या-क्या जानकारियां ली जाती हैं और उसे कैसे एक सुंदर व उपयोगी पेज में बदला जा सकता है।

Full code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Railway Reservation System</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f4f4f4;
        color: #333;
      }

      header {
        background-color: #004aad;
        color: white;
        text-align: center;
        padding: 20px;
      }

      header h1 {
        margin: 0;
        font-size: 2em;
      }

      .container {
        max-width: 800px;
        margin: 20px auto;
        padding: 20 Yellowstone;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      }

      .form-section {
        background-color: white;
        padding: 20px;
        margin: 20px;
        border-radius: 5px;
      }

      form {
        display: flex;
        flex-direction: column;
        gap: 15px;
      }

      input,
      select {
        padding: 10px;
        font-size: 1em;
        border: 1px solid #ccc;
        border-radius: 5px;
        width: 100%;
        box-sizing: border-box;
      }

      input[type="submit"] {
        background-color: #004aad;
        color: white;
        border: none;
        cursor: pointer;
        transition: background-color 0.3s;
      }

      input[type="submit"]:hover {
        background-color: #003087;
      }

      .form-group {
        margin-bottom: 15px;
      }

      label {
        font-weight: bold;
        margin-bottom: 5px;
        display: block;
      }

      footer {
        text-align: center;
        padding: 20px;
        background-color: #004aad;
        color: white;
        position: fixed;
        bottom: 0;
        width: 100%;
      }

      @media (max-width: 600px) {
        .container {
          margin: 10px;
          padding: 10px;
        }

        header h1 {
          font-size: 1.5em;
        }
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Railway Reservation System</h1>
    </header>
    <div class="container">
      <div class="form-section">
        <h2>Book Your Train Ticket</h2>
        <form>
          <div class="form-group">
            <label for="from">From:</label>
            <input
              type="text"
              id="from"
              placeholder="Enter starting station"
              required
            />
          </div>
          <div class="form-group">
            <label for="to">To:</label>
            <input
              type="text"
              id="to"
              placeholder="Enter destination station"
              required
            />
          </div>
          <div class="form-group">
            <label for="date">Date of Travel:</label>
            <input type="date" id="date" required />
          </div>
          <div class="form-group">
            <label for="class">Class:</label>
            <select id="class" required>
              <option value="" disabled selected>Select class</option>
              <option value="SL">Sleeper (SL)</option>
              <option value="3A">AC 3 Tier (3A)</option>
              <option value="2A">AC 2 Tier (2A)</option>
              <option value="1A">AC First Class (1A)</option>
            </select>
          </div>
          <div class="form-group">
            <label for="seats">Number of Seats:</label>
            <select id="seats" required>
              <option value="" disabled selected>Select number of seats</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
            </select>
          </div>
          <div class="form-group">
            <label for="name">Passenger Name:</label>
            <input
              type="text"
              id="name"
              placeholder="Enter passenger name"
              required
            />
          </div>
          <div class="form-group">
            <label for="phone">Phone Number:</label>
            <input
              type="tel"
              id="phone"
              placeholder="Enter phone number"
              required
            />
          </div>
          <input type="submit" value="Book Now" />
        </form>
      </div>
    </div>
    <footer>
      <p>&copy; 2025 Railway Reservation System. All rights reserved.</p>
    </footer>
  </body>
</html>