العناصر التي لا تحتوي على حالة تركيز هي عناصر لا تحتفظ بحالتها بعد أن تكون غير مركزة. ليس لديهم خاصية لحفظ القيم المدخلة أو تذكر الحالة الحالية. ومن أمثلة هذه العناصر الأزرار والحاويات (الامتداد) وحقول الإدخال.
تم تصميم الأزرار بدون حالة التركيز (الزر) لتنفيذ إجراءات معينة عند النقر عليها. يمكن استخدامها لإرسال نموذج أو الانتقال إلى صفحة أخرى أو أداء وظائف جافا سكريبت التعسفية. يمكن أن تحتوي الأزرار على نص أو رموز أو كلا العنصرين معا. لا يقومون بحفظ أي بيانات وليس لديهم حالة بعد النقر.
الحاويات التي لا تحتوي على حالة تركيز (امتداد) هي عنصر عالمي يمكن استخدامه لتجميع عناصر أخرى أو لنص النمط. وغالبا ما تستخدم جنبا إلى جنب مع كس لتغيير عرض النص أو كتلة من التعليمات البرمجية. لا تقوم الحاويات التي لا تحتوي على حالة التركيز بتنفيذ أي إجراءات ولا تحفظ البيانات.
تسمح حقول الإدخال بدون حالة التركيز (الإدخال) للمستخدمين بإدخال نص أو تحديد قيم من قائمة مقترحة. يمكن استخدامها لإنشاء نموذج أو حقل بحث أو لأغراض أخرى تتطلب إدخال البيانات. لا تحفظ حقول الإدخال بدون حالة التركيز القيم المدخلة بعد إزالة التركيز منها.
- التعريف والميزات
- باستخدام عنصر الزر
- تحسين إمكانية الوصول باستخدام عنصر الزر
- باستخدام عنصر الامتداد
- تحسين إمكانية الوصول باستخدام عنصر الامتداد
- باستخدام عنصر الإدخال
- تحسين إمكانية الوصول باستخدام عنصر الإدخال
- سؤال وجواب
- العنصر الذي يمكن استخدامه لإنشاء زر قابل للنقر?
- كيف يمكنني إضافة أنماط إلى زر باستخدام المغلق?
- هل من الممكن استخدام عنصر الإدخال لإنشاء زر?
- هل من الممكن إنشاء منطقة قابلة للنقر على عنصر الامتداد?
- كيف يمكنني تغيير نمط عنصر عندما يكون في التركيز?
- كيف يمكنني تتبع حدث النقر على زر باستخدام جافا سكريبت?
التعريف والميزات
العناصر التي لا تركز على التركيز هي عناصر تفاعلية مثل الأزرار والامتدادات وحقول الإدخال التي يمكنها تلقي التركيز ومعالجة إدخال المستخدم. إنها عنصر مهم في واجهة المستخدم لتطبيقات الويب الحديثة.
يحدد تركيز عنصر الويب العنصر الذي يتم توجيه لوحة المفاتيح الحالية إليه وإجراءات المستخدم التي سيتم توجيهها إليه. عندما يحصل عنصر بدون حالة تركيز على التركيز ، يمكنه تنفيذ إجراءات معينة أو عرض التغييرات في طريقة العرض الخاصة به.
الأزرار هي واحدة من العناصر الأكثر شيوعا دون حالة التركيز. عادة ما تكون مناطق مستطيلة يتم عرضها على الصفحة ويتم تنشيطها بالنقر فوق المستخدم. يمكن أن تؤدي الأزرار وظائف مثل إرسال نموذج أو تنشيط إجراء معين أو الانتقال إلى صفحة أخرى.
الامتدادات هي عناصر كتلة تستخدم لتجميع أجزاء النص ونمطها. قد تحتوي العناصر التي لا تحتوي على حالة تركيز على فترات لتوسيع الوظائف و/أو تزيين محتوياتها. يمكن استخدام الامتدادات لتمييز كلمات أو عبارات معينة ، أو تغيير لونها أو خطها ، أو إضافة تأثيرات بصرية مثل التسطير أو يتوسطه خط.
تسمح حقول الإدخال للمستخدمين بإدخال بيانات مثل النص أو الأرقام أو التواريخ. يتم عرضها عادة في شكل حقول نصية أو حقول قائمة منسدلة أو أزرار اختيار. يمكن لحقول الإدخال معالجة البيانات التي أدخلها المستخدم والتحقق من صحتها وتنفيذ إجراءات إضافية وفقا للحالة أو السياق الحالي.
بشكل عام ، تعد عناصر التركيز عديمة الجنسية مكونات أساسية لواجهات الويب التي تسمح للمستخدمين بالتفاعل مع تطبيقات الويب وتنفيذ إجراءات مختلفة. لديهم العديد من الميزات والوظائف ، ولكن استخدامها يتطلب الدقة والامتثال للمعايير الحديثة لإمكانية الوصول وسهولة الاستخدام.
باستخدام عنصر الزر
يتم استخدام زر العنصر لإنشاء عناصر تفاعلية يمكن للمستخدم النقر عليها.
الاستخدام الرئيسي لعنصر الزر هو إنشاء أزرار النموذج ، مثل زر الإرسال أو زر إعادة الضبط ، والتي تسمح للمستخدم بالتفاعل مع النموذج.
مثال على استخدام عنصر الزر:
- استبدل" نص الزر " بالنص المطلوب الذي يجب عرضه على الزر.
- احفظ التغييرات وافتح مستند هتمل في متصفح الويب لرؤية النتيجة.
- سيتم عرض عنصر الزر الذي تم إنشاؤه في متصفح الويب كزر يمكن للمستخدم النقر عليه. يمكن أيضا تصميم عنصر الزر باستخدام كس لتغيير مظهره. عادة ما تحتوي أزرار النموذج على أنماط تميزها عن النص العادي.
- مزايا استخدام عنصر الزر:
تتيح إضافة عنصر الزر للمستخدمين الذين يستخدمون الموقع باستخدام لوحة مفاتيح أو شاشة تعمل باللمس التنقل في الموقع بسهولة أكبر واستخدام وظائفه.
يتم تمييز عناصر الزر بوضوح بصريا ، مما يسمح للمستخدم برؤيتها بسهولة وفهم أنها في مجال تفاعله على الفور.
يسمح استخدام عنصر الزر للمطور بالتحكم بشكل أكثر مرونة في الإجراء الذي يجب تنفيذه عند النقر فوق الزر.
عند تطوير تطبيق أو موقع ويب ، يجب اتباع المبادئ التالية لاستخدام عنصر الزر:
استخدم عنصر الزر لتعيين إجراء بديهي يمكن للمستخدم القيام به.
قم بتوفير تسميات واضحة ومفهومة على الأزرار التي تصف الإجراء الذي يقومون به.
استخدم التصميم لتمييز الأزرار بحيث تجذب انتباه المستخدم.
تحقق من أن الأزرار متاحة للتركيز عبر لوحة المفاتيح باستخدام مفتاح" علامة التبويب".
استخدم السمات والخصائص المناسبة لعنصر الزر للسلوك المناسب عند النقر فوقه ، على سبيل المثال ، استخدم السمة
اكتب="زر"
للأزرار التي لا تحتوي على نموذج.
يساعد استخدام عنصر الزر في إنشاء موقع ويب أو تطبيق يمكن الوصول إليه وفهمه لجميع المستخدمين ، بغض النظر عن قدراتهم أو الجهاز الذي يستخدمونه.
- باستخدام عنصر الامتداد
- عنصر الامتداد عبارة عن حاوية صغيرة تستخدم لتصميم أو تمييز جزء من النص داخل عناصر أخرى. لا يوفر معنى دلالي ولا يؤثر على بنية المستند.
- الاستخدام الرئيسي للعنصر هو تغيير نمط أو لون أو موقع الكلمات أو العبارات الفردية على صفحة الويب.
- على سبيل المثال ، يمكنك استخدام عنصر لتمييز الكلمات الرئيسية في نص أو لتطبيق نمط معين على أحرف فردية.
مثل العناصر الصغيرة الأخرى ، فإنه لا يشكل سطرا جديدا ولا يشغل سوى مساحة كبيرة كما هو مطلوب لعرض المحتوى.
مثال على استخدام عنصر :
في هذا النص ، يتم استخدام عنصر لتمييز كلمة واحدة.
سيقوم هذا المثال بإنشاء نص يتم فيه تمييز كلمة "نص" باللون الأحمر.
تحسين إمكانية الوصول باستخدام عنصر الامتداد
العنصر هو عنصر صغير بدون معنى دلالي. ومع ذلك ، من خلال تطبيق أنماط كس والسمات ، يمكن استخدام العنصر لتحقيق إمكانية وصول أفضل لصفحة الويب.
فيما يلي بعض الأمثلة على استخدام العنصر لتحسين إمكانية الوصول:
الإشارة إلى أهمية المعلومات: باستخدام العنصر ، يمكنك إبراز أهمية معلومات معينة والإشارة إليها على الصفحة. على سبيل المثال ، إذا كان هناك تحذير أمان على الصفحة ، يمكنك تمييزه بعنصر وتطبيق أنماط كس المناسبة عليه بحيث يكون مرئيا بسهولة.
وضع العلامات على الكلمات الرئيسية: يمكنك تمييز الكلمات الرئيسية في نص الصفحة باستخدام عنصر وتطبيق الأنماط عليها. سيساعد هذا المستخدم على تسهيل القراءة وفهم جوهر النص بشكل أسرع.
تصحيح الأحرف والهجاء: إذا لزم الأمر ، قم بتصحيح خطأ مطبعي أو تغيير حرف في الصفحة ، يمكنك استخدام العنصر لتمييز هذا الجزء من النص وتطبيق الأنماط المناسبة.
إمكانية الوصول لقارئات الشاشة: يمكن استخدام العنصر للإشارة إلى أهمية أو معنى الكلمات والعبارات للمستخدمين الذين يستخدمون قارئات الشاشة. يمكنك استخدام السمة الأغنية التسمية لإضافة معلومات إضافية والسياق لهذه العناصر.
استخدام العنصر له حدوده ويجب ألا يحل محل استخدام العناصر الدلالية المقابلة. ومع ذلك ، عند تطبيقها بشكل صحيح ودمجها مع أنماط كس والسمات ، عنصر يمكن أن تحسن بشكل كبير من إمكانية الوصول إلى صفحة ويب.
باستخدام عنصر الإدخال
عنصر الإدخال هو واحد من العناصر الأكثر استخداما في هتمل ويستخدم لإنشاء أشكال تفاعلية.
يسمح عنصر الإدخال للمستخدم بإدخال البيانات التي يمكن إرسالها إلى الخادم للمعالجة. يمكن استخدام هذا العنصر لإدخال نص أو أرقام أو تواريخ أو تحديد من قيم محددة مسبقا.
تحدد سمات عنصر الإدخال نوع بيانات الإدخال والمعلمات الإضافية. على سبيل المثال ، يمكنك استخدام سمة النوع="الرقم" لإدخال الأرقام ، وسمة النوع="مربع الاختيار" لإنشاء مربعات اختيار.
- فيما يلي مثال على استخدام عنصر الإدخال لإدخال البيانات في نموذج:
- ينشئ هذا المثال نموذجا يحتوي على حقل لإدخال اسم. يمكن للمستخدم إدخال اسمه وإرسال النموذج للمعالجة.
- هنا مثال على استخدام سمات عنصر الإدخال:
- ينشئ هذا المثال نموذجا يحتوي على حقل إدخال بريد إلكتروني. مطلوب الحقل المراد شغلها ، ويتم توفير تلميح للمستخدم "[email protected] ".
- تحسين إمكانية الوصول باستخدام عنصر الإدخال
يتيح لك استخدام عنصر الإدخال تحسين إمكانية الوصول إلى صفحة الويب نظرا لسماتها وأنواعها المختلفة. فيما يلي عدة طرق لتحسين إمكانية الوصول باستخدام عنصر الإدخال.
سمات إمكانية الوصول:
يدعم عنصر الإدخال عددا من السمات التي تعمل على تحسين إمكانية الوصول إليه. على سبيل المثال ، تسمح لك سمة العنصر النائب بتحديد تلميح للمستخدم سيختفي عند إدخال النص. تشير السمة المطلوبة إلى أن الحقل مطلوب. تحدد سمة الطول الأقصى عدد الأحرف التي يمكن إدخالها.
تجميع أزرار الراديو:
إذا كان هناك العديد من أزرار الاختيار على الصفحة ، فأنت بحاجة إلى تجميعها باستخدام سمة الاسم. سيسمح ذلك للمستخدمين بالتنقل بسهولة بين الخيارات ويسمح للبرامج الخاصة (مثل قارئات الشاشة) بتفسير اختيار المستخدم بشكل صحيح.
تسميات لعناصر الإدخال:
يجب استخدام الملصقات المناسبة لتحسين إمكانية الوصول إلى عناصر الإدخال. تساعد التسمية المستخدم على فهم ما يجب إدخاله أو تحديده بالضبط. يمكن إنشاء التسميات باستخدام عنصر التسمية ، والذي يجب أن يرتبط بعنصر الإدخال باستخدام السمة من أجل أو عن طريق تضمينها داخل عنصر التسمية.
أوصاف نصية بديلة للصور:
إذا تم استخدام عنصر الإدخال لتحميل الصور ، يجب تقديم وصف نص بديل باستخدام السمة ألت. سيسمح ذلك للأشخاص ضعاف البصر بفهم محتويات الصورة والغرض منها.
التحقق من صحة المدخلات:
باستخدام عنصر الإدخال ، يمكنك تحديد أنواع بيانات الإدخال والتحقق من صحتها. تسمح لك سمة النوع بتحديد نوع الحقل ، على سبيل المثال ، حقل نصي أو حقل بريد إلكتروني أو حقل لإدخال رقم هاتف. يساعد هذا المستخدمين على إدخال البيانات الصحيحة ويقلل من عدد الأخطاء.
كل هذه الأساليب تساعد على تحسين إمكانية الوصول إلى صفحة الويب وجعلها أكثر ملاءمة ومفهومة للمستخدمين ذوي الإعاقة. عند إنشاء النماذج ، يجب أن تأخذ هذه التوصيات في الاعتبار وتستخدم عنصر الإدخال ، مع مراعاة إمكانياته المتاحة.
سؤال وجواب
العنصر الذي يمكن استخدامه لإنشاء زر قابل للنقر?