استفسار عن خصائص حقل الإدخال في HTML المدعومة والمخصصة

 الخصائص المذكورة هي خصائص مخصصة يتم تعريفها واستخدامها من قبل الموقع نفسه. قد تختلف الخصائص المدعومة والمفهومة في كل موقع وتطبيق 

يمكن تقسيم خصائص عناصر HTML إلى قسمين:

• خصائص قياسية: وهي خصائص معتمدة من قبل المنظمة العالمية لمعايير الإنترنت (W3C).وهي التي تعلمتها في دروس ال html
• خصائص مخصصة: وهي خصائص غير معتمدة من قبل W3C، ولكنها يمكن استخدامها من قبل مطوري الويب . وتقوم بإنشاءها بنفسك كما في السؤال الخاص بك لاستخدامها مثلاً في javascript

 بالنسبة لتعلم جميع خصائص عناصر html يمكنك الإطلاع على التوثيقات من خلال موسوعة حسوب مثلاً

إليك شرح لكل خصائص العنصر الذي ارسلته :

autocomplete="on":  عندما يتحقق المتصفح من أن هذا الخيار مفعل (on)، فإنه سيقترح تلقائيًا قيم مماثلة لهذا الحقل استنادًا إلى البيانات التي قد تكون قد أدخلتها في وقت سابق على سبيل المثال، عند إدخال اسم مستخدم في هذا الحقل قد تظهر قائمة من الأسماء المقترحة تلقائيًا.

username-field: هذه الخاصية يبدو أنها مخصصة وربما تستخدم في مكان آخر في الكود أو في الجافا سكريبت يبدو أنها تمثل معلومة إضافية حول نوع الحقل وقد تكون مفيدة للأغراض البرمجية الخاصه بالمشروع نفسه.

improve-input: هذه الخاصية تظهر أنها تمثل إجراءات إضافية لتحسين إدخال البيانات في الحقل يمكن أن تشمل هذه الإجراءات تصحيح الأخطاء الإملائية أو تنسيق البيانات ولكنها ايضامخصصة داخل المشروع.

rm-white-spaces: هذه الخاصية تشير إلى أن الحقل سيقوم بإزالة الفراغات البيضاء (المسافات) من النص المدخل تلقائيًا يعني ذلك أن أي مسافات بيضاء في البداية أو النهاية أو بين الكلمات سيتم حذفها مع العلم هذه ليست خاصيه في html بل هي مخصصه ويتم التعامل معها من خلال جافاسكريبت.

to-arabic-numbers: من الواضح ان هذه الخاصية تقوم بتحويل الأرقام في النص المدخل إلى أرقام عربية إذا كانت الأرقام بالأصل بالأحرف اللاتينية مع العلم هذه ليست خاصيه في html بل هي مخصصه ويتم التعامل معها من خلال جافاسكريبت.

to-lower: هذه الخاصية تقوم بتحويل الأحرف في النص المدخل إلى أحرف صغيرة (حالة صغيرة) مع العلم هذه ليست خاصيه في html بل هي مخصصه ويتم التعامل معها من خلال جافاسكريبت.

في المواقعالكبيره او المتوسطهه يقوم المطورين بانشاء او اضافة attributes مخصصه لكي يتمكنوا من التعامل مع حالات معينه اثناء تجرة المستخدم المختلفه.

لمعرفة المزيد عن خصائص عناصر HTML يمكنك زيارة التوثيق الخاص ب HTML .

بتاريخ 29 دقائق مضت قال Hessen Nasser:

إليك شرح لكل خصائص العنصر الذي ارسلته :

autocomplete="on":  عندما يتحقق المتصفح من أن هذا الخيار مفعل (on)، فإنه سيقترح تلقائيًا قيم مماثلة لهذا الحقل استنادًا إلى البيانات التي قد تكون قد أدخلتها في وقت سابق على سبيل المثال، عند إدخال اسم مستخدم في هذا الحقل قد تظهر قائمة من الأسماء المقترحة تلقائيًا.

username-field: هذه الخاصية يبدو أنها مخصصة وربما تستخدم في مكان آخر في الكود أو في الجافا سكريبت يبدو أنها تمثل معلومة إضافية حول نوع الحقل وقد تكون مفيدة للأغراض البرمجية الخاصه بالمشروع نفسه.

improve-input: هذه الخاصية تظهر أنها تمثل إجراءات إضافية لتحسين إدخال البيانات في الحقل يمكن أن تشمل هذه الإجراءات تصحيح الأخطاء الإملائية أو تنسيق البيانات ولكنها ايضامخصصة داخل المشروع.

rm-white-spaces: هذه الخاصية تشير إلى أن الحقل سيقوم بإزالة الفراغات البيضاء (المسافات) من النص المدخل تلقائيًا يعني ذلك أن أي مسافات بيضاء في البداية أو النهاية أو بين الكلمات سيتم حذفها مع العلم هذه ليست خاصيه في html بل هي مخصصه ويتم التعامل معها من خلال جافاسكريبت.

to-arabic-numbers: من الواضح ان هذه الخاصية تقوم بتحويل الأرقام في النص المدخل إلى أرقام عربية إذا كانت الأرقام بالأصل بالأحرف اللاتينية مع العلم هذه ليست خاصيه في html بل هي مخصصه ويتم التعامل معها من خلال جافاسكريبت.

to-lower: هذه الخاصية تقوم بتحويل الأحرف في النص المدخل إلى أحرف صغيرة (حالة صغيرة) مع العلم هذه ليست خاصيه في html بل هي مخصصه ويتم التعامل معها من خلال جافاسكريبت.

في المواقعالكبيره او المتوسطهه يقوم المطورين بانشاء او اضافة attributes مخصصه لكي يتمكنوا من التعامل مع حالات معينه اثناء تجرة المستخدم المختلفه.

لمعرفة المزيد عن خصائص عناصر HTML يمكنك زيارة التوثيق الخاص ب HTML .

لقد فهمت الان يعني انها خصائص خاصن وليست خصائص تبع اللغه

شكرا لك اخي

أولاً وقبل أي شيء السمات المدعومة هي السمات التي تم تحديدها في وثائق HTML الرسمية، وتلك السمات مدعومة من قبل جميع المتصفحات الحديثة.

أما السمات المخصصة هي السمات التي لم يتم تحديدها في وثائق HTML الرسمية، وتلك السمات يتم تخصيصها من خلال جافاسكريبت بناءًا على ما تريده أنت.

 بعض الأمثلة على السمات المدعومة:

• type
• name
• value
• placeholder
• required
• autocomplete

بعض الأمثلة على السمات المخصصة:

• username-field
• improve-input
• rm-white-spaces
• to-arabic-numbers
• to-lower

ويمكنك معرفة السمات المدعومة من خلال موقع MDN أو قم بالبحث عن السمة في جوجل وبجانبها كلمة HTML.

autocomplete="on"

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

username-field

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

improve-input

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

rm-white-spaces

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

to-arabic-numbers

تُحول تلك السمة الأرقام في قيمة الحقل إلى الأبجدية العربية، فمثلاً إذا قام المستخدم بإدخال "12345" في الحقل، فسيتغير النص إلى "١٢٣٤٥".

to-lower

تعمل السمة على تحويل جميع الحروف في قيمة الحقل إلى أحرف صغيرة، وعند قيام المستخدم بإدخال "THIs my Username" في الحقل، فسيتغير النص إلى "thismyusername".

وإليك مثال للتوضيح:

لنفترض أن لدينا صفحة ويب تحتوي على حقل إدخال اسم مستخدم يُستخدم لتسجيل الدخول إلى الموقع، ونريد أن نجعل حقل الإدخال يُعبأ تلقائيًا بالقيمة السابقة لاسم المستخدم، وأن نزيل المسافات البيضاء من قيمة الحقل، وأن نحول الأرقام إلى الأبجدية العربية، وأن نحول جميع الحروف إلى أحرف صغيرة.

فسيكون الكود كالتالي:

<input type="text" name="username" class="login-input name" placeholder="ادخل رمز الكرت هنا" required autocomplete="on" username-field improve-input rm-white-spaces to-arabic-numbers to-lower/>

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

بالإضافة إلى أنه سيتم إزالة المسافات البيضاء من قيمة الحقل، وستتم تحويل الأرقام إلى الأبجدية العربية، وستتحول جميع الحروف إلى أحرف صغيرة.