كيفية إنشاء مربع بحث متحرك باستخدام HTML CSS و JavaScript

مرحبًا أيها القراء ، ستتعلم اليوم في هذه المدونة كيفية إنشاء شريط / مربع بحث متحرك باستخدام HTML CSS وجافا سكريبت.

 

يعد مربع البحث أهم عنصر رسومي موجود في كل موقع ويب. يعمل كحقل لإدخال استعلام أو مصطلح بحث من المستخدم للبحث عن البيانات ذات الصلة واستردادها من قاعدة البيانات. يمكن لشريط البحث البسيط أن يستخدم HTML و CSS وجافا سكريبت فقط.

 

في هذا البرنامج [Animated Search Box] ، في البداية ، على صفحة الويب ، لا يوجد سوى رمز بحث وعندما تنقر على هذا الرمز ، يظهر إدخال البحث بحركة مرنة. عندما تكتب شيئًا ما وتنقر على أيقونة البحث ، تظهر بياناتك المكتوبة أسفل شريط البحث. يظهر أيضًا رمز إلغاء أو إخفاء [رمز علامة الصليب] وعند النقر فوق رمز الإلغاء هذا ، سيتم إخفاء إدخال البحث المرئي وبياناتك المكتوبة.

 

إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل عن هذا البرنامج [Elastic Animation on Search Bar].

 

لقد شاهدت في الفيديو شريط بحث متحرك وآمل أن تكون قد فهمت الرموز الأساسية وراء إنشاء هذا البرنامج. لقد استخدمت JavaScript خالصًا لإنشاء شريط البحث هذا ، لذا إذا كنت مبتدئًا وتعرف القليل من JavaScript ، فيمكنك بسهولة إنشاء هذا النوع من الرسوم المتحركة شريط البحث.

 

إذا كانت لديك معرفة باللغات الخلفية مثل PHP ، فيمكنك إضافة كود PHP وتوصيل مربع البحث هذا بقاعدة البيانات لاسترداد البيانات وفقًا استفسارات المستخدم. أعتقد أن برنامج شريط البحث الصغير هذا سيساعدك كثيرًا. إذا كنت تحب هذا البرنامج [Elastic Animation on Search Bar] وتريد الحصول على أكواد المصدر. يمكنك بسهولة الحصول على الأكواد المصدرية لهذا البرنامج.

 

مربع بحث متحرك

لإنشاء هذا البرنامج [Elastic Animation on Search Bar]. أولاً ، تحتاج إلى إنشاء ملفين ، أحدهما ملف HTML والآخر هو ملف CSS. بعد إنشاء هذه الملفات ، قم فقط بلصق الأكواد التالية في ملفك.