اذهب إلى المحتوى

السؤال

Recommended Posts

  • 0
نشر
بتاريخ 47 دقائق مضت قال Moaz Abu Zant:

تمام هلأ بشارك

register.jsx 1.1 kB · 1 تنزيل

قد شاركت الملف يرجى الاطلاع عليه وحل اخطائي البرمجية

 اسم المكون في الكود لديك كان register، ولكنه يجب أن يكون Register مع حرف البداية كبيرًا، ويجب غلق العناصر بشكل صحيح وهم <label> و</label> و<input> و</input> و <form> و </form>.

وعليك بتحديد السمات htmlFor بدلاً من for لوصف العلاقة بين العنصر label وحقل الإدخال.

حيث أن في HTML، يتم استخدام السمة "for" لربط عنصر label بعنصر input المقابل، ولكن يجب استخدام "htmlFor" بدلاً من "for" عند كتابة JSX في React.

والسبب يعود إلى أن "for" هو كلمة محجوزة في JavaScript، لذا تم استخدام "htmlFor" بدلاً منها في JSX لتجنب التعارض.

أيضًا تصحيح الأسماء للحقول input لتكون name بدلاً من Name، فاسم الخاصية بحرف صغير وليس كبير في HTML.

وأخيرًا تصحيح العنصر input باسم معرف exampleInputPassword1 وتغيير اسمه إلى exampleInputPassword2 ليتوافق مع العلامة المقابلة له في label.

وإليك الكود بعد التعديل:

import React from 'react';

export default function Register() {
  return (
    <div className="container mt-5 pt-5">
      <form className='w-50 m-auto text-center'>

        <div className="mb-3">
          <label htmlFor="exampleInputEmail1" className="form-label">Email address</label>
          <input type="email" className="form-control" id="exampleInputEmail1" name="email" />
        </div>

        <div className="mb-3">
          <label htmlFor="exampleInputName" className="form-label">Name</label>
          <input type="text" className="form-control" id="exampleInputName" name="name" />
        </div>

        <div className="mb-3">
          <label htmlFor="exampleInputPassword1" className="form-label">Password</label>
          <input type="password" className="form-control" id="exampleInputPassword1" name="password" />
        </div>

        <div className="mb-3">
          <label htmlFor="exampleInputPassword2" className="form-label">Confirm Password</label>
          <input type="password" className="form-control" id="exampleInputPassword2" name="confirmPassword" />
        </div>

        <button type="submit" className="btn btn-primary">Submit</button>
      </form>
    </div>
  );
}

 

  • 0
نشر
بتاريخ On 15‏/6‏/2023 at 22:20 قال Moaz Abu Zant:

تمام هلأ بشارك

register.jsx 1.1 kB · 2 تنزيلات

قد شاركت الملف يرجى الاطلاع عليه وحل اخطائي البرمجية

الكود يبدو صحيحًا الآن كما في التعليق السابق، ولكن يمكن إجراء بعض التحسينات البسيطة لتحسين قابلية القراءة والصيانة، مثل:

  • يمكن إزالة الفراغات الزائدة في بعض الأماكن لتحسين التنسيق.
  • يمكن إعطاء العنصر الذي يحتوي على الحقول المدخلة والأزرار اسمًا أكثر وضوحًا ومعبرًا، مثل "register-form".
  • يمكن إضافة تعليقات لشرح الكود وتوضيح الوظيفة الخاصة بكل جزء منه.
  • يمكن إعطاء العناصر الرئيسية داخل النموذج أسماء معينة، مثل "email", "name", "password" و "cpassword"، للتعامل معها في الأكواد اللاحقة.

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...