fork download
copy 
  1. <!DOCTYPE html>
  2. <html lang="th">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>ระบบจองรถไปงาน</title>
  7.     <style>
  8.         body {
  9.             font-family: Arial, sans-serif;
  10.             margin: 20px;
  11.             background-color: #f2f2f2;
  12.         }
  13.         h1 {
  14.             text-align: center;
  15.             color: #333;
  16.         }
  17.         .form-container {
  18.             background-color: #fff;
  19.             padding: 20px;
  20.             border-radius: 8px;
  21.             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  22.             width: 50%;
  23.             margin: 0 auto;
  24.         }
  25.         .form-group {
  26.             margin-bottom: 15px;
  27.         }
  28.         label {
  29.             display: block;
  30.             margin-bottom: 5px;
  31.         }
  32.         input, button {
  33.             width: 100%;
  34.             padding: 10px;
  35.             font-size: 16px;
  36.             border: 1px solid #ddd;
  37.             border-radius: 4px;
  38.         }
  39.         button {
  40.             background-color: #4CAF50;
  41.             color: white;
  42.             cursor: pointer;
  43.         }
  44.         button:hover {
  45.             background-color: #45a049;
  46.         }
  47.         .booking-details {
  48.             margin-top: 20px;
  49.             background-color: #fff;
  50.             padding: 10px;
  51.             border-radius: 8px;
  52.             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  53.         }
  54.     </style>
  55. </head>
  56. <body>
  57.  
  58.     <h1>ระบบจองรถไปงาน</h1>
  59.  
  60.     <div class="form-container">
  61.         <form id="bookingForm">
  62.             <div class="form-group">
  63.                 <label for="name">ชื่อผู้จอง:</label>
  64.                 <input type="text" id="name" name="name" required>
  65.             </div>
  66.  
  67.             <div class="form-group">
  68.                 <label for="date">วันที่ของงาน (DD-MM-YYYY):</label>
  69.                 <input type="text" id="date" name="date" placeholder="เช่น 25-12-2025" required>
  70.             </div>
  71.  
  72.             <div class="form-group">
  73.                 <label for="time">เวลา (HH:MM AM/PM):</label>
  74.                 <input type="text" id="time" name="time" placeholder="เช่น 10:00 AM" required>
  75.             </div>
  76.  
  77.             <div class="form-group">
  78.                 <label for="location">สถานที่ของงาน:</label>
  79.                 <input type="text" id="location" name="location" required>
  80.             </div>
  81.  
  82.             <button type="submit">จองรถ</button>
  83.         </form>
  84.     </div>
  85.  
  86.     <div id="bookingDetails" class="booking-details" style="display: none;">
  87.         <h3>รายละเอียดการจอง</h3>
  88.         <p><strong>ชื่อผู้จอง:</strong> <span id="detailName"></span></p>
  89.         <p><strong>วันที่ของงาน:</strong> <span id="detailDate"></span></p>
  90.         <p><strong>เวลา:</strong> <span id="detailTime"></span></p>
  91.         <p><strong>สถานที่ของงาน:</strong> <span id="detailLocation"></span></p>
  92.     </div>
  93.  
  94.     <script>
  95.         document.getElementById('bookingForm').addEventListener('submit', function(event) {
  96.             event.preventDefault();
  97.  
  98.             // รับข้อมูลจากฟอร์ม
  99.             var name = document.getElementById('name').value;
  100.             var date = document.getElementById('date').value;
  101.             var time = document.getElementById('time').value;
  102.             var location = document.getElementById('location').value;
  103.  
  104.             // แสดงรายละเอียดการจอง
  105.             document.getElementById('detailName').innerText = name;
  106.             document.getElementById('detailDate').innerText = date;
  107.             document.getElementById('detailTime').innerText = time;
  108.             document.getElementById('detailLocation').innerText = location;
  109.  
  110.             // แสดงส่วนรายละเอียดการจอง
  111.             document.getElementById('bookingDetails').style.display = 'block';
  112.  
  113.             // เคลียร์ข้อมูลจากฟอร์ม
  114.             document.getElementById('bookingForm').reset();
  115.         });
  116.     </script>
  117.  
  118. </body>
  119. </html>
  120.  
Success #stdin #stdout 0.03s 25700KB
comments (?)
stdin
copy 
Standard input is empty
stdout
copy 
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ระบบจองรถไปงาน</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f2f2f2;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        .form-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 50%;
            margin: 0 auto;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input, button {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        .booking-details {
            margin-top: 20px;
            background-color: #fff;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>

    <h1>ระบบจองรถไปงาน</h1>

    <div class="form-container">
        <form id="bookingForm">
            <div class="form-group">
                <label for="name">ชื่อผู้จอง:</label>
                <input type="text" id="name" name="name" required>
            </div>

            <div class="form-group">
                <label for="date">วันที่ของงาน (DD-MM-YYYY):</label>
                <input type="text" id="date" name="date" placeholder="เช่น 25-12-2025" required>
            </div>

            <div class="form-group">
                <label for="time">เวลา (HH:MM AM/PM):</label>
                <input type="text" id="time" name="time" placeholder="เช่น 10:00 AM" required>
            </div>

            <div class="form-group">
                <label for="location">สถานที่ของงาน:</label>
                <input type="text" id="location" name="location" required>
            </div>

            <button type="submit">จองรถ</button>
        </form>
    </div>

    <div id="bookingDetails" class="booking-details" style="display: none;">
        <h3>รายละเอียดการจอง</h3>
        <p><strong>ชื่อผู้จอง:</strong> <span id="detailName"></span></p>
        <p><strong>วันที่ของงาน:</strong> <span id="detailDate"></span></p>
        <p><strong>เวลา:</strong> <span id="detailTime"></span></p>
        <p><strong>สถานที่ของงาน:</strong> <span id="detailLocation"></span></p>
    </div>

    <script>
        document.getElementById('bookingForm').addEventListener('submit', function(event) {
            event.preventDefault();

            // รับข้อมูลจากฟอร์ม
            var name = document.getElementById('name').value;
            var date = document.getElementById('date').value;
            var time = document.getElementById('time').value;
            var location = document.getElementById('location').value;

            // แสดงรายละเอียดการจอง
            document.getElementById('detailName').innerText = name;
            document.getElementById('detailDate').innerText = date;
            document.getElementById('detailTime').innerText = time;
            document.getElementById('detailLocation').innerText = location;

            // แสดงส่วนรายละเอียดการจอง
            document.getElementById('bookingDetails').style.display = 'block';

            // เคลียร์ข้อมูลจากฟอร์ม
            document.getElementById('bookingForm').reset();
        });
    </script>

</body>
</html>
https://ideone.com/ZJHfIV
language:
PHP (php 7.3.5)
created:
270 days ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!