الإدخال هو أحد العناصر الرئيسية لنماذج الويب التي تسمح للمستخدم بإدخال البيانات. اعتمادا على نوع سمة النوع ، يمكن استخدام عنصر الإدخال لإنشاء أنواع مختلفة من حقول الإدخال ، مثل حقول النص ومربعات الاختيار والأزرار وما إلى ذلك.
واحدة من الطرق المثيرة للاهتمام لاستخدام عنصر الإدخال هو استخدامه كمرجع. للقيام بذلك ، يكفي تحديد قيمة سمة النوع التي تساوي "الزر" وتعيين سمة النقر ، حيث تحدد الوظيفة أو البرنامج النصي الذي يجب تنفيذه عند النقر فوق الارتباط. وبالتالي ، عند النقر فوق عنصر الإدخال ، بدلا من سلوك الارتباط القياسي ، سيتم تنفيذ وظيفة مخصصة أو برنامج نصي.
مثال على استخدام الإدخال كرابط:
في هذا المثال ، عند النقر فوق الزر ، ستظهر نافذة منبثقة بها رسالة "نقرت على الرابط!". هذه مجرد واحدة من العديد من الطرق لاستخدام عنصر الإدخال كمرجع. باستخدام جافا سكريبت ، يمكنك إنشاء نصوص ووظائف أكثر تعقيدا سيتم تنفيذها عند النقر فوق الزر.
- المدخلات بدلا من الارتباط: مزايا وعيوب
- مزايا استخدام
- عيوب استخدام
- متى تستخدم
- أمثلة على استخدام المدخلات لإنشاء روابط
- كيفية استخدام الإدخال بدلا من الارتباط
- إدخال أسلوب كحلقة وصل
- الإدخال بدلا من الارتباط: ميزات لتحسين محركات البحث
- كيفية إنشاء ارتباط إدخال باستخدام هتمل و كس
- سؤال وجواب
- كيف يمكنني استخدام المدخلات كمرجع في التعليمات البرمجية?
- ما هي الميزات عند استخدام الإدخال كحلقة وصل?
- ما هي الأمثلة على استخدام المدخلات كحلقة وصل هناك?
- هل من الممكن استخدام المدخلات كحلقة وصل مع المعلمات?
- ما هي مزايا استخدام المدخلات كحلقة وصل?
المدخلات بدلا من الارتباط: مزايا وعيوب
يتقدم تطوير الويب باستمرار ، ويتم تقديم أدوات وميزات جديدة للمطورين. أحد هذه الاحتمالات هو استخدام علامة بدلا من رابط كلاسيكي. في هذه المقالة ، سنلقي نظرة على مزايا وعيوب استبدال الروابط بالمدخلات ونفهم متى نستخدم كل نهج.
مزايا استخدام
- المظهر: باستخدام أنماط كس ، يمكنك إنشاء إدخال يشبه الارتباط. يمكن أن يكون هذا مفيدا إذا كنت بحاجة إلى الاحتفاظ بنمط موحد لجميع العناصر التفاعلية على الصفحة.
- الراحة: اعتاد المستخدمون على استخدام المدخلات لأشكال مختلفة ، لذا فإن استخدامها يمكن أن يوفر لهم واجهة أكثر دراية وسهولة في الاستخدام.
- إمكانية تغيير الدولة: تتمتع المدخلات بالقدرة على تغيير حالتها أثناء التفاعلات المختلفة ، على سبيل المثال ، ليتم تمييزها عند التمرير أو أن تكون غير نشطة في ظل ظروف معينة.
عيوب استخدام
- الحمل الدلالي: قد يكون استخدام الكود المصدري أكثر صعوبة في الفهم والمعالجة ، نظرا لأن المدخلات مرتبطة بشكل أساسي بالنماذج.
- وظائف محدودة: تحتوي المدخلات على مجموعة محدودة من الميزات مقارنة بالروابط. على سبيل المثال ، لا يمكنك فتح علامة تبويب جديدة أو التمرير إلى المرساة باستخدام الإدخال.
متى تستخدم
قد يكون من المستحسن استخدام الروابط بدلا من الروابط في الحالات التالية:
- عندما تحتاج إلى إنشاء واجهة حيث سيتم وضع العديد من الروابط داخل عنصر النموذج ، وقد تتغير حالتها اعتمادا على القيم التي تم إدخالها.
- عندما تحتاج إلى إنشاء نمط واحد لجميع العناصر التفاعلية على الصفحة.
- عندما يتم تقديم المستخدم مع مجموعة من الإجراءات التي تتطلب إدخال البيانات.
في حالات أخرى ، عندما يكون من الضروري تزويد المستخدم بفرصة النقر على الرابط ، يوصى باستخدام العنصر الكلاسيكي.
أمثلة على استخدام المدخلات لإنشاء روابط
1. إنشاء رابط بسيط
لإنشاء ارتباط باستخدام علامة الإدخال ، استخدم سمة النوع مع القيمة " زر " والسمة عند النقر لتحديد الإجراء عند النقر فوق الزر:
في هذا المثال ، سيؤدي النقر فوق الزر إلى التبديل إلى العنوان المحدد في سمة هريف.
2. إنشاء رابط مع معلمات إضافية
تسمح لك علامة الإدخال أيضا بتمرير معلمات إضافية إلى عنوان الارتباط. على سبيل المثال ، يمكنك تمرير القيمة من حقل الإدخال عند الانتقال إلى صفحة أخرى:
في هذا المثال ، ستتم إضافة القيمة من حقل الإدخال إلى نهاية العنوان بعد"?"حرف ومرت إلى صفحة أخرى في المعلمة" الاسم". على سبيل المثال ، إذا تم إدخال اسم " جون " في حقل الإدخال ، فإن النقر فوق الزر سيتحول إلى العنوان "https://example.com?name=John ".
3. إنشاء روابط داخل الجدول
في علامة الجدول ، يمكنك استخدام الإدخال لإنشاء روابط داخل الخلايا:
في هذا المثال ، يتم إنشاء رابطين داخل خلايا الجدول. عند النقر فوق كل زر من الأزرار ، ستتم إعادة توجيهك إلى العنوان المقابل.
4. إنشاء روابط تأكيد
لإنشاء روابط تتطلب تأكيدا لإجراء ما ، يمكنك استخدام وظيفة التأكيد والبناء الشرطي في سمة أونكليك:
في هذا المثال ، عند النقر فوق الزر ، سيظهر مربع حوار يسأل "هل أنت متأكد أنك تريد الحذف?". إذا نقر المستخدم على "موافق" ، فسيتم النقر فوق الارتباط "https://example.com/delete" ، وإذا نقر على إلغاء ، فسيتم إلغاء الإجراء.
كيفية استخدام الإدخال بدلا من الارتباط
عادة ما يتم استخدام عنصر الإدخال لإنشاء حقول إدخال على صفحة ويب ، ولكن يمكن استخدامه أيضا بدلا من الروابط لتنفيذ وظائف مختلفة.
فيما يلي بعض الأمثلة على كيفية استخدام الإدخال بدلا من الروابط:
- تصفح الصفحة: بدلا من الروابط النموذجية للتنقل بين الصفحات ، يمكنك إنشاء أزرار باستخدام الإدخال. يمكن أن يكون هذا مفيدا إذا كنت ترغب في ترتيب التنقل في شكل قائمة من الأزرار أو شيء غير قياسي.
- إرسال نموذج: عادة ما يستخدم زر الإرسال بنوع "إرسال" لإرسال نموذج. ومع ذلك ، بالنسبة لبعض التصميمات ، قد يكون من المفيد استخدام الإدخال بنوع "الزر" ومعالج الأحداث الذي سيرسل النموذج عند النقر فوق الزر.
- تغيير حالة العنصر: في بعض الأحيان يكون من الضروري تغيير حالة العنصر على صفحة الويب. بدلا من استخدام رابط ، يمكنك استخدام إدخال مع نوع "مربع الاختيار" أو "الراديو" لتبديل الحالة.
توضح الأمثلة المقدمة فقط إمكانيات قليلة لاستخدام الإدخال بدلا من الروابط. في الواقع ، الإدخال هو أداة قوية لديها مجموعة واسعة من الوظائف. من المهم أن تتذكر أن استخدام الإدخال بدلا من الروابط قد يتطلب بعض المعالجة الإضافية باستخدام جافا سكريبت أو أدوات تطوير صفحات الويب الأخرى.
إدخال أسلوب كحلقة وصل
في بعض الأحيان ، عند تطوير واجهات المستخدم ، يصبح من الضروري تصميم عناصر النموذج ، مثل الإدخال ، كرابط. قد تحتاج إلى هذا عندما تحتاج إلى إنشاء زر مع نص أو صورة تبدو وكأنها رابط.
يتم تحقيق القدرة على أسلوب الإدخال كحلقة وصل باستخدام كس. للقيام بذلك ، يمكنك استخدام الفئات الزائفة التي تسمح لك بتعيين أنماط لحالة عنصر معين.
واحدة من الطبقات الزائفة التي تسمح لك أسلوب الإدخال كحلقة وصل هو :تحوم. يتم تطبيقه على عنصر عندما يتم تمرير مؤشر الماوس فوقه. باستخدام: التمرير ، يمكنك تعيين أنماط لتغيير لون الخلفية والنص والحدود والخصائص الأخرى لعنصر ما عند تحريك المؤشر فوقه.
هنا مثال على إدخال التصميم كحلقة وصل:
في هذا المثال ، سيبدو الإدخال رابطا بنص أزرق ونمط تحته خط. عند التمرير فوق عنصر بمؤشر الماوس ، سيتغير لون النص إلى اللون الأحمر.
يمكنك أيضا إضافة رسوم متحركة عند التمرير فوق عنصر باستخدام الفئة الزائفة: التمرير وخاصية الانتقال. على سبيل المثال ، يمكنك تعيين لون الخلفية أو حجم الخط للتغيير مع انتقال سلس.
في هذه الحالة ، عند التمرير فوق عنصر باستخدام مؤشر الماوس ، سيتغير لون النص بسلاسة لمدة 0.3 ثانية.
من المهم ملاحظة أن كل متصفح يمكنه التعامل مع تصميم عناصر النموذج بطرق مختلفة. قد لا تعمل بعض الأنماط في بعض المتصفحات أو قد يتم تغييرها بواسطة المتصفح الافتراضي.
لذلك ، عند تصميم الإدخال كرابط ، من الضروري اختبار الكود في متصفحات مختلفة ومراعاة الاختلافات المحتملة في سلوكهم.
الإدخال بدلا من الارتباط: ميزات لتحسين محركات البحث
يمكن أن يؤثر استخدام عنصر الإدخال بدلا من الرابط التقليدي (أ) على تحسين محسنات محركات البحث لصفحة الويب. مثل أي عنصر آخر ، يمكن أن يحتوي الإدخال على سمات مثل المعرف والفئة التي يمكن استخدامها لتحسين محركات البحث. ومع ذلك ، هناك بعض الميزات التي يجب مراعاتها عند استخدام الإدخال بدلا من الارتباط.
- عدم وجود روابط مرساة. على عكس العلامة ، لا يمكن أن يحتوي الإدخال على سمة هريف التي تسمح لك بإنشاء روابط مرساة. يمكن أن تكون روابط الارتساء مفيدة للربط بقسم معين من الصفحة. إذا كان الوصول إلى قسم معين من الصفحة مهما ، فقد لا يكون استخدام الإدخال هو الخيار الأنسب.
- لا توجد طريقة لفتح الرابط في نافذة جديدة أو في علامة تبويب جديدة. تسمح لك الروابط مع السمة الهدف = "_فراغ" بفتح المحتوى في نافذة جديدة أو في علامة تبويب متصفح جديدة. إذا كانت وظيفة فتح رابط في نافذة جديدة أو في علامة تبويب جديدة مهمة ، فلا يمكن للإدخال استبدال ملف بالكامل.
- حرية محدودة في التصميم. يمكن تصميم الروابط لتلبية متطلبات تصميم معينة. يحتوي عنصر الإدخال على أنماط قياسية خاصة به ، والتي يمكن تغييرها باستخدام كس ، ولكن يمكن أن يكون تصميم الإدخال محدودا ولا يحقق دائما التأثير المرئي المطلوب.
- صعوبات في الوصول. تحتوي الروابط على وظائف مضمنة تسمح لك بإنشاء نقرات باستخدام لوحة المفاتيح. هذا مهم بشكل خاص للمستخدمين ذوي الإعاقة الذين يحتاجون إلى استخدام وظيفة لوحة المفاتيح. قد لا يكون لعنصر الإدخال نفس الوظيفة ، مما قد يقلل من قابلية الاستخدام.
على الرغم من بعض القيود ، قد يكون لاستخدام الإدخال بدلا من الارتباط مزاياه. يجب أن يؤخذ السياق والوظائف المطلوبة لصفحة الويب في الاعتبار عند اتخاذ قرار باستخدام الإدخال بدلا من أ. من المهم التحقق من كيفية تأثير الإدخال على تحسين محسنات محركات البحث وسهولة استخدام صفحة الويب واختبارها قبل اتخاذ قرار نهائي.
كيفية إنشاء ارتباط إدخال باستخدام هتمل و كس
يعد إنشاء ارتباط باستخدام علامة مهمة بسيطة إلى حد ما في هتمل. ومع ذلك ، إذا كنت ترغب في إنشاء ارتباط داخل عنصر ، فقد تحتاج إلى القليل من التصميم الإضافي باستخدام كس. في هذه المقالة ، سننظر في كيفية إنشاء ارتباط إدخال باستخدام هتمل و كس.
تتمثل الخطوة الأولى في إنشاء عنصر بسمة "النوع" تساوي "الزر". على سبيل المثال ، لنقم بإنشاء زر بالنص "رابط".
بعد ذلك ، يمكننا إضافة أنماط إلى الزر باستخدام كس. للقيام بذلك ، سنحتاج إلى معرف أو فئة للإشارة إلى الزر في كس. على سبيل المثال ، سوف نستخدم المعرف "زر الارتباط".
أخيرا ، قم بتعيين معرف" زر الارتباط " للعنصر.
الآن لدينا الزناد المدخلات سوف تبدو وكأنها زر مع التصميم مماثل لرابط قياسي. إذا كنا بحاجة إلى إضافة رابط إلى هذا العنصر ، فيمكننا استخدام جافا سكريبت لإعادة توجيه المستخدم إلى عنوان ورل المطلوب بنقرة زر واحدة.
بشكل عام ، يعد إنشاء ارتباط إدخال باستخدام هتمل و كس مهمة بسيطة إلى حد ما. كل ما عليك القيام به هو إضافة التصميم باستخدام كس ، وإذا لزم الأمر ، ومعالجة الحدث انقر باستخدام جافا سكريبت. يمكن أن تكون هذه التقنية مفيدة عندما تحتاج إلى إضافة إمكانية النقر لتشكيل عناصر ليست روابط افتراضية.
سؤال وجواب
كيف يمكنني استخدام المدخلات كمرجع في التعليمات البرمجية?
من أجل استخدام الإدخال كمرجع في التعليمات البرمجية ، تحتاج فقط إلى تعيين قيمة إدخال المستخدم إلى متغير واستخدامه كمرجع.
ما هي الميزات عند استخدام الإدخال كحلقة وصل?
الميزة الرئيسية هي أنه عند استخدام الإدخال كرابط ، سيتم إرسال القيمة باستخدام طلب الحصول ، وبالتالي فإن رؤية البيانات المدخلة في ورل ممكن.
ما هي الأمثلة على استخدام المدخلات كحلقة وصل هناك?
غالبا ما توجد أمثلة على استخدام الإدخال كروابط في نماذج البحث على مواقع الويب أو كروابط لتصفية البيانات أو فرزها على الصفحة.
هل من الممكن استخدام المدخلات كحلقة وصل مع المعلمات?
نعم ، يمكنك استخدام الإدخال كرابط مع المعلمات عن طريق إضافة معلمات إلى عنوان ورل مع القيم المدخلة. على سبيل المثال: example.com/search ?الاستعلام = القيمة
ما هي مزايا استخدام المدخلات كحلقة وصل?
تتمثل إحدى مزايا استخدام الإدخال كرابط في القدرة على نقل بيانات إدخال المستخدم إلى صفحة أو خادم آخر لمعالجة وعرض النتائج المقابلة.