🍿 CornPop

Radio Example in HTML

5 min read

أكيد كلنا حجزنا حاجة أونلاين قبل كده، تذاكر سينما بقى أو مكان نقضي فيه أجازة. الحجز الأونلاين ده مريح جدًا الصراحة.

عشان كده مطعم “Little Lemon” قرر يضيف نظام حجز ترابيزات للموقع بتاعه. وأكيد إنت عارف إن فورم HTML هيبقى الحل المثالي للموضوع ده.

المشكلة والحل: اختيار حجم ومكان الترابيزة

زي أي مطعم، Little Lemon عنده أحجام ترابيزات مختلفة (زي لشخصين، أربعة، ستة) وأماكن مختلفة الزباين ممكن تقعد فيها (جوه المطعم أو بره).

الفورم لازم تسمح للعميل يختار حجم الترابيزة اللي عايزها، وكمان يحدد إذا كان عايز يقعد جوه المطعم (indoors) ولا بره (outdoors).

بما إن الاختيارات المتاحة محدودة لكل اختيار (حجم أو مكان)، فالأحسن هنا نستخدم radio buttons.

ليه Radio Buttons؟

اتكلمنا عنها قبل كدا في الـ [[Input Types HTML#radio|radio]]

الـ Radio buttons مثالية للفورم دي عشان:

  • بتخليني أعمل مجموعات من الاختيارات (مجموعة للأحجام ومجموعة للأماكن).
  • العميل يقدر يختار اختيار واحد بس من كل مجموعة. مينفعش يختار ترابيزة لشخصين ولأربعة في نفس الوقت، أو يقعد جوه وبره في نفس الوقت!

خطوات عمل الفورم بـ Radio Buttons

يلا بينا نشوف إزاي نعمل الفورم دي خطوة بخطوة.

1. تجهيز الملف الأساسي

  • افتح برنامج الكود بتاعك (زي Visual Studio Code).
  • اعمل ملف جديد وسميه booking.html.
  • اكتب الهيكل الأساسي لملف الـ HTML.
  • ضيف عنصر <form> جوه الـ <body>.
<!DOCTYPE html>
<html>
<head>
    <title>Table Booking</title>
</head>
<body>
    <form>
        <!-- هنحط العناصر هنا -->
    </form>
</body>
</html>

2. إضافة مجموعات الاختيارات (fieldset) وزرار الحجز (button)

اتكلمنا عن الـ Field Set قبل كدا

  • هنضيف اتنين <fieldset> elements: واحد لمجموعة أحجام الترابيزات وواحد لمجموعة أماكن الترابيزات.
    • ليه <fieldset>؟ عشان نفصل الـ radio buttons لمجموعتين منفصلتين. لو محطناش الـ <fieldset>، كل الزراير هتبقى تبع نفس المجموعة، والعميل هيقدر يختار حاجة واحدة بس من كل الفورم (يا حجم يا مكان، وده مش صح).
    • في أول <fieldset>، هنحط الـ id attribute ونخليه size.
    • في تاني <fieldset>، هنحط الـ id attribute ونخليه location.
  • هنضيف <button> element: عشان العميل يدوس عليه لما يخلص اختيار.
    • هنحط الـ type attribute بتاعه يبقى submit.
    • هنكتب جواه كلمة “Book Table”.
<form>
    <fieldset id="size">
        <!-- اختيارات الحجم هنا -->
    </fieldset>

    <fieldset id="location">
        <!-- اختيارات المكان هنا -->
    </fieldset>

    <button type="submit">Book Table</button>
</form>

3. إضافة اختيارات حجم الترابيزة

مطعم Little Lemon عنده 3 أحجام: شخصين، أربعة، ستة. هنعمل لكل حجم input من نوع radio.

  • هنحط 3 <input> elements جوه أول <fieldset> (اللي الـ id بتاعه size).

تفاصيل كل input:

  1. ترابيزة شخصين:

    • <input type="radio" value="two" name="size">
    • بعده هنكتب: Two-person table

  2. ترابيزة أربعة أشخاص (الاختيار الافتراضي):

    • <input type="radio" value="four" name="size" checked>
    • بعده هنكتب: Four-person table
    • ليه checked؟ عشان الترابيزة الأربعة هي أكتر حجز بيحصل، فبنخليها متعلم عليها تلقائي أول ما العميل يفتح الفورم.

  3. ترابيزة ستة أشخاص:

    • <input type="radio" value="six" name="size">
    • بعده هنكتب: Six-person table

ملاحظة مهمة: لازم الـ name attribute في كل الـ radio buttons اللي في نفس المجموعة يكون نفس القيمة (هنا size). ده اللي بيخليهم مجموعة واحدة، وبيخلي الـ browser يعرف إن اختيار واحد بس هو اللي مسموح بيه في المجموعة دي. كمان، الأحسن نخلي قيمة الـ name هي نفسها قيمة الـ id بتاعت الـ <fieldset> عشان ننظم الكود ونبقى عارفين كل مجموعة input تبع أنهي fieldset.

<fieldset id="size">
    <input type="radio" value="two" name="size"> Two-person table
    <br> <!-- Added for spacing -->
    <input type="radio" value="four" name="size" checked> Four-person table
    <br> <!-- Added for spacing -->
    <input type="radio" value="six" name="size"> Six-person table
</fieldset>

(الـ <br> محطوطة هنا بس عشان الشكل يبقى أوضح، ممكن تستخدم CSS لتنسيق أفضل)

4. إضافة اختيارات مكان الترابيزة

فيه اختيارين: جوه المطعم (indoors) وبره (outdoors).

  • هنحط 2 <input> elements جوه تاني <fieldset> (اللي الـ id بتاعه location).

تفاصيل كل input:

  1. جوه المطعم (الاختيار الافتراضي):

    • <input type="radio" value="indoors" name="location" checked>
    • بعده هنكتب: Indoors
    • checked هنا برضو عشان ده الاختيار الأشهر.

  2. بره المطعم:

    • <input type="radio" value="outdoors" name="location">
    • بعده هنكتب: Outdoors

ملاحظة: هنا برضو، الـ name attribute في الاتنين radio buttons دول لازم يكون location عشان يبقوا مجموعة واحدة.

<fieldset id="location">
    <input type="radio" value="indoors" name="location" checked> Indoors
    <br> <!-- Added for spacing -->
    <input type="radio" value="outdoors" name="location"> Outdoors
</fieldset>

5. تجربة الفورم

  • اعمل save للملف وافتحه في الـ browser (أو باستخدام Live Preview).
  • المفروض تشوف: مجموعتين من الاختيارات، كل مجموعة فيها زرار واحد بس متعلم عليه تلقائي.
  • جرب تدوس: لو اخترت اختيار في مجموعة الحجم، وبعدين اخترت اختيار تاني في نفس المجموعة، هتلاقي الاختيار الأولاني اتشال علامته. ونفس الكلام لمجموعة المكان. ده يثبت إن الـ radio buttons شغالة صح.

تحسين تجربة المستخدم (User Experience) على الموبايل

الفورم شغالة، بس فيه مشكلة صغيرة:

  • على شاشة الموبايل الصغيرة، الزراير الدايرة بتاعت الـ radio button نفسها ممكن تكون صعبة شوية إن اليوزر يدوس عليها بدقة.

الحل: نستخدم الـ <label> element.

  • هنحط كل input (الـ radio button) والكلام اللي جنبه بعنصر <label>.
  • الـ <label> بيربط الكلام ده بالـ input بتاعه. النتيجة؟ لو اليوزر داس على الكلام، كأنه داس على الزرار نفسه!

6. تعديل الكود باستخدام <label>

هنعدل الكود اللي فات بالشكل ده:

<!DOCTYPE html>
<html>
<head>
    <title>Table Booking</title>
</head>
<body>
    <form>
        <fieldset id="size">
            <label>
                <input type="radio" value="two" name="size"> Two-person table
            </label>
            <br>
            <label>
                <input type="radio" value="four" name="size" checked> Four-person table
            </label>
            <br>
            <label>
                <input type="radio" value="six" name="size"> Six-person table
            </label>
        </fieldset>
 
        <fieldset id="location">
            <label>
                <input type="radio" value="indoors" name="location" checked> Indoors
            </label>
            <br>
            <label>
                <input type="radio" value="outdoors" name="location"> Outdoors
            </label>
        </fieldset>
 
        <button type="submit">Book Table</button>
    </form>
</body>
</html>

7. التجربة تاني

  • اعمل save وارجع للـ browser.
  • جرب تدوس على الكلام اللي جنب أي radio button. هتلاقي الزرار المقابل ليه بيتعلم عليه.
  • كده الفورم بقت أسهل بكتير في الاستخدام، خصوصًا على الموبايل، وتجربة المستخدم بقت أحسن.

Graph View

Backlinks