يعد شريط البحث على صفحة الويب أحد العناصر الرئيسية لضمان راحة المستخدم. بفضل هذا العنصر ، يمكن للمستخدمين العثور بسرعة وسهولة على المعلومات التي يحتاجونها. في هذه المقالة ، سوف ننظر في كيفية إنشاء شريط البحث باستخدام هتمل و كس.
يبدأ إنشاء شريط بحث بترميز هتمل. للقيام بذلك ، استخدم العلامة مع سمة النوع="نص". لإضافة زر بحث ، يمكنك استخدام علامة ، وإضافة رمز ، يمكنك استخدام علامة مع الصورة المطلوبة. يجدر أيضا إضافة بعض السمات ، مثل الاسم والعنصر النائب ، لتعيين اسم العنصر وتلميحا للمستخدم.
عندما يكون ترميز هتمل جاهزا ، يمكنك البدء في تنسيق شريط البحث باستخدام كس. هنا يمكنك تعيين أنماط لعناصر شريط البحث ، مثل الخط ولون النص والخلفية وما إلى ذلك. يمكنك أيضا استخدام فئات زائفة لتعيين أنماط لحالات مختلفة لعنصر ما ، مثل التمرير أو الحالة النشطة.
- دليل لإنشاء شريط بحث على صفحة ويب
- الشروع في العمل مع هتمل و كس
- وضع علامة على العناصر الرئيسية لشريط البحث
- إضافة أنماط إلى شريط البحث باستخدام كس
- إنشاء حقل إدخال لاستعلام بحث
- إضافة زر بحث إلى شريط البحث
- العمل مع الأحداث لشريط البحث
- إضافة اقتراحات إلى شريط البحث
- تحسين شريط البحث باستخدام جافا سكريبت
- سؤال وجواب
- العلامة التي تستخدم لإنشاء شريط بحث?
- كيف يمكنني إضافة رمز البحث إلى شريط البحث?
- كيف يمكنني تغيير أنماط شريط البحث باستخدام المغلق?
- كيف يمكنني إضافة زر" بحث " بجوار شريط البحث?
- هل من الممكن إضافة قائمة منسدلة للاقتراحات إلى شريط البحث?
- كيف يمكنني إضافة وظيفة الإكمال التلقائي إلى شريط البحث?
دليل لإنشاء شريط بحث على صفحة ويب
اليوم ، تعد وظيفة البحث جزءا لا يتجزأ من العديد من مواقع الويب. يتيح شريط البحث للمستخدمين العثور بسهولة على المعلومات التي يحتاجونها على صفحة الويب. في هذا الدليل ، وسوف ننظر في كيفية إنشاء شريط بحث بسيط باستخدام هتمل و كس.
الخطوات المطلوبة لإنشاء شريط بحث:
إضافة أنماط لشريط البحث. على سبيل المثال ، يمكنك استخدام كس لتعيين حجم ولون النص:
معالجة استعلام البحث على الخادم (غير مشمول في هذا الدليل).
كان هذا دليلا سريعا لإنشاء شريط بحث بسيط على صفحة ويب باستخدام هتمل و كس. يمكنك استكمال هذا الرمز وإضافة وظائف إضافية وفقا للحاجة الخاصة بك. حظا سعيدا في إنشاء شريط البحث الخاص بك!
الشروع في العمل مع هتمل و كس
- كس (أوراق الأنماط المتتالية) هي لغة نمط تستخدم لتغيير مظهر صفحات الويب. يسمح لك بتحديد الألوان والخطوط والأحجام والهوامش والعديد من الجوانب الأخرى للتصميم.
- صفحة هتمل بسيطة:
- افتح العلامة
- افتح العلامة
- أغلق العلامة
- داخل العلامة
يمكنك استخدام عناصر هتمل المختلفة مثل العناوين والفقرات والقوائم والجداول لتنظيم المحتوى الخاص بك وهيكلته.
أغلق العلامات
و
.
مثال على صفحة هتمل بسيطة:
"'أتش تي أم أل
أول صفحة أتش تي أم أل
إضافة أنماط باستخدام كس:
- أو أعلن الأنماط داخل كتلة
- صفحة هتمل الخاصة بك.
- ح1
- محدد يحدد جميع عناصر رأس المستوى الأول في الصفحة.
أعلن خصائص المغلق داخل الأقواس المتعرجة. على سبيل المثال,
اللون: أحمر;
يحدد اللون الأحمر للنص.
مثال على إضافة أنماط باستخدام كس:
"'أتش تي أم أل
أول صفحة هتمل مع كس
هذه هي أول صفحة هتمل مع كس.
«`
- الآن أنت بالفعل على دراية أساسيات هتمل و كس. يمكنك إنشاء صفحات ويب منظمة باستخدام هتمل وأسلوب لهم باستخدام كس.
- حظا سعيدا في رحلتك عبر عالم تطوير الويب!
- وضع علامة على العناصر الرئيسية لشريط البحث
- عند إنشاء شريط بحث على صفحة ويب ، من الضروري مراعاة العناصر المختلفة التي ستساعد المستخدمين على الدخول والبحث عن المعلومات. فيما يلي العناصر الرئيسية التي يجب أن تكون موجودة في شريط البحث:
حقل الإدخال هو حقل نصي يقوم فيه المستخدم بإدخال الكلمات الرئيسية للبحث.
- زر البحث هو الزر الذي ينقر عليه المستخدم لبدء البحث.
- تلميحات الأدوات هي تلميح أداة يتم عرضه عند إدخال نص في حقل البحث ويساعد المستخدم في تحديد استعلامه أو إكماله.
- قائمة النتائج هي قائمة من الروابط أو المعلومات الموجزة المعروضة بعد إجراء البحث.
- عادة ما يتم ترتيب عناصر شريط البحث أفقيا واحدة تلو الأخرى. فيما يلي تخطيط تقريبي للعناصر الرئيسية:
قائمة النتائج
النتيجة 1
النتيجة 2
النتيجة 3
يتيح لك هذا الترميز إنشاء شريط بحث بسيط ومفهوم على صفحة ويب حيث يمكن للمستخدم إدخال الكلمات الرئيسية والحصول على المعلومات اللازمة.
إضافة أنماط إلى شريط البحث باستخدام كس
لإضافة أنماط لشريط البحث على صفحة ويب ، يمكننا استخدام كس. سيسمح لنا ذلك بتغيير مظهر عناصر البحث وجعلها تتطابق مع تصميم موقعنا.
هنا مثال على رمز كس التي يمكن استخدامها لنمط شريط البحث:
الإدخال [النوع="بحث"] {
الحشو: 10 بكسل;
الحدود: لا شيء;
نصف قطر الحدود: 5 بكسل;
background-color: #f5f5f5;
font-size: 16px;
width: 200px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
input[type="submit"] {
padding: 10px;
border: none;
border-radius: 5px;
background-color: #ccc;
color: #fff;
font-size: 16px;
cursor: pointer;
}
В данном примере мы стилизуем два элемента: саму текстовую строку поиска (элемент с атрибутом type=»search») и кнопку поиска (элемент с атрибутом type=»submit»). نحن نستخدم خصائص كس المختلفة مثل الحشو ، الحدود ، دائرة نصف قطرها الحدود ، لون الخلفية ، حجم الخط والعرض ومربع الظل لتغيير مظهر العناصر.
يمكنك تغيير قيم خصائص كس لتحقيق المظهر المطلوب لشريط البحث الخاص بك. لاحظ أيضا أنه يمكنك استخدام الفئات أو المعرفات لتحديد عناصر معينة على الصفحة وتطبيق الأنماط عليها فقط.
على سبيل المثال:
- في هذا المثال ، نضيف فئات البحث-الإدخال والبحث-زر لعناصرنا وتطبيق أنماط فقط لهم باستخدام كس.
- من خلال تغيير قيم خصائص كس ، يمكنك إنشاء تصميم فريد وجذاب لشريط البحث الذي يطابق موقع الويب الخاص بك.
- إنشاء حقل إدخال لاستعلام بحث
في صفحة الويب ، يمكنك إضافة حقل إدخال حيث يمكن للمستخدمين إدخال استعلامات البحث. لإنشاء مثل هذا الحقل ، اتبع الخطوات التالية:
استخدم العلامة مع سمة النوع="نص" لإنشاء حقل إدخال حيث يمكن للمستخدم إدخال استعلام البحث الخاص به.
أضف الاسم = سمة"بحث" لتحديد اسم حقل الإدخال.
أضف سمة العنصر النائب مع النص الذي سيتم عرضه في حقل الإدخال حتى يبدأ المستخدم في كتابة استعلامه.
نموذج التعليمات البرمجية:
- عند استخدام هذا الرمز ، سيتم عرض حقل إدخال مع المطالبة "إدخال استعلام بحث" على صفحة الويب الخاصة بك ، والتي يمكن للمستخدمين استخدامها لإدخال استعلامات البحث الخاصة بهم.
- غالبا ما تستخدم صفحات الويب شريط بحث حيث يقوم المستخدمون بإدخال كلمات رئيسية للبحث عن معلومات معينة. لتحسين وظائف شريط البحث ، يمكنك إضافة زر بحث لتسهيل إرسال المستخدم لطلب.
- أتش تي أم أل:
- لف شريط البحث وزر البحث في عنصر النموذج لإرسال بيانات استعلام البحث:
| إضافة زر بحث إلى شريط البحث |
| يمكنك استخدام عناصر هتمل وأنماط كس لإضافة زر بحث إلى شريط البحث. | قم بإنشاء عنصر إدخال بسمة النوع مساوية لـ " نص " لإنشاء سلسلة بحث: |
| قم بإنشاء عنصر زر لإنشاء زر بحث: | أتش تي أم أل: بحث |
| أتش تي أم أل: |
بحث
إضافة أنماط كس لتحسين مظهر شريط البحث وزر البحث:
المغلق:
- فار سيرتشكست = الحدث.الهدف.القيمة;
- يمكن أيضا استخدام الأحداث لتحديث نتائج البحث تلقائيا عندما يقوم المستخدم بإدخال البيانات. مثال على استخدام حدث "الإدخال" لمعالجة تغيير القيمة في شريط البحث:
إضافة هتمل لشريط البحث:
إضافة جافا سكريبت للتعامل مع الحدث:
- وثيقة.جيتليمنتبيد ("بحث").أدفنتليستينر ("الإدخال" ، وظيفة (الحدث) {
فار سيرتشكست = الحدث.الهدف.القيمة;
| // قم بإجراء بحث باستخدام النص من شريط البحث | ||
|---|---|---|
|
|
في هذا المثال ، أضفنا معالج الأحداث" الإدخال "إلى العنصر باستخدام معرف" البحث". يتم استدعاء وظيفة المعالج في كل مرة يتم فيها تغيير القيمة في شريط البحث بواسطة المستخدم.
باستخدام الأحداث ، يمكنك تنفيذ وظائف مختلفة لشريط البحث ، مثل التحقق من صحة الإدخال أو عرض تلميحات عند إدخال البيانات.
إضافة اقتراحات إلى شريط البحث
يسمح شريط البحث على صفحة الويب للمستخدمين بإدخال معايير البحث للبحث عن المعلومات على الموقع. ومع ذلك ، لتحسين تجربة المستخدم ، يمكنك إضافة تلميحات إلى شريط البحث لمساعدة المستخدمين على ملء حقل البحث بشكل صحيح.
- هناك عدة طرق لإضافة اقتراحات إلى شريط البحث:
- المدمج في تلميحات: يتم عرض الاقتراحات المضمنة داخل حقل البحث قبل أن يبدأ المستخدم في الكتابة. يمكن أن يكون نصا ثابتا يصف معايير البحث المتوقعة أو كلمات محددة يمكن استخدامها في استعلام البحث.
- الملء التلقائي: يوفر الإكمال التلقائي خيارات استعلام البحث بناء على ما بدأ المستخدم بالفعل في كتابته. وبالتالي ، تتغير التلميحات ديناميكيا وفقا للنص الذي أدخله المستخدم.
- قائمة العروض: قائمة الاقتراحات هي قائمة منسدلة بقيم ثابتة أو ديناميكية يمكن للمستخدم تحديدها وإضافتها إلى حقل البحث.
- من الممارسات الجيدة الجمع بين هذه الأساليب لتزويد المستخدمين بمجموعة متنوعة من الخيارات وتبسيط عملية ملء شريط البحث على صفحة الويب.
وعادة ما تستخدم جافا سكريبت وأياكس لتنفيذ تلميحات في شريط البحث. جافا سكريبت يسمح لك لمعالجة إدخال المستخدم وتغيير حيوي الاقتراحات وفقا للنص الذي تدخله. اياكس يسمح لك للحصول على البيانات من الخادم دون إعادة تحميل الصفحة ، وهو أمر مفيد خصوصا للإكمال التلقائي أو قائمة الاقتراحات.
لإضافة تلميحات إلى شريط البحث على صفحة ويب ، يجب عليك استخدام شفرة جافا سكريبت المناسبة وترميز هتمل لعرض ومعالجة التلميحات.
أتش تي أم أل
المغلق
جافا سكريبت
حقل البحث
المدمج في تلميحات
قائمة العروض
أسلوب شريط البحث والاقتراحات
التحديث الديناميكي للتلميحات
إرسال الطلبات إلى الخادم (إذا لزم الأمر)
قد يستغرق تنفيذ التلميحات في شريط البحث بعض الوقت ، لكن الأمر يستحق الجهد المبذول لتحسين تجربة المستخدم ومساعدته في العثور على المعلومات التي يحتاجها بشكل أسرع وأكثر دقة على صفحة الويب.
تحسين شريط البحث باستخدام جافا سكريبت
عند إنشاء شريط بحث على صفحة ويب ، يمكنك استخدام جافا سكريبت لإضافة وظائف إضافية وتحسين تجربة المستخدم.