برمجة فورم حجز طاولة مع الكود اهداء

#1 03-05-2025, 03:20 AM

http://hawee200.rf.gd/index.html
HTML و CSS و JAVASCRIPT
هذا الكود عدولو فيه

كود:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>حجز طاولة</title>
    <style>
     body {
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            flex-direction: column; /* لجعل العناصر تظهر بشكل عمودي */
        }
        
        form {
            background-color: rgb(110, 5, 40);
            padding:10px;
            width: 80%;
            max-width: 400px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            border-radius: 8px;
        }

        form input, form select {
            background-color: #fff;
            border: none;
            outline: none;
            color: #000;
            padding: 10px;
            border-radius: 4px;
        }

        form label{
            color: #fff;
            text-align: center;
        }

        .book-button {
            background-color: #6b0202;
            
        }


        #error-message {
            color: #fff;
            text-align: center;
        }

        #booking-details {
            margin-top: 20px;
            text-align: center;
            color: #6b0202;
        }
    </style>
</head>
<body>
    
     <h3>( برمجة هاوي حجز طاولة)</h3>
     
    <form id="form">
        <div class="background-image"></div>
    
        <label for="name">الاسم</label>
        <input type="text" id="name" name="name">

        <label for="phone">الهاتف</label>
        <input type="text" id="phone" name="phone">

        <label for="table-number">رقم الطاولة</label>
        <input type="text" id="table-number" name="table-number">

        <label for="guests">عدد الضيوف</label>
        <select id="guests" name="guests" class="guests">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>

        <label for="date">التاريخ</label>
        <input type="date" id="date" name="date">

        <label for="time">الوقت</label>
        <input type="time" id="time" name="time">

        <button type="button" id="book-button">حجز الطاولة</button>
        <p id="error-message"></p>
    </form>
    <div id="booking-details"></div>

    <script>
        const form = document.getElementById('form');
        const bookButton = document.getElementById('book-button');
        const errorMessage = document.getElementById('error-message');
        const bookingDetails = document.getElementById('booking-details');

        bookButton.addEventListener('click', (e) => {
            e.preventDefault();
            const name = document.getElementById('name').value;
            const phone = document.getElementById('phone').value;
            const tableNumber = document.getElementById('table-number').value;
            const date = document.getElementById('date').value;
            const time = document.getElementById('time').value;
            const guests = document.getElementById('guests').value;

            if (name === '' || phone === '' || tableNumber === '' || date === '' || time === '') {
                errorMessage.textContent = 'يرجى ملء جميع الحقول';
            } else {
                errorMessage.textContent = '';
                const bookingDetailsHtml = `
  <h2>هلا وغلا تم تسجيل طاولة باسمك سيتم الاتصال بك </h2>
                      <h2>تفاصيل الحجز</h2>
                    <p>الاسم: ${name}</p>
                    <p>الهاتف: ${phone}</p>
                    <p>رقم الطاولة: ${tableNumber}</p>
                    <p>عدد الضيوف: ${guests}</p>
                    <p>التاريخ: ${date}</p>
                    <p>الوقت: ${time}</p>
                `;
                bookingDetails.innerHTML = bookingDetailsHtml;
            }
        });
    </script>
</body>
</html>

ناطق العبيدي معجب بهذا

الموضوع الأصلي: برمجة فورم حجز طاولة مع الكود اهداء || الكاتب: هاوي || المصدر: منتديات سهام الروح

سهام الروح

كلمات البحث

العاب ، برامج ، سيارات ، هاكات ، استايلات , مسابقات ، فعاليات ، قصص ، مدونات ، نكت , مدونات , تصميم , شيلات , شعر , قصص , حكايات , صور , خواطر , سياحه , لغات , طبيعة , مناضر, جوالات , حب , عشق , غرام , سياحه , سفر

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق
انواع عرض الموضوع
الانتقال إلى العرض العادي الانتقال إلى العرض المتطور العرض الشجري

♥ ☆ ♥اعلانات منتدى سهام الروح♥ ☆ ♥

♥ ☆ ♥تابع اعلانات منتدى سهام الروح♥ ☆ ♥

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)

الإهداءات