مشكلة في كتابة النموذج - HTML

اقتباس

الأولى الرقم السري جاي بالأول بعدين الأسم معنو أنا حاطي بترتيب في الكود أنو يكون الأسم بعدين الباسورد

نلاحظ أن لديك مشكلة في كتابة الشيفرة بحيث أن شيفرة العنصر pasward غير مرتبة بالشكل الصحيح 

<tr>
  <td>
    <label for="user name"> User name: </label>
  </td>
  <td>
    <input type="text" name="user name" id="user name"> <br>
  </td>
</tr>
<td>
  <tr>
    <label for="pasward"> Password:</label>
  </tr>
  <tr>
    <input type="password" name="password" id="password"> <br>
  </tr>

</td>

لذلك نقوم بترتيب الوسوم لتصبح الشيفرة بهذا الشكل 

<tr>
<td>
  <label for="user name"> User name: </label>
</td>
<td>
  <input type="text" name="user name" id="user name"> <br>
</td>
</tr>
<tr>
  <td>
  <label for="pasward"> Password:</label>
</td>

<td>
  <input type="password" name="password" id="password"> <br>
</td>
</tr>

اقتباس

الشي الثاني ما فهمت أيش فائدة Radio و أيش تعكس لي 

فائدة عنصر "radio" في HTML تكمن في إنشاء زر اختيار فردي يسمح للمستخدم بتحديد خيار واحد فقط من بين عدة خيارات. يُستخدم عنصر "radio" عادةً في نماذج الويب لجمع معلومات من المستخدم، مثل استطلاعات الرأي أو الاختيارات الشخصية.

عند استخدام عنصر "radio"، يمكنك تعريف مجموعة من الأزرار التي يمكن للمستخدم اختيار إحداها فقط. ولتحقيق ذلك، يجب تعيين قيمة "name" متماثلة لجميع الأزرار المتعلقة بنفس المجموعة، ولكن يجب تعيين قيمة فريدة لكل زر عن طريق استخدام الخاصية "value".

عندما يقوم المستخدم بتحديد زر "radio"، يتم تمييزه بعلامة دائرية صغيرة على الزر المحدد. يمكنك أيضًا استخدام الخاصية "checked" لتحديد زر "radio" محددًا افتراضيًا عند تحميل الصفحة.

باستخدام عنصر "radio"، يمكنك جمع بيانات المستخدم بشكل منظم واحترافي، حيث يقوم المستخدم بتحديد إجابة واحدة فقط من بين الخيارات المتاحة. يمكنك استخدام البرمجة الجانبية (مثل JavaScript) لمعالجة استجابات المستخدم واتخاذ إجراءات بناءً عليها، مثل حفظ البيانات أو إظهار محتوى إضافي.

اقتباس

الثالث الأشتراك ما قاعد يظهر 

نلاحظ في الشيفرة أنك لم تقوم بكتابة اسم الخطة في الوسم label

          <div>

            <input type="radio" id="star" name="Plan" value="star">

            <label for="star"></label>

          </div>

          <div>

            <input type="radio" id="business" name="Plan" value="business">

            <label for="business"></label>
          </div>
          <div>

            <input type="radio" id="primum" name="Plan" value="primum">

            <label for="primum"></label>

          </div>

لذلك نكتب اسم الخطة بهذا الشكل وسوف تظهر 

<div>

    <input type="radio" id="star" name="Plan" value="star">

    <label for="star">star</label>

</div>

<div>

    <input type="radio" id="business" name="Plan" value="business">

    <label for="business">business</label>

</div>

<div>

    <input type="radio" id="primum" name="Plan" value="primum">

    <label for="primum">primum</label>

</div>

ملاحظة في حال كنت تواجه مشكلة في الدروس المتعلقة في الدورات يمكنك أن تسئل عن المشكلة أسفل الدرس في التعليقات 

سأوضح لك فائدة عنصر <radio> في HTML وهي توفير واجهة لاختيار واحدة فقط من بين مجموعة من الخيارات المتاحة، ونستخدم عنصر <radio> في تشكيل نماذج HTML حيث يحتاج المستخدم إلى اختيار خيار واحد فقط من بين عدة خيارات.

وإليك مثال:

<form>
    <label for="option1">خيار 1</label><br>

  <input type="radio" id="option1" name="radioOptions" value="option1">
  
    <label for="option2">خيار 2</label><br>
  <input type="radio" id="option2" name="radioOptions" value="option2">
  
    <label for="option3">خيار 3</label><br>
  <input type="radio" id="option3" name="radioOptions" value="option3">
</form>

هنا لدينا ثلاثة خيارات (خيار 1، خيار 2، خيار 3) وكل خيار مرتبط بعنصر <radio>.

يحتوي كل عنصر <radio> على نفس القيمة للخاصية name، ولكنها مختلفة بين العناصر المختلفة، مما يعني أن المستخدم بإمكانه اختيار خيار واحد فقط من بين الخيارات المتاحة، وذلك لأن قيمة value مختلفة وتلك هي القيمة التي يتم إرسالها للخادم في الواجهة الخلفية Back-End لمعالجة وتخزين تلك البيانات.

وعندما يتم تحديد خيار، سيظهر الخيار المحدد بنمط اختيار افتراضي (مع دائرة صغيرة ممتلئة)، بينما يظهر الخيارات الأخرى بنمط اختيار غير محدد (مع دائرة صغيرة فارغة)، ويستطيع المستخدم تحديد خيار آخر بالنقر فوقه.

وعند إرسال النموذج، ستُرسل القيمة المرتبطة بالخيار المحدد، وفي المثال، إذا تم اختيار "خيار 2"، ستُرسل القيمة "option2".

وإليك مزيد من المعلومات من موسوعة حسوب:

• الحقل radio
• العنصر <input>

بخصوص مشكلة ترتيب الحقول، قم بإعادة ترتيب الحقول في النموذج بالترتيب الصحيح وفقًا لترتيب العناصر في الكود. يمكنك تبديل مكان حقل "الباسوورد" ووضعه بعد حقل "اسم المستخدم" حتى يتوافق مع الترتيب الصحيح الذي تريده.

أما بخصوص عناصر الاختيار النصية قم بإضافة نص لعناصر الاختيار النصية (Radio Buttons) بوضع النص بين علامتي الفتح والإغلاق لعناصر الـ <label> المرتبطة بكل عنصر اختيار نصي.

على سبيل المثال، يمكنك تحديد النص لعنصر الاختيار النصي "star" كالتالي:

<input type="radio" id="star" name="Plan" value="star">
<label for="star">Star Plan</label>

أما عن المشكلة الأخيرة بخصوص زر الاشتراك، يرجى التأكد من وجود قواعد CSS أو أنماط لتنسيق الأزرار وظهورها بشكل صحيح. يمكنك إضافة قواعد CSS للأزرار أو استخدام مكتبة تنسيق جاهزة مثل Bootstrap لتحقيق تنسيق جميل ومتناسق للأزرار.