🍿 CornPop

Upgrade form Example in HTML

3 min read

المطعم كبر وفتح فرع تاني، وبقى عندهم طلبات جديدة لتحديث الفورم:

التحديثات المطلوبة

  1. حقل تاريخ الحجز: نضيف إمكانية اختيار اليوم.
  2. حقل عدد الأفراد: بدل حجم الترابيزة، يبقى فيه اختيار لعدد الأفراد (بحد أقصى 10).
  3. حقل اختيار الفرع: بما إن بقى فيه فرعين (وممكن يزيدوا)، لازم العميل يختار الفرع.
  4. إزالة حقل المكان: حقل (Indoors/Outdoors) هيتشال.

خطوات التحديث

هنكمل على ملف booking.html ونعدله.

  1. إزالة الحقول القديمة وإضافة أقسام جديدة:

    • هنمسح الـ <fieldset> القديمة بتاعت الحجم والمكان.
    • هنستخدم <div> elements عشان ننظم الحقول الجديدة.

  2. إضافة حقل تاريخ الحجز (<input type="date">):

    • هنستخدم type="date" عشان الـ browser يظهر نتيجة (calendar).
    • هنضيف <label> قبله عشان الوصف والـ accessibility.
     <div>
     <label for="booking_date">Booking Date:</label>
     <input type="date" id="booking_date" name="booking_date">
 </div>

  3. إضافة حقل عدد الأفراد (<input type="range">):

    • اتكلمنا عنها في [[Input Types HTML#range|range]]
    • هنستخدم type="range" عشان نعمل slider.
    • هنحدد أقل قيمة min="1" وأقصى قيمة max="10".
    • هنضيف <label> قبله.
     <div>
     <label for="booking_people">Number of People:</label>
     <input type="range" id="booking_people" name="booking_people" min="1" max="10" value="4"> <!-- قيمة افتراضية 4 -->
 </div>

  4. تحسين حقل عدد الأفراد: إظهار القيمة المختارة (<output> و oninput):

    • اتكلمنا عن output HTML قبل كدا
    • عشان الـ slider لوحده مش بيبين الرقم، هنضيف عنصر <output> بعده عشان يعرض القيمة الحالية.
    • هنربط الـ <output> بالـ <input> عن طريق الـ id والـ for.
    • هنستخدم oninput في الـ <input> عشان نحدّث قيمة الـ <output> أول بأول واليوزر بيحرك الـ slider.
     <div>
     <label for="booking_people">Number of People:</label>
     <input type="range" id="booking_people" name="booking_people" min="1" max="10" value="4"
            oninput="people_output.value = this.value"> <!-- الكود اللي بيحدث الـ output -->
     <output id="people_output" for="booking_people">4</output> <!-- بنعرض القيمة الافتراضية هنا -->
 </div>

  5. إضافة حقل اختيار الفرع (<input list="..."> و <datalist>):

    • اتكلمنا عن الـ datalist HTML
    • عشان المطعم ممكن يفتح فروع تانية، هنستخدم <datalist> عشان نعمل قايمة بتدعم البحث والفلترة.
    • هنضيف <input> ونربطه بالـ <datalist> عن طريق attribute اسمه list (القيمة بتاعته لازم تساوي الـ id بتاع الـ <datalist>).
    • جوه الـ <datalist>، بنحط الاختيارات المتاحة كـ <option value="...">.
    • هنضيف <label> قبله.
     <div>
     <label for="booking_location">Location:</label>
     <input list="locations" id="booking_location" name="booking_location">
     <datalist id="locations">
         <option value="Downtown"></option>
         <option value="Uptown"></option>
         <!-- ممكن نضيف فروع تانية هنا بسهولة في المستقبل -->
     </datalist>
 </div>

الكود النهائي للفورم المحدثة:

<!DOCTYPE html>
<html>
<head>
    <title>Table Booking - Advanced</title>
</head>
<body>
    <h1>Book a Table at Little Lemon</h1>
    <form>
        <div>
            <label for="booking_date">Booking Date:</label>
            <input type="date" id="booking_date" name="booking_date" required> <!-- Added required -->
        </div>
        <br> <!-- Added for spacing -->
        <div>
            <label for="booking_people">Number of People:</label>
            <input type="range" id="booking_people" name="booking_people" min="1" max="10" value="4"
                   oninput="people_output.value = this.value" required> <!-- Added required -->
            <output id="people_output" for="booking_people">4</output>
        </div>
        <br> <!-- Added for spacing -->
        <div>
            <label for="booking_location">Location:</label>
            <input list="locations" id="booking_location" name="booking_location" required> <!-- Added required -->
            <datalist id="locations">
                <option value="Downtown"></option>
                <option value="Uptown"></option>
                <!-- Add more locations here later -->
            </datalist>
        </div>
        <br> <!-- Added for spacing -->
        <button type="submit">Book Table</button>
    </form>
</body>
</html>

(ضفت required لبعض الحقول عشان نتأكد إن اليوزر ميسيبهاش فاضية)

الخلاصة

في الشرح ده، شوفنا إزاي نعمل فورم حجز بسيطة باستخدام radio buttons و <fieldset>، وبعدين إزاي نطورها ونستخدم عناصر HTML متقدمة زي:

  • input type="date" لاختيار التاريخ.
  • input type="range" مع <output> و oninput لاختيار رقم وعرضه.
  • <datalist> لعمل قايمة اختيارات قابلة للبحث والتوسع.

بالتحديثات دي، فورم حجز مطعم Little Lemon بقت عملية أكتر، سهلة الاستخدام، وجاهزة لأي توسعات مستقبلية!

Graph View

Backlinks